H5_module/merchant/expressList/index.vue

<template>
	<view>
		<view class="deliver">
			<view v-for="(item, index) in deliverExtends" :key="index">
				<view class="extends">
					<view class="exTop ddflex">
						<view class="fahuo">发货单{{ index + 1 }}<text class="state">{{ item.state == 1 ? '待发货' : item.state == 2 ? '已发货' : '' }}</text></view>
						<view v-if="item.state == 1">
							<switch :checked="item.isSplit" class="switch" @change="splitDeliver($event,index)"></switch>
							拆单
						</view>
					</view>
					<view class="cont" v-for="(it, idx) in item.extendDTOList" :key="idx">
						<view class="ddflex">
							<img :src="it.pic" class="eimg" />
							<view class="zhinfo fflex">
								<view class="zhtit" v-text="it.productName"></view>
								<view class="guige">
									<!-- <span>规格：</span> -->
									<span v-if="JSON.parse(it.history).productNumber != '' || JSON.parse(it.history).productNumber != null">编码：{{ JSON.parse(it.history).productNumber }}</span>
								</view>
							</view>
							<view class="num">×{{ it.deliverQuantity }}</view>
						</view>
						<view class="bc-ship ddflex" v-if="it.isSplit">
							<view class="">本次拆单</view>
							<input v-model="it.currentQuantity" class="ship-ipt"/>
						</view>
					</view>
					<view class="deliverId ddflex">
						<span class="deliveri">发货号：{{ item.id }}</span>
						<!-- <span class="supplierName">{{ item.supplierName }}</span> -->
					</view>
					<view v-if="item.state == 1" class="btns ddflex">
						<view class="btn" v-if="item.isSplit" @click="deliverSplit(item,index)">拆单</view>
						<view class="btn" v-else @click="deliverGoods(item)">确认发货</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
const req = require('../../utils/request');
const api = require('../../utils/api');
export default {
	data() {
		return {
			deliverExtends: '',
			id: '',
			merchantId: ''
		};
	},
	onLoad(opt) {
		this.id = opt.id;
		this.merchantId = opt.merchantId;
	},
	onShow() {
		this.deliverExtend();
	},

	methods: {
		deliverGoods(item) {
			console.log('发货')
			this.jumpUrl('/merchant/express?id=' + item.orderId + '&merchantId=' + this.merchantId+'&deliverId='+item.id);
		},
		// 获取发货单号
		deliverExtend() {
			req.getRequest(
				'/api/v3/order/deliver/page',
				{
					orderId: this.id
				},
				data => {
					this.deliverExtends = data.list;
					console.log(data);
				}
			);
		},
		jumpUrl(url) {
			uni.navigateTo({
				url: url
			});
		},
		splitDeliver(e,index){
			console.log('拆单',e);
			if(e.detail.value){
				this.deliverExtends.map((item,idx)=>{
					if(idx==index){
						item.extendDTOList.map(it=>{
							it.isSplit = true;
							it.currentQuantity = it.deliverQuantity;
						})
						item.isSplit = true;
					}
					return item;
				})
			}else{
				this.deliverExtends.map((item,idx)=>{
					if(idx==index){
						item.extendDTOList.map(it=>{
							it.isSplit = false;
							it.currentQuantity = 0;
						})
						item.isSplit = false;
					}
					return item;
				})
			}
			this.$forceUpdate();
		},
		judgeDeliver(index){
			let formItemList = this.deliverExtends[index].extendDTOList;
			let count = 0;
			let total = 0
			formItemList.map(it=>{
				count += it.currentQuantity;
				total += it.deliverQuantity;
			})
			if(count == 0){
				req.msg('请输入要拆分的数量');
				return false;
			}
			for(var i = 0; i < formItemList.length; i++){
				if(formItemList[i].currentQuantity > formItemList[i].deliverQuantity){
					req.msg('拆出数量不能超过可拆单数');
					return false;
				}
			}
			if(total == count) {
				req.msg('拆单数量与当前发货表数量一致');
				return false;
			}
			return true;
		},
		deliverSplit(item,index){
			if(!this.judgeDeliver(index)) return false;
			let params = this.deliverExtends[index]
			// req.postRequest(api.order_deliver_split,params,data=>{
			// 	this.deliverExtend();
			// })
		}
	}
};
</script>

<style>
@import "./index.css";
</style>