byte-sailing-mobile/src/views/home/feedback.vue

<template>
	<van-nav-bar
		title="我的反馈"
		left-text=""
		left-arrow
		@click-left="onClickLeft"
		@click-right="onClickRight"
	>
		<template #right>
			反馈
		</template>
	</van-nav-bar>
	<van-search v-model="req.keyword"  placeholder="请输入关键词" @search="onRefresh" />

	<van-pull-refresh v-model="loading" @refresh="onRefresh" class="feedback">
		<van-tabs v-model:active="req.status" @click-tab="onRefresh">
            <van-tab title="全部" name="">

            </van-tab>
            <van-tab title="待回复" name='0'>
                
            </van-tab>
            <van-tab title="已回复" name='1'>

            </van-tab>
        </van-tabs>
		<div class="list">
			<van-list
				v-model:loading="loading"
				:finished="finished"
				finished-text="没有更多了"
				@load="onLoad"
				style="margin-bottom:60px"
			>
                <ul>
                    <li v-for="i in listData" :key="i.id" @click="toDtl(i)">
                        <div class="title">
                            {{i.problemStatement}}
                        </div>
                        <div class="time">
                           {{i.createTime}}
                        </div>
                        <div class="status">
                            {{i.status == 1 ? '已回复' : '待回复'}}
                        </div>
                    </li>
                </ul>
				
			</van-list>
		</div>
	</van-pull-refresh>
</template>
<script setup>
import { ref, getCurrentInstance, onMounted } from 'vue'
import commonList from '@/components/common-list.vue'
import { useRoute } from 'vue-router'
import { getUserInfo } from '@/utils/auth';
const loading = ref(false)
const router = useRoute()
const req = ref({
	pageNum:1,
	keyword:null,
	status:'',
})
const finished = ref(false);
const proxy = getCurrentInstance().proxy
const listData = ref([])


const listConfig = ref([
	{
		label: '姓名',
		prop: 'name',
	},
	{
		label: '公司名称',
		prop: 'companyName',
	},
	{
		prop:'contactInformation',
		label:'联系方式'
	}
])
const onRefresh = () => {
	req.value.pageNum = 1
	finished.value = false
	getList('refresh')
}
const onLoad = () => {
    getList()
}

const onClickLeft = () => proxy.$router.push('/main/working')

const onClickRight = () => {
	proxy.$router.push('/main/feedbackSubmit')
}
proxy.uploadDdRightBtn(onClickRight,'反馈')
const toDtl = (row) => {
	console.log(row)
	proxy.$router.push({
        path: 'feedbackDtl',
		query: row
      })
}
const warehouseType = ref([])

const getDict = () => {
    proxy.post('/dictTenantData/page',{
        pageNum: 1,
        pageSize: 999,
        tenantId:getUserInfo().tenantId,
        dictCode: "warehouse_type",
    }).then(res => {
		warehouseType.value = res.data.rows.map(item => {
			return {
				text: item.dictValue,
				value: item.dictKey
			}
		})
        getList()
    })
}

const getList = (type) => {
	loading.value = true
	proxy.post('/problemFeedback/page',req.value).then(res => {	
		res.data.rows.map(item => {
			warehouseType.value.map(type => {
				if(item.type == type.value) {
					item.typeName = type.text
				}
			})
		})
		listData.value = type === 'refresh' ? res.data.rows : listData.value.concat(res.data.rows)
		if(req.value.pageNum * 10 >= res.data.total) {
			finished.value = true
		}
		req.value.pageNum++	
		loading.value = false
		
		
		
	}).catch(err => {
		loading.value = false
	})
}
getDict()
</script>

<style lang="scss" scoped>
.list {
	min-height: 70vh;
    ul{
        li{
            padding: 12px 20px;
            background: #fff;
            margin: 16px 12px 0;
            border-radius: 8px;
            line-height: 28px;
            position: relative;
            .status{
                position: absolute;
                right: 0;;
                top: 0;
                width: 60px;
                height: 20px;
                line-height: 20px;
                text-align: center;
                border-radius: 0px 8px 0px 8px;
                font-size: 12px;
                background: #A0BBFB;
                color: #fff;
            }
        }
    }
}
</style>