caimei-applets-caimei/components/cm-module/activity/activities.vue

<template>
	<view>
		<view class="tui-alert-class tui-alert-box" :class="[show?'tui-alert-show':'tui-alert-hide']"  @touchmove.stop.prevent="discard">
            <view class="tui-goods__item">
            	<swiper class="tui-goods__ross" 
            			circular 
            			@change="swiperChange"
            			:indicator-dots="false" 
            			:autoplay="false"
            		>
            		<swiper-item v-for="(item, index) in list" :key="item">
            			<view class="tui-goods__ross" @click="handleClick(item)">
            				<image class="ross-image" :src="item.crmImage" mode=""></image>
            			</view>
            		</swiper-item>
            	</swiper>
                <text class="iconfont icon-2guanbi" @click.stop="handleClickCancel"></text>
            </view>
		</view>
	</view> 
</template>

<script>
	export default {
		name:'tuiAlert',
		props: {
            list:{
              type:Array,
              default:[]
            },
			//控制显示
			show: {
				type: Boolean,
				default: false
			},
			//提示信息字体大小
			size: {
				type: Number,
				default: 30
			},
			//提示信息字体颜色
			color: {
				type: String,
				default: '#333'
			},
			//按钮字体颜色
			btnColor: {
				type: String,
				default: '#EB0909'
			},
			btnText:{
				type: String,
				default: ''
			},
			//点击遮罩 是否可关闭
			maskClosable: {
				type: Boolean,
				default: false
			},
            current:{
                type: Number,
                default: 0
            }
		},
        created() {},
		methods: {
            swiperChange(e) {//轮播图切换
            	this.current = e.detail.current
            },
			handleClick(item) {
				this.$emit('click',item)
			},
			handleClickCancel() {
				this.$emit('cancel',false)
			},
			discard(){
				//丢弃
			}
		}
	}
</script>

<style lang="scss">
	.tui-alert-box {
		width: 100%;
		height: 100%;
		display: flex;
		align-items: center;
		justify-content: center;
		flex-direction: column;
		position: fixed;
		left: 0;
		top: 100%;
		opacity: 0;
		background: rgba(0,0,0,.5);
		z-index: 99999;
        .tui-goods__item {
        	width: 480rpx;
        	height: 702rpx;
        	box-sizing: border-box;
            position: relative;
            margin-top: 50rpx;
        	.tui-goods__ross{
                width: 480rpx;
                height: 702rpx;
        		text-align: center;
        		color: #fff;
        		float: left;
                overflow: hidden;
        		.ross-image{
        			width: 100%;
        			height: 100%;
        			display: block;
        		}
        	}
        }
		
	}
	.tui-alert-show {
		top: 0;
		opacity: 1;
		// animation:rundtop 0.5s;
	}
	.tui-alert-hide{
		top: 100%;
		opacity: 0;
		// animation:rundbottom 0.5s;
	}
	.icon-2guanbi{
		display: block;
		width: 80rpx;
		height: 80rpx;
		line-height: 80rpx;
		text-align: center;
		color: #FFFFFF;
		position: absolute;
		bottom: -18%;
		left: 50%;
		font-size: 52rpx;
        margin-left: -20px;
	}
	.tui-alert-mask-show {
		visibility: visible;
		opacity: 1;
	}
	.tui-alert-btn {
		width: 100%;
		height: 90rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		background-color: #fff;
		box-sizing: border-box;
		position: relative;
		font-size: 32rpx;
		line-height: 32rpx;
	}
	.tui-alert-btn-hover {
		background-color: #f7f7f7;
	}
	.tui-alert-btn::before {
		width: 100%;
		content: "";
		position: absolute;
		border-top: 1rpx solid #E0E0E0;
		-webkit-transform: scaleY(0.5);
		transform: scaleY(0.5);
		left: 0;
		top: 0;
	}
	@keyframes rundtop{
		0%{top: 100%;opacity: 0;}
		100%{top:0;opacity: 1;}
	}
	@keyframes rundbottom{
		0%{top: 0;opacity: 1;}
		100%{top:100%;opacity: 0;}
	}
</style>