jszPhone/pages/admin/store/deliverGoods/index.vue

<template>
	<view class="deliver-goods">
		<header>
			<view class="order-num acea-row row-between-wrapper">
				<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">
					{{ delivery.real_name
          }}<span class="phone">{{ delivery.user_phone }}</span>
				</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-show="item.status" class="goods" :class="(active === index || productType==3) ? 'on' : ''"
							:key="index" @click="changeType(item, index)">
							{{ item.title }}<span class="iconfont icon-xuanzhong2"></span>
						</view>
					</template>
				</view>
			</view>
			<block v-if="logistics.length>0">
				<view class="list" v-show="active === 0">
					<view class="item acea-row row-between-wrapper" 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)">
								{{ item.title }}<span class="iconfont icon-xuanzhong2"></span>
							</view>
						</view>
					</view>
					<block v-if="curExpress == 1">
						<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"><span class="marr">{{logistics[seIndex].name}}</span> <span class="iconfont icon-xiangyou size"></span></view>
								</picker>
							</view>
						</view>
						<view class="item acea-row row-between-wrapper">
							<view>快递单号</view>
							<input type="text" placeholder="填写快递单号" v-model="delivery_id" class="mode size" />
							<!-- #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">
							<p class="trip" v-if="curExpress == 1">顺丰请输入单号 :收件人或寄件人手机号后四位</p>
							<p class="trip" v-if="curExpress == 1">例如：0080890707090</p>
						</view>
					</block>
					<block v-if="curExpress == 2">
						<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>
							<div class="picker-add">
								<picker class="pickerBox" @change="bindTempChange" :value="expIndex" :range="expTemp"
									range-key="title">
									<view class="uni-input">{{expTemp[expIndex].title}}</view>
								</picker>
								<div class="look" @click="previewImage">预览</div>
							</div>

						</view>
						<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>
					</block>
				</view>
			</block>

			<view class="list" v-show="active === 1">
				<view class="item acea-row row-between-wrapper">
					<view>配送类型</view>
					<view class="mode acea-row row-middle row-right">
						<template v-for="item in deliveryTypeList">
							<view v-if="item.status" :key="item.key" :class="{ on: item.key === deliveryType }" class="goods" @click="deliveryTypeChange(item)">
								{{ item.title }}
								<text class="iconfont icon-xuanzhong2"></text>
							</view>
						</template>
					</view>
				</view>
				<view v-show="deliveryType === 2" class="item acea-row row-between-wrapper">
					<view>配送平台</view>
					<view class="mode acea-row row-middle row-right">
						<template v-for="item in deliveryPlatformList">
							<view v-if="item.status" :key="item.key" :class="{ on: item.key === station_type }" class="goods" @click="deliveryPlatformChange(item)">
								{{ item.title }}
								<text class="iconfont icon-xuanzhong2"></text>
							</view>
						</template>
					</view>
				</view>
				<view v-show="deliveryType === 2" class="item acea-row row-between-wrapper">
					<view>包裹重量</view>
					<input v-model="cargo_weight" type="digit" placeholder="填写包裹重量" class="mode size" />kg
				</view>
				<view v-show="deliveryType === 2" class="item acea-row textarea-wrapper">
					<view>配送备注</view>
					<textarea v-model="remark" class="mode textarea" placeholder="请在此处填写配送备注" :maxlength="500" auto-height />
				</view>
				<view v-show="deliveryType === 1" 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></view> -->
							<view class="uni-input">{{postPeople[postIndex].wx_name}}</view>
						</picker>
					</view>
				</view>
			</view>
			<view v-show="active === 2 || (active === 1 && deliveryType === 2)" class="item acea-row textarea-wrapper">
				<view>订单备注</view>
				<textarea v-model="fictitious_content" class="mode textarea" @blur="bindTextAreaBlur"
					placeholder="请在此处填写订单备注" :maxlength="500" auto-height />
			</view>
			<view class="item acea-row row-between-wrapper" v-if="totalNum>1&&active !== 2">
				<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>	
			<splitOrder :splitGoods="splitGoods" @getList="getList" v-if="curGoods"></splitOrder>		
		</view>
		<view class="height-add"></view>
		<view class="button">
			<view class="box" @click="saveInfo">
				确认提交
			</view>
		</view>
	</view>
</template>
<script>
	import {
		getOrderDeliveryinfoApi,
		getOrderExportApi,
		getOrderExportTemp,
		setOrderDelivery,
		getOrderDelivery,
		storeSplitInfo,
		storeSplitDelivery
	} from "@/api/admin";
	import {
		checkPhone
	} from '@/utils/validate.js'
	import splitOrder from '@/components/splitOrder';
	export default {
		name: "GoodsDeliver",
		components: {
			splitOrder
		},
		props: {},
		data: function() {
			return {
				types: [{
						type: "express",
						title: "发货",
						key: 1,
						status: true
					},
					{
						type: "send",
						title: "送货",
						key: 2,
						status: true
					},
					{
						type: "fictitious",
						title: "无需物流",
						key: 3,
						status: 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,
				// #ifdef H5
				isWeixin: this.$wechat.isWeixin(),
				// #endif
				deliveryTypeList: [
					{
						title: '商家配送',
						key: 1,
						status: false
					},
					{
						title: '第三方配送',
						key: 2,
						status: false
					}
				],
				deliveryPlatformList: [
					{
						title: '达达',
						key: 1,
						status: false
					},
					{
						title: 'UU跑腿',
						key: 2,
						status: false
					}
				],
				deliveryType: 0,
				station_type: 0,
				cargo_weight: 0,
				remark: '',
			};
		},
		watch: {
			"$route.params.oid": function(newVal) {
				let that = this;
				if (newVal != undefined) {
					that.order_id = newVal;
					that.getIndex();
				}
			},
			active() {
				this.curGoods = 0;
			}
		},
		onLoad: function(option) {
			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);
				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.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(){
				storeSplitInfo(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(item){
				this.curGoods = item.key;
				if(item.key){
					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() {
				getOrderDelivery().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;
				getOrderDeliveryinfoApi(that.order_id).then(
					res => {
						that.delivery = res.data;
						that.to_name = res.data.to_name;
						that.to_tel = res.data.to_tel;
						that.to_addr = res.data.to_add;
						if (res.data.city_delivery_status) {
							that.deliveryTypeList.forEach(item => {
								if (item.key === 1) {
									item.status = res.data.self_delivery_status;
								} else if (item.key === 2) {
									item.status = res.data.dada_delivery_status || res.data.uu_delivery_status;
								}
								if (item.status && !that.deliveryType) {
									that.deliveryType = item.key;
								}
							});
							that.deliveryPlatformList.forEach(item => {
								if (item.key === 1) {
									item.status = res.data.dada_delivery_status;
								} else if (item.key === 2) {
									item.status = res.data.uu_delivery_status;
								}
								if (item.status && !that.station_type) {
									that.station_type = item.key;
								}
							});
						} else{
							const index = that.types.findIndex(item => item.key === 2);
							if (index !== -1) {
								that.types[index].status = false;
							}
						}
					},
					error => {
						that.$util.Tips({
							title: error
						})
					}
				);
			},
			getLogistics(status) {
				let that = this;
				getOrderExportApi({
					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) {
					let params = {}
					if (that.deliveryType === 1) {
						if(!that.postPeople.length){
							return this.$util.Tips({
								title: '请在门店后台添加送货人'
							})
						}
						let obj = this.postPeople[this.postIndex]
						params.sh_delivery_name = obj.wx_name
						params.sh_delivery_id = obj.phone
						params.sh_delivery_uid = obj.uid
					} else if (that.deliveryType === 2) {
						if(!that.cargo_weight){
							return this.$util.Tips({
								title: '请输入有效的重量'
							})
						}
						params.station_type = that.station_type
						params.cargo_weight = that.cargo_weight
						params.remark = that.remark
						params.mark = that.fictitious_content
					}
					params.type = that.delivery_type
					params.delivery_type = that.deliveryType
					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);
					}
				}
			},
			setInfo: function(item) {
				let that = this;
				setOrderDelivery(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/store/orderDetail/index?id='+this.listId
								})
							}else{
								uni.navigateTo({
									url:'/pages/admin/store/order/index?type=1'
								})
							}
						}, 2000)
					},
					error => {
						that.$util.Tips({
							title: error
						})
					}
				);
			},
			setSplitInfo(item){
				if(!this.cartIds.length){
					return this.$util.Tips({
						title: '请选择发货商品'
					})
				}
				item.cart_ids = this.cartIds
				storeSplitDelivery(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/store/orderDetail/index?id='+this.listId
							})
						}else{
							uni.navigateTo({
								url:'/pages/admin/store/order/index?type=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) {
				getOrderExportTemp({
					com: code
				}).then(res => {
					this.expTemp = res.data.data
				})
			},
			// 配送类型
			deliveryTypeChange(item) {
				this.deliveryType = item.key;
			},
			// 配送平台
			deliveryPlatformChange(item) {
				this.station_type = item.key;
			}
		}
	};
</script>
<style lang="scss" scoped>
  .picker-add {
    display: flex;
    align-items: center;
  }
  .height-add {
    height:124rpx;
  }
	/deep/.splitOrder{
		margin-bottom: 100rpx;
	}
	/deep/.splitOrder .items .picTxt{
		width: 560rpx;
	}
	/deep/.splitOrder .items .picTxt .text{
		width: 380rpx;
	}
	/deep/.splitOrder .items .picTxt .name{
		width: 292rpx;
	}
	.marr{display: inline-block;margin-right: 24upx;}
	.size{font-size: 28upx;}
	.trip {
		font-size: 22upx;
		color: #ccc;
		padding: 6upx 0upx;
	}
	.button{
		position: fixed;
		height: 80upx;
		bottom: 44upx;
		// width: 100%;
		.box{
			text-align: center;
			font-size: 30upx;
			color: #FFFFFF;
			line-height: 80upx;
			width: 690upx;
			margin: 0 auto;
			height: 80upx;
			background: #1890FF;
			border-radius: 40upx;
		}
	}
</style>
<style lang="scss">
	/*发货*/
	.deliver-goods{
		padding: 20upx 30upx;
	}
	.deliver-goods header {
		width: 100%;
		background-color: #fff;
		margin-top: 10upx;
	}

	.deliver-goods header .order-num {
		padding: 18upx 24upx;
		border-bottom: 1px solid #f5f5f5;
		height: 67upx;
	}

	.deliver-goods header .order-num .num {
		width: 430upx;
		font-size: 26upx;
		color: #282828;
		position: relative;
	}

	.deliver-goods header .order-num .num:after {
		position: absolute;
		content: '';
		width: 1px;
		height: 30upx;
		background-color: #ddd;
		top: 50%;
		margin-top: -15upx;
		right: 0;
	}

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

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

	.deliver-goods header .address {
		font-size: 26upx;
		color: #868686;
		background-color: #fff;
		padding: 30upx;
	}

	.deliver-goods header .address .name {
		font-size: 34upx;
		color: #282828;
		margin-bottom: 10upx;
	}

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

	.deliver-goods header .line {
		width: 100%;
		height: 3upx;
	}

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

	.deliver-goods .wrapper {
		width: 100%;
		background-color: #fff;
		margin-top: 20upx;
		border-radius: 12upx;
	}

	.deliver-goods .wrapper .item {
		border-bottom: 1px solid #f0f0f0;
		padding: 0 30upx;
		height: 96upx;
		font-size: 28upx;
		color: #282828;
		position: relative;
		
		&.textarea-wrapper {
			height: auto;
			padding: 30rpx;
		}
	}

	.deliver-goods .wrapper .item .mode {
		width: 460upx;
		height: 100%;
		text-align: right;
	}

	.deliver-goods .wrapper .item .mode .iconfont {
		font-size: 30upx;
		margin-left: 13upx;
	}

	.deliver-goods .wrapper .item .mode .goods~.goods {
		margin-left: 30upx;
	}

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

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

	.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 {
		font-size: 30upx;
		color: #fff;
		width: 100%;
		height: 80upx;
		background-color: #477ef3;
		text-align: center;
		line-height: 100upx;
		position: fixed;
		bottom: 0;
	}

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

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

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

	.textarea {
		// display: block;
		min-height: 102rpx;
		padding: 0 0 0 30rpx;
		flex: 1;
		// border-bottom: 1px solid #f0f0f0;
		font-size: 30rpx;
		box-sizing: border-box;
	}

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

	
</style>