sugarpark-mini-program/pages/vip/vip.vue

<template>
	<view class="container">
		<view id="topnav" class="topnav flex-between"  :style="{'height':`${topbarOffsetHeight-statusBarHeight}px`,'padding-top':`${statusBarHeight}px`}">
			<view class="nav-item flex-center" @click="back">
				<image :src="`${assetsUrl}back.png`" mode="widthFix" class="nav-img"></image>
			</view>
			<view class="nav-text font32 fw600">
				{{topbarTitle}}
			</view>
			<view class="nav-item"></view>
		</view>
		<scroll-view
		scroll-y="true" 
		:style="{'height': `${scrollHeight}px`,'padding-top':`${topNavHeight}px`}"
		v-if="scrollHeight>0"
		lower-threshold="200"
		refresher-enabled="true"
		:refresher-triggered="scrollTriggered"
		:refresher-threshold="45" 
		refresher-default-style="white"
		refresher-background="#151126" 
		@refresherrefresh="scrollRefresh" 
		@refresherpulling="scrollPulling"
		@refresherrestore="scrollRestore" 
		@refresherabort="scrollAbort"
		@scrolltolower="scrollToBottom"
		class="scroll-view"
		>
			<view class="top flex-between">
				<view class="top-left">
					<view class="user-box flex-start">
						<image :src="userInfo.iconThumbnail" mode="aspectFit" class="head-img"></image>
						<view class="user-info flex-center">
							<view class="name font32 fw600">
								{{userInfo.nick}}
							</view>
							<view class="phone font22 fw400">
								{{userInfo.phone}}
							</view>
						</view>
					</view>
					<view class="tip font28 fw400">
						开通会员享更多惊喜特权
					</view>
				</view>
				<image :src="`${assetsUrl}vip-bg.png`" mode="aspectFit" class="top-right"></image>
			</view>
			<scroll-view scroll-x="true" class="tabs flex-start">
				<view class="tab" :class="tabIndex===index?'active-tab':'no-active'" v-for="(item,index) in priceDatas.prices2" :key="index" @click="tabClick(index)">
					<view class="tab-time font28 fw600">
						{{item.name}}
					</view>
					<view class="tab-price">
						<span style="font-size: 72rpx;">{{item.priceFenPerMonth/100}}</span><span class="font22 fw500">元/月</span>
					</view>
					<view class="tab-under font24 fw400">
						{{item.originalPriceFenPerMonth/100}}元/月
					</view>
					<view class="tab-tag font20 fw600" v-if="tabIndex===index">
						{{item.tags}}
					</view>
				</view>
			</scroll-view>
			<swiper :indicator-dots="false" :disable-touch="true" :vertical="true" :circular="true" :autoplay="true" :interval="2000" :duration="500" class="swiper">
				<view class="swiper-model" @touchmove.stop="catchTouchMove">
					<swiper-item class="swiper-item flex-start" v-for="(item,index) in promotions" :key="index" >
						<view class="item-box flex-start">
							<image :src="item.headImg" mode="aspectFit" class="item-img"></image>
							<view class="item-text font24 fw400">
								{{item.nick}}刚刚开通了会员
							</view>
						</view>
					</swiper-item>
				</view>
				
			</swiper>
			<view class="prot font22 fw400">
				成为会员及代表同意<span style="color: #FFDDBD;" @click="toAddedService">《增值服务协议》</span>
			</view>
			<image :src="`${assetsUrl}vip-action.png`" mode="widthFix" class="action"></image>
			<view class="qustion-title font30 fw500">
				支付遇到问题
			</view>
			<view class="qustions font24 fw400">
				1.如果支付成功，但是没有开通VIP，请<span style="color: #FFDDBD; margin-left: 4rpx;" @click="toService">联系客服</span>
			</view>
			
		</scroll-view>
		<view class="btn flex-between">
			<view class="btn-left">
				<view class="bl-total font24 fw500">
					合计:<span style="font-size:24rpx;font-weight: bold;color: #FFDDBD;margin-left: 4rpx;">¥</span><span style="font-size:40rpx;font-weight: bold;color: #FFDDBD;">{{totalPrice/100}}</span>
				</view>
<!-- 				<view class="bl-tip font20 fw400">
					每月自动续费
				</view> -->
			</view>
			<view class="btn-right" @click="pay">
				<image :src="`${assetsUrl}vip-btn.png`" mode="aspectFit" class="br-img"></image>
				<view class="br-text font32 fw600">
					立即支付
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import TopBar from '@/components/TopBar/TopBar.vue';
	export default {
		components:{TopBar},
		data() {
			return {
				topbarIcon:'back',
				topbarTitle:'会员中心',
				assetsUrl:this.$util.assetsUrl,
				scrollRefreshing:false,
				scrollTriggered:true,
				scrollHeight:0,
				topNavHeight:0,
				tabIndex:0,
				priceDatas:{},
				promotions:[],
				totalPrice:0,
				priceConfig:{
					feeFen: null,
					sceneId: null,
					scene: null,
					body : null,
					userId: null,
					pkgCate:'JyPark'
				}
			};
		},
		mounted() {
			this.computedScollviewHeight();
			this.getConfigData();
			this.getPromotionsData();
		},
		computed: {
			statusBarHeight() {
				return this.$store.state.statusBarHeight;
			},
			topbarOffsetHeight() {
				return this.$store.state.topbarOffsetHeight;
			},
			userInfo(){
				return this.$store.state.userInfo||JSON.parse(uni.getStorageSync('userInfo'))
			}
		},
		methods:{
			catchTouchMove(){
				return false;
			},
			back(){
				uni.navigateBack({
					delta:1
				})
			},
			toAddedService(){
				uni.navigateTo({
					url:`/pages/webview/webview?url=${this.$util.protocal.addedService}`
				})
			},
			/**
			 * 计算scroll高度
			 */
			computedScollviewHeight() {
				let query = uni.createSelectorQuery().in(this);
				let heightLeaf =0;
				query.select('#topnav').boundingClientRect(data => {
					this.topNavHeight=data.height;
					heightLeaf += data.height;
				}).exec(() => {
					let sysInfo = uni.getSystemInfoSync();
					this.scrollHeight = sysInfo.windowHeight - heightLeaf;
				});
			
			},
			/**
			 * 推荐下拉刷新、加载更多
			 */
			scrollRefresh(){
				if (this.scrollRefreshing) 
				{
					return;
				}
				this.scrollRefreshing = true;
				setTimeout(() => {
					this.scrollTriggered = false;
					this.scrollRefreshing = false;
				}, 1000)
				this.getConfigData();
			},
			scrollPulling(e) {},
			scrollRestore() {this.scrollTriggered = true;},
			scrollAbort() {},
			scrollToBottom(){},
			getConfigData(){
				let user=JSON.parse(uni.getStorageSync('user'));
				this.$api.public.priceBySceneConfigs({
					completeUser:user,
					scene:'Member'
				}).then(res=>{
					this.priceDatas=res.data;
					this.totalPrice=this.priceDatas.prices2[this.tabIndex].priceFen;
					this.priceConfig.feeFen=this.priceDatas.prices2[this.tabIndex].priceFen;
					this.priceConfig.scene=this.priceDatas.prices2[this.tabIndex].sceneCate;
					this.priceConfig.sceneId=this.priceDatas.prices2[this.tabIndex].sceneId;
					this.priceConfig.body=this.priceDatas.prices2[this.tabIndex].name;
					this.priceConfig.userId=(this.$store.state.userInfo||JSON.parse(uni.getStorageSync('userInfo'))).id;
				})
			},
			getPromotionsData(){
				this.$api.public.vipPromotions({}).then(res=>{
					this.promotions=res.data;
				})
			},
			tabClick(index){
				this.tabIndex=index;
				this.totalPrice=this.priceDatas.prices2[index].priceFen;
				this.priceConfig.feeFen=this.priceDatas.prices2[index].priceFen;
				this.priceConfig.scene=this.priceDatas.prices2[index].sceneCate;
				this.priceConfig.sceneId=this.priceDatas.prices2[index].sceneId;
				this.priceConfig.body=this.priceDatas.prices2[index].name;
				this.priceConfig.userId=(this.$store.state.userInfo||JSON.parse(uni.getStorageSync('userInfo'))).id;
			},
			pay(){
				uni.getProvider({
					service:'payment',
					success:(provider)=>{
						console.log(provider.provider)
						this.$api.pay.creatWxOrder(this.priceConfig).then(res=>{
							if(res.data.succ){
								uni.requestPayment({
									provider:provider.provider[0],
									timeStamp: String(res.data.timeStamp),
								    nonceStr: res.data.nonceStr,
								    package: `prepay_id=${res.data.wxUniPrePayId}`,
								    signType: 'MD5',
								    paySign: res.data.paySign,
								    success:(result)=>{
										console.log(result)
										if(result.errMsg==='requestPayment:ok'){
											uni.showToast({
												icon:'success',
												title:'支付成功'
											})
										}
									},
								    fail:(err)=>{console.log(err)}
								})
							}
						})
					}
				})
				
			},
			toService(){
				uni.openCustomerServiceChat({
				     extInfo:{
				         url:'https://work.weixin.qq.com/kfid/kfca1b21d2f7e8a18e9',//客服链接
				     },
				     corpId:'wwa8f2a0d8a6dc0950',//企业ID
				     fail(res){
						 console.log(res)
				         wx.showToast({
				           title: '客服联系失败',
				           icon:'none'
				         })
				     }
				 })
			}
		}
	}
</script>

<style lang="scss" scoped>
.container{
	width: 100vw;
	height: 100vh;
	background-color: $bgcolor1;
	overflow: hidden;
	.topnav {
		padding: 0 10rpx;
		position: fixed;
		top: 0;
		left: 0;
		width: 100vw;
		z-index: 100;
		background-color: $bgcolor1;
		.nav-item{
			width: 40rpx;
			height: 40rpx;
			margin-left: 16rpx;
			
			.nav-img{
				width: 40rpx;
				height: 40rpx;
			}
		}
		.nav-text{
			flex: 1;
			color: $fontcolor5;
			height: 40rpx;
			text-align: center;
		}
	}
	.scroll-view{
		
		.top{
			.top-left{
				padding-left: 44rpx;
				.user-box{
					.head-img{
						width: 88rpx;
						height: 88rpx;
						border-radius: 88rpx;
						background-color: #ffffff;
					}
					.user-info{
						flex-direction: column;
						margin-left: 16rpx;
						align-items: flex-start;
						.name{
							color: #ffffff;
						}
						.phone{
							color: #FFDDBD;
							margin-top: 10rpx;
						}
					}
				}
				.tip{
					color: #79726B;
					margin-top: 40rpx;
				}
			}
			.top-right{
				width: 300rpx;
				height: 260rpx;
			}
		}
		.tabs{
			white-space:nowrap;
			.tab{
				position: relative;
				margin-right: 12rpx;
				
				border-radius: 40rpx;
				display: inline-block;
				transition: all .1s;
				overflow: hidden;
				&:nth-of-type(1){
					margin-left: 32rpx;
				}
				&:nth-last-of-type(1){
					margin-right: 32rpx;
				}
				.tab-time{
					color: #FFDDBD;
				}
				.tab-price{
					color: #FFDDBD;
					margin-top: 24rpx;
				}
				.tab-under{
					color: #FFDDBD;
					text-decoration: line-through;
					margin-top: 24rpx;
				}
				.tab-tag{
					color: #201F1E;
					background: #FFDDBD;
					border-radius: 0rpx 40rpx 0px 16rpx;
					width: 88rpx;
					height: 36rpx;
					line-height: 36rpx;
					text-align: center;
					position: absolute;
					right: -1rpx;
					top: -1rpx;
				}
			}
			.no-active{
				border: 1rpx solid #79726B;
				padding: 40rpx 24rpx;
				width: 188rpx;
			}
			.active-tab{
				padding: 40rpx 24rpx;
				width: 182rpx;
				border: 4rpx solid #FFDDBD !important;
				background-color: #221F1C !important;
			}
		}
		.swiper{
			margin: 48rpx 32rpx 16rpx 32rpx;
			height: 80rpx;
			position: relative;
			.swiper-model{
				position: absolute;
				z-index: 100;
				width: 100%;
				height: 80rpx;
			}
			.swiper-item{
				height: 80rpx;
				.item-box{
					padding: 20rpx 24rpx;
					height: 80rpx;
					.item-img{
						width: 40rpx;
						height: 40rpx;
						border-radius: 40rpx;
						background-color: #ffffff;
					}
					.item-text{
						color: #ffffff;
						margin-left: 16rpx;
					}
				}
			}
		}
		.prot{
			margin: 0 32rpx;
			color: #ffffff;
		}
		.action{
			margin: 64rpx 32rpx;
			width: 686rpx;
		}
		.qustion-title{
			color: #ffffff;
			margin: 0 32rpx;
		}
		.qustions{
			color: #79726B;
			margin: 20rpx 32rpx 80rpx 32rpx;
			padding-bottom: 284rpx;
		}
	}
	
	.btn{
		position: fixed;
		bottom: 0;
		left: 0;
		z-index: 100;
		width: 686rpx;
		height: 128rpx;
		margin: 0rpx 32rpx;
		margin-bottom: 76rpx;
		background: linear-gradient(133deg, #1B1A1D 0%, #000000 100%);
		border-radius: 64rpx;
		border: 2rpx solid #979797;
		.btn-left{
			padding-left:48rpx;
			.bl-total{
				color: #ffffff;
			}
			.bl-tip{
				color: #79726B;
			}
		}
		.btn-right{
			position: relative;
			width: 208rpx;
			height: 96rpx;
			padding-right: 20rpx;
			
			.br-img{
				position: absolute;
				left: 0;
				right: 0;
				top: 0;
				bottom: 0;
				margin: 0 auto;
				width: 208rpx;
				height: 96rpx;
				z-index: 0;
			}
			.br-text{
				color: #000000;
				position: relative;
				z-index: 1;
				width: 208rpx;
				height: 96rpx;
				text-align: center;
				line-height: 96rpx;
			}
		}
	}
}
</style>