syApp/pages/index/index.vue

<template> 
	<view class="content"> 
		<u-navbar :is-back="false" back-text="返回" title="操作记录" :background="background" title-color="#fff">
			<u-icon color="#fff" @click="show = true" name="list" class='navTopLeftIcon'></u-icon>
			<view class="slot-wrap" slot="right" @click="upload()">
				上传
			</view>
		</u-navbar>
		<u-tabs :list="massifList" 　count="task_count" :is-scroll="true" :current="current" @change="change"
			active-color="#3eb984" inactive-color="#333"></u-tabs>
		<view class="progress-con">
			<text class="text1">
				种植进度 :
			</text>
			<u-line-progress type="success" :percent="massif_info.plant_progress"></u-line-progress>
			<text class="text2">
				第{{massif_info.day}}天
			</text>
		</view>
		<view class="task_wrap">
			<view class="wrap_item" @click="taskClick(item.task_status,item)" v-for="item,index in page_list"
				:key="index">
				<view class="tit">
					<view class="left">
						<text>{{item.publisher_name}}</text>
						<u-icon size="20" name="arrow-rightward"></u-icon>
						<text>{{item.receiver_name}}</text> 
						<u-image v-if="item.is_remind" width="50rpx" height="50rpx" src="../../static/ld.gif"></u-image>
					</view>
					<view class="start_time">
						<u-icon size="30" name="clock"></u-icon>
						<text>{{item.start_time}}</text>
					</view>
				</view>
				<view class="con">
					<view class="row row1">
						<view class="circle c1">

						</view>
						<view class="text-con">
							<text class="text1">{{item.task_type |task_type}}</text>
							<text class="text2">{{item.task_content}}</text>
						</view>
					</view>
					<view class="row row2">
						<view class="circle c2">

						</view>
						<view class="text-con" v-if="!item.task_status">
							<text class="text3">待完成</text>
						</view>
						<view class="text-con" v-else>
							<text class="text1">{{item.task_type |task_type}}</text>
							<text class="text2">{{item.op_content}}</text>
							<text class="text2">完成时间 : {{item.now_date_day}}</text>
							<text class="text2" v-if="item.image_list.length">
								<image mode="widthFix" :src="item.image_list[0]" @tap="previewImg"
									:data-imgurl="item.image_list" />
							</text>
						</view>
					</view>

				</view>
			</view>
			<u-loadmore :status="status" />
		</view>

		<!-- 个人资料弹框 -->
		<u-popup v-model="show" width="560rpx">
			<!-- 操作列表 -->
			<view class="operation_ulA">
				<view class="operation_list" @click="defails(item.url)" v-for="(item, index) in operationArr"
					:key="index">
					<view class="operation_listDiv">
						<u-icon :name="item.icon" color="#666" size="28"></u-icon>
						<text>{{ item.name }}</text>
					</view>
					<u-icon name="arrow-right" color="#666" size="28"></u-icon>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				background: {
					backgroundColor: '#3eb984',
				},
				massifList: [],
				massif_id: "",
				current: 0, //tab选中的索引
				page: 1,
				massif_info: {}, //地块详情
				page_list: [],
				show: false,
				operationArr: [{
						'icon': 'file-text',
						'name': '个人信息',
						'url': '/pages/userDetails/userDetails'
					},
					{
						'icon': 'home',
						'name': '关于我们',
						'url': '/pages/aboutUs/aboutUs'
					},
					{
						'icon': 'phone',
						'name': '联系我们',
						'url': '/pages/contactUs/contactUs'
					}
				],
				status: 'loadmore',
			}
		},
		filters: {
			task_type(val) {
				switch (val) {
					case "fertilize":
						return "施肥";
					case "watering":
						return "灌溉";
					case "spray":
						return "喷药";
					case "other":
						return "其他";
				}
			},
		},
		onLoad() {
			this.get_massif_list()
		},
		methods: {
			upload() {
				this.$store.commit('modify', {
					task_id: '',
					base_name: this.massif_info.base_name,
					massif_name: this.massif_info.massif_name,
					base_id: this.massif_info.base_id,
					massif_id: this.massif_info.massif_id,
					task_content: '',
					task_type: '',
					flag: 0, //1点击列表进入详情,0点击按钮进入
				})
				uni.navigateTo({
					url: "../detail/detail"
				})
			},
			async get_massif_list() {
				const res = await this.$myRequest({
					url: "/api/api_gateway?method=back_source.production.get_operator_massif_list",
				})
				this.massifList = res;
				this.massifList = this.massifList.map((item) => {
					return {
						...item,
						name: item.massif_name
					}
				})
				this.massif_id = this.massifList.length && this.massifList[0].massif_id;
				this.massif_id_Info(this.massif_id)
			},
			async massif_id_Info(massif_id) {
				const res = await this.$myRequest({
					url: "/api/api_gateway?method=back_source.production.get_operator_tasks",
					data: {
						massif_id,
						page: this.page,
					}
				})
				this.total_item = res.total_item;

				this.massif_info = {
					massif_id: res.massif_id,
					massif_name: res.massif_name,
					base_id: res.base_id,
					base_name: res.base_name,
					day: res.day,
					plant_progress: res.plant_progress,
					total_item: res.total_item,
				}
				this.page_list = [...this.page_list, ...res.page_list];
				let total_item = this.page_list.length
				if (total_item >= this.massif_info.total_item) this.status = 'nomore';
				else this.status = 'loading';
			},
			change(index) {
				this.page_list = []
				this.current = index;
				this.massif_id = this.massifList[index].massif_id;
				this.massif_id_Info(this.massif_id)
			},
			previewImg(e) {
				console.log(e)
				let imgurl = e.currentTarget.dataset.imgurl;
				uni.previewImage({
					current: 0,
					urls: imgurl
				})
			},
			taskClick(flag, item) {
				if (flag) { //已完成
					console.log(111)
					return false;
				}
				// 通过commit触发mutations中的方法修改state
				let obj = {
					task_id: item.task_id,
					base_name: this.massif_info.base_name,
					massif_name: this.massif_info.massif_name,
					base_id: this.massif_info.base_id,
					massif_id: this.massif_info.massif_id,
					task_content: item.task_content,
					task_type: item.task_type,
					flag: 1, //1点击列表进入详情,0点击按钮进入
				};
				uni.setStorageSync('taskInfo', JSON.stringify(obj))
				this.$store.commit('modify', obj);
				uni.navigateTo({
					url: "../detail/detail"
				})
			},
			//左侧边弹框点击事件
			defails(url) {
				uni.navigateTo({
					url
				})
			},
			//下拉刷新
			onPullDownRefresh() {
				this.page = 1;
				this.page_list = []
				this.massif_id_Info(this.massif_id)
				setTimeout(function() {
					uni.stopPullDownRefresh();
				}, 1000);
			},
			//上拉加载
			onReachBottom() {
				// if (this.page >= 3) return;
				// //总条数
				let total_item = this.page_list.length
				if (total_item >= this.massif_info.total_item) return
				this.status = 'loading';
				this.page = ++this.page;
				this.massif_id_Info(this.massif_id)

				// setTimeout(() => {
				// 	this.list += 10;
				// 	if (this.page >= 3) this.status = 'nomore';
				// 	else this.status = 'loading';
				// }, 2000)
			}
		}
	}
</script>

<style lang="scss">
	.content {
		// padding: 0 40rpx;
	}

	.slot-wrap {
		color: #fff;
		padding-right: 20rpx;
	}

	.progress-con {
		width: 100%;
		display: flex;
		justify-content: space-between;
		padding: 20rpx 30rpx;

		.u-progress {
			width: 60%;
		}
	}

	.task_wrap {
		background: #f8f8f8;
		padding: 20rpx 20rpx;

		.wrap_item {
			background: #fff;
			padding: 30rpx;
			margin-bottom: 20rpx;

			.tit {
				display: flex;
				justify-content: space-between;
				margin-bottom: 20rpx;
				font-size: 30rpx;
				.left{
					display:flex;
				}
			}

			.con {
				.row {
					display: flex;
					justify-content: flex-start;
					padding-bottom: 50rpx;

					.circle {
						width: 30rpx;
						height: 30rpx;
						border: 4rpx solid #ddd;
						border-radius: 50%;
						background: #fff;
						z-index: 2;
					}

					.text-con {
						display: flex;
						flex-direction: column;
						margin-left: 20rpx;

						.text1 {
							font-size: 34rpx;
							padding-bottom: 10rpx;
						}

						.text2 {
							color: #666;
							font-size: 28rpx;
							padding: 4rpx 0;

							image {
								width: 50px;
							}
						}

						.text3 {
							color: #f24140;
							font-size: 28rpx;
							padding: 4rpx 0;
						}
					}
				}

				.row1 {
					position: relative;

					&:after {
						position: absolute;
						content: "";
						display: block;
						width: 2px;
						top: 0;
						bottom: 0;
						left: 15rpx;
						z-index: 0;
						background: #eee;
					}

					.c1 {
						border-color: #3eb984;
					}

				}

				.row2 {
					.c2 {
						border-color: #f24140;
					}
				}
			}
		}

	}

	.navTopLeftIcon {
		margin-left: 20rpx;
		font-size: 40rpx;
	}

	// 操作列表
	.operation_ulA {
		padding-top:40rpx;

		// border: 1px solid #000;
		.operation_list {
			display: flex;
			justify-content: space-between;
			width: 90%;
			margin: 65rpx auto;

			.operation_listDiv {
				.operation_listDivIcon {
					width: 40rpx;
					height: 40rpx;
					vertical-align: bottom;
				}

				text {
					color: #5a5a5a;
					margin: 10rpx 0 0 20rpx;
					text-align: left;
					font-size: 17px;
				}
			}

			.operation_listRight {
				width: 40rpx;
				height: 40rpx;
				vertical-align: bottom;
			}
		}
	}
</style>