From 61d8f6fc00e4fa295971a32439cc7d3b8e87621a Mon Sep 17 00:00:00 2001
From: peng <peng.com>
Date: 星期一, 27 十月 2025 16:02:19 +0800
Subject: [PATCH] 页面调整图片预览
---
manager/src/views/seller/shop/shopDetail.vue | 180 ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++-
1 files changed, 175 insertions(+), 5 deletions(-)
diff --git a/manager/src/views/seller/shop/shopDetail.vue b/manager/src/views/seller/shop/shopDetail.vue
index c6bccdb..07b507d 100644
--- a/manager/src/views/seller/shop/shopDetail.vue
+++ b/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>
--
Gitblit v1.8.0