groupon-wx/pages/groupbuying/leader_order_details/index.vue

<template>
	<view>
		<view class="my-order">
			<view class="list">
				<view class="myclient_list">
					<view class="myclient_list_name">
						<view class="nl">
							{{grouponData.mainTitle}}
						</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>
								团购日期:{{grouponData.grouponStartTimeStr}} 至 {{grouponData.grouponEndTimeStr}}
							</text>
						</view>
						<view class="time">
							<image referrerpolicy="no-referrer" src="http://www.gzzzyd.com/groupon/home_slices/时间@2x.png" />
							<text>
								提货时间:{{grouponData.takeStartTimeStr}} 至 {{grouponData.takeEndTimeStr}}
							</text>
						</view>
					</view>
				</view>
			</view>
			<view class="good_info">
				<view class="all-products-body" v-for="(item, index) in grouponData.grouponOrderList" :key="index">
					<view class="order-number">
<!--						<image referrerpolicy="no-referrer" src="http://www.gzzzyd.com/groupon/home_slices/出厂编号-线@2x.png" />-->
						<text v-if="state == 8">
							售后编号: {{item.orderNo}}
						</text>
						<text v-else>
							订单编号: {{item.orderNo}}
						</text>
						<view class="status">{{item.orderStateDesc}}</view>
					</view>

					<view class="all-products-item" v-for="(item2, index2) in item.goodsList" :key="index2">
						<image
							:src="item2.goodsImage"
							mode="scaleToFill" />
						<view class="all-products-item-content">
							<view class="all-products-item-content-t">
								{{item2.goodsName}}
							</view>
							<view class="all-products-item-content-b">
								<view style="display:flex;">
									<text class="red"> ¥{{item2.goodsPrice}}</text>
								</view>

								<view>
									<view class="count"> x {{item2.goodsNum}}</view>
								</view>

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

					<view class="self-pickup-point">
						<view class="a-b">
							<view class="a-b1">
								自提点:
								<text class="red">
									{{item.selfTake.name}}
								</text>
							</view>
						</view>
					</view>

					<view class="op-area" v-if="state == 8">
						<button v-if="item.orderStateDesc == '申请中'" class="info-btn" @click="refuseAfterSalesShow(item.orderNo)">驳回</button>
						<button v-if="item.orderStateDesc == '申请中'" class="action-btn" @click="agreeAfterSales(item.orderNo)">同意</button>
					</view>
				</view>
			</view>
		</view>

		<!-- #ifndef MP -->
		<home></home>
		<!-- #endif -->

		<u-popup :show="showWl" mode="center"  @close="showWl = false">
			<view class="wlView">
				<view class="flex-col justify-center wlInputView" >
<!--					<input class="wlInput"  placeholder="请输入驳回原因" type="text" v-model="refuseReason" />-->
					<u--textarea class="wlInput" v-model="refuseReason" placeholder="请输入驳回原因" ></u--textarea>
				</view>
<!--				<view class="flex-row justify-between">-->
					<button class="popupButtonr"   @click="refuseAfterSales">提交</button>
<!--				</view>-->
			</view>
		</u-popup>

	</view>
</template>

<script>
import {
	getCommanderOrderDetail
} from '@/api/order.js';

import home from '@/components/home';

import {
	toLogin
} from '@/libs/login.js';
import {
	mapGetters
} from 'vuex';
// #ifdef MP
import authorize from '@/components/Authorize';
// #endif
import emptyPage from '@/components/emptyPage.vue';
import colors from '@/mixins/color.js';
import {agreeAfterSales, refuseAfterSales} from '@/api/groupon.js'


export default {
	components: {
		home,
		emptyPage,
		// #ifdef MP
		authorize
		// #endif
	},
	mixins: [colors],
	data () {
		return {
			showWl: false,
			refuseReason: '',
			afterSalesNo: '',
			grouponData: {},
			state: 0,
			grouponId: 0,
			queryType: 0,
		};
	},
	computed: mapGetters(['isLogin']),
	onShow () {

	},
	onLoad(options) {
		this.state = options.state;
		this.grouponId = options.grouponId;
		this.queryType = options.queryType;
		this.getCommanderOrderDetail(options.grouponId, options.queryType, options.state)
	},
	methods: {
		agreeAfterSales(afterSalesNo) {
			let that = this;
			console.log(that.wlNo)
			if (!afterSalesNo) {
				return that.$util.Tips({
					title: '售后编号不能为空'
				});
			}
			agreeAfterSales({
				afterSalesNo: afterSalesNo
			}).then(res => {
				this.getCommanderOrderDetail(that.grouponId, that.queryType, that.state)
				return that.$util.Tips({
					title: '操作成功',
					icon: 'success'
				});
			})
		},
		refuseAfterSalesShow(item) {
			this.afterSalesNo = item;
			this.showWl = true;
		},
		refuseAfterSales() {
			let that = this;
			if (that.refuseReason.trim().length < 1) {
				return that.$util.Tips({
					title: '请输入驳回原因'
				});
			}
			refuseAfterSales(that.afterSalesNo, that.refuseReason).then(res => {
				this.showWl = false;
				this.getCommanderOrderDetail(that.grouponId, that.queryType, that.state)
				return that.$util.Tips({
					title: '操作成功',
					icon: 'success'
				});
			})
		},
		getCommanderOrderDetail(grouponId, queryType, state) {
			let that = this;
			getCommanderOrderDetail({
				grouponId: grouponId,
				queryType: queryType,
				state: state
			}).then(res => {
				that.grouponData = res.data;
			})
		}
	}
};
</script>

<style scoped lang="scss">
.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%;
	margin: 14rpx auto 0 auto;
}

.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;

		.nv {
			flex-grow: 1;
		}

		.status {
			width: 300rpx;
			text-align: right;
			margin-left: 30rpx;
			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;
		}
	}
}

.order-number {
	height: 44rpx;
	font-size: 24rpx;
	font-weight: 400;
	color: #999999;
	line-height: 44rpx;
	margin-bottom: 20rpx;
	display: flex;
	justify-content: space-between;

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

	.status {
		min-width: 100rpx;
		text-align: right;
		margin-right: 30rpx;
		color: #666666;
	}
}



.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 20rpx;
	width: 100%;
	background: #FFF7F8;
	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 {
	height: 80rpx;
	display: flex;
	justify-content: flex-end;
	line-height: 80rpx;
	padding: 20rpx 0 0 0;
	text-align: right;

	.action-btn {
		min-width: 200rpx;
		background: #FFF7F8;
		border-radius: 32rpx;
		border: 2rpx solid #B22338;
		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;
}

.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;
	}
}

.all-products-body {
	background: white;
	margin-bottom: 20rpx;
	padding: 20rpx;
	.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: #B22338 !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;
				}
			}
		}
	}
}

.good_info {
	padding: 30rpx;
	margin-bottom: 20rpx;

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

		.nv {
			flex-grow: 1;
		}

		.status {
			width: 300rpx;
			text-align: right;
			margin-left: 30rpx;
			color: #999999;
		}
	}
}


.wlView{
	width: 500rpx;
	height: 300rpx;
	border-radius: 15rpx;
	overflow: hidden !important;
}

.wlInputView{
	width: 500rpx;
	height: 200rpx;
	padding: 0 25rpx;
	margin-top: 20rpx;
}
.wlInput{
	height: 70rpx;
	border: 1px solid #f7f7f7;
}
.popupButtonl {
	/*background: #B42A3E;*/
	width: 250rpx;
	height: 80rpx;
	line-height: 80rpx;
	/*color: #f7f7f7;*/
	border: 1px solid #f7f7f7;
}
.popupButtonr {
	width: 450rpx;
	height: 80rpx;
	line-height: 80rpx;
	border: 1px solid #f7f7f7;
	background: #B42A3E;
	font-size: 28rpx;
	font-weight: 400;
	color: #FFFFFF;
	margin-left: 24rpx;
	margin-right: 24rpx;
}
</style>