safetyHome_wxapp/pages/complain/index.vue

<template>
	<view style="margin-top: 40rpx;">
		<scroll ref="pullScroll" :pullDown="pullDown" :pullUp="loadData">
			<view class="item" v-for="(item,index) in data" :key="index">
				<view class="left">
					<image :src="item.headImg" style="width: 100%;height: 100%;"></image>
				</view>
				<view class="right">
					<view style="width:100%;height:44rpx;display: flex;justify-content: space-between;">
						<view class="name">{{item.createBy}}</view>
						<view class="topBtn" v-if="item.state==2">已处理</view>
						<view v-else-if="item.state==1" class="topBtn" style="border:2rpx solid rgba(41,138,253,1);color:#298AFD;">未处理</view>
					</view>
					<view class="text">
						{{item.content}}
					</view>
					<view class="img" v-show="item.photosUrlList.length>0" >
						<image :src="img" style="width: 180rpx;height: 180rpx;padding-right: 10rpx;margin-bottom: 10rpx;"@tap="prew(item.photosUrlList,index1)" v-for="(img,index1) in item.photosUrlList"
						 :key="index1"></image>
					</view>
					<!-- 回复信息 -->
					<view class="replay" v-if="item.reprList.length>0">
						<view style="width: 100%;margin: 20rpx 0rpx 20rpx 20rpx;"  v-for="(rep,index3) in item.reprList" :key="index3">
							<view class="replayItem" v-if="rep.disposeState==2">
								<view class="replayName" style="padding-right: 15rpx;" >
									<text style="font-size: 28rpx;color: #333333;font-family:PingFang SC;font-weight:bold;margin-right:5rpx;">{{rep.maintainBy}}
									</text><text style="color: rgba(41, 138, 253, 1);"> 回复</text><text style="font-size: 28rpx;color: #333333;font-family:PingFang SC;font-weight:bold;margin-left: 5rpx;">{{item.createBy}}:</text>
									<text style="font-size: 25rpx;padding-left: 5rpx;">{{rep.disposeResult}}</text></view>
								<!-- <view class="replayContent">{{rep.disposeResult}}</view> -->
							</view>
							<view class="replayItem"  v-else-if="rep.disposeState==3">
								<view class="replayName" style="padding-right: 15rpx;padding-top: 5rpx;">
								<uni-rate :value="rep.score" :disabled="true" ></uni-rate>
								</view>
								<view style="padding-top: 10rpx;">{{rep.disposeResult}}</view>
							</view>
						</view>
					</view>
					<!-- 我要评论 -->
					<view class="bottomBtn" @tap="myTalk(item.adviceId)" v-show="item.userId==userId &&item.state==2 ">我的评价</view>
					<view class="date">{{(item.createTime).substr(0,16)}}</view>
				</view>
			</view>
		</scroll>
		<!-- 底部按钮 -->
		<button class="btnBox" @tap="myRepairs">
			我要投诉
		</button>
	</view>
</template>

<script>
	import uniRate from '@/components/uni-rate/uni-rate.vue'
	export default {
		data() {
			return {
				userId:uni.getStorageSync('userId'),
				data: [],
				total: 0, //总条数
				pageNum: 1, //页数
				pageSize: 10, //每页显示多少条数
			}
		},
		onLoad() {
			this.refresh();
		},
		onUnload() {
			uni.switchTab({
				url:'../index/index'
			})
		},
		components: {
			uniRate
		},
		methods: {
			// 预览图片
			prew(item,index){
				uni.previewImage({
				  current:item[index],
				 	urls:item,
				success:(res)=>{
				
				},
				})
			},
			// 刷新页面
			refresh() {
				this.$nextTick(() => {
					this.$refs.pullScroll.refresh();
				});
			},
			// 向下拉刷新
			pullDown(pullScroll) {
				setTimeout(() => {
					this.loadData(pullScroll);
				}, 200);
			},
			//获取加载数据
			loadData(pullScroll) {
				this.pageNum = pullScroll.page
				if(pullScroll.page==1){
					this.data=[]
				}
				setTimeout(() => {
					this.http.httpRequest('/wxapplet/owneradvice/list', 'get', {
						pageNum: pullScroll.page,
						pageSize: this.pageSize,
						userId: uni.getStorageSync("userId")
					}).then((res) => {
						if (res.code == 0) {
							//判断数据是否加载完
							if (this.data.length == res.data.total) {
								pullScroll.finish();
							} else {
								pullScroll.success();
								let data = res.data.rows
								console.log(this.data);
								console.log(data);
								this.data = this.data.concat(data);
							}
						} else {
							pullScroll.finish();
							uni.showToast({
								title: res.msg,
								"icon": 'none'
							})
						}
					}).catch(()=>{
						pullScroll.finish();
					})
				}, 500);
			},
			// 我的评价
			myTalk(item) {
				uni.navigateTo({
					url: "./evaluateCompalin?id=" + item
				})
			},
			// 我要投诉
			myRepairs() {
				uni.navigateTo({
					url: "./wantCompalin"
				})
			}

		}
	}
</script>

<style scoped>
	.leftBtn {
		width: 340rpx;
		height: 90rpx;
		background: rgba(102, 193, 143, 1);
		opacity: 1;
		border-radius: 18rpx;
		font-size: 32rpx;
		font-family: PingFang SC;
		font-weight: bold;
		color: rgba(255, 255, 255, 1);
		text-align: center;
		line-height: 90rpx;
	}

	.rightBtn {
		width: 340rpx;
		height: 90rpx;
		background: rgba(41, 138, 253, 1);
		opacity: 1;
		border-radius: 18rpx;
		font-size: 32rpx;
		font-family: PingFang SC;
		font-weight: bold;
		color: rgba(255, 255, 255, 1);
		text-align: center;
		line-height: 90rpx;
	}

	.btnBox {
		width: 702rpx;
		height: 90rpx;
		position: fixed;
		bottom: 56rpx;
		left: 24rpx;
		background: rgba(41, 138, 253, 1);
		opacity: 1;
		border-radius: 18rpx;
		font-size: 32rpx;
		font-family: PingFang SC;
		font-weight: bold;
		color: rgba(255, 255, 255, 1);
		text-align: center;
		line-height: 90rpx;
		z-index: 999;
	}

	.date {
		width: 230rpx;
		height: 34rpx;
		font-size: 24rpx;
		font-family: PingFang SC;
		font-weight: 400;
		color: rgba(204, 204, 204, 1);
		margin-top: 10rpx;
		margin-left: 356rpx;
		text-align: right;
		margin-bottom: 30rpx;
	}

	.bottomBtn {
		width: 140rpx;
		height: 42rpx;
		background: rgba(255, 255, 255, 1);
		border: 2rpx solid rgba(41, 138, 253, 1);
		opacity: 1;
		border-radius: 22rpx;
		font-size: 20rpx;
		font-family: PingFang SC;
		font-weight: 400;
		line-height: 42rpx;
		color: rgba(41, 138, 253, 1);
		text-align: center;
		margin-top: 40rpx;
		margin-left: 446rpx;

	}

	.replayItem {
		margin-top: 10rpx;
	}

	.replayContent {
		font-size: 24rpx;
		font-family: PingFang SC;
		font-weight: 400;
		color: rgba(51, 51, 51, 1);
		margin-top: 4rpx;
	}

	.replay {
		width: 586rpx;
		margin-top: 20rpx;
		background: rgba(247, 247, 247, 1);
		opacity: 1;
		border-radius: 8rpx;
		overflow: hidden;
	}

	.text {
		width: 100%;
		font-size: 32rpx;
		font-family: PingFang SC;
		font-weight: 400;
		color: rgba(51, 51, 51, 1);
		margin-top: 30rpx;
	}

	.img {
		width: 100%;
		margin-top: 10rpx;
		display: flex;
		flex-wrap: wrap;
	}

	.img image :nth-child(3n) {
		margin-right: none;
	}

	.name {
		font-size: 32rpx;
		font-family: PingFang SC;
		font-weight: bold;
		color: rgba(41, 138, 253, 1);

	}

	.topBtn {
		width: 120rpx;
		height: 42rpx;
		background: rgba(255, 255, 255, 1);
		border: 2rpx solid rgba(204, 204, 204, 1);
		opacity: 1;
		border-radius: 22rpx;
		font-size: 20rpx;
		font-family: PingFang SC;
		font-weight: 400;
		color: rgba(204, 204, 204, 1);
		text-align: center;
		line-height: 42rpx;
	}

	.item {
		width: 702rpx;
		margin: 0 auto;
		border-bottom: 2rpx solid rgba(247, 247, 247, 1);
		display: flex;
		margin-top: 35rpx;
	}

	.left {
		width: 86rpx;
		height: 86rpx;
	}

	.right {
		width: 586rpx;
		margin-left: 30rpx;
	}
</style>