H5_module/merchant/deliverExtend.vue

<template>
	<view>
		<view class="deliver">
			<view v-for="(item, index) in deliverExtends" :key="index">
				<view class="extends">
					<view class="exTop dflex">
						<span class="fahuo">发货单{{ index + 1 }}</span>
						<span class="state">{{ item.state == 1 ? '待发货' : item.state == 2 ? '已发货' : '' }}</span>
					</view>
					<view class="cont dflex" v-for="(it, idx) in item.extendDTOList" :key="idx">
						<img :src="it.pic" class="eimg" />
						<view class="zhinfo">
							<view class="zhtit" v-text="it.productName"></view>
							<view class="guige">
								<!-- <span>规格：</span> -->
								<span v-if="it.productNumber != '' || it.productNumber != null">编码：{{ it.productNumber }}</span>
							</view>
						</view>
						<view class="num">X{{ it.quantity }}</view>
					</view>
					<view class="deliverId dflex">
						<span class="deliveri">发货号：{{ item.id }}</span>
						<span class="supplierName">{{ item.supplierName }}</span>
					</view>
					<view v-if="item.state == 1" class="btn dflex"><view v-if="item.state == 1" @click="deliverGoods(item)">确认发货</view></view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			deliverExtends: '',
			id: '',
			merchantId: ''
		};
	},
	onLoad(opt) {
		this.id = opt.id;
		this.merchantId = opt.merchantId;
		this.deliverExtend();
	},

	methods: {
		deliverGoods(item) {
			this.jumpUrl('express?id=' + item.orderId + '&merchantId=' + this.merchantId+'&deliverId='+item.id);
		},
		// 获取发货单号
		deliverExtend() {
			req.postRequest(
				'/api/order/deliverExtend',
				{
					id: this.id
				},
				data => {
					this.deliverExtends = data;
					console.log(data);
				}
			);
		}
	}
};
</script>

<style>
@import './static/css/main.css';
.extends {
	margin: 10px 20px;
	padding: 15px;
	background-color: #fff;
	border-radius: 10px;
}

.exTop {
	justify-content: space-between;
}

.fahuo {
	font-size: 16px;
	/* font-weight: bold; */
	color: #000000;
}

.state {
	color: #ff341e;
}

.cont {
	margin: 10px 0;
	padding: 10px;
	background-color: #f5f5f5;
	align-items: center;
}

.eimg {
	width: 40px;
	height: 40px;
	border-radius: 0.1rem;
	margin-right: 0.2rem;
	border: 0.02rem solid #e5e5e5;
	box-sizing: border-box;
}

.guige {
	white-space: nowrap;
	text-overflow: ellipsis;
	overflow: hidden;
}

.num {
	font-size: 15px;
}

.deliverId {
	justify-content: space-between;
	align-items: center;
	padding: 0 0 6px 0;
}

.deliveri {
	color: #999;
}

.deliverId span {
	white-space: nowrap;
	text-overflow: ellipsis;
	overflow: hidden;
}

.supplierName {
	font-size: 15px;
	color: #000000;
}

.btn {
	border-top: 1px solid #ebebeb;
	padding: 5px 0 0 0;
	justify-content: flex-end;
}
</style>