mnsx/user/page/myex.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="getMyex()">
					<empty v-if="tabItem.loaded && tabItem.list.length === 0"></empty>
					<view class="order-item" v-for="i in tabItem.list" :key="i.id">
						<view class="i-td">
							<view class="td-left">订单编号：{{ i.order_id }}</view>
							<view class="td-right" v-if="i.status == 0" style="color: #901b21;font-weight: bold;">未使用
							</view>
							<view class="td-right" v-if="i.status == 1">已使用</view>
						</view>
						<view class="goods-box">
							<view class="goods-left flex">
								<image class="goods-img"
									:src="i.cart_info.productInfo.image || '../../static/error/errorImage.jpg'"></image>
								<view class="goods-name">
									<view class="p clamp2">{{ i.cart_info.productInfo.store_name }}</view>
								</view>
							</view>
							<view class="goods-price">
								<!-- <view class="">￥{{ price(i.price) }}</view> -->
								<!-- <view class="num">x{{ item.cart_num }}</view> -->
								<br />
							</view>
						</view>
						<view class="i-td">
							<view class="td-left"></view>
							<view class="i-bottom clamp" v-if="i.gift_uid == userInfo.uid">由{{i.user.nickname}}赠送</view>
							<view class="i-bottom clamp" v-if="i.gift_uid != 0 && i.gift_uid !== userInfo.uid"
								style="font-size: 28rpx; color: #999;">已赠送给{{i.gift_user.nickname}}</view>
							<view class="i-bottom" style="">
								<text>合计 ￥{{ i.pay_price*1  + i.deposit*1}}</text>
							</view>
						</view>
						<view class="btn-box">
							<!-- 				<view class="clamp" style="font-size: 28rpx; color: #999;" v-if="i.gift_uid == userInfo.uid">由{{i.user.nickname}}赠送</view>
							<view class="clamp" v-if="i.gift_uid != 0 && i.gift_uid !== userInfo.uid" style="font-size: 28rpx; color: #999;">已赠送给{{i.gift_user.nickname}}</view> -->
							<view class="btn" @click.stop="showCode(i)"
								v-if="i.status == 0 && i.gift_uid == userInfo.uid">出示券码
							</view>
							<view class="btn" @click.stop="showCode(i)" v-if="i.status == 0 && i.gift_uid == 0">出示券码
							</view>
							<view class="btn" @click.stop="shareF(i)" v-if="i.status == 0 && i.gift_uid == 0">赠送好友
							</view>
						</view>
					</view>
				</scroll-view>
			</swiper-item>
		</swiper>

		<!-- <uni-load-more :status="loadingType"></uni-load-more>
		<uni-popup ref="popuphx" class="agree-wrapper">

		</uni-popup> -->
	</view>
</template>

<script>
	import uniLoadMore from '@/components/uni-load-more/uni-load-more.vue';
	import empty from '@/components/empty';
	import {
		orderList,
		orderGive,
		getUserList,
		getMyexchange
	} from '../../api/order.js'
	import uniPopup from '@/components/uni-popup/uni-popup.vue'
	import {
		mapState,
		mapMutations
	} from 'vuex';
	export default {
		components: {
			uniLoadMore,
			empty,
			uniPopup
		},
		computed: {
			...mapState('user', ['userInfo']),
			canPut() {
				return this.chooseuser == '' ? false : true
			}
		},
		data() {
			return {
				height: '',
				tabCurrentIndex: 0,
				navList: [{
						type: 0,
						text: '未使用',
						list: [],
						page: 1,
						limit: 10,
						loadingType: 'more',
						loaded: false,
					},
					{
						type: 1,
						text: '已使用',
						list: [],
						page: 1,
						limit: 10,
						loadingType: 'more',
						loaded: false,
					}, {
						type: 9,
						text: '已送出',
						list: [],
						page: 1,
						limit: 10,
						loadingType: 'more',
						loaded: false,
					}
				],
				list: [],
				page: 1,
				limit: 10,
				loadingType: 'more',
				loaded: false,
				toname: '',
				jzUid: '',
				wxId: '',
				// userList: [],
				// canPut: false,//是否可转
				showList: [],
				userList: [],
				chooseuser: '',
				userData: {},
				userLoaded: false
			}
		},
		onShow() {
			this.getMyex()
			// this.getUserList()
		},
		// onReachBottom() {
		// 	this.getMyex()
		// },
		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 => {}
			});
		},
		methods: {
			//swiper 切换
			changeTab(e) {
				this.tabCurrentIndex = e.target.current;
				this.getMyex('tab');
			},
			//swiper 切换
			changeTab(e) {
				this.tabCurrentIndex = e.target.current;
				this.getMyex('tab');
			},
			//顶部tab点击
			tabClick(index) {
				this.tabCurrentIndex = index;
				this.getMyex('tab');
			},
			getUserList() {
				let obj = this
				getUserList({
					keyword: obj.toname
				}).then(res => {
					console.log(res, 'userList')

					this.showList = []
					this.chooseuser = ''
					this.userData = {}
					this.userList = res.data
					this.userLoaded = true
					res.data.forEach(item => {
						this.showList.push('ID：' + item.uid + ',昵称：' + item.nickname)
					})
				})
			},
			price(price) {
				return (price * 1).toFixed(2);
			},
			getMyex(tab) {
				let obj = this
				let index = obj.tabCurrentIndex
				let navItem = obj.navList[index]
				if (navItem.loadingType == 'loading' || navItem.loadingType == 'noMore') {
					return
				}
				if(tab == 'tab' && navItem.loaded ) {
					return
				}
				navItem.loadingType = 'loading'
				getMyexchange({
					// type: 10086,
					page: navItem.page,
					limit: navItem.limit,
					type: navItem.type
				}).then(({
					data
				}) => {
					navItem.list = navItem.list.concat(data)
					navItem.page++
					if (data.length == navItem.limit) {
						navItem.loadingType = 'more'
						return
					} else {
						navItem.loadingType = 'noMore'
					}
					obj.$set(navItem, 'loaded', true)
				})
			},
			showCode(e) {
				uni.navigateTo({
					url: '/pages/order/verifyCode?id=' + e.order_id + '&type=exchange' + '&vcode=' + e.verify_code
				})
			},
			shareF(e) {
				console.log(e)
				let obj = this
				this.wxId = e.order_id
				uni.navigateTo({
					url: '/user/page/shareEx?shareid=' + e.id + '&scene=' + obj.userInfo.uid + '&logo=' + obj
						.userInfo.avatar + '&nickname=' + obj.userInfo.nickname + '&goodimg=' + e.cart_info
						.productInfo.image + '&type=1'
				})
				// this.$refs.popuphx.open()

				// orderGive({

				// },e.cartInfo[0].product_attr_unique).then(res => {
				// 	console.log(res)
				// })
			},
			qhx() {
				let obj = this
				if (obj.userData == '') {
					obj.$api.msg('请选择好友')
					return
				}
				orderGive({
					uid: obj.userData.uid
				}, this.wxId).then(res => {
					console.log(res)
					console.log()
					obj.$refs.popuphx.close()
					uni.showToast({
						title: '赠送成功',
						duration: 2000
					});
					obj.page = 1
					obj.list = []
					obj.loadingType = 'more'
					obj.getMyex()
				})
			},
			close() {
				this.$refs.popuphx.close()
				this.jzUid = ''
				this.wxId = ''
			},
			PickerDire(e) {
				console.log(e, 'xuan')
				this.chooseuser = this.showList[e.detail.value]
				this.userData = this.userList[e.detail.value]
			}
		}
	}
</script>

<style lang="scss" scoped>
	page {
		height: 100%;
	}
	.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;
				}
			}
		}
	}

	.swiper-box,
	.tab-content,
	.scroll-y {
		height: calc(100vh - 44px);
	}

	.order-item {
		display: grid;
		margin-bottom: 20rpx;
	}

	.btn-box {
		border-top: 1px solid #f2f2f2;
		height: 100rpx;
		width: 100%;
		padding-right: 20rpx;
		background-color: #ffffff;
		display: flex;
		justify-content: flex-end;
		align-items: center;

		.btn {
			margin-left: 10rpx;
			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;
		}

		.btn-look {
			margin-left: 10rpx;
			width: 144rpx;
			height: 55rpx;
			border: 1px solid #ebebeb;
			border-radius: 28rpx;
			font-size: 26rpx;
			font-family: PingFang SC;
			font-weight: 500;
			color: #999999;
			line-height: 55rpx;
			text-align: center;
		}
	}

	.i-td {
		display: flex;
		justify-content: space-between;
		background-color: #ffffff;
		padding: 20rpx;
		color: #999999;
		font-size: 25rpx;

		.i-bottom {
			span {
				margin: 0 10rpx;

				b {
					font-size: 28rpx;
					color: #4f4f4f;
				}
			}
		}
	}

	.goods-box {
		height: 100%;
		display: flex;
		justify-content: space-between;
		background-color: #f7f7f7;
		padding: 20rpx;

		.goods-left {
			align-items: flex-start;

			.goods-img {
				width: 160rpx;
				height: 160rpx;
			}

			.goods-name {
				margin: 10rpx 40rpx;
				color: #666666;
				font-size: 30rpx;

				.p {
					max-width: 300rpx;
					margin-bottom: 10rpx;
				}

				.span {
					width: 120rpx;
					background-color: #ffeae5;
					color: #fd5b23;
					text-align: center;
					font-size: 24rpx;
					padding: 5rpx;
					border-radius: 5rpx;
				}
			}
		}

		.goods-price {
			margin: 10rpx 0;
			text-align: right;
			display: grid;
			color: #999999;
			font-size: 24rpx;
			position: relative;

			b {
				color: #901b21;
				font-size: 35rpx;
			}

			.num {
				position: absolute;
				bottom: 20rpx;
				right: 10rpx;
			}
		}
	}

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

		// background-color: #fff;
		.hx-img {
			width: 536rpx;
			height: 281rpx;

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

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

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

		.hx-body {
			width: 536rpx;
			height: 300rpx;
			background-color: #fff;
			border-radius: 0 0 10rpx 10rpx;

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

			.choose-user {
				width: 439rpx;
				margin: 20rpx auto 0;
			}

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

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

			.hx-btn {
				margin: 44rpx 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;
			}

			.action {
				background: #999
			}


		}
	}
</style>