rrys121/pages/admin/delivery/index.vue

	<template>
		<view class="deliver-goods">
			<header class="header">
				<view class="order-num">
					<view class="num line1">订单号：{{ order_id }}</view>
					<!-- <view class="name line1">
						<span class="iconfont icon-yonghu2"></span>{{ delivery.nickname }}
					</view> -->
				</view>
				<view class="address">
					<view class="name">
						<text class="iconfont icon-ic_location4"></text>
						{{ delivery.real_name }}
						<text class="phone">{{ delivery.user_phone }}</text>
					</view>
					<view>地址：{{ delivery.user_address }}</view>
				</view>
				<view class="line">
					<image src="@/static/images/line.jpg" />
				</view>
			</header>
			<view class="wrapper">
				<view class="item acea-row row-between-wrapper">
					<view>发货方式</view>
					<view class="mode acea-row row-middle row-right">
						<template v-for="(item, index) in types">
							<view v-if="item.show" class="goods" :class="(active === index || productType==3) ? 'on' : ''" :key="index" @click="changeType(item, index)">
								<text :class="['iconfont', active === index ? 'icon-ic_Selected' : 'icon-ic_unselect']"></text>
								{{ item.title }}
							</view>
						</template>
					</view>
				</view>
				<block v-if="logistics.length>0">
					<view class="list" v-show="active === 0">
						<view class="item acea-row row-middle" v-if="delivery.config_export_open == 1">
							<view>发货类型</view>
							<view class="mode acea-row row-middle row-right">
								<view class="goods" :class="curExpress === item.key ? 'on' : ''" v-for="(item, index) in expressType" :key="index" @click="changeExpTpe(item, index)">
									<text :class="['iconfont', curExpress === item.key ? 'icon-ic_Selected' : 'icon-ic_unselect']"></text>
									{{ item.title }}
								</view>
							</view>
						</view>
						<block v-if="curExpress == 1">
							<view class="item acea-row row-middle">
								<view>快递公司</view>
								<view class="select-box">
									<picker class="pickerBox" @change="bindPickerChange" :value="seIndex" :range="logistics" range-key="name">
										<view class="uni-input">{{logistics[seIndex].name}}</view>
									</picker>
								</view>
								<text class="iconfont icon-ic_rightarrow"></text>
							</view>
							<view class="item acea-row row-middle">
								<view>快递单号</view>
								<input type="text" placeholder="请输入" v-model="delivery_id" class="mode" />
								<!-- #ifdef MP -->
								<text class="iconfont icon-xiangji" @click="scanCode"></text>
								<!-- #endif -->
								<!-- #ifdef H5 -->
								<text v-if="isWeixin" class="iconfont icon-xiangji" @click="scanCode"></text>
								<!-- #endif -->
							</view>
							<view class="item">
								<view class="trip" v-if="curExpress == 1">顺丰请输入单号 :收件人或寄件人手机号后四位</view>
								<view class="trip" v-if="curExpress == 1">例如：SF000000000000:3941</view>
							</view>
						</block>
						<block v-if="curExpress == 2">
							<view class="item acea-row row-between-wrapper">
								<view>寄件人姓名：</view>
								<input type="text" placeholder="填写寄件人姓名" v-model="to_name" class="mode" />
							</view>
							<view class="item acea-row row-between-wrapper">
								<view>寄件人电话：</view>
								<input type="text" placeholder="填写寄件人电话" v-model="to_tel" class="mode" />
							</view>
							<view class="item acea-row row-between-wrapper">
								<view>寄件人地址：</view>
								<input type="text" placeholder="填写寄件人地址" v-model="to_addr" class="mode" />
							</view>
							<view class="item acea-row row-between-wrapper">
								<view>快递公司</view>
								<view class="select-box">
									<picker class="pickerBox" @change="bindPickerChange" :value="seIndex" :range="logistics" range-key="name">
										<!-- <view></view> -->
										<view class="uni-input">{{logistics[seIndex].name}}</view>
									</picker>
								</view>
							</view>
							<view class="item acea-row row-between-wrapper" v-if="expTemp.length>0">
								<view>电子面单</view>
								<view class="picker-add">
									<picker class="pickerBox" @change="bindTempChange" :value="expIndex" :range="expTemp" range-key="title">
										<view class="uni-input">{{expTemp[expIndex].title}}</view>
									</picker>
									<view class="look" @click="previewImage">预览</view>
								</view>
							</view>
						</block>
					</view>
				</block>

				<view class="list" v-show="active === 1">
					<view class="item acea-row row-between-wrapper">
						<view>送货人</view>
						<view class="select-box" v-if="postPeople.length>0">
							<picker class="pickerBox" @change="bindPostChange" :value="postIndex" :range="postPeople" range-key="wx_name">
								<view class="acea-row row-middle">
									<view class="uni-input">{{postPeople[postIndex].wx_name}}</view>
									<text class="iconfont icon-ic_rightarrow"></text>
								</view>
							</picker>
						</view>
					</view>
					<view class="item acea-row row-between-wrapper" v-if="postPeople[postIndex]">
						<view>手机号</view>
						<view class="select-box acea-row row-middle row-right">{{postPeople[postIndex].phone}}</view>
					</view>
				</view>
				<textarea v-show="active === 2" v-model="fictitious_content" class="textarea" @blur="bindTextAreaBlur" placeholder="备注" :maxlength="500" auto-height />
			</view>
			<view class="split-wrapper" v-if="totalNum>1">
				<view class="split-switch acea-row row-between-wrapper">
					<view>分单发货</view>
					<!-- <view class="mode acea-row row-middle row-right">
						<view class="goods" :class="curGoods === item.key ? 'on' : ''" v-for="(item, index) in orderGoods" :key="item.key" @click="changeGoods(item)">
							{{ item.title }}<span class="iconfont icon-xuanzhong2"></span>
						</view>
					</view> -->
					<view class="switch" :class="{ on: curGoods }" @click="changeGoods"></view>
				</view>
				<splitOrder :select_all="false" :splitGoods="splitGoods" @getList="getList" v-if="curGoods"></splitOrder>
			</view>
			<view class="height-add"></view>
			<view class="confirm-wrapper">
				<view class="confirm" @click="saveInfo">确认提交</view>
			</view>
		</view>
	</template>
	<script>
		import {
			getStoreOrderDelivery,
			getAdminOrderDelivery,
			setStoreOrderDelivery,
			setAdminOrderDelivery,
			getLogistics,
			storeOrderExportTemp,
			orderExportTemp,
			storeOrderDeliveryInfo,
			orderDeliveryInfo,
			storeOrderDelivery,
			orderOrderDelivery,
			storeOrderSplitInfo,
			orderSplitInfo,
			storeOrderSplitDelivery,
			orderSplitDelivery
		} from "@/api/admin";
		import splitOrder from '@/components/splitOrder';
		export default {
			name: "GoodsDeliver",
			components: {
				splitOrder
			},
			props: {},
			data: function() {
				return {
					types: [{
							type: "express",
							title: "发货",
							key: 1,
							show: true,
						},
						{
							type: "send",
							title: "送货",
							key: 2,
							show: true,
						},
						{
							type: "fictitious",
							title: "无需物流",
							key: 3,
							show: true,
						}
					],
					expressType: [{
							title: '手动填写',
							key: 1
						},
						{
							title: '电子面单打印',
							key: 2
						},
					],
					orderGoods: [{
							title: '开启',
							key: 1
						},
						{
							title: '关闭',
							key: 0
						}
					],
					curExpress: 1,
					active: 0,
					order_id: "",
					delivery: [],
					logistics: [],
					delivery_type: "1",
					delivery_name: "",
					delivery_id: "",
					seIndex: 0,
					expIndex: 0,
					expTemp: [], // 快递模板
					to_name: '', // 发货人名称	
					to_tel: '', // 发货人电话	
					to_addr: "", // 发货人地址	
					postPeople: [], //配送人
					postIndex: 0,
					fictitious_content: '',
					listId: 0,
					curGoods: 0,
					splitGoods: [],
					cartIds: [],
					totalNum: 0,
					productType: 0,
					storeNum:1,
					// #ifdef H5
					isWeixin: this.$wechat.isWeixin()
					// #endif
				};
			},
			watch: {
				"$route.params.oid": function(newVal) {
					let that = this;
					if (newVal != undefined) {
						that.order_id = newVal;
						that.getIndex();
					}
				}
			},
			onLoad: function(option) {
				this.storeNum = parseInt(option.storeNum);
				this.order_id = option.id;
				this.listId = option.listId;
				this.totalNum = option.totalNum;
				this.comeType = option.comeType;
				this.productType = option.productType
				if (this.productType == 3) {
					// this.types.splice(0, 2);
					for (let i = 0; i < this.types.length; i++) {
						if (i == 2) {
							this.types[i].show = true;
						} else {
							this.types[i].show = false;
						}
					}
					this.delivery_type = 3;
					this.active = 2;
				}
				if (option.orderStatus == 8 || option.orderStatus == 4 || option.orderStatus == 9) {
					this.curGoods = 1;
					this.orderGoods.pop();
					this.splitList();
				}
				this.getIndex();
				this.getLogistics();
				this.orderDeliveryInfo()
				this.geTorderOrderDelivery()
			},
			methods: {
				getList(val) {
					let that = this;
					that.splitGoods = val;
					let cartIds = [];
					val.forEach((item) => {
						if (item.checked) {
							let i = {
								cart_id: item.cart_id,
								cart_num: item.surplus_num
							}
							cartIds.push(i)
						}
					})
					this.cartIds = cartIds;
				},
				splitList() {
					let funApi = '';
					if(this.storeNum){
						funApi = orderSplitInfo;
					}else{
						funApi = storeOrderSplitInfo;
					}
					funApi(this.listId).then(res => {
						let list = res.data;
						list.forEach((item) => {
							item.checked = false
							item.numShow = item.surplus_num
						})
						this.splitGoods = list;
					}).catch(err => {
						return this.$util.Tips({
							title: err
						});
					})
				},
				// 点击获取拆单列表
				changeGoods() {
					this.curGoods = this.curGoods ? 0 : 1;
					if (this.curGoods) {
						this.splitList();
					}
				},
				// 扫描快递单号一维码
				scanCode() {
					// #ifdef MP
					let that = this;
					uni.scanCode({
						scanType: ['barCode'],
						success(res) {
							that.delivery_id = res.result;
						}
					})
					// #endif
					// #ifdef H5
					if (this.$wechat.isWeixin()) {
						this.$wechat.wechatEvevt('scanQRCode', {
							needResult: 1,
							scanType: ['barCode']
						}).then(res => {
							let result = res.resultStr.split(",");
							this.delivery_id = result[1];
						});
					}
					// #endif
				},
				// 预览图片
				previewImage() {
					uni.previewImage({
						urls: [this.expTemp[this.expIndex].pic],
						success: function() {

						},
						fail: function(error) {

						}
					});
				},
				// 获取配送员列表
				geTorderOrderDelivery() {
					let funApi = '';
					// if(this.storeNum){
					// 	funApi = orderOrderDelivery;
					// }else{
					// 	funApi = storeOrderDelivery;
					// }
					funApi = orderOrderDelivery;
					funApi().then(res => {
						this.postPeople = res.data
					})
				},
				// 配送员选择
				bindPostChange(e) {
					this.postIndex = e.detail.value
				},
				// 选择发货类型
				changeExpTpe(item, index) {
					this.curExpress = item.key
					this.getLogistics(index || '');
				},
				changeType: function(item, index) {
					this.active = index;
					this.delivery_type = item.key;
				},
				getIndex: function() {
					let that = this;
					let funApi = '';
					// if(this.storeNum){
					// 	funApi = getAdminOrderDelivery;
					// }else{
					// 	funApi = getStoreOrderDelivery;
					// }
					funApi = getAdminOrderDelivery;
					funApi(that.order_id).then(
						res => {
							that.delivery = res.data;
						},
						error => {
							that.$util.Tips({
								title: error
							})
						}
					);
				},
				getLogistics(status) {
					let that = this;
					getLogistics({
						status
					}).then(
						res => {
							that.logistics = res.data;
							that.getExpTemp(res.data[0].code)
						},
						error => {
							that.$util.Tips({
								title: error
							})
						}
					);
				},
				async saveInfo() {
					let that = this,
						delivery_type = that.delivery_type,
						delivery_name = that.logistics[that.seIndex].name,
						delivery_id = that.delivery_id,
						userName = that.delivery_name,
						save = {};
					save.delivery_type = delivery_type;
					save.delivery_code = that.logistics[that.seIndex].code
					save.delivery_name = that.logistics[that.seIndex].name
					save.type = that.active + 1
					if (delivery_type == 1 && this.curExpress == 1) {
						if (!delivery_id) {
							return this.$util.Tips({
								title: '请填写快递单号'
							})
						}
						save.express_record_type = that.curExpress
						save.delivery_id = delivery_id
						if (that.curGoods) {
							that.setSplitInfo(save)
						} else {
							that.setInfo(save);
						}
					}

					if (delivery_type == 1 && this.curExpress == 2) {
						if (!that.to_name) {
							return this.$util.Tips({
								title: '请填写寄件人姓名'
							})
						}
						if (!that.to_tel) {
							return this.$util.Tips({
								title: '请填写寄件人手机号码'
							})
						}
						if (!(/^1[3456789]\d{9}$/.test(that.to_tel))) {
							return this.$util.Tips({
								title: '请填写寄件人手机号码'
							})
						}
						if (!that.to_addr) {
							return this.$util.Tips({
								title: '请填写寄件人地址'
							})
						}
						if (that.expTemp.length == 0) {
							return this.$util.Tips({
								title: '请选择电子面单'
							})
						}
						save.express_record_type = that.curExpress
						save.to_name = that.to_name
						save.to_tel = that.to_tel
						save.to_addr = that.to_addr
						save.express_temp_id = that.expTemp[that.expIndex].temp_id
						if (that.curGoods) {
							that.setSplitInfo(save)
						} else {
							that.setInfo(save);
						}
					}
					if (delivery_type == 2) {
						if (!that.postPeople.length) {
							return this.$util.Tips({
								title: '请在平台后台添加送货人'
							})
						}
						let obj = this.postPeople[this.postIndex]
						let params = {}
						params.type = that.delivery_type
						params.sh_delivery_name = obj.wx_name
						params.sh_delivery_id = obj.phone
						params.sh_delivery_uid = obj.uid
						if (that.curGoods) {
							that.setSplitInfo(params)
						} else {
							that.setInfo(params);
						}
					}
					if (delivery_type == 3) {
						let params = {}
						params.type = that.delivery_type;
						params.fictitious_content = that.fictitious_content;
						if (that.curGoods) {
							that.setSplitInfo(params)
						} else {
							that.setInfo(params);
						}
					}
					// switch (delivery_type) {
					// 	case "2":
					// 		if (!userName) {
					// 			return that.$util.Tips({
					// 				title: '请填写送货人姓名'
					// 			})
					// 		}
					// 		if (!delivery_id || !checkPhone(delivery_id)) {
					// 			return that.$util.Tips({
					// 				title: '请填写正确的手机号码'
					// 			})
					// 		}
					// 		save.delivery_name = userName;
					// 		save.delivery_id = delivery_id;
					// 		that.setInfo(save);
					// 		break;
					// 	case "1":
					// 		if (!delivery_id) {
					// 			return this.$util.Tips({
					// 				title: '请填写快递单号'
					// 			})
					// 		}
					// 		save.delivery_name = delivery_name;
					// 		save.delivery_id = delivery_id;
					// 		that.setInfo(save);
					// 		break;
					// 	case "3":
					// 		that.setInfo(save);
					// 		break;
					// }
				},
				setInfo: function(item) {
					let that = this;
					let funApi = '';
					// if(this.storeNum){
					// 	funApi = setAdminOrderDelivery;
					// }else{
					// 	funApi = setStoreOrderDelivery;
					// }
					funApi = setAdminOrderDelivery;
					funApi(that.delivery.id, item).then(
						res => {
							that.$util.Tips({
								title: res.msg,
								icon: 'success',
								mask: true
							})
							setTimeout(res => {
								if (this.comeType == 2) {
									uni.navigateTo({
										url: '/pages/admin/orderDetail/index?id=' + this.order_id+'&storeNum='+this.storeNum
									})
								} else {
									uni.navigateTo({
										url: '/pages/admin/orderList/index?types=1'
									})
								}
							}, 2000)
						},
						error => {
							that.$util.Tips({
								title: error
							})
						}
					);
				},
				setSplitInfo(item) {
					if (!this.cartIds.length) {
						return this.$util.Tips({
							title: '请选择发货商品'
						})
					}
					item.cart_ids = this.cartIds
					let funApi = '';
					if(this.storeNum){
						funApi = orderSplitDelivery;
					}else{
						funApi = storeOrderSplitDelivery;
					}
					funApi(this.delivery.id, item).then(res => {
						this.$util.Tips({
							title: res.msg,
							icon: 'success',
							mask: true
						})
						setTimeout(res => {
							if (this.comeType == 2) {
								uni.navigateTo({
									url: '/pages/admin/orderDetail/index?id=' + this.order_id+'&storeNum='+this.storeNum
								})
							} else {
								uni.navigateTo({
									url: '/pages/admin/orderList/index?types=1'
								})
							}
						}, 2000)
					}).catch(err => {
						this.$util.Tips({
							title: err
						})
					})
				},
				bindPickerChange(e) {
					this.seIndex = e.detail.value
					this.getExpTemp(this.logistics[e.detail.value].code)

				},
				bindTempChange(e) {
					this.expIndex = e.detail.value
				},
				getExpTemp(code) {
					let funApi = '';
					if(this.storeNum){
						funApi = orderExportTemp;
					}else{
						funApi = storeOrderExportTemp;
					}
					funApi({
						com: code
					}).then(res => {
						this.expTemp = res.data.data
					})
				},
				// 获取订单打印默认配置
				orderDeliveryInfo() {
					let funApi = '';
					// if(this.storeNum){
					// 	funApi = orderDeliveryInfo;
					// }else{
					// 	funApi = storeOrderDeliveryInfo;
					// }
					funApi = orderDeliveryInfo;
					funApi().then(res => {
						this.to_name = res.data.to_name;
						this.to_tel = res.data.to_tel;
						this.to_addr = res.data.to_add;
					})
				}
			}
		};
	</script>

	<style lang="scss">
		.picker-add {
			display: flex;
			align-items: center;
		}

		.height-add {
			height: 120upx;
		}


		/*发货*/
		.deliver-goods {
			padding: 22rpx 20rpx;
		}

		.deliver-goods .header {
			position: relative;
			padding: 0 32rpx;
			border-radius: 24rpx;
			background: #FFFFFF;
			overflow: hidden;
		}

		.deliver-goods .header .order-num {
			padding: 20rpx 0;
			border-bottom: 1px dotted #EEEEEE;
		}

		.deliver-goods .header .order-num .num {
			font-size: 28rpx;
			line-height: 40rpx;
			color: #333333;
			position: relative;
		}

		.deliver-goods header .order-num .num:after {}

		.deliver-goods header .order-num .name {
			width: 260upx;
			font-size: 26upx;
			color: #282828;
			text-align: center;
		}

		.deliver-goods header .order-num .name .iconfont {
			font-size: 35upx;
			color: #477ef3;
			vertical-align: middle;
			margin-right: 10upx;
		}

		.deliver-goods .header .address {
			padding: 20rpx 0 40rpx;
			font-size: 24rpx;
			line-height: 34rpx;
			color: #999999;
		}

		.deliver-goods .header .address .name {
			font-weight: 500;
			font-size: 30rpx;
			line-height: 42rpx;
			color: #333333;
			margin-bottom: 12rpx;
		}

		.deliver-goods .header .address .name .iconfont {
			margin-right: 8rpx;
			font-size: 32rpx;
		}

		.deliver-goods .header .address .name .phone {
			margin-left: 40rpx;
		}

		.deliver-goods .header .line {
			position: absolute;
			bottom: 0;
			left: 0;
			width: 100%;
			height: 4rpx;
		}

		.deliver-goods .header .line image {
			width: 100%;
			height: 100%;
			display: block;
		}

		.deliver-goods .wrapper {
			padding: 12rpx 0;
			border-radius: 24rpx;
			margin-top: 20rpx;
			background-color: #fff;
		}

		.deliver-goods .wrapper .item {
			padding: 0 24rpx;
			height: 80rpx;
			font-size: 28rpx;
			color: #333333;
			position: relative;
		}

		.deliver-goods .wrapper .item .mode {
			flex: 1;
			height: 100%;
			text-align: right;
		}

		.deliver-goods .wrapper .item .mode .iconfont {
			font-size: 32rpx;
			margin-right: 12rpx;
			color: #CCCCCC;
		}

		.deliver-goods .wrapper .item .mode .goods~.goods {
			margin-left: 50rpx;
		}

		.deliver-goods .wrapper .item .mode .goods {
			color: #999999;
		}

		.deliver-goods .wrapper .item .mode .goods.on {
			color: #333333;
		}

		.deliver-goods .wrapper .item .mode .goods.on .iconfont {
			color: #2A7EFB;
		}

		.deliver-goods .wrapper .item .icon-up {
			position: absolute;
			font-size: 35upx;
			color: #2c2c2c;
			right: 30upx;
		}

		.deliver-goods .wrapper .item select {
			direction: rtl;
			padding-right: 60upx;
			position: relative;
			z-index: 2;
		}

		.deliver-goods .wrapper .item input::placeholder {
			color: #bbb;
		}

		.deliver-goods .confirm-wrapper {
			position: fixed;
			left: 0;
			bottom: 0;
			bottom: constant(safe-area-inset-bottom);
			bottom: env(safe-area-inset-bottom);
			width: 100%;
			padding: 20rpx;
		}

		.deliver-goods .confirm {
			font-weight: 500;
			font-size: 28rpx;
			color: #fff;
			height: 80rpx;
			border-radius: 40rpx;
			background: #2A7EFB;
			text-align: center;
			line-height: 80rpx;
		}

		.select-box {
			flex: 1;
			height: 100%;

			.pickerBox {
				display: flex;
				align-items: center;
				justify-content: flex-end;
				width: 100%;
				height: 100%;

				.iconfont {
					margin-left: 8rpx;
					font-size: 24rpx;
					color: #999999;
				}
			}
		}

		.look {
			margin-left: 20rpx;
			color: #1890FF;
		}

		.textarea {
			display: block;
			min-height: 192rpx;
			padding: 30rpx;
			width: 100%;
			border-bottom: 1px solid #f0f0f0;
			box-sizing: border-box;
		}

		.icon-xiangji {
			font-size: 35rpx;
			color: #477ef3;
		}

		.trip {
			font-size: 22rpx;
			color: #ccc;
			padding: 6rpx 0;
		}

		.split-wrapper {
			border-radius: 24rpx;
			margin-top: 20rpx;
			background: #FFFFFF;

			.splitOrder {
				padding: 0 24rpx 46rpx;
				margin: 0;
			}
		}

		.split-switch {
			padding: 40rpx 24rpx;
			font-size: 28rpx;
			color: #333333;

			.switch {
				position: relative;
				width: 79rpx;
				height: 48rpx;
				padding: 4rpx;
				border-radius: 24rpx;
				background: #DDDDDD;
				transition: background 0.1s, border 0.1s;

				&::after {
					content: "";
					position: absolute;
					top: 4rpx;
					left: 4rpx;
					width: 40rpx;
					height: 40rpx;
					border-radius: 20rpx;
					background: #FFFFFF;
					box-shadow: 0 3rpx 6rpx 0 rgba(0, 0, 0, 0.08);
					transition: transform 0.35s cubic-bezier(0.4, 0.4, 0.25, 1.35);
				}

				&.on {
					background: #2A7EFB;

					&::after {
						transform: translateX(31rpx);
					}
				}
			}
		}
	</style>