uniapp-shunfengche/my/setting/myTousu.vue

<template>
	<view class="bonus-main">
		<view class="complain_box" v-for="(item,index) in matchdata" :key="index" @click="bindonline(item)">
			<view class="complain_part1">
				<view class="part1_left">{{item.illegal}}</view>
				<!-- <view class="part1_left" v-if="item.complaintType=='2'">拒绝系统推单</view> -->
				<!-- <view class="part1_left" v-if="item.complaintType=='3'">残损违规</view> -->
				<!-- <view class="part1_right">扣款{{item.deductMoney}}元</view> -->
				<view class="part1_rights1">{{item.complaintTime}}</view>

			</view>
			<view class="complain_part2 " v-if="item.shipAddress">
				<view class="green"></view>
				<text>{{item.shipAddress}}</text>
			</view>
			<view class="complain_part2 " v-if="item.deliveryAddress">
				<view class="orgin"></view>
				<text>{{item.deliveryAddress}}</text>
			</view>
			<view class="flex padding-lr margin-top-xs" v-if="item.wrongExplain">
				<view>投诉内容：</view>
				<view style="overflow: hidden;width: 480rpx;">{{item.wrongExplain}}</view>
			</view>
			<u-line color="#E6E6E6" />
			<view class="complain_title">
				<!-- <span v-if="item.complaintState=='1'">可申诉</span>
				<span v-if="item.complaintState=='2'">申诉中</span>
				<span v-if="item.complaintState=='3'">申诉未通过</span>
				<span v-if="item.complaintState=='4'">申诉通过</span> -->
				<span v-if="item.complaintState=='5'">待审核</span>
				<span v-if="item.complaintState=='6'">投诉未通过</span>
				<span v-if="item.complaintState!='6'&&item.complaintState!='5'">申诉通过</span>
			</view>
		</view>

		<!-- <view class="list-item" v-if="matchdata.length>0" :show-arrow="false" v-for="(item, index) in matchdata"
			:key="index">
			
			<view class="list-item-wrap">
				<view style="padding: 20rpx 30rpx;">
					<view class="list-title">投诉类型：{{ item.illegal }}</view>
					<view class="list-title">投诉内容：{{ item.wrongExplain }}</view>
					<view class="list-title" style="margin-top: 10upx;">被举报人：{{ item.byUserName }}</view>
					<view style="display: flex;justify-content: space-between;margin-top: 10rpx;">
						<view>
							<text>举报时间：{{ item.createAt }}</text>
						</view>
					</view>
					<view class="list-title" style="margin-top: 10upx;" v-if="item.status==0">状态：待处理
					</view>
					<view class="list-title" style="margin-top: 10upx;" v-if="item.status==4">状态：已处理
					</view>
					<view class="list-title" style="margin-top: 10upx;" v-if="item.status==1">状态：已驳回
					</view>
					<view class="list-title" style="margin-top: 10upx;" v-if="item.status==2">状态：已封号
					</view>
					<view class="list-title" style="margin-top: 10upx;" v-if="item.status==3">状态：已删除 </view>
					<view class="list-title" style="margin-top: 10upx;" v-if="item.auditContent">
						处理结果：{{ item.auditContent }}</view>
			</view>
		</view> -->
		<!-- 加载更多提示 -->
		<!-- <view class="s-col is-col-24" v-if="matchdata.length > 0">
			<load-more :loadingType="loadingType" :contentText="contentText"></load-more>
		</view> -->
		<!-- 加载更多提示 -->
		<empty v-if="matchdata.length === 0" des="暂无数据" show="false"></empty>
	</view>
</template>

<script>
	import empty from '@/components/empty.vue'
	export default {
		components: {
			empty
		},
		data() {
			return {
				page: 1,
				limit: 5,
				userId: '',
				type: 3,
				loadingType: 0,
				scrollTop: false,
				matchdata: [],
				contentText: {
					contentdown: '上拉显示更多',
					contentrefresh: '正在加载...',
					contentnomore: '没有更多数据了'
				}
			};
		},
		onLoad() {
			this.mymatch()
		},
		methods: {
			mymatch() {
				this.loadingType = 1;
				uni.showLoading({
					title: '加载中...'
				});
				let userId = this.$queue.getData("userId");
				let data = {
					page: this.page,
					limit: this.limit
				}
				this.$Request.getT('/app/indent/getUserComplaint', data).then(res => {
					uni.stopPullDownRefresh();
					if (res.code === 0 && res.data) {
						if (this.page === 1) {
							this.matchdata = [];
						}

						res.data.records.forEach(d => {
							if (d.image) {
								d.image = d.image.split(',');

							}
							this.matchdata.push(d);

						});
						if (res.data.records.length === this.limit) {
							this.loadingType = 0
						} else {
							this.loadingType = 3
						}
						uni.hideLoading()
					} else {
						this.loadingType = 2;
						uni.hideLoading();
					}
				})

			},
			// 删除
			disposeDelete(item) {
				uni.showModal({
					title: '删除提醒',
					content: '确定要删除此条信息？',
					success: e => {
						if (e.confirm) {
							this.$Request.getT(`/userReport/delete?id=${item.id}`).then(res => {
								if (res.status === 0) {
									this.$queue.showToast('删除成功');
									this.page = 1
									this.matchdata = [];
									this.mymatch()
								}
							});
						}
					}
				});
			}, // 查看图片
			saveImg(imgs, index) {
				let that = this;
				let imgArr = imgs
				// imgArr.push(imgs);
				// //预览图片
				uni.previewImage({
					urls: imgArr,
					current: imgArr[index]
				});
			},
		},
		onReachBottom: function() {
			this.page = this.page + 1;
			this.mymatch();
		},
		onPullDownRefresh: function() {
			this.page = 1;
			this.mymatch();
		},
	};
</script>

<style>
	page {
		background-color: #F5F5F5;
	}

	.list-item {
		background-color: #FFFFFF;
		border-radius: 16rpx;
		margin: 20rpx 20rpx 20rpx 20rpx;
	}

	.img1 {
		width: 100%;
		height: 400rpx;
	}

	.img2 {
		width: 210rpx;
		height: 210rpx;
		margin-top: 15rpx;
		margin-right: 5rpx;
		margin-left: 15rpx;
	}

	.green {
		width: 16rpx;
		height: 16rpx;
		background: #1FC657;
		border-radius: 50%;
		margin-right: 20rpx;
	}

	.orgin {
		width: 16rpx;
		height: 16rpx;
		background: #FBAC04;
		border-radius: 50%;
		margin-right: 20rpx;
	}

	/* 全部 */
	.complain_box {
		width: 90%;
		margin: 0 auto;
		/* height: 300rpx; */
		background: #ffffff;
		margin-top: 30rpx;
		border-radius: 17rpx;
	}

	.complain_part1 {
		width: 90%;
		margin: 0 auto;
		display: flex;
		/* padding-top: 20rpx; */
	}

	.part1_left {
		flex: 1;
		font-size: 26rpx;
		font-weight: bold;
		letter-spacing: 2rpx;
		height: 80rpx;
		justify-content: left;
		align-items: center;
		display: flex;
	}

	.part1_right {
		flex: 1;
		color: #FF1B1B;
		display: flex;
		justify-content: flex-end;
		align-items: center;
	}

	.part1_rights1 {
		flex: 1;
		color: #999999;
		display: flex;
		justify-content: flex-end;
		align-items: center;
	}

	.complain_part2 {
		/* width: 90%; */
		padding: 0 30rpx;
		margin: 10rpx auto;
		/* height: 50rpx; */
		display: flex;
		justify-content: left;
		align-items: center;
	}

	.complain_part2 image {
		width: 15rpx;
		height: 15rpx;
		margin-right: 20rpx;
	}

	.complain_part2 text {
		color: #999999;
		font-size: 24rpx;
	}

	.u-line {
		border-bottom-width: 3px !important;
		margin-top: 20rpx !important;
	}

	.complain_title {
		width: 90%;
		margin: 0 auto;
		height: 80rpx;
		display: flex;
		justify-content: flex-end;
		align-items: center;
		color: #FF2727;
		font-size: 27rpx;
		font-weight: bold;
		letter-spacing: 2rpx;
	}
</style>