|
@@ -18,7 +18,9 @@
|
|
|
<div class="showcase-left" @click="handleEditBanner">
|
|
<div class="showcase-left" @click="handleEditBanner">
|
|
|
<el-image :src="bannerConfig.imageUrl || defaultBannerUrl" fit="cover" class="featured-image">
|
|
<el-image :src="bannerConfig.imageUrl || defaultBannerUrl" fit="cover" class="featured-image">
|
|
|
<template #error>
|
|
<template #error>
|
|
|
- <div class="image-slot"><el-icon><Picture /></el-icon></div>
|
|
|
|
|
|
|
+ <div class="image-slot">
|
|
|
|
|
+ <el-icon><Picture /></el-icon>
|
|
|
|
|
+ </div>
|
|
|
</template>
|
|
</template>
|
|
|
</el-image>
|
|
</el-image>
|
|
|
<el-button type="warning" size="small" class="view-all-btn" @click.stop="handleViewAll">查看全部 ></el-button>
|
|
<el-button type="warning" size="small" class="view-all-btn" @click.stop="handleViewAll">查看全部 ></el-button>
|
|
@@ -135,8 +137,8 @@
|
|
|
</template>
|
|
</template>
|
|
|
</el-dialog>
|
|
</el-dialog>
|
|
|
|
|
|
|
|
- <!-- 选择商品对话框 -->
|
|
|
|
|
- <el-dialog v-model="selectDialog.visible" title="选择商品" width="800px" append-to-body>
|
|
|
|
|
|
|
+ <!-- 选择品牌对话框 -->
|
|
|
|
|
+ <el-dialog v-model="selectDialog.visible" title="选择品牌" width="800px" append-to-body>
|
|
|
<div class="search-bar mb-[10px]">
|
|
<div class="search-bar mb-[10px]">
|
|
|
<el-input v-model="selectDialog.keyword" placeholder="请输入品牌编号或名称" clearable style="width: 280px" />
|
|
<el-input v-model="selectDialog.keyword" placeholder="请输入品牌编号或名称" clearable style="width: 280px" />
|
|
|
<el-button type="primary" @click="loadSearchBrands">搜索</el-button>
|
|
<el-button type="primary" @click="loadSearchBrands">搜索</el-button>
|
|
@@ -217,7 +219,9 @@ const loadBannerConfig = async () => {
|
|
|
try {
|
|
try {
|
|
|
const ossRes = await listByIds(ossId);
|
|
const ossRes = await listByIds(ossId);
|
|
|
if (ossRes.data && ossRes.data.length > 0) displayUrl = ossRes.data[0].url;
|
|
if (ossRes.data && ossRes.data.length > 0) displayUrl = ossRes.data[0].url;
|
|
|
- } catch (e) { console.error('获取图片URL失败', e); }
|
|
|
|
|
|
|
+ } catch (e) {
|
|
|
|
|
+ console.error('获取图片URL失败', e);
|
|
|
|
|
+ }
|
|
|
}
|
|
}
|
|
|
bannerConfig.value = {
|
|
bannerConfig.value = {
|
|
|
id: data.id,
|
|
id: data.id,
|
|
@@ -229,7 +233,9 @@ const loadBannerConfig = async () => {
|
|
|
showText: data.isShow === '1'
|
|
showText: data.isShow === '1'
|
|
|
};
|
|
};
|
|
|
}
|
|
}
|
|
|
- } catch (error) { console.error('加载大图配置失败', error); }
|
|
|
|
|
|
|
+ } catch (error) {
|
|
|
|
|
+ console.error('加载大图配置失败', error);
|
|
|
|
|
+ }
|
|
|
};
|
|
};
|
|
|
|
|
|
|
|
const handleEditBanner = async () => {
|
|
const handleEditBanner = async () => {
|
|
@@ -287,7 +293,9 @@ const saveBannerConfig = async () => {
|
|
|
await loadBannerConfig();
|
|
await loadBannerConfig();
|
|
|
bannerDialog.visible = false;
|
|
bannerDialog.visible = false;
|
|
|
ElMessage.success('保存成功');
|
|
ElMessage.success('保存成功');
|
|
|
- } catch (error) { ElMessage.error('保存失败'); }
|
|
|
|
|
|
|
+ } catch (error) {
|
|
|
|
|
+ ElMessage.error('保存失败');
|
|
|
|
|
+ }
|
|
|
};
|
|
};
|
|
|
|
|
|
|
|
// 标题配置
|
|
// 标题配置
|
|
@@ -308,10 +316,15 @@ const loadHeaderConfig = async () => {
|
|
|
linkUrl: data.linkUrl || ''
|
|
linkUrl: data.linkUrl || ''
|
|
|
};
|
|
};
|
|
|
}
|
|
}
|
|
|
- } catch (error) { console.error('加载标题配置失败', error); }
|
|
|
|
|
|
|
+ } catch (error) {
|
|
|
|
|
+ console.error('加载标题配置失败', error);
|
|
|
|
|
+ }
|
|
|
};
|
|
};
|
|
|
|
|
|
|
|
-const handleEditHeader = () => { Object.assign(headerForm, headerConfig.value); headerDialog.visible = true; };
|
|
|
|
|
|
|
+const handleEditHeader = () => {
|
|
|
|
|
+ Object.assign(headerForm, headerConfig.value);
|
|
|
|
|
+ headerDialog.visible = true;
|
|
|
|
|
+};
|
|
|
|
|
|
|
|
const saveHeaderConfig = async () => {
|
|
const saveHeaderConfig = async () => {
|
|
|
try {
|
|
try {
|
|
@@ -327,7 +340,9 @@ const saveHeaderConfig = async () => {
|
|
|
await loadHeaderConfig();
|
|
await loadHeaderConfig();
|
|
|
headerDialog.visible = false;
|
|
headerDialog.visible = false;
|
|
|
ElMessage.success('保存成功');
|
|
ElMessage.success('保存成功');
|
|
|
- } catch (error) { ElMessage.error('保存失败'); }
|
|
|
|
|
|
|
+ } catch (error) {
|
|
|
|
|
+ ElMessage.error('保存失败');
|
|
|
|
|
+ }
|
|
|
};
|
|
};
|
|
|
|
|
|
|
|
// 推荐位
|
|
// 推荐位
|
|
@@ -385,8 +400,13 @@ const loadBrandList = async () => {
|
|
|
}
|
|
}
|
|
|
};
|
|
};
|
|
|
|
|
|
|
|
-const handleViewAll = () => { if (bannerConfig.value.link) window.open(bannerConfig.value.link, '_blank'); else ElMessage.info('暂未配置跳转链接'); };
|
|
|
|
|
-const handleLinkClick = () => { if (headerConfig.value.linkUrl) window.open(headerConfig.value.linkUrl, '_blank'); };
|
|
|
|
|
|
|
+const handleViewAll = () => {
|
|
|
|
|
+ if (bannerConfig.value.link) window.open(bannerConfig.value.link, '_blank');
|
|
|
|
|
+ else ElMessage.info('暂未配置跳转链接');
|
|
|
|
|
+};
|
|
|
|
|
+const handleLinkClick = () => {
|
|
|
|
|
+ if (headerConfig.value.linkUrl) window.open(headerConfig.value.linkUrl, '_blank');
|
|
|
|
|
+};
|
|
|
|
|
|
|
|
// 选择商品对话框
|
|
// 选择商品对话框
|
|
|
const selectDialog = reactive({
|
|
const selectDialog = reactive({
|
|
@@ -404,7 +424,8 @@ const loadSearchBrands = async () => {
|
|
|
const res: any = await listBrand({
|
|
const res: any = await listBrand({
|
|
|
pageNum: selectDialog.pageNum,
|
|
pageNum: selectDialog.pageNum,
|
|
|
pageSize: selectDialog.pageSize,
|
|
pageSize: selectDialog.pageSize,
|
|
|
- brandName: selectDialog.keyword || undefined
|
|
|
|
|
|
|
+ brandName: selectDialog.keyword || undefined,
|
|
|
|
|
+ dataSource: 'A10'
|
|
|
});
|
|
});
|
|
|
selectDialog.list = (res.rows || []).map((item: any) => ({
|
|
selectDialog.list = (res.rows || []).map((item: any) => ({
|
|
|
id: item.id,
|
|
id: item.id,
|
|
@@ -452,7 +473,7 @@ const handleConfirmBrand = async (row: any) => {
|
|
|
ElMessage.warning('最多只能添加10个品牌');
|
|
ElMessage.warning('最多只能添加10个品牌');
|
|
|
return;
|
|
return;
|
|
|
}
|
|
}
|
|
|
- const maxSort = brandList.value.length > 0 ? Math.max(...brandList.value.map(b => b.sort || 0)) : 0;
|
|
|
|
|
|
|
+ const maxSort = brandList.value.length > 0 ? Math.max(...brandList.value.map((b) => b.sort || 0)) : 0;
|
|
|
await addRecommendLink({ recommendId: recommendId.value, brandId: row.id, sort: maxSort + 1 });
|
|
await addRecommendLink({ recommendId: recommendId.value, brandId: row.id, sort: maxSort + 1 });
|
|
|
linkedBrandIds.value.add(String(row.id));
|
|
linkedBrandIds.value.add(String(row.id));
|
|
|
await loadBrandList();
|
|
await loadBrandList();
|
|
@@ -507,10 +528,13 @@ const saveSortConfig = async () => {
|
|
|
}
|
|
}
|
|
|
};
|
|
};
|
|
|
|
|
|
|
|
-onMounted(() => { loadHeaderConfig(); loadBannerConfig(); loadRecommendId().then(() => loadBrandList()); });
|
|
|
|
|
|
|
+onMounted(() => {
|
|
|
|
|
+ loadHeaderConfig();
|
|
|
|
|
+ loadBannerConfig();
|
|
|
|
|
+ loadRecommendId().then(() => loadBrandList());
|
|
|
|
|
+});
|
|
|
</script>
|
|
</script>
|
|
|
|
|
|
|
|
-
|
|
|
|
|
<style scoped lang="scss">
|
|
<style scoped lang="scss">
|
|
|
.flash-sale-page {
|
|
.flash-sale-page {
|
|
|
min-height: 100vh;
|
|
min-height: 100vh;
|
|
@@ -534,19 +558,35 @@ onMounted(() => { loadHeaderConfig(); loadBannerConfig(); loadRecommendId().then
|
|
|
margin-bottom: 12px;
|
|
margin-bottom: 12px;
|
|
|
cursor: pointer;
|
|
cursor: pointer;
|
|
|
|
|
|
|
|
- &:hover { background: #fafafa; }
|
|
|
|
|
|
|
+ &:hover {
|
|
|
|
|
+ background: #fafafa;
|
|
|
|
|
+ }
|
|
|
|
|
|
|
|
.header-left {
|
|
.header-left {
|
|
|
display: flex;
|
|
display: flex;
|
|
|
align-items: baseline;
|
|
align-items: baseline;
|
|
|
gap: 12px;
|
|
gap: 12px;
|
|
|
|
|
|
|
|
- .section-title { font-size: 16px; font-weight: 600; color: #333; }
|
|
|
|
|
- .section-subtitle { font-size: 12px; color: #999; }
|
|
|
|
|
|
|
+ .section-title {
|
|
|
|
|
+ font-size: 16px;
|
|
|
|
|
+ font-weight: 600;
|
|
|
|
|
+ color: #333;
|
|
|
|
|
+ }
|
|
|
|
|
+ .section-subtitle {
|
|
|
|
|
+ font-size: 12px;
|
|
|
|
|
+ color: #999;
|
|
|
|
|
+ }
|
|
|
}
|
|
}
|
|
|
|
|
|
|
|
.header-right {
|
|
.header-right {
|
|
|
- .more-link { font-size: 12px; color: #666; cursor: pointer; &:hover { color: #333; } }
|
|
|
|
|
|
|
+ .more-link {
|
|
|
|
|
+ font-size: 12px;
|
|
|
|
|
+ color: #666;
|
|
|
|
|
+ cursor: pointer;
|
|
|
|
|
+ &:hover {
|
|
|
|
|
+ color: #333;
|
|
|
|
|
+ }
|
|
|
|
|
+ }
|
|
|
}
|
|
}
|
|
|
}
|
|
}
|
|
|
|
|
|
|
@@ -566,9 +606,30 @@ onMounted(() => { loadHeaderConfig(); loadBannerConfig(); loadRecommendId().then
|
|
|
border-radius: 4px;
|
|
border-radius: 4px;
|
|
|
overflow: hidden;
|
|
overflow: hidden;
|
|
|
|
|
|
|
|
- .featured-image { width: 100%; height: 100%; min-height: 260px; display: block; }
|
|
|
|
|
- .image-slot { display: flex; align-items: center; justify-content: center; width: 100%; height: 260px; background: #f5f5f5; color: #999; font-size: 40px; }
|
|
|
|
|
- .view-all-btn { position: absolute; bottom: 20px; left: 50%; transform: translateX(-50%); z-index: 10; white-space: nowrap; }
|
|
|
|
|
|
|
+ .featured-image {
|
|
|
|
|
+ width: 100%;
|
|
|
|
|
+ height: 100%;
|
|
|
|
|
+ min-height: 260px;
|
|
|
|
|
+ display: block;
|
|
|
|
|
+ }
|
|
|
|
|
+ .image-slot {
|
|
|
|
|
+ display: flex;
|
|
|
|
|
+ align-items: center;
|
|
|
|
|
+ justify-content: center;
|
|
|
|
|
+ width: 100%;
|
|
|
|
|
+ height: 260px;
|
|
|
|
|
+ background: #f5f5f5;
|
|
|
|
|
+ color: #999;
|
|
|
|
|
+ font-size: 40px;
|
|
|
|
|
+ }
|
|
|
|
|
+ .view-all-btn {
|
|
|
|
|
+ position: absolute;
|
|
|
|
|
+ bottom: 20px;
|
|
|
|
|
+ left: 50%;
|
|
|
|
|
+ transform: translateX(-50%);
|
|
|
|
|
+ z-index: 10;
|
|
|
|
|
+ white-space: nowrap;
|
|
|
|
|
+ }
|
|
|
}
|
|
}
|
|
|
|
|
|
|
|
.showcase-right {
|
|
.showcase-right {
|
|
@@ -588,9 +649,9 @@ onMounted(() => { loadHeaderConfig(); loadBannerConfig(); loadRecommendId().then
|
|
|
border-radius: 4px;
|
|
border-radius: 4px;
|
|
|
border: 1px solid #e8e8e8;
|
|
border: 1px solid #e8e8e8;
|
|
|
|
|
|
|
|
-
|
|
|
|
|
-
|
|
|
|
|
- &:hover { background: #fafafa; }
|
|
|
|
|
|
|
+ &:hover {
|
|
|
|
|
+ background: #fafafa;
|
|
|
|
|
+ }
|
|
|
|
|
|
|
|
.close-icon {
|
|
.close-icon {
|
|
|
position: absolute;
|
|
position: absolute;
|
|
@@ -599,7 +660,9 @@ onMounted(() => { loadHeaderConfig(); loadBannerConfig(); loadRecommendId().then
|
|
|
font-size: 18px;
|
|
font-size: 18px;
|
|
|
color: #999;
|
|
color: #999;
|
|
|
cursor: pointer;
|
|
cursor: pointer;
|
|
|
- &:hover { color: #f56c6c; }
|
|
|
|
|
|
|
+ &:hover {
|
|
|
|
|
+ color: #f56c6c;
|
|
|
|
|
+ }
|
|
|
}
|
|
}
|
|
|
|
|
|
|
|
.sort-icon {
|
|
.sort-icon {
|
|
@@ -611,11 +674,14 @@ onMounted(() => { loadHeaderConfig(); loadBannerConfig(); loadRecommendId().then
|
|
|
display: flex;
|
|
display: flex;
|
|
|
gap: 0;
|
|
gap: 0;
|
|
|
|
|
|
|
|
- .arrow-down, .arrow-up {
|
|
|
|
|
|
|
+ .arrow-down,
|
|
|
|
|
+ .arrow-up {
|
|
|
font-size: 16px;
|
|
font-size: 16px;
|
|
|
font-weight: bold;
|
|
font-weight: bold;
|
|
|
color: #999;
|
|
color: #999;
|
|
|
- &:hover { color: #409eff; }
|
|
|
|
|
|
|
+ &:hover {
|
|
|
|
|
+ color: #409eff;
|
|
|
|
|
+ }
|
|
|
}
|
|
}
|
|
|
}
|
|
}
|
|
|
|
|
|
|
@@ -636,12 +702,25 @@ onMounted(() => { loadHeaderConfig(); loadBannerConfig(); loadRecommendId().then
|
|
|
max-width: 100%;
|
|
max-width: 100%;
|
|
|
}
|
|
}
|
|
|
}
|
|
}
|
|
|
- .logo-text { font-size: 14px; font-weight: 600; color: #333; }
|
|
|
|
|
|
|
+ .logo-text {
|
|
|
|
|
+ font-size: 14px;
|
|
|
|
|
+ font-weight: 600;
|
|
|
|
|
+ color: #333;
|
|
|
|
|
+ }
|
|
|
}
|
|
}
|
|
|
|
|
|
|
|
.brand-info {
|
|
.brand-info {
|
|
|
- .brand-name { margin: 0 0 4px 0; font-size: 13px; font-weight: 500; color: #333; }
|
|
|
|
|
- .brand-desc { margin: 0; font-size: 11px; color: #999; }
|
|
|
|
|
|
|
+ .brand-name {
|
|
|
|
|
+ margin: 0 0 4px 0;
|
|
|
|
|
+ font-size: 13px;
|
|
|
|
|
+ font-weight: 500;
|
|
|
|
|
+ color: #333;
|
|
|
|
|
+ }
|
|
|
|
|
+ .brand-desc {
|
|
|
|
|
+ margin: 0;
|
|
|
|
|
+ font-size: 11px;
|
|
|
|
|
+ color: #999;
|
|
|
|
|
+ }
|
|
|
}
|
|
}
|
|
|
}
|
|
}
|
|
|
|
|
|