safetyHome_wxapp/pages/onlineRpair/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.id)" v-show="item.userId==userId &&item.state==2">我的评价</view>
					<view class="date">{{(item.createTime).substr(0,16)}}</view>
				</view>
			</view>
		</scroll>
		<!-- 底部按钮 -->
		<view class="btnBox" @tap="myRepairs">
			我要报修
		</view>
	</view>
</template>

<script>
	import uniRate from '@/components/uni-rate/uni-rate.vue'
	export default {
		data() {
			return {
				userId: uni.getStorageSync('userId'),
				total: 0, //总条数
				data: [],
				pageNum: 1, //页数
				pageSize: 3, //每页显示多少条数
			}
		},
		components: {
			uniRate
		},
		onLoad() {
			this.refresh();
		},
		onShow() {
			this.refresh();
		},
		onUnload() {
			uni.switchTab({
				url: '../index/index'
			})
		},
		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) {
				console.log(pullScroll)
				if (pullScroll.page == 1) {
					this.data = []
				}
				this.pageNum = pullScroll.page
				setTimeout(() => {
					this.http.httpRequest('/wxapplet/ownerreprair/list', 'post', {
						cardNo: uni.getStorageSync('idNumber'),
						pageNum: pullScroll.page,
						pageSize: 10,
						comtyId: uni.getStorageSync("comtyId")
					}).then((res) => {
						console.log(res)
						if (res.code == 0) {
							this.total = res.data.total
							// 判断当前数据是否加载完毕
							if (this.data.length == res.data.total) {
								pullScroll.finish();
							} else {
								pullScroll.success();
								let data = res.data.rows
								this.data = this.data.concat(data);
							}

						} else {
							pullScroll.finish();
							uni.showToast({
								title: res.msg,
								"icon": 'none'
							})
						}
					}).catch(() => {
						pullScroll.finish();
					})
				
				}, 500);
			},
			// 我的评价
			myTalk(id) {
				uni.navigateTo({
					url: "./repairsEvaluate?id=" + id
				})
			},
			// 我要保修
			myRepairs() {
				uni.navigateTo({
					url: "./wantRepair"
				})
			}
		}
	}
</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;
	}

	.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>