22

packages/wxwork/Announce/AppAnnounce/components/List.vue

@@ -83,16 +83,27 @@
           </template>
         </el-table-column>
       </ai-table>
-      <ai-dialog
-        :visible.sync="isShow"
-        width="590px"
-        title="定时发送"
-        customFooter>
-        <el-button @click="toAdd('0', '')">成员一键群发</el-button>
-        <el-button @click="toAdd('1', '')">通知成员群发</el-button>
-        <div class="dialog-footer" slot="footer">
+      <div class="dialog" v-if="isShow">
+        <div class="mask"></div>
+        <div class="dialog-wrapper">
+          <img src="https://cdn.cunwuyun.cn/dvcp/announce/close1.png" @click="isShow = false" />
+          <h2>选择群发方式</h2>
+          <p>可根据不同的使用需求，选择相应的群发方式</p>
+          <div class="dialog-list">
+            <div class="item" :class="[currIndex === '0' ? 'active' : '']" @click="currIndex = '0'">
+              <img src="https://cdn.cunwuyun.cn/dvcp/announce/icon1.png" />
+              <h3>成员一键群发</h3>
+              <p>成员收到通知后，可一键直接群发到居民群任务开始后不支持关闭</p>
+            </div>
+            <div class="item" :class="[currIndex === '1' ? 'active' : '']" @click="currIndex = '1'">
+              <img src="https://cdn.cunwuyun.cn/dvcp/announce/icon2.png" />
+              <h3>通知成员群发</h3>
+              <p>员工收到通知后，需通过群发助手发送至居民群任务到期后自动关闭，未完成的成员无法再执行</p>
+            </div>
+          </div>
+          <el-button style="width: 106px;" size="small" type="primary" icon="iconfont" @click="isShow = false, toAdd(currIndex, '')">去创建</el-button>
         </div>
-      </ai-dialog>
+      </div>
     </template>
   </ai-list>
 </template>
@@ -117,6 +128,7 @@
           startTime: '',
           endTime: ''
         },
+        currIndex: '0',
         name: '',
         isShow: false,
         user: [],
@@ -261,6 +273,110 @@
 <style lang="scss" scoped>
   .AppAnnounce {
     height: 100%;
+
+    .dialog {
+      position: fixed;
+      left: 0;
+      top: 0;
+      z-index: 111;
+      width: 100%;
+      height: 100%;
+
+      .mask {
+        position: fixed;
+        left: 0;
+        top: 0;
+        z-index: 1;
+        width: 100%;
+        height: 100%;
+        background: rgba(0, 0, 0, 0.2);
+      }
+
+      .dialog-wrapper {
+        position: absolute;
+        left: 50%;
+        top: 50%;
+        z-index: 2;
+        width: 600px;
+        height: 532px;
+        padding: 40px 64px;
+        box-sizing: border-box;
+        background: #FFFFFF;
+        border-radius: 4px;
+        text-align: center;
+        transform: translate(-50%, -50%);
+
+        & > img {
+          position: absolute;
+          right: 16px;
+          top: 16px;
+          z-index: 2;
+          width: 16px;
+          height: 16px;
+          cursor: pointer;
+        }
+
+        h2 {
+          margin-bottom: 12px;
+          font-size: 24px;
+          color: #222;
+        }
+
+        & > p {
+          margin-bottom: 40px;
+          font-size: 12px;
+          color: #888888;
+        }
+
+        .dialog-list {
+          display: flex;
+          justify-content: space-between;
+          margin-bottom: 40px;
+
+          & > div {
+            flex: 1;
+            height: 280px;
+            padding: 24px;
+            background: #FFFFFF;
+            border: 1px solid #D0D4DC;
+            border-radius: 8px;
+            text-align: left;
+            cursor: pointer;
+            transition: all ease 0.3s;
+
+            &.active, &:hover {
+              background: #F7FAFF;
+              border: 1px solid #2266FF;
+            }
+
+            img {
+              width: 80px;
+              height: 80px;
+              margin-bottom: 32px;
+            }
+
+            p {
+              line-height: 22px;
+              font-size: 14px;
+              color: #888;
+              text-align: center;
+            }
+
+            h3 {
+              margin-bottom: 8px;
+              font-size: 18px;
+              color: #222;
+              font-weight: 600;
+              text-align: center;
+            }
+
+            &:first-child {
+              margin-right: 40px;
+            }
+          }
+        }
+      }
+    }
     .userinfo {
       display: flex;
       align-items: center;