point-app/pagesMy/logistics/index.vue

<template>
	<mobile-frame>
		<view class="main">
			<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 user-select="true">{{no}}</text>
							</view>
							<view class="second_1_1" v-if="type == 'order'">
								<text>包含商品：</text>
								<text v-for="(item,index) in goods" :key="index">{{item.goods_name}};</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: [],
				// 标签页
				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 == 'groupOrder') {
						res = await that.$api(`/groupOrder/${that.id}`, `GET`, {}, `group`)
					} 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 if (that.type == 'groupAfterSale') {
						res = await that.$api(`/groupAfterSale/${that.id}`, `GET`, {}, 'group')
						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 == 'order') {
							let res = await that.$api(`/orderDetail/sot`, `POST`, {
								id: that.id,
							});
							if (res.errcode == '0') {
								for (let [index, item] of res.data.entries()) {
									let num = index + 1
									item.title = `物流编号` + num;
									item.active = item.no
								}
								that.$set(that, `goods`, res?.data[0]?.goods)
								that.$set(that.tabs, `active`, res?.data[0]?.no)
								that.$set(that.tabs, `menu`, res.data)
							} else {
								uni.showToast({
									title: res.errmsg,
									icon: 'none'
								})
							}
						}
						that.$set(that, `info`, res.data);
						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 if (that.type == 'groupAfterSale') {
						let arr = await that.$api(`/orderOthers/afterSale/transport`, `POST`, {
							id: that.id
						}, `group`);
						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 == 'groupOrder') {
						let res = await that.$api(`/orderOthers/transport`, `POST`, {
							order: that.id
						}, `group`);
						if (res.errcode == '0') {
							that.$set(that, `is_check`, res?.data[0].is_check);
							let list = res?.data[0].list.map((i) => ({
								desc: i.time,
								title: i.context
							}))
							that.$set(that, `list`, list);
							that.$set(that, `no`, res?.data[0].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);
							that.$set(that, `goods`, data.goods)
						} else {
							uni.showToast({
								title: '暂无物流信息！',
								icon: 'none'
							})
						}
					}
				}
			},
			// 选择选项卡
			tabsChange(e) {
				const that = this;
				that.$set(that.tabs, `active`, e.active)
				that.$set(that, `goods`, e?.goods)
				that.search()
			},
		}
	}
</script>

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

		.second {
			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>