shop-applet/components/activePopup.vue

131 lines
3.0 KiB
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.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>