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: 5px 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>