front/pages/order/info.vue

<template>
	<view class="order-detail padding-lr-sm" v-if="fetch && fetch.info" @click="Dever.close()">
		<use-tabbar :tabbar="false"></use-tabbar>
		<!-- 订单状态 -->
		<view class="state-area margin-tb-sm">
			<view class="padding border-radius bg-base">
				<view v-if="fetch.info.refund_status == 1">
					<view class="dflex-c fs-lg">
						<text class="iconfont icondaifukuan- fs-lg fwb"></text>
						<text class="fwb margin-left-sm">已申请售后</text>
					</view>
					<view class="dflex-c" v-if="fetch.info.refund && fetch.info.refund.status == 2">审核已通过，请您填写退货单号
					</view>
					<view class="dflex-c" v-else-if="fetch.info.refund && fetch.info.refund.status == 3">
						您已填写退货单号，请等待工作人员验收</view>
					<view class="dflex-c" v-else-if="fetch.info.refund && fetch.info.refund.status == 4">已完成退款，感谢您的支持
					</view>
					<view class="dflex-c" v-else>请耐心等待工作人员处理</view>
				</view>
				<view v-else-if="fetch.info.status == 1">
					<view class="dflex-c fs-lg">
						<text class="iconfont icondaifukuan- fs-lg fwb"></text>
						<text class="fwb margin-left-sm">订单待支付</text>
					</view>
					<view class="dflex-c">
						剩余时间：
						<u-count-down :time="fetch.info.time" format="HH:mm:ss" @change="onTime" @finish="finishTime">
							<view class="time">
								<view class="time__custom">
									<text
										class="time__custom__item">{{ timeData.hours>10?timeData.hours:'0'+timeData.hours}}</text>
								</view>
								<text class="time__doc">:</text>
								<view class="time__custom">
									<text class="time__custom__item">{{ timeData.minutes }}</text>
								</view>
								<text class="time__doc">:</text>
								<view class="time__custom">
									<text class="time__custom__item">{{ timeData.seconds }}</text>
								</view>
							</view>

						</u-count-down>
					</view>
				</view>

				<view v-else-if="fetch.info.status == 2 && fetch.info.method == 3">
					<view class="dflex-c fs-lg">
						<text class="iconfont icondaifahuo- fs-lg fwb"></text>
						<text class="fwb margin-left-sm">自提订单</text>
					</view>
					<view class="dflex-c">请出示自提码：{{fetch.info.method_code}}</view>
				</view>
				<view v-else-if="fetch.info.status == 2">
					<view class="dflex-c fs-lg">
						<text class="iconfont icondaifahuo- fs-lg fwb"></text>
						<text class="fwb margin-left-sm">订单备货中</text>
					</view>
					<view class="dflex-c">感谢您的支持，请等待发货</view>
				</view>

				<view v-else-if="fetch.info.status == 3">
					<view class="dflex-c fs-lg">
						<text class="iconfont icondaishouhuo- fs-lg fwb"></text>
						<text class="fwb margin-left-sm">订单已发货</text>
					</view>
					<view class="dflex-c">感谢您的支持，请等待收货</view>
				</view>

				<view v-else-if="fetch.info.status == 4">
					<view class="dflex-c fs-lg">
						<text class="iconfont iconyiwancheng- fs-lg fwb"></text>
						<text class="fwb margin-left-sm">订单已收货</text>
					</view>
					<view class="dflex-c">请尽快确认收货，期待您的真实评价</view>
				</view>

				<view v-else-if="fetch.info.status == 5 || fetch.info.status == 6">
					<view class="dflex-c fs-lg">
						<text class="iconfont iconyiwancheng- fs-lg fwb"></text>
						<text class="fwb margin-left-sm">订单已完成</text>
					</view>
					<view class="dflex-c">感谢您的支持，期待下次购买</view>
				</view>

				<view v-else-if="fetch.info.status >= 7">
					<view class="dflex-c fs-lg">
						<text class="iconfont icondaifukuan- fs-lg fwb"></text>
						<text class="fwb margin-left-sm">订单已关闭</text>
					</view>
					<view class="dflex-c">感谢您的支持，期待下次购买</view>
				</view>
			</view>
		</view>

		<!-- 收货人 -->
		<view class="address-area margin-tb-sm" v-if="fetch.info.address">
			<view class="dflex padding border-radius bg-main">
				<view class="iconfont icondizhi- margin-right ft-main"></view>
				<view class="flex1">
					<view class="w-full dflex-wrap-w">
						<view class="margin-bottom-xs desc">
							<text>{{ fetch.info.address.area_string }}
								{{ fetch.info.address.address }}</text>
						</view>
						<view>
							<text>{{ fetch.info.address.name }}</text>
							<text class="margin-left">{{ fetch.info.address.phone }}</text>
						</view>
					</view>
				</view>
			</view>
		</view>

		<!-- 订单商品明细 -->
		<view class="padding margin-tb-sm bg-main border-radius">
			<view class="goods-area" :class="{ 'margin-top': index > 0 }" v-for="(item, index) in fetch.info.detail"
				:key="index" @click="Dever.location('source/info?id=' + item.source_id + '&title=' + item.name)">
				<view class="dflex pos-r" style="align-items: flex-start;">
					<view class="img">
						<image :src="item.pic" mode="aspectFit"></image>
					</view>
					<view class="margin-left-sm" style="width: 100%;">
						<text class="clamp-2">{{ item.name }}</text>
						<view class="ft-dark fs-xs padding-top-xs">
							<text class="margin-right">× {{item.num}}</text>
							{{ item.sku_name || '&nbsp;&nbsp;' }}
						</view>
						<view class="margin-top-sm dflex-b">
							<text class="price">{{ item.cash_text }}</text>
							<view class="action-btn-group">
								<button v-if="item.delivery && item.delivery.title"
									class="action-btn border-radius-big bg-main"
									@click.stop="showDelivery(item.delivery)">{{item.delivery.title}}</button>
								<!--
								<button v-if="item.source_type == 2 && fetch.info.status > 1 && fetch.info.status < 5" class="action-btn border-radius-big bg-main">退款</button>-->
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>

		<!-- 订单数据 -->
		<view class="order-area padding margin-tb-sm bg-main border-radius">
			<view class="item dflex-b" @click="copy(fetch.info.order_num)">
				<text>订单编号：</text>
				<text class="ft-dark">{{ fetch.info.order_num }}</text>

			</view>
			<view class="item dflex-b" v-if="fetch.info.method_name">
				<text>发货方式：</text>
				<text class="ft-dark">{{ fetch.info.method_name }}</text>
			</view>
			<view class="item dflex-b">
				<text>下单时间：</text>
				<text class="ft-dark">{{ fetch.info.cdate_str }}</text>
			</view>
			<view class="item dflex-b">
				<text>留言备注：</text>
				<text class="ft-dark">{{ fetch.info.buy_info ? fetch.info.buy_info : '无' }}</text>
			</view>

		</view>

		<!-- 退款数据 -->
		<view class="order-area padding margin-tb-sm bg-main border-radius" v-if="fetch.info.refund">
			<view class="item dflex-b">
				<text>退款类型：</text>
				<text class="ft-dark">{{ fetch.info.refund.type_name }}</text>
			</view>
			<view class="item dflex-b">
				<text>退款金额：</text>
				<text class="ft-dark">{{ fetch.info.refund.cash_text }}</text>
			</view>
			<view class="item dflex-b">
				<text>退款状态：</text>
				<text class="ft-dark">{{ fetch.info.refund.status_name }}</text>
			</view>
			<view class="item dflex-b">
				<text>申请时间：</text>
				<text class="ft-dark">{{ fetch.info.refund.cdate_str }}</text>
			</view>
			<view class="item dflex-b">
				<text>申请原因：</text>
				<text class="ft-dark">{{ fetch.info.refund.desc_type_name }}</text>
			</view>
			<view class="item dflex-b">
				<text>申请说明：</text>
				<text class="ft-dark">{{ fetch.info.refund.desc }}</text>
			</view>
			<view class="item dflex-b" v-if="fetch.info.refund.detail_str">
				<text>退款明细：</text>
				<text class="ft-dark">{{ fetch.info.refund.detail_str }}</text>
			</view>
			<view class="item dflex-b" v-if="fetch.info.refund.audit_desc">
				<text>申请审核：</text>
				<text class="ft-dark">{{ fetch.info.refund.audit_desc }}</text>
			</view>
			<view class="item dflex-b" v-if="fetch.info.refund.delivery && fetch.info.refund.delivery.name">
				<text>退货类型：</text>
				<text class="ft-dark">{{ fetch.info.refund.delivery.name }}</text>
			</view>
			<view class="item dflex-b" v-if="fetch.info.refund.delivery && fetch.info.refund.delivery.content">
				<text>退货单号：</text>
				<text class="ft-dark">{{ fetch.info.refund.delivery.content }}</text>
			</view>
			<view class="item dflex-b" v-if="fetch.info.refund.delivery_audit_desc">
				<text>退货审核：</text>
				<text class="ft-dark">{{ fetch.info.refund.delivery_audit_desc }}</text>
			</view>
		</view>

		<!-- 统计数据 -->
		<view class="total-area padding margin-tb-sm bg-main border-radius">
			<view class="ft-dark">
				<view class="item dflex-b">
					<text>总计金额</text>
					<text class="">{{ fetch.info.cash_text }}</text>
				</view>
				<view class="item dflex-b">
					<text>优惠券抵扣</text>
					<text class="">{{ fetch.info.coupon_cash_text }}</text>
				</view>
				<view class="item dflex-b">
					<text>礼品卡抵扣</text>
					<text class="">{{ fetch.info.gift_cash_text }}</text>
				</view>
				<view class="item dflex-b">
					<text>{{fetch.info.score.name}}抵扣</text>
					<text class="">{{ fetch.info.wallet_cash_text }}</text>
				</view>
			</view>

			<view class="item dflex-b">
				<u-popover position="right" width="200px">
					<text>支付金额</text>
					<!--
					<view style="display: inline-block;">
						<u-icon name="question-circle"
							v-if="fetch.info.pay_money_cash_text != fetch.info.pay_cash_text"></u-icon>
					</view>-->
					<template v-slot:content>
						<view style="color: white;">
							<u-parse :content="fetch.info.pay_money_cash_text"></u-parse>
						</view>

					</template>
				</u-popover>
				<text class="price">{{ fetch.info.pay_cash_text }}</text>
			</view>

		</view>

		<view style="height: 100rpx;"></view>

		<!-- 底部操作区 -->
		<view class="oper-area dflex-b padding-right padding-left-sm">
			<view class="dflex">
				<view class="btn-area dflex dflex-flow-c" @click="Dever.goHome()">
					<text class="iconfont iconshouye-1"></text>
					<text>首页</text>
				</view>
				<!-- #ifndef H5 || MP-360 || MP-ALIPAY -->
				<!--
				<button class="btn no-border" open-type="contact">
					<view class="btn-area dflex dflex-flow-c">
						<text class="iconfont iconkefu-01"></text>
						<text>客服</text>
					</view>
				</button>
				-->
				<!-- #endif -->
			</view>

			<view class="dflex-e">
				<view class="dflex" v-if="fetch.info.status == 1">
					<button class="action-btn" @click="cancelOrder" :disabled="option.submit" :loading="option.submit">取消订单</button>
					<button class="action-btn main-btn" @click="payment"  :disabled="option.submit" :loading="option.submit">立即支付</button>
				</view>

				<view class="dflex" v-if="fetch.info.status == 3 || fetch.info.status == 4">
					<button class="action-btn main-btn" @click="finish"  :disabled="option.submit" :loading="option.submit">确认收货</button>
				</view>

				<view class="dflex" v-if="fetch.info.status >= 2 && fetch.info.status < 5 && !fetch.info.refund">
					<button class="action-btn main-btn" @click="open('applyRefund')">申请退款</button>
				</view>
				<view class="dflex"
					v-if="fetch.info.refund && fetch.info.refund.type == 1 && fetch.info.refund.status == 2 && fetch.info.refund_status == 1">
					<button class="action-btn main-btn" @click="open('applyRefundNumber')">退货单号</button>
				</view>
				<view class="dflex" v-if="fetch.info.review_status == 2">
					<button class="action-btn main-btn" @click="evaluate">我要评价</button>
				</view>
				<!--
				<view v-if="fetch.info.status >= 7"><button @click="delorder" class="action-btn main-btn">删除订单</button>
				</view>
				-->

				<view class="dflex" v-if="fetch.info.refund_list  && fetch.info.refund_list.length > 0">
					<button class="action-btn border-radius-big bg-main" @click="open('refund')">退款记录</button>
				</view>
			</view>
		</view>
		<u-popup :show="show.delivery" mode="bottom" @close="close('delivery')" :closeable="true" round="25">
			<scroll-view scroll-y="true" class="bg-drak border-radius" style="min-height: 66vh; max-height: 80vh;">
				<view class="padding">
					<view class="border-radius padding margin-bottom-sm bg-main">
						<view class="fs-lg fwb">{{delivery.name}}</view>
						<view v-if="delivery.type == 1">运单号：{{delivery.content}}<text class="copy"
								@click="copy(delivery.content)">复制</text></view>
						<view v-if="delivery.type == 2">内容：{{delivery.content}}<text class="copy"
								@click="copy(delivery.content)">复制</text></view>
					</view>
				</view>
				<view v-if="delivery.log && delivery.log.length > 0" class="padding-lr">
					<view class="product border-radius padding margin-bottom-sm bg-main" style="padding-bottom: 15rpx;">
						<view :class="{ 'active': index == 0, 'fwb': index == 0 }" class="dflex item pos-r"
							v-for="(item, index) in delivery.log" :key="index">
							<view :class="{ 'active': index == 0 }" class="circle"></view>
							<view :class="{ 'ft-dark': index > 0 }" class="margin-left-lg pos-r w-full margin-bottom">
								<view>{{item.status}}</view>
								<view class="margin-top-xs fs-xs">{{item.time}}</view>
							</view>
						</view>
					</view>
				</view>
			</scroll-view>
		</u-popup>

		<u-popup :show="show.applyRefund" mode="bottom" @close="close('applyRefund')" :closeable="true" round="25">
			<view class="bg-drak border-radius">

				<!--
				<view class="refund-area padding margin-lr margin-tb-sm bg-main border-radius">
					<view class="dflex-b">
						<text class="item margin-right-sm">退款金额：</text>
						<u--input
						    placeholder="请输入金额"
						    border="none"
							type="number"
						    v-model="applyRefund.cash"
						  ></u--input>
					</view>
				</view>
				-->

				<view class="refund-area padding margin-lr margin-tb-sm bg-main border-radius">
					<view class="dflex-b" @click="open('applyRefundType')">
						<text class="item margin-right-sm">退款类型：</text>
						<view class="dflex margin-left-xl">
							<text class="tip line-height-1 margin-right-xs">{{applyType}}</text>
							<view class="iconfont fs-sm iconjiantou-01" style="color: rgb(192, 192, 192);"></view>
						</view>
					</view>

					<u-action-sheet :actions="fetch.refund_type" :closeOnClickAction="true" :closeOnClickOverlay="true"
						:show="show.applyRefundType" @select="setRefundType" @close="close('applyRefundType')"
						:round="14"></u-action-sheet>
				</view>

				<view class="refund-area padding margin-lr margin-tb-sm bg-main border-radius">
					<view class="dflex-b" @click="open('applyRefundDescType')">
						<text class="item margin-right-sm">退款原因：</text>
						<view class="dflex margin-left-xl">
							<text class="tip line-height-1 margin-right-xs">{{applyDescType}}</text>
							<view class="iconfont fs-sm iconjiantou-01" style="color: rgb(192, 192, 192);"></view>
						</view>
					</view>

					<u-action-sheet :actions="fetch.refund_desc_type" :closeOnClickAction="true"
						:closeOnClickOverlay="true" :show="show.applyRefundDescType" @select="setRefundDescType"
						@close="close('applyRefundDescType')" :round="14"></u-action-sheet>
				</view>

				<!-- 上传凭证 -->
				<view class="padding margin-lr margin-tb-sm bg-main border-radius">
					<!-- 退款说明 -->
					<textarea v-model="applyRefund.desc" class="ft-black w-full margin-0 padding-0 fs-sm"
						placeholder="请填写退款说明（选填）"></textarea>

					<!-- 上传图片 -->
					<!--
					<use-upload class="pos-r" @upload="refundImgs"></use-upload>
					-->
				</view>

				<!-- 提交操作 -->
				<view class="padding w-full margin-top">
					<view class="dflex-b border-radius-big">
						<view class="tac padding-tb-sm flex1 bg-base" @click="submitRefund">提交申请</view>
					</view>
				</view>
			</view>
		</u-popup>

		<u-popup :show="show.applyRefundNumber" mode="bottom" @close="close('applyRefundNumber')" :closeable="true"
			round="25">
			<view class="bg-drak border-radius">
				<view class="padding margin-lr margin-tb-sm bg-main border-radius"
					v-if="fetch.info && fetch.info.refund && fetch.info.refund.address"
					@click="copy(fetch.info.refund.address)">
					<text>退货地址：{{fetch.info.refund.address}}</text>
				</view>

				<view class="refund-area padding margin-lr margin-tb-sm bg-main border-radius">
					<view class="dflex-b" @click="open('applyRefundDelivery')">
						<text class="item margin-right-sm">快递公司：</text>
						<view class="dflex margin-left-xl">
							<text class="tip line-height-1 margin-right-xs">{{applyDelivery}}</text>
							<view class="iconfont fs-sm iconjiantou-01" style="color: rgb(192, 192, 192);"></view>
						</view>
					</view>

					<u-picker :show="show.applyRefundDelivery" :columns="fetch.refund_delivery" keyName="name"
						@confirm="setRefundDeliveryConfirm" @close="setRefundDeliveryCancel"
						@cancel="setRefundDeliveryCancel" v-if="fetch.refund_delivery"></u-picker>
				</view>

				<view class="padding margin-lr margin-tb-sm bg-main border-radius">
					<!-- 退款说明 -->
					<textarea v-model="applyRefund.number" class="ft-black w-full margin-0 padding-0 fs-sm"
						placeholder="请填写退货单号，自提请写您的下单手机号"></textarea>
				</view>

				<!-- 提交操作 -->
				<view class="padding w-full margin-top">
					<view class="dflex-b border-radius-big">
						<view class="tac padding-tb-sm flex1 bg-base" @click="submitRefundNumber">提交单号</view>
					</view>
				</view>
			</view>
		</u-popup>

		<u-popup :show="show.refund" mode="bottom" @close="close('refund')" :closeable="true" round="25">
			<scroll-view scroll-y="true" class="bg-drak border-radius" style="min-height: 66vh; max-height: 80vh;"
				v-if="fetch && fetch.info && fetch.info.refund_list  && fetch.info.refund_list.length > 0">
				<view class="refund-area">
					<view class="order-area padding margin-tb-sm bg-main border-radius">
						<view class="item dflex-b">
							<text>退款类型：</text>
							<text class="ft-dark">{{ fetch.info.refund_list[refund].type_name }}</text>
						</view>
						<view class="item dflex-b">
							<text>退款金额：</text>
							<text class="ft-dark">{{ fetch.info.refund_list[refund].cash_text }}</text>
						</view>
						<view class="item dflex-b">
							<text>退款状态：</text>
							<text class="ft-dark">{{ fetch.info.refund_list[refund].status_name }}</text>
						</view>
						<view class="item dflex-b">
							<text>申请时间：</text>
							<text class="ft-dark">{{ fetch.info.refund_list[refund].cdate_str }}</text>
						</view>
						<view class="item dflex-b">
							<text>申请原因：</text>
							<text class="ft-dark">{{ fetch.info.refund_list[refund].desc_type_name }}</text>
						</view>
						<view class="item dflex-b">
							<text>申请说明：</text>
							<text class="ft-dark">{{ fetch.info.refund_list[refund].desc }}</text>
						</view>
						<view class="item dflex-b" v-if="fetch.info.refund_list[refund].detail_str">
							<text>退款明细：</text>
							<text class="ft-dark">{{ fetch.info.refund_list[refund].detail_str }}</text>
						</view>
						<view class="item dflex-b" v-if="fetch.info.refund_list[refund].audit_desc">
							<text>申请审核：</text>
							<text class="ft-dark">{{ fetch.info.refund_list[refund].audit_desc }}</text>
						</view>
						<view class="item dflex-b"
							v-if="fetch.info.refund_list[refund].delivery && fetch.info.refund_list[refund].delivery.name">
							<text>退货类型：</text>
							<text class="ft-dark">{{ fetch.info.refund_list[refund].delivery.name }}</text>
						</view>
						<view class="item dflex-b"
							v-if="fetch.info.refund_list[refund].delivery && fetch.info.refund_list[refund].delivery.content">
							<text>退货单号：</text>
							<text class="ft-dark">{{ fetch.info.refund_list[refund].delivery.content }}</text>
						</view>

						<view class="item dflex-b" v-if="fetch.info.refund_list[refund].delivery_audit_desc">
							<text>退货审核：</text>
							<text class="ft-dark">{{ fetch.info.refund_list[refund].delivery_audit_desc }}</text>
						</view>
					</view>
				</view>
				<view class="padding-lr">
					<view class="product border-radius padding margin-bottom-sm bg-main">
						<view :class="{ 'active': refund == index, 'fwb': refund == index }" class="dflex item pos-r"
							v-for="(item, index) in fetch.info.refund_list" :key="index" @click="setRefund(index)">
							<view :class="{ 'active': refund == index }" class="circle"></view>
							<view :class="{ 'ft-dark': refund != index }"
								class="margin-left-lg pos-r w-full margin-bottom">
								<view>{{item.status_name}}：{{item.cash_text}}</view>
								<view class="margin-top-xs fs-xs">{{item.cdate_str}}</view>
							</view>
						</view>
					</view>
				</view>
			</scroll-view>
		</u-popup>
	</view>
</template>

<script>
	import Pay from '@/lib/dever/pay.js'
	export default {
		components: {
			// share
		},
		data() {
			return {
				fetch: {},
				show: {
					delivery: false,
					refund: false,
					applyRefund: false,
					applyRefundDescType: false,
					applyRefundType: false,
					applyRefundNumber: false,
					applyRefundDelivery: false,
				},
				delivery: {},
				refund: 0,
				applyRefund: {
					desc_type: 0,
					type: 0,
					desc: '',
					cash: '',
					number: '',
					delivery_id: '',
				},
				applyType: '请选择',
				applyDescType: '请选择',
				applyDelivery: '请选择',

				timeData: {},
				
				option: {
					id: 0,
					order: '',
					submit: false,
				}

			};
		},
		onLoad(options) {
			if (options.id) {
				this.option.id = options.id;
			}
			if (options.order) {
				this.option.order = options.order;
			}
			
		},
		//下拉刷新
		onPullDownRefresh() {
			this.loadData();
		},
		onShow() {
			this.loadData();
		},
		methods: {
			loadData() {
				this.DeverApi.get(this, 'order.info', this.option);
			},
			// 立即支付
			payment() {
				this.DeverApi.post('order.pay', this.option, r => {
					Pay.payment(r.order_num, r.pay, res => {
						this.Dever.success('支付成功', () => {
							this.loadData();
						})
					})
				});
			},
			open(key) {
				this.show[key] = true;
			},
			close(key) {
				this.show[key] = false;
			},

			showDelivery(item) {
				if (item.content) {
					this.delivery = item;
					this.open('delivery');
				}
			},
			// 确认发货
			finish() {
				this.Dever.confirm('确认已收到货？', () => {
					this.DeverApi.post('order.finish', this.option, r => {
						this.loadData();
						this.Dever.success('收货成功');
					});
				});
			},
			setRefund(index) {
				this.refund = index;
			},
			setRefundType(e) {
				this.applyRefund.type = e.id;
				this.applyType = e.name;
			},
			setRefundDescType(e) {
				this.applyRefund.desc_type = e.id;
				this.applyDescType = e.name;
			},
			setRefundDeliveryConfirm(e) {
				this.applyRefund.delivery_id = e.value[0].id;
				this.applyDelivery = e.value[0].name;
				this.setRefundDeliveryCancel()
			},
			setRefundDeliveryCancel() {
				this.show.applyRefundDelivery = false;
			},
			submitRefund() {
				/*
				if (this.applyRefund.cash <= 0) {
					return this.Dever.alert('请输入退款金额');
				}*/
				if (!this.applyRefund.type && this.applyRefund.type <= 0) {
					return this.Dever.alert('请选择退款类型');
				}
				if (!this.applyRefund.desc_type && this.applyRefund.desc_type <= 0) {
					return this.Dever.alert('请选择退款原因');
				}
				this.Dever.confirm('确认提交退款申请？', () => {
					this.DeverApi.post('order.refund', {
						id: this.option.id,
						cash: this.applyRefund.cash,
						type: this.applyRefund.type,
						desc_type: this.applyRefund.desc_type,
						desc: this.applyRefund.desc
					}, r => {
						this.show.applyRefund = false;
						this.Dever.success('提交成功，请等待工作人员审核');
						this.loadData();
					});
				});
			},
			submitRefundNumber() {
				if (!this.applyRefund.delivery_id) {
					return this.Dever.alert('请选择快递公司');
				}
				if (!this.applyRefund.number) {
					return this.Dever.alert('请输入退货单号');
				}

				this.Dever.confirm('确认提交退货单号？', () => {
					this.DeverApi.post('order.refundExpress', {
						id: this.option.id,
						refund_id: this.fetch.info.refund.id,
						delivery_id: this.applyRefund.delivery_id,
						number: this.applyRefund.number
					}, r => {
						this.show.applyRefundNumber = false;
						this.Dever.success('提交成功');
						this.loadData();
					});
				});
			},
			// 删除订单
			delorder() {
				return;
				this.Dever.confirm('确认删除订单？', res => {
					this.DeverApi.post('order.refundExpress', {
						id: this.option.id,
						refund_id: this.fetch.info.refund.id,
						delivery_id: this.applyRefund.delivery_id,
						number: this.applyRefund.number
					}, r => {
						this.show.applyRefundNumber = false;
						this.Dever.success('提交成功');
						this.loadData();
					});
				})
			},
			// 取消订单
			cancelOrder() {
				this.Dever.confirm('确认取消订单？', res => {
					this.DeverApi.post('order.cancel', this.option, r => {
						this.Dever.success('取消成功');
						this.loadData();
					});
				})
			},
			// 点击复制
			copy(content) {
				this.Dever.copy(content)
			},
			// 评价
			evaluate() {
				this.Dever.location('order/review?id=' + this.option.id);
			},

			onTime(e) {
				this.timeData = e
			},
			
			finishTime() {
				this.fetch.info.status = 9
			}
		},
	}
</script>

<style lang="scss">
	page {
		background: $page-color-base;
	}

	.order-detail .item text:first-child {
		width: 168rpx;
		text-align: right;
		display: inline-block;
	}

	/* 状态区 */
	.state-area {}

	/* 收货人 */
	.address-area {}

	/* 商品区 */
	.goods-area {
		&:last-child {
			margin-bottom: 0;
		}

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

		.action-btn-group {
			display: flex;
		}

		.action-btn {
			width: 152rpx;
			height: inherit;
			line-height: inherit;
			margin: 0;
			margin-left: 20rpx;
			padding: 12rpx 0;
			font-size: $font-sm + 2upx;
			color: $font-color-dark;
			background: #fff;
			border-radius: 100px;
			/* #ifdef MP-QQ || MP-ALIPAY */
			border: 1px solid;
			/* #endif */

			&:after {
				border-radius: 100px;
			}

			&.main-btn {
				background: #fff9f9;
				color: $base-color;

				&:after {
					border-color: #f7bcc8;
				}
			}
		}
	}

	/* 订单数据区 */
	.order-area {
		.item {
			line-height: 66rpx;

			.copy {
				margin-left: 20rpx;
				padding: 10rpx 40rpx;
				background-color: #f1f1f1;
				border-radius: 40rpx;
				font-size: 24rpx;
			}
		}
	}

	/* 数据统计区 */
	.total-area {
		.item {
			line-height: 48rpx;

			text {
				padding-right: 16rpx;
			}
		}

	}

	/* 操作区 */
	.oper-area {
		width: 100%;
		height: 100rpx;
		background-color: #fff;
		position: fixed;
		z-index: 1;
		bottom: 0;
		left: 0;
		border-top: 1px solid #f0f0f0;

		.btn-area {
			font-size: $font-sm;
			color: $font-color-base;
			width: 96rpx;

			.iconfont {
				font-size: 40rpx;
				line-height: 48rpx;
			}
		}

		/* 操作按钮 */
		.action-btn {
			width: 156rpx;
			height: inherit;
			line-height: inherit;
			margin: 0;
			margin-left: 20rpx;
			padding: 12rpx 0;
			font-size: $font-sm + 2upx;
			color: $font-color-dark;
			background: #fff;
			border-radius: 100px;
			/* #ifdef MP-QQ || MP-ALIPAY */
			border: 1px solid;
			/* #endif */

			&:after {
				border-radius: 100px;
			}

			&.main-btn {
				background: #fff9f9;
				color: $base-color;

				&:after {
					border-color: #f7bcc8;
				}
			}
		}

	}

	.copy {
		margin-left: 30rpx;
		padding: 10rpx 40rpx;
		background-color: #f1f1f1;
		border-radius: 40rpx;
		font-size: 24rpx;
	}

	.circle {
		width: 20rpx;
		height: 20rpx;
		position: absolute;
		background: #d3d3d3;
		border-radius: 50%;
		top: 14rpx;
	}

	.circle.active {
		background: #ff6a6c !important;
		transform: scale(1.1);
	}

	.circle.active::after {
		content: ' ';
		background: rgba(255, 106, 108, 0.5) !important;
		-webkit-transform: scale(1.6);
		transform: scale(1.6);
		width: 20rpx;
		height: 20rpx;
		position: absolute;
		border-radius: 50%;
	}

	.refund-area {
		padding-top: 28rpx;
		padding-left: 28rpx;
		padding-right: 28rpx;
	}
	
	.time {
		display: inline-flex;
	    align-items: center;
	
	    &__custom {
	         width: 22px;
	         height: 22px;
	         border-radius: 4px;
	         /* #ifndef APP-NVUE */
	         display: flex;
	         /* #endif */
	         justify-content: center;
	         align-items: center;
	    
	        &__item {
	             color: #fff;
	             font-size: 12px;
	             text-align: center;
	         }
	    }
	    
	    &__doc {
	         padding: 0px 4px;
	     }
	    
	    &__item {
	         color: #606266;
	         font-size: 15px;
	         margin-right: 4px;
	     }
	}
</style>