预约体检展示照片bug

src/views/index/components/item.vue

@@ -6,22 +6,14 @@
       </div>
       <!-- $router.push(item.fileList[0]&&item.fileList[0].url) -->
       <div class="detail">
-        <img :src="eyes" alt="" />点击查看服务套餐详情
+        <img :src="eyes" alt="" @click="openModel" />点击查看服务套餐详情
         <!-- {{item.fileList[0].url}} -->
       </div>
     </div>
     <div class="right">
-      <a-button
-        v-if="listType == 2"
-        style="background: #ffcc00; color: white; border: none; width: 86px"
-        @click="handleReadDetail"
-        >查看</a-button
-      >
-      <a-button
-        v-else
-        style="background: #3f7ffb; color: white; border: none; width: 86px"
-        @click="handleSubmit"
-        >立即预约
+      <a-button v-if="listType == 2" style="background: #ffcc00; color: white; border: none; width: 86px"
+        @click="handleReadDetail">查看</a-button>
+      <a-button v-else style="background: #3f7ffb; color: white; border: none; width: 86px" @click="handleSubmit">立即预约
       </a-button>
       <div class="date">
         {{
@@ -31,18 +23,14 @@
         }}
       </div>
     </div>
-    <a-modal width="1000px" :footer="null">
-      <img
-        style="width: 100%; padding: 20px 20px"
-        :src="item.fileList[0] && item.fileList[0].url"
-        alt=""
-      />
+    <a-modal v-model="visible" width="1000px" :footer="null">
+      <img style="width: 100%; padding: 20px 20px" :src="item.fileList[0] && item.fileList[0].url" alt="" />
     </a-modal>
   </div>
 </template>
 
 <script>
-export default {
+  export default {
     name: "item",
     components: {},
     props: {
@@ -56,11 +44,12 @@ export default {
       },
       item: {
         type: Object,
-      default: () => {},
+        default: () => { },
       },
     },
     data() {
       return {
+        visible: false,
         eyes: require("@/assets/imgs/index/eyes.png"),
       };
     },
@@ -89,12 +78,15 @@ export default {
           params: this.item,
         });
       },
+      openModel() {
+        this.visible = true
+      }
     },
-};
+  };
 </script>
 
 <style lang="less" scoped>
-.item {
+  .item {
     display: flex;
     justify-content: space-between;
     background: #fafafa;
@@ -133,5 +125,5 @@ export default {
         }
       }
     }
-}
+  }
 </style>
\ No newline at end of file