分享

src/mods/conv/AppHealthReport/AppHealthReport.vue

@@ -42,9 +42,39 @@
       <AiEmpty v-if="list.length==0"/>
     </div>
     <div class="btn-wrapper">
-      <div class="share">分享</div>
+      <div class="share" @click="show = true">分享</div>
       <div class="addBtn" @click="toReport" hover-class="text-hover">添加上报人员</div>
     </div>
+
+    <u-popup  v-model="show" mode="bottom" border-radius="30" height="200px">
+			<div class="shareBox">
+        <h2>分享到：</h2>
+        <div class="card">
+          <div class="itemCard" @click="registerCode()">
+            <img src="./components/code.png" alt="" class="imgs" />
+            <div class="names">扫码登记</div>
+          </div>
+          <div class="itemCard" @click="invitation()">
+            <img src="./components/wechat.png" alt="" class="imgs" />
+            <div class="names">微信邀请</div>
+          </div>
+        </div>
+      </div>
+		</u-popup>
+
+    <u-popup v-model="showCode" mode="center" border-radius="14" width="90%" height="450px">
+			<div class="showCode">
+        <div class="qrCode">
+          <img src="./components/code.png" alt="">
+        </div>
+        <h2>返乡登记</h2>
+        <p>请外来及返乡人员使用微信扫码主动报备行程</p>
+        <div class="btn">
+          <div class="cancel" @click="showCode = false">取消</div>
+          <div class="save" @click="savePoster">保存海报</div>
+        </div>
+      </div>
+		</u-popup>
   </div>
 </template>
 
@@ -60,6 +90,8 @@ export default {
       pageShow: false,
       current: 1,
       total: 0,
+      show: false,
+      showCode: false,
     }
   },
 
@@ -86,6 +118,18 @@ export default {
       this.$linkTo('./AddUser')
     },
 
+    // 扫码登记
+    registerCode() {
+      this.show = false;
+      this.showCode = true;
+    },
+    // 微信邀请
+    invitation() {
+      console.log('222');
+    },
+    // 保存海报
+    savePoster() {},
+
     getList() {
 
       this.$instance.post(`/app/appepidemicreportmember/list?openId=${this.user.openId}`, null, {
@@ -274,5 +318,64 @@ export default {
       color: #fff;
     }
   }
+
+  .shareBox {
+    padding: 32px;
+    box-sizing: border-box;
+    .card {
+      display: flex;
+      margin-top: 60px;
+      .itemCard {
+        flex: 1;
+        text-align: center;
+        // width: 25%;
+        img {
+          width: 96px;
+          height: 96px;
+        }
+      }
+    }
+  }
+
+  .showCode {
+    padding: 64px;
+    box-sizing: border-box;
+    text-align: center;
+    .qrCode {
+      img {
+        width: 320px;
+        height: 320px;
+      }
+    }
+    h2 {
+      font-size: 36px;
+      font-weight: 600;
+      padding: 32px 0;
+    }
+    p {
+      font-size: 32px;
+      margin-bottom: 80px;
+    }
+
+    .btn {
+      display: flex;
+      justify-content: space-between;
+      .cancel, 
+      .save {
+        width: 45%;
+        text-align: center;
+        height: 80px;
+        line-height: 80px;
+        border-radius: 40px;
+      }
+      .cancel {
+        background: #EFF2F7;
+      }
+      .save {
+        background: #383A49;
+        color: #FFF;
+      }
+    }
+  }
 }
 </style>

src/mods/conv/AppReturnHomeRegister/AppReturnHomeRegister.vue

@@ -45,17 +45,31 @@
     <u-popup  v-model="show" mode="bottom" border-radius="30" height="200px">
 			<div class="shareBox">
         <h2>分享到：</h2>
-        <div>
-          <div class="itemCard" @click="toPage(item.url)" v-for="(item, i) in list" :key="i">
-            <img :src="item.img" alt="" class="imgs" />
-            <div class="names">{{ item.name }}</div>
+        <div class="card">
+          <div class="itemCard" @click="registerCode()">
+            <img src="./components/code.png" alt="" class="imgs" />
+            <div class="names">扫码登记</div>
+          </div>
+          <div class="itemCard" @click="invitation()">
+            <img src="./components/wechat.png" alt="" class="imgs" />
+            <div class="names">微信邀请</div>
           </div>
         </div>
       </div>
 		</u-popup>
 
-    <u-popup v-model="showCode" mode="center" border-radius="14" width="90%" height="150px">
-			
+    <u-popup v-model="showCode" mode="center" border-radius="14" width="90%" height="450px">
+			<div class="showCode">
+        <div class="qrCode">
+          <img src="./components/code.png" alt="">
+        </div>
+        <h2>返乡登记</h2>
+        <p>请外来及返乡人员使用微信扫码主动报备行程</p>
+        <div class="btn">
+          <div class="cancel" @click="showCode = false">取消</div>
+          <div class="save" @click="savePoster">保存海报</div>
+        </div>
+      </div>
 		</u-popup>
   </div>
 </template>
@@ -96,9 +110,19 @@ export default {
     toReport() {
       this.$linkTo('./Add')
     },
-    // policyDetail() {
+    
+    // 扫码登记
+    registerCode() {
+      this.show = false;
+      this.showCode = true;
+    },
+    // 微信邀请
+    invitation() {
+      console.log('222');
+    },
+    // 保存海报
+    savePoster() {},
 
-    // }
     getList() {
       this.$instance.post(`/app/appepidemicbackhomerecord/list`, null, {
         params: {
@@ -121,14 +145,8 @@ export default {
       })
     },
 
-    shareBtn() {
-      // console.log('分享');
-
-    }
   },
 
-  
-
   onReachBottom() {
     this.current++
     this.getList()
@@ -273,6 +291,60 @@ export default {
   .shareBox {
     padding: 32px;
     box-sizing: border-box;
+    .card {
+      display: flex;
+      margin-top: 60px;
+      .itemCard {
+        flex: 1;
+        text-align: center;
+        // width: 25%;
+        img {
+          width: 96px;
+          height: 96px;
+        }
+      }
+    }
+  }
+
+  .showCode {
+    padding: 64px;
+    box-sizing: border-box;
+    text-align: center;
+    .qrCode {
+      img {
+        width: 320px;
+        height: 320px;
+      }
+    }
+    h2 {
+      font-size: 36px;
+      font-weight: 600;
+      padding: 32px 0;
+    }
+    p {
+      font-size: 32px;
+      margin-bottom: 80px;
+    }
+
+    .btn {
+      display: flex;
+      justify-content: space-between;
+      .cancel, 
+      .save {
+        width: 45%;
+        text-align: center;
+        height: 80px;
+        line-height: 80px;
+        border-radius: 40px;
+      }
+      .cancel {
+        background: #EFF2F7;
+      }
+      .save {
+        background: #383A49;
+        color: #FFF;
+      }
+    }
   }
   
 }