shop-applet/components/activePopup.vue

<template>
  <view>
    <uni-popup ref="activityPopup" :is-mask-click="false">
    	<view class="a_c_home">
    	  <view class="c_card">
    	    <view class="c_content">
    	      <scroll-view style="height: 100%;" scroll-y>
    	        <view v-if="info&&info.content&&info.content.content" v-html="info.content.content"></view>
    	      </scroll-view>
    	    </view>
    	  </view>
    	  <image class="head_img" src="https://lihai001.oss-cn-chengdu.aliyuncs.com/def/ab014202402291802294524.png" info="活动标题"></image>
    	  <view class="head_title">增收销售补贴</view>
    	  <image class="close_img" @click="close" src="https://lihai001.oss-cn-chengdu.aliyuncs.com/public/uploads/new_activity/close.png" info="关闭按钮"></image>
    	</view>
    </uni-popup>
  </view>
</template>

<script>
  import { getArticleList } from "@/api/api.js"
  export default {
    data(){
      return {
        info: '',
        userInfo: {}
      }
    },
    created() {
      let user = this.$store.state.app.userInfo;
      if(typeof user =='string') user = JSON.parse(user);
      this.userInfo = user;
      this.getArticleList();
    },
    watch:{
      
    },
    methods:{
      close(){
        this.$refs.activityPopup.close();
      },
      getArticleList(){
        getArticleList(28).then(res=>{
          if(this.userInfo.mer_info.type_code=='PersonalStore'){
            this.info = res.data.list[0];
            if(res.data.list[0]) this.$refs.activityPopup.open();
          }
          else {
            this.info = res.data.list[1];
            if(res.data.list[1]) this.$refs.activityPopup.open();
          }
        })
      }
    }
  }
</script>

<style lang="scss">
.a_c_home{
  width: 600rpx;
  /* #ifdef H5 */
  height: 75vh;
  /* #endif */
  /* #ifndef H5 */
  height: 90vh;
  /* #endif */
  // border: 1px solid red;
  position: relative;
  .head_img{
    width: 419rpx;
    height: 86rpx;
    position: absolute;
    top: 130rpx;
    left: 50%;
    transform: translate(-50%);
  }
  .head_title{
    width: 419rpx;
    height: 86rpx;
    position: absolute;
    top: 130rpx;
    left: 50%;
    transform: translate(-50%);
    display: flex;
    justify-content: center;
    align-items: center;
    color: #9C3922;
    font-weight: bold;
    font-size: 34rpx;
  }
  .c_card{
    height: calc(100% - 300rpx);
    width: 100%;
    background-color: #fff;
    position: absolute;
    border-radius: 50rpx;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    padding: 30rpx;
    padding-top: 70rpx;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    .c_content{
      height: 100%;
      width: 100%;
      // background-color: #eee;
    }
    .btn_box{
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      align-items: center;
      .btn_img{
        width: 461rpx;
        height: 100rpx;
      }
    }
  }
  .close_img{
    position: absolute;
    bottom: 60rpx;
    left: 50%;
    transform: translate(-50%);
    width: 60rpx;
    height: 60rpx;
  }
}
</style>