预约体检展示照片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,107 +23,107 @@
         }}
       </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 {
-  name: "item",
-  components: {},
-  props: {
-    listType: {
-      type: String,
-      default: "",
+  export default {
+    name: "item",
+    components: {},
+    props: {
+      listType: {
+        type: String,
+        default: "",
+      },
+      id: {
+        type: String | Number,
+        default: "",
+      },
+      item: {
+        type: Object,
+        default: () => { },
+      },
     },
-    id: {
-      type: String | Number,
-      default: "",
+    data() {
+      return {
+        visible: false,
+        eyes: require("@/assets/imgs/index/eyes.png"),
+      };
     },
-    item: {
-      type: Object,
-      default: () => {},
-    },
-  },
-  data() {
-    return {
-      eyes: require("@/assets/imgs/index/eyes.png"),
-    };
-  },
-  methods: {
-    // 立即预约
-    handleSubmit() {
-      console.log("立即预约~", this.item.chooseList);
+    methods: {
+      // 立即预约
+      handleSubmit() {
+        console.log("立即预约~", this.item.chooseList);
 
-      // 本地存储数据-该产品下可选择的体检套餐
-      window.localStorage.setItem("reservedInfo", JSON.stringify(this.item));
-      this.$router.push({
-        name: "Flow",
-        query: {
-          id: this.id, //客户id
-          servicepackageId: this.item.id, //产品id
-        },
-      });
-    },
-    // 查看-预约详情
-    handleReadDetail() {
-      this.$router.push({
-        name: "Detail",
-        query: {
-          id: this.id,
-        },
-        params: this.item,
-      });
+        // 本地存储数据-该产品下可选择的体检套餐
+        window.localStorage.setItem("reservedInfo", JSON.stringify(this.item));
+        this.$router.push({
+          name: "Flow",
+          query: {
+            id: this.id, //客户id
+            servicepackageId: this.item.id, //产品id
+          },
+        });
+      },
+      // 查看-预约详情
+      handleReadDetail() {
+        this.$router.push({
+          name: "Detail",
+          query: {
+            id: this.id,
+          },
+          params: this.item,
+        });
+      },
+      openModel() {
+        this.visible = true
+      }
     },
-  },
-};
+  };
 </script>
 
 <style lang="less" scoped>
-.item {
-  display: flex;
-  justify-content: space-between;
-  background: #fafafa;
-  padding: 14.5px 12px;
-  border-radius: 8px;
-  margin-top: 12px;
+  .item {
+    display: flex;
+    justify-content: space-between;
+    background: #fafafa;
+    padding: 14.5px 12px;
+    border-radius: 8px;
+    margin-top: 12px;
 
-  .right {
-    text-align: right;
+    .right {
+      text-align: right;
 
-    .date {
-      color: #999999;
-      font-size: 14px;
-      margin-top: 12px;
+      .date {
+        color: #999999;
+        font-size: 14px;
+        margin-top: 12px;
+      }
     }
-  }
 
-  .left {
-    .title {
-      color: #333333;
-      font-size: 14px;
-      font-weight: bold;
-    }
+    .left {
+      .title {
+        color: #333333;
+        font-size: 14px;
+        font-weight: bold;
+      }
 
-    .detail {
-      font-size: 14px;
-      color: #999999;
-      line-height: 30px;
-      margin-top: 12px;
-      cursor: pointer;
+      .detail {
+        font-size: 14px;
+        color: #999999;
+        line-height: 30px;
+        margin-top: 12px;
+        cursor: pointer;
 
-      img {
-        position: relative;
-        top: -2px;
-        margin-right: 3px;
+        img {
+          position: relative;
+          top: -2px;
+          margin-right: 3px;
+        }
       }
     }
   }
-}
-</style>
+</style>
\ No newline at end of file