页面调整图片预览

peng

2025-10-27 52c46fb923bf6fb6c15932a7f51c8fef2fd7266f

 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>
@@ -242,6 +248,14 @@
                  :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>
@@ -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();