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

<template>
	<view>
		<view class="list">
			<view v-for="(item, idx) in dateList" :key="idx">
				<view class="list_con flexB" @click="changeSwitch(item, idx)">
					<view class="flexS">
						<view class="circle_out flexCC">
							<view class="circle_in"></view>
						</view>
						<text class="date">{{ item.date }}</text>
						<text class="order_count">订单数：{{ item.count }}</text>
					</view>
					<image src="../../static/icon/arrow.png"></image>
				</view>
				<view v-if="item.switch" style="margin-bottom:30rpx;">
					<view class="con_detail" v-for="(detail, index) in detailList" :key="'key' + index">
						<image src="../../static/new_stock/finish.png"
							v-if="detail.get_order && detail.get_order.track_status == 2" class="state"></image>
						<image src="../../static/new_stock/no_finish.png" v-else class="state"></image>
						<view v-if="detail.get_order" class="detail">
							<view>
								<!-- <view @click="skipOrder(detail.get_order.order_num)"> -->
								<text>订单编号：</text>
								<text class="order_no">{{ detail.get_order.order_num }}</text>
							</view>
							<view>
								<text>收货人：</text>
								<text
									v-if="detail.get_order.address">{{ detail.get_order.address.username | getNickname }}</text>
								<text
									style="font-size:28rpx;margin-left:15rpx;">{{ detail.get_order.address.mobile }}</text>
							</view>
							<view>
								<text>地址：</text>
								<text>
									{{ detail.get_order.address.province }}{{ detail.get_order.address.city }}{{ detail.get_order.address.town}}{{ detail.get_order.address.address }}
								</text>
							</view>
							<view class="flexB">
								<view v-if="detail.get_order.get_express">
									箱数：{{ detail.get_order.get_express.length ? detail.get_order.get_express.length : 0 }}箱
								</view>
								<view class="more" :class="detail.toggle ? 'open' : 'close'"
									@click="detail.toggle = !detail.toggle">查看详情</view>
							</view>
						</view>
						<view class="box" v-if="detail.toggle && detail.get_order">
							<view class="box_con" v-for="(temp, i) in detail.get_order.get_express" :key="i">
								<view class="box_fix" v-if="temp.is_gift === 1"></view>
								<view class="flexS" style="margin-bottom:15rpx;">
									<text>第{{ i + 1 }}箱</text>
									<text style="margin:0 30rpx;">{{ temp.express_com }}</text>
									<text>单号：{{ temp.express_number }}</text>
								</view>
								<view class="flexB opera" v-if="temp.is_gift === 0">
									<view class="search"
										@click="goodsDetail(temp,temp.id, temp.put_status, temp.remark)">货物详情</view>
									<view class="search" @click="getLog(temp)">物流查询</view>
									<view class="box_btn"
										:class="temp.good_user_id != temp.user_id || temp.put_status == 1 ? 'gray_btn' : 'active_btn'"
										@click="temp.good_user_id == temp.user_id && temp.put_status == 0 ? toPublishRuKu(temp.id, index, i) : ''">
										{{ temp.put_status == 1 ? '已入库' : '入库' }}
									</view>
								</view>
								<view class="flexe opera" v-if="temp.is_gift === 1">
									<view class="searche" @click="giftsList(temp)">礼品详情</view>
									<view class="searcht" @click="getLog(temp)">物流查询</view>
								</view>
							</view>
						</view>
					</view>
				</view>
				<view class="block"></view>
			</view>
			<view class="noData" v-if="dateList.length == 0">
				<image src="../../static/default/no_record.png"></image>
				<view class="gray" style="font-size:30rpx;">--暂无数据--</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		getGroup,
		getDetail
	} from '@/apis/deliver.js';
	import {
		publishRuKu
	} from '@/apis/stock.js';
	export default {
		data() {
			return {
				dateList: '', //日期列表
				detailList: '', //列表详情
				params: {
					page_index: 1,
					page_size: 10
				},
				total: 0, //总条数
				isStorage: false //是否已经入库
			};
		},
		onLoad() {
			this.getDate();
		},
		filters: {
			/*截取地址字数*/
			getAds(value) {
				return value.length > 15 ? value.slice(0, 15) + '...' : value;
			},
			getNickname(value) {
				return value.length > 5 ? value.slice(0, 5) + '...' : value;
			}
		},
		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))}`,
				});
			},
			/*展开关闭日期*/
			changeSwitch(item, idx) {
				let list = this.dateList;
				if (list.length == 0) {
					uni.showToast({
						title: '暂无数据',
						icon: 'none'
					});
					return false;
				}
				list.map((item, index) => {
					if (index == idx) {
						item.switch = !item.switch;
						item.switch ? this.getDetail(item.date) : '';
					} else {
						this.$set(item, 'switch', false);
					}
				});
			},
			/*获取日期列表*/
			getDate(isMore) {
				let params = this.params;
				getGroup(params).then(res => {
					if (res.code == 200) {
						let list = res.data.list;
						if (list.length == 0) {
							return false;
						}
						list.map((item, idx) => {
							idx == 0 ? this.$set(item, 'switch', true) : this.$set(item, 'switch', false);
						});
						this.total = Math.ceil(res.data.total / this.params.page_size);
						this.dateList = isMore ? this.dateList.concat(list) : list;
						this.getDetail(res.data.list[0].date, res.data.list[0].switch);
					} else {
						uni.showModal({
							content: res.message || '获取列表失败',
							showCancel: false
						});
					}
				});
			},
			/*跳转到订单详情*/
			skipOrder(order_num) {
				uni.navigateTo({
					url: '../order-detail1/order-detail1?order_num=' + order_num
				});
			},
			/*获取列表详情*/
			getDetail(time, isSwitch) {
				getDetail({
					time
				}).then(res => {
					if (res.code == 200) {
						let list = res.data.list;
						list.map((item, idx) => {
							idx == 0 && isSwitch ? this.$set(item, 'toggle', true) : this.$set(item,
								'toggle', false);
						});
						this.detailList = list;
					} else {
						uni.showModal({
							content: res.message || '获取详情失败',
							showCancel: false
						});
					}
				});
			},
			/*获取更多数据*/
			getMore() {
				if (this.params.page_index > this.total) {
					uni.showToast({
						title: '没有更多啦~',
						icon: 'none'
					});
					return false;
				}
				this.params.page_index++;
				this.getDate(true);
			},
			/*跳转到货物详情
			 * @params status  1 显示入库按钮  0不显示入库按钮
			 */
			goodsDetail(temp, id, put_status, remark) {
				// uni.navigateTo({
				// 	url: '../unshipped-detail/index?order_id=' + id
				// });
				if (remark === null) {
					remark = ''
				}
				let status = ''
				if (temp.good_user_id == temp.user_id && put_status == 0) {
					status = 1
				} else {
					status = 0
				}
				uni.navigateTo({
					url: '../stock/ing_ruku?order_id=' + id + '&status=' + status + '&remark=' + remark
				});
			},
			/*查看物流*/
			getLog(temp) {
				const {
					express_number,
					express_com,
					id
				} = temp;
				uni.navigateTo({
					url: '../logistics-details/logistics-details?express_number=' + express_number +
						'&express_com=' + express_com + '&id=' + id
				});
			},
			// 确认入库
			toPublishRuKu(id, index, i) {
				const _this = this;
				uni.showModal({
					content: '入库时请确认商品信息是否正确',
					confirmText: '入库',
					cancelText: '取消',
					success(res) {
						if (res.confirm) {
							uni.showLoading();
							publishRuKu({
									id
								})
								.then(res => {
									uni.hideLoading();
									if (res.code === 200) {
										_this.detailList[index].get_order.get_express[i].put_status = 1;
										uni.showModal({
											content: '入库成功',
											showCancel: false
										})
									} else {
										uni.showModal({
											content: res.message || '入库失败',
											showCancel: false
										})
									}
								})
								.catch(() => {
									uni.hideLoading();
									uni.showModal({
										content: '入库失败',
										showCancel: false
									});
								});
						}
					}
				})
			}
		}
	};
</script>
<style lang="scss" scoped>
	.list {

		view,
		text {
			font-weight: 500;
		}

		.list_con {
			width: 100%;
			height: 120rpx;
			padding: 0 30rpx;
			background: #fff;
			box-sizing: border-box;

			image {
				width: 35rpx;
				height: 35rpx;
				vertical-align: -6rpx;
			}

			.circle_out {
				width: 44rpx;
				height: 44rpx;
				background: rgba(234, 74, 65, 0.2);
				border-radius: 50%;

				.circle_in {
					width: 28rpx;
					height: 28rpx;
					background: rgba(234, 74, 65, 1);
					border-radius: 50%;
				}
			}

			.date {
				color: $base-color;
				font-size: 32rpx;
				margin: 0 30rpx 0 15rpx;
			}

			.order_count {
				font-size: 32rpx;
				margin-top: -10rpx;
			}

			.noList {
				width: 100%;
				text-align: center;
				font-size: 28rpx;
				color: #999;
				margin-top: 150rpx;
			}
		}

		.block {
			width: 100%;
			height: 30rpx;
			background: #f9f9fb;
		}

		.con_detail {
			width: 690rpx;
			margin: 0 auto 30rpx;
			padding: 20rpx 70rpx 20rpx 20rpx;
			box-sizing: border-box;
			border-radius: 24rpx;
			background: #f8f8f8;
			position: relative;

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

			.detail {
				>view {
					margin-top: 20rpx;
					font-size: 32rpx;

					.order_no {
						color: #3394f8;
					}
				}
			}

			.more {
				position: relative;
				color: $base-color;

				&::after {
					content: '';
					display: block;
					width: 15rpx;
					height: 15rpx;
					position: absolute;
					top: 15rpx;
					right: -30rpx;
				}
			}

			.close::after {
				border-top: 3rpx solid $base-color;
				border-right: 3rpx solid $base-color;
				transform: rotate(45deg);
			}

			.open::after {
				border-top: 3rpx solid $base-color;
				border-right: 3rpx solid $base-color;
				transform: rotate(135deg);
			}

			.box {
				.box_con {
					width: 630rpx;
					height: 194rpx;
					background: #fff;
					margin-top: 30rpx;
					padding: 15rpx 30rpx;
					box-sizing: border-box;
					display: flex;
					flex-direction: column;
					justify-content: center;
					border-radius: 24rpx;
					position: relative;

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

					.box_btn {
						width: 100rpx;
						height: 56rpx;
						line-height: 56rpx;
						text-align: center;
						color: #fff;
						border-radius: 8rpx;
						font-size: 28rpx;
					}

					.gray_btn {
						background: #999;
					}

					.active_btn {
						background: linear-gradient(88deg, #f97c55 0%, #f44545 100%);
					}

					.flexe {
						display: flex;
						justify-content: center;
					}

					.opera {
						border-top: 2rpx solid #eeeeee;
						padding-top: 15rpx;

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

						.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;
						}
					}
				}
			}
		}
	}
</style>