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

 <template>
     <view>
         <view class="tui-alert-class tui-alert-box" :class="[show?'tui-alert-show':'tui-alert-hide']"
             @touchmove.stop.prevent="discard" @click.stop="handleClickCancel">
             <template v-if="beansType == 12">
                 <view class="tui-alert-image">
                     <image :src="bgImagePath" mode=""></image>
                 </view>
             </template>
             <template v-else>
                 <view class="tui-alert-content" :style="{'background-image': 'url('+bgImagePath+')'}">
                     <view class="tui-alert-content-text">恭喜您获得采美豆！</view>
                     <view class="tui-alert-content-bean">
                         <view class="tui-alert-main">
                             <image class="tui-alert-icon"
                                 src="https://static.caimei365.com/app/img/icon/bean-icon@2x.png" mode=""></image>
                             <view class="tui-alert-text">
                                 <text class="icon-add">+</text>
                                 <text class="icon-text">{{ beanNumber }}</text>
                             </view>
                         </view>
                     </view>
                     <view class="tui-alert-content-tips">
                         <view class="tips">采美豆可抵扣运费</view>
                     </view>
                 </view>
             </template>
         </view>
     </view>
 </template>

 <script>
     export default {
         name: 'tuiAlert',
         props: {
             //控制显示
             show: {
                 type: Boolean,
                 default: false
             },
             //提示信息字体大小
             size: {
                 type: Number,
                 default: 30
             },
             //提示信息字体颜色
             color: {
                 type: String,
                 default: '#333'
             },
             //按钮字体颜色
             btnColor: {
                 type: String,
                 default: '#EB0909'
             },
             btnText: {
                 type: String,
                 default: ''
             },
             beansType: { //根据类型设置背景图片:1注册机构，2升级资质机构，3个人机构修改资料，4资质机构修改资料，5下单成功，6线上支付成功，7确认收货成功
                 type: Number,
                 default: 1
             },
             beanNumber: { //采美豆显示数量
                 type: Number,
                 default: 100
             }
         },
         data() {
             return {
                 bgImagePath: 'https://static.caimei365.com/app/img/icon/bean-icon-2@2x.png',
             }
         },
         created() {
             this.handInitType(this.beansType)
         },
         methods: {
             handInitType(type) {
                 this.bgImagePath = `https://static.caimei365.com/app/img/icon/bean-icon-${type}@2x.png`
             },
             handleClick(e) {
                 console.log(e)
                 if (!this.show) return
                 this.$emit('click', false)
             },
             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(51, 51, 51, 0.7);
         z-index: 99999;
     }

     .tui-alert-show {
         top: 0;
         opacity: 1;
         // animation:rundtop 0.5s;
     }

     .tui-alert-hide {
         top: 100%;
         opacity: 0;
         // animation:rundbottom 0.5s;
     }

     .tui-alert-image {
         width: 626rpx;
         height: 532rpx;
         position: absolute;
         top: 0;
         left: 0;
         bottom: 0;
         right: 0;
         margin: auto;

         image {
             width: 626rpx;
             height: 532rpx;
             display: block;
         }
     }

     .tui-alert-content {
         width: 580rpx;
         height: 790rpx;
         position: absolute;
         top: 0;
         left: 0;
         bottom: 0;
         right: 0;
         margin: auto;
         box-sizing: border-box;
         padding-top: 485rpx;
         background-size: cover;

         .tui-alert-content-text {
             height: 118rpx;
             line-height: 118rpx;
             text-align: center;
             width: 100%;
             font-size: $font-size-36;
             color: #333333;
         }

         .tui-alert-content-bean {
             width: 100%;
             height: 74rpx;
             line-height: 74rpx;
             box-sizing: border-box;
             display: flex;
             flex-direction: column;
             align-items: center;

             .tui-alert-main {
                 .tui-alert-icon {
                     width: 94rpx;
                     height: 74rpx;
                     display: block;
                     float: left;
                 }

                 .tui-alert-text {
                     color: $color-system;
                     line-height: 74rpx;
                     float: left;

                     .icon-add {
                         font-size: 40rpx;
                         margin: 0 15rpx;
                     }

                     .icon-text {
                         font-weight: bold;
                         font-size: 48rpx;
                     }
                 }
             }
         }

         .tui-alert-content-tips {
             width: 100%;
             height: 40rpx;
             line-height: 40rpx;
             margin-top: 41rpx;
             box-sizing: border-box;
             display: flex;
             flex-direction: column;
             align-items: center;

             .tips {
                 width: 224rpx;
                 height: 40rpx;
                 background-color: rgba(226, 91, 28, 0.1);
                 border-radius: 36rpx;
                 line-height: 40rpx;
                 font-size: $font-size-24;
                 color: $color-system;
                 text-align: center;
             }
         }
     }

     .icon-2guanbi {
         display: block;
         width: 100rpx;
         height: 100rpx;
         line-height: 100rpx;
         text-align: center;
         color: #FFFFFF;
         position: absolute;
         bottom: 13%;
         left: 50%;
         font-size: 58rpx;
         margin-left: -50rpx;
     }

     .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>