fish-uniapp/pages/orderAdmin/GoodsDeliver/index.vue

<template>
	<view class="deliver-goods">
		<header>
			<view class="order-num acea-row row-between-wrapper">
				<view class="num line1">订单号：{{ delivery.orderId }}</view>
				<view class="name line1">{{ delivery.nickname }}</view>
			</view>
			<view class="address">
				<view class="name">
					{{ delivery.realName }}
					<text class="phone">{{ delivery.userPhone }}</text>
				</view>
				<view>{{ delivery.userAddress }}</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">
					<view class="goods" :class="active === typesIndex ? 'on' : ''" v-for="(item, typesIndex) in types" :key="typesIndex" @click="changeType(item, typesIndex)">
						{{ item.title }}
						<text class="iconfont icon-xuanzhong2"></text>
					</view>
				</view>
			</view>
			<view class="list" v-show="active === 0">
				<view class="item acea-row row-between-wrapper">
					<view>快递公司</view>
					<picker mode="selector" :range="logistics" class="mode" range-key="name" @change="changeLog">
						<input type="text" placeholder="填写快递公司" disabled="disabled" v-model="deliveryNames" class="mode" />
					</picker>
					<!-- <input type="text" placeholder="填写快递公司" v-model="deliveryName" class="mode" /> -->
				</view>
				<view class="item acea-row row-between-wrapper">
					<view>快递单号</view>
					<input type="text" placeholder="填写快递单号" v-model="deliveryId" class="mode" />
				</view>
			</view>
			<view class="list" v-show="active === 1">
				<view class="item acea-row row-between-wrapper">
					<view>送货人</view>
					<input type="text" placeholder="填写送货人" v-model="deliveryName" class="mode" />
				</view>
				<view class="item acea-row row-between-wrapper">
					<view>送货电话</view>
					<input type="text" placeholder="填写送货电话" v-model="deliveryId" class="mode" />
				</view>
			</view>
		</view>
		<view style="height:100rpx;"></view>
		<view class="confirm" @click="saveInfo">确认提交</view>
	</view>
</template>
<script>
import { getAdminOrderDelivery, setAdminOrderDelivery } from '@/api/admin';
import { getLogistics } from '@/api/public';
import { required } from '@/utils/validate';
import { validatorDefaultCatch } from '@/utils/dialog';

export default {
	name: 'GoodsDeliver',
	components: {},
	props: {},
	data: function() {
		return {
			types: [
				{
					type: 'express',
					title: '发货'
				}
				// {
				//   type: "send",
				//   title: "送货"
				// },
				// {
				//   type: "fictitious",
				//   title: "无需发货"
				// }
			],
			active: 0,
			order_id: '',
			delivery: [],
			logistics: [],
			delivery_type: 'express',
			deliveryName: '',
			deliveryId: '',
			deliveryNames: '请选择'
		};
	},
	watch: {
		'$yroute.query.oid': function(newVal) {
			let that = this;
			if (newVal != undefined) {
				that.order_id = newVal;
				that.getIndex();
			}
		}
	},
	mounted: function() {
		this.order_id = this.$yroute.query.oid;
		this.getIndex();
		this.getLogistics();
	},
	methods: {
		changeLog: function(value) {
			this.deliveryNames = this.logistics[value.detail.value].name;
			this.deliveryName = this.logistics[value.detail.value].id;
		},
		changeType: function(item, index) {
			this.active = index;
			this.delivery_type = item.type;
			this.deliveryName = '';
			this.deliveryId = '';
		},
		getIndex: function() {
			let that = this;
			getAdminOrderDelivery(that.order_id).then(
				res => {
					that.delivery = res.data;
				},
				error => {
					uni.showToast({
						title: error.msg,
						icon: 'none',
						duration: 2000
					});
				}
			);
		},
		getLogistics: function() {
			let that = this;
			getLogistics().then(
				res => {
					console.log(res.data);
					that.logistics = res.data;
				},
				error => {
					uni.showToast({
						title: error.msg,
						icon: 'none',
						duration: 2000
					});
				}
			);
		},
		async saveInfo() {
			let that = this,
				delivery_type = that.delivery_type,
				deliveryName = that.deliveryName,
				deliveryId = that.deliveryId,
				save = {};
			save.orderId = that.order_id;
			save.deliveryType = that.delivery_type;
			switch (delivery_type) {
				case 'express':
					try {
						await this.$validator({
							deliveryName: [required(required.message('快递公司'))],
							deliveryId: [required(required.message('快递单号'))]
						}).validate({ deliveryName, deliveryId });
					} catch (e) {
						return validatorDefaultCatch(e);
					}
					save.deliveryName = deliveryName;
					save.deliveryId = deliveryId;
					that.setInfo(save);
					break;
				case 'send':
					try {
						await this.$validator({
							deliveryName: [required(required.message('发货人姓名'))],
							deliveryId: [required(required.message('发货人电话'))]
						}).validate({ deliveryName, deliveryId });
					} catch (e) {
						return validatorDefaultCatch(e);
					}
					save.deliveryName = deliveryName;
					save.deliveryId = deliveryId;
					that.setInfo(save);
					break;
			}
		},
		setInfo: function(item) {
			let that = this;
			console.log(item);
			setAdminOrderDelivery(item)
				.then(res => {
					console.log(res);
					uni.showToast({
						title: res.msg,
						icon: 'none',
						duration: 2000
					});
					that.$yrouter.go(-1);
				})
				.catch(err => {
					console.log(err);
					uni.showToast({
						title: err.msg || err.response.data.msg || err.response.data.message,
						icon: 'none',
						duration: 2000
					});
				});
		}
	}
};
</script>