add

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

@@ -297,3 +297,96 @@
   }
 }
 
+.choose-result{
+  padding: 20px 15px;
+  background: #ffffff;
+  border-radius: 11px;
+  .result-title{
+    height: 18px;
+    font-size: 18px;
+    font-family: PingFangSC-Medium, PingFang SC;
+    font-weight: 600;
+    color: #212121;
+    line-height: 18px;
+    margin-bottom: 14px;
+  }
+  .result-tips{
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    width: 300px;
+    height: 32px;
+    padding: 0 10px;
+    background: #FFFBE7;
+    border-radius: 2px;
+    font-size:13px;
+    font-family: PingFangSC-Regular, PingFang SC;
+    font-weight: 400;
+    color: #FF720C;
+    line-height: 32px;
+     margin-bottom: 20px;
+    .tips-right{
+      width: 73px;
+      height: 21px;
+      border-radius: 11px;
+      border: 1px solid #FF720C;
+      line-height: 21px;
+      text-align: center;
+    }
+  }
+  .result-radio{
+    margin-bottom: 20px;
+  }
+  .radio-name{
+    height: 14px;
+    font-size: 14px;
+    font-family: PingFangSC-Medium, PingFang SC;
+    font-weight: 600;
+    color: #212121;
+    line-height: 14px;
+  }
+  .result-list-img{
+    display: flex;
+    .img-item{
+      width: 75px;
+      height: 75px;
+      border-radius: 4px;
+      margin-right: 7px;
+      /deep/.van-image__img{
+        border-radius: 4px;
+      }
+    }
+    .list-img-item{
+      position: relative;
+
+    }
+    .close-btn{
+      position: absolute;
+      z-index: 2;
+      right: 0;
+      top: 0;
+      width: 15px;
+      transform: translate(-3px,-3px);
+      height: 15px;
+      background: url('~@/assets/images/close.png') 0 0 / 100%
+    }
+  }
+}
+.result-list-tips{
+  .list-tips-item{
+    font-size: 13px;
+    font-family: PingFangSC-Regular, PingFang SC;
+    font-weight: 400;
+    color: #999999;
+    line-height: 18px;
+    margin-bottom:9px ;
+    span{
+      color: #1677FE;
+      margin-left: 4px;
+    }
+  }
+}
+/deep/ .van-radio__icon--checked .van-icon{
+  background: #00bda5;
+  border-color: #00bda5;
+}

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

@@ -119,6 +119,74 @@
           </div>
         </div>
       </div>
+      <div class="choose-result">
+        <div class="result-title">
+          请选择您的检测结果
+        </div>
+        <div class="result-tips">
+          <div class="tips-left">
+            根据结果示例图判断您的检测结果
+          </div>
+          <div
+            class="tips-right"
+            @click="showSample(1)"
+          >
+            结果示例图
+          </div>
+        </div>
+        <div class="result-radio">
+          <van-radio-group
+            v-model="result"
+            direction="horizontal"
+          >
+            <van-radio name="阳性">
+              <div class="radio-name">
+                阳性
+              </div>
+            </van-radio>
+            <van-radio name="阴性">
+              <div class="radio-name">
+                阴性
+              </div>
+            </van-radio>
+          </van-radio-group>
+        </div>
+        <div
+          v-if="result=='阳性'"
+          class="result-list-img"
+        >
+          <div
+            v-for="(item,index) in images"
+            :key="item"
+            class="list-img-item"
+            @click="changeImg(index)"
+          >
+            <div
+              class="close-btn"
+              @click="remove(item)"
+            />
+            <van-image
+
+              class="img-item"
+              :src="item"
+            />
+          </div>
+        </div>
+        <div
+          v-if="result=='阳性'"
+          class="result-list-tips"
+        >
+          <div class="list-tips-item">
+            1.请将带有阳性检测结果的试剂盒和包装盒上的条码一起拍照上传，确保两个元素在同一张照片里.<span @click="showSample(2)">示例图</span>
+          </div>
+          <div
+            class="list-tips-item"
+            style="margin-bottom:0"
+          >
+            2.请保留好此阳性试剂盒，领取甲基化检测时需要回收
+          </div>
+        </div>
+      </div>
     </div>
     <div
       class="submit-container"
@@ -130,55 +198,10 @@
         {{ 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"
+      :images="imageslist"
     >
       <template v-slot:index>
         第{{ index }}页
@@ -213,10 +236,17 @@ export default {
   },
   data() {
     return {
-      show: false,
+      showImg: false,
       images: ['https://img01.yzcdn.cn/vant/apple-1.jpg',
+        'https://img01.yzcdn.cn/vant/apple-2.jpg', 'https://img01.yzcdn.cn/vant/apple-1.jpg',
+        'https://img01.yzcdn.cn/vant/apple-2.jpg'],
+      resultImages: ['https://img01.yzcdn.cn/vant/apple-1.jpg',
         'https://img01.yzcdn.cn/vant/apple-2.jpg'],
-      index:1,
+        sampleImages: [
+        'https://img01.yzcdn.cn/vant/apple-2.jpg', 'https://img01.yzcdn.cn/vant/apple-1.jpg',
+        'https://img01.yzcdn.cn/vant/apple-2.jpg'],
+      index: 1,
+      result:null,
       picaWechat:window._picaWechat,
       status: '',
       headerInfo: {
@@ -231,6 +261,7 @@ export default {
       dataList: [],
       openWebAppBtnName: '提交检测结果',
       yunOrderNo: '',
+      imageslist:[]
     };
   },
   created() {
@@ -285,10 +316,26 @@ export default {
       });
     },
     getJumpToWebapp() {
+    },
+    showSample(index) {
+      this.showImg = true;
+      this.index = 1;
+      if (index === 1) {
+        this.imageslist = this.resultImages;
+
+      } else {
+        this.imageslist = this.sampleImages;
+      }
+
     },
     changeImg(index) {
+      console.log(index);
+      this.imageslist = this.images;
       this.showImg = true;
-      this.index = index;
+      this.index = index + 1;
+    },
+    remove(item) {
+      this.images = this.images.filter(ele => ele == item);
     },
     mapStatus(inquiryStatus) {
       console.log('--mapStatus', inquiryStatus);