证件照上传提示

src/pages/wo/writeInformation/index.vue

@@ -8,9 +8,9 @@
     <div class="user">
       <div class="cell flex idPhoto">
         <div class="label">
-          <p>证件照</p>
+          <p>头像</p>
         </div>
-        <div class="img" @click="upLoadImg">
+        <div class="img" @click="upLoadImg1">
           <image v-if="idPhoto" mode="widthFix" :src="idPhoto" alt=""></image>
           <image
             v-else
@@ -58,6 +58,21 @@
       </p>
       <div class="btn" :class="{ btn1: onInput }" @click="next">下一步</div>
     </div>
+    <div class="dialogToast flex" v-if="showDialog">
+      <div class="content">
+        <div class="title">提示</div>
+        <div class="main">
+          <p>上传清晰个人头像照片以制作实体通行证，如以下示例</p>
+          <div class="img">
+            <image
+              mode="aspectFill"
+              src="http://mayi-newshop.oss-cn-shanghai.aliyuncs.com/public/png/2d1bfc07-b87f-4f17-af97-369d24e4f53e.png"
+            ></image>
+          </div>
+        </div>
+        <div class="btn" @click="confirmToast">确定</div>
+      </div>
+    </div>
   </div>
 </template>
 
@@ -71,6 +86,7 @@ export default {
       name: "",
       idNum: "",
       code: "",
+      showDialog: false,
     };
   },
   components: {},
@@ -115,6 +131,13 @@ export default {
     console.log("---onShow");
   },
   methods: {
+    confirmToast() {
+      this.showDialog = false;
+      this.upLoadImg();
+    },
+    upLoadImg1() {
+      this.showDialog = true;
+    },
     // 上传图片
     upLoadImg() {
       let self = this;
@@ -227,14 +250,14 @@ export default {
                     });
                     wx.setStorage({
                       key: "sessionid",
-                      data: res.data.data.sessionId
+                      data: res.data.data.sessionId,
                     });
                     wx.reLaunch({
-                      url: '/pages/wo/improveInformation/main' // 指定页面的url
+                      url: "/pages/wo/improveInformation/main", // 指定页面的url
                     });
                   } else {
                     wx.showToast({
-                      title: '登录失败，请重试！',
+                      title: "登录失败，请重试！",
                       icon: "error",
                       duration: 1000,
                     });
@@ -351,6 +374,54 @@ export default {
 </script>
 
 <style lang="scss" scoped>
+.dialogToast {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  z-index: 999;
+  justify-content: center;
+  align-items: center;
+  background: rgba(0, 0, 0, 0.6);
+  .content {
+    width: 80%;
+    background: #fff;
+    border-radius: 10px;
+    .title {
+      font-size: 16px;
+      color: #333;
+      text-align: center;
+      padding: 10px 0;
+    }
+    .main {
+      padding: 20px;
+      p {
+        font-size: 15px;
+        color: #666;
+        text-align: center;
+      }
+      .img {
+        margin: 0 auto;
+        width: 100px;
+        height: 120px;
+        border: 1px solid #e5e5e5;
+        margin-top: 20px;
+        image {
+          width: 100%;
+          height: 100%;
+        }
+      }
+    }
+    .btn {
+      border-top: 1px solid #e5e5e5;
+      font-size: 16px;
+      color: #576B95;
+      text-align: center;
+      padding: 14px 0;
+    }
+  }
+}
 .writeInformation {
   .cell {
     align-items: center;