页面调整

peng

2025-10-27 b57c81c1da4ad71edf2073c21e7cebb38123b961

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

@@ -121,6 +121,43 @@
            </span>
          </p>
          <p class="item">
            <span class="label">店铺标签：</span>
            <span class="info">
              <template v-if="tagList?.length > 0">
              <!-- 遍历标签列表 -->
                <span v-for="(tag, index) in tagList" :key="tag.id">
                  {{ tag.tagName }}
                    <button
                      style="width: 20px; height: 20px; line-height: 1; border: none; background: #f0f0f0; border-radius: 50%; cursor: pointer; margin-left: 4px; font-size: 12px; display: inline-flex; align-items: center; justify-content: center;"
                      @click.stop="handleDeleteTag(tag.id, index)"
                      title="删除标签"
                    >
                    ×
                  </button>
                  <template v-if="index !== tagList.length - 1">、</template>
                </span>
              </template>
            <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>
          <p class="item">
            <span class="label">店铺简介：</span>
            <span class="info">
              {{storeInfo.storeDesc?storeInfo.storeDesc:'暂未完善'}}
@@ -139,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">
@@ -154,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">
@@ -559,14 +599,39 @@
            </Row>
          </div>
        </TabPane>

        <Modal
          v-model="showModal"
          title="新增标签"
          width="800"
          :mask-closable="false"
        >
          <Select v-model="tagForm.storeTagId" placeholder="请选择" @on-query-change="searchChange" filterable
                  clearable style="width: 150px">
            <Option v-for="item in tagOptions" :value="item.id" :key="item.id">{{ item.tagName }}</Option>
          </Select>
          <div slot="footer">
            <Button @click="showModal = false">取消</Button>
            <Button type="primary" @click="handleSubmit" :loading="submitLoading">确定</Button>
          </div>
        </Modal>
      </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';
  import {getCategoryTree} from "@/api/goods";
@@ -577,15 +642,24 @@
  export default {
    name: "member",
    components: {

      ossManage,
    },
    data() {
      return {
        storeRelationship:{},//店铺关系对象
        tagOptions:[],
        submitLoading:false,
        tagForm:{
          storeId:null,
          storeTagId:"",
        },
        showModal:false,
        id: "",//店铺id
        categories: [], //店铺静音范围
        loading: true, // 表单加载状态
        storeInfo: {},//店铺信息
        storeInfo: {
        },//店铺信息
        tagList:[],
        checkAllGroup: [], //选中的经营分类
        selectDate: null, // 申请时间

@@ -843,10 +917,95 @@
        },
        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=>{
          if (res.code === 200){
            this.$Message.success("删除成功")
          }
          this.getStoreTags();
        })

      },

      getStoreTags(){
        getStoreTagsById(this.id).then(res =>{
          if (res.code === 200){
            this.$set(this, "tagList", res.data);
          }
        })

      },

      searchChange(val){
        this.getStoreTag(val)
      },
      getStoreTag(val){
        const params = {
          tagName: ''
        }
        if (val) {
          params.tagName = val;
        } else {
          params.tagName = ''
        }
        getTag(params).then(res =>{
          if (res.code ===200){
            this.tagOptions = res.data
          }
        })
      },
      handleSubmit(){
        if (this.tagForm.storeTagId === null || this.tagForm.storeTagId ===""){
          this.$Message.error("请选择标签")
         return
        }
        this.showModal = false;
          bind(this.tagForm).then(res =>{
            if (res.code === 200){

          }
          this.getStoreTags();
            this.getStoreTag();
        })

      },
      addStoreTag(info){
        console.log(info)
        this.tagForm.storeId = info.storeId;
        this.tagForm.storeTagId = "";
        this.showModal = true;
      },
      init() {
        this.getStoreTags();
        this.getStoreRelationship();
        this.getStoreTag();
        //查店铺基本信息
        this.getStoreInfo();
        //查询店铺分类
@@ -994,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>