YXGJ/cloud/feedback/index.vue

<template>
    <view>
        <My_listbox ref="List" @getlist="getList" :bottomHeight="70">
            <view class="item-box">
                <navigator @click="itemClick(item,index)" :url="'/cloud/feedback/detail?id='+item.sa_feedbackid" class="item" v-for="(item,index) in list" :key="item.sa_feedbackid">   
                    <view class="header">
                        <view class="header-left">
                            <text>{{ item.type }}</text>
                        </view>
                        <view class="header-right" v-if="item.isnew">
                            <text>新消息</text>
                        </view>
                    </view>
                    <view class="content">
                        {{ item.remarks }}
                    </view>
                    <view class="footer">
                        <view class="footer-left">
                            {{ item.createdate }}
                        </view>
                        <view class="footer-right">回复：{{ item.replycount }}</view>
                    </view>
                </navigator>
            </view>
        </My_listbox>
        <view class="bottom">
            <navigator @click="updateList" class="but" url="/cloud/feedback/insert">
                <view class="but">
                    <text>我要反馈</text>
                </view>
            </navigator>
        </view>
    </view>
</template>

<script>
export default {
    data () {
        return {
            list:[],
            content: {
                "pageNumber": 1,
                "pageSize": 20,
                "where": {
                    "condition": "",
                    "type": ""
                }
            },
        }
    },
    methods: {
        getList(init = false) {
            return new Promise((resolve, reject) => {
                if (this.paging(this.content, init)) return resolve();
                this.$Http.basic({
                    "id": "20240517102902",
                    content: this.content
                }).then(res => {
                    this.$refs.List.RefreshToComplete()
                    console.log("获取意见列表", res)
                    resolve();
                    if (this.cutoff(res.msg)) return;
                    this.list = res.pageNumber == 1 ? res.data : this.list.concat(res.data);
                    this.content = this.$refs.List.paging(this.content, res)
                    this.total = res.total;
                    this.$refs.List.setHeight()
                })
            })
        },
        async itemClick (data,index) {
            this.$Http.setCallCount = function () {
                let replycount = this.list[index].replycount + 1
                this.$set(this.list[index],'replycount',replycount)
            }.bind(this)
        },
        updateList () {
            this.$Http.updateList = function(res) {
                this.getList(true)
                delete this.$Http.updateList
            }.bind(this)
        }
    },
    onLoad (options) {
        uni.setNavigationBarTitle({
            title:'意见反馈',
        })
        this.getList(true)
    }
}
</script>

<style lang="scss">
    .item-box {
        padding: 10px;
        .item {
            background: #ffffff;
            padding: 19px 0 10px 10px;
            border-radius: 8px 8px 8px 8px;
            font-family: Source Han Sans SC, Source Han Sans SC;
            margin-top: 10px;
            &:first-child {
                margin-top: 0 !important;
            }
            .header {
                display: flex;
                justify-content: space-between;
                align-items: center;
                padding-right: 10px;
                .header-left {
                    position: relative;
                    padding-left: 10px;
                    &::after {
                        content:'';
                        width: 4px;
                        height: 16px;
                        background: #C30D23;
                        position: absolute;
                        left: 0;
                        top: 2px;
                    }
                }
                .header-right {
                    font-weight: 400;
                    font-size: 12px;
                    color: #E3041F;
                    position: relative;
                    &::after {
                        content:'';
                        width: 5px;
                        height: 5px;
                        border-radius: 50%;
                        background: #E3041F;
                        position: absolute;
                        left: -8px;
                        top: 6px;
                    }
                }
            }
            .content {
                font-weight: 400;
                font-size: 14px;
                color: #666666;
                margin: 10px 0;
                padding:0 10px 10px 0;
                border-bottom: 1px solid #DDDDDD;
            }
            .footer {
                display: flex;
                align-items: center;
                justify-content: space-between;
                font-weight: 400;
                font-size: 12px;
                color: #999999;
                padding-right: 10px;
            }
        }
    }
    .bottom {
        display: flex;
        position: fixed;
        bottom: 0;
        left: 0;
        width: 375px;
        height: 64px;
        background: #FFFFFF;
        box-shadow: 0px -2px 6px 1px rgba(0, 0, 0, 0.16);
        box-sizing: border-box;
        z-index: 9999999;
        padding: 10px;
        .but { 
            width: 355px;
            height: 45px;
            font-family: PingFang SC, PingFang SC;
            font-weight: 500;
            font-size: 14px;
            color: #FFFFFF;
            background: #C30D23;
            border-radius: 5px 5px 5px 5px;
            border: 1px solid #FFFFFF;
            display: flex;
            align-items: center;
            align-content: center;
            justify-content: space-evenly;
        }
    }
</style>