H5_module/merchant/show.vue

<template>
	<view>
		<view class="show">
			<!-- 售后 -->
			<view @click="jumpUrl('refund?id=' + id)" v-if="state >= 30">
				<view class="examine">
					<view class="cont dflex">
						<view v-if="(state == 39 && orderRefund.refundType == 1) || (state == 40 && orderRefund.refundType == 1) || state == 30 || state == 31">
							<view style="font-size: 14px; color: #fe0419">客户提交了退款申请，退款处理中</view>
							<view style="font-size: 12px; color: #999999">{{ orderRefund.createDate }}</view>
						</view>
						<view v-if="(state == 41 && orderRefund.refundType == 1) || (state == 35 && orderRefund.refundType == 2)">
							<view style="font-size: 14px; color: #fe0419">
								客户提交了退款审核{{ state == 41 && orderRefund.refundType == 1 ? '，退款处理中' : '，等待用户寄货中' }}
							</view>
							<view style="font-size: 12px; color: #999999">
								{{ state == 41 && orderRefund.refundType == 1 ? orderRefund.refundReviewTime : orderRefund.refundGoodReviewTime }}
							</view>
						</view>
						<view v-if="state == 36 && orderRefund.refundType == 2 && orderRefund.refundMethod == 2">
							<view style="font-size: 14px; color: #fe0419">等待客户送回门店</view>
							<view style="font-size: 12px; color: #999999">
								{{ state == 41 && orderRefund.refundType == 1 ? orderRefund.refundReviewTime : orderRefund.refundGoodReviewTime }}
							</view>
						</view>
						<template v-if="orderRefund.refundType == 1">
							<view v-if="state == 32">
								<view style="font-size: 14px; color: #fe0419">审核失败</view>
								<view style="font-size: 12px; color: #999999">{{ orderRefund.refundOverTime }}</view>
							</view>
						</template>
						<template v-if="orderRefund.refundType == 2">
							<view v-if="state == 32">
								<view style="font-size: 14px; color: #fe0419">审核失败</view>
								<view style="font-size: 12px; color: #999999">{{ orderRefund.refundOverTime }}</view>
							</view>
							<view v-if="state == 36 && (orderRefund.refundMethod == 1 || orderRefund.refundMethod == 3)">
								<view style="font-size: 14px; color: #fe0419">
									客户已退货
									<template v-if="orderRefund.refundMethod == 1">
										，{{ orderRefund.express }}{{ orderRefund.expressNo }}
									</template>
								</view>
								<view style="font-size: 12px; color: #999999">
									{{ orderRefund.refundMethod == 1 ? orderRefund.expressTime : orderRefund.refundGoodReviewTime }}
								</view>
							</view>
							<view v-if="state == 40 || state == 39 || state == 41">
								<view style="font-size: 14px; color: #fe0419">商品已接收，等待支付中</view>
								<view style="font-size: 12px; color: #999999">{{ orderRefund.receiveTime }}</view>
							</view>
						</template>
						<view v-if="state >= 42">
							<view style="font-size: 14px; color: #fe0419">{{ state == 43 ? '退款完成' : '退款失败' }}</view>
							<view style="font-size: 12px; color: #999999">{{ orderRefund.refundOverTime }}</view>
						</view>
						<image src="../merchant/static/images/tuikuan.png" />
					</view>
				</view>
			</view>
			<!-- <view class="tihuo dflex" v-if="mode == 1&&orderType != 17 && orderType != 18">
				
				<view class="tihuoma dflex" >
					<image src="../merchant/static/images/thico.png" />
					提货号码：
					<span v-text="code"></span>
				</view>
			</view> -->
			<!-- 门店自提 -->

			<!-- 物流配送 -->
			<view class="ddtop">
				<ul class="ddstatus" v-if="state < 8 && state >= 1 && mode == 2">
					<li :class="{ ing: state >= 1 }">
						<span></span>
						待付款
					</li>
					<li :class="{ ing: state >= 3 }">
						<span></span>
						待发货
					</li>
					<li :class="{ ing: state >= 5 }" v-if="state != 4">
						<span></span>
						待收货
					</li>
					<li :class="{ ing: state == 7 }">
						<span></span>
						已完成
					</li>
				</ul>
				<!-- 退货 -->
				<ul class="ddstatus" v-if="state >= 39 || state >= 30">
					<li :class="{ ing: state >= 39 || state >= 30 }">
						<span></span>
						待审核
					</li>
					<li :class="{ ing: state == 32 }" v-if="state == 32">
						<span></span>
						审核失败
					</li>
					<template v-else>
						<template v-if="orderRefund.refundType == 2 && orderRefund.refundMethod == 1">
							<li :class="{ ing: state >= 35 }">
								<span></span>
								待寄回
							</li>
							<li :class="{ ing: state >= 36 }">
								<span></span>
								退货中
							</li>
						</template>
						<template v-if="(orderRefund.refundType == 2 && orderRefund.refundMethod == 2) || orderRefund.refundMethod == 3">
							<li :class="{ ing: state >= 36 }">
								<span></span>
								退货中
							</li>
						</template>
						<li
							:class="{
								ing: (state >= 41 && orderRefund.refundType == 1) || (state >= 39 && orderRefund.refundType == 2)
							}"
							v-if="state != 4"
						>
							<span></span>
							退款中
						</li>
						<li :class="{ ing: state >= 42 }">
							<span></span>
							已退款
						</li>
					</template>
				</ul>

				<view class="addr" v-if="mode == 2">
					<span class="areas">地址：{{ order.address }}</span>
					<view
						style="
		          display: flex;
		          align-items: center;
		          margin: 0.2rem 0 0;
		          justify-content: space-between;
		        "
					>
						<view>
							收货人： {{ name }}
							<span>{{ phone }}</span>
						</view>
					</view>
					<image src="../merchant/static/images/dzbg.png" class="dzbg" />
				</view>

				<view class="addr" v-if="mode == 1&&orderType != 17 && orderType != 18">
					<span class="areas">门店：{{ shopName ? shopName : merchantName }}</span>
					<view
						style="
		          display: flex;
		          align-items: center;
		          margin: 0.2rem 0 0;
		          justify-content: space-between;
		        "
					>
						<view>
							提货人： {{ name }}
							<span>{{ phone }}</span>
						</view>
					</view>
					<image src="../merchant/static/images/dzbg.png" class="dzbg" />
				</view>
				<!-- 物流配送 -->
				<view class="lists ddlist">
					<ul class="list bgfff" v-for="(items, index) in order.deliverList" :key="index">
						<view class="lis" v-for="(pro, index1) in items.extendDTOList" :key="index1">
							<view class="cimgs"><image :src="pro.pic" class="cimg" /></view>
							<view class="zhinfo">
								<view class="zhtit" v-text="pro.productName"></view>
								<view v-if="pro.specsList&&pro.specsList.length>0" class="guige">规格：
									<text v-for="(itemGuige, index) in pro.specsList" :key="index" class="guige" decode="true">{{itemGuige.value}}&nbsp;
									</text>
								</view>
								<view class="jiage">
									<view class="price">
										<span>￥</span>
										{{ pro.money }}
									</view>
									<view class="num">×{{ pro.deliverQuantity }}</view>
								</view>
								<view class="pro-tui" v-if="pro.refundOrderList&&pro.refundOrderList.length>0"><text>售后</text>{{pro.refundOrderList.length}}</view>
							</view>
						</view>
					</ul>
				</view>
			</view>
			<ul class="ddinfo">
				<li>
					<span>订单编号</span>
					<view v-text="id"></view>
				</li>
				<li>
					<span>创建时间</span>
					<view v-text="createDate"></view>
				</li>
				<li v-if="deliverTime">
					<span>发货时间</span>
					<view v-text="deliverTime"></view>
				</li>
				<li>
					<span>订单金额</span>
					<view class="price">￥{{ money }}</view>
				</li>
				<li v-if="discountMoney">
					<span>优惠券</span>
					<view class="price">-￥{{ discountMoney }}</view>
				</li>
				<li>
					<span>支付金额</span>
					<view class="price">￥{{ payMoney }}</view>
				</li>
			</ul>
			<ul class="ddinfo">
				<li>
					<span>备注：</span>
					<view v-text="note ? note : '无'">速速发货！</view>
				</li>
			</ul>
			<view class="bot">
				<!-- <a href="javascript:;" class="sta-btn">取消</a> -->
				<view class="sta-btn" v-if="merchant.printer != 0 && (state == 3 || state == 4)" color="#FE0419" @click="orderPrinting(id, index)">打印小票</view>
				<!-- <view class="sta-btn" @click="jumpUrl('refund?id=' + id)" v-if="state > 29 && state < 41 && state != 32">审核</view> -->
				<view class="sta-btn" v-if="state == 3" @click="deliverGoods(id, merchantId, orderType)">确认发货</view>
				<block v-if="orderType != 17 && orderType != 18">
				<view class="sta-btn" @click="send(id)" color="#FE0419" v-if="state === 4">通知取件</view>
				<view class="sta-btn" @click="deliver(id, index,'订单提货成功')" color="#FE0419" v-if="state === 4">提货</view>
				</block>
				<block v-else>
				<view class="sta-btn" @click="deliver(id, index,'订单核销成功')" color="#FE0419" v-if="state === 4">核销</view>
				</block>
			</view>
		</view>
	</view>
</template>

<script>
// import wx from 'weixin-jsapi'
const req = require('../utils/request');
export default {
	data() {
		return {
			isShowView: false,
			id: '',
			note: '',
			money: 0,
			mode: 1,
			code: '',
			createDate: '',
			discountMoney: '',
			payMoney: '',
			deliverTime: '',
			products: [],
			orderType: 1,
			state: 1,
			order: '',
			orderRefund: {},
			show: false,
			merchant: {},
			express: '',
			reason: '',
			merchantName: '',
			shopName: '',
			name: '',
			phone: '',
			imgUrl: [],
			imgIndex: 0,
			imgShow: false,
			index: '',
			Refundstate: '',
			title: '',
			hinde: false,
			receivingGoods: false,
			refundReason: {},
			refundFalseRes: '',
			refundType: '',
			refundMethod: '',
			action: false,
			actions: [
				{
					name: '只退款'
				},
				{
					name: '退货并退款'
				}
			],
			refundTypenum: '',
			merchantId: ''
		};
	},
	onLoad(opt) {
		this.id = opt.id;
		this.merchantId = opt.merchantId;
		this.isPrinting();
		this.loadDetail();
	},

	onShow() {},
	methods: {
		jumpUrl(url) {
			uni.navigateTo({
				url: url
			});
		},
		// s是否开启云打印
		isPrinting() {
			let fromP = {};
			fromP.id = this.merchantId;
			req.getRequest('/api/merchant/detail', fromP, data => {
				this.merchant = data;
			});
		},

		// deliverGoods() {
		// 	uni.navigateTo({
		// 		url: 'express?orderId=' + this.orderId + '&id=' + this.deliverId + '&supplierId=' + this.supplierId
		// 	});
		// },
		// 确认发货
		deliverGoods(id, merchantId, orderType) {
			req.postRequest(
				'/api/order/deliverExtend',
				{
					id: id
				},
				res => {
					if (res && res.length > 1) {
						this.jumpUrl('deliverExtend?id=' + id + '&merchantId=' + merchantId + '&orderType=' + orderType);
					}
					if (res && res.length <= 1) {
						this.jumpUrl('express?id=' + id + '&merchantId=' + merchantId + '&orderType=' + orderType);
					}
				},
				true
			);
		},
		// 已提货
		deliver(id, index,text) {
			req.postRequest(
				'/api/order/confirm',
				{
					id: id,
					mode: '1'
				},
				data => {
					uni.showModal({
						title: '提示',
						content: text,
						confirmText: '确定',
						success(res) {
							if (res.confirm) {
								uni.navigateBack();
							} 
						}
					})
				},
				true
			);
		},

		// 通知取件
		send(id) {
			req.getRequest(
				'/api/wxmes/send',
				{
					orderId: id,
					bsusinessType: 11
				},
				data => {
					req.msg('通知成功');
				},
				true
			);
		},

		// 打印
		orderPrinting(id, index) {
			req.getRequest(
				'/api/merchant/printOrderInfo',
				id,
				data => {
					req.msg(data.msg);
				},
				true
			);
		},

		loadDetail() {
			let from = {
				id: this.id
			};
			req.getRequest(
				'/api/order/detail',
				from,
				data => {
					this.order = data;
					for (let key in data) {
						this[key] = data[key];
					}
					if (data.state >= 30 && data.state <= 43) {
						this.refundDetail();
						// this.refundExpress();
					}
					this.isShowView = true;
				},
				true
			);
		},

		//获取退货详情
		refundDetail() {
			req.getRequest(
				'/api/orderRefund/queryRefund',
				{
					orderId: this.id
				},
				data => {
					this.orderRefund = data;
					if (data.refundMethod == 1) {
						this.refundMethod = '邮寄';
					} else if (data.refundMethod == 2) {
						this.refundMethod = '送回门店';
					} else if (data.refundMethod == 3) {
						this.refundMethod = '货物拒收';
					}
					if (data.refundType == 1) {
						this.refundType = '只退款';
					} else if (data.refundType == 2) {
						this.refundType = '退款并退货';
					}
				},
				true
			);
		}
	}
};
</script>

<style scoped>
@import './static/css/main.css';
.dpname {
	display: flex;
	display: -webkit-flex;
	align-items: center;
	font-size: 13px;
	color: #333;
	padding: 25rpx 20rpx;
	border-bottom: 2rpx solid #eee;
}
.dpname image {
	width: 32rpx;
	height: 27rpx;
	margin-right: 15rpx;
}
.tabe {
	font-size: 24rpx;
	color: #999;
	line-height: 40rpx;
	margin-top: 15rpx;
}

.expressinfo {
	display: flex;
	justify-content: space-between;
	margin-bottom: 10px;
}

.pad20 {
	padding: 20px;
}

.refundFalseRes {
	text-align: right;
}

.van-button:not(:last-child) {
	margin-right: 5px;
}

.bot {
	height: 70rpx;
	justify-content: center;
}
.sta-btn {
	/* background: #fe0419; */
	border-color: #fe0419;
	color: #fe0419;
	width: 100%;
	height: 70rpx;
	line-height: 70rpx;
	font-size: 30rpx;
}
</style>