sugarpark-mini-program/components/Popup/PayPopup.vue

<template>
	<view class="container flex-center">
		<view class="popup flex-center">
			<image :src="`${assetsUrl}popup-close-white.png`"  mode="aspectFill" class="close" @click="close"></image>
			<view class="top flex-start">
				<image :src="`${assetsUrl}popup-vip.png`" mode="aspectFill" class="top-icon"></image>
				<view class="top-text font40 fw600">
					4项特权
				</view>
			</view>
			<swiper :indicator-dots="true" indicator-color="rgba(255,255,255,0.3)" indicator-active-color="#ffffff" :autoplay="true" :interval="5000" :duration="1000" class="swiper" :current="privilegeIndex">
				<swiper-item v-for="(item,index) in privileges" :key="index">
					<view class="swiper-item flex-center">
						<view class="si-content">
							<image :src="`${assetsUrl}${item.img}.png`" mode="aspectFill" class="si-img"></image>
							<view class="si-title font36 fw600">
								{{item.title}}
							</view>
							<view class="si-text font28 fw400">
								{{item.text}}
							</view>
						</view>
					</view>
				</swiper-item>
			</swiper>
			<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" :style="{'color':`${tabIndex===index?'#FFDDBD':''}`}">
						{{item.name}}
					</view>
					<view class="tab-price" :style="{'color':`${tabIndex===index?'#FFDDBD':''}`}">
						<span style="font-size: 72rpx;" >{{item.priceFenPerMonth/100}}</span><span class="font22 fw500">元/月</span>
					</view>
					<view class="tab-under font24 fw400" :style="{'color':`${tabIndex===index?'#FFDDBD':''}`}">
						{{item.originalPriceFenPerMonth/100}}元/月
					</view>
					<view class="tab-tag font20 fw600" v-if="tabIndex===index">
						{{item.tags}}
					</view>
				</view>
			</scroll-view>
			<view class="btn font32 fw600" @click="toPay">
				{{platForm==='ios'?'联系客服':'立即解锁'}}
			</view>
			<view class="tip font22 fw400" v-if="platForm==='ios'">
				成为会员即代表同意<text style="color:#ffffff">《增值服务协议》</text></br>
				iOS暂不支持微信支付，请点击<text style="color:#ffffff">联系客服</text>并回复“充值”。
			</view>
			<view class="tip font22 fw400" v-else>
				成为会员即代表同意<text style="color:#ffffff">《增值服务协议》</text></br>
				如果支付成功，但是没有开通VIP，请<text style="color:#ffffff">联系客服</text>。
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name:"VipPopup",
		props:{
			swiperIndex:{
				type:Number,
				default:''
			}
		},
		data() {
			return {
				assetsUrl: this.$util.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() {
			if(!uni.getStorageSync('token')){
				return;
			}
			this.getConfigData();
		},
		methods:{
			close(){
				this.$emit('closePopup');
			},
			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;
				})
			},
			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;
			},
			toService(){
				uni.openCustomerServiceChat({
				     extInfo:{
				         url:'https://work.weixin.qq.com/kfid/kfca1b21d2f7e8a18e9',//客服链接
				     },
				     corpId:'wwa8f2a0d8a6dc0950',//企业ID
				     fail(res){
						 console.log(res)
				         uni.showToast({
				           title: '客服联系失败',
				           icon:'none'
				         })
				     }
				 })
				this.$emit('closePopup');
				
			},
			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>
.container{
	flex-direction: column;
	position: relative;
	z-index: 1001;
	.popup{
		width: 100vw;
		background-color: #6C52F4;
		position: relative;
		flex-direction: column;
		border-radius: 40rpx 40rpx 0rpx 0rpx;
		
		.close{
			position: absolute;
			right: 20rpx;
			top: 20rpx;
			width: 32rpx;
			height: 32rpx;
		}
		.top{
			height: 132rpx;
			width: 630rpx;
			padding: 40rpx 40rpx 0rpx 0rpx;
			box-sizing: border-box;
			.top-icon{
				width: 160rpx;
				height: 60rpx;
			}
			.top-text{
				color: #ffffff;
				margin-left: 8rpx;
			}
		}
		.swiper{
			width: 100%;
			height: 430rpx;
			.swiper-item{
				width: 100%;
				flex-direction: column;
				.si-img{
					width: 630rpx;
					height: 256rpx;
				}
				.si-title{
					color: #ffffff;
					text-align: center;
				}
				.si-text{
					color: #ffffff;
					text-align: center;
					margin-top: 16rpx;
				}
				
			}
		}
		.tabs{
			height: 340rpx;
			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: #79726B;
				}
				.tab-price{
					color: #79726B;
					margin-top: 24rpx;
				}
				.tab-under{
					color: #79726B;
					text-decoration: line-through;
					margin-top: 24rpx;
				}
				.tab-tag{
					color: #79726B;
					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;
				background-color: #0D0B0A;
			}
			.active-tab{
				padding: 40rpx 24rpx;
				width: 182rpx;
				border: 4rpx solid #FFDDBD !important;
				background-color: #221F1C !important;
			}
		}
		.btn{
			width: 630rpx;
			height: 104rpx;
			background: #FFFFFF;
			border-radius: 56rpx;
			color: #6C52F4;
			line-height: 104rpx;
			text-align: center;
		}
		.tip{
			margin: 0 32rpx;
			color: #D4D4F1;
			line-height: 32rpx;
			padding-bottom: 68rpx;
			margin-top: 16rpx;
			text-align: center;
		}
	}
}
</style>