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

<template>
	<view class="RuKuContainer">
		<view class="orderList">
			<view v-for="(item,index) in list" :key="item.id" class="orderItem">
				<view class="Header" :class="item.toggle ? 'open' : ''" @click="item.toggle = !item.toggle">
					<view class="num">第{{ item.number }}次发货，共{{ item.get_express.length }}箱</view>
					<view class="type">{{ item.express_com }}</view>
					<view class="time">{{ item.created_at | dateFormatter('yyyy/MM/dd') }}</view>
				</view>
				<view v-if="item.toggle" class="hideBodyd">
					<view class="hideBodyd_box" @click="goDetail(item,index)">
						<image src="../../static/new_stock/finish.png"
							v-if="item.get_order && item.get_order.track_status == 2" class="state"></image>
						<image src="../../static/new_stock/no_finish.png" v-else class="state"></image>
						<view class="boxTop">
							<view>
								订单编号：
								<text style="color:#3394F8;">{{ data.order_num }}</text>
							</view>
							<view class="">
								收货人：{{ data.address.nickname.length > 8 ? data.address.nickname.slice(0, 6) + '..' : data.address.nickname }}
								<text style="margin-left: 10rpx;">{{ data.address.mobile }}</text>
							</view>
							<view>
								地址：
								{{ `${data.address.province}${data.address.city}${ data.address.town }${ data.address.address }` }}
							</view>
							<view class="">
								箱数：{{ item.get_express.length }}箱
							</view>
						</view>
						<view class="boxBottom">
							查看详情
						</view>
					</view>
					<!-- <view class="hideBody_top">
						<view class="bianhao">
							订单编号：
							<text style="color:#3394F8;">5654646434546546</text>
						</view>
						<view class="mingxi">
							未发明细
						</view>
					</view> -->
					<!-- <view
						v-for="(btem,i) in item.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>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		goodsInfo
	} from "@/apis/stock.js"
	export default {
		data() {
			return {
				list: [],
				order_id: '',
				initOpenId: '',
				order_num: ''
			}
		},
		onLoad(options) {
			this.data = JSON.parse(decodeURIComponent(options.data))
			this.getOrderInfo()
		},
		methods: {
			// 订单详情
			goDetail(item, index) {
				uni.navigateTo({
					url: "../lading_detail/detail?num=" + index + '&order_num=' + this.data.order_num + "&item=" +
						encodeURIComponent(JSON.stringify(item))
				})
			},
			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
						})
						console.log(_this.list)
					} 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;

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

		.orderList {
			width: 100%;

			.orderItem {
				width: 100%;
				margin-bottom: 30rpx;
				padding: 0 30rpx;
				background-color: #ffffff;

				.Header {
					width: 100%;
					height: 104rpx;
					background-color: #ffffff;
					box-sizing: border-box;
					display: flex;
					align-items: center;
					justify-content: space-between;

					.num {
						color: #333333;
						font-size: 32rpx;
						line-height: 44rpx;
						font-weight: bold;
					}

					.type,
					.time {
						color: #999999;
						font-size: 28rpx;
						line-height: 40rpx;
					}

					&::after {
						content: "";
						display: block;
						width: 30rpx;
						height: 30rpx;
						background-image: url(../../static/new_my/arrow.png);
						background-position: center;
						background-size: cover;
						background-repeat: no-repeat;
					}

					&.open {
						&::after {
							transform: rotate(90deg) !important;
						}
					}
				}

				.hideBodyd {
					width: 100%;
					padding-bottom: 30rpx;
					background-color: #fff;

					&_box {
						background-color: #F8F8F8;
						border-radius: 24rpx;
						padding: 30rpx 30rpx 0 30rpx;
						position: relative;

						.state {
							width: 108rpx;
							height: 98rpx;
							position: absolute;
							top: 0;
							right: 20rpx;
						}

						.boxTop {
							padding-bottom: 15rpx;

							view {
								font-size: 32rpx;
								color: #333;
								margin-bottom: 15rpx;
								white-space: nowrap;
								overflow: hidden;
								text-overflow: ellipsis;
							}
						}

						.boxBottom {
							line-height: 84rpx;
							text-align: center;
							border-top: 2rpx solid #eee;
							color: #FB231F;
							font-size: 32rpx;
						}
					}
				}

				.hideBody {
					width: 100%;
					padding-bottom: 30rpx;
					background-color: #fff;

					&_top {
						display: flex;
						justify-content: space-between;
						align-items: center;

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

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

					.hideItem {
						width: calc(100% - 60rpx);
						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: #EA4A41;
								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>