xwfb/pages/vip/fwbDetail.vue

<template>
	<view class="content">
		<view class="top-wrap">
			<view class="top-bg">
				
			</view>
			<view class="user-data flex">
				<view class="data" @click="navto('/pages/vip/contract')">
					<view class="data-val">200</view>
					<view class="data-tit">合约收益</view>
				</view>
				<view class="data" @click="navto('/pages/vip/extension')">
					<view class="data-val">200</view>
					<view class="data-tit">推广收益</view>
				</view>
				<view class="data" @click="navto('/pages/vip/mytz')">
					<view class="data-val">{{userInfo.now_money}}</view>
					<view class="data-tit">我的通证</view>
				</view>
				<view class="data" @click="navto('/pages/user/integral')">
					<view class="data-val">{{userInfo.integral}}</view>
					<view class="data-tit">我的积分</view>
				</view>
			</view>
		</view>
		<view class="fwb-logo">
			<image src="../../static/img/fwb.png" mode=""></image>
		</view>
		<scroll-view scroll-y="true" :style="{'height': height}" class="scoll-wrap" @scrolltolower="loadData()">
			<view class="buy-item" v-for="item in list">
				<view class="item-top">
					<view class="top-left">
						<image src="../../static/icon/mrlogo.png" mode=""></image><text class="top-name clamp">{{item.name || ''}}</text>
					</view>
					<view class="top-right">
						{{item.status}}
					</view>
				</view>
				<view class="item-info">
					<view class="info-data">
						<view class="info-tit">收益：</view>
						<view class="info-val">{{item.day}}天/{{item.proportion}}%</view>
					</view>
					<!-- <view class="info-data">
						<view class="info-tit">开始时间：</view>
						<view class="info-val">10:20</view>
					</view> -->
					<view class="info-data">
						<view class="info-tit">可获通证：</view>
						<view class="info-val">{{item.pass}}%</view>
					</view>
					<!-- <view class="info-data">
						<view class="info-tit">终止释放时间：</view>
						<view class="info-val">10:20</view>
					</view> -->
					<view class="info-data">
						<view class="info-tit">预约人数：</view>
						<view class="info-val">{{item.cts}}</view>
					</view>
					<view class="info-data">
						<view class="info-tit">价值：</view>
						<view class="info-val">{{item.price}}</view>
					</view>
				</view>
				<view class="mc-btn yy could" @click="packageReserve(item)">
					立即预约
				</view>
				<view class="mc-btn pass could" @click="packageExchange(item,2)">
					合约兑换
				</view>
				<view class="mc-btn fail" :class="{'could':item.am == 0}" @click="item.am == 0?packageExchange(item,1):''">
					推广兑换
				</view>
			</view>
			<uni-load-more :status="loadingType"></uni-load-more>
		</scroll-view>
		<view class="btm-btn flex">
			<view class="btm-left flex"  @click="navto('/pages/appointment/appointment')">
				<image src="../../static/icon/myyy.png" mode=""></image>
				<view class="">
					我的预约
				</view>
			</view>
			<view class="btm-right" style="background-color: #FFB238;" @click="navto('/pages/sellout/sellout')">
				卖出
			</view>
			<view class="btm-right" style="background-color: #FF4C4C;"  @click="navto('/pages/purchase/purchase')">
				买入
			</view>
		</view>
	</view>
</template>

<script>
	import { orderData, getUserInfo,service } from '@/api/user.js';
	import { getPackageList, packageReserve, packageExchange } from '@/api/package.js'
	import uniLoadMore from '@/components/uni-load-more/uni-load-more.vue';
	import { mapState, mapMutations } from 'vuex';
	
	export default {
		computed:{
			...mapState('user',['userInfo'])
		},
		components: {
			uniLoadMore,
		},
		data() {
			return {
				height: '',
				list: [],
				loadingType: 'more',
				page: 1,
				limit: 10,
				// loaded: false,
				
			}
		},
		onReady(res) {
			var obj = this;
			uni.getSystemInfo({
				success: resu => {
					const query = uni.createSelectorQuery();
					query.select('.scoll-wrap').boundingClientRect();
					query.exec(function(res) {
						console.log(res, 'ddddddddddddd');
						obj.height = resu.windowHeight - res[0].top + 'px';
						console.log('打印页面的剩余高度', obj.height);
					});
				},
				fail: res => {}
			});
		},
		onLoad() {
			// this.getPackageList()
			console.log(this.userInfo)
			this.loadData()
			this.getUserInfo()
		},
		methods: {
			...mapMutations('user', ['setUserInfo', 'setOrderInfo']),
			getPackageList() {
				getPackageList().then(res => {
					console.log(res,'getPackageList')
				})
			},
			navTo(url) {
				uni.switchTab({
					url: url
				})
			},
			navto(url) {
				console.log('dianji ')
				uni.navigateTo({
					url: url
				})
			},
			loadData() {
				let obj = this
				if(obj.loadingType == 'noMore' || obj.loadingType == 'loading') {
					return 
				}
				obj.loadingType = 'loading'
				getPackageList({
					page: obj.page,
					limit: obj.limit
				}).then(({data}) => {
					// console.log(res,'getPackageList')
					obj.list = obj.list.concat(data)
					console.log(obj.list,'dd')
					obj.page++
					if(obj.limit == data.length) {
						obj.loadingType = 'more'
					}else {
						obj.loadingType = 'noMore'
					}
				})
			},
			// 兑换包
			packageExchange(item,type) {
				console.log(item)
				// this.judgeBase()
				packageExchange({
					package_manager: item.id,
					type: type,
					price: item.price,
					day: item.day,
					proportion: item.proportion,
					pass: item.pass,
					consume_pass: item.consume_pass
				}).then( res => {
					console.log(res)
					uni.showToast({
						title:'兑换成功',
						duration:2000
					});
					this.getUserInfo()
				}).catch(err => {
					console.log(err)
				})
			},
			//预约包
			packageReserve(item) {
				// this.judgeBase()
				packageReserve({
					package_manager: item.id,
					price: item.price,
					day: item.day,
					proportion: item.proportion,
					pass: item.pass
				}).then(res => {
					uni.showToast({
						title:'预约成功',
						duration:2000
					});
					this.getUserInfo()
					console.log(res)
				}).catch(err => {
					console.log(err)
				})
			},
			getUserInfo() {
				getUserInfo({})
					.then(({ data }) => {
						console.log(data)
						this.setUserInfo(data);
						console.log(data)
					})
					.catch(e => {
						console.log(e);
					});
			}
		}
	}
</script>

<style lang="scss" scoped>
	.top-wrap {
		position: relative;
		.top-bg {
			width: 750rpx;
			height: 100rpx;
			background: linear-gradient(30deg, #FF4C4C, #FE6238);
			border-radius: 0 0 10rpx 10rpx;
			position: absolute;
			top: 0;
		}
		padding-top: 20rpx;
		.user-data {
			width: 710rpx;
			height: 165rpx;
			background: #FFFFFF;
			box-shadow: 0px 0px 20rpx 0px rgba(50, 50, 52, 0.06);
			border-radius: 20rpx;
			margin: auto;
			position: relative;
			.data {
				display: flex;
				width: 25%;
				flex-direction: column;
				justify-content: center;
				align-items: center;
				
				font-family: PingFang SC;
				font-weight: bold;
				color: #666666;
				position: relative;
				.data-val {
					font-size: 36rpx;
				}
				.data-tit {
					font-size: 26rpx;
					padding-top: 10rpx;
				}
				&::after {
					content: '';
					width: 1px;
					height: 36rpx;
					background: #d6d6d6;
					position: absolute;
					right: 0;
					top: 0;
					bottom: 0;
					margin: auto;
				}
				&:last-of-type {
					&::after {
						background: #fff;
					}
				}
			}
		}
	}
	.fwb-logo {
		height: 99rpx;
		display: flex;
		justify-content: space-around;
		align-items: center;
		image {
			width: 374rpx;
			height: 33rpx;
		}
	}
	.buy-item {
		width: 690rpx;
		height: 300rpx;
		margin: 0 auto 20rpx;
		background: #FFFFFF;
		box-shadow: 0px 0px 17rpx 0px rgba(0, 0, 0, 0.05);
		border-radius: 20rpx;
		padding: 26rpx 30rpx;
		position: relative;
		.item-top {
			display: flex;
			justify-content: space-between;
			height: 50rpx;
			.top-left {
				font-size: 34rpx;
				font-family: PingFang SC;
				font-weight: bold;
				color: #0F253A;
				line-height: 50rpx;
				display: flex;
				align-items: center;
				image {
					width: 48rpx;
					height: 46rpx;
				}
				.top-name {
					width: 450rpx;
					padding-left: 11rpx;
				}
			}
			.top-right {
				line-height: 50rpx;
				width: 100rpx;
				text-align: right;
				font-size: 26rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #6D7C88;
			}
		}
		.item-info {
			width: 100%;
			margin-top: 28rpx;
			line-height: 50rpx;
			font-size: 26rpx;
			font-family: PingFang SC;
			display: flex;
			flex-wrap: wrap;
			.info-data {
				width: 50%;
				display: flex;
				.info-tit {
					
					font-weight: 500;
					color: #6D7C88;
				}
				.info-val {
					color: #0F253A;
					font-weight: bold;
				}
			}
			
		}
		.mc-btn {
			width: 144rpx;
			line-height: 50rpx;
			border-radius: 25px;
			background: #FFFFFF;
			font-size: 26rpx;
			font-family: PingFang SC;
			font-weight: 500;
			text-align: center;
			position: absolute;
			bottom: 25rpx;
			color: #999999;
			border: 2px solid #EBEBEB;
		}
		.yy {
			right: 344rpx;
		}
		.pass {
			right: 190rpx;
		}
		.fail {
			right: 36rpx;
		}
		.could{
			color: #FF4C4C;
			border: 2px solid #FF4C4C;
		}
		.cant {
			color: #999999;
			border: 2px solid #EBEBEB;
		}
	}
	.scoll-wrap {
		padding-bottom: 120rpx;
	}
	.btm-btn {
		height: 100rpx;
		position: fixed;
		bottom: 0;
		.btm-left {
			flex-direction: column;
			justify-content: center;
			align-items: center;
			height: 100rpx;
			width: 136rpx;
			image {
				width: 48rpx;
				height: 48rpx;
				background-color: #fff;
			}
		}
		.btm-right {
			width: 307rpx;
			height: 100rpx;
			background: #FFB238;
			text-align: center;
			color: #fff;
			font-size: 34rpx;
			font-family: PingFang SC;
			font-weight: bold;
			line-height: 100rpx;
		}
	}
</style>