xhq/pages/index/zero.vue

<template>
	<view class="" style="padding-top: 20rpx;">
		<view class="flex center-box ">
			<!-- <view class="flex center-item" @click="navto('/pages/user/xzdl?type=2')">
				<view class="val">
					1000
				</view>
				<view class="name">我的消费包</view>
			</view>
			<view class="line">
			</view> -->
			<view class="flex center-item" @click="navto('/pages/zero/gfz')">
				<view class="val" v-if="pUser.zero_level">
					{{pUser.zero_level.name || 0}}
				</view>
				<view class="name">我的持包值</view>
			</view>
			<view class="line">
			</view>
			<view class="flex center-item" >
				<view class="val">
					{{pUser.pass || 0}}
				</view>
				<view class="name">我的通证</view>
			</view>
		</view>
		<view class="flex banne">
			<image src="../../static/img/zjf.png" mode="" @click="navto('/pages/zero/task')"></image>
			<image src="../../static/img/yj.png" mode="" @click="navto('/pages/index/dkf')"></image>
		</view>
		<view class="flex nav">
			<view class="nav-item" v-for="(item,index) in navList" :class="{'action': current == index}"
				@click="changeTab(index)">
				{{item.tit}}
			</view>
		</view>
		<swiper disable-touch :current="current" class="list-wrap" :style="{'height': maxHeight}">
			<swiper-item :style="{'height': maxHeight}" v-for="item in navList">
				<scroll-view scroll-y="true" class="" :style="{'height': maxHeight}" :class="{'p2':current == 1}" @scrolltolower="getMore(item.status)">
					<view class="card-wrap flex" v-for="cardItem in item.list" v-if="item.status == 1">
						<image :src="cardItem.image" mode="" class="card-img"></image>
						<view class="flex card-info">
							<view class="name ">
									{{cardItem.name}}
							</view>
							<view class="" style="padding-right: 10rpx;">
								周期{{cardItem.end_day || 0}}天，每日产出数量{{cardItem.day_pass || 0}},共富值+{{cardItem.holding_value || 0}}.最多可持有{{cardItem.max_count}}个
							</view>
							<view class="price">
								<image src="../../static/icon/ydjf.png" mode=""></image>
								<text class="show">{{cardItem.pay_points}}</text> 阅读积分 <text > （有效期{{cardItem.max_send ||0}})</text>
							</view>
						</view>
						<view class="card-btn" :class="{'buyless': cardItem.activate == 0}" @click="open(cardItem)">
							立即兑换
						</view>
						<view class="card-nun" v-if="cardItem.total">
							进行中：{{cardItem.progress}}/{{cardItem.total}}
						</view>
					</view>
					<view class="px-wrap flex" v-if="item.status == 2">
						<view class="nav-item" :class="{ current: filterIndex === 0 }" @click="tabClick(0)">默认</view>
						
						<view class="nav-item" :class="{ current: filterIndex === 2 }" @click="tabClick(2)">
							<text>单价</text>
							<view class="p-box">
								<text :class="{ active: priceOrder === 1 && filterIndex === 2 }" class="iconfont iconfold"></text>
								<text :class="{ active: priceOrder === 2 && filterIndex === 2 }" class="iconfont iconfold xia"></text>
							</view>
						</view>
						<view class="nav-item" :class="{ current: filterIndex === 1 }" @click="tabClick(1)">
							<text>数量</text>
							<view class="p-box">
								<text :class="{ active: numberOrder === 1 && filterIndex === 1 }" class="iconfont iconfold"></text>
								<text :class="{ active: numberOrder === 2 && filterIndex === 1 }" class="iconfont iconfold xia"></text>
							</view>
						</view>
					</view>
					<view class="order-wrap " v-for="orderItem in item.list" v-if="item.status == 2">
						<view class="flex m-info">
							<image src="../../static/icon/gs-av.png" mode="" class="card-img"></image>
							<text style=" display: inline-block;line-height: 55rpx;">{{orderItem.user.nickname}}</text>
						</view>
						<view class="price">
							￥{{orderItem.total_price}}
						</view>
						<view class="num">
							数量:{{orderItem.amount}}
						</view>
						<view class="num">
							{{ getTime(orderItem.add_time)}}
						</view>
						<view class="order-btn" @click="gobuy(orderItem)">
							立即购买
						</view>
					</view>
					<uni-load-more :status="item.loadingType"></uni-load-more>
				</scroll-view>
			</swiper-item>
		</swiper>
		<uni-popup ref="popup" type="bottom" @change="popChange">
			<view class="" style="padding-bottom: 50px;background-color: #fff;">
				<view class="a-t">
					<image :src="buyItem.image"></image>
					<view class="right">
						<view class="good-name clamp">{{buyItem.name}}</view>
						<text class="price">{{ buyItem.pay_points*1* goodsNumber }}</text>
					</view>
				</view>
				<view class="attr-list" style="padding-bottom:40rpx;">
					<text>兑换数量</text>
					<view class="item-list">
						<uni-number-box class="step" :isMin="true" :value="goodsNumber" :min="1" :max="goodsNumberMax"
							@eventChange="numberChange"></uni-number-box>
					</view>
				</view>
				<button class="btn" @click.stop="createPass">确定</button>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	import {
		mapState,
		mapMutations
	} from 'vuex';
	
	import uniNumberBox from '@/components/uni-number-box.vue';
	
	import {
		saveUrl,
		interceptor
	} from '@/utils/loginUtils.js';
	import {
		getUserInfo,
		userPool,
		goft
	} from '@/api/user.js';
	import { getCardList,createPass, getGsList,passUser,buyGs } from '@/api/zero.js'
	
	export default {
		components: {
			uniNumberBox
		},
		data() {
			return {
				pUser: {},
				order: 'id asc',
				buyItem: {},//购买卡包信息
				filterIndex: 0,
				priceOrder: 0, //1 价格从低到高 2价格从高到低
				numberOrder: 0, //1 销量从低到高 2销量从高到低
				actionPrice: 100,
				goodsNumber: 1,
				goodsNumberMax: 1,
				maxHeight: '',
				current: 0,
				navList: [{
						status: 1,
						tit: '消费包',
						list: [],
						loadingType: 'more',
						loaded: false,
						page: 1,
						limit: 10,
					},
					{
						status: 2,
						tit: '阅读积分交易',
						list: [],
						loadingType: 'more',
						loaded: false,
						page: 1,
						limit: 10,
					}
				],
				loading: false,
				buying: false,
			}
		},
		onLoad() {

		},
		onShow() {
			this.loadBaseData()
			
		},
		computed: {
			...mapState('user', ['userInfo', 'hasLogin'])
		},
		onReady(res) {
			var that = this;
			uni.getSystemInfo({
				success: resu => {
					const query = uni.createSelectorQuery();
					query.select('.list-wrap').boundingClientRect();
					query.exec(function(res) {
						that.maxHeight = resu.windowHeight - res[0].top + 'px';
						console.log(that.maxHeight);
					});
				},
				fail: res => {}
			});

		},
		methods: {
			...mapMutations('user', ['setUserInfo']),
			gobuy(item) {
				if(this.buying) {
					return
				}
				this.buying = true
				buyGs({
					id: item.id
				}).then(res => {
					uni.showToast({
						title:'购买成功',
						duration:2000
					});
					this.buying = false
					this.getGsList('re')
				}).catch( err => {
					this.buying = false
				})
			},
			passUser() {
				passUser().then(res => {
					// console.log(res);
					this.pUser = res.data
				})
			},
			getTime(time) {
				const num =13 - (time+'').length;
				let l = 1;//倍数
				for (let i = 0; i < num; i++) {
					l+='0';
				}
				// 重新解析为数字
				l = parseInt(l)
				const date = new Date(parseInt(time) * l);
				const year = date.getFullYear();
				const mon = date.getMonth() + 1;
				const day = date.getDate();
				const hours = date.getHours();
				const minu = date.getMinutes();
				const sec = date.getSeconds();
				return year + '-' + mon + '-' + day + ' ' + hours + ':' + minu + ':' + sec;
			},
			getMore(status) {
				if(status == 2) {
					this.getGsList()
				}
			},
			popChange(e) {
				console.log(e)
				if(!e.show) {
					this.buyItem = {}
					this.goodsNumber = 1
					this.goodsNumberMax = 1
				}
			},
			getCardList() {
				getCardList().then(res => {
					console.log(res);
					this.navList[0].list = res.data
					this.navList[0].loadingType = 'noMore'
				})
			},
			createPass() {
				let that = this
				if(that.loading) {
					return
				}
				that.loading = true
				createPass({
					card_id: that.buyItem.id,
					num: that.goodsNumber
				}).then(res => {
					that.loading = false
					uni.showToast({
						title:'兑换成功',
						duration:2000
					});
					that.loadBaseData()
					that.$refs.popup.close()
				}).catch(err => {
					that.loading = false
				})
			},
			// 购买数量变化
			numberChange(e) {
				this.goodsNumber = e.number;
			},
			//筛选点击
			tabClick(index) {
				// 防止重复点击综合排序
				if (this.filterIndex === 0 && this.filterIndex === index) {
					console.log('zhe')
					return;
				}
				this.filterIndex = index;
				if(index === 0) {
					this.order = 'id asc'
				}
				// 判断是否为销量优先
				if (index === 1) {
					this.numberOrder = this.numberOrder === 1 ? 2 : 1;
					this.order = this.numberOrder === 1 ? 'amount asc': 'amount desc'
				}
				// 判断是否为价格优先
				if (index === 2) {
					this.priceOrder = this.priceOrder === 1 ? 2 : 1;
					this.order = this.priceOrder === 1 ? 'price asc': 'price desc'
				}
				// 初始化页数
				// this.page = 1;
				this.navList[1].list.page = 1
				// 初始化数组
				// uni.pageScrollTo({
				// 	duration: 300,
				// 	scrollTop: 0
				// });
				this.getGsList('re');
				uni.showLoading({
					title: '正在加载'
				});
			},
			makeCall(item) {
				uni.makePhoneCall({
					phoneNumber:item + ''
				})
			},
			loadBaseData(tit) {
				const obj = this
				getUserInfo({})
					.then(({
						data
					}) => {
						console.log(data,'data')
						obj.setUserInfo(data);
						obj.getCardList()
						obj.passUser()
						obj.getGsList()
					})
					.catch(e => {
						console.log(e);
					});

			},
			buy() {},
			changeTab(index) {
				this.current = index
				this.getList('tab')
			},
			getList(type) {
				if(this.current == 1) {
					console.log('ddddddddddddddddddd')
					this.getGsList('re');
				}else {
					
				}
			},
			navto(url) {

				if (!this.hasLogin) {
					// 保存地址
					saveUrl();
					// 登录拦截
					interceptor();
				} else {
					uni.navigateTo({
						url,
						fail() {
							uni.switchTab({
								url
							})
						}
					})
				}

			},
			open(item) {
				let that = this
				if(!item.activate) {
					return that.$api.msg('当前不可兑换')
				}
				that.buyItem = item
				that.goodsNumberMax = item.max_count*1 - item.progress*1
				this.$refs.popup.open()
			},
			getGsList(type) {
				console.log('jinriu')
				let that = this
				let item = that.navList[1]
				if(type == 're') {
					item.list = []
					item.loadingType = 'more'
					item.page = 1
					item.loaded = false
				}
				if(item.loadingType == 'loading' || item.loadingType == 'noMore') {
					return
				}
				item.loadingType = 'loading'
				getGsList({
					// uid: this.userI.uid
					page: item.page,
					limit: item.limit,
					order: that.order,
					status: 0
				}).then(res => {
					uni.hideLoading()
					let arr = res.data.result.list
					item.list =  item.list.concat(arr)
					if(arr.length == item.limit) {
						item.loadingType = 'more'
					}else {
						item.loadingType = 'noMore'
					}
					item.page++
					item.loaded = true
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.center-box {
		width: 693rpx;
		height: 152rpx;
		background: #FFFFFF;
		box-shadow: 0rpx 0rpx 20rpx 0rpx rgba(50, 50, 52, 0.06);
		border-radius: 20rpx;
		margin: 0 auto;
		font-size: 30rpx;
		font-weight: bold;
		color: #333333;

		.center-item {
			flex-grow: 1;
			flex-direction: column;
			justify-content: center;
			align-items: center;

			.val {
				font-size: 38rpx;
				font-weight: bold;
				color: #333333;
			}

			.name {
				padding-top: 10rpx;
			}
		}

		.line {
			width: 2rpx;
			height: 74rpx;
			background: #eff1f5;
		}
	}

	.banne {
		justify-content: center;
		padding: 20rpx 0;

		image {
			width: 340rpx;
			height: 204rpx;
			margin: 0 8rpx;
		}
	}

	.nav {
		padding: 30rpx 0;

		.nav-item {
			flex-grow: 1;
			text-align: center;
			font-size: 33rpx;
			font-weight: bold;
			color: #333;
		}

		.action {
			color: #FF4C4C;
		}
	}

	.list-wrap {

		// background-color: red;
		.card-wrap {
			width: 690rpx;
			height: 197rpx;
			background: #FFFFFF;
			border-radius: 10rpx;
			margin: 0 auto 20rpx;
			padding: 20rpx;
			justify-content: flex-start;
			position: relative;
			.card-img {
				flex-shrink: 0;
				width: 158rpx;
				height: 158rpx;
				background-color: #eee;
				margin-right: 20rpx;
			}

			.card-info {
				flex-grow: 1;
				font-size: 24rpx;
				font-weight: 500;
				height: 100%;
				color: #999999;
				flex-direction: column;
				justify-content: space-between;
				align-items: flex-start;

				.name {
					font-size: 32rpx;
					font-weight: bold;
					color: #333333;
					
						
				}

				.price {
					font-size: 20rpx;
					font-weight: 500;
					color: $base-color;
					line-height: 35rpx;
					.show {
					font-size: 36rpx;
					font-weight: bold;
					color: #FC4141;
					vertical-align: bottom;
					padding: 0 5rpx;
				}
					image {
						width: 34rpx;
						height: 33rpx;
						vertical-align: bottom;
					}

					text {
						color: #999999;
					}
				}
			}

			.card-btn {
				flex-shrink: 0;
				width: 137rpx;
				height: 52rpx;
				background: $base-color;
				border-radius: 26rpx;
				font-size: 26rpx;
				font-weight: 500;
				color: #FFFFFF;
				text-align: center;
				line-height: 50rpx;
				align-self: flex-end;
			}
			.buyless {
				background:#999 ;
			}
			.card-nun {
				position: absolute;
				top: 20rpx;
				right: 20rpx;
				font-size: 26rpx;
				color: $base-color;
			}
		}

		.order-wrap {
			width: 686rpx;
			height: 297rpx;
			background: #FFFFFF;
			box-shadow: 0rpx 0rpx 20rpx 0rpx rgba(50, 50, 52, 0.06);
			border-radius: 20rpx;
			margin: 0 auto 20rpx;
			padding: 33rpx 40rpx;
			position: relative;

			.m-info {
				justify-content: flex-start;

				image {
					width: 55rpx;
					height: 55rpx;
					margin-right: 13rpx;
				}

				text {
					font-size: 28rpx;
					font-weight: bold;
					color: #333333;
				}
			}

			.price {
				font-size: 40rpx;
				font-family: PingFang SC;
				font-weight: bold;
				color: #FF4C4C;
				padding: 40rpx 0 30rpx;
			}
			
			.num {
				font-size: 26rpx;
				font-weight: 500;
				color: #888785;
			}

			.order-btn {
				width: 148rpx;
				height: 62rpx;
				border: 2px solid #FF5570;
				border-radius: 30rpx;
				line-height: 62rpx;
				text-align: center;
				font-size: 28rpx;
				font-weight: bold;
				color: #FF4C4C;
				position: absolute;
				right: 40rpx;
				bottom: 33rpx;
			}
		}
	}

	.attr-list {
		display: flex;
		flex-direction: column;
		font-size: $font-base + 2rpx;
		color: $font-color-base;
		padding-top: 30rpx;
		padding-left: 40rpx;
		padding-right: 30rpx;
	}

	.item-list {
		padding: 20rpx 0 0;
		display: flex;
		flex-wrap: wrap;

		.tit {
			display: flex;
			align-items: center;
			justify-content: center;
			background: #eee;
			// margin-left: 10rpx;
			margin-right: 20rpx;
			margin-bottom: 20rpx;
			border-radius: 100rpx;
			min-width: 60rpx;
			height: 60rpx;
			padding: 0 20rpx;
			font-size: $font-base;
			color: $font-color-dark;
		}

		.selected {
			background: #fbebee;
			color: $uni-color-primary;
		}
	}

	.btn {
		width: 750rpx;
		height: 98rpx;
		background: $base-color;
		line-height: 98rpx;
		// background: $uni-color-primary;
		font-size: $font-base + 2rpx;
		color: #fff;
	}

	.a-t {
		padding: 0 30rpx;
		display: flex;

		image {
			width: 170rpx;
			height: 170rpx;
			flex-shrink: 0;
			border-radius: 8rpx;
		}

		.right {
			display: flex;
			flex-direction: column;
			padding-left: 24rpx;
			font-size: $font-sm + 2rpx;
			color: $font-color-base;
			line-height: 42rpx;

			.good-name {
				padding-top: 20rpx;
				max-width: 320rpx;
				font-size: 30rpx;
				font-family: PingFang SC;
				font-weight: bold;
				color: #1d2023;
				line-height: 42rpx;
				margin-bottom: 15rpx;
			}

			.price {
				font-size: 60rpx;
				font-family: PingFang SC;
				font-weight: bold;
				color: $base-color;
				// font-size: $font-lg;
				// color: $uni-color-primary;
				// margin-bottom: 10rpx;
				&::after {
					content: '阅读积分';
					font-size: 30rpx;
					padding-left: 10rpx;
				}
			}
			

			.selected-text {
				margin-right: 10rpx;
			}
		}
	}

	.px-wrap {
		height: 60rpx;
		background-color: #fff;
		position: fixed;
		width: 750rpx;
		top: 0;
		z-index: 999;
		.nav-item {
			flex: 1;
			display: flex;
			justify-content: center;
			align-items: center;
			height: 100%;
			font-size: 25rpx;
			font-weight: 500;
			color: #666666;
			position: relative;
			&.current {
				color: $base-color;
			}
		}
		.p-box {
			display: flex;
			flex-direction: column;
			.iconfont {
				display: flex;
				align-items: center;
				justify-content: center;
				width: 30rpx;
				height: 14rpx;
				line-height: 1;
				margin-left: 4rpx;
				font-size: 20rpx;
				color: #888;
				&.active {
					color: $base-color;
				}
			}
			.xia {
				transform: scaleY(-1);
			}
		}
	}
	.p2 {
		padding-top: 80rpx;
	}
</style>