页面调整图片预览

peng

2025-10-27 52c46fb923bf6fb6c15932a7f51c8fef2fd7266f

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

@@ -73,11 +73,14 @@
                  shape="square"
                  icon="ios-person"
                  size="default"
                  :src="endpoint + '/' + shopForm.storeLogo"
                  :src="shopForm.storeLogo"
                />
                <div>
                  <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>
@@ -208,11 +211,14 @@
                  shape="square"
                  icon="ios-person"
                  size="default"
                  :src="endpoint + '/' + shopForm.licencePhoto"
                  :src="shopForm.licencePhoto"
                />
                <div>
                  <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>
@@ -231,7 +237,7 @@
                  size="100"
                  icon="md-add"
                  @click.native="handleCLickImg('legalPhoto', 0)"
                  :src="endpoint + '/' + shopForm.legalPhoto[0]"
                  :src="shopForm.legalPhoto[0]"
                />
                <Avatar
                  class="ml_10 legal-photo"
@@ -239,9 +245,17 @@
                  size="100"
                  icon="md-add"
                  @click.native="handleCLickImg('legalPhoto', 1)"
                  :src="endpoint + '/' + 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>
@@ -477,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",
          },
@@ -499,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",
          },
@@ -550,6 +572,9 @@
      infoResult: {}, // 店铺详情
      picIndex: "", // 存储身份证图片下标，方便赋值
      currentAddress:"", //当前选中的地址
      // 图片预览相关
      previewModal: false,
      previewImageUrl: "",
    };
  },
  methods: {
@@ -839,6 +864,15 @@
        });
      }
    },
    // 图片预览功能
    previewImage(url) {
      if (url) {
        this.previewImageUrl = url;
        this.previewModal = true;
      } else {
        this.$Message.warning("暂无图片可预览");
      }
    }
  },
  created() {
    this.init();