groupon-wx/pages/groupbuying_details/order_details_list/index.vue

<template>
	<view :style="colorStyle">
		<view class="wait_panel">
			<view class="w1">
				<image src="http://www.gzzzyd.com/groupon/home_slices/倒计时@2x.png" mode="scaleToFill" />
				<text v-if="orderDetail.orderState == 1" class="yellow">等待付款</text>
				<text v-if="orderDetail.orderState == 2" class="yellow">等待提货</text>
			</view>
			<view class="w2" v-if="orderDetail.orderState == 1">
				需付款: <text class="red">¥{{orderDetail.paymentAmount}}</text>
				剩余：26分钟30秒
			</view>
			<view class="w2" v-if="orderDetail.orderState == 2">
				取货码
			</view>
			<view class="w3">
				<button v-if="orderDetail.orderState == 1">
					去支付
				</button>
				<button v-if="orderDetail.orderState == 2">
					{{orderDetail.pickupCode}}
				</button>
			</view>
		</view>
		<view class="all-products-body" v-for="(item, index) in orderDetail.goodsList" :key="index">
			<view class="all-products-item" @click="addGoodPopupShow = true">
				<image
					:src="item.goodsImage"
					mode="scaleToFill" />

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

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

		</view>


		<view class='order-submission'>
			<view>

				<view class="nav acea-row">
					<view class="item font-num" :class="shippingType == 0 ? 'on' : 'on2'" @tap="addressType(0)"
						v-if='store_self_mention && is_shipping'></view>
					<view class="item font-num" :class="shippingType == 1 ? 'on' : 'on2'" @tap="addressType(1)"
						v-if='store_self_mention && is_shipping'></view>
				</view>
				<view class='address-info' @tap='onAddress'>
					<block>
						<view class="a-t">
							<view class="t1">
								自提门店
							</view>
							<view class="t2" v-if="orderDetail.orderState == 1">
								更换自提网点
								<image src="http://www.gzzzyd.com/groupon/order_details/切换_面24@2x.png" mode="scaleToFill" />
							</view>
						</view>
						<view class="a-m">
							<view class="am1">
								<view class="am1-1">
									{{orderDetail.selfTake.name}}
								</view>
								<view class="am1-2">
									距您{{orderDetail.selfTake.distanceDesc}}
									<image src="http://www.gzzzyd.com/groupon/order_details/距离@2x.png" mode="scaleToFill" />
								</view>
							</view>
							<view class="am2">
								{{orderDetail.selfTake.address}}
							</view>
							<view class="am3">
								营业时间 {{orderDetail.selfTake.busStartTimeDesc}}-{{orderDetail.selfTake.busEndTimeDesc}}
							</view>
						</view>
						<view class="a-b">
							<view class="a-b1">
								对接团长:
								<text class="red">
									{{orderDetail.commander}}
								</text>
							</view>
							<view class="a-b2">
								<image src="http://www.gzzzyd.com/groupon/order_details/微信@2x.png" mode="scaleToFill" />
								<image src="http://www.gzzzyd.com/groupon/order_details/电话键盘_填充@2x.png" mode="scaleToFill" />
							</view>
						</view>
					</block>

				</view>
				<view class="payment-details">
					<blok style="margin-bottom: 20rpx;">
						<view class="p-t">
							订单信息
						</view>
						<view class="p-b-item">
							<view class="item-lable">订单编号</view>
							<view class="item-value2">{{orderDetail.orderNo}}</view>
						</view>
						<view class="p-b-item">
							<view class="item-lable">下单时间</view>
							<view class="item-value2">{{orderDetail.createTime}}</view>
						</view>
						<view class="p-b-item" v-if="orderDetail.orderState == 2">
							<view class="item-lable">支付方式</view>
							<view class="item-value2">{{orderDetail.paymentModeDesc}}</view>
						</view>
					</blok>
					<blok>
						<view class="p-t">
							付款明细
						</view>
						<view class="p-b-item">
							<view class="item-lable">商品金额</view>
							<view class="item-value">￥{{orderDetail.totalAmount}}</view>
						</view>
<!-- 						<view class="p-b-item">
							<view class="item-lable">积分抵扣</view>
							<view class="item-value">￥0</view>
						</view> -->
						<view class="p-b-item">
							<view class="item-lable">总计金额</view>
							<view class="item-value">￥{{orderDetail.paymentAmount}}</view>
						</view>
					</blok>
				</view>

				<productConSwiperGroupbuying class="skeleton-rect"></productConSwiperGroupbuying>
			</view>

			<view class='footer op-area'>

				<button class="info-btn" v-if="orderDetail.orderState == 2" @click="RefundShow = true">申请售后</button>
				<button class="info-btn" v-if="orderDetail.orderState == 1" @click="cancelOrder()">取消订单</button>
				<button class="action-btn" v-if="orderDetail.orderState == 1" @click="goPay()">去支付</button>
			</view>
		</view>


		<u-popup :show="RefundShow" @close="RefundShow = false" @open="	">
			<view class="Refund_view">
				<view class="Refund_view_title">请选择退货/退款原因</view>
				<radio-group class="Refund_view_radio" name="header_type" @change="changeTitleType">
					<label>
						<radio class="disabled" value="1" /><text>退货/退款原因</text>
					</label>
					<label>
						<radio value="2" /><text>退货/退款原因</text>
					</label>
				</radio-group>
				<button class="Refund_view_btn">
					确定
				</button>
			</view>
		</u-popup>
	</view>
</template>
<script>
import couponListWindow from '@/components/couponListWindow';
import addressWindow from '@/components/addressWindow';
import home from '@/components/home';
import {
	toLogin
} from '@/libs/login.js';
import {
	mapGetters
} from "vuex";
// #ifdef MP
import authorize from '@/components/Authorize';
// #endif
import payment from '@/components/payment';
import colors from "@/mixins/color";
import productConSwiperGroupbuying from "@/components/productConSwiperGroupbuying";
import {getUserOrderDetail} from '@/api/home.js';
export default {
	components: {
		payment,
		couponListWindow,
		productConSwiperGroupbuying,
		addressWindow,
		home,
		// #ifdef MP
		authorize
		// #endif
	},
	mixins: [colors],
	data () {
		return {
			RefundShow: false,
			confirm: '', //自定义留言
			date: this.$t(`请选择`),
			time: this.$t(`请选择`),

			canvasWidth: "",
			canvasHeight: "",
			canvasStatus: false,
			newImg: [],
			orderDetail: {}
		}
	},
	computed: mapGetters(['isLogin']),
	// watch: {
	// 	startDate() {
	// 		return this.getDate('start');
	// 	},
	// 	endDate() {
	// 		return this.getDate('end');
	// 	}
	// },
	onLoad (options) {
		this.from = 'routine'
		console.log(options);
		let orderId = options.orderId;
		this.getOrderDetail(orderId)
	},
	/**
	 * 生命周期函数--监听页面显示
	 */
	onShow: function () {
		let _this = this
		uni.$on("handClick", res => {
			if (res) {
				_this.system_store = res.address
			}
			// 清除监听
			uni.$off('handClick');
		})
	},
	methods: {
		afterSales () {

		},
		getOrderDetail(orderId) {
			let longitude = uni.getStorageSync('user_longitude');
			let latitude = uni.getStorageSync('user_latitude');
			getUserOrderDetail({
				orderId: orderId,
				longitude: longitude,
				latitude: latitude
			}).then(res => {
				this.orderDetail = res.data
			});
		}
	}
}
</script>

<style lang="scss" scoped>
/deep/uni-checkbox[disabled] .uni-checkbox-input {
	background-color: #eee;
}

.alipaysubmit {
	display: none;
}

.order-submission .line {
	width: 100%;
	height: 3rpx;
}

.order-submission .line image {
	width: 100%;
	height: 100%;
	display: block;
}

.order-submission .address {
	padding: 28rpx 30rpx;
	background-color: #fff;
	box-sizing: border-box;
}

.order-submission .address .addressCon {
	width: 610rpx;
	font-size: 26rpx;
	color: #666;
}

.order-submission .address .addressCon .name {
	font-size: 30rpx;
	color: #282828;
	font-weight: bold;
	margin-bottom: 10rpx;
}

.order-submission .address .addressCon .name .phone {
	margin-left: 50rpx;
}

.order-submission .address .addressCon .default {
	margin-right: 12rpx;
}

.order-submission .address .addressCon .setaddress {
	color: #333;
	font-size: 28rpx;
}

.order-submission .address .iconfont {
	font-size: 35rpx;
	color: #707070;
}

.order-submission .allAddress {
	width: 100%;
	background: linear-gradient(to bottom, var(--view-theme) 0%, #f5f5f5 100%);
	padding-top: 100rpx;
	margin-bottom: 12rpx;
}

.order-submission .allAddress .nav {
	width: 710rpx;
	margin: 0 auto;
}

.order-submission .allAddress .nav .item {
	width: 355rpx;
}

.order-submission .allAddress .nav .item.on {
	position: relative;
	width: 250rpx;
}

.order-submission .allAddress .nav .item.on::before {
	position: absolute;
	bottom: 0;
	content: "快递配送";
	font-size: 28rpx;
	display: block;
	height: 0;
	width: 336rpx;
	border-width: 0 20rpx 80rpx 0;
	border-style: none solid solid;
	border-color: transparent transparent #fff;
	z-index: 2;
	border-radius: 7rpx 30rpx 0 0;
	text-align: center;
	line-height: 80rpx;
}

.order-submission .allAddress .nav .item:nth-of-type(2).on::before {
	content: "到店自提";
	border-width: 0 0 80rpx 20rpx;
	border-radius: 30rpx 7rpx 0 0;
}

.order-submission .allAddress .nav .item.on2 {
	position: relative;
}

.order-submission .allAddress .nav .item.on2::before {
	position: absolute;
	bottom: 0;
	content: "到店自提";
	font-size: 28rpx;
	display: block;
	height: 0;
	width: 400rpx;
	border-width: 0 0 60rpx 60rpx;
	border-style: none solid solid;
	border-color: transparent transparent rgba(255, 255, 255, 0.6);
	border-radius: 40rpx 6rpx 0 0;
	text-align: center;
	line-height: 60rpx;
}

.order-submission .allAddress .nav .item:nth-of-type(1).on2::before {
	content: "快递配送";
	border-width: 0 60rpx 60rpx 0;
	border-radius: 6rpx 40rpx 0 0;
}

.order-submission .allAddress .address {
	width: 710rpx;
	height: 150rpx;
	margin: 0 auto;
}

.order-submission .allAddress .line {
	width: 710rpx;
	margin: 0 auto;
}

.order-submission .wrapper .item .discount .placeholder {
	color: #ccc;
}

.placeholder-textarea {
	position: relative;

	.placeholder {
		position: absolute;
		color: #ccc;
		top: 26rpx;
		left: 30rpx;
	}
}

.order-submission .wrapper {
	background-color: #fff;
	margin-top: 13rpx;
}

.order-submission .wrapper .item {
	padding: 27rpx 30rpx;
	font-size: 30rpx;
	color: #282828;
	border-bottom: 1px solid #f0f0f0;

	.mark {
		background-color: #f9f9f9;
		width: 345px;
		height: 70px;
		border-radius: 1px;
		margin-top: 15px;
		padding: 12px 14px;
		color: #ccc;
		font-size: 28rpx;
		box-sizing: border-box;
	}

	.mark-msg {
		color: #333;
		font-size: 32rpx;
	}
}

.order-submission .wrapper .item .discount {
	font-size: 30rpx;
	color: #999;
}

.order-submission .wrapper .item .discount input {
	text-align: end;
}

.order-submission .wrapper .item .discount .iconfont {
	color: #515151;
	font-size: 30rpx;
	margin-left: 15rpx;
}

.order-submission .wrapper .item .discount .num {
	font-size: 32rpx;
	margin-right: 20rpx;
}

.order-submission .wrapper .item .shipping {
	font-size: 30rpx;
	color: #999;
	position: relative;
	padding-right: 58rpx;
}

.order-submission .wrapper .item .shipping .iconfont {
	font-size: 35rpx;
	color: #707070;
	position: absolute;
	right: 0;
	top: 50%;
	transform: translateY(-50%);
	margin-left: 30rpx;
}

.order-submission .wrapper .item textarea {
	background-color: #f9f9f9;
	width: 690rpx;
	height: 140rpx;
	border-radius: 3rpx;
	margin-top: 30rpx;
	padding: 25rpx 28rpx;
	box-sizing: border-box;
}

.order-submission .wrapper .item .placeholder {
	color: #ccc;
	font-size: 28rpx;
}

.order-submission .wrapper .item .list {
	margin-top: 35rpx;
}

.order-submission .wrapper .item .list .payItem {
	border: 1px solid #eee;
	border-radius: 6rpx;
	height: 86rpx;
	width: 100%;
	box-sizing: border-box;
	margin-top: 20rpx;
	font-size: 28rpx;
	color: #282828;
}

.order-submission .wrapper .item .list .payItem.on {
	border-color: #fc5445;
	color: #e93323;
}

.order-submission .wrapper .item .list .payItem .name {
	width: 50%;
	text-align: center;
	border-right: 1px solid #eee;
	padding-left: 80rpx;
}

.order-submission .wrapper .item .list .payItem .name .iconfont {
	width: 44rpx;
	height: 44rpx;
	border-radius: 50%;
	text-align: center;
	line-height: 44rpx;
	background-color: #fe960f;
	color: #fff;
	font-size: 30rpx;
	margin-right: 15rpx;
}

.order-submission .wrapper .item .list .payItem .name .iconfont.icon-weixin2 {
	background-color: #41b035;
}

.order-submission .wrapper .item .list .payItem .name .iconfont.icon-zhifubao {
	background-color: #1677FF;
}

.order-submission .wrapper .item .list .payItem .tip {
	width: 49%;
	text-align: center;
	font-size: 26rpx;
	color: #aaa;
}

.order-submission .moneyList {
	margin-top: 12rpx;
	background-color: #fff;
	padding: 30rpx;
}

.order-submission .moneyList .item {
	font-size: 28rpx;
	color: #282828;
}

.order-submission .moneyList .item~.item {
	margin-top: 20rpx;
}

.order-submission .moneyList .item .money {
	color: #868686;
}

.order-submission .footer {
	width: 100%;
	height: 100rpx;
	background-color: #fff;
	padding: 0 30rpx;
	font-size: 28rpx;
	color: #333;
	box-sizing: border-box;
	position: fixed;
	bottom: 0;
	left: 0;
	z-index: 9;
}

.order-submission .footer .settlement {
	font-size: 30rpx;
	color: #fff;
	width: 240rpx;
	height: 70rpx;
	background-color: var(--view-theme);
	border-radius: 50rpx;
	text-align: center;
	line-height: 70rpx;
}

.footer .transparent {
	opacity: 0
}

.confirm {
	text-align: right;
	font-size: 22rpx;
}

.confirmImg {
	width: 100%;

	.img {
		width: 136rpx;
		height: 136rpx;
	}

	.pictrue {
		width: 136rpx;
		height: 136rpx;
		box-sizing: border-box;
		margin: 18rpx;
		margin-bottom: 35rpx;
		position: relative;
		font-size: 22rpx;
		color: #bbb;

		.del {
			position: absolute;
			top: 0;
			right: 0;
		}
	}

	.bor {
		border: 1rpx solid #ddd;
	}

}

.fontC {
	color: grey;
}

.all-products-body {
	margin-top: 30rpx;

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

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


.address-info {
	padding: 30rpx 0;
	background: white;

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

		.t1 {
			height: 44rpx;
			font-size: 32rpx;
			font-weight: 500;
			color: #111111;
			line-height: 44rpx;
		}

		.t2 {
			height: 34rpx;
			font-size: 24rpx;
			font-weight: 400;
			color: #B42A3E;
			line-height: 34rpx;

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

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

		.am3 {
			width: 248rpx;
			height: 44rpx;
			background: #FFF7F8;
			border-radius: 8rpx;
			margin: 20rpx 30rpx;
			margin-top: 0rpx;
			font-size: 20rpx;
			font-weight: 400;
			color: #999999;
			line-height: 44rpx;
		}

	}

	.a-b {
		padding: 0 30rpx;
		width: 100%;
		background: #FFF7F8;
		border: 1px solid dashed #333333;
		height: 60rpx;
		line-height: 60rpx;
		margin: 20rpx 30rpx;
		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;
			}
		}
	}

}

.payment-details {
	margin-top: 20rpx;
	margin-bottom: 20rpx;
	padding: 30rpx;
	background: white;

	.p-t {
		font-size: 32rpx;
		height: 80rpx;
		font-weight: 500;
		color: #111111;
		line-height: 80rpx;
	}

	.p-b-item {
		height: 60rpx;
		line-height: 60rpx;
		display: flex;
		justify-content: space-between;

		.item-lable {
			font-size: 28rpx;
			font-weight: 400;
			color: #666666;
		}

		.item-value {
			font-size: 28rpx;
			font-weight: 400;
			color: #B22338;
		}

		.item-value2 {
			font-size: 28rpx;
			font-weight: 400;
			color: #666666;
		}
	}


}


.wait_panel {
	padding-top: 20rpx;
	text-align: center;
	margin-bottom: 20rpx;
	background: white;

	.w1 {
		height: 44rpx;
		font-size: 32rpx;
		font-weight: 500;
		color: #FEA800;
		line-height: 44rpx;
		margin: 20rpx 0;

		image {
			width: 40rpx;
			height: 40rpx;
		}
	}

	.w2 {
		height: 40rpx;
		font-size: 28rpx;
		margin: 20rpx 0;
		font-weight: 400;
		color: #333333;
		line-height: 40rpx;

		.red {
			color: #B22338;
		}
	}

	.w3 {
		text-align: center;
		padding-bottom: 20rpx;

		button {
			margin: auto;
			line-height: 76rpx;
			width: 240rpx;
			height: 76rpx;
			background: #B22338;
			border-radius: 38rpx;

			font-size: 28rpx;
			font-weight: 600;
			color: #FFFFFF;
		}
	}
}

.op-area {
	display: flex;
	justify-content: flex-end;
	text-align: right;

	.action-btn {
		min-width: 200rpx;
		background: #B42A3E;
		border-radius: 32rpx;
		margin-right: 30rpx;
		height: 64rpx;
		font-size: 24rpx;
		font-weight: 400;
		color: #fff;
		line-height: 64rpx;
		margin: auto 0;
	}

	.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;
		margin: auto 0;
	}
}


.Refund_view {
	height: 40vh;
	margin: 20rpx;
	padding: 0 30rpx;
	position: relative;

	.Refund_view_title {
		height: 80rpx;
		font-size: 32rpx;
		font-weight: bolder;
		color: #111111;
		line-height: 80rpx;
	}

	.Refund_view_radio {
		display: flex;
		flex-direction: column;

		label {
			flex: 1;
			margin-bottom: 20rpx;
			margin-right: 20rpx;
		}
	}

	.Refund_view_btn {
		margin: auto;
		width: 90%;
		height: 84rpx;
		background: #B42A3E;
		border-radius: 8rpx;
		font-size: 28rpx;
		font-weight: 400;
		color: #FFFFFF;
		line-height: 84rpx;
		position: absolute;
		bottom: 0;
		transform: translateX(-50%);
    left: 50%;
	}
}</style>