预览弹框

src/project/saas/AppCooperationPropaganda/addPropaganda.vue

@@ -15,7 +15,7 @@
     <div class="send_content">
       <div class="content_title">
         <div><span class="color_red">*</span><span class="title">发送内容</span></div>
-        <div style="color: #3399FF;">预览</div>
+        <div style="color: #3399FF;" @click="preview">预览</div>
       </div>
       <div class="content_text">
         <u-input v-model="value" type="textarea" height="372" :auto-height="true" placeholder="请输入政策、活动、节日问候等内容" />
@@ -45,6 +45,23 @@
       </div>
     </div>
 
+    <div class="mask" v-show="showPopup" @tap="showPopup = false">
+      <div class="noticeModal" @tap.stop>
+        <div class="body">
+          <div class="text_content">
+            <img class="text_left" src="https://cdn.cunwuyun.cn/dvcp/announce/avatar.png" />
+            <div class="text_right">
+              居民每个月最多接收来自同一企业管理员的4条群发消息，咨询电话：
+            </div>
+          </div>
+          <div class="file_content"></div>
+        </div>
+        <div class="footer">
+          <div class="exit" @click="showPopup = false">退出预览</div>
+        </div>
+      </div>
+    </div>
+
     <div class="btn">
       <div class="submitBtn">发送</div>
     </div>
@@ -65,6 +82,7 @@ export default {
         files: []
       },
       userList: [],
+      showPopup: false,
     }
   },
   methods: {
@@ -72,6 +90,11 @@ export default {
     toSleectScoped() {
       uni.navigateTo({url: `./sendScoped?type=${this.type}`})
     },
+    // 预览
+    preview() {
+      this.showPopup = true;
+    },
+
     getDeptUser() {
       this.selectEnterpriseContact({
         fromDepartmentId: 0,
@@ -171,6 +194,83 @@ export default {
   .inpt {
     margin-left: 14px;
   }
+
+  .mask {
+    position: fixed;
+    top: 0;
+    bottom: 0;
+    margin: 0;
+    left: 0;
+    right: 0;
+    background: rgba(#000, 0.6);
+    z-index: 202103021409;
+    width: 100%;
+    height: 100%;
+  }
+
+  ::v-deep .noticeModal {
+    position: fixed;
+    left: 50%;
+    top: 45%;
+    transform: translate(-50%, -50%);
+    width: 90%;
+    height: 85%;
+
+    .body {
+      background: #EBECF0;
+      border-radius: 16px 16px 0 0;
+      padding: 32px;
+      box-sizing: border-box;
+      height: 100%;
+      overflow-y: auto;
+      font-size: 28px;
+      font-weight: 400;
+      color: #333;
+      line-height: 48px;
+
+      .text_content {
+        display: flex;
+        .text_left { 
+          margin-right: 32px;
+          width: 84px;
+          height: 84px;
+        }
+        .text_right {
+          background: #FFF;
+          border-radius: 10px;
+          padding: 24px;
+          box-sizing: border-box;
+          position: relative;
+
+          &::before {
+            position: absolute;
+            content: "";
+            width: 0;
+            height: 0;
+            top: 18px;
+            left: 0;
+            border-top: 12px solid transparent;
+            border-bottom: 12px solid transparent;
+            border-left: 12px solid transparent;
+            border-right: 12px solid #fff;
+            transform: translate(-100%, 0%);
+          }
+        }
+      }
+    }
+
+    .footer {
+      width: 100%;
+      height: 112px;
+      line-height: 112px;
+      text-align: center;
+      background: #FFF;
+      border-radius: 0 0 16px 16px;
+      border-top: 2px solid #EEEEEE;
+    }
+  }
+
+
   .btn {
     position: fixed;
     bottom: 0;