群发居民

src/project/saas/AppCooperationPropaganda/addPropaganda.vue

@@ -1,7 +1,5 @@
 <template>
   <div class="addPropaganda">
-    <!-- <div>{{ this.type==0? "群发居民群": this.type==1? "群发居民": "群发朋友圈" }}</div> -->
-
     <div class="task_name">
       <div><span class="color_red">*</span><span class="title">任务名称</span></div>
       <u-input v-model="value" type="text" placeholder="请输入" maxlength="15" class="inpt"/>
@@ -10,10 +8,44 @@
     <div class="send_scope">
       <div><span class="color_red">*</span><span class="title">发送范围</span></div>
       <div>
+        <span>请选择</span><span><u-icon name="arrow-right" color="#CCD0D3"></u-icon></span>
+      </div>
+    </div>
 
+    <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>
+      <div class="content_text">
+        <u-input v-model="value" type="textarea" height="372" :auto-height="true" placeholder="请输入政策、活动、节日问候等内容" />
+      </div>
+      <div class="content_fodder">
+        <div style="color: #8E8F91;">添加素材</div>
+        <div class="fodder_alls">
+          <div class="fodder_add"><u-icon name="plus" color="#CCD0D3" size="32"></u-icon></div>
         </div>
       </div>
     </div>
+
+    <div class="isExamine">
+      <div class="examineChange">
+        <div>宣发需要审批</div>
+        <u-switch v-model="checked" size="40" @change="checked = !!checked"></u-switch>
+      </div>
+      <div class="examine_person" v-if="checked == true">
+        <div><span class="color_red">*</span><span class="title">审批人</span></div>
+        <div>
+          <span>请选择人员</span><span><u-icon name="arrow-right" color="#CCD0D3"></u-icon></span>
+        </div>
+      </div>
+    </div>
+
+    <div class="btn">
+      <div class="submit">发送</div>
+    </div>
+
+  </div>
 </template>
 
 <script>
@@ -22,9 +54,13 @@ export default {
   data() {
     return {
       type: '',
+      value: '',
+      checked: false,
     }
   },
-  methods: {},
+  methods: {
+    
+  },
   onShow() {
   },
   onLoad(o) {
@@ -37,8 +73,11 @@ export default {
 <style lang="scss" scoped>
 .addPropaganda {
   font-size: 32px !important;
+  padding-bottom: 120px;
+  box-sizing: border-box;
   .task_name,
-  .send_scope {
+  .send_scope,
+  .send_content {
     background: #FFF;
     padding: 32px;
     box-sizing: border-box;
@@ -50,12 +89,69 @@ export default {
     }
   }
 
+  .send_scope {
+    display: flex;
+    justify-content: space-between;
+  }
 
+  .send_content {
+    .content_title {
+      display: flex;
+      justify-content: space-between;
+    }
+    .content_text {
+      margin-top: 12px;
+      border-bottom: 1px solid #DDD;
+    }
+    .content_fodder {
+      margin-top: 16px;
+      .fodder_alls {
+        display: flex;
+        margin-top: 16px;
+        .fodder_add {
+          border: 2px solid #DBDCDF;
+          padding: 20px 24px;
+          box-sizing: border-box;
+          border-radius: 8px;
+        }
+      }
+      
+    }
+  }
+
+  .isExamine {
+    background: #FFF;
+    padding: 0 32px;
+    box-sizing: border-box;
+    box-shadow: inset 0px -1px 0px 0px #DDDDDD;
+    
+    .examineChange,
+    .examine_person {
+      display: flex;
+      justify-content: space-between;
+      padding: 26px 0;
+      box-sizing: border-box;
+    }
+
+    .examine_person {
+      border-top: 2px solid #DDD;
+    }
+  }
   .color_red {
     color: #FF4466;
   }
   .inpt {
     margin-left: 14px;
   }
+  .btn {
+    position: fixed;
+    bottom: 0;
+    left: 0;
+    width: 100%;
+    height: 128px;
+    padding: 24px 32px;
+    box-sizing: border-box;
+    background: #FFF;
+  }
 }
 </style>