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

<template>
	<view :style="colorStyle" v-if="orderDetail.orderState">
		<view class="wait_panel">
			<view class="w1">
				<view class="imageView">
					<image v-if="orderDetail.orderState == 5" src="http://www.gzzzyd.com/groupon/home_slices/取消订单小@2x.png" mode="scaleToFill" />
					<image v-else-if="orderDetail.orderState == 4" src="http://www.gzzzyd.com/groupon/home_slices/已完成@2x.png" mode="scaleToFill" />
					<image v-else-if="orderDetail.orderState == 8" src="http://www.gzzzyd.com/groupon/home_slices/退款中@2x.png" mode="scaleToFill" />
					<image v-else src="http://www.gzzzyd.com/groupon/order_details/时间.png" mode="scaleToFill" />
				</view>

				<text v-if="orderDetail.orderState == 4" class="success_status">{{orderDetail.orderStateDesc}}</text>
        <text v-else-if="orderDetail.orderState == 8" class="refund_status">{{orderDetail.afterSalesDesc}}</text>
				<text v-else-if="orderDetail.orderState > 4" class="refund_status">{{orderDetail.orderStateDesc}}</text>
				<text v-else class="status">{{orderDetail.orderStateDesc}}</text>
			</view>
			<view class="w2" v-if="orderDetail.orderState == 1">
				需付款: <text class="red">¥{{orderDetail.paymentAmount}}</text>
				<text class="" style="margin-right:20rpx;" >
					剩余:
				</text>
				<u-count-down :time="orderDetail.remainTime * 1000" format="mm分ss秒"></u-count-down>
			</view>
			<view class="w2" v-if="orderDetail.orderState == 2">
				取货码
			</view>
			<view class="w3">
				<button v-if="orderDetail.orderState == 1" @click="goPay(orderDetail)">
					去支付
				</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" @click="getSelfTakeList">
								更换自提网点
								<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">
					<view class="p_box" style="margin-bottom: 20rpx;" v-if="orderDetail.orderState != 8">
						<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 || orderDetail.orderState == 4">
							<view class="item-lable">支付方式</view>
							<view class="item-value2">{{orderDetail.paymentModeDesc}}</view>
						</view>
            <view class="p-b-item" v-if="orderDetail.orderState == 2 || orderDetail.orderState == 4">
              <view class="item-lable">支付时间</view>
              <view class="item-value2">{{orderDetail.paymentTime}}</view>
            </view>
					</view>
					<view class="p_box"  v-if="orderDetail.orderState != 8">
						<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>
					</view>
          <view class="p_box" v-if="orderDetail.orderState == 8">
            <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.afterSalesReason}}</view>
            </view>
            <view class="p-b-item">
              <view class="item-lable">申请时间</view>
              <view class="item-value2">{{orderDetail.refundApplyTime}}</view>
            </view>
            <view class="p-b-item">
              <view class="item-lable">售后编号</view>
              <view class="item-value2">{{orderDetail.refundNo}}</view>
            </view>
            <view class="p-b-item">
              <view class="item-lable">退款方式</view>
              <view class="item-value2">原路返还</view>
            </view>
            <view class="p-b-item">
              <view class="item-lable">退款金额</view>
              <view class="item-value">￥{{orderDetail.refundAmount}}</view>
            </view>
          </view>
				</view>

				<my-swiper :type=4 ></my-swiper>
			</view>

			<view :style="{height:'100rpx'}"></view>
			<view class='footer op-area'>
<!--				<button class="info-btn" v-if="orderDetail.orderState == 4" @click="RefundShow = true">申请售后</button>-->
				<button class="info-btn" v-if="orderDetail.orderState == 1" @click="cancelOrder()">取消订单</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>

		<u-popup :show="selfTakeShow" @close="selfTakeShow = false">
				<view class="box_3 flex-col">
					<image	@click="selfTakeShow = false"
							class="icon_2"
							referrerpolicy="no-referrer"
							src="/static/images/X.png"
					/>
					<text class="text_25">切换取货点</text>

					<scroll-view scroll-y="true" class="scroll-y">


					<view class="list_1 flex-col">
						<view	@click="clickSelfTake(item)"
								class="list-items_1 flex-col"
								v-for="(item, index) in selfTakeList"
								:key="index">
							<view class="group_14 flex-row justify-between">
								<view class="flex-col">
									<text class="text_26" >{{item.name}}</text>
									<text class="text_27" >{{item.address}}</text>
								</view>
								<view class="flex-row justify-between">
									<text class="text-group_9" >距您{{item.distanceDesc}}</text>
									<image class="icon_3"
										   src="http://www.gzzzyd.com/groupon/order_details/距离@2x.png"/>
								</view>
							</view>
							<view class="group_15 flex-row">
								<view class="tag_1 flex-col">
									<text class="text_28">营业时间: {{item.busStartTimeDesc}}-{{item.busEndTimeDesc}}</text>
								</view>
							</view>
						</view>
					</view>
			</scroll-view>
				</view>
		</u-popup>

		<payment :payMode="payMode" :pay_close="pay_close" @onChangeFun="onChangeFun" :order_id="pay_order_id"
				 :totalPrice="totalPrice"></payment>

	</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 {getUserOrderDetail, orderCancel, modifySelfTake,getAdsList} from '@/api/home.js';
import {getGrouponSelfTakeList} from '@/api/groupon.js';
export default {
	components: {
		payment,
		couponListWindow,
		addressWindow,
		home,
		// #ifdef MP
		authorize
		// #endif
	},
	mixins: [colors],
	data () {
		return {
			pay_orderId: '',
			totalPrice: '0',
			pay_order_id: '',
			pay_close: false,
			payMode: [{
				name: this.$t(`微信支付`),
				icon: 'icon-weixinzhifu',
				value: 'weixin',
				title: this.$t(`使用微信快捷支付`),
				payStatus: true
			}],
			selfTakeShow: false,
			RefundShow: false,
			confirm: '', //自定义留言
			date: this.$t(`请选择`),
			time: this.$t(`请选择`),
			canvasWidth: "",
			canvasHeight: "",
			canvasStatus: false,
			newImg: [],
			orderDetail: {},
			selfTakeList: [],
			orderId:''
		}
	},
	computed: mapGetters(['isLogin']),
	// watch: {
	// 	startDate() {
	// 		return this.getDate('start');
	// 	},
	// 	endDate() {
	// 		return this.getDate('end');
	// 	}
	// },
	onLoad (options) {
		this.from = 'routine'
		console.log(options);
		this.orderId = options.orderId;
		this.getOrderDetail(this.orderId, options.afterSalesId)
	},
	/**
	 * 生命周期函数--监听页面显示
	 */
	onShow: function () {
		let _this = this
		uni.$on("handClick", res => {
			if (res) {
				_this.system_store = res.address
			}
			// 清除监听
			uni.$off('handClick');
		})
	},
	methods: {
		/**
		 * 打开支付组件
		 *
		 */
		goPay: function (item) {
			this.$set(this, 'pay_close', true);
			this.$set(this, 'pay_order_id', item.orderNo);
			this.$set(this, 'pay_orderId', item.orderId);
			this.$set(this, 'totalPrice', item.paymentAmount);
		},
		/**
		 * 支付成功回调
		 *
		 */
		pay_complete: function () {
			console.log("+++++++++++++++++++++支付成功回调++++++++++++++++++++++++++++++")
			this.pay_close = false;
			this.pay_order_id = '';
			this.pay_orderId = '';
			this.getOrderDetail(this.orderId)
			uni.$u.toast("支付成功")
		},
		/**
		 * 支付失败回调
		 *
		 */
		pay_fail: function () {
			console.log("+++++++++++++++++++++支付失败回调++++++++++++++++++++++++++++++")
			this.pay_close = false;
			this.pay_order_id = '';
			this.pay_orderId = '';
			uni.$u.toast("支付失败")
		},

		/**
		 * 事件回调
		 *
		 */
		onChangeFun: function (e) {
			console.log(e)
			this.pay_close = false;

		},

		clickSelfTake(item){
			this.selfTakeShow =false;
			//item  选中的自提点
			this.orderDetail.selfTake = item;
			this.modifySelfTake(item.id);

		},

		cancelOrder() {
			let _this = this;
			uni.showModal({
				title: '提示',
				content: '确定取消次订单',
				confirmText: '确定',
				cancelText: '我再想想',
				success(res) {
					if (res.confirm) {
						orderCancel(_this.orderDetail.orderId).then(res => {
							_this.getOrderDetail(_this.orderDetail.orderId);
							return _this.$util.Tips({
								title: _this.$t(`取消成功`),
								icon: 'success'
							});

						}).catch(err => {
							return _this.$util.Tips({
								title: err || _this.$t(`取消失败`)
							});
						});
					}
				}
			})

		},
		afterSales () {

		},
		getOrderDetail(orderId, afterSalesId) {
			uni.showLoading({
				title: '加载中...'
			});
			let longitude = uni.getStorageSync('user_longitude');
			let latitude = uni.getStorageSync('user_latitude');
			let param = {
			orderId: orderId,
			longitude: longitude,
			latitude: latitude
		  	};
			if (afterSalesId != null && afterSalesId != 'null') {
			  param.afterSalesId = afterSalesId;
		  	}
			getUserOrderDetail(param).then(res => {
				uni.hideLoading();
				this.orderDetail = res.data
			}).catch(err => {
				uni.hideLoading();
				return that.$util.Tips({
					title: err || that.$t(`获取订单详情失败`)
				});
			});
		},
		/**
		 * 获取自提点列表
		 */
		getSelfTakeList() {
			let longitude = uni.getStorageSync('user_longitude');
			let latitude = uni.getStorageSync('user_latitude');
			getGrouponSelfTakeList({
				longitude: longitude,
				latitude: latitude,
				grouponId: this.orderDetail.grouponId
			}).then(res => {
				this.selfTakeList = res.data;
				this.selfTakeShow = true;
			})
		},
		/**
		 * 修改自提点
		 * @param {Object} selfTakeId
		 */
		modifySelfTake(selfTakeId) {
			console.log(this.orderDetail);
			modifySelfTake({
				selfTakeId: selfTakeId,
				orderId: this.orderDetail.orderId
			}).then(res => {
				this.selfTakeShow = false;
				this.getOrderDetail(this.orderDetail.orderId)
			})
		}
	}
}
</script>

<style lang="scss" scoped>

	@import "/static/css/common.css";

/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 {
	padding-top: 30rpx;
	background: #fff;
	.all-products-item {
		display: flex;
		padding-bottom: 20rpx;
		background: #fff;
		padding-left: 15rpx;


		image {
			width: 128rpx;
			height: 128rpx;
			border-radius: 4rpx;
		}

		.all-products-item-content {

			width: calc(100% - 128rpx);
			display: flex;
			flex-direction: column;
			padding-left: 15rpx;


			.all-products-item-content-t {
				flex: 1;
				font-size: 24rpx;
				font-weight: 400;
				color: #333333;
				height: 80rpx;
				line-height: 40rpx;
				width: 550rpx;
				display: -webkit-box;
				-webkit-box-orient: vertical;
				-webkit-line-clamp: 2;
				overflow: hidden;
				text-overflow: ellipsis;
			}

			.all-products-item-content-b {
				flex: 1;
				font-size: 28rpx;
				font-weight: 500;
				height: 48rpx;
				line-height: 48rpx;
				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: bolder;
			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;
			font-size: 24rpx;
			font-weight: 400;
			color: #999999;
		}

		.am3 {
			display: inline-block;
			height: 44rpx;
			background: #FFF7F8;
			border-radius: 8rpx;
			padding-left: 30rpx;
			padding-right: 30rpx;
			margin-top: 0rpx;
			font-size: 20rpx;
			font-weight: 400;
			color: #999999;
			line-height: 44rpx;
		}

	}

	.a-b {
		padding: 0 30rpx;
		background: #FFF7F8;
		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-left: 30rpx;
				height: 34rpx;
				width: 34rpx;
			}
		}
	}

}

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

	background: rgb(245,245,245);
	.p_box{
		padding: 30rpx;
		background: white;
		margin-bottom: 20rpx;
	}
	.p-t {
		font-size: 32rpx;
		height: 80rpx;
		font-weight: bolder;
		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 {
		display: flex;
		flex-direction: row;
		justify-content: center;
		.imageView{
			width: 32rpx;
			height: 32rpx;
			margin-top: 4rpx;
			image {
				width: 32rpx;
				height: 32rpx;
			}
		}

	}

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

		.red {
			margin: 0 20rpx;
			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%;
	}
}

.success_status {
  min-width: 100rpx;
  color: #75BE00;
}
.refund_status {
  min-width: 100rpx;
  color: #333333;
}
.status {
  min-width: 100rpx;
  color: #FEA800;
}

/deep/ .u-count-down__text{
	font-size: 28rpx !important;
}

.scroll-y{
	height: 600rpx;
}

	.box_3 {
		background-color: rgba(250, 250, 250, 1);
		border-radius: 4px 4px 0px 0px;
		padding: 16rpx 16rpx 40rpx 32rpx;
	}

	.icon_2 {
		width: 32rpx;
		height: 32rpx;
		margin-left: 670rpx;
	}

	.text_25 {
		overflow-wrap: break-word;
		color: rgba(17, 17, 17, 1);
		font-size: 32rpx;
		font-family: PingFangSC-Medium;
		font-weight: 500;
		text-align: left;
		white-space: nowrap;
		line-height: 44rpx;
		margin: 0 278rpx 0 264rpx;
	}

	.list_1 {
		height: 602rpx;
		margin: 24rpx 16rpx 0 0;
	}

	.list-items_1 {
		background-color: rgba(255, 255, 255, 1);
		border-radius: 4px;
		margin-bottom: 16rpx;
		padding: 24rpx 24rpx 24rpx 24rpx;
	}

	.group_14 {
		width: 638rpx;
	}


	.text_26 {
		overflow-wrap: break-word;
		color: rgba(17, 17, 17, 1);
		font-size: 28rpx;
		font-weight: NaN;
		text-align: left;
		white-space: nowrap;
		line-height: 40rpx;
		margin-right: 184rpx;
	}

	.text_27 {
		overflow-wrap: break-word;
		color: rgba(153, 153, 153, 1);
		font-size: 24rpx;
		font-weight: NaN;
		text-align: left;
		white-space: nowrap;
		line-height: 34rpx;
		margin-top: 16rpx;
	}


	.text-group_9 {
		overflow-wrap: break-word;
		color: rgba(102, 102, 102, 1);
		font-size: 20rpx;
		font-weight: NaN;
		text-align: left;
		white-space: nowrap;
		line-height: 36rpx;
	}

	.icon_3 {
		width: 34rpx;
		height: 34rpx;
		margin-left: 10rpx;
		/*margin: 4rpx 0 4rpx 4rpx;*/
	}

	.group_15 {
		margin: 8rpx 390rpx 0 0;
	}

	.tag_1 {
		background-color: rgba(255, 247, 248, 1);
		border-radius: 4px;
		padding: 8rpx 24rpx 8rpx 26rpx;
	}

	.text_28 {
		overflow-wrap: break-word;
		color: rgba(153, 153, 153, 1);
		font-size: 20rpx;
		font-weight: NaN;
		text-align: left;
		white-space: nowrap;
		line-height: 28rpx;
	}






</style>