point-app/pagesMy/logistics/index.vue

<template>
	<mobile-frame>
		<view class="main">
			<!-- 已收货查看选择商品物流 -->
			<view class="first" v-if="type!='afterSale'&&type != 'integral'">
				<view class="first_1">
					<picker class="picker" mode="selector" :range="info.goods" @change="goodsChange"
						range-key="goods_name">
						<view>{{goods_name||'请选择查看物流的商品'}}</view>
					</picker>
				</view>
				<view class="first_2" v-if="goods_name">
					<image class="image" :src="goods.goods_file&&goods.goods_file.length>0?goods.goods_file[0].url:''"
						mode="">
						<view class="other">
							<view class="name textOver">
								{{goods.goods_name}}
							</view>
							<view class="other_1 textOver">
								<text>规格：</text>
								<text>{{goods.name}}</text>
							</view>
							<view class="other_1 textOver">
								<text>金额：</text>
								<text>¥{{info.type=='0'?goods.price||goods.sell_money:goods.group_config.money}}</text>
							</view>
							<view class="other_1 textOver">
								<text>数量：</text>
								<text>×{{goods.buy_num}}</text>
							</view>
						</view>
					</image>
				</view>
			</view>
			<!-- 售后，尊荣商品查看物流 -->
			<view class="first" v-else></view>
			<view class="second">
				<tabs :tabs="tabs" @tabsChange="tabsChange">
					<view class="tabsList">
						<view class="second_1">
							<view class="second_1_1">
								<text>订单状态：</text>
								<text>{{is_check}}</text>
							</view>
							<view class="second_1_1">
								<text>物流单号：</text>
								<text>{{no}}</text>
							</view>
						</view>
						<view class="second_2">
							<uni-section title="物流记录" type="line" padding>
								<uni-steps :options="list" active-color="#007AFF" :active="active" direction="column" />
							</uni-section>
						</view>
					</view>
				</tabs>
			</view>
		</view>
		</view>
	</mobile-frame>
</template>

<script>
	import tabs from '@/components/tabs/index.vue';
	export default {
		components: {
			tabs
		},
		data() {
			return {
				id: '',
				// 类型
				type: '',
				// 商品选择
				goods_name: '',
				goods: {},
				// 标签页
				tabs: {
					active: '',
					menu: []
				},
				user: {},
				info: {},
				is_check: '',
				no: '',
				list: []
			};
		},
		onLoad: function(e) {
			const that = this;
			that.$set(that, `id`, e.id || '');
			that.$set(that, `type`, e.type || '');
			that.watchLogin()
		},
		methods: {
			watchLogin() {
				const that = this;
				uni.getStorage({
					key: 'token',
					success: function(res) {
						let user = that.$jwt(res.data);
						if (user) that.$set(that, `user`, user);
						that.searchInfo();
					}
				})
			},
			// 查商品详情
			async searchInfo() {
				const that = this;
				if (that.id) {
					let res;
					if (that.type == 'integral') {
						res = await that.$api(`/zrOrder/${that.id}`, `GET`, {}, `integral`)
					} else if (that.type == 'afterSale') {
						res = await that.$api(`/afterSale/${that.id}`, `GET`)
						that.$set(that.tabs, `active`, 'shop')
						that.$set(that.tabs, `menu`, [{
							title: '店铺物流',
							active: 'shop',
						}, {
							title: '用户物流',
							active: 'customer',
						}])
					} else {
						res = await that.$api(`/orderDetail/${that.id}`, 'GET')
					}
					if (res.errcode == '0') {
						if (that.type != 'afterSale' && that.type != 'integral') {
							for (let val of res.data.goods) {
								val.goods_name = val.goods.name;
								val.goods_file = val.goods.file;
							}
						}
						that.$set(that, `info`, res.data);
						if (that.type == 'afterSale' || that.type == 'integral') that.search();
					} else {
						uni.showToast({
							title: res.errmsg,
							icon: 'none'
						})
					}
				}
			},
			// 查物流信息
			async search() {
				const that = this;
				if (that.type == 'afterSale') {
					let arr = await that.$api(`/afterSale/getTransportInfo/${that.info.id}`, `GET`)
					if (arr.errcode == '0') {
						if (that.tabs.active == 'shop') {
							that.$set(that, `is_check`, arr.data?.shop.is_check);
							let list = arr.data?.shop.list.map((i) => ({
								desc: i.time,
								title: i.context
							}))
							that.$set(that, `list`, list);
							that.$set(that, `no`, arr.data?.shop.no);
						} else {
							that.$set(that, `is_check`, arr.data?.customer.is_check);
							let list = arr.data?.customer.list.map((i) => ({
								desc: i.time,
								title: i.context
							}))
							that.$set(that, `list`, list);
							that.$set(that, `no`, arr.data?.customer.no);
						}
					} else {
						uni.showToast({
							title: res.errmsg,
							icon: 'none'
						})
					}
				} else {
					if (that.type == 'integral') {
						let res = await that.$api(`/zrOrder/sot/${that.info._id}`, `GET`, {}, `integral`);
						if (res.errcode == '0') {
							that.$set(that, `is_check`, res.data.is_check);
							let list = res.data.list.map((i) => ({
								desc: i.time,
								title: i.context
							}))
							that.$set(that, `list`, list);
							that.$set(that, `no`, res.data.no);
						} else {
							uni.showToast({
								title: res.errmsg,
								icon: 'none'
							})
						}
					} else {
						let data = that.tabs.menu.find((i) => i.no == that.tabs.active);
						if (data) {
							that.$set(that, `is_check`, data.is_check);
							let list = data.list.map((i) => ({
								desc: i.time,
								title: i.context
							}))
							that.$set(that, `list`, list);
							that.$set(that, `no`, data.no);
						} else {
							uni.showToast({
								title: '暂无物流信息！',
								icon: 'none'
							})
						}
					}

				}
			},
			// 选择指定商品查信息
			async goodsChange(e) {
				const that = this;
				let data = that.info.goods[e.detail.value];
				that.$set(that, `goods`, data);
				that.$set(that, `goods_name`, data.goods_name);
				let res = await that.$api(`/orderDetail/sot`, `POST`, {
					id: that.info._id,
					goods_id: data._id
				});
				if (res.errcode == '0') {
					for (let [index, item] of res.data.entries()) {
						item.title = `物流` + index
						item.active = item.no
					}
					that.$set(that.tabs, `active`, res?.data[0]?.no)
					that.$set(that.tabs, `menu`, res.data)
					that.search();
				} else {
					uni.showToast({
						title: res.errmsg,
						icon: 'none'
					})
				}
			},
			// 选择选项卡
			tabsChange(e) {
				const that = this;
				that.$set(that.tabs, `active`, e.active)
				that.search()
			},
		}
	}
</script>

<style lang="scss">
	.main {
		display: flex;
		flex-direction: column;
		width: 100vw;
		height: 100vh;

		.first {
			position: relative;
			width: 100vw;
			height: 100vh;
			background-color: #ff0000;

			.first_1 {
				width: 96vw;
				padding: 2vw;

				.picker {
					border: 1px solid #3333;
					border-radius: 5px;
					padding: 2vw;
					background: #fff;
				}
			}

			.first_2 {
				display: flex;
				width: 92vw;
				background-color: #fff;
				padding: 2vw;
				margin: 0 2vw;
				border-radius: 7px;

				.image {
					width: 22vw;
					height: 22vw;
				}

				.other {
					width: 65vw;
					padding: 0 0 0 2vw;

					.name {
						font-size: 16px;
						font-weight: bold;
					}

					.other_1 {
						text {
							font-size: 13px;
							color: #858585;
						}

						text:last-child {
							color: #000000;
						}
					}
				}
			}
		}

		.second {
			position: absolute;
			bottom: 0;
			width: 92vw;
			height: 60vh;
			overflow-y: auto;
			background: #fff;
			margin: 0 2vw;
			border-top-left-radius: 5px;
			border-top-right-radius: 5px;
			padding: 2vw;

			.tabsList {
				.second_1 {
					margin: 0 0 2vw 0;

					.second_1_1 {
						padding: 1vw 0;
					}
				}
			}
		}

	}

	.uni-section .uni-section-header {
		padding: 1vw !important;
	}

	.uni-section .uni-section-content {
		padding: 0 !important;
	}
</style>