cgst/pages/user/myyhq.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="shop-dhq flex" v-for="qitem in tabItem.list">
						<view class="dhq-left flex f-d-c f-j-c fg1 f-ai-s">
							<view class="dhq-name">{{ qitem.product_info.store_name }}</view>
							<view class="dhq-price flex">
								<view class="j-price">{{ qitem.product_info.price * 1 }}</view>
							</view>
							<!-- <view class="store-name">商家：{{ qitem.name }}</view> -->
						</view>
						<view class="dhq-right fs0 flex f-d-c f-j-sa">
							<view class="right-btn" @click.stop="userNow(qitem)" v-if="tabCurrentIndex == 0">立即使用</view>
							<view class="right-btn" @click.stop="shareF(qitem)" v-if="tabCurrentIndex == 0">转赠好友</view>
							<view class="right-btn ysy" v-if="tabCurrentIndex == 1">已使用</view>
							<view class="right-btn ysy" v-if="tabCurrentIndex == 2">已过期</view>
						</view>
					</view>
				</scroll-view>
			</swiper-item>
		</swiper>
	</view>
</template>

<script>
import empty from '@/components/empty';
import { mapState, mapMutations } from 'vuex';
import { getMyYhq } from '@/api/user.js';
export default {
	components: {
		empty
	},
	data() {
		return {
			height: '',
			tabCurrentIndex: 0,
			order_id: '',
			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: 2,
					text: '已转赠',
					list: [],
					page: 1,
					limit: 10,
					loadingType: 'more',
					loaded: false
				}
			]
		};
	},
	onLoad(option) {
		this.order_id = option.order_id;
	},
	onShow() {
		this.getMyex();
	},
	onReachBottom() {},
	computed: {
		...mapState('user', ['hasLogin', 'userInfo'])
	},
	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: {
		// 立即使用
		userNow(item) {
			uni.navigateTo({
				url: '/pages/user/djqQm?id=' + item.id
			});
		},
		// 分享好友
		shareF(item) {
			uni.navigateTo({
				url: '/pages/user/shareF?id=' + item.id + '&nickname=' + encodeURI(item.product_info.store_name)
				// item.code +
				// '&type=1' +
				// '&logo=' +
				// this.userInfo.avatar +
				// '&nickname=' +
				// encodeURI(this.userInfo.nickname) +
				// '&goodname=' +
				// encodeURI(item.coupon_title)
			});
		},
		//swiper 切换
		changeTab(e) {
			this.tabCurrentIndex = e.target.current;
			this.getMyex('tab');
		},
		//顶部tab点击
		tabClick(index) {
			this.tabCurrentIndex = index;
			this.getMyex('tab');
		},
		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';
			getMyYhq({
				order_id: obj.order_id,
				page: navItem.page,
				limit: navItem.limit,
				status: navItem.type
			}).then(({ data }) => {
				navItem.list = navItem.list.concat(data.list);
				navItem.page++;
				if (data.list.length == navItem.limit) {
					navItem.loadingType = 'more';
					return;
				} else {
					navItem.loadingType = 'noMore';
				}
				obj.$set(navItem, 'loaded', true);
			});
		}
	}
};
</script>

<style lang="scss" scoped>
.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;
			}
		}
	}
}

.shop-dhq {
	width: 702rpx;
	// height: 171rpx;
	box-shadow: 0px 0px 20rpx 0px rgba(50, 50, 52, 0.15);
	margin: auto;
	border-radius: 20rpx;
	background-color: #fff;
	padding: 0 20rpx 0 26rpx;
	margin-bottom: 20rpx;

	.dhq-left {
		.dhq-name {
			font-size: 33rpx;
			font-weight: bold;
			color: #333333;
		}

		.store-name {
			padding-left: 20rpx;
			font-size: 24rpx;
			font-weight: bold;
		}

		.dhq-price {
			padding-top: 20rpx;
			padding-left: 20rpx;

			.j-price {
				font-size: 38rpx;
				font-weight: bold;
				color: #ff4c4c;

				&::before {
					content: '￥';
					font-size: 24rpx;
					color: #ff4c4c;
				}
			}

			.j-zk {
				display: inline-block;
				margin-left: 10rpx;
				line-height: 32rpx;
				height: 32rpx;
				border: 1px solid #ff4c4c;
				border-radius: 5rpx;
				font-size: 22rpx;
				font-weight: 500;
				color: #ff4c4c;
				padding: 0 8rpx;
			}
		}
	}

	.dhq-right {
		// height: 80%;
		min-height: 171rpx;

		.right-btn {
			// width: 105rpx;
			display: inline-block;
			padding: 0 10rpx;
			line-height: 56rpx;
			background: linear-gradient(143.2747deg, #ff6a00, #ee0979);
			border: 1rpx solid #ff4c4c;
			border-radius: 27rpx;
			text-align: center;
			color: #fff;
			font-size: 28rpx;
			font-weight: bold;
		}

		.ysy {
			background: #999;
			border: none;
			padding: 0 20rpx;
		}
	}
}
</style>