add

src/router/index.js

@@ -108,6 +108,11 @@ const routerConfig = [
     name: 'insuranceregistersuccess',
     component: () => import('@/views/insurance-register/register-success.vue'),
   },
+  {
+    path: '/sz-home',
+    name: 'sz-home',
+    component: () => import('@/views/sz-home/index.vue'),
+  },
 ];
 // // 无问卷-0001 有问卷未填写-0101 已填写问卷未出结果-0102 已出结果无需领用-0401 已出结果未预约-0201 已预约未采样-0301 已预约已采样-0302
 // const routerMap = {

src/views/insurance-Detection-detail-demo/index.vue

@@ -130,6 +130,60 @@
         {{ openWebAppBtnName }}
       </div>
     </div>
+    <div class="choose-result">
+      <div class="result-title">
+        请选择您的检测结果
+      </div>
+      <div class="result-tips">
+        <div>根据结果示例图判断您的检测结果</div>
+        <div>
+          结果示例图
+        </div>
+      </div>
+      <div class="result-radio">
+        <van-radio-group
+          v-model="radio"
+          direction="horizontal"
+        >
+          <van-radio name="阳性">
+            阳性
+          </van-radio>
+          <van-radio name="阳性">
+            阴性
+          </van-radio>
+        </van-radio-group>
+      </div>
+    </div>
+    <div class="result-list-img">
+      <div
+        v-for="(item,index) in images"
+        :key="item"
+        @click="changeImg(index)"
+      >
+        <van-image
+
+          width="100"
+          height="100"
+          :src="item"
+        />
+      </div>
+    </div>
+    <div class="result-list-tips">
+      <div>
+        1.请将带有阳性检测结果的试剂盒和包装盒上的条码一起拍照上传，确保两个元素在同一张照片里<span>示例图</span>
+      </div>
+      <div>
+        2.请保留好此阳性试剂盒，领取甲基化检测时需要回收
+      </div>
+    </div>
+    <van-image-preview
+      v-model="showImg"
+      :images="images"
+    >
+      <template v-slot:index>
+        第{{ index }}页
+      </template>
+    </van-image-preview>
   </div>
 </template>
 <script>
@@ -159,6 +213,10 @@ export default {
   },
   data() {
     return {
+      show: false,
+      images: ['https://img01.yzcdn.cn/vant/apple-1.jpg',
+        'https://img01.yzcdn.cn/vant/apple-2.jpg'],
+      index:1,
       picaWechat:window._picaWechat,
       status: '',
       headerInfo: {
@@ -228,6 +286,10 @@ export default {
     },
     getJumpToWebapp() {
     },
+    changeImg(index) {
+      this.showImg = true;
+      this.index = index;
+    },
     mapStatus(inquiryStatus) {
       console.log('--mapStatus', inquiryStatus);
       const s = String(inquiryStatus);

src/views/sz-home/index.vue

+<template>
+  <div class="insurance-sz">
+    <div class="text">
+      服务商H5
+    </div>
+    <div class="bottom">
+      <div
+        class="bottom-text"
+        @click="() =>show=true"
+      >
+        <div class="bottom-text-left">
+          选择被保险人
+        </div>
+        <div class="bottom-text-right">
+          <span v-if="person">{{ person }}</span>
+          <span v-else>请选择</span><van-icon name="arrow" />
+        </div>
+      </div>
+      <div class="bottom-btn">
+        <div
+          class="btn"
+          @click="toPage"
+        >
+          领取权益
+        </div>
+      </div>
+    </div>
+    <van-popup
+      v-model="show"
+      closeable
+      round
+      position="bottom"
+      :style="{ height: '40%' }"
+    >
+      <div class="popup-title">
+        选择被保险人
+      </div>
+      <div class="popup-list">
+        <van-radio-group v-model="person">
+          <van-cell-group>
+            <van-cell
+              v-for="(item) in userinfo"
+              :key="item.id"
+              clickable
+            >
+              <div class="popup-list-item">
+                <div class="name">
+                  {{ item.name }}
+                </div>
+                <div class="info">
+                  <div class="phoneNum">
+                    <span>手机号码：</span>
+                    <span>{{ item.phoneNum }}</span>
+                  </div>
+                  <div class="idCard">
+                    <span>身份证号：</span>
+                    <span>{{ item.idCard }}</span>
+                  </div>
+                </div>
+              </div>
+              <template #right-icon>
+                <van-radio :name="item.name" />
+              </template>
+            </van-cell>
+          </van-cell-group>
+        </van-radio-group>
+      </div>
+      <div
+        class="popup-btn"
+        @click="show=false
+        "
+      >
+        领取权益
+      </div>
+    </van-popup>
+  </div>
+</template>
+
+<script>
+
+export default {
+  data() {
+    return {
+      show: false,
+      person: null,
+      userinfo: [
+        {
+          id:1,
+          name: '陈琳',
+          phoneNum: '15966877677',
+          idCard:'610321********0429'
+        },
+        {
+          id:2,
+          name: '刘鑫琳',
+          phoneNum: '15966877677',
+          idCard:'610321********0429'
+        },
+      ]
+    };
+  },
+  mounted() {
+
+  },
+  methods: {
+
+    toPage() {
+      const externalOrderNo = Math.floor(new Date().getTime() / 1000);
+      const projectEquityNo = 'SZ202305031000597601';
+      console.log(externalOrderNo);
+      this.$router.push({
+        path: '/appoint-demo',
+        query: {
+          externalOrderNo:'SZ' + externalOrderNo,
+          projectEquityNo
+        }
+      });
+    }
+  }
+};
+</script>
+<style lang="scss" scoped>
+.insurance-sz{
+  height: 100vh;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  .text{
+    height: 25px;
+    font-size: 18px;
+    font-family: PingFangSC-Regular, PingFang SC;
+    font-weight: 400;
+    color: #5C5C5C;
+    line-height: 25px;
+
+  }
+  .bottom{
+    position: fixed;
+    bottom: 0;
+    width: 100vw;
+    background: #fff;
+    padding-bottom: 27px;
+    .bottom-text{
+      padding: 10px 21px 10px 15px;
+      display: flex;
+      justify-content: space-between;
+      .bottom-text-left{
+        height: 18px;
+        font-size: 13px;
+        font-family: PingFangSC-Medium, PingFang SC;
+        font-weight: 600;
+        color: #000000;
+        line-height: 18px;
+        span{
+          margin-right: 6px;
+        }
+      }
+      .bottom-text-right{
+        height: 18px;
+        font-size: 13px;
+        font-weight: 600;
+        line-height: 18px;
+        font-family: PingFangSC-Regular, PingFang SC;
+        color: #999999;
+      }
+    }
+    .bottom-btn{
+      background: #FFFFFF;
+      box-shadow: inset 0px 1px 0px 0px #E9E9E9;
+      overflow: hidden;
+      .btn{
+        width: 351px;
+        height: 40px;
+        background: #00BDA5;
+        border-radius: 20px;
+        margin: 4px auto;
+        font-size: 16px;
+        font-family: PingFangSC-Semibold, PingFang SC;
+        font-weight: 600;
+        color: #FFFFFF;
+        line-height: 40px;
+        text-align: center;
+
+      }
+    }
+  }
+}
+.popup-title{
+  height: 25px;
+  font-size: 18px;
+  font-family: PingFangSC-Medium, PingFang SC;
+  font-weight: 600;
+  color: #02120F;
+  line-height: 25px;
+  text-align: center;
+  padding: 17px 0;
+}
+/deep/ .van-cell{
+  padding-top:0 ;
+  padding-bottom: 0;
+}
+.popup-list-item{
+  display: flex;
+  align-items: center;
+  padding: 23px 0;
+  .name{
+    width: 45px;
+    font-size: 15px;
+    font-family: PingFangSC-Semibold, PingFang SC;
+    font-weight: 600;
+    color: #212121;
+    text-align: center;
+    margin-right: 12px;
+  }
+  .info{
+    .phoneNum{
+      height: 14px;
+      font-size:14px;
+      font-family: PingFangSC-Regular, PingFang SC;
+      font-weight: 400;
+      color: #666666;
+      line-height: 14px;
+      margin-bottom: 6px;
+    }
+    .idCard{
+      height: 14px;
+      font-size:14px;
+      font-family: PingFangSC-Regular, PingFang SC;
+      font-weight: 400;
+      color: #666666;
+      line-height: 14px;
+    }
+  }
+}
+.popup-btn{
+  margin: 4px auto;
+  width: 351px;
+  height: 40px;
+  background: #00BDA5;
+  border-radius: 20px;
+  font-size: 16px;
+  text-align: center;
+  font-family: PingFangSC-Semibold, PingFang SC;
+  font-weight: 600;
+  color: #FFFFFF;
+  line-height: 40px;
+}
+</style>