ds_mobile_app/mobile/pages/order/detail.vue

<!-- 订单详情页面 -->
<template>
	<scroll-view class="container" scroll-y @scrolltolower='getData' v-if="allData && isShow">

		<view class="main_content" :style="{backgroundImage:'url('+commonBg+')'}">
			<!-- 订单状态 start -->
			<view class="order_state">
				<!-- 待付款 start orderState == 10-->
				<block v-if="allData.orderState == 10">
					<view class="state_title">
						<image :src="imgUrl+'order-detail/to_pay.png'" mode=""></image>
						<text>{{allData.orderStateValue}}</text>
					</view>
					
					<!-- 定金预售 已付定金 还未到付尾款阶段 start -->
					<view class="state_time" v-if="allData.orderType == 103&&allData.orderSubState == 102&&!(allData.presellInfo&&allData.presellInfo.isStartRemainPay)">
						{{allData.presellInfo.remainStartTime}} {{$L('开始付尾款')}}
					</view>
					
					<!-- 定金预售 已付定金 还未到付尾款阶段 end -->
					<view class="state_time" v-else-if="stateTime">
						{{$L('剩余')}}{{stateTime}}{{allData.orderType==105&&allData.orderSubState==102&&allData.ladderGroupDetailInfo.depositRemainTime>0?$L('生成'):$L('自动关闭')}}
					</view>

				</block>
				<!-- 待付款 end-->
				<!-- 待发货  orderState == 20-->
				<block v-if="allData.orderState == 20">
					<view class="state_title">
						<image :src="imgUrl+'order-detail/delivered.png'" mode=""></image>
						<text>{{allData.orderStateValue}}</text>
					</view>
					<!-- 预售展示发货时间 start -->
					<view v-if="allData.orderType==103&&allData.presellInfo.deliverTime" class="state_time">
						{{allData.presellInfo.deliverTime}} {{$L('开始发货')}}</view>
					<!-- 预售展示发货时间 end -->
				</block>
				<!-- 待发货 end-->
				<!-- 待收货 -->
				<block v-if="allData.orderState == 30">
					<view class="state_title">
						<image :src="imgUrl+'order-detail/wait_receive.png'" mode=""
							style="width: 71rpx;height: 45rpx;"></image>
						<text>{{allData.orderStateValue}}</text>
					</view>
					<view class="state_time" v-if="stateTime">{{$L('还剩')}}{{stateTime}}{{$L('自动确认')}}</view>
				</block>
				<!-- 待评价 -->
				<block v-if="allData.orderState == 40">
					<view class="state_title await">
						<image :src="imgUrl+'order-detail/success.png'" mode="" style="width: 46rpx;height: 51rpx;">
						</image>
						<text>{{allData.orderStateValue}}</text>
					</view>
				</block>
				<!-- 待收货 end-->
				<!-- 取消订单，交易关闭 start orderState == 0 -->
				<block v-if="allData.orderState == 0">
					<view class="state_title">
						<image :src="imgUrl+'order-detail/to_pay.png'" mode=""></image>
						<text>{{allData.orderStateValue}}</text>
					</view>
					<view class="state_reason">{{allData.refuseReason}}</view>
					<!-- 注： allData.cancelRemark 不为空 时为平台取消  否则为会员取消 -->
					<view class="state_remark" v-if="allData.refuseRemark">{{allData.refuseRemark}}</view>
				</block>
				<!-- 取消订单，交易关闭 end-->
			</view>
			<!-- 订单状态 end -->

			<!-- 物流信息 start -->
			<view class="logistics_information"
				v-if="allData.orderState >= 30 && allData.routeList && allData.routeList.length > 0">
				<image :src="imgUrl+'order-detail/wuliu.png'" mode="" class="logistics_image"></image>
				<view class="logistics_des_right">
					<view class="logistics_info">
						<view class="logistics_des">{{allData.routeList[0].acceptStation}}</view>
						<view class="logistics_time">{{allData.routeList[0].acceptTime}}</view>
					</view>
					<image :src="imgUrl+'order-detail/right_down.png'" mode="" class="right_down"
						@click="lookLogistics()"></image>
				</view>
			</view>
			<!-- 物流信息 end -->

			<!-- 买家个人信息 start-->
			<view class="buyer_info">
				<image :src="imgUrl+'order-detail/map.png'" mode="" class="buyer_map"></image>
				<view class="info_det">
					<view class="info_detail">
						<view class="info_name">
							<text class="buyer_namer">{{allData.receiverName}}</text>
							<text class="buyer_phone">{{allData.receiverMobile}}</text>
						</view>
						<view class="info_address">{{allData.receiverAreaInfo+allData.receiverAddress}}</view>
					</view>
				</view>
			</view>
			<!-- 买家个人信息 end-->

			<!-- 订单内商品信息 start -->
			<view class="order_goods">
				<view class="goods_list">
					<view v-for="(store,index) in orderProductList" :key="index" class="store_item">
						<view class="store_name" @click="goStore(store.storeId)">
							<image class="store_logo" :src="imgUrl+'goods_detail/store_logo.png'"></image>
							<text class="store_name_text">{{store.storeName}}</text>
							<text class="iconfont iconziyuan11"></text>
						</view>
						<view class="goods_pre" v-for="(item,indexChild) in store.orderProductListVOList" :key="indexChild"
							@click="goProductDetail(item.productId,item.goodsId)">
							<!-- #ifdef MP-WEIXIN || APP-PLUS -->
							<view class="goods_image">
								<image :src="item.productImage" mode="aspectFill"></image>
							</view>
							<!-- #endif -->
							<!-- #ifdef H5 -->
							<view class="goods-img"
								:style="{backgroundImage: 'url('+item.productImage+')'}"></view>
							<!-- #endif -->
							<view class="goods_pre_right">
								<view class="goods_des">
									<view class="goods_name">{{item.goodsName}}</view>
									<view class="goods_spec" v-if="item.specValues">{{item.specValues}}</view>
								</view>
								<view class="goods_prices">
									<view class="goods_price"
										v-if="item.productShowPrice && $getPartNumber(item.productShowPrice,'int') && $getPartNumber(item.productShowPrice,'decimal')">
										<text class="unit">¥</text>
										<text class="price_int">{{$getPartNumber(item.productShowPrice,'int')}}</text>
										<text
											class="price_decimal">{{$getPartNumber(item.productShowPrice,'decimal')}}</text>
									</view>
									<view class="goods_num">*{{item.productNum}}</view>
									<block v-if="item.afsButton != null ">
										<!-- 退款中 可查看退款详情  售后按钮，100-退款（商家未发货），200-退款（商家发货,买家未收货），300-申请售后，401-退款中，402-退款完成,403-换货中，404-换货完成	301,退款失败-平台审核失败-->
										<view class="refund_btn"
											v-if="item.afsButton == 401 || item.afsButton == 402 || item.afsButton == 403 || item.afsButton == 404 || item.afsButton == 301"
											@click.stop="lookRefundDetail(item.afsSn,item.afsButton)">
											{{item.afsButtonValue}}</view>
										<!-- 退款 可申请退款-->
										<view class="refund_btn"
											v-if="item.isGift == 0 && (item.afsButton == 100 || item.afsButton == 200 || item.afsButton == 300)"
											@click.stop="selectService(allData.orderSn,item.orderProductId)">
											{{item.afsButtonValue}}</view>
									</block>
								</view>
							</view>
						</view>
						<!-- 订单内商品信息 end -->
						<view class="store_price_info no_top" v-if="allData.orderState != 10">
							<view class="freight">
								<text class="freight_title">{{$L('运费')}}</text>
								<text class="freight_price">￥{{allData.totalExpress}}</text>
							</view>
							<view class="actual_payment">
								<view class="actual_payment_title">
									<text>{{$L('实付款')}}</text>
									<text>{{$L('(含运费)')}}</text>
								</view>
								<view class="actual_payment_price">
									<text class="unit">¥</text>
									<text>{{$getPartNumber(allData.actualPayment,'int')}}</text>
									<text>{{$getPartNumber(allData.actualPayment,'decimal')}}</text>
								</view>
							</view>
						</view>
						<!-- 联系商家，拨打电话 start-->
						<view class="share_btn">
							<view class="share_btn_pre" @click="contactShop(store)">
								<image :src="imgUrl+'order-detail/lianxishangjia.png'" mode=""></image>
								<text>{{$L('联系商家')}}</text>
							</view>
							<view class="share_btn_pre" @click="goCall()">
								<image :src="imgUrl+'order-detail/dadianhua.png'" mode=""></image>
								<text>{{$L('拨打电话')}}</text>
							</view>
						</view>
						<!-- 联系商家，拨打电话 end-->

					</view>
				</view>

			</view>

			<!-- 定金预售订单信息 start -->
			<view class="ladder_group flex_column_start_start"
				v-if="allData.orderType == 103&&allData.presellInfo.isAllPay==0">
				<template v-for="(presale_item, presale_index) in presaleInfo">
					<view :class="{item:true, split:presale_index<(presaleInfo.length-1)?true:false}">
						<view class="title flex_row_start_center">
							<view class="right_split"></view>
							<view class="content">{{presale_item.title}}</view>
						</view>
						<view class="goods_amount flex_row_between_center">
							<text class="left">{{presale_item.goods_left}}</text>
							<text
								class="right">{{presale_item.goods_right=='--'?'':$L('￥')}}{{presale_item.goods_right}}</text>
						</view>
						<view v-if="presale_item.goods_expand_right" class="goods_amount flex_row_between_center">
							<text class="left">{{presale_item.goods_expand_left}}</text>
							<text
								class="right">{{presale_item.goods_expand_right=='--'?'':$L('￥')}}{{presale_item.goods_expand_right}}</text>
						</view>
						<view class="need_pay_amount flex_row_between_center">
							<text class="left">{{presale_item.need_pay_left}}</text>
							<text
								:class="{right:true, cur:presale_item.is_cur==1?true:false}">{{presale_item.need_pay_right=='--'?'':$L('￥')}}{{presale_item.need_pay_right}}</text>
						</view>
					</view>
				</template>
			</view>
			<!-- 定金预售订单信息 end -->

			<!-- 阶梯团订单信息 start -->
			<view class="ladder_group flex_column_start_start" v-if="allData.orderType == 105">
				<template v-for="(ladder_pro_item, ladder_pro_index) in ladderInfo">
					<view :class="{item:true, split:ladder_pro_index<(ladderInfo.length-1)?true:false}">
						<view class="title flex_row_start_center">
							<view class="right_split"></view>
							<view class="content">{{ladder_pro_item.title}}</view>
						</view>
						<view class="goods_amount flex_row_between_center">
							<text class="left">{{ladder_pro_item.goods_left}}</text>
							<text
								class="right">{{ladder_pro_item.goods_right=='--'?'':$L('￥')}}{{ladder_pro_item.goods_right}}</text>
						</view>
						<view class="need_pay_amount flex_row_between_center">
							<text class="left">{{ladder_pro_item.need_pay_left}}</text>
							<text
								:class="{right:true, cur:ladder_pro_item.is_cur==1?true:false}">{{ladder_pro_item.need_pay_right=='--'?'':$L('￥')}}{{ladder_pro_item.need_pay_right}}</text>
						</view>
					</view>
				</template>
			</view>
			<!-- 阶梯团订单信息 end -->



			<!-- //订单价格信息 -->
			<view class="store_price_info" v-if="allData.orderState == 10">
				<view class="actual_payment">
					<view class="actual_payment_title">
						<text>{{$L('商品总额')}}</text>
					</view>
					<view class="actual_payment_price">
						<text class="unit">¥</text>
						<text>{{$getPartNumber(allData.totalMoney,'int')}}</text>
						<text>{{$getPartNumber(allData.totalMoney,'decimal')}}</text>
					</view>
				</view>
				<view class="freight">
					<text class="freight_title">{{$L('运费')}}</text>
					<text class="freight_price">￥{{allData.totalExpress}}</text>
				</view>
				<view class="actual_payment">
					<view class="actual_payment_title">
						<text>{{$L('实付款')}}</text>
						<text>{{$L('(含运费)')}}</text>
					</view>
					<view class="actual_payment_price">
						<text class="unit">¥</text>
						<text>{{$getPartNumber(allData.actualPayment,'int')}}</text>
						<text>{{$getPartNumber(allData.actualPayment,'decimal')}}</text>
					</view>
				</view>
			</view>

			<!-- 订单信息  start-->
			<view class="order_des">
				<view class="order_des_title">{{$L('订单信息')}}</view>
				<view class="order_des_pre">
					<text><text class="invoice">{{$L('发票')}}</text>：</text>
					<text
						v-if="allData && allData.invoice && allData.invoice.invoiceTitle">{{allData.invoice.invoiceTitle}}</text>
					<text v-else>--</text>
				</view>
				<view class="order_des_pre" v-if="allData.orderTypeValue">
					<text>{{$L('订单类型')}}：</text>
					<text>{{allData.orderTypeValue}}{{$L('订单')}}</text>
				</view>
				<view class="order_des_pre">
					<text>{{$L('订单编号')}}：</text>
					<text>{{allData.orderSn}}</text>
				</view>
				<view class="order_des_pre" v-if="allData.orderRemark">
					<text>{{$L('订单备注')}}：</text>
					<text>{{allData.orderRemark}}</text>
				</view>
				<block v-if="orderLogs && orderLogs.length > 0">
					<view class="order_des_pre" v-for="(item,index) in orderLogs" :key="index">
						<text>{{item.orderStateLog == 10 ? '创建时间：' : item.orderStateLog == 20 ? '付款时间：' :
							item.orderStateLog == 30 ? '发货时间：' : item.orderStateLog == 40 ? '完成时间：' :item.orderStateLog == 102?'定金支付时间：':'取消时间：'}}</text>
						<text>{{item.logTime}}</text>
					</view>
				</block>
			</view>
			<!-- 订单信息  end-->


			<!-- 推荐商品 start-->
			<view class="recomment">
				<recommendGoods ref='recomment_goods' />
			</view>
			<!-- 推荐商品 end-->

		</view>
		<!-- 详情底部操作按钮 start-->
		<view class="order_det_bottom"
			v-if="(allData.orderState == 10||allData.orderState == 20||allData.orderState == 30||allData.orderState == 40||allData.orderState == 0)">
			<!-- 待付款 -->
			<block v-if="allData.orderState == 10">
				<view class="edit_address_btn" @click="editAddress">{{$L('修改地址')}}</view>
				<view class="cancel_order" @click="cancelPopup()">{{$L('取消订单')}}</view>
				<template
					v-if="!(allData.orderType == 105&&allData.orderSubState==102&&allData.ladderGroupDetailInfo.depositRemainTime>0||(allData.orderType == 103&&allData.orderSubState==102&&allData.presellInfo.remainEndTime>0))||(allData.presellInfo&&allData.presellInfo.isStartRemainPay)">
					<view v-show="ladderGroupDisplayStatus" class="go_pay" @click="goPay">{{$L('立即支付')}}</view>
				</template>
			</block>
			<!-- 待发货 -->
			<block v-if="allData.orderState == 20">
				<view class="edit_address_btn" @click="editAddress">{{$L('修改地址')}}</view>
			</block>
			<!-- 待收货 -->
			<block v-if="allData.orderState == 30">
				<view class="cancel_order" @click="lookLogistics()">{{$L('查看物流')}}</view>
				<view class="confirm_receipt" @click="confirmReceipt()">{{$L('确认收货')}}</view>
			</block>
			<!-- 待评价 -->
			<block v-if="allData.orderState == 40">
				<view class="cancel_order" @click="lookLogistics()">{{$L('查看物流')}}</view>
				<view class="go_pay" @click="goEvaluate()" v-if="allData.evaluateState!=3">{{$L('评价')}}</view>
			</block>
			<!-- 订单取消 -->
			<block v-if="allData.orderState == 0">
				<view class="edit_address_btn" @click="delOrder()">{{$L('删除订单')}}</view>
			</block>
		</view>
		<!-- 详情底部操作按钮 end-->

		<!-- 取消订单选择原因弹框 -->
		<uni-popup ref="cancelPopup" type="bottom">
			<view class="cancel_popup">
				<view class="popup_top">
					<text>{{$L('取消原因')}}</text>
					<image :src="imgUrl+'order-detail/guanbi.png'" mode="" @click="notCancel"></image>
				</view>
				<scroll-view class="uni-list cancel_list" scroll-x="true">
					<radio-group @change="radioChange">
						<label class="cancle_pre" v-for="(item,index) in cancelList" :key="index">
							<text>{{item.content}}</text>
							<radio :value="item.value" :checked="item.value === current" color="#fc1c1c"
								style="transform:scale(0.8);margin-right:0;" />
						</label>
					</radio-group>
				</scroll-view>
				<view class="cancel_popup_btn">
					<text class="" @click="notCancel()">{{$L('暂不取消')}}</text>
					<text class="" @click="confirmCancel()">{{$L('确定取消')}}</text>
				</view>
			</view>
		</uni-popup>
		<!-- 预售，阶梯团定金取消订单提示 -->
		<uni-popup ref="popup" type="dialog">
		    <uni-popup-dialog type="input" title ="提示" content="取消该订单定金不予退还,确定取消?" :duration="2000"  @close="acDialog(false)" @confirm="acDialog(true)"></uni-popup-dialog>
		</uni-popup>

	</scroll-view>

</template>
<script>
	import {
		mapState, mapMutations
	} from 'vuex';
	import recommendGoods from "@/components/recommend-goods.vue";
	import uniPopup from '@/components/uni-popup/uni-popup.vue';
	import uniPopupDialog from '@/components/uni-popup/uni-popup-dialog.vue';
	let startY = 0,
		moveY = 0,
		pageAtTop = true;
	export default {
		components: {
			recommendGoods,
			uniPopup,
			uniPopupDialog
		},
		data() {
			return {
				imgUrl: getApp().globalData.imgUrl,
				coverTransform: 'translateY(0px)',
				coverTransition: '0s',
				moving: false,
				orderSn: '', //订单号
				parentSn: '',
				allData: {}, //订单详细信息
				orderProductList: [], //订单商品列表
				cancelList: [], //取消原因列表
				current: '0', //取消原因当前点击的是第0项
				reasonId: -1, //取消原因当前点击的原因id
				stateTime: '', //等待买家付款的剩余时间
				isShow: false,
				orderLogs: [], //订单日志
				secInterval: '', //定时器
				ladderInfo: [],//阶梯团信息
				presaleInfo: [],//定金预售信息
				commonBg: getApp().globalData.imgUrl + 'order/detail_bg.png',
				ladderGroupDisplayStatus:true //立即支付按钮显示状态(此变量只在阶梯团商品下起作用)
			}
		},
		async onLoad(option) {
			//订单号
			this.orderSn = option.orderSn;
		},
		onShow(option) {
			this.getOrderDetail();
		},
		onUnload() {
			if (this.secInterval) {
				clearInterval(this.secInterval)
			}
		},

		computed: {
			...mapState(['hasLogin', 'userInfo', 'userCenterData'])
		},
		methods: {
			...mapMutations(['saveChatBaseInfo']),
			//去店铺
			goStore(storeid) {
				uni.navigateTo({
					url: '/pages/store/shopHomePage?vid=' + storeid
				})
			},

			/**
			 * 统一跳转接口,拦截未登录路由
			 * navigator标签现在默认没有转场动画，所以用view
			 */
			navTo(url) {
				if (!this.hasLogin) {
					url = '/pages/public/login';
				}
				uni.navigateTo({
					url
				})
			},

			/**
			 *  会员卡下拉和回弹
			 *  1.关闭bounce避免ios端下拉冲突
			 *  2.由于touchmove事件的缺陷（以前做小程序就遇到，比如20跳到40，h5反而好很多），下拉的时候会有掉帧的感觉
			 *    transition设置0.1秒延迟，让css来过渡这段空窗期
			 *  3.回弹效果可修改曲线值来调整效果，推荐一个好用的bezier生成工具 http://cubic-bezier.com/
			 */
			coverTouchstart(e) {
				if (pageAtTop === false) {
					return;
				}
				this.coverTransition = 'transform .1s linear';
				startY = e.touches[0].clientY;
			},
			coverTouchmove(e) {
				moveY = e.touches[0].clientY;
				let moveDistance = moveY - startY;
				if (moveDistance < 0) {
					this.moving = false;
					return;
				}
				this.moving = true;
				if (moveDistance >= 80 && moveDistance < 100) {
					moveDistance = 80;
				}

				if (moveDistance > 0 && moveDistance <= 80) {
					this.coverTransform = `translateY(${moveDistance}px)`;
				}
			},
			coverTouchend() {
				if (this.moving === false) {
					return;
				}
				this.moving = false;
				this.coverTransition = 'transform 0.3s cubic-bezier(.21,1.93,.53,.64)';
				this.coverTransform = 'translateY(0px)';
			},
			//获取订单详情信息
			getOrderDetail() {
				uni.showLoading({
					title: '加载中'
				});
				let that = this;
				let param = {};
				param.url = 'v3/business/front/orderInfo/detail';
				param.method = 'POST';
				param.data = {};
				param.data.orderSn = that.orderSn;
				that.$request(param).then(res => {
					if (res.state == 200) {
						let result = res.data;
						that.orderProductList = result.childOrdersVOS;
						that.orderLogs = result.orderLogs.reverse();
						that.allData = result || {};
						that.isShow = true;
						that.parentSn = res.data.parentSn
						if (result.orderType == 105) {
							//阶梯团信息
							let ladderInfo = result.ladderGroupDetailInfo;//阶梯团信息
							let tmpData = [];
							tmpData.push({
								key: 0,
								title: that.$L('阶段1：等待买家付款'),
								goods_left: that.$L('商品定金'),
								goods_right: ladderInfo.advanceDeposit,
								need_pay_left: that.$L('定金需付款'),
								need_pay_right: ladderInfo.needAdvanceDeposit,
								is_cur: 0,
							});
							if (ladderInfo.orderSubState == 101) {
								tmpData[0].is_cur = 1;
								this.countDownBySecond(result.remainTime,result);
							} else if (ladderInfo.orderSubState > 101) {
								tmpData[0].title = that.$L('阶段1：已完成');
								tmpData.push({
									key: 1,
									title: ladderInfo.orderSubState == 102 ? that.$L('阶段2：等待买家付款') : that.$L('阶段2：已完成'),
									goods_left: that.$L('商品尾款'),
									goods_right: ladderInfo.remainAmount,
									need_pay_left: that.$L('尾款需付款'),
									need_pay_right: ladderInfo.needRemainAmount,
									is_cur: ladderInfo.orderSubState == 102 ? 1 : 0
								});
								if (ladderInfo.orderSubState == 102 && ladderInfo.depositRemainTime > 0) {
									tmpData[1].title = that.$L('尾款生成中');
									tmpData[1].goods_right = '--';
									tmpData[1].need_pay_right = '--';
									this.countDownBySecond(ladderInfo.depositRemainTime);
								} else {
									this.countDownBySecond(ladderInfo.remainEndTime);
								}
							}
							this.ladderInfo = tmpData;
						}
						if (result.orderType == 103 && result.presellInfo.isAllPay == 0) {
							//定金预售信息
							let presaleInfo = result.presellInfo;//定金预售信息
							this.commonBg = this.imgUrl + 'order/preSale_bg.png'
							let tmpData = [];
							tmpData.push({
								key: 0,
								title: that.$L('阶段1：等待买家付款'),
								goods_left: that.$L('商品定金'),
								goods_right: presaleInfo.depositAmount,
								goods_expand_left: that.$L('定金膨胀'),
								goods_expand_right: presaleInfo.firstExpand,
								need_pay_left: that.$L('定金需付款'),
								need_pay_right: presaleInfo.needDepositAmount,
								is_cur: 0,
							});
							if (presaleInfo.orderSubState == 101) {
								tmpData[0].is_cur = 1;
								this.countDownBySecond(result.remainTime);
								tmpData.push({
									key: 1,
									title: that.$L('阶段2：未开始'),
									goods_left: that.$L('商品尾款'),
									goods_right: presaleInfo.remainAmount,
									need_pay_left: that.$L('尾款需付款'),
									need_pay_right: presaleInfo.needRemainAmount,
									is_cur: 0
								});
							} else if (presaleInfo.orderSubState > 101) {
								tmpData[0].title = that.$L('阶段1：已完成');
								let curTitle = '';
								if (presaleInfo.orderSubState == 102) {
									if (presaleInfo.isStartRemainPay) {
										this.countDownBySecond(presaleInfo.remainEndTime);
										curTitle = that.$L('阶段2：等待买家付款');
									} else {
										this.stateTime = '';//清空倒计时
										curTitle = that.$L('阶段2：') + presaleInfo.remainStartTime + that.$L('开始付尾款');
									}
								} else {
									curTitle = that.$L('阶段2：已完成');
								}
								tmpData.push({
									key: 1,
									title: curTitle,
									goods_left: that.$L('商品尾款'),
									goods_right: presaleInfo.remainAmount,
									need_pay_left: that.$L('尾款需付款'),
									need_pay_right: presaleInfo.needRemainAmount,
									is_cur: presaleInfo.orderSubState == 102 ? 1 : 0
								});
							}
							this.presaleInfo = tmpData;
						}
						if(result.orderType == 102){
							this.countDownBySecond(result.remainTime,result)
						}
						uni.hideLoading();
						if ((!(result.orderType == 105 && (result.orderSubState == 101 || result.orderSubState == 102))) && (!(result.orderType == 103 && result.presellInfo.isAllPay == 0))&& (!result.orderType == 102)) {
							that.countup();
						}
					} else {
						this.$api.msg(res.msg);
					}
				}).catch((e) => {
					//异常处理
				})
			},

			//计算时间差
			countup() {
				let that = this;
				let createTime = that.allData.createTime;
				let startStrs = createTime.split(" ");
				let createTimeStamp = that.strtotime(startStrs[0], startStrs[1]); //开始时间时间戳(毫秒)
				if (that.allData.orderState == 10) { //等待买家付款 ，24小时过期
					let endTimeStamp = createTimeStamp + 86400000; //结束时间时间戳   86400000是1天的
					that.countDown(endTimeStamp);
				} else if (that.allData.orderState == 30) { //等待买家收货
					let endTime = that.allData.autoReceiveTime; //结束时间时间戳
					let endStrs = endTime.split(" ");
					let endTimeStamp = that.strtotime(endStrs[0], endStrs[1]); //开始时间时间戳(毫秒)
					that.countDown(endTimeStamp);
				}
			},

			//倒计时(参数为：剩余秒数)
			countDownBySecond(second,goodsInfo) {
				let that = this;
				//创建定时器前先清除定时器
				clearInterval(that.secInterval);
				let diffrentTimeStamp = second * 1000;
				that.secInterval = setInterval(() => {
					if (diffrentTimeStamp == 0) {
						that.stateTime = '';
						clearInterval(that.secInterval);
						if(!(goodsInfo && (goodsInfo.orderType === 105 && goodsInfo.orderSubState === 101)|| goodsInfo.orderType === 102)){
							//非 商品为阶梯团&&定金未付款 情况下才会重新请求商品详情
							that.getOrderDetail();
						}else{
							//阶梯团&&定金未付款商品 倒计时结束后主动隐藏支付按钮
							that.ladderGroupDisplayStatus=false;
						}
					} else if (diffrentTimeStamp > 0) {
						//将时间戳转换为天，时，分，秒 并倒计时
						that.stateTime = that.formatDuring(diffrentTimeStamp)
					} else {
						that.stateTime = ''
					}
					diffrentTimeStamp -= 1000; //相差时间 毫秒数
				}, 1000)
			},

			//倒计时
			countDown(endTimeStamp) {
				let that = this;
				//创建定时器前先清除定时器
				clearInterval(that.secInterval);
				that.secInterval = setInterval(() => {
					let currentTimestamp = new Date().getTime(); //当前时间时间戳 （毫秒数）
					let diffrentTimeStamp = endTimeStamp - currentTimestamp; //相差时间 毫秒数
					if (diffrentTimeStamp == 0) {
						that.stateTime = '';
						clearInterval(that.secInterval);
						that.getOrderDetail();
					} else if (diffrentTimeStamp > 0) {
						//将时间戳转换为天，时，分，秒 并倒计时
						that.stateTime = that.formatDuring(diffrentTimeStamp)
					} else {
						that.stateTime = ''
					}
				}, 1000)
			},
			//将标准格式（2014-08-02 11:23:12）转化为时间戳  函数   参数：time_str为（2014-08-02）   fix_time为（11:23:12）
			strtotime(time_str, fix_time) {
				let time = (new Date()).getTime();
				if (time_str) {
					let str = time_str.split('-');
					if (3 === str.length) {
						let year = str[0] - 0;
						let month = str[1] - 0 - 1;
						var day = str[2] - 0;
						if (fix_time) {
							let fix = fix_time.split(':');
							if (3 === fix.length) {
								let hour = fix[0] - 0;
								let minute = fix[1] - 0;
								time = (new Date(year, month, day, hour, minute)).getTime();
							}
						} else {
							time = (new Date(year, month, day)).getTime();
						}
					}
				}
				return time;
			},
			//将时间戳转换为时分秒
			formatDuring(mss) {
				let days = parseInt(mss / (1000 * 60 * 60 * 24));
				let hours = parseInt((mss % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
				let minutes = parseInt((mss % (1000 * 60 * 60)) / (1000 * 60));
				if (minutes < 10) {
					minutes = '0' + minutes;
				}
				let seconds = ((mss % (1000 * 60)) / 1000).toFixed(0);
				if (days > 0) {
					return days + " 天 " + hours + " 小时 " + minutes + " 分钟 ";
				} else if (hours > 0) {
					return hours + " 小时 " + minutes + " 分钟 ";
				} else if (minutes >= 1) {
					return minutes + " 分钟 ";
				} else { //如果剩 1分钟之内就不让显示
					return ''
				}
			},
			//获取推荐商品
			getData() {
				this.$refs.recomment_goods.getMoreData();
			},
			//拨打电话
			goCall() {
				if (!this.allData.platformPhone) {
					uni.showToast({
						title: '该商家暂未设置电话',
						icon: 'none'
					})
					return
				}
				uni.makePhoneCall({
					phoneNumber: this.allData.platformPhone
				});
			},
			//联系商家，跳转客服页面
			contactShop(orderItem) {
				let chatBaseInfo = {};
				chatBaseInfo.memberId = this.userCenterData.memberId;
				chatBaseInfo.memberName = this.userCenterData.memberName;
				chatBaseInfo.memberNickName = this.userCenterData.memberNickName;
				chatBaseInfo.memberAvatar = this.userCenterData.memberAvatar;
				chatBaseInfo.storeId = orderItem.storeId;
				chatBaseInfo.storeLogo = orderItem.storeLogo;
				chatBaseInfo.storeName = orderItem.storeName;
				chatBaseInfo.source = 'order';
				let tempGoodsData = [{
					'productId': orderItem.orderProductListVOList[0].orderProductId,
					'goodsName': orderItem.orderProductListVOList[0].goodsName,
					'goodsImage': orderItem.orderProductListVOList[0].productImage,
					'goodsPrice': orderItem.orderProductListVOList[0].productShowPrice,
				}];
				chatBaseInfo.showData = {
					'orderSn': orderItem.orderSn,
					'orderStateValue': this.allData.orderStateValue,
					'createTime': this.allData.createTime,
					'orderProductList': tempGoodsData,
				}
				this.saveChatBaseInfo(chatBaseInfo);
				uni.navigateTo({
					url: '/pages/chat/detail?vid=' + orderItem.storeId
				})
			},
			//打开取消订单弹框
			cancelPopup() {
				if((this.allData.orderType==105&&!this.allData.ladderGroupDetailInfo.isRefundDeposit)||this.allData.orderType==103){
					this.$refs.popup.open()
				}else{
					this.$refs.cancelPopup.open();
					this.getCancelList();
				}
				
			},
			
			// 预售,阶梯团的提示确认
			acDialog(type){
				if(type==true){
					this.$refs.popup.close()
					this.$refs.cancelPopup.open();
					this.getCancelList();
				}else{
					this.$refs.popup.close()
				}
			},
			
			//获取取消订单原因列表
			getCancelList() {
				let param = {};
				param.url = 'v3/system/front/reason/list';
				param.method = 'GET';
				param.data = {};
				param.data.type = 104;
				this.$request(param).then(res => {
					if (res.state == 200) {
						this.cancelList = res.data || [];
						this.cancelList && this.cancelList.map((item, index) => item.value = '' + index);
						this.reasonId = this.cancelList[0].reasonId;
					} else {
						this.$api.msg(res.msg);
					}
				}).catch((e) => {
					//异常处理
				})
			},
			//取消原因单选框切换
			radioChange(e) {
				for (let i = 0; i < this.cancelList.length; i++) {
					if (this.cancelList[i].value === e.target.value) {
						this.reasonId = this.cancelList[i].reasonId;
						break;
					}
				}
			},
			//暂不取消订单
			notCancel() {
				this.$refs.cancelPopup.close();
				this.goRefresh();
			},
			//确定取消订单
			confirmCancel() {
				let that = this;
				uni.showModal({
					title: '提示',
					content: '确定取消该订单?',
					success: function (res) {
						if (res.confirm) {
							let param = {};
							param.url = 'v3/business/front/orderOperate/cancel';
							param.method = 'POST';
							param.data = {};
							param.data.parentSn = that.parentSn;
							param.data.reasonId = that.reasonId;
							that.$request(param).then(res => {
								if (res.state == 200) {
									that.$api.msg(res.msg);
									that.$refs.cancelPopup.close();
									that.goRefresh();
								} else {
									that.$api.msg(res.msg);
								}
							}).catch((e) => {
								//异常处理
							})
						} else if (res.cancel) {
							that.$refs.cancelPopup.close();
						}
					}
				})
			},
			//去付款
			goPay() {
				//阶梯团 付定金  付尾款、
				let goodsInfo = this.allData.childOrdersVOS[0].orderProductListVOList[0];
				if (this.allData.orderType == 105 && this.allData.orderSubState == 102 && this.allData.ladderGroupDetailInfo.depositRemainTime == 0) {
					uni.navigateTo({
						url: `/pages/order/confirmOrder?goodsId=${goodsInfo.goodsId}&productId=${goodsInfo.productId}&numbers=${goodsInfo.productNum}&ifcart=2&orderSn=${this.allData.orderSn}`
					})
				} else if (this.allData.orderType == 103 && this.allData.orderSubState == 102 && this.allData.presellInfo.depositRemainTime == 0) {
					uni.navigateTo({
						url: `/pages/order/confirmOrder?goodsId=${goodsInfo.goodsId}&productId=${goodsInfo.productId}&numbers=${goodsInfo.productNum}&ifcart=2&orderSn=${this.allData.orderSn}`
					})
				} else {
					uni.navigateTo({
						url: '/pages/order/pay?paySn=' + this.allData.paySn + '&payMethodType=orderDetail'
					})
				}
			},
			//修改地址
			editAddress() {
				uni.navigateTo({
					url: '/pages/address/list?source=3' + '&orderSn=' + this.orderSn
				})
			},
			//查看退款详情  换货详情
			lookRefundDetail(afsSn, afsButton) {
				if (afsButton == 403 || afsButton == 404) { //可查看换货详情
					let sourceType = 'exchange';
					uni.navigateTo({
						url: '/pages/order/refundDetail?afsSn=' + afsSn + '&sourceType=' + sourceType
					})
				} else {
					let sourceType = '';
					uni.navigateTo({
						url: '/pages/order/refundDetail?afsSn=' + afsSn + '&sourceType=' + sourceType + '&orderState=' + this.allData.orderState
					})
				}

			},
			//选择服务
			selectService(orderSn, orderProductId) {
				let that = this;
				let param = {};
				param.url = 'v3/business/front/after/sale/apply/applyInfo';
				param.method = 'GET';
				param.data = {};
				param.data.orderSn = orderSn; //订单号
				param.data.orderProductId = orderProductId; //订单明细id
				this.$request(param).then(res => {
					if (res.state == 200) {
						if (that.allData.orderState == 20) { //待发货直接进入申请退款页面
							uni.navigateTo({
								url: '/pages/order/applyRefund?orderSn=' + orderSn + '&orderProductId=' + orderProductId +
									'&sourceType=orderDetail' + '&orderListLen=' + this.orderProductList[0].orderProductListVOList.length
							})
						} else if (that.allData.orderState == 30 || that.allData.orderState == 40) {
							//待收货和待评价进入到选择服务页面
							uni.navigateTo({
								url: '/pages/order/selectService?orderSn=' + orderSn + '&orderProductId=' + orderProductId +
									'&orderListLen=' + this.orderProductList[0].orderProductListVOList.length
							})
						}
					} else {
						this.$api.msg(res.msg);
					}
				}).catch((e) => {
					//异常处理
				})
			},
			//查看物流
			lookLogistics() {
				uni.navigateTo({
					url: '/pages/order/lookLogistics?orderSn=' + this.orderSn + '&productLeadLittle=' + this.orderProductList[0].productLeadLittle
				})
			},
			//更新当前页面方法
			goRefresh() {
				let pages = getCurrentPages();
				let currPage = pages[pages.length - 1]; //当前页面
				let beforePage = pages[pages.length - 2]; //上一页
				currPage.$vm.getOrderDetail(); //更新当前页面数据
				beforePage.$vm.loadData(); //更新上一页数据
			},
			//删除订单
			delOrder() {
				let that = this;
				uni.showModal({
					title: '提示',
					content: '确定删除该订单?',
					success: function (res) {
						if (res.confirm) {
							let param = {};
							param.url = 'v3/business/front/orderOperate/delete';
							param.method = 'POST';
							param.data = {};
							param.data.orderSn = that.orderSn;
							that.$request(param).then(res => {
								if (res.state == 200) {
									that.$api.msg(res.msg);
									that.goRefresh();
									uni.navigateBack({ //返回上一页
										delta: 1
									})
								} else {
									that.$api.msg(res.msg);
								}
							}).catch((e) => {
								//异常处理
							})
						} else if (res.cancel) {

						}
					}
				})
			},
			//确认收货
			confirmReceipt() {
				let that = this;
				uni.showModal({
					title: '提示',
					content: '确认收货？',
					success: function (res) {
						if (res.confirm) {
							let param = {};
							param.url = 'v3/business/front/orderOperate/receive';
							param.method = 'POST';
							param.data = {};
							param.data.orderSn = that.orderSn;
							that.$request(param).then(res => {
								if (res.state == 200) {
									that.$api.msg(res.msg);
									that.goRefresh();
									setTimeout(_ => {
										uni.navigateTo({
											url: '/pages/order/tradeSuccess?orderSn=' + that.orderSn + '&sourceType=orderDetail'
										})
									}, 1000)
								} else {
									that.$api.msg(res.msg);
								}
							}).catch((e) => {
								//异常处理
							})
						}
					}
				})
			},
			//去商品详情页
			goProductDetail(productId, goodsId) {
				uni.navigateTo({
					url: '/pages/product/detail?productId=' + productId + '&goodsId=' + goodsId
				})
			},
			//去评价页面
			goEvaluate(orderSn) {
				uni.navigateTo({
					url: '/pages/order/publishEvaluation?orderSn=' + this.orderSn
				})
			}
		}
	}
</script>
<style lang='scss'>
	page {
		background: $bg-color-split;
		width: 750rpx;
		margin: 0 auto;
	}

	.container {
		display: flex;
		flex: 1;
		width: 100%;
		height: 100vh;
		position: relative;
		background-color: #FFFFFF;

		.main_content {
			width: 100%;
			/* background: url('/static/order/detail_bg.png') no-repeat; */
			min-height: calc(var(--status-bar-height) + 452rpx);
			padding-top: var(--status-bar-height);
			background-repeat: no-repeat;
			background-size: 750rpx 452rpx;
			padding-bottom: 90rpx;

			.ladder_group {
				border-top: 10px solid #F5F5F5;
				width: 750rpx;
				background: #fff;

				.item {
					margin-left: 20rpx;
					width: 730rpx;
					box-sizing: border-box;
					padding-right: 20rpx;

					&.split {
						border-bottom: 1rpx solid #F2F2F2;
					}

					.title {
						margin-top: 22rpx;

						.right_split {
							width: 5rpx;
							height: 26rpx;
							background: linear-gradient(360deg, #FC1D1C 0%, #FF7A18 100%);
							border-radius: 3rpx;
							margin-right: 18rpx;
						}

						.content {
							color: #F10707;
							font-size: 28rpx;
						}
					}

					.goods_amount {
						margin-top: 20rpx;
						color: #666666;
						font-size: 26rpx;
						line-height: 30rpx;
					}

					.need_pay_amount {
						margin-top: 20rpx;
						color: #2D2D2D;
						font-size: 26rpx;
						line-height: 30rpx;
						margin-bottom: 25rpx;

						.cur {
							color: #F10707;
						}
					}
				}
			}

			.order_state {
				padding-top: 96rpx;
				/* #ifdef MP */
				padding-top: 0;
				/* #endif */
				box-sizing: border-box;
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: center;
				width: 100%;
				margin-bottom: 19rpx;
				height: 296rpx;

				.state_title {
					display: flex;
					align-items: center;
					justify-content: center;
					width: 100%;

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

					text {
						font-size: 38rpx;
						font-family: PingFang SC;
						font-weight: bold;
						color: #FFFFFF;
						line-height: 32rpx;
					}
				}

				.state_reason {
					font-size: 24rpx;
					font-family: PingFang SC;
					font-weight: 500;
					color: #FFFFFF;
					line-height: 32rpx;
					margin: 20rpx 0;
				}

				.state_remark {
					font-size: 24rpx;
					font-family: PingFang SC;
					font-weight: 500;
					color: #FFFFFF;
					line-height: 32rpx;
				}

				.await {
					margin-bottom: 139rpx;
				}

				.state_time {
					font-size: 24rpx;
					font-family: PingFang SC;
					font-weight: 500;
					color: #FFFFFF;
					line-height: 32rpx;
					margin: 22rpx 0 32rpx;
				}
			}

			.logistics_information {
				display: flex;
				background: #FFFFFF;
				box-shadow: 1rpx 3rpx 30rpx 0rpx rgba(102, 102, 102, 0.1);
				width: 710rpx;
				margin: 0 auto;
				padding: 40rpx 0 30rpx 20rpx;
				border-radius: 15rpx 15rpx 0 0;
				border-bottom: 1rpx solid #F4F4F4;

				.logistics_image {
					width: 34rpx;
					height: 28rpx;
					margin-right: 18rpx;
				}

				.logistics_des_right {
					display: flex;
					align-items: center;

					.logistics_info {
						display: flex;
						flex-direction: column;
						justify-content: space-between;
						width: 565rpx;

						.logistics_des {
							font-size: 28rpx;
							font-family: PingFang SC;
							font-weight: 500;
							color: #333333;
							line-height: 39rpx;
							width: 519rpx;
							text-overflow: -o-ellipsis-lastline;
							overflow: hidden;
							text-overflow: ellipsis;
							display: -webkit-box;
							-webkit-line-clamp: 2;
							line-clamp: 2;
							-webkit-box-orient: vertical;
							margin-bottom: 21rpx;
						}

						.logistics_time {
							font-size: 26rpx;
							font-family: PingFang SC;
							font-weight: 500;
							color: #949494;
							line-height: 45rpx;
						}
					}

					.right_down {
						width: 46rpx;
						height: 46rpx;
					}
				}
			}

			.buyer_info {
				width: 710rpx;
				background: #FFFFFF;
				box-shadow: 1rpx 3rpx 30rpx 0rpx rgba(102, 102, 102, 0.1);
				border-radius: 15rpx;
				margin: 0 auto;
				display: flex;
				padding: 41rpx 20rpx;
				box-sizing: border-box;

				.buyer_map {
					width: 34rpx;
					height: 34rpx;
					margin-right: 20rpx;
				}

				.info_det {
					display: flex;
					width: 100%;
					justify-content: space-between;

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

						.info_name {
							display: flex;
							align-items: center;
							font-size: 28rpx;
							font-family: PingFang SC;
							font-weight: 500;
							color: #2E2E2E;
							line-height: 28rpx;

							.buyer_namer {
								color: #2E2E2E;
							}

							.buyer_phone {
								color: #666666;
								margin-left: 20rpx;
							}
						}

						.info_address {
							width: 560rpx;
							font-size: 28rpx;
							font-family: PingFang SC;
							font-weight: 500;
							color: #343434;
							line-height: 39rpx;
							margin-top: 28rpx;
							word-break: break-all;
						}
					}
				}
			}

			.order_goods {
				.goods_list {
					padding: 20rpx 0 0 0;

					.store_item:not(:first-child) {
						border-top: 20rpx solid #F5F5F5;
					}

					.goods_pre {
						display: flex;
						margin: 0 20rpx;
						box-sizing: border-box;
						padding-bottom: 22rpx;
						border-bottom: 1rpx solid #f2f2f2;

						.goods_image {
							width: 200rpx;
							height: 200rpx;
							background: #F3F3F3;
							border-radius: 14px;
							

							image {
								width: 200rpx;
								height: 200rpx;
								border-radius: 14rpx;
							}
						}
						
						.goods-img {
							background-size: cover;
							background-position: center center;
							background-repeat: no-repeat;
							width: 200rpx;
							height: 200rpx;
							overflow: hidden;
							background-color: #F8F6F7;
							border-radius: 14rpx;
							flex-shrink: 0;
						}

						.goods_pre_right {
							display: flex;
							justify-content: space-between;
							width: 585rpx;

							.goods_des {
								margin-left: 25rpx;
								padding-top: 8rpx;
								box-sizing: border-box;
								flex: 1;

								.goods_name {
									width: 100%;
									font-size: 28rpx;
									font-family: PingFang SC;
									font-weight: 500;
									color: #343434;
									line-height: 39rpx;
									text-overflow: -o-ellipsis-lastline;
									overflow: hidden;
									text-overflow: ellipsis;
									display: -webkit-box;
									-webkit-line-clamp: 2;
									line-clamp: 2;
									-webkit-box-orient: vertical;
								}

								.goods_spec {
									font-size: 24rpx;
									font-family: PingFang SC;
									font-weight: 400;
									color: #949494;
									line-height: 30rpx;
									margin-top: 20rpx;
									width: 280rpx;
									overflow: hidden;
									text-overflow: ellipsis;
								}
							}

							.goods_prices {
								display: flex;
								flex-direction: column;
								justify-content: center;
								align-items: flex-end;

								.goods_price {
									white-space: nowrap;

									text {
										display: inline-block;
										font-family: PingFang SC;
										font-weight: 500;
										color: #343434;
										line-height: 30rpx;
									}

									.unit {
										font-size: 24rpx;
									}

									.price_int {
										font-size: 32rpx;
									}

									.price_decimal {
										font-size: 24rpx;
									}
								}

								.goods_num {
									font-size: 24rpx;
									font-family: PingFang SC;
									font-weight: 500;
									color: #2D2D2D;
									line-height: 30rpx;
								}

								.refund_btn {
									padding: 12rpx 15rpx;
									box-sizing: border-box;
									border: 1rpx solid #eeeeee;
									border-radius: 25rpx;
									font-size: 26rpx;
									line-height: 26rpx;
									font-family: PingFang SC;
									font-weight: 400;
									color: #333333;
									margin-top: 22rpx;
								}
							}
						}
					}
				}
			}

			.order_des {
				border-top: 20rpx solid #F5F5F5;
				padding: 29rpx 40rpx 0 20rpx;
				box-sizing: border-box;

				.order_des_title {
					font-size: 28rpx;
					font-family: PingFang SC;
					font-weight: 500;
					color: #343434;
					line-height: 24rpx;
					margin-bottom: 19rpx;
				}

				.order_des_pre {
					font-size: 26rpx;
					font-family: PingFang SC;
					font-weight: 500;
					color: #9A9A9A;
					line-height: 24rpx;
					display: flex;
					margin-bottom: 17rpx;
					line-height: 39rpx;
					display: flex;
					justify-content: space-between;

					text:nth-child(1) {
						color: #9A9A9A;
					}

					text:nth-child(2) {
						width: 488rpx;
						color: #343434;
						word-break: break-all;
					}

					.invoice {
						height: 13px;
						width: 52px;
						display: inline-block;
						text-align: justify;
						vertical-align: top;
					}

					.invoice::after {
						content: "";
						display: inline-block;
						width: 100%;
						overflow: hidden;
						height: 0;
					}
				}
			}

			.share_btn {
				width: 100%;
				height: 86rpx;
				background: #FFFFFF;
				/* border-top: 1rpx solid #EDEDED; */
				display: flex;
				align-items: center;
				padding: 0 118rpx;
				box-sizing: border-box;
				justify-content: space-between;

				.share_btn_pre {
					display: flex;
					align-items: center;

					image {
						width: 28rpx;
						height: 28rpx;
						margin-right: 9rpx;
					}

					image:nth-of-type(2) {
						width: 24rpx;
						height: 29rpx;
					}

					text {
						font-size: 26rpx;
						font-family: PingFang SC;
						font-weight: 500;
						color: #333333;
						line-height: 24rpx;
					}
				}
			}

			.recomment {
				background: #F5F5F5;
				box-sizing: border-box;
			}
		}

		.order_det_bottom {
			position: fixed;
			bottom: 0;
			width: 100%;
			height: 90rpx;
			background: #FFFFFF;
			box-shadow: 1rpx 1rpx 20rpx 0rpx rgba(86, 86, 86, 0.11);
			display: flex;
			justify-content: flex-end;
			align-items: center;
			padding-right: 20rpx;
			box-sizing: border-box;

			.edit_address_btn {
				width: 131rpx;
				height: 50rpx;
				border: 1rpx solid #eeeeee;
				border-radius: 25rpx;
				font-size: 24rpx;
				font-family: PingFang SC;
				font-weight: 400;
				color: #343434;
				display: flex;
				align-items: center;
				justify-content: center;
			}

			.cancel_order {
				width: 131rpx;
				height: 50rpx;
				border: 1rpx solid #eeeeee;
				border-radius: 25rpx;
				font-size: 24rpx;
				font-family: PingFang SC;
				font-weight: 400;
				color: #343434;
				display: flex;
				align-items: center;
				justify-content: center;
				margin: 0 10rpx;
			}

			.go_pay {
				width: 142rpx;
				height: 50rpx;
				background: #F30300;
				box-shadow: 1rpx 3rpx 15rpx 0rpx rgba(252, 28, 28, 0.26);
				border-radius: 25rpx;
				font-size: 24rpx;
				font-family: PingFang SC;
				font-weight: 400;
				color: #FFFFFF;
				display: flex;
				align-items: center;
				justify-content: center;
			}

			.confirm_receipt {
				width: 140rpx;
				height: 50rpx;
				background: #F30300;
				border-radius: 25rpx;
				font-size: 24rpx;
				font-family: PingFang SC;
				font-weight: 400;
				color: #FFFFFF;
				display: flex;
				justify-content: center;
				align-items: center;
			}
		}
	}

	.cancel_popup {
		width: 100%;
		height: 700rpx;
		background: #FFFFFF;
		border-radius: 15rpx 15rpx 0 0;
		position: fixed;
		width: 100% !important;
		z-index: 20;
		bottom: 0;

		.popup_top {
			height: 100rpx;
			width: 100%;
			display: flex;
			padding: 0 39rpx;
			align-items: center;
			justify-content: space-between;
			border-bottom: 1rpx solid #F8F8F8;

			text {
				font-size: 32rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #343434;
				line-height: 32rpx;
			}

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

		.cancel_list {
			padding-bottom: 128rpx;
			box-sizing: border-box;
			height: 600rpx;

			.cancle_pre {
				width: 100%;
				padding: 29rpx 40rpx;
				box-sizing: border-box;
				display: flex;
				justify-content: space-between;

				text {
					font-size: 28rpx;
					font-family: PingFang SC;
					font-weight: 500;
					color: #666666;
					line-height: 32rpx;
				}
			}
		}

		.cancel_popup_btn {
			position: fixed;
			bottom: 40rpx;
			z-index: 30;
			display: flex;
			width: 100%;
			justify-content: center;

			text:nth-child(1) {
				width: 334rpx;
				height: 70rpx;
				background: linear-gradient(-90deg, #FE9820 0%, #FFB72B 100%);
				border-radius: 35rpx 0 0 35rpx;
				font-size: 28rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #FFFFFF;
				line-height: 32rpx;
				display: flex;
				align-items: center;
				justify-content: center;
			}

			text:nth-child(2) {
				width: 334rpx;
				height: 70rpx;
				background: linear-gradient(-90deg, #FC1D1C 0%, #FF7A18 100%);
				border-radius: 0 35rpx 35rpx 0;
				font-size: 28rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #FFFFFF;
				line-height: 32rpx;
				display: flex;
				align-items: center;
				justify-content: center;
			}
		}
	}

	.store_name {
		padding-left: 20rpx;
		padding-bottom: 30rpx;
		margin-top: 30rpx;
		display: flex;
		align-items: center;

		image {
			width: 34rpx;
			height: 32rpx;
		}

		.store_name_text {
			font-size: 32rpx;
			color: #2d2d2d;
			font-weight: bold;
			margin-left: 10rpx;
		}

		.iconfont {
			// width: 13rpx;
			// height: 22rpx;
			font-size: 24rpx;
			margin-left: 10rpx;
		}
	}

	.store_price_info {
		border-top: 10px solid #F5F5F5;

		.store_price_all {
			margin: 18rpx 0;
		}

		.freight {
			display: flex;
			padding: 0 20rpx;
			box-sizing: border-box;
			justify-content: space-between;

			.freight_title {
				font-size: 26rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #343434;
				line-height: 30rpx;
			}

			.freight_price {
				font-size: 24rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #2E2E2E;
				line-height: 30rpx;
			}
		}

		.actual_payment {
			display: flex;
			justify-content: space-between;
			padding: 0 20rpx;
			box-sizing: border-box;
			margin: 18rpx 0;

			.actual_payment_title {
				display: flex;
				font-size: 26rpx;
				font-family: PingFang SC;
				font-weight: 500;
				line-height: 30rpx;
				color: #343434;

				text:nth-child(2) {
					color: #949494;
				}
			}

			.actual_payment_price {
				font-size: 24rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #FC1C1C;
				line-height: 30rpx;

				text:nth-child(2) {
					font-size: 32rpx;
				}
			}
		}
	}

	.no_top {
		border-top: none;
		margin-top: 20rpx;
	}
</style>