web-app-v1/pages/stock/dai_ruku.vue

<template>
	<view class="RuKuContainer">
		<view class="orderList">
			<view
				v-for="item 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="hideBody">
					<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: ''
			}
		},
		onShow() {
			let page = getCurrentPages().pop()
			this.order_id = page.options.order_id
			this.getOrderInfo()
		},
		methods: {
			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.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;
		.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;
				background-color: #ffffff;
				.Header {
					width: 100%;
					height: 104rpx;
					background-color: #ffffff;
					padding: 0 30rpx;
					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;
						}
					}
				}
				.hideBody {
					width: 100%;
					padding-bottom: 30rpx;
					.hideItem {
						width: calc(100% - 60rpx);
						margin: 0 auto 30rpx auto;
						padding: 30rpx;
						box-sizing: border-box;
						background-color: #F9F9FB;
						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>