newXLSC/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.coupon_title}}
							</view>
							<view class="dhq-price flex">
								<view class="j-price">
									{{qitem.coupon_price}}
								</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,
				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() {

		},
		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/shop/djqQm?code=' + item.code
				})
			},
			// 分享好友
			shareF(item) {
				uni.navigateTo({
					url: '/pages/shop/shareF?code=' + 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({
					page: navItem.page,
					limit: navItem.limit,
					status: 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)
				})
			},
		}
	}
</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>