stx/pages/user/userCard.vue

<template>
	<view class="content">
		<view class="flex nav-list">
			<view class="item" v-for="(item,index) in navList" :class="{'action': current == index}"
				@click="changeNavT(index)">
				{{item.tit}}
			</view>
		</view>
		<swiper  class="good-content" :style="{'height':height }" :current="current">
			<swiper-item v-for="item in navList" :style="{'height':height }">
				<scroll-view scroll-y="true" :style="{'height':height }" @scrolltolower="getList">
					<view class="dyquan-wrap" v-for="(itemt,index) in item.list" :key="index">
						<view class="showtime">
							<text class="float_left order-no-text">{{ itemt.verify_code|| '' }}</text>
						</view>
						<view class="item-info">
							<image src="../../static/img/tyq.png" mode=""></image>
							<view class="info-info">
								<view class="clamp2">
									太空舱体验券
								</view>
								<view class="clamp2">
									X1
								</view>
							</view>
						</view>
						<view class="btm">
							<view v-if="itemt.status == 0 && itemt.source_uid == 0" class="btn" @click="giveFriend(itemt.id)">
								转赠好友
							</view>
							<view v-if="itemt.status == 0 && itemt.source_uid != userInfo.uid" class="btn btn-2"  @click="navto(itemt.verify_code)">
								立即使用
							</view>
							
						</view>
					</view>
					<uni-load-more v-if="!(item.list == 0 && item.loaded)" :status="item.loadingType"></uni-load-more>
					<empty v-else></empty>
				</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">
					
					<view class="hx-title">
						接收人UID
					</view>
					<input type="text" v-model="code" placeholder="请输入接收人UID" placeholder-class="hx-placeholder" />
					<view class="hx-btn" @click="qhx">
						赠送
					</view>
				</view>
				<view class="hx-close" @click="close">
					<image src="../../static/icon/close.png" mode=""></image>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	import {
		mapState,
		mapMutations
	} from 'vuex';
	import { getUserCard,giveCard} from '@/api/user.js'
	
	import empty from '@/components/empty';
	export default {
		components: {
			empty
		},
		data() {
			return {
				code: '',
				give_id: 0,
				height: '',
				current: 0,
				navList: [
					{
						status: -1,
						tit: '全部',
						list: [],
						page: 1,
						limit: 10,
						loaded: false,
						loadingType: 'more'
					},{
					status: 0,
						tit: '待使用',
						list: [],
						page: 1,
						limit: 10,
						loaded: false,
						loadingType: 'more'
					},
					{
						status: 1,
						tit: '已使用',
						list: [],
						page: 1,
						limit: 10,
						loaded: false,
						loadingType: 'more'
					},
					
				]
			}
		},
		onLoad() {
			
		},
		computed: {
			...mapState('user', ['userInfo', 'orderInfo', 'hasLogin']),
		},
		onShow() {
			console.log('ddd ')
			this.getList('re')
		},
		onReachBottom() {

		},
		onReady(res) {
			var that = this;
			uni.getSystemInfo({
				success: resu => {
					const query = uni.createSelectorQuery();
					query.select('.good-content').boundingClientRect();
					query.exec(function(res) {
						that.height = resu.windowHeight - res[0].top + 'px';
					});
				},
				fail: res => {}
			});
		},
		methods: {
			qhx() {
				if(!this.code) {
					return this.$api.msg('请输入接收人UID')
				}
				if(this.code == this.userInfo.uid) {
					return this.$api.msg('接收人不能为自己')
				}
				console.log(this.give_id)
				giveCard({
					id: this.give_id,
					to_uid:this.code
				}).then(res => {
					uni.showToast({
						icon:'success',
						title:'赠送成功'
					})
					this.close()
					this.getList('re')
					
				})
			},
			close() {
				this.code = ''
				this.give_id = ''
				this.$refs.popuphx.close()
			},
			navto(val) {
				uni.navigateTo({
					url: '/pages/user/hxqm?val=' + val
				})
			},
			giveFriend(id) {
				console.log(id)
				this.give_id = id
				this.$refs.popuphx.open()
			},
			changeNavT(index) {
				if (index == this.current) {
					return
				}
				this.current = index
				this.getList('re')
			},
			getList(type) {
				let that = this
				let item = that.navList[that.current]
				if(type == 're') {
					item.page = 1
					item.list = []
					item.loaded = false
					item.loadingType = 'more'
				}
				if(item.loadingType == 'loading' || item.loadingType == 'noMore') {
					return
				}
				item.loadingType = 'loading'
				getUserCard({
					uid: that.userInfo.uid,
					page: item.page,
					limit: item.limit,
					status: item.status
				}).then(res => {
					let arr = res.data.list
					item.list = item.list.concat(arr)
					if(item.limit == arr.length) {
						item.loadingType = 'more'
						item.page++
					}else {
						item.loadingType = 'noMore'
					}
					item.loaded = true
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.nav-list {
		justify-content: space-around;
		background-color: #fff;
		font-weight: 500;
		color: #333333;

		.item {
			padding: 28rpx 20rpx 16rpx;

		}

		.action {
			color: #333;
			font-weight: bold;
			border-bottom: 2px solid $base-color;
		}
	}
	.dyquan-wrap {
		padding: 20rpx;
		background-color: #fff;
		margin-bottom: 15rpx;
		.showtime {
			height: 50rpx;
		}
		.item-info {
			width: 750rpx;
			height: 205rpx;
			background: #F7F7F7;
			display: flex;
			justify-content: flex-start;
			align-items: center;
			
			image {
				width: 160rpx;
				height: 160rpx;
				margin-right: 30rpx;
			}
	
			.info-info {
				height: 160rpx;
				padding: 15rpx 0;
				padding-right: 50rpx;
				font-size: 30rpx;
				font-weight: 500;
				color: #666666;
				display: flex;
				flex-direction: column;
				justify-content: space-between;
				align-items: flex-start;
				.info-cs {
					font-size: 26rpx;
					font-weight: 500;
					color: #999999;
				}
			}
		}
		.btn-list {
			
		}
	
		.btm {
			width: 100%;
			height: 95rpx;
			background-color: #fff;
			display: flex;
			justify-content: flex-end;
			align-items: center;
	
			.btn {
				width: 144rpx;
				height: 55rpx;
				border-radius: 28rpx;
				font-size: 26rpx;
				font-weight: 500;
				color:$base-color;
				line-height: 55rpx;
				text-align: center;
				border: 1px solid $base-color;
			}
			.btn-2 {
				background-color: $base-color;color: #fff;
				margin-left: 15rpx;
			}
		}
	}
	.hx-wrapper {
		width: 536rpx;
		// height: 630rpx;
		position: relative;
		padding-bottom: 40rpx;
		background-color: #fff;
		border-radius: 20rpx;
	
		.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;
			// min-height: 349rpx;
			background-color: #fff;
			border-radius: 0 0 10rpx 10rpx;
			padding-top: 40rpx;
	
			.hx-title {
				width: 536rpx;
				font-size: 36rpx;
				font-weight: 500;
				color: #333333;
				line-height: 1;
				padding-top: 20rpx;
				text-align: center;
				padding-bottom: 20rpx;
			}
	
			input {
				width: 439rpx;
				height: 68rpx;
				background: #f1faf6;
				border-radius: 10rpx;
				margin: 0 auto 40rpx;
				padding-left: 26rpx;
	
				.hx-placeholder {
					font-size: 26rpx;
					font-weight: 500;
					color: $base-color;
				}
			}
	
			.hx-btn {
				margin: 44rpx auto 0;
				width: 353rpx;
				height: 71rpx;
				background: $base-color;
				border-radius: 34rpx;
				font-size: 36rpx;
				font-weight: 500;
				color: #F8F9F9;
				line-height: 71rpx;
				text-align: center;
			}
	
	
		}
	}
</style>