shop_app/pages/mine/msg/feedback.vue

<template>
	<div class="whole">
		<view class="row" v-for="(item, index) in msgList" :key="item.id" @click="openDetail(item)">
			<view class="one">
				<view>
					<text>{{item.complain_reason}}</text>&nbsp;&nbsp;
					<up-tag plain type="error" size="mini" v-if="item.complain_type == 1" text="商品问题"></up-tag>
					<up-tag plain type="error" size="mini" v-else-if="item.complain_type == 2" text="服务问题"></up-tag>
					<up-tag plain size="mini" v-else-if="item.complain_type == 3" text="系统问题"></up-tag>
				</view>
				<text>{{item.created_at}}</text>
			</view>
			<view class="desc">{{item.added_desc}}</view>
			<view class="reply">商城回复：
				<text v-if="item.reply">{{item.reply}}</text>
				<text v-else>待回复</text>
			</view>
		</view>
		
		<view class="noMore" v-if="msgList.length && page >= lastPage && !loading">— 没有更多了 —</view>
		<view v-if="!msgList.length && !loading">
			<up-empty mode="list" icon="https://ct-upimg.yx090.com/g.ii090/images/sprite/empty/list.png" text="暂无数据"></up-empty>
		</view>
		<view v-if="loading" class="loadbox">
			<up-loading-icon text="加载中..." textSize="14"></up-loading-icon>
		</view>
		
		<up-popup :show="showDialog" mode="bottom" :round="10" @close="showDialog = false" closeable>
			<view class="itemBox">
				<view class="title">详情</view>
				<view class="content">
					<view class="tit">反馈内容：</view>
					<view>
						<up-tag plain type="error" size="mini" v-if="info.complain_type == 1" text="商品问题"></up-tag>
						<up-tag plain type="error" size="mini" v-else-if="info.complain_type == 2" text="服务问题"></up-tag>
						<up-tag plain size="mini" v-else-if="info.complain_type == 3" text="系统问题"></up-tag>
						<text>{{info.complain_reason}}</text>
					</view>
					<view class="desc">
						<text>{{info.added_desc}}</text>
						<view class="imgs">
							<image v-for="(it, index) in info.images" :key="index" :src="it + '?x-oss-process=image/format,webp'" :webp="true"
								mode="aspectFill" @click="preView(index, info.images)"></image>
						</view>
						<view class="time">{{info.created_at}}</view>
						<view class="no" v-if="info.order && info.order.order_sn" @click="toPage(info.order.id)">订单编号：{{info.order.order_sn}}</view>
					</view>
					<view class="reply">商城回复：
						<text v-if="info.reply">{{info.reply}}</text>
						<text v-else>待回复</text>
					</view>
				</view>
			</view>
		</up-popup>
	</div>
	
</template>

<script>
	import { ref, reactive, toRefs } from 'vue'
	import { get } from '@/api/request.js'
	
	export default {
		setup() {
			const data = reactive({
				page: 1,
				lastPage: 0,
				loading: true,
				msgList: [],
				info: {},
				showDialog: false
			})
			
			function getList(type) {
				data.loading = true
				get('/api/v1/feedback', {page: data.page, pageSize: 10}).then(res => {
					data.msgList = data.msgList.concat(res.data)
					data.lastPage = res.meta.last_page
					data.loading = false
				}).catch(() => {
					data.loading = false
				})
			}
			
			function openDetail(item) {
				data.info = item
				data.showDialog = true
			}
			
			const preView = (index, list) => {
				uni.previewImage({
					urls: list,
					current: index
				})
			}
			
			function toPage(id) {
				uni.navigateTo({
					url: '/pages/order/info/index?id=' + id
				})
			}
			
			return {
				...toRefs(data),
				getList,
				openDetail,
				preView,
				toPage
			}
		},
		async onLoad(options) {
			// await this.$onLaunched
			this.getList()
		},
		onReachBottom() {
			if (this.page < this.lastPage) {
				this.page++
				this.getList()
			}
		},
	}
</script>

<style lang="scss" scoped>
	.whole {
		padding: 1rpx 24rpx 24rpx;
		margin-bottom: 24rpx;
		.row{
			margin-top: 24rpx;
			box-sizing: border-box;
			font-size: 28rpx;
			background: #fff;
			padding: 20rpx;
			border-radius: 10rpx;
			.desc{
				font-size: 28rpx;
				overflow: hidden;
				text-overflow: ellipsis;
				white-space: nowrap;
				padding: 10rpx 0 16rpx;
			}
			.reply{
				border-radius: 6rpx;
				background-color: #f8f8f8;
				padding: 14rpx 20rpx;
				color: #444;
				font-size: 26rpx;
				text{
					line-height: 44rpx;
					overflow: hidden;
					text-overflow: ellipsis;
					display: -webkit-box;
					-webkit-line-clamp: 2;
					-webkit-box-orient: vertical;
					white-space: break-spaces;
				}
			}
		}
		.noMore{
			text-align: center;
			font-size: 24rpx;
			color: #999;
			margin: auto;
			padding: 30rpx 0;
			width: 100%;
		}
		.loadbox{
			padding: 30rpx 0;
			text-align: center;
			color: #666;
		}
	}
	.one{
		display: flex;
		align-items: center;
		justify-content: space-between;
		text{
			color: #9D9D9D;
			font-size: 26rpx;
		}
	}
	.itemBox{
		background-color: #fff;
		font-size: 28rpx;
		.content{
			height: calc(80vh - 80rpx);
			overflow: auto;
			padding: 24rpx;
			.tit{
				margin-bottom: 10rpx;
				font-weight: 600;
			}
		}
		.title{
			font-weight: 600;
			text-align: center;
			line-height: 80rpx;
		}
		.desc{
			padding: 10rpx 0 16rpx;
			color: #666;
			.imgs{
				display: flex;
				flex-wrap: wrap;
				margin-top: 14rpx;
				image{
					width: 60px;
					height: 60px;
					margin: 0 5px 5px 0;
				}
			}
			.time{
				color: #9D9D9D;
				font-size: 24rpx;
			}
			.no{
				text-decoration: underline;
				font-size: 24rpx;
				color: #2395f1;
				margin-top: 10rpx;
			}
		}
		.reply{
			border-radius: 6rpx;
			background-color: #f8f8f8;
			padding: 14rpx 20rpx;
			color: #444;
			font-size: 26rpx;
			text{
				line-height: 44rpx;
			}
		}
	}
</style>