web-retail-h5/components/znNewsPopup.vue

156 lines
3.4 KiB
Vue

<template>
<view>
<u-popup class="notice" width="70%" v-for="(item, index) in popupList" @close="closeTap(item, 1)"
:key="index"
mode="center" :show="item.noticeFlag">
<view class="title">
{{ item.title }}
</view>
<view class="close-icons" @click='closeTap(item, 1)'>
<u-icon name="close"></u-icon>
</view>
<view class="img-auto" v-html="item.content"></view>
<view class="surebtn1">
<!-- <view class="btn hh"closeTap(item, 1)>取消</view> -->
<view class="btn" @click="closeTap(item, 2)">已读</view>
</view>
</u-popup>
</view>
</template>
<script>
import * as api from '@/config/login.js'
export default {
name: "znNewsPopup",
props: {
},
data() {
return {
popupList: [],
};
},
mounted() {
// this.getUserTc2();
},
methods: {
closeTap(item, type){
if (type == 1) {
//关闭
item.noticeFlag = false;
this.$forceUpdate(); // 强制更新视图
if (item.pkId === this.popupList[0].pkId) {
this.$emit("childMethodTrigger");
}
} else {
api.getNoticeDetail({ pkId: item.pkId, functionType: 2 }).then((res) => {});
item.noticeFlag = false;
this.$forceUpdate(); // 强制更新视图
if (item.pkId === this.popupList[0].pkId) {
this.$emit("childMethodTrigger");
}
}
},
getUserTc2() {
api.getIndexPopmail().then((res) => {
if (res.code == 200) {
if (res.data.length > 0) {
this.popupList = res.data;
this.popupList.forEach((ele) => {
ele.noticeFlag = true;
});
} else {
this.$emit("childMethodTrigger");
}
}
});
},
},
};
</script>
<style lang="scss" scoped>
.close-icons{
position: absolute;
right: 30rpx;
top: 30rpx;
}
::v-deep .u-popup__content{
height: 1120rpx;
width: 690rpx;
}
.notice{
height: 700rpx;
}
::v-deep .el-dialog__headerbtn i {
font-size: 24px;
//visibility: hidden;
color: #333;
}
::v-deep .el-dialog{
margin-top:113px !important;
height:815px;
margin-bottom: 0;
}
::v-deep .el-dialog__body{
padding-bottom: 20px;
}
.surebtn1 {
display: flex;
align-items: center;
justify-content: center;
padding-top: 20px;
//justify-content: space-around;
.btn {
width: 200px;
height: 66px;
background: #d5251d;
border-radius: 6px 6px 6px 6px;
text-align: center;
font-size: 22px;
font-family: PingFang SC-Medium, PingFang SC;
font-weight: 500;
color: #ffffff;
line-height: 66px;
cursor: pointer;
}
.hh {
background: #cccccc;
margin-right: 78px;
}
}
::v-deep .el-dialog__header {
text-align: center;
border-bottom: 1px solid rgba(0, 0, 0, 0.1);
padding-bottom: 20px;
}
::v-deep .el-dialog__title {
font-size: 32px;
color: #333;
font-weight: bold;
}
::v-deep .el-dialog__body {
text-align: center;
padding-top: 10px;
}
.title {
font-size: 40rpx;
text-align: center;
margin: 20rpx auto;
color: #333;
font-weight: bold;
}
.img-auto {
text-align: center;
height: 685px;
overflow-y: auto;
::v-deep p {
font-size: 14px;
}
::v-deep img {
max-width: 100%;
height: auto;
}
}
</style>