groupon-wx/components/cancelVerificationList/cancelVerificationList.vue

<template>
	<view>

		<view class="list" v-for="(item,index) in list" :key="index">
			<view class="myclient_list">
				<view class="myclient_list_name ">
					<view class=" nv">
						{{item.storeName}}
					</view>
					<view v-if="item.state===0" class=" status">待发货</view>
					<view v-if="item.state===1" class=" status">已发货</view>
					<view v-if="item.state===2" class=" status">已完成</view>
				</view>
				<view class="myclient_list_content">
					<view class="phone">
						<image referrerpolicy="no-referrer" src="http://www.gzzzyd.com/groupon/home_slices/日期@2x.png" />
						<text>
							团购结束日期:{{item.grouponEndTime}}
						</text>
					</view>
					<view class="time">
						<image referrerpolicy="no-referrer" src="http://www.gzzzyd.com/groupon/home_slices/出厂编号-线@2x.png" />
						<text>
							收货码:{{item.arrivalCode}}
						</text>
					</view>
				</view>
			</view>
			<view class="all-products-body">
				<view class="all-products-item" @click="addGoodPopupShow = true" v-for="(item1,index1) in item.appointGoodsList" :key="index1">
					<image
							:src="item1.goodsImage"
							mode="scaleToFill" />

					<view class="all-products-item-content">
						<view class="all-products-item-content-t">
							{{item1.goodsName}}
						</view>
						<view class="all-products-item-content-b">
							<view style="display:flex;">
								<text class="red"> 共{{item1.goodsNum}}件</text>
							</view>

						</view>
					</view>
				</view>

			</view>

			<view class="self-pickup-point">

				<view class="a-b">
					<view class="a-b1">
						自提点:
						<text class="red">
							{{item.takeName}}
						</text>
					</view>
					<view class="a-b2">

					</view>
				</view>
			</view>
			<view v-if="item.state===1" class="op-area">
				<button class="action-btn" @click="cancelVerification(item)">确认核销</button>
			</view>
		</view>

	</view>
</template>

<script>
	import { commitAppoint} from '@/api/groupon.js'
	export default {
		name:"cancelVerificationList",
		props: {
			list: {
				type: Array,
				default () {
					return []
				}
			}

		},
		data() {
			return {

			};
		},
		methods:{

			cancelVerification: function (e) {
				let that = this;

				uni.showModal({
					title: that.$t(`核销订单`),
					content: that.$t(`确定核销订单`),
					success: function (res) {
						if (res.confirm) {
							commitAppoint(e.id)
									.then(res => {
										e.status = 2;
										return that.$util.Tips({
											title: res.msg,
											icon: 'success'
										});
									})
									.catch(err => {
										return that.$util.Tips({
											title: err
										});
									});
						} else if (res.cancel) {
							return that.$util.Tips({
								title: that.$t(`已取消`)
							});
						}
					}
				});

			},

		},
	}
</script>

<style scoped lang="scss">
	@import '/static/css/common.css';

	.popup-view{
		border-radius: 10rpx;
		width: 475rpx;
		height: 375rpx;
		background-color: white;
		.popup-text{
			width: 475rpx;
			height: 300rpx;
			text-align: center;
		}
		.popup-button{
			width: 475rpx;
			height: 75rpx;
			.button-view{
				width: 200rpx;
				height: 75rpx;
				.button-left{

				}
				.button-right{

				}
			}

		}
	}



	.my-order .nav {
		background-color: #F9F9F9;
		width: 100%;
		// height: 140rpx;
	}

	.my-order .nav .item {
		text-align: center;
		font-size: 26rpx;
		color: #282828;
		padding: 27rpx 0;
		border-bottom: 5rpx solid transparent;
	}

	.my-order .nav .item.on {
		/* #ifdef H5 || MP */
		font-weight: bold;
		/* #endif */
		/* #ifdef APP-PLUS */
		color: #000;
		/* #endif */
		border-color: var(--view-theme);
	}

	.my-order .nav .item .num {
		margin-top: 18rpx;
	}

	.list {
		width: 100%;
		background: white;
		margin: 14rpx auto 0 auto;
		padding-bottom: 30rpx;
	}

	.noCart {
		margin-top: 171rpx;
		padding-top: 0.1rpx;
	}

	.noCart .pictrue {
		width: 414rpx;
		height: 336rpx;
		margin: 78rpx auto 56rpx auto;
	}

	.noCart .pictrue image {
		width: 100%;
		height: 100%;
	}

	.my-order .list .item .item-info .text .money .return {
		// color: var(--view-priceColor);
		margin-top: 10rpx;
		font-size: 24rpx;
	}


	.myclient_list {
		padding: 30rpx;
		background: #FFFFFF;

		.myclient_list_name {
			margin-bottom: 15rpx;
			min-height: 44rpx;
			font-size: 28rpx;
			font-weight: 500;
			color: #111111;
			line-height: 44rpx;
			display: flex;
			flex-direction: row;
			justify-content: space-between;

			.nv {
				flex-grow: 1;
				width: 590rpx;
			}

			.status {
				width: 100rpx;
				text-align: right;
				color: #75BE00;
			}
		}

		.myclient_list_content {
			.subtitle {
				height: 44rpx;
				margin: 20rpx 0;
				font-size: 28rpx;
				font-weight: 400;
				color: #666666;
				line-height: 44rpx;
			}

			image {
				width: 24rpx;
				height: 24rpx;
				margin-right: 20rpx;
			}

			.phone {
				margin-bottom: 15rpx;
				height: 44rpx;
				font-size: 24rpx;
				font-weight: 400;
				color: #999999;
				line-height: 44rpx;
			}

			.time {
				height: 44rpx;
				font-size: 24rpx;
				font-weight: 400;
				color: #999999;
				line-height: 44rpx;
			}
		}
	}

	.all-products-body {
		background: white;

		.all-products-item {
			display: flex;
			margin-bottom: 20rpx;

			image {
				width: 128rpx;
				height: 128rpx;
				margin-right: 20rpx;
				border: 2rpx solid #FFFFFF;
			}

			.all-products-item-content {
				flex-grow: 1;
				display: flex;
				flex-direction: column;


				.all-products-item-content-t {
					flex: 1;
					font-size: 24rpx;
					font-weight: 400;
					color: #333333;
					line-height: 40rpx;
				}

				.all-products-item-content-b {
					flex: 1;
					font-size: 28rpx;
					font-weight: 500;
					line-height: 80rpx;
					display: flex;
					justify-content: space-between;

					.red {
						display: block;
						font-size: 28rpx;
						font-weight: 500;
						color: #999999 !important;
						margin-right: 10rpx;
					}

					.line-thr {
						display: block;
						font-size: 28rpx;
						font-weight: 400;
						color: #999999;
						text-decoration: line-through;
					}

					.count {
						font-size: 24rpx;
						font-weight: 400;
						color: #999999;
						margin-right: 30rpx;
					}
				}
			}
		}
	}


	.a-t {
		padding: 0 30rpx;
		display: flex;
		justify-content: space-between;
		height: 44rpx;
		margin-bottom: 20rpx;

	}

	.a-m {
		padding: 0 30rpx;

		.am1 {
			display: flex;
			justify-content: space-between;
			margin-bottom: 20rpx;

			.am1-1 {
				height: 40rpx;
				font-size: 28rpx;
				font-weight: 400;
				color: #111111;
				line-height: 40rpx;

			}

			.am1-2 {
				height: 36rpx;
				font-size: 20rpx;
				font-weight: 400;
				color: #666666;
				line-height: 36rpx;

				image {
					margin-left: 30rpx;
					vertical-align: middle;
					height: 34rpx;
					width: 34rpx;
				}
			}
		}

		.am2 {
			margin-bottom: 20rpx;
			height: 34rpx;
			font-size: 24rpx;
			font-weight: 400;
			color: #999999;
			line-height: 34rpx;
		}


	}

	.a-b {
		padding: 0 30rpx;
		width: 100%;
		background: #FFF7F8;
		border: 1px solid dashed #333333;
		height: 60rpx;
		line-height: 60rpx;
		display: flex;
		justify-content: space-between;

		.a-b1 {
			font-size: 20rpx;
			font-weight: 400;
			color: #666666;

			.red {
				font-size: 20rpx;
				font-weight: 500;
				color: #B22338;
			}
		}

		.a-b2 {
			image {
				vertical-align: middle;
				margin-right: 30rpx;
				margin-left: 30rpx;
				height: 34rpx;
				width: 34rpx;
			}
		}
	}

	.self-pickup-point {
		background: #FFF7F8;
		margin: 0 30rpx;
	}

	.op-area {
		margin-top: 20rpx;
		height: 64rpx;
		display: flex;
		justify-content: flex-end;
		line-height: 64rpx;
		text-align: right;

		.action-btn {
			min-width: 200rpx;
			background: #FFF7F8;
			border-radius: 32rpx;
			border: 2rpx solid #B22338;
			margin-right: 30rpx;
			height: 64rpx;
			font-size: 24rpx;
			font-weight: 400;
			color: #B22338;
			line-height: 64rpx;
		}

		.info-btn {
			width: 200rpx;
			background: #F5F5F5;
			border-radius: 32rpx;
			margin-right: 30rpx;
			height: 64rpx;
			font-size: 24rpx;
			font-weight: 400;
			color: #666666;
			line-height: 64rpx;
		}
	}

	.Ended {
		color: #666666 !important;
	}

	.Refused {
		color: #B42A3E !important;
	}
	.success {
		color: #75BE00 !important;
	}

	.publish {
		position: fixed;
		bottom: 0;
		height: 100rpx;
		width: 100%;
		background: #F9F9F9;

		button {
			width: 90%;
			height: 84rpx;
			background: #B42A3E;
			border-radius: 8rpx;
			position: relative;
			top: 0;
			margin: auto;
			font-size: 28rpx;
			font-weight: 400;
			color: #FFFFFF;
			line-height: 84rpx;
		}
	}
</style>