sugarpark-mini-program/components/Popup/VipPopup.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>
			<view class="bottom flex-center">
				<view class="b-text1 font28 fw400">
					开通会员请
				</view>
				<view class="b-text1" style="text-decoration: underline;margin-left: 8rpx;" @click="toService">
					联系客服
				</view>
			</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:-1
			};
		},
		watch:{
			'swiperIndex':function(val,oldval){
				console.log(val)
				this.privilegeIndex=val;
			}
		},
		methods:{
			close(){
				this.$emit('closePopup');
			},
			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');
				
			}
		}
	}
</script>

<style lang="scss" scoped>
.container{
	flex-direction: column;
	.popup{
		width: 630rpx;
		height: 716rpx;
		background-color: #6C52F4;
		position: relative;
		flex-direction: column;
		border-radius: 40rpx;
		
		.close{
			position: absolute;
			right: 20rpx;
			top: 20rpx;
			width: 32rpx;
			height: 32rpx;
		}
		.top{
			height: 132rpx;
			width: 630rpx;
			padding: 40rpx 40rpx 0rpx 40rpx;
			box-sizing: border-box;
			.top-icon{
				width: 160rpx;
				height: 60rpx;
			}
			.top-text{
				color: #ffffff;
				margin-left: 8rpx;
			}
		}
		.swiper{
			flex: 1;
			width: 630rpx;
			.swiper-item{
				width: 630rpx;
				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;
				}
				
			}
		}
		.bottom{
			width: 100%;
			height: 120rpx;
			padding: 0rpx 40rpx 0rpx 40rpx;
			box-sizing: border-box;
			background-color: rgba(255, 255, 255, 0.08);
			.b-text1{
				color: #ffffff;
			}
		}
	}
}
</style>