预览弹框

src/project/saas/AppCooperationPropaganda/AppCooperationPropaganda.vue

@@ -29,9 +29,9 @@
     </div>
     <AiEmpty description="暂无数据" v-if="!list.length"/>
 
-    <AiFixedBtn>
+    <div class="btn">
-      <div class="addBtn iconfont iconfont-iconfangda" @tap="toAdd"></div>
+      <div class="addBtn" @click="toAdd">新增群发{{tabIndex==0? '居民群': tabIndex==1? '居民':'朋友圈'}}</div>
-    </AiFixedBtn>
+    </div>
 
     <u-popup v-model="filterShow" mode="bottom" border-radius="14">
       <div class="popup">
@@ -196,6 +196,10 @@ export default {
 
 <style lang="scss" scoped>
 .AppCooperationPropaganda {
+
+  padding-bottom: 130px;
+  box-sizing: border-box;
+
   ::v-deep .AiTopFixed .content {
     padding: 0;
   }
@@ -309,19 +313,29 @@ export default {
     }
   }
 
-  .addBtn {
+  .btn {
-    width: 96px;
+    position: fixed;
-    height: 96px;
+    bottom: 0;
-    flex-shrink: 0;
+    left: 0;
-    background: $uni-color-primary;
+    background: #FFF;
-    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
-    font-size: 48px;
-    color: #fff;
-    border-radius: 50%;
-    justify-content: center;
-    align-items: center;
     display: flex;
+    width: 100%;
+    height: 128px;
+    padding: 24px 32px;
+    box-sizing: border-box;
+
+    .addBtn {
+      flex: 1;
+      height: 80px;
+      line-height: 80px;
+      text-align: center;
+      border-radius: 8px;
+      border: 2px solid #CCCCCC;
+      background: #1365DD;
+      color: #FFF;
     }
+  }
+
   .popup {
     box-sizing: border-box;
     // height: 800px;

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;

src/project/saas/AppCooperationPropaganda/scopedSelect.vue

@@ -29,6 +29,15 @@
         <u-icon name="arrow-right" color="#CCD0D3"></u-icon>
       </div>
     </div>
+    <div class="items">
+      <div>性别</div>
+      <div class="sex">
+        <span :class="sex == 0? 'active':''" @click="sex = 0">全部</span>
+        <span :class="sex == 1? 'active':''" @click="sex = 1">男</span>
+        <span :class="sex == 2? 'active':''" @click="sex = 2">女</span>
+      </div>
+    </div>
+
 
     <u-calendar v-model="showCalendar" mode="range" @change="selectDate"></u-calendar>
 
@@ -47,7 +56,8 @@ export default {
       type: "",
       showCalendar: false,
       startTime: '',
-      endTime: ''
+      endTime: '',
+      sex: "0",
     }
   },
   methods: {
@@ -92,6 +102,28 @@ export default {
     margin-bottom: 8px;
   }
 
+  .items {
+    padding: 32px;
+    box-sizing: border-box;
+    background: #FFF;
+    .sex {
+      margin-top: 32px;
+      span {
+        display: inline-block;
+        width: 30%;
+        border: 2px solid #CCCCCC;
+        text-align: center;
+        padding: 20px 0;
+        box-sizing: border-box;
+        margin-right: 16px;
+        border-radius: 8px;
+      }
+      .active {
+        background: #1365DD;
+        color: #FFF;
+      }
+    }
+  }
 
   .btn {
     position: fixed;