web-app-v1/pages/lading_detail/detail.vue

<template>
	<view class="RuKuContainer">
		<view class="RuKuContainer_top">
			<view class="bianhao">
				订单编号：
				<text style="color:#3394F8;">{{ order_num }}</text>
			</view>
			<view v-if="item.track_status != 2" class="mingxi" @click="unShipped">
				未发明细
			</view>
		</view>
		<view v-for="(btem,i) in get_express" :key="i" class="hideItem">
			<view class="box_fix" v-if="btem.is_gift === 1"></view>
			<view class="hideNum">
				<view class="num">第{{ i+1 }}箱</view>
				<view class="orderNum">单号：{{ btem.express_number }}</view>
			</view>
			<view class="control" v-if="btem.is_gift === 0">
				<view class="textBtn" @click="toInfo(btem)">
					货物详情
				</view>
				<view class="textBtn" @click="logisticsQuery(btem)">
					物流查询
				</view>
				<view class="btn" :class="!(item.is_per && !btem.put_status) ? 'disable' : ''"
					@click="toRuKu(item, btem)">
					入库
				</view>
			</view>
			<view class="control" v-if="btem.is_gift === 1">
				<view class="searche" @click="giftsList(btem)">礼品详情</view>
				<view class="searcht" @click="logisticsQuery(btem)">物流查询</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		goodsInfo
	} from "@/apis/stock.js"
	export default {
		data() {
			return {
				list: [],
				get_express: [],
				item: {},
				order_id: '',
				initOpenId: '',
				order_num: '',
				index: ''
			}
		},
		onLoad(options) {
			this.index = options.num
			this.order_num = options.order_num
			this.item = JSON.parse(decodeURIComponent(options.item))
			this.get_express = this.item.get_express
			console.log('单个', this.get_express)
		},
		methods: {
			unShipped() {
				uni.navigateTo({
					url: '../unshipped-detail/index?order_id=' + this.item.order_id
				})
			},
			giftsList(btem) {
				if (btem.remark === null) {
					btem.remark = ''
				}
				var obj = eval(btem.notes); //由JSON字符串转换为JSON对象
				uni.navigateTo({
					url: `../gifts_list/gifts_list?remark=${btem.remark}&item=${encodeURIComponent(JSON.stringify(obj))}`,
				});
			},
			// 获取详情
			getOrderInfo() {
				uni.showLoading()
				const _this = this
				goodsInfo({
					id: _this.data.order_id
				}).then(res => {
					uni.hideLoading()
					if (res.code === 200) {
						let openId = uni.getStorageSync('rukuOpenId')
						_this.list = res.data.list.map((item, idx) => {
							item.toggle = openId && Number(openId) === Number(item.id)
							idx == 0 ? this.$set(item, 'toggle', true) : this.$set(item, 'toggle', false);
							return item
						})
					} else {
						uni.showModal({
							content: res.message || "获取货物详情失败",
							showCancel: false
						})
					}
				}).catch(() => {
					uni.hideLoading()
					uni.showModal({
						content: "获取货物详情失败",
						showCancel: false
					})
				})
			},
			// 详情
			toInfo(data) {
				if (data.remark === null) {
					data.remark = ''
				}
				this.toUrlLink('stock/ing_ruku?status=0&order_id=' + data.id + '&remark=' + data.remark)
			},
			// 物流查询
			logisticsQuery(item) {
				uni.navigateTo({
					url: '../logistics-details/logistics-details?id=' + item.id + '&express_com=' + item
						.express_com + '&express_number=' + item.express_number
				});
			},
			// 入库
			toRuKu(item, btem) {
				if (!(item.is_per && !btem.put_status)) return false
				const _this = this
				uni.setStorage({
					key: 'rukuOpenId',
					data: item.id,
					success() {
						_this.toUrlLink('stock/ing_ruku?status=1&order_id=' + btem.id)
					}
				})
			},
			toUrlLink(url) {
				if (!url) return false
				uni.navigateTo({
					url: `../${url}`
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	page {
		display: flex;
		flex-direction: column;
	}

	.RuKuContainer {
		width: 100%;
		flex: 1;
		background-color: #F9F9FB;
		padding: 30rpx;

		&_top {
			display: flex;
			justify-content: space-between;
			align-items: center;
			margin-bottom: 30rpx;

			.bianhao {
				font-size: 30rpx;
				font-weight: bold;
			}

			.mingxi {
				width: 140rpx;
				height: 56rpx;
				font-size: 28rpx;
				text-align: center;
				line-height: 56rpx;
				background: #FB231F;
				border-radius: 8rpx;
				color: #fff;
			}
		}

		.btn {
			width: 128rpx;
			height: 60rpx;
			border-radius: 8rpx;
			background-color: #EA4A41;
			color: #FFFFFF;
			font-size: 28rpx;
			line-height: 60rpx;
			text-align: center;
		}

		.hideItem {
			margin: 0 auto 30rpx auto;
			padding: 30rpx;
			box-sizing: border-box;
			background-color: #fff;
			border-radius: 24rpx;
			position: relative;

			&:nth-last-of-type(1) {
				margin-bottom: 0;
			}

			.box_fix {
				width: 6rpx;
				height: 84rpx;
				background: #FB231F;
				position: absolute;
				top: 56rpx;
				left: 0;
			}

			.hideNum {
				display: flex;
				align-items: center;
				justify-content: space-between;
				padding-bottom: 20rpx;
				border-bottom: 1px solid #EEEEEE;
				margin-bottom: 26rpx;
				color: #333333;
				font-size: 32rpx;
				line-height: 44rpx;

				.num {
					width: 120rpx;
					text-align: left;
				}

				.orderNum {
					flex: 1;
					min-width: 0;
				}
			}

			.control {
				width: 100%;
				display: flex;
				align-items: center;
				justify-content: space-between;

				.textBtn,
				.btn {
					width: calc((100% - 120rpx) / 3);
				}

				.searcht {
					color: $base-color;
					width: 100%;
					text-align: center;
					font-size: 28rpx;
				}

				.searche {
					color: $base-color;
					width: 100%;
					text-align: center;
					font-size: 28rpx;
					border-right: 2rpx solid #eee;
				}

				.textBtn {
					color: #FB231F;
					font-size: 32rpx;
					line-height: 44rpx;
					text-align: left;
					position: relative;
					margin-right: 60rpx;

					&::after {
						content: "";
						display: block;
						width: 1px;
						height: 26rpx;
						background-color: #EEEEEE;
						position: absolute;
						top: 50%;
						right: 0;
						transform: translateY(-50%);
					}
				}

				.btn {
					&.disable {
						background-color: #F9F9FB !important;
						color: #999999 !important;
						border: 1px solid #EEEEEE;
						box-sizing: border-box;
					}
				}
			}
		}
	}
</style>