mnsx/user/page/delivery.vue

<template>
	<view class="content">
		<view class="navbar">
			<view v-for="(itemn, index) in navList" :key="index" class="nav-item"
				:class="{ current: tabCurrentIndex === index }" @click="tabClick(index)">{{ itemn.text }}</view>
		</view>
		<swiper :current="tabCurrentIndex" class="swiper-box" duration="300" :style="{ height: height}"
			@change="changeTab">
			<swiper-item v-for="(tabItem, tabIndex) in navList" :key="tabIndex">
				<scroll-view scroll-y="true" :style="{ height: height}" style="padding-top: 20rpx;"
					@scrolltolower="loadData()">
					<empty v-if="navList[tabCurrentIndex].goodList.length === 0"></empty>
					<view class="good" v-for="item in tabItem.goodList">
						<view class="good-top">
							<view class="top-num">订单编号:{{ item.order_id }}</view>
							<view class="top-status" v-if="tabCurrentIndex == 2">{{item.shipping_type == 1?'外送': '自提'}}
							</view>
						</view>
						<view class="goods-buttom" v-for="itemt in item._info">
							<view class="good-img">
								<image :src="itemt.cart_info.productInfo.image" mode=""></image>
							</view>
							<view class="good-infos">
								<view class="good-title clamp">{{ itemt.cart_info.productInfo.store_name }}</view>
								<view class="good-tag">{{ itemt.cart_info.productInfo.suk}}</view>
								<view class="num" style="display: inline-block;padding-left: 10rpx;">
									x{{ itemt.cart_info.cart_num }}
								</view>
								<view class="good-price">
									￥{{itemt.cart_info.productInfo.price}}
								</view>
							</view>

						</view>
						<view class="fh-btn-wrap" v-if="tabCurrentIndex != 3">
							<view class="fh-btn-tit">
								收货信息
							</view>
							<view class="fh-btn-info">
								<view class="">
									收货人：<text>{{item.real_name}}</text>
								</view>
								<view class="" v-if="item.shipping_type == 1">
									配送费：<text>￥{{(item.pay_postage_sh*1 + item.pay_postage*1) | getMoneyStyle}}</text>
								</view>
								<view class="">
									联系方式：<text>{{item.user_phone}}</text>
								</view>
								<view class="">
									{{item.shipping_type == 1?'配送时间': '自提时间'}}：<text>{{item.time_area || '暂无'}}</text>
								</view>
								<view class="" v-if="item.shipping_type == 1">
									收货地址：<text>{{ item.user_address}}</text>
								</view>
							</view>
							<view class="fh-btn" @click="delivery(item)" v-if="tabCurrentIndex == 0">
								送货
							</view>
						</view>
						<view class="fh-btn-wrap" v-if="tabCurrentIndex == 3">
							<view class="fh-btn-tit">
								购买信息
							</view>
							<view class="fh-btn-info">
								<view class="">
									购买人：<text>{{item.nickname}}</text>
								</view>
								<view class="">
									下单时间：<text>{{item.add_time}}</text>
								</view>
								<view class="" v-if="item.verify_time">
									核销时间：<text>{{item.verify_time | time}}</text>
								</view>
							</view>
						</view>
						<view class="fh-btn-wrap" v-if="tabCurrentIndex != 0 && item.shipping_type == 1">
							<view class="fh-btn-tit">
								送货信息
							</view>
							<view class="fh-btn-info">
								<view class="">
									送货人：<text>{{item.delivery_name}}</text>
								</view>

								<view class="">
									联系方式：<text>{{item.delivery_id}}</text>
								</view>
							</view>
						</view>
						<view class="fh-btn-wrap" v-if="item.shipping_type == 2 && item.point.name">
							<view class="fh-btn-tit">
								自提点信息
							</view>
							<view class="fh-btn-info">
								<view class="">
									自提点：<text>{{item.point.name}}</text>
								</view>
								<view class="">
									详细地址：<text>{{item.point.detailed_address}}</text>
								</view>
								<view class="">
									联系方式：<text>{{item.point.phone}}</text>
								</view>
							</view>
						</view>
					</view>
					<uni-load-more :status="loadingType"></uni-load-more>
				</scroll-view>
			</swiper-item>

		</swiper>

		<uni-popup ref="popuphx" class="agree-wrapper">
			<view class="hx-wrapper">
				<view class="hx-img">
					<image src="../../static/img/hxbg.png" mode=""></image>
				</view>
				<view class="hx-body">
					<!-- <template v-if="isAuto">
						<picker @change="bindPickerChange" :range="chooseList">
							<input type="text" v-model="shrname" placeholder="姓名: 请选择送货人"
								placeholder-class="hx-placeholder" disabled />
							<input type="text" v-model="shrphone" placeholder="手机号: 暂未选择送货人"
								placeholder-class="hx-placeholder" disabled />
						</picker>
					</template> -->
					<!-- <template v-if="!isAuto"> -->
					<picker @change="bindPickerChange" :range="chooseList">
						<view class="hx-btn" style="margin-top: 10rpx;margin-bottom: 20rpx;">
							下拉选择
						</view>
					</picker>

					<input type="text" v-model="shrname" placeholder="姓名: 请输入送货人" placeholder-class="hx-placeholder" />
					<input type="text" v-model="shrphone" placeholder="手机号: 请输入手机号"
						placeholder-class="hx-placeholder" />
					<!-- </template> -->

					<!-- <view class="hx-btn" @click="changeAuto" style="color: #901b21;background-color: #fff;border: 1px solid #901b21;">
						{{isAuto?'切换手动':'切换列表'}}
					</view> -->
					<view class="hx-btn" @click="qrsh">
						立即送货
					</view>

				</view>
				<view class="hx-close" @click="close">
					<image src="../../static/icon/close.png" mode=""></image>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	import {
		orderData,
		getUserInfo,
		getSpreadCount,
		bindAdmin,
		orderVerific,
		getAllList,
		getSHY
	} from '@/api/user.js';
	import {
		delivery,
		getAdminExchangeList
	} from '@/api/order.js';
	import {
		getMoneyStyle
	} from '@/utils/rocessor.js';
	import empty from '@/components/empty';
	import uniPopup from '@/components/uni-popup/uni-popup.vue'
	export default {
		components: {
			empty,
			uniPopup
		},
		onReady() {
			var obj = this;
			uni.getSystemInfo({
				success: resu => {
					const query = uni.createSelectorQuery();
					query.select('.swiper-box').boundingClientRect();
					query.exec(function(res) {
						console.log(res, 'ddddddddddddd');
						obj.height = resu.windowHeight - res[0].top + 'px';
						console.log('打印页面的剩余高度', obj.height);
					});
				},
				fail: res => {}
			});
		},
		filters: {
			getMoneyStyle,
			time(val) {
				let str = ''
				let obj = this

				function add0(m) {
					return m < 10 ? '0' + m : m
				}
				if (val) {
					let time = new Date(val * 1000);
					let y = time.getFullYear();
					let m = time.getMonth() + 1;
					let d = time.getDate();
					let h = time.getHours();
					let mm = time.getMinutes();
					let s = time.getSeconds();
					str = y + '-' + add0(m) + '-' + add0(d) + ' ' + add0(h) + ':' + add0(mm) + ':' + add0(s);
				}
				return str
			}
		},
		data() {
			return {
				isAuto: false,
				height: '',
				tabCurrentIndex: 0,
				navList: [{
						text: '待送货',
						status: 1,
						loadingType: 'more',
						page: 1,
						limit: 10,
						goodList: [],
						loaded: false
					},
					{
						text: '待收货',
						status: 2, //已支付，待收货
						loadingType: 'more',
						page: 1,
						limit: 10,
						goodList: [],
						loaded: false
					},
					{
						text: '已完成',
						status: 3,
						loadingType: 'more',
						page: 1,
						limit: 10,
						goodList: [],
						loaded: false
					},
					{
						text: '兑换券',
						status: 1,
						loadingType: 'more',
						page: 1,
						limit: 10,
						goodList: [],
						loaded: false
					}
				],
				// loadingType: 'more',
				// page: 1,
				// limit: 40,
				// goodList: [],
				shrname: '',
				shrphone: '',
				choosItem: {
					order_id: 0
				},
				shrList: [],
				chooseList: []
			}
		},
		onLoad() {
			this.loadData()
			this.getSHY()
		},
		methods: {
			changeAuto() {
				this.isAuto = !this.isAuto
			},
			//swiper 切换
			changeTab(e) {
				this.tabCurrentIndex = e.target.current;
				this.loadData('tab');
			},
			//swiper 切换
			changeTab(e) {
				this.tabCurrentIndex = e.target.current;
				this.loadData('tab');
			},
			//顶部tab点击
			tabClick(index) {
				this.tabCurrentIndex = index;
				this.loadData('tab');
			},
			bindPickerChange(e) {
				console.log(e.detail.value)
				this.shrname = this.shrList[e.detail.value].name
				this.shrphone = this.shrList[e.detail.value].phone
			},
			getSHY() {
				getSHY().then(({
					data
				}) => {
					// console.log(res)
					this.shrList = data.data
					console.log(this.shrList, 'this.shrList')
					this.shrList.forEach(e => {
						this.chooseList.push(e.name)
					})
				})
			},
			// 立即送货
			qrsh() {
				let obj = this
				delivery({
					order_id: obj.choosItem.order_id,
					delivery_type: 'send',
					delivery_name: obj.shrname,
					delivery_id: obj.shrphone,
				}).then(res => {
					console.log(res, '发货成功')
					uni.showToast({
						title: '发货成功',
						duration: 2000
					});
					let s = obj.navList[obj.tabCurrentIndex].goodList.indexOf(obj.choosItem);
					obj.navList[obj.tabCurrentIndex].goodList.splice(s, 1);
					obj.close()
				})

			},
			// 关闭弹窗
			close() {
				this.$refs.popuphx.close()
			},
			// 保存发货订单信息
			delivery(item) {
				// this.choosItem = item
				this.$set(this, 'choosItem', item)
				this.$refs.popuphx.open()
			},
			loadData(tab) {
				let obj = this
				let index = obj.tabCurrentIndex
				let navItem = obj.navList[index]
				if (navItem.loadingType == 'loading') {
					return
				}
				if (navItem.loadingType == 'noMore') {
					return
				}
				if (tab == 'tab' && navItem.loaded) {
					return
				}
				navItem.loadingType = 'loading'
				if (index == 3) {
					getAdminExchangeList({
						status: navItem.status,
						limit: navItem.limit,
						page: navItem.page
					}).then(({
						data
					}) => {
						navItem.page++
						navItem.goodList = navItem.goodList.concat(data)
						console.log(data.length)
						if (navItem.limit == data.length) {
							navItem.loadingType = 'more'
							// return
						} else {
							navItem.loadingType = 'noMore'
						}
						obj.$set(navItem, 'loaded', true)
					})
				} else {
					getAllList({
						status: navItem.status,
						limit: navItem.limit,
						page: navItem.page
					}).then(({
						data
					}) => {
						navItem.page++
						navItem.goodList = navItem.goodList.concat(data)
						console.log(data.length)
						if (navItem.limit == data.length) {
							navItem.loadingType = 'more'
							// return
						} else {
							navItem.loadingType = 'noMore'
						}
						obj.$set(navItem, 'loaded', true)
					})
				}

			},
		}
	}
</script>

<style lang="scss" scoped>
	.good {
		width: 702rpx;

		// height: 304rpx;
		background: #ffffff;
		box-shadow: 0px 0px 20px 0px rgba(50, 50, 52, 0.06);
		border-radius: 10rpx;
		padding: 0 30rpx 20rpx;
		margin: 0 auto 20rpx;
		position: relative;

		.good-top {
			height: 85rpx;
			font-size: 24rpx;
			font-weight: 400;
			color: #666666;
			line-height: 85rpx;
			display: flex;
			justify-content: space-between;

			.top-status {
				font-size: 28rpx;
				font-weight: 500;
				color: #EF041F;
			}
		}

		.goods-buttom {
			height: 160rpx;
			margin-bottom: 10rpx;
			display: flex;
			position: relative;

			.good-img {
				width: 160rpx;
				height: 160rpx;

				// overflow: hidden;
				image {
					width: 160rpx;
					height: 160rpx;
				}
			}

			.good-title {
				width: 350rpx;
				padding-top: 6rpx;
				font-size: 26rpx;
				font-weight: 500;
				color: #3F454B;
				line-height: 1;
				padding-left: 10rpx;
			}

			.shop-info {
				padding-top: 11rpx;
				font-size: 24rpx;
				font-weight: 500;
				color: #DCB876;
				line-height: 1;

				// padding-left: 10rpx;
				image {
					width: 24rpx;
					height: 24rpx;
					margin-left: 14rpx;
					margin-right: 4rpx;
				}
			}

			.good-tag {
				display: inline-block;
				height: 36rpx;
				background: #ffeee9;
				// opacity: 0.2;
				border-radius: 5rpx;
				font-size: 20rpx;
				font-weight: 500;
				color: #F23030;
				padding: 0 9rpx;
				line-height: 36rpx;
				margin-top: 15rpx;
				margin-left: 10rpx;
			}

			.num {
				// position: absolute;
				// top: 10rpx;
				// right: 10rpx;
				color: #999999;
				font-size: 24rpx;
			}

			.good-price {
				display: inline-block;
				position: absolute;
				top: 5rpx;
				right: 10rpx;
				color: #999999;
				font-size: 24rpx;
			}

		}

		.fh-btn-wrap {
			display: flex;
			// height: 55rpx;
			flex-direction: column;
			// justify-content: flex-end;
			// width: ;
			font-size: 28rpx;
			color: #999999;

			.fh-btn-tit {
				color: #000000;
				font-weight: bold;
			}

			.fh-btn-info {
				padding-left: 20rpx;
			}

			.fh-btn {
				margin-top: 10rpx;
				align-self: flex-end;
				width: 144rpx;
				height: 55rpx;
				border: 1px solid #901b21;
				border-radius: 28rpx;
				font-size: 26rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #901b21;
				line-height: 55rpx;
				text-align: center;
			}
		}

		.good-hj {
			line-height: 1;
			height: 26rpx;
			font-size: 26rpx;
			font-weight: 500;
			color: #333333;
			text-align: right;
		}

		.good-num {
			text-align: left;
			font-size: 26rpx;
			font-weight: 500;
			line-height: 1;
			color: #333333;
			position: absolute;
			right: 31rpx;
			top: 136rpx;
		}
	}

	.hx-wrapper {
		width: 536rpx;
		height: 700rpx;
		position: relative;

		background-color: #fff;
		border-radius: 20rpx;

		.hx-img {
			width: 536rpx;
			height: 281rpx;

			image {
				width: 536rpx;
				height: 281rpx;
			}
		}

		.sr-btn {
			margin-top: 20rpx;
			display: inline-block;
			// width: 200rpx;
			padding: 0 10rpx;
			height: 50rpx;
			line-height: 50rpx;
			border-radius: 20rpx;
			border: 1px solid #901b21;
			font-size: 28rpx;
		}

		.hx-close {
			position: absolute;
			left: 243rpx;
			bottom: -80rpx;
			width: 52rpx;
			height: 52rpx;

			image {
				width: 52rpx;
				height: 52rpx;
			}
		}

		.hx-body {
			width: 536rpx;
			height: 349rpx;
			background-color: #fff;
			border-radius: 0 0 10rpx 10rpx;
			padding-top: 20rpx;

			.hx-title {
				width: 536rpx;
				font-size: 36rpx;
				font-weight: 500;
				color: #333333;
				line-height: 1;
				padding-top: 42rpx;
				text-align: center;
			}

			input {
				width: 439rpx;
				height: 68rpx;
				background: #eeddde;
				border-radius: 10rpx;
				margin: 0 auto 39rpx;
				padding-left: 26rpx;

				.hx-placeholder {
					font-size: 26rpx;
					font-weight: 500;
					color: #901b21;
				}
			}

			.hx-btn {
				margin: 20rpx auto 0;
				width: 353rpx;
				height: 71rpx;
				background: #901b21;
				border-radius: 34rpx;
				font-size: 36rpx;
				font-weight: 500;
				color: #F8F9F9;
				line-height: 71rpx;
				text-align: center;
			}


		}
	}

	.navbar {
		display: flex;
		height: 40px;
		padding: 0 5px;
		background: #fff;
		box-shadow: 0 1px 5px rgba(0, 0, 0, 0.06);
		position: relative;
		z-index: 10;

		.nav-item {
			flex: 1;
			display: flex;
			justify-content: center;
			align-items: center;
			height: 100%;
			font-size: 15px;
			color: $font-color-dark;
			position: relative;

			&.current {
				color: $base-color;

				&:after {
					content: '';
					position: absolute;
					left: 50%;
					bottom: 0;
					transform: translateX(-50%);
					width: 44px;
					height: 0;
					border-bottom: 2px solid $base-color;
				}
			}
		}
	}
</style>