H5_module/merchant/express.vue

<!-- 邮寄发货 -->
<template>
	<view>
		<view class="tits">收货信息</view>
		<ul class="ddinfo">
			<li>
				<span>收货人</span>
				<view v-text="order.name"></view>
			</li>
			<li>
				<span>收货人电话</span>
				<view v-text="order.phone"></view>
			</li>
			<li>
				<span>收货人地址</span>
				<view v-text="order.address"></view>
			</li>
		</ul>
		<view class="tits">发货方式</view>
		<view class="express">
			<view class="li dflex">
				<label class="label">发货方式</label>
				<view class="item flex">
					<picker class="picker active" :range="goodstype" @change="onSelect" range-key="label">
						<view>{{ goodstype[psSwyIndex].label }}</view>
						<image src="../merchant/static/images/rico.png" class="rico"></image>
					</picker>
				</view>
			</view>
			<block v-if="index == 2">
				<view class="li dflex">
					<label class="label">快递公司</label>
					<view class="item flex">
						<picker :class="'picker ' + (expressIndex > -1 ? 'active' : '')" @change="bindPickerExpressChange" :range="express" range-key="label">
							<view v-if="expressIndex >= 0">{{ express[expressIndex].label }}</view>
							<view v-else>请选择</view>
							<image src="../merchant/static/images/rico.png" class="rico"></image>
						</picker>
					</view>
				</view>
				<view class="li dflex">
					<label class="label">快递单号</label>
					<view class="item flex dflex">
						<input v-model="valueOrder" placeholder="请输入快递单号" placeholder-class="placeholder" class="ipt flex" />
						<view class="sao" @click="toScanCode()"><image src="../merchant/static/images/sao.png"></image></view>
					</view>
				</view>
			</block>
			<block v-if="index == 4">
				<view class="li dflex">
					<label class="label">配送人员</label>
					<view class="item flex dflex"><input v-model="distributionName" placeholder="请输入配送人姓名" placeholder-class="placeholder" class="ipt flex" /></view>
				</view>
				<view class="li dflex">
					<label class="label">联系方式</label>
					<view class="item flex dflex"><input v-model="distributionPhone" placeholder="请输入联系方式" placeholder-class="placeholder" class="ipt flex" /></view>
				</view>
			</block>

			<block v-if="index == 3">
				<view class="li dflex">
					<label class="label">订单类型</label>
					<view class="dflex flex radio-rr">
						<radio-group @change="radioTypeGroup">
							<label class="radio" v-for="(item, index) in type" :key="index">
								<radio :value="item.value" />
								{{ item.label }}
							</label>
						</radio-group>
					</view>
				</view>

				<view class="li dflex">
					<label class="label">需要打包</label>
					<view class="dflex flex radio-rr">
						<radio-group @change="radioIsGroup">
							<label class="radio" v-for="(item, index) in is" :key="index">
								<radio :value="item.value" />
								{{ item.label }}
							</label>
						</radio-group>
					</view>
				</view>

				<!-- 	<van-cell is-link @click="showTime = true"
				 v-if="orderType == 2" 
				 :value="time" 
				 title=":" class="time" />
				<van-popup v-model="showTime" 
				position="bottom" 
				:style="{ height: '50%' }" round>
					<van-datetime-picker
						v-model="currentDate"
						type="datetime"
						title="选择送达时间"
						:min-date="minDate"
						:max-date="maxDate"
						@confirm="getTiem"
						@cancel="showTime = false"
					/>
				</van-popup> -->
			</block>

			<view class="bot"><view class="sta-btn w" @click="showlog()">确定</view></view>
		</view>
		<view class="ceng" v-if="showexp"></view>
		<view class="dialog" v-if="showexp">
			<view class="dialog-tit">请核对信息</view>
			<view class="pad20">
				<view class="expressinfo">
					发货方式：
					<view>{{ goodstype[psSwyIndex].label }}</view>
				</view>
				<block v-if="index == 2">
					<view class="expressinfo">
						快递公司：
						<view>{{ expressRadio }}</view>
					</view>
					<view class="expressinfo" v-if="index == 2">
						快递单号：
						<view>{{ valueOrder }}</view>
					</view>
				</block>
				<block v-if="index == 3">
					<view class="expressinfo">
						快递公司：
						<view>{{ expressRadio }}</view>
					</view>
					<view class="expressinfo">
						订单类型：
						<view>{{ orderType != '' ? type[orderType - 1].label : '无' }}</view>
					</view>
					<view class="expressinfo">
						需要打包：
						<view>{{ pack != '' ? is[pack].label : '无' }}</view>
					</view>
					<view class="expressinfo" v-if="orderType == 2">
						送达时间：
						<view>{{ time }}</view>
					</view>
				</block>
				<block v-if="index == 4">
					<view class="expressinfo">
						配送人员姓名：
						<view>{{ distributionName }}</view>
					</view>
					<view class="expressinfo">
						配送人员电话：
						<view>{{ distributionPhone }}</view>
					</view>
				</block>
			</view>
			<view class="dialog-btn dflex">
				<view class="dia-cancel" @click="beforeClose(false)">取消</view>
				<view class="dia-confirm" @click="beforeClose(true)">确认</view>
			</view>
		</view>
	</view>
</template>
<script>
const req = require('../utils/request');
export default {
	data: () => ({
		minDate: new Date(2020, 0, 1),
		maxDate: new Date(2025, 10, 1),
		currentDate: new Date(),
		pack: '',
		psSwyIndex: 0,
		orderType: '',
		showexp: false,
		showFH: false,
		popup: false,
		expressNo: true,
		merchant: {},
		express: [],
		radio: '请选择',
		expressRadio: '请选择',
		valueOrder: '',
		index: 2,
		expressIndex: -1,
		goodstype: [
			{
				label: '快递',
				value: 2,
				disabled: false
			},
			// {
			// 	label: '同城配送',
			// 	value: 3,
			// 	disabled: true
			// },
			{
				label: '自主配送',
				value: 4,
				disabled: false
			}
		],
		type: [
			{
				label: '及时单',
				value: '1'
			},
			{
				label: '预约单',
				value: '2'
			}
		],
		is: [
			{
				label: '否',
				value: '0'
			},
			{
				label: '是',
				value: '1'
			}
		],
		id: '',
		merchantId: '',
		time: '',
		showTime: false,
		distributionName: '',
		distributionPhone: '',
		times: '',

		orderId: '',

		order: ''
	}),
	onLoad(opt) {
		this.id = opt.id;
		this.merchantId = opt.merchantId;
		this.orderType = opt.orderType;
		this.deliverId = opt.deliverId;

		this.getType(1);
		this.loadDetail();
	},
	methods: {
		// 发货方式切换
		onSelect(e) {
			this.psSwyIndex = e.target.value;
			this.kuidimethod(this.goodstype[this.psSwyIndex].value);
		},

		toScanCode(e) {
			var tah = this;
			console.log('扫描二维码>>>>');
			uni.scanCode({
				success: function(res) {
					console.log('条码类型：' + res.scanType);
					console.log('条码内容：' + res.result);
					tah.valueOrder = res.result;
					tah.$forceUpdate();
				}
			});
		},

		loadDetail() {
			let from = {
				id: this.id
			};
			req.getRequest(
				'/api/order/detail',
				from,
				data => {
					this.order = data;
					this.isShowView = true;
				},
				true
			);
		},

		// 显示发货方式弹窗
		showPopup() {
			this.showFH = true;
			console.log(this.showFH);
		},

		bindPickerExpressChange(event) {
			this.expressIndex = event.detail.value;
			this.expressRadio = this.express[this.expressIndex].label;
		},
		// 得到发货方式 2快递，3同城配送，4自主配送
		kuidimethod(index) {
			console.log(index);
			this.index = index;
		},
		onClick(name, index) {
			// console.log( event.currentTarget.dataset)
			// const { name } = event.currentTarget.dataset;
			this.index = index;
			this.radio = name;
		},
		// 得到快递公司
		expressMethod(name, value) {
			this.expressIndex = value;
			this.expressRadio = name;
			console.log(this.expressIndex);
		},
		// 获取快递单号
		getValue(event) {
			this.value = event.detail;
		},
		// 获取配送人员姓名
		getdistributionName(event) {
			this.distributionName = event.detail;
		},
		// 获取配送人员联系方式
		getdistributionPhone(event) {
			this.distributionPhone = event.detail;
		},
		// 获取订单类型
		getorderType(event) {
			this.orderType = event.detail;
		},
		// 二次确认
		showlog() {
			// 发货方式为2快递
			if (this.index == 2) {
				if (this.expressIndex < 0) {
					req.msg('请选择快递公司');
				} else if (this.valueOrder == '') {
					req.msg('请输入快递单号');
				} else {
					this.showexp = true;
				}
			}
			// 发货方式为3同城配送
			if (this.index == 3) {
				// 及时单
				if (this.orderType != 0) {
					if (this.orderType == 1) {
						if (this.expressIndex < 0) {
							req.msg('请选择快递公司');
						} else if (this.pack == '') {
							req.msg('请选择是否需要打包');
						} else {
							this.showexp = true;
						}
					}
					// 预约单
					if (this.orderType == 2) {
						if (this.expressIndex < 0) {
							req.msg('请选择快递公司');
						} else if (this.pack == '') {
							req.msg('请选择是否需要打包');
						} else if (this.time == '') {
							req.msg('请选择送达时间');
						} else {
							this.showexp = true;
						}
					}
				} else {
					req.msg('请选择订单类型');
				}
			}
			// 自主配送
			if (this.index == 4) {
				if (this.distributionName == '') {
					req.msg('请输入配送人员姓名');
				} else if (this.distributionPhone == '') {
					req.msg('请输入配送人员电话');
				} else {
					this.showexp = true;
				}
			}
			// this.showexp = true
		},
		// 获取快递信息
		getexpress() {
			// this.req.getexpress({}, (data) => {
			let express = [];
			req.getRequest('/api/orderRefund/refundReason', {}, data => {
				this.express = data.express;
			});
			if (this.index == 3) {
				// if (this.merchant.syncEle == 1) {
				// this.express = []
				this.expressRadio = '请选择';
				this.expressIndex = -1;
				// this.express.push(data.express[21])
				this.express = express;
				this.expressNo = false;
				// }
			}
			if (this.index == 2) {
				// express.splice(data.express.length - 3, 3)
				this.expressRadio = '请选择';
				this.expressIndex = -1;
				this.express = express;
				this.expressNo = true;
			}
			// })
		},
		// 确认按钮的,弹窗显示隐藏
		getType(index) {
			this.showFH = false;
			this.popup = false;
			if (index == 1) {
				this.getexpress();
			}
		},
		// 传发货信息给后台
		beforeClose(isOk) {
			if (isOk) {
				this.deliver();
				// this.save();
				setTimeout(() => {
					this.showexp = false;
				}, 1000);
			} else {
				// done() // 关闭
				this.showexp = false;
			}
		},
		// 发货信息保存
		deliver() {
			let param;
			// param = {
			// 	id: this.orderId,
			// 	deliverId: this.id,
			// 	express: this.expressRadio,
			// 	expressNo: this.valueOrder
			// };

			if (this.index == 2) {
				param = {
					mode: this.index,
					id: this.id,
					expressCode: this.expressIndex,
					express: this.expressRadio,
					expressNo: this.value
				};
			}
			if (this.index == 3) {
				param = {
					id: this.id,
					expressCode: this.expressIndex,
					express: this.expressRadio,
					orderSendType: this.orderType,
					isPack: this.pack,
					mode: this.index
				};
				if (this.orderType == 2) {
					param.sendTime = this.times;
				}
			}
			if (this.index == 4) {
				param = {
					id: this.id,
					mode: this.index,
					deliveryUserName: this.distributionName,
					deliveryUserPhone: this.distributionPhone
				};
			}
			if (!this.deliverId) {
			} else {
				param.deliverId = this.deliverId;
			}

			console.log(param);
			let that = this;

			req.postRequest(
				'/api/order/confirm',
				param,
				data => {
					if (data == 1) {
						uni.showToast({
							title: '发货成功',
							icon: 'none'
						});
						setTimeout(function() {
							uni.navigateBack();
						}, 1000);
					}
				},
				true
			);
		},
		back() {
			// 返回上一层
			uni.navigateBack();
		},
		// 时间显示
		getTiem(value) {
			let date = new Date(value);
			const year = date.getFullYear();
			const month = date.getMonth() + 1;
			const day = date.getDate();
			const hour = date.getHours();
			const minute = date.getMinutes();
			console.log(year, month, day, hour, minute);
			this.time = year + '年' + month + '月' + day + '日' + hour + '点' + minute + '分';
			this.times = year + '-' + month + '-' + day + ' ' + hour + ':' + minute;
			this.showTime = false;
			console.log(this.times);
		}
	}
};
</script>
<style scoped>
@import './static/css/main.css';
.express {
	background: #fff;
	padding: 0 30rpx;
}
.express .li {
	border-bottom: 1rpx solid #e5e5e5;
	align-items: center;
}
.express .li:last-child {
	border: none;
}
.label {
	font-size: 30rpx;
	color: #333;
	margin-right: 20rpx;
	padding: 30rpx 0;
}
.item {
	align-items: center;
}
.picker {
	position: relative;
}
.picker view {
	display: inline-block;
	width: 100%;
	padding: 30rpx 0;
	font-size: 30rpx;
	color: #999;
	text-align: right;
	padding-right: 35rpx;
	box-sizing: border-box;
}
.picker.active view {
	color: #333;
}
.rico {
	width: 15rpx;
	height: 26rpx;
	position: absolute;
	right: 0;
	top: 50%;
	transform: translateY(-50%);
}
.ipt {
	font-size: 30rpx;
	color: #333;
	text-align: right;
}
.placegolder {
	color: #999;
}
.sao {
	padding: 10rpx 10rpx 10rpx 30rpx;
}
.sao image {
	width: 30rpx;
	height: 34rpx;
}
.bot {
	height: 70rpx;
}
.sta-btn {
	background: #fe0419;
	color: #fff;
	width: 100%;
	height: 70rpx;
	line-height: 70rpx;
	font-size: 30rpx;
}

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

.pad20 {
	padding: 0 20px;
}

.delivertype {
	height: 300px;
}

/*  .delivertype .radio {
    height: 211px;
    position: fixed;
    overflow-y: auto;
    width: 100%;
  } */

.delivertype .bottom {
	width: 335px;
	height: 50px;
	background: linear-gradient(to left, #ff5548, #fe0419);
	border-radius: 25px;
	text-align: center;
	line-height: 50px;
	color: #ffffff;
	font-size: 18px;
	position: fixed;
	left: 0;
	right: 0;
	bottom: 15px;
	margin: 0 auto;
}

/*  .van-radio:not(:last-child) {
    margin-right: 10px;
  } */

/* .time{font-size: 13px;} */
.van-cell__title {
	flex: 0.9;
}
.tits {
	font-size: 28rpx;
	color: #666;
	padding: 20rpx 30rpx;
}
.ddinfo {
	margin: 0;
	border-radius: 0;
}
.ddinfo li span {
	font-size: 30rpx;
	color: #333;
	margin-right: 20rpx;
}
.ceng {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: rgba(0, 0, 0, 0.5);
	z-index: 99;
}
.dialog {
	position: fixed;
	top: 50%;
	transform: translateY(-50%);
	left: 40rpx;
	right: 40rpx;
	background: #fff;
	border-radius: 15rpx;
	z-index: 100;
}
.dialog-tit {
	font-size: 32rpx;
	color: #333;
	padding: 40rpx 0;
	text-align: center;
}
.dialog-btn {
	border-top: 1rpx solid #e5e5e5;
	margin-top: 40rpx;
}
.dia-cancel {
	width: 50%;
	font-size: 30rpx;
	color: #666;
	text-align: center;
	padding: 30rpx 0;
	box-sizing: border-box;
	border-right: 1rpx solid #e5e5e5;
}
.dia-confirm {
	width: 50%;
	font-size: 30rpx;
	color: #1678ff;
	text-align: center;
	padding: 30rpx 0;
}
</style>