crk-uni-app/pages/task/manage_details.vue

<template>
	<!-- 设备概览 -->
	<view class="overview">
		<u-sticky zIndex="3">
			<view class="head">
				<u-search placeholder="请输入盘点人员" v-model="keyword" @search="getList" @custom="getList"></u-search>
			</view>
		</u-sticky>
		<view class="main" v-for="(item, index) in deviceList" :key="index" >
				<view class="u-img">
					<img src="../../static/list2.png" ></img>
				</view>
				<view class="content" @click="toCheck(item)">
					<view class="c-name">
						<u-text :text="'盘点任务：'+item.taskName"></u-text> 
					</view>
					<view class="c-addtime">
						<u-text :text="'截止时间：'+item.enableTime"></u-text>  
					</view>
					<view class="c-status">
						<u-text :text="'盘点人员：'+item.userName"></u-text>  
						<u-tag text="未完成" plain size="mini" v-if="item.status==0"></u-tag>
						<u-tag text="已完成" plain size="mini" type="warning" v-if="item.status==1"></u-tag>
						<u-tag text="已审核" plain size="mini" type="warning" v-if="item.status==2"></u-tag>
					</view>
				</view>
				<u-icon name="arrow-right" @click="toCheck(item)"></u-icon>
			</view>
		<!-- <u-divider text="没有更多数据了"></u-divider> -->
		
		<view class="btn" v-if="userinfo.roleId == 1 &&showBtn">
			<!-- 仅超级管理员允许操作 -->
			<u-button type="primary" class="submit" @click="ok" text="通 过"></u-button>
			<!-- <u-button type="primary" class="submit" @click="no" text="未通过"></u-button> -->
		</view>
				
	</view>
</template>

<script>
	export default {
		data() {
			return {
				// 1.2搜索内容
				search: '',
				// 3.设备列表
				deviceList: [
				],
				
				// 配置项
				actionStyle: {
					background: 'hsl(200, 88%, 55%)',
					color: '#fafaff',
					'border-radius': '1vw',
					'line-height': '26px'
				},
				showBtn : false,
				taskId: null,
				keyword:'',
				userinfo: null,
				loadEndFlag: false
			}
		},
		onLoad:function(options){
			let data = JSON.parse(options.manage);
			this.taskId = data.id;
			this.showBtn = (data.status == 2)
			this.userinfo = uni.getStorageSync('userinfo');
		},
		
		onShow: function() {
			this.getList()
		},
		methods: {
			async getList() {
				const { data:res } = await this.$http('/taskDetailsCheckList',{
					'keyword':this.keyword,
					'id':this.taskId
					})
				if(res.code) return
				this.deviceList = res.data
				for (var i = 0; i < this.deviceList.length; i++) {
					this.deviceList[i].picUrl = this.API_URL+this.deviceList[i].picUrl;
				}
			},
			
			imgPreview(url){
				uni.previewImage({
					indicator:"number",
					loop:true,
					urls: [url]
				})
			},
			
			// 1.2搜索
			async searchDevice() {
				const { data:res } = await this.$http('app/assetBaseList', {
					name: this.search
				})
				if(res.code) return
				this.deviceList = res.data
			},
			async ok(){
				const { data:res } = await this.$http('/pdTaskCheckOk/'+this.taskId,{})
				if(res.code) return
				uni.showToast({
					title: '执行成功',
					icon: 'success'
				});
				setTimeout(function() {
					uni.navigateBack({ delta: 1 });
				}, 1500); 
			},
			no(){
				uni.showToast({
					title: '退回补充',
					icon: 'error'
				});
			},
			// 跳转详情页
			toCheck(item) {
				// if(item.status == 1){
					wx.navigateTo({
							url:'manage_check?managed='+JSON.stringify(item),    
					    })
				// }
			}
		}
	}
</script>

<style lang="scss">
	.overview {
		background: #f6f6f6;
		// padding: 2.667vw 0;
		height: 100vh;
		
		.btn{
			padding: 2.667vw;
			.u-button{
				margin-bottom: 1vh;
			}
			.u-form{
				margin-bottom: 1vh;
			}
		}
		.head {
			background: #fff;
			padding: 2.667vw;
			
			display: flex;
			justify-content: space-evenly;
			align-items: center;
			input {
				padding: 1vw;
				border-radius: 1vw;
			}
		}
		// 展示信息
		.main {
			background: #ffffff;
			margin: 2.667vw 0;
			display: flex;
			justify-content: space-around;
			padding: 2vh 0;
			.u-image{
				float: left;
			}
			.content{
				flex-direction: column;
				align-items: flex-start;
				justify-content: space-around;
				display: flex;
				width: 55vw;
				.c-status{
					display: flex;
				}
			}
			.u-tag{
				margin-left: 3vw;
			}
			.u-img{
				height: 80px;
				width: 80px;
				position: relative;
				img{
					height: 60px;
					width: 60px;
					position: absolute;
					top: 0;
					bottom: 0;
					left: 0;
					right: 0;
					margin: auto;
				}
			}
		}
	}
</style>