discounts-minapp/components/zs-adv-dialog/index.vue

<template>
	<view class="zs-dialog" v-if="showDialog">
	   <view class="dialog-content">
		<image class="adv" :src="currentAdv" mode="widthFix" @click="jump"></image>
		<image class="close" src="@/static/close.png" mode="" @click="handleClose"></image>
	   </view>
	</view>
</template>

<script>
	export default {
		props: {
			list: {
				type: Array,
				default: ()=>{
					return []
				}
			},
		},
		data() {
			return {
				current: 0,
				show:true,
			}
		},
		computed: {
			currentAdv() {
				if(this.list.length){
					return this.list[this.current].advertsImg
				}else{
					return ''
				}
			},
			showDialog(){
				if(this.list.length &&this.show){
					if((this.current+1) > this.list.length){
						return false
					}else{
						return true
					}
				}else{
					return false
				}
			}
		},
		methods: {
			handleClose() {
				if((this.current+1)== this.list.length){
					this.show = false
				}else{
					this.current++
				}
			},
			jump(){
				if(this.list[this.current].loginLimit == 1){
					if(!uni.getStorageSync('token')){
						let that = this
						return uni.showModal({
						  title: "请登录",
						  confirmText: "去登录",
						  success(res) {
							if (res.confirm) {
								let redirect = that.list[that.current].jumpUrl.split('?')[0]
								let params =  that.list[that.current].jumpUrl.split('?')[1]
								console.log(`../../login/login/login?redirect=${redirect}&${params}`);
							  uni.navigateTo({
								url: `../../login/login/login?redirect=${redirect}&${params}`,
							  });
							}
						  },
						});
					}
				}
				this.show = false
				uni.navigateTo({
					url: this.list[this.current].jumpUrl
				})
			}
		},
		
	}
</script>

<style lang="scss" scoped>
.zs-dialog{
	position: fixed;
	top: 0%;
	left: 0%;
	width: 750rpx;
	height: 100vh;
	z-index: 2;
	background: rgba(0, 0, 0, .4);
	.dialog-content{
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%,-50%);
		width: 552rpx;
		.adv{
			width: 100%;
		}
		.close{
			width: 40rpx;
			height: 40rpx;
			position: absolute;
			bottom: -52rpx;
			left: 50%;
			transform: translateX(-50%);
		}
	}
}
</style>