bawangcan-shop/pages/index/taskDetail1.vue

<template>
	<view>
		<view class="home-list-item">
			<view class="activesTop">
				<image v-if="item.classify == 2" class="item-Logo" style="width: 44rpx;height: 44rpx;"
					src="../../static/img/home/storeLogo.png"></image>
				<image v-if="item.classify == 1" class="item-Logo" style="width: 44rpx;height: 44rpx;"
					src="../../static/img/my/eleicon.png"></image>
				<view class="ptName" v-if="item.classify == 1">饿了么任务</view>
				<view class="ptName" v-if="item.classify == 2">美团任务</view>
				<view class="jsTime" v-if="item.status==1">结束时间: {{item.endTime}}</view>
				<view class="jsTime" style="color: #FF4701;" v-if="item.status==2">已结束</view>
			</view>
			<view class="item-wrap">
				<image :src="item.titleImg" class="item-storeImg"></image>
				<view class="right">
					<view class="tag-title">
						<view class="tag-titles">{{item.goodsTitle}}</view>
					</view>
					<view class="item-wz">
						<view style="width: 80%;display: flex;">
							<view class="item-weizhi">{{item.address}}</view>
						</view>
					</view>
				</view>
				<view style="border:1upx solid #E6E6E6;margin: 20rpx 0; "></view>
				<view>
					<view class="shuju zuo">
						<span>{{item.orderCount ? item.orderCount : 0}}人</span>审核通过
					</view>
					<view class="shuju zhong">
						餐标<span>¥{{item.merchantMoney ? item.merchantMoney : 0}}</span>
					</view>
					<view class="shuju you">
						付款金额<span>¥{{item.orderMoney ? item.orderMoney : 0}}</span>
					</view>
				</view>
			</view>
		</view>
		<view class="liebiao">
			<u-tabs :list="list" :is-scroll="false" :current="current" @change="change" active-color="#FF4701"></u-tabs>
			<view class="renwu" v-if="renwuLists.length > 0">
				<view v-for="(ite,index) in renwuLists" :key="index">
					<view class="renwuList">
						<view class="listTop">
							<image class="Logos" :src="ite.imageUrl"></image>
							<view class="right">
								<view class="titleName">{{ite.nickName}}</view>
								<view class="ddh">订单号：{{ite.orderId}}</view>
							</view>

							<!-- status  1待提交  2已提交待审核 3审核成功  4审核失败  5放弃任务 -->
							<!-- 进行中 -->
							<image class="tg" v-if="ite.status == 1"
								src="https://h5.canmoujiang.com/img/20210720/7b6690ce6abf43d09f9b9ca1c7dec69a.png"
								mode="widthFix"></image>
							<!-- 待审核 -->
							<image class="tg" v-if="ite.status == 2"
								src="https://h5.canmoujiang.com/img/20210720/bf1fbf37ff4e478dab8cda8f1836f140.png"
								mode="widthFix"></image>
							<!-- 通过 -->
							<image class="tg" v-if="ite.status == 3"
								src="https://h5.canmoujiang.com/img/20210713/89dfc1c9b52b4703bfdc90801542c7a4.png"
								mode="widthFix"></image>
							<!-- 淘汰 -->
							<image class="tg" v-if="ite.status == 4"
								src="https://h5.canmoujiang.com/img/20210713/487ac2392c0544378065918c0bad3f0d.png"
								mode="widthFix"></image>
						</view>
						<view class="imgsList">
							<shmily-drag-image class="dragImg" :select="false" :list.sync="ite.img" number="1">
							</shmily-drag-image>
						</view>
						<view class="shenhe" v-if="ite.status == 2 && ReviewOrder != '否'">
							<button class="tongguo" @click="tongguo(ite.orderId)">通过</button>
							<button class="taotai" @click="openPopu(ite.orderId)">淘汰</button>
						</view>
					</view>
				</view>
			</view>
		</view>

		<!--弹窗-->
		<modal v-if="showPop" title="淘汰原因" confirm-text="确定" cancel-text="取消" @cancel="cancelPop" @confirm="confirmPop">
			<textarea style="height: 150rpx;" type='text' placeholder="请输入淘汰原因" v-model="auditContent" />
		</modal>
	</view>
</template>

<script>
	import uniPopup from '../../components/uview-ui/components/u-popup/u-popup.vue'
	export default {
		components: {
			uniPopup
		},
		data() {
			return {
				goodsId: 0,
				showPop: false, //弹窗
				auditContent: '',
				orderId: 0,
				item: {},
				ReviewOrder:'否',
				page: 1,
				limit: 15,
				loadingType: 0,
				contentText: {
					contentdown: '上拉显示更多',
					contentrefresh: '正在加载...',
					contentnomore: '没有更多数据了'
				},
				list: [{
						name: '全部'
					}, {
						name: '进行中'
					},
					{
						name: '待审核'
					}, {
						name: '已通过'
					}, {
						name: '已淘汰'
					}
				],
				current: 0,
				renwuLists: []
			}
		},
		onLoad(e) {
			this.ReviewOrder = this.$queue.getData('ReviewOrder');
			this.goodsId = e.goodsId;
			this.getDetail();
			this.getOrderList();
		},
		methods: {
			//弹窗
			confirmPop() { //确认
				if (this.auditContent === '') {
					this.$queue.showToast('请输入淘汰原因!')
					return;
				} else {
					this.showPop = false
					this.taotai();
				}
			},
			cancelPop() { //取消
				this.auditContent = ''
				this.showPop = false
			},
			openPopu(orderId) {
				this.orderId = orderId;
				this.showPop = true;
			},
			getOrderList() {
				this.loadingType = 1;
				this.$queue.showLoading('加载中...');
				let userId = this.$queue.getData('userId');
				this.$Request.getT('/goodsMerchant/selectOrderListByGoodsId?page=' + this.page + '&limit=' + this.limit +
					'&goodsId=' + this.goodsId + '&status=' + this.current).then(res => {
					if (res.code == 0 && res.data) {
						if (this.page == 1) {
							this.renwuLists = [];
						}

						if (res.data && res.data.records.length > 0) {
							res.data.records.forEach(d => {
								if (d.img) {
									d.img = d.img.split(',');
								}
								this.renwuLists.push(d);
							});
						}

						if (res.data.records.length === this.limit) {
							this.loadingType = 0;
						} else {
							this.loadingType = 3;
						}
					} else {
						this.loadingType = 2;
					}
					uni.hideLoading();
				});

			},
			getDetail() {
				this.$Request.getT('/goodsMerchant/selectAuditGoodsDetails?goodsId=' + this.goodsId).then(res => {
					if (res.code == 0) {
						this.item = res.data;
					}
				});
			},
			change(index) {
				this.current = index;
				this.page = 1;
				this.getOrderList();
			},
			tongguo(orderId) {
				uni.showModal({
					title: '温馨提示',
					content: '确定通过此订单吗？',
					showCancel: true,
					cancelText: '取消',
					confirmText: '确认',
					success: ress => {
						if (ress.confirm) {
							this.$queue.showLoading('提交中...');
							this.$Request.postT('/goodsMerchant/auditOrders?orderId=' + orderId + '&status=1')
								.then(res => {
									if (res.code == 0) {
										uni.hideLoading();
										this.$queue.showToast('审核成功！')
										this.page = 1;
										this.getOrderList();
										this.getDetail();
									} else {
										uni.hideLoading();
										this.$queue.showToast(res.msg);
									}
								})
						}
					}
				});
			},
			taotai() {
				if (this.auditContent === '') {
					this.$queue.showToast('请输入淘汰原因!')
					return;
				}
				if (this.orderId == 0) {
					return;
				}
				this.$queue.showLoading('提交中...');
				this.$Request.postT('/goodsMerchant/auditOrders?orderId=' + this.orderId + '&status=2&auditContent=' + this
					.auditContent).then(res => {
					if (res.code == 0) {
						this.auditContent = '';
						this.orderId = 0;
						uni.hideLoading();
						this.$queue.showToast('已淘汰！')
						this.page = 1;
						this.getOrderList();
						this.getDetail();
					} else {
						uni.hideLoading();
						this.$queue.showToast(res.msg);
					}
				})
			},
			topScrollTap: function() {
				uni.pageScrollTo({
					scrollTop: 0,
					duration: 300
				});
			}
		},
		onPageScroll: function(e) {
			this.scrollTop = e.scrollTop > 200;
		},
		onReachBottom: function() {
			this.page = this.page + 1;
			this.getOrderList();
		}
	}
</script>

<style lang="scss">
	page {
		width: 100%;
		background: #F7F7F7;
	}

	.home-list-item {
		// padding: 0 30upx;
		width: 92%;
		margin: 4%;
		position: relative;
		background-color: #FFFFFF;
		box-sizing: border-box;

		.activesTop {
			height: 60rpx;
			position: relative;

			.item-Logo {
				width: 40rpx;
				margin: 10rpx;
				float: left;
				border-radius: 50%;
			}

			.ptName {
				line-height: 60rpx;
				font-size: 28rpx;
				color: #333;
			}

			.jsTime {
				position: absolute;
				line-height: 60rpx;
				right: 10rpx;
				top: 0;
				font-size: 22rpx;
			}
		}

		.item-wrap {
			padding: 20upx;
		}

		.item-storeImg {
			position: absolute;
			width: 100rpx;
			height: 100rpx;
			border-radius: 8rpx;
		}

		.right {
			padding-left: 120upx;

			.tag-title {
				display: flex;
				font-size: 30upx;
				color: #333;
				line-height: 50upx;
				align-items: center;

				.item-Logo {
					width: 40upx;
					height: 40upx;
				}

				.tag-titles {
					padding-left: 10rpx;
					overflow: hidden;
					text-overflow: ellipsis;
					white-space: nowrap;
				}
			}

			.item-wz {
				display: flex;
				align-items: center;
				position: relative;
				margin-top: 16upx;
				color: #999;
				font-size: 22upx;

				.weizhi {
					width: 26rpx;
					height: 30rpx;
					margin-top: 3rpx;
				}

				.item-weizhi {
					padding-left: 10upx;
					color: #333;
					width: 92%;
					text-overflow: ellipsis;
					overflow: hidden;
					white-space: nowrap;
					font-size: 24rpx;
				}

			}
		}

		.shuju {
			display: inline-block;
			width: 33.3%;
			font-size: 26rpx;

			span {
				color: #FF4701;
			}
		}

		.zuo {
			text-align: left;
		}

		.zhong {
			text-align: center;
		}

		.you {
			text-align: right;
		}
	}

	.liebiao {
		margin-top: 30rpx;

		.renwu {
			.renwuList {
				padding: 4%;
				background: #fff;
				border-bottom: 20rpx solid #F7F7F7;

				.listTop {
					// height: 60rpx;
					position: relative;

					.Logos {
						width: 100rpx;
						height: 100rpx;
						margin: 10rpx;
						float: left;
						border-radius: 50%;
					}

					.right {
						height: 120rpx;
						line-height: 50rpx;
						font-size: 28rpx;
						color: #333;

						.titleName {}

						.ddh {
							color: #999;
							font-size: 26rpx;
						}
					}

					.tg {
						position: absolute;
						width: 60px;
						height: 60px;
						top: 0;
						right: 0;
					}
				}

				.dragImg {
					width: 100%;
				}

				.shenhe {
					width: 100%;
					text-align: right;
					margin-top: 10rpx;

					.taotai {
						width: 20%;
						margin: 0;
						display: inline-block;
						margin-left: 5%;
						border-radius: 40rpx;
						background: #fff;
						border: 1rpx solid #999;
						font-size: 26rpx;
						color: #999;
						height: 60rpx;
						line-height: 60rpx;
					}

					.tongguo {
						width: 20%;
						margin: 0;
						display: inline-block;
						margin-left: 5%;
						border-radius: 40rpx;
						background: #fff;
						border: 1rpx solid #23ddb1;
						font-size: 26rpx;
						color: #23ddb1;
						height: 60rpx;
						line-height: 60rpx;
					}
				}
			}
		}

	}

	.u-scroll-view.data-v-d9072e9a {
		height: 100rpx;
	}

	// .con .area .view.data-v-345cb730{
	// 	width: 20%!important;
	// 	height: auto;
	// }
</style>