页面调整图片预览

peng

2025-10-27 61d8f6fc00e4fa295971a32439cc7d3b8e87621a

 manager/src/views/seller/shop/shopDetail.vue

@@ -176,7 +176,9 @@
          <p class="item">
            <span class="label">身份证照片：</span>
            <span class="info">
              <img style="height: 100px;width: 100px" class="mr_10" v-for="item in storeInfo.legalPhoto" :src="item" :key="item">
              <img style="height: 100px;width: 100px; cursor: pointer;" class="mr_10" v-for="(item, index) in storeInfo.legalPhoto" :src="item" :key="item" @click="previewImage(item, '身份证照片(' + (index + 1) + ')')">
              <Button v-if="storeInfo.legalPhoto && storeInfo.legalPhoto.length > 0" @click="previewImage(storeInfo.legalPhoto[0], '身份证正面')" type="info" size="small" style="margin-left: 10px;">预览图片</Button>
              <Button v-if="storeInfo.legalPhoto && storeInfo.legalPhoto.length > 1" @click="previewImage(storeInfo.legalPhoto[1], '身份证反面')" type="info" size="small" style="margin-left: 10px;">预览图片</Button>
            </span>
          </p>
          <p class="item">
@@ -191,7 +193,8 @@
          <p class="item">
            <span class="label">营业执照电子版：</span>
            <span class="info">
              <img style="height: 100px;width: 100px" :src="storeInfo.licencePhoto">
              <img style="height: 100px;width: 100px; cursor: pointer;" :src="storeInfo.licencePhoto" @click="previewImage(storeInfo.licencePhoto, '营业执照')">
              <Button v-if="storeInfo.licencePhoto" @click="previewImage(storeInfo.licencePhoto, '营业执照')" type="info" size="small" style="margin-left: 10px;">预览图片</Button>
            </span>
          </p>
          <p class="item">
@@ -615,6 +618,14 @@
      </Tabs>
    </Card>

    <!-- 图片预览模态框 -->
    <Modal v-model="previewModal" :title="previewTitle" width="600">
      <img :src="previewImageUrl" alt="预览图片" style="width: 100%; height: auto;" />
      <div slot="footer">
        <Button @click="previewModal = false">关闭</Button>
      </div>
    </Modal>

  </div>
</template>

@@ -906,6 +917,10 @@
        },
        refundOrderData: [],//售后单数据
        refundOrderTotal: 0,//售后单总条数
        // 图片预览相关
        previewModal: false,
        previewImageUrl: "",
        previewTitle: "图片预览",
      };
    },
    watch: {
@@ -1138,6 +1153,16 @@
          this.refundOrderSearchForm.endDate = v[1];
        }
      },
      // 图片预览功能
      previewImage(url, title) {
        if (url) {
          this.previewImageUrl = url;
          this.previewTitle = title || "图片预览";
          this.previewModal = true;
        } else {
          this.$Message.warning("暂无图片可预览");
        }
      }
    },
    mounted() {
      this.id = this.$route.query.id;