repair-project-240821/pages/repairList/repairList.vue

<!-- 报修列表(学生) -->
<template>
	<view :class="{ bg : repairList.length > 0 }" class="repairList reserveSpace">
		<view class="tab">
			<uv-tabs :list="list" lineWidth="60" lineHeight="10" @click="selectTag"></uv-tabs>
		</view>

		<view v-if="repairList.length > 0" class="repairList-main">
			<view v-for="item in repairList" :key="item.id" class="repairItem">
				<view class="repairMain">
					<view class="build">
						<view>
							<text style="margin-right: 10rpx;">{{ item.building }}</text>
							<text> {{ item.room }}</text>
						</view>
						<text style="font-size: 26rpx;">{{ item.createTime }}</text>
					</view>
					<view class="desc">
						<uv-read-more :shadowStyle="shadowStyle" show-height="80rpx" fontSize="30rpx" :toggle="true">
							<view>
								{{ item.context }}
							</view>
						</uv-read-more>
					</view>
					<view class="repairImages">
						<view v-for="(image,index) in item.image" :key="index" class="image-item">
							<image @click="viewImageAsList(index,item.image)" :src="image" mode="widthFix"></image>
						</view>
					</view>
					<view style="display: inline-block;margin: 15x 0rpx;padding-left: 10rpx;" class="repair-projuct">
						<uv-tags :text="item.project" plain size="mini" type="primary"></uv-tags>
					</view>
				</view>
			</view>
		</view>

		<uv-empty v-else mode="data" :width="500" :textSize="30" text="暂无维修单" icon="/static/empty/empty.png"></uv-empty>

	</view>
</template>

<script>
	import {
		mapState,
	} from 'vuex'
	export default {
		data() {
			return {
				list: [{
					name: '待完成',
				}, {
					name: '已完成',
				}],
				current: 0,
				currentIndex: 0,
				repairList: [], //报修列表
				queryParams: {
					pageNo: 1,
					pageSize: 3,
					state: 0
				},
				total: 0
			}
		},
		onShow() {
			this.getRepairList()
		},
		//滚动到屏幕底部
		onReachBottom() {
			if (this.queryParams.pageSize <= this.total) {
				this.queryParams.pageSize += 3
				this.getRepairList()
			}
		},
		methods: {
			//跳转驳回
			toReject(id) {
				uni.navigateTo({
					url: `/pages/reject/reject?orderId=${id}`
				})
			},

			//跳转结单页面
			toFinish(id) {
				uni.navigateTo({
					url: `/pages/finish/finish?orderId=${id}`
				})
			},

			//查看图片
			viewImageAsList(index, imgArr) {
				this.currentIndex = index
				this.$utils.previewImage({
					current: this.currentIndex,
					urls: imgArr
				})
			},

			//选择了顶部的标签
			selectTag(tag) {
				this.queryParams.state = tag.index
				this.getRepairList()
			},

			//获取报修列表
			getRepairList() {
				this.$api('getUserSchoolOrderPage', this.queryParams, res => {
					if (res.code == 200) {
						res.result.records.forEach(item => {
							item.image ? item.image = item.image.split(',') : item.image = []
						})
						this.repairList = res.result.records
						this.total = res.result.total
					}
				})
			}
		},
		computed: {
			shadowStyle() {
				return {
					// #ifndef APP-NVUE
					backgroundImage: "linear-gradient(-180deg, rgba(255, 255, 255, 0) 0%, #fff 80%)",
					// #endif
					// #ifdef APP-NVUE
					// nvue上不支持设置复杂的backgroundImage属性
					backgroundImage: "linear-gradient(to top, #fff, rgba(255, 255, 255, 0.5))",
					// #endif
					paddingTop: "50px",
					marginTop: "-50px",
				}
			},
			...mapState(['userInfo']),
		}
	}
</script>

<style scoped>
	.repairList {}

	.bg {
		background: #f8f8f8;
	}

	.tab {
		display: flex;
		align-items: center;
		height: 80rpx;
		background: white;
		margin-bottom: 20rpx;
	}

	.repairList-main {
		min-height: 100vh;
	}

	.repairItem {
		display: flex;
		background: white;
		width: 96%;
		margin: 0rpx auto;
		border-radius: 20rpx;
		margin-bottom: 20rpx;
	}

	.repairMain {
		width: 100%;
		box-sizing: border-box;
		padding-left: 20rpx;
	}

	/* 
	.userName {
		font-size: 32rpx;
		margin: 10rpx 0rpx;
	} */

	.build {
		display: flex;
		justify-content: space-between;
		font-size: 28rpx;
		margin: 20rpx 0rpx;
	}

	.desc {
		overflow-y: scroll;
		margin-bottom: 20rpx;
	}

	.repairImages {
		display: flex;
		flex-wrap: wrap;
		margin: 10rpx 0rpx;
	}

	.image-item {
		width: 24%;
		margin-left: 1%;
		height: 170rpx;
		overflow: hidden;
		display: flex;
		align-items: center;
		justify-content: center;
		padding: 20rpx;
		background: #f5f5f5;
		border-radius: 20rpx;
	}

	.image-item image {
		width: 100%;
	}

	.btns {
		margin: 20rpx 0rpx;
		display: flex;
		justify-content: flex-end;
	}

	.btn {
		width: 200rpx;
		height: 50rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		border-radius: 50rpx;
		margin-left: 15rpx;
		font-size: 30rpx;
		color: white;
		background: #f9ae3d;
	}

	.btn:nth-child(2) {
		background: #3c9cff;
	}
</style>