caimei-applets-caimei/pages/tabBar/home/components/coupon.vue

<template name="navbars">
	<view>
		<view class="coupon-content clearfix" @click.stop="navigator('/pages/user/coupon/coupon-collection')" :class="isShow?'show':'hide'">
			<image src="https://static.caimei365.com/app/img/bg/coupun_banner_h5@2x.jpg" mode=""></image>
            <view class="coupon-content-close" @click.stop="handleClick">
                <text class="iconfont icon-reeor-fill"></text>
            </view>
		</view>
	</view>
</template>

<script>
	import { mapState,mapMutations } from 'vuex'
	export default{
		name:'navbars',
		data() {
			return{
				isShow:true
			}
		},
		created(){
			
		},
		computed: {
			...mapState(['hasLogin','userInfo','isWxAuthorize'])
		},
		methods:{
            handleClick(){
                this.isShow = false
            },
			navigator(url){
				// 友盟埋点收集首页优惠券宣传图点击
				if (process.env.NODE_ENV != 'development') {
					this.$uma.trackEvent('Um_Event_homeCouponBannerClick', {
						Um_Key_PageName: '采美商城首页',
						Um_Key_SourcePage: '首页优惠券宣传图',
					})
				}
				this.$api.navigateTo(url)
			},
		}
	}
</script>

<style lang="scss">
	.coupon-content{
		width: 100%;
		height: 160rpx;
		box-sizing: border-box;
		padding: 20rpx 24rpx 0rpx 24rpx;
		background-color: #f7f7f7;
        position: relative;
        &.hide{
            display: none;
        }
		image{
			width: 100%;
			height: 140rpx;
			display: block;
            border-radius: 12rpx;
		}
        .coupon-content-close{
            width: 60rpx;
            height: 60rpx;
            line-height: 60rpx;
            text-align: center;
            position: absolute;
            right: 20rpx;
            top: 15rpx;
            .iconfont{
                font-size: $font-size-32;
                color: #FFFFFF;
            }
        }
	}
</style>