页面调整图片预览

peng

2025-10-27 61d8f6fc00e4fa295971a32439cc7d3b8e87621a

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

@@ -140,6 +140,20 @@
            <template v-else>暂无标签</template>
            </span>
          </p>
          <p class="item">
            <span class="label">上级店铺：</span>
            <span class="info">
              {{storeRelationship.upStore ? storeRelationship.upStore.storeName:'暂无'}}
            </span>
          </p>
          <p class="item">
            <span class="label">下级店铺：</span>
            <span class="info">
              {{ storeRelationship.downStore && storeRelationship.downStore.length
              ? storeRelationship.downStore.map(store => store.storeName).join('、')
              : '暂无' }}
            </span>
          </p>
          <div style="display: flex;align-items: center;justify-content: center;">
            <Button type="primary"  @click="addStoreTag(storeInfo)">新增标签</Button>
          </div>
@@ -162,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">
@@ -177,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">
@@ -601,10 +618,19 @@
      </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>

<script>
  import { getStoreRelationship} from "@/api/storeRelationship"
  import { getTag,bind,getStoreTagsById,delTagByStoreTagRefId } from "@/api/store-tag"
  import ossManage from "@/views/sys/oss-manage/ossManage";
  import * as RegExp from '@/libs/RegExp.js';
@@ -620,6 +646,7 @@
    },
    data() {
      return {
        storeRelationship:{},//店铺关系对象
        tagOptions:[],
        submitLoading:false,
        tagForm:{
@@ -890,9 +917,32 @@
        },
        refundOrderData: [],//售后单数据
        refundOrderTotal: 0,//售后单总条数
        // 图片预览相关
        previewModal: false,
        previewImageUrl: "",
        previewTitle: "图片预览",
      };
    },
    watch: {
      // 监听路由对象变化
      $route(to, from) {
        console.log(to.name)
        if (to.name === 'shop-detail' && to.query.id) {
          if (to.query.id !== from.query.id) {
            this.id = to.query.id;
            this.init();
          }
        }
      }
    },
    methods: {
      getStoreRelationship(){
        getStoreRelationship(this.id).then(res =>{
            if (res.code === 200){
              this.$set(this, "storeRelationship", res.data);
            }
          })
      },
      handleDeleteTag(storeTagRefId){
        console.log(storeTagRefId)
        delTagByStoreTagRefId(storeTagRefId).then(res=>{
@@ -954,7 +1004,7 @@
      },
      init() {
        this.getStoreTags();

        this.getStoreRelationship();
        this.getStoreTag();
        //查店铺基本信息
        this.getStoreInfo();
@@ -1103,10 +1153,21 @@
          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;
      this.init();
      console.log("加载页面")
    }
  };
</script>