页面调整图片预览

peng

2025-10-27 61d8f6fc00e4fa295971a32439cc7d3b8e87621a

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

@@ -79,6 +79,9 @@
                  <Button @click="handleCLickImg('storeLogo')" type="primary"
                    >选择图片</Button
                  >
                  <Button v-if="shopForm.storeLogo" @click="previewImage(shopForm.storeLogo)" type="info" style="margin-left: 10px;"
                    >预览图片</Button
                  >
                </div>
              </FormItem>

@@ -214,6 +217,9 @@
                  <Button @click="handleCLickImg('licencePhoto')" type="primary"
                  >选择图片</Button
                  >
                  <Button v-if="shopForm.licencePhoto" @click="previewImage(shopForm.licencePhoto)" type="info" style="margin-left: 10px;"
                  >预览图片</Button
                  >
                </div>
              </FormItem>
              <Divider orientation="left">法人信息</Divider>
@@ -239,9 +245,17 @@
                  size="100"
                  icon="md-add"
                  @click.native="handleCLickImg('legalPhoto', 1)"
                  :src="shopForm.legalPhoto[1]"
                  :src=" shopForm.legalPhoto[1]"
                />
                <span>点击图片上传身份证正反面，要求身份证清晰，四角无缺漏</span>
                <div v-if="shopForm.legalPhoto[0] || shopForm.legalPhoto[1]" style="margin-top: 10px;">
                  <Button v-if="shopForm.legalPhoto[0]" @click="previewImage(shopForm.legalPhoto[0])" type="info"
                  >预览图片</Button
                  >
                  <Button v-if="shopForm.legalPhoto[1]" @click="previewImage(shopForm.legalPhoto[1])" type="info" style="margin-left: 10px;"
                  >预览图片</Button
                  >
                </div>
              </FormItem>

              <Divider orientation="left">结算银行信息</Divider>
@@ -404,6 +418,14 @@
      </div>
    </Modal>

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

    <multipleMap ref="map" @callback="getAddress" />
  </div>
</template>
@@ -427,6 +449,7 @@

  data() {
    return {
      endpoint: this.endpoint,
      shopId: this.$route.query.shopId, // 店铺id
      isRead: false, // 是否只读，只有在店铺通过审核才可修改
      selectedFormBtnName: "", // 点击图片绑定form
@@ -476,7 +499,7 @@
          { required: true, message: "联系人手机号不能为空" },
          {
            type: "string",
            pattern: /^1[3|4|5|6|7|8][0-9]{9}$/,
            pattern: /^1[3|4|5|6|7|8|9][0-9]{9}$/,
            message: "手机号格式出错",
            trigger: "blur",
          },
@@ -498,7 +521,7 @@
        salesConsigneeMobile: [
          {
            type: "string",
            pattern: /^1[3|4|5|6|7|8][0-9]{9}$/,
            pattern: /^1[3|4|5|6|7|8|9][0-9]{9}$/,
            message: "手机号格式出错",
            trigger: "blur",
          },
@@ -549,6 +572,9 @@
      infoResult: {}, // 店铺详情
      picIndex: "", // 存储身份证图片下标，方便赋值
      currentAddress:"", //当前选中的地址
      // 图片预览相关
      previewModal: false,
      previewImageUrl: "",
    };
  },
  methods: {
@@ -838,6 +864,15 @@
        });
      }
    },
    // 图片预览功能
    previewImage(url) {
      if (url) {
        this.previewImageUrl = url;
        this.previewModal = true;
      } else {
        this.$Message.warning("暂无图片可预览");
      }
    }
  },
  created() {
    this.init();