h5-sugarpark/src/components/Popup/PayPopup.vue

<template>
	<div class="p-container flex-end">
		<div class="popup flex-center">
			<img :src="`${assetsUrl}popup-close-white.png`"  mode="aspectFill" class="close" @click="close"></img>
			<div class="top flex-start">
				<img :src="`${assetsUrl}popup-vip.png`" mode="aspectFill" class="top-icon"></img>
				<div class="top-text font40 fw600">
					4项特权
				</div>
			</div>
			<van-swipe :show-indicators="false" indicator-active-color="#ffffff" :autoplay="3000" class="swiper">
				<van-swipe-item v-for="(item,index) in privileges" :key="index">
					<div class="swiper-item flex-center">
						<div class="si-content">
							<img :src="`${assetsUrl}${item.img}.png`" mode="aspectFill" class="si-img"></img>
							<div class="si-title font36 fw600">
								{{item.title}}
							</div>
							<div class="si-text font28 fw400">
								{{item.text}}
							</div>
						</div>
					</div>
				</van-swipe-item>
			</van-swipe>
			<div class="tabs flex-start">
				<div class="tab" :class="tabIndex===index?'active-tab':'no-active'" v-for="(item,index) in priceDatas.prices2" :key="index" @click="tabClick(index)">
					<div class="tab-time font28 fw600" :style="{'color':`${tabIndex===index?'#FFDDBD':''}`}">
						{{item.name}}
					</div>
					<div class="tab-price" :style="{'color':`${tabIndex===index?'#FFDDBD':''}`}">
						<span style="font-size: 72rpx;" >{{item.priceFenPerMonth/100}}</span><span class="font22 fw500">元/月</span>
					</div>
					<div class="tab-under font24 fw400" :style="{'color':`${tabIndex===index?'#FFDDBD':''}`}">
						{{item.originalPriceFenPerMonth/100}}元/月
					</div>
					<div class="tab-tag font20 fw600" v-if="tabIndex===index">
						{{item.tags}}
					</div>
				</div>
			</div>
			<div class="btn font32 fw600" @click="toPay">
				立即解锁
			</div>
			<div class="tip font22 fw400">
				成为会员即代表同意<span style="color:#ffffff;" class="font24">《增值服务协议》</span>
				，如果支付成功，但是没有开通VIP，请<span style="color:#ffffff" class="font24">联系客服</span>。
			</div>
		</div>
	</div>
</template>

<script>
	import {assetsUrl} from '../../util/index.js'
	export default {
		name:"VipPopup",
		props:{
			swiperIndex:{
				type:Number,
				default:''
			}
		},
		data() {
			return {
				assetsUrl,
				privileges:[
					{img:'popup-talk',title:'随心畅聊',text:'10次/天主动私聊女生'},
					{img:'popup-recommend',title:'特别推荐',text:'尊贵标识，优先推荐'},
					{img:'popup-limit',title:'颜遇无限',text:'无限次数查看女士主页和相册'},
					{img:'popup-visitor',title:'查看访客',text:'解锁女生来访痕迹'},
				],
				privilegeIndex:0,
				tabIndex:0,
				priceDatas:{},
				totalPrice:0,
				priceConfig:{
					feeFen: null,
					sceneId: null,
					scene: null,
					body : null,
					userId: null,
					pkgCate:'JyPark'
				},
				
			};
		},
		watch:{
			'swiperIndex':function(val,oldval){
				console.log(val)
				this.privilegeIndex=val;
			}
		},
		computed:{
			platForm(){
				return this.$store.state.platform
			}
		},
		mounted() {
			this.getConfigData();
		},
		methods:{
			close(){
				this.$emit('closePopup');
			},
			getConfigData(){
				let user=JSON.parse(localStorage.getItem('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(localStorage.getItem('userInfo'))).id;
				})
			},
			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(localStorage.getItem('userInfo'))).id;
			},
			toService(){},
			toPay(){
				// if(this.platForm==='ios'){
				// 	this.$emit('closePopup');
				// 	uni.openCustomerServiceChat({
				// 	     extInfo:{
				// 	         url:'https://work.weixin.qq.com/kfid/kfca1b21d2f7e8a18e9',//客服链接
				// 	     },
				// 	     corpId:'wwa8f2a0d8a6dc0950',//企业ID
				// 	     fail(res){
				// 			 console.log(res)
				// 	         wx.showToast({
				// 	           title: '客服联系失败',
				// 	           icon:'none'
				// 	         })
				// 	     }
				// 	 })
				// 	 return;
				// }
				// 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:'支付成功'
				// 							})
				// 							this.$emit('closePopup');
				// 						}
				// 					},
				// 				    fail:(err)=>{console.log(err)}
				// 				})
				// 			}
				// 		})
				// 	}
				// })
			}
		}
	}
</script>

<style lang="scss" scoped>
@import "../../public.scss";
.p-container{
	flex-direction: column;
	position: relative;
	z-index: 999;
	background-color: $bgcolor1;
	.popup{
		width: 100vw;
		background-color: #6C52F4;
		position: relative;
		flex-direction: column;
		border-radius: 20px 20px 0px 0px;
		
		.close{
			position: absolute;
			right: 10px;
			top:10px;
			width: 16px;
			height: 16px;
		}
		.top{
			height: 56px;
			width: 315px;
			padding: 20px 20px 0px 0px;
			box-sizing: border-box;
			.top-icon{
				width: 80px;
				height: 30px;
			}
			.top-text{
				color: #ffffff;
				margin-left: 4px;
			}
		}
		.swiper{
			width: 100%;
			height: 215px;
			.swiper-item{
				width: 100%;
				flex-direction: column;
				.si-img{
					width: 315px;
					height: 128px;
				}
				.si-title{
					color: #ffffff;
					text-align: center;
				}
				.si-text{
					color: #ffffff;
					text-align: center;
					margin-top: 8px;
				}
				
			}
		}
		.tabs{
			height: 170px;
			width: 100%;
			overflow: auto;
			white-space:nowrap;
			.tab{
				position: relative;
				margin-right: 6px;
				
				border-radius:20px;
				display: inline-block;
				transition: all .1s;
				overflow: hidden;
				&:nth-of-type(1){
					margin-left: 16px;
				}
				&:nth-last-of-type(1){
					margin-right: 16px;
				}
				.tab-time{
					color: #79726B;
				}
				.tab-price{
					color: #79726B;
					margin-top: 12px;
				}
				.tab-under{
					color: #79726B;
					text-decoration: line-through;
					margin-top: 12px;
				}
				.tab-tag{
					color: #79726B;
					background: #FFDDBD;
					border-radius: 0px 20px 0px 8px;
					width: 44px;
					height: 18px;
					line-height: 18px;
					text-align: center;
					position: absolute;
					right: -1px;
					top: -1px;
				}
			}
			.no-active{
				border: 1rpx solid #79726B;
				padding: 20px 12px;
				width: 89px;
				background-color: #0D0B0A;
			}
			.active-tab{
				padding: 20px 12px;
				width: 81px;
				border: 2px solid #FFDDBD !important;
				background-color: #221F1C !important;
			}
		}
		.btn{
			width: 315px;
			height: 52px;
			background: #FFFFFF;
			border-radius: 28px;
			color: #6C52F4;
			line-height: 52px;
			text-align: center;
		}
		.tip{
			margin: 0 16px;
			color: #D4D4F1;
			line-height: 16px;
			padding-bottom: 34px;
			margin-top: 8px;
			text-align: center;
		}
	}
}
</style>