refactor(indexDecorate): 将静态资源迁移至OSS并优化轮播组件样式
- 将所有组件中的静态图片路径从本地 /static 迁移至 OSS 远程地址 - 更新 ChannelFloor、BrandWall 等组件的默认图片资源路径 - 更新 page-decoration/pc/config.js 中所有默认配置的图片路径 - 优化 Carousel 组件:fitMode 默认改为 contain,添加圆角与阴影样式 - Carousel 新增 banners 字段兼容映射,支持多种数据格式 - Carousel 指示器颜色改为深色,布局改为 flex 居中展示
@@ -3,7 +3,7 @@ var BASE = {
|
||||
* @description api请求基础路径
|
||||
*/
|
||||
API_DEV: {
|
||||
manager: "http://127.0.0.1:8887",
|
||||
manager: "https://admin-api.pickmall.cn",
|
||||
},
|
||||
API_PROD: {
|
||||
manager: "https://admin-api.pickmall.cn"
|
||||
|
||||
|
Before Width: | Height: | Size: 452 KiB |
|
Before Width: | Height: | Size: 358 KiB |
|
Before Width: | Height: | Size: 356 KiB |
|
Before Width: | Height: | Size: 366 KiB |
|
Before Width: | Height: | Size: 364 KiB |
|
Before Width: | Height: | Size: 523 KiB |
|
Before Width: | Height: | Size: 578 KiB |
|
Before Width: | Height: | Size: 985 KiB |
|
Before Width: | Height: | Size: 798 KiB |
|
Before Width: | Height: | Size: 19 KiB |
|
Before Width: | Height: | Size: 23 KiB |
|
Before Width: | Height: | Size: 24 KiB |
|
Before Width: | Height: | Size: 22 KiB |
|
Before Width: | Height: | Size: 25 KiB |
|
Before Width: | Height: | Size: 18 KiB |
|
Before Width: | Height: | Size: 21 KiB |
|
Before Width: | Height: | Size: 18 KiB |
|
Before Width: | Height: | Size: 22 KiB |
|
Before Width: | Height: | Size: 19 KiB |
|
Before Width: | Height: | Size: 6.5 KiB |
|
Before Width: | Height: | Size: 7.4 KiB |
|
Before Width: | Height: | Size: 7.5 KiB |
|
Before Width: | Height: | Size: 7.4 KiB |
|
Before Width: | Height: | Size: 280 KiB |
|
Before Width: | Height: | Size: 662 KiB |
|
Before Width: | Height: | Size: 613 KiB |
|
Before Width: | Height: | Size: 714 KiB |
|
Before Width: | Height: | Size: 577 KiB |
|
Before Width: | Height: | Size: 362 KiB |
|
Before Width: | Height: | Size: 744 KiB |
|
Before Width: | Height: | Size: 720 KiB |
|
Before Width: | Height: | Size: 592 KiB |
|
Before Width: | Height: | Size: 12 KiB |
|
Before Width: | Height: | Size: 3.1 KiB |
|
Before Width: | Height: | Size: 3.2 KiB |
|
Before Width: | Height: | Size: 3.2 KiB |
|
Before Width: | Height: | Size: 1.3 MiB |
@@ -138,3 +138,19 @@ export const getDistributionCash = (params) => {
|
||||
export const auditDistributionCash = (id,params) => {
|
||||
return postRequest(`/distribution/cash/audit/${id}`, params)
|
||||
}
|
||||
|
||||
// 兼容别名导出
|
||||
export const getDistributionCustomerPage = (params) => getCustomerRelations(params);
|
||||
export const getDistributionBindLogPage = (params) => {
|
||||
if (params && params.id) {
|
||||
return getCustomerRelationLogs(params.id);
|
||||
}
|
||||
return getRequest('/distribution/customerRelation/logs', params);
|
||||
};
|
||||
export const rebindDistributionCustomer = (params) => {
|
||||
return rebindCustomerRelation({
|
||||
memberId: params.memberId,
|
||||
distributionId: params.distributionId,
|
||||
reason: params.reason || params.remark
|
||||
});
|
||||
};
|
||||
|
||||
@@ -42,6 +42,7 @@ export const otherRouter = {
|
||||
path: "home",
|
||||
title: '首页',
|
||||
name: "home_index",
|
||||
meta: { firstRouterName: "home_index" },
|
||||
component: () => import("@/views/home/home.vue")
|
||||
},
|
||||
{
|
||||
|
||||
@@ -84,3 +84,7 @@ export const orderStatusList = [
|
||||
label:'提现完成'
|
||||
}
|
||||
]
|
||||
|
||||
// 兼容别名导出
|
||||
export const bindStatusList = relationStatusList;
|
||||
export const bindChangeTypeList = customerRelationChangeTypeList;
|
||||
|
||||
@@ -171,9 +171,12 @@
|
||||
<script setup>
|
||||
import { ref, reactive, onMounted } from "vue";
|
||||
import {
|
||||
getCustomerRelations,
|
||||
getCustomerRelationLogs,
|
||||
getDistributionCustomerPage,
|
||||
getDistributionBindLogPage,
|
||||
getDistributionListData,
|
||||
rebindCustomerRelation,
|
||||
rebindDistributionCustomer,
|
||||
} from "@/api/distribution";
|
||||
import { bindStatusList, bindSourceList, bindChangeTypeList } from "./dataJson";
|
||||
|
||||
@@ -1,18 +1,26 @@
|
||||
.home-container {
|
||||
width: 100%;
|
||||
max-width: 100%;
|
||||
overflow-x: hidden;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.card {
|
||||
margin: 10px 10px 20px;
|
||||
padding: 0 20px 20px;
|
||||
background: #fff;
|
||||
border: 1px solid #e7e7e7;
|
||||
|
||||
border-radius: 0.4em;
|
||||
box-sizing: border-box;
|
||||
max-width: calc(100% - 20px);
|
||||
}
|
||||
h4 {
|
||||
margin: 20px 0;
|
||||
font-size: 18px;
|
||||
}
|
||||
.icon {
|
||||
margin-left: 40px;
|
||||
margin-right: 40px;
|
||||
margin-left: 0;
|
||||
margin-right: 0;
|
||||
}
|
||||
.count-item,
|
||||
.todo-item,
|
||||
@@ -29,6 +37,11 @@ h4 {
|
||||
margin-right: 20px;
|
||||
}
|
||||
|
||||
.count-list {
|
||||
flex-wrap: wrap;
|
||||
gap: 16px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
.todo-list {
|
||||
flex-wrap: wrap;
|
||||
gap: 12px;
|
||||
@@ -68,10 +81,14 @@ h4 {
|
||||
cursor: pointer;
|
||||
color: #fff;
|
||||
justify-content: flex-start;
|
||||
flex: 1 1 200px;
|
||||
min-width: 180px;
|
||||
margin-right: 0;
|
||||
box-sizing: border-box;
|
||||
|
||||
> div:first-child {
|
||||
margin-left: 40px;
|
||||
margin-right: 20px;
|
||||
margin-left: 24px;
|
||||
margin-right: 16px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
}
|
||||
@@ -111,6 +128,7 @@ h4 {
|
||||
align-items: stretch;
|
||||
flex-wrap: wrap;
|
||||
gap: 20px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
.svg {
|
||||
width: 20px;
|
||||
@@ -118,8 +136,11 @@ h4 {
|
||||
}
|
||||
.flow-item {
|
||||
display: flex;
|
||||
flex: 1 1 620px;
|
||||
flex: 1 1 540px;
|
||||
min-width: 0;
|
||||
box-sizing: border-box;
|
||||
flex-wrap: wrap;
|
||||
gap: 20px;
|
||||
}
|
||||
.flow {
|
||||
background: #ebebeb88 !important;
|
||||
@@ -127,8 +148,10 @@ h4 {
|
||||
padding: 0;
|
||||
}
|
||||
.flow-member {
|
||||
width: 200px;
|
||||
margin-right: 20px;
|
||||
width: 180px;
|
||||
margin-right: 0;
|
||||
flex-shrink: 0;
|
||||
box-sizing: border-box;
|
||||
font-weight: bold;
|
||||
|
||||
background: #fff;
|
||||
@@ -149,12 +172,12 @@ h4 {
|
||||
}
|
||||
}
|
||||
.flow-box {
|
||||
padding: 37px;
|
||||
padding: 24px 16px;
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
justify-content: space-between;
|
||||
margin: 10px 0 20px;
|
||||
gap: 20px;
|
||||
gap: 16px;
|
||||
> .flow-box-item {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
@@ -171,26 +194,27 @@ h4 {
|
||||
}
|
||||
.flow-splice {
|
||||
width: 100%;
|
||||
gap: 20px;
|
||||
gap: 16px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
.flow-box-splice {
|
||||
background: #fff;
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
margin-right: 20px;
|
||||
padding: 36px;
|
||||
margin-right: 0;
|
||||
padding: 24px 16px;
|
||||
font-weight: bold;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
box-sizing: border-box;
|
||||
flex-direction: column;
|
||||
> div {
|
||||
margin: 4px 0;
|
||||
}
|
||||
> .counts {
|
||||
color: #ffaa71;
|
||||
}
|
||||
|
||||
flex-direction: column;
|
||||
}
|
||||
.flow-box-splice:nth-last-of-type(1) {
|
||||
margin-right: 0;
|
||||
@@ -207,16 +231,17 @@ h4 {
|
||||
}
|
||||
.flow-wrapper {
|
||||
background: #fff;
|
||||
padding: 0 30px;
|
||||
flex: 1;
|
||||
padding: 0 20px 20px;
|
||||
flex: 1 1 320px;
|
||||
min-width: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
.today-box {
|
||||
flex: 1 1 380px;
|
||||
min-width: 380px;
|
||||
flex: 1 1 340px;
|
||||
min-width: 0;
|
||||
align-self: flex-start;
|
||||
background: #fff;
|
||||
padding: 0 30px 20px;
|
||||
padding: 0 20px 20px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
box-sizing: border-box;
|
||||
@@ -251,12 +276,21 @@ h4 {
|
||||
|
||||
.charts {
|
||||
margin: 10px 10px 20px;
|
||||
padding: 20px 20px 20px;
|
||||
padding: 20px;
|
||||
background: #fff;
|
||||
box-sizing: border-box;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 20px;
|
||||
max-width: calc(100% - 20px);
|
||||
}
|
||||
.chart-item {
|
||||
width: 48%;
|
||||
margin-right: 1%;
|
||||
flex: 1 1 450px;
|
||||
min-width: 0;
|
||||
width: auto;
|
||||
margin-right: 0;
|
||||
box-sizing: border-box;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.today-list {
|
||||
@@ -295,3 +329,18 @@ h4 {
|
||||
color: #909399;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
|
||||
#historyMemberChart,
|
||||
#pvChart,
|
||||
#orderChart {
|
||||
width: 100%;
|
||||
max-width: 100%;
|
||||
overflow: hidden;
|
||||
|
||||
:deep(canvas),
|
||||
canvas {
|
||||
max-width: 100% !important;
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
<template>
|
||||
<div>
|
||||
<div class="home-container">
|
||||
<!-- 统计 -->
|
||||
<div class="card">
|
||||
<h4>基本信息</h4>
|
||||
@@ -238,7 +238,7 @@
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { computed, onMounted, ref } from "vue";
|
||||
import { computed, onBeforeUnmount, onMounted, ref } from "vue";
|
||||
import { useRouter } from "vue-router";
|
||||
import { Picture, User, List, DataLine } from "@element-plus/icons-vue";
|
||||
import { homeStatistics, hotGoods, hotShops, getNoticePage } from "@/api/index";
|
||||
@@ -600,6 +600,25 @@ function init() {
|
||||
initHistoryMemberChartList();
|
||||
}
|
||||
|
||||
function destroyCharts() {
|
||||
if (pvChart.value) {
|
||||
pvChart.value.destroy();
|
||||
pvChart.value = null;
|
||||
}
|
||||
if (orderChart.value) {
|
||||
orderChart.value.destroy();
|
||||
orderChart.value = null;
|
||||
}
|
||||
if (historyMemberChart.value) {
|
||||
historyMemberChart.value.destroy();
|
||||
historyMemberChart.value = null;
|
||||
}
|
||||
}
|
||||
|
||||
onBeforeUnmount(() => {
|
||||
destroyCharts();
|
||||
});
|
||||
|
||||
onMounted(() => {
|
||||
init();
|
||||
});
|
||||
|
||||
@@ -61,19 +61,31 @@ const activeMenuName = computed(() => {
|
||||
return route.name;
|
||||
});
|
||||
|
||||
watch(
|
||||
() => route.fullPath,
|
||||
() => {
|
||||
if (
|
||||
route.meta.firstRouterName &&
|
||||
route.meta.firstRouterName !== currNav.value
|
||||
) {
|
||||
selectNav(route.meta.firstRouterName);
|
||||
function selectNav(name) {
|
||||
appStore.setCurrNav(name);
|
||||
setStore("currNav", name);
|
||||
if (name === 'home_index') {
|
||||
appStore.updateMenulist([]);
|
||||
if (route.name !== 'home_index') {
|
||||
router.push({ name: 'home_index' });
|
||||
}
|
||||
return;
|
||||
}
|
||||
util.initRouter();
|
||||
}
|
||||
|
||||
function findMenuByName(name) {
|
||||
for (const item of menuList.value) {
|
||||
for (const menu of item.children || []) {
|
||||
if (menu.name === name) {
|
||||
return menu;
|
||||
}
|
||||
}
|
||||
}
|
||||
);
|
||||
return null;
|
||||
}
|
||||
|
||||
const changeMenu = (name) => {
|
||||
function changeMenu(name) {
|
||||
if (!name) return;
|
||||
if (router.hasRoute(name)) {
|
||||
router.push({ name });
|
||||
@@ -93,29 +105,26 @@ const changeMenu = (name) => {
|
||||
Message.warning("菜单路由未就绪,请刷新页面后重试");
|
||||
}
|
||||
});
|
||||
};
|
||||
}
|
||||
|
||||
const findMenuByName = (name) => {
|
||||
for (const item of menuList.value) {
|
||||
for (const menu of item.children || []) {
|
||||
if (menu.name === name) {
|
||||
return menu;
|
||||
watch(
|
||||
() => route.fullPath,
|
||||
() => {
|
||||
if (route.name === 'home_index' || route.path === '/home') {
|
||||
if (currNav.value !== 'home_index' || menuList.value.length > 0) {
|
||||
selectNav('home_index');
|
||||
}
|
||||
return;
|
||||
}
|
||||
}
|
||||
return null;
|
||||
};
|
||||
|
||||
const selectNav = (name) => {
|
||||
appStore.setCurrNav(name);
|
||||
setStore("currNav", name);
|
||||
if (name === 'home_index') {
|
||||
appStore.updateMenulist([]);
|
||||
router.push({ name: 'home_index' });
|
||||
return;
|
||||
}
|
||||
util.initRouter();
|
||||
};
|
||||
if (
|
||||
route.meta?.firstRouterName &&
|
||||
route.meta.firstRouterName !== currNav.value
|
||||
) {
|
||||
selectNav(route.meta.firstRouterName);
|
||||
}
|
||||
},
|
||||
{ immediate: true }
|
||||
);
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
|
||||
@@ -13,6 +13,7 @@
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
|
||||
.unlock-con {
|
||||
width: 0px;
|
||||
@@ -239,22 +240,25 @@
|
||||
}
|
||||
|
||||
.single-page-con {
|
||||
min-width: 740px;
|
||||
position: relative;
|
||||
box-sizing: border-box;
|
||||
position: absolute;
|
||||
left: 200px;
|
||||
top: 106px;
|
||||
right: 0;
|
||||
top: 106px;
|
||||
bottom: 0;
|
||||
height: calc(100% - 116px);
|
||||
width: calc(100% - 200px);
|
||||
overflow: auto;
|
||||
width: auto;
|
||||
min-width: 0;
|
||||
overflow-x: hidden;
|
||||
overflow-y: auto;
|
||||
background-color: #f0f0f0;
|
||||
z-index: 1;
|
||||
transition: left 0.3s, width 0.3s;
|
||||
transition: left 0.3s;
|
||||
|
||||
.single-page {
|
||||
position: relative;
|
||||
margin: 10px;
|
||||
max-width: 100%;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -295,7 +299,8 @@
|
||||
.main.home-only {
|
||||
.single-page-con {
|
||||
left: 80px;
|
||||
width: calc(100% - 80px);
|
||||
right: 0;
|
||||
width: auto;
|
||||
}
|
||||
|
||||
.tags-con {
|
||||
|
||||
@@ -156,10 +156,10 @@ if (!props.options.columns) props.options.columns = 4;
|
||||
if (props.options.gap === undefined) props.options.gap = 12;
|
||||
if (!Array.isArray(props.options.items)) {
|
||||
props.options.items = [
|
||||
{ title: '双层收纳 9.9RMB', img: '/static/brand-wall/brand_1.png', url: '/goodsList?brand=1' },
|
||||
{ title: '双层收纳 29.9', img: '/static/brand-wall/brand_2.png', url: '/goodsList?brand=2' },
|
||||
{ title: '双层收纳 29.9', img: '/static/brand-wall/brand_3.png', url: '/goodsList?brand=3' },
|
||||
{ title: '双层收纳 29.9', img: '/static/brand-wall/brand_4.png', url: '/goodsList?brand=4' }
|
||||
{ title: '双层收纳 9.9RMB', img: 'https://lilishop-pc.oss-cn-beijing.aliyuncs.com/static/brand-wall/brand_1.png', url: '/goodsList?brand=1' },
|
||||
{ title: '双层收纳 29.9', img: 'https://lilishop-pc.oss-cn-beijing.aliyuncs.com/static/brand-wall/brand_2.png', url: '/goodsList?brand=2' },
|
||||
{ title: '双层收纳 29.9', img: 'https://lilishop-pc.oss-cn-beijing.aliyuncs.com/static/brand-wall/brand_3.png', url: '/goodsList?brand=3' },
|
||||
{ title: '双层收纳 29.9', img: 'https://lilishop-pc.oss-cn-beijing.aliyuncs.com/static/brand-wall/brand_4.png', url: '/goodsList?brand=4' }
|
||||
];
|
||||
}
|
||||
|
||||
@@ -221,7 +221,7 @@ function handleAddImage() {
|
||||
const iconIdx = ((nextNum - 1) % 4) + 1;
|
||||
props.options.items.push({
|
||||
title: `品牌图 ${nextNum}`,
|
||||
img: `/static/brand-wall/brand_${iconIdx}.png`,
|
||||
img: `https://lilishop-pc.oss-cn-beijing.aliyuncs.com/static/brand-wall/brand_${iconIdx}.png`,
|
||||
url: '/goodsList'
|
||||
});
|
||||
}
|
||||
|
||||
@@ -217,10 +217,10 @@ if (!props.options.aspectRatio) props.options.aspectRatio = '2.5:1';
|
||||
if (props.options.height === undefined) props.options.height = 380;
|
||||
if (!Array.isArray(props.options.list)) {
|
||||
props.options.list = [
|
||||
{ title: '出游囤好货', img: '/static/carousel/banner_1.png', url: '/goodsList?seckill=1' },
|
||||
{ title: '科技新品', img: '/static/carousel/banner_2.png', url: '/goodsList?category=1' },
|
||||
{ title: '原产地直采', img: '/static/carousel/banner_3.png', url: '/goodsList?category=2' },
|
||||
{ title: '大牌美妆', img: '/static/carousel/banner_4.png', url: '/goodsList?category=3' }
|
||||
{ title: '出游囤好货', img: 'https://lilishop-pc.oss-cn-beijing.aliyuncs.com/static/carousel/banner_1.png', url: '/goodsList?seckill=1' },
|
||||
{ title: '科技新品', img: 'https://lilishop-pc.oss-cn-beijing.aliyuncs.com/static/carousel/banner_2.png', url: '/goodsList?category=1' },
|
||||
{ title: '原产地直采', img: 'https://lilishop-pc.oss-cn-beijing.aliyuncs.com/static/carousel/banner_3.png', url: '/goodsList?category=2' },
|
||||
{ title: '大牌美妆', img: 'https://lilishop-pc.oss-cn-beijing.aliyuncs.com/static/carousel/banner_4.png', url: '/goodsList?category=3' }
|
||||
];
|
||||
}
|
||||
|
||||
@@ -283,7 +283,7 @@ function handleAddSlide() {
|
||||
const iconIdx = ((nextNum - 1) % 4) + 1;
|
||||
props.options.list.push({
|
||||
title: `轮播图 ${nextNum}`,
|
||||
img: `/static/carousel/banner_${iconIdx}.png`,
|
||||
img: `https://lilishop-pc.oss-cn-beijing.aliyuncs.com/static/carousel/banner_${iconIdx}.png`,
|
||||
url: '/goodsList'
|
||||
});
|
||||
}
|
||||
|
||||
@@ -144,13 +144,13 @@ const props = defineProps({
|
||||
}
|
||||
});
|
||||
|
||||
const defaultThumb = '/static/goods/goods_1.png';
|
||||
const defaultThumb = 'https://lilishop-pc.oss-cn-beijing.aliyuncs.com/static/goods/goods_1.png';
|
||||
const showGoodsModal = ref(false);
|
||||
|
||||
if (props.options.showTitle === undefined) props.options.showTitle = true;
|
||||
if (!props.options.title) props.options.title = '场景频道';
|
||||
if (!props.options.subtitle) props.options.subtitle = '主视觉 + 商品组合楼层';
|
||||
if (!props.options.heroImage) props.options.heroImage = '/static/banner-floor/floor_banner_1.png';
|
||||
if (!props.options.heroImage) props.options.heroImage = 'https://lilishop-pc.oss-cn-beijing.aliyuncs.com/static/banner-floor/floor_banner_1.png';
|
||||
if (!props.options.heroTitle) props.options.heroTitle = '品质生活馆';
|
||||
if (!props.options.heroSubtitle) props.options.heroSubtitle = '精选场景好物,一站购齐';
|
||||
if (!props.options.heroButtonText) props.options.heroButtonText = '进入频道';
|
||||
@@ -165,22 +165,22 @@ if (!props.options.promos) {
|
||||
if (!props.options.goodsCount) props.options.goodsCount = 6;
|
||||
if (!props.options.goods) {
|
||||
props.options.goods = [
|
||||
{ id: '1', goodsName: '旗舰 5G 智能手机 12GB+256GB 超光影影像系统', price: '3999.00', originalPrice: '4599.00', thumbnail: '/static/goods/goods_1.png' },
|
||||
{ id: '2', goodsName: '无线头戴式深度主动降噪蓝牙耳机 空间音频Hi-Res', price: '1099.00', originalPrice: '1499.00', thumbnail: '/static/goods/goods_2.png' },
|
||||
{ id: '3', goodsName: '14英寸 全面屏轻薄商务笔记本电脑 酷睿i7 高刷防眩光', price: '5699.00', originalPrice: '6299.00', thumbnail: '/static/goods/goods_3.png' },
|
||||
{ id: '4', goodsName: '运动健康专业监测智能手表 心率血氧长续航50米防水', price: '899.00', originalPrice: '1199.00', thumbnail: '/static/goods/goods_4.png' },
|
||||
{ id: '5', goodsName: '意式半自动家用复古咖啡机 20Bar高压恒温萃取蒸汽奶泡', price: '899.00', originalPrice: '1280.00', thumbnail: '/static/goods/goods_6.png' },
|
||||
{ id: '6', goodsName: '奢宠酵母焕活修护精华露 50ml 紧致淡纹抗皱滋养', price: '680.00', originalPrice: '890.00', thumbnail: '/static/goods/goods_5.png' }
|
||||
{ id: '1', goodsName: '旗舰 5G 智能手机 12GB+256GB 超光影影像系统', price: '3999.00', originalPrice: '4599.00', thumbnail: 'https://lilishop-pc.oss-cn-beijing.aliyuncs.com/static/goods/goods_1.png' },
|
||||
{ id: '2', goodsName: '无线头戴式深度主动降噪蓝牙耳机 空间音频Hi-Res', price: '1099.00', originalPrice: '1499.00', thumbnail: 'https://lilishop-pc.oss-cn-beijing.aliyuncs.com/static/goods/goods_2.png' },
|
||||
{ id: '3', goodsName: '14英寸 全面屏轻薄商务笔记本电脑 酷睿i7 高刷防眩光', price: '5699.00', originalPrice: '6299.00', thumbnail: 'https://lilishop-pc.oss-cn-beijing.aliyuncs.com/static/goods/goods_3.png' },
|
||||
{ id: '4', goodsName: '运动健康专业监测智能手表 心率血氧长续航50米防水', price: '899.00', originalPrice: '1199.00', thumbnail: 'https://lilishop-pc.oss-cn-beijing.aliyuncs.com/static/goods/goods_4.png' },
|
||||
{ id: '5', goodsName: '意式半自动家用复古咖啡机 20Bar高压恒温萃取蒸汽奶泡', price: '899.00', originalPrice: '1280.00', thumbnail: 'https://lilishop-pc.oss-cn-beijing.aliyuncs.com/static/goods/goods_6.png' },
|
||||
{ id: '6', goodsName: '奢宠酵母焕活修护精华露 50ml 紧致淡纹抗皱滋养', price: '680.00', originalPrice: '890.00', thumbnail: 'https://lilishop-pc.oss-cn-beijing.aliyuncs.com/static/goods/goods_5.png' }
|
||||
];
|
||||
}
|
||||
|
||||
const mockPool = [
|
||||
{ id: '1', goodsName: '旗舰 5G 智能手机 12GB+256GB 超光影影像系统', price: '3999.00', thumbnail: '/static/goods/goods_1.png' },
|
||||
{ id: '2', goodsName: '无线头戴式深度主动降噪蓝牙耳机 空间音频Hi-Res', price: '1099.00', thumbnail: '/static/goods/goods_2.png' },
|
||||
{ id: '3', goodsName: '14英寸 全面屏轻薄商务笔记本电脑 酷睿i7 高刷防眩光', price: '5699.00', thumbnail: '/static/goods/goods_3.png' },
|
||||
{ id: '4', goodsName: '运动健康专业监测智能手表 心率血氧长续航50米防水', price: '899.00', thumbnail: '/static/goods/goods_4.png' },
|
||||
{ id: '5', goodsName: '意式半自动家用复古咖啡机 20Bar高压恒温萃取蒸汽奶泡', price: '899.00', thumbnail: '/static/goods/goods_6.png' },
|
||||
{ id: '6', goodsName: '奢宠酵母焕活修护精华露 50ml 紧致淡纹抗皱滋养', price: '680.00', thumbnail: '/static/goods/goods_5.png' }
|
||||
{ id: '1', goodsName: '旗舰 5G 智能手机 12GB+256GB 超光影影像系统', price: '3999.00', thumbnail: 'https://lilishop-pc.oss-cn-beijing.aliyuncs.com/static/goods/goods_1.png' },
|
||||
{ id: '2', goodsName: '无线头戴式深度主动降噪蓝牙耳机 空间音频Hi-Res', price: '1099.00', thumbnail: 'https://lilishop-pc.oss-cn-beijing.aliyuncs.com/static/goods/goods_2.png' },
|
||||
{ id: '3', goodsName: '14英寸 全面屏轻薄商务笔记本电脑 酷睿i7 高刷防眩光', price: '5699.00', thumbnail: 'https://lilishop-pc.oss-cn-beijing.aliyuncs.com/static/goods/goods_3.png' },
|
||||
{ id: '4', goodsName: '运动健康专业监测智能手表 心率血氧长续航50米防水', price: '899.00', thumbnail: 'https://lilishop-pc.oss-cn-beijing.aliyuncs.com/static/goods/goods_4.png' },
|
||||
{ id: '5', goodsName: '意式半自动家用复古咖啡机 20Bar高压恒温萃取蒸汽奶泡', price: '899.00', thumbnail: 'https://lilishop-pc.oss-cn-beijing.aliyuncs.com/static/goods/goods_6.png' },
|
||||
{ id: '6', goodsName: '奢宠酵母焕活修护精华露 50ml 紧致淡纹抗皱滋养', price: '680.00', thumbnail: 'https://lilishop-pc.oss-cn-beijing.aliyuncs.com/static/goods/goods_5.png' }
|
||||
];
|
||||
|
||||
function handleAddPromo() {
|
||||
|
||||
@@ -255,7 +255,7 @@ function handleAddChannel() {
|
||||
props.options.items.push({
|
||||
title: `频道 ${nextNum}`,
|
||||
subtitle: '品质好物',
|
||||
img: `/static/channel-grid/channel_${iconIdx}.png`,
|
||||
img: `https://lilishop-pc.oss-cn-beijing.aliyuncs.com/static/channel-grid/channel_${iconIdx}.png`,
|
||||
url: `/goodsList?channel=${nextNum}`
|
||||
});
|
||||
}
|
||||
|
||||
@@ -167,7 +167,7 @@ const props = defineProps({
|
||||
}
|
||||
});
|
||||
|
||||
const defaultThumb = '/static/goods/goods_1.png';
|
||||
const defaultThumb = 'https://lilishop-pc.oss-cn-beijing.aliyuncs.com/static/goods/goods_1.png';
|
||||
const showGoodsModal = ref(false);
|
||||
|
||||
if (props.component?.type === 'goodsList' && (props.options.columns === undefined || props.options.columns === 4)) {
|
||||
|
||||
@@ -102,7 +102,7 @@ const props = defineProps({
|
||||
}
|
||||
});
|
||||
|
||||
const defaultThumb = '/static/goods/goods_1.png';
|
||||
const defaultThumb = 'https://lilishop-pc.oss-cn-beijing.aliyuncs.com/static/goods/goods_1.png';
|
||||
const showModal = ref(false);
|
||||
|
||||
if (!props.options.title) props.options.title = '爆款热卖榜';
|
||||
@@ -113,28 +113,28 @@ if (!props.options.columns) props.options.columns = 5;
|
||||
if (props.options.showBorder === undefined) props.options.showBorder = true;
|
||||
if (!props.options.goods) {
|
||||
props.options.goods = [
|
||||
{ id: '1', goodsName: '旗舰 5G 智能手机 12GB+256GB 超光影影像系统', price: '3999.00', originalPrice: '4599.00', thumbnail: '/static/goods/goods_1.png' },
|
||||
{ id: '2', goodsName: '无线头戴式深度主动降噪蓝牙耳机 空间音频Hi-Res', price: '1099.00', originalPrice: '1499.00', thumbnail: '/static/goods/goods_2.png' },
|
||||
{ id: '3', goodsName: '14英寸 全面屏轻薄商务笔记本电脑 酷睿i7 高刷防眩光', price: '5699.00', originalPrice: '6299.00', thumbnail: '/static/goods/goods_3.png' },
|
||||
{ id: '4', goodsName: '运动健康专业监测智能手表 心率血氧长续航50米防水', price: '899.00', originalPrice: '1199.00', thumbnail: '/static/goods/goods_4.png' },
|
||||
{ id: '5', goodsName: '奢宠酵母焕活修护精华露 50ml 紧致淡纹抗皱滋养', price: '680.00', originalPrice: '890.00', thumbnail: '/static/goods/goods_5.png' },
|
||||
{ id: '6', goodsName: '意式半自动家用复古咖啡机 20Bar高压恒温萃取蒸汽奶泡', price: '899.00', originalPrice: '1280.00', thumbnail: '/static/goods/goods_6.png' },
|
||||
{ id: '7', goodsName: '碳板专业竞速轻量缓震跑步鞋 透气防滑男女同款潮鞋', price: '459.00', originalPrice: '699.00', thumbnail: '/static/goods/goods_7.png' },
|
||||
{ id: '8', goodsName: '极简静音无雾负离子香薰加湿器 大容量客厅卧室通用', price: '299.00', originalPrice: '399.00', thumbnail: '/static/goods/goods_8.png' },
|
||||
{ id: '9', goodsName: '智能降噪AI翻译蓝牙墨镜 超轻防紫外线偏光太阳镜', price: '599.00', originalPrice: '799.00', thumbnail: '/static/goods/goods_1.png' },
|
||||
{ id: '10', goodsName: '15.6英寸 4K超高清便携式显示器 Type-C一线直连高色域', price: '1299.00', originalPrice: '1699.00', thumbnail: '/static/goods/goods_3.png' }
|
||||
{ id: '1', goodsName: '旗舰 5G 智能手机 12GB+256GB 超光影影像系统', price: '3999.00', originalPrice: '4599.00', thumbnail: 'https://lilishop-pc.oss-cn-beijing.aliyuncs.com/static/goods/goods_1.png' },
|
||||
{ id: '2', goodsName: '无线头戴式深度主动降噪蓝牙耳机 空间音频Hi-Res', price: '1099.00', originalPrice: '1499.00', thumbnail: 'https://lilishop-pc.oss-cn-beijing.aliyuncs.com/static/goods/goods_2.png' },
|
||||
{ id: '3', goodsName: '14英寸 全面屏轻薄商务笔记本电脑 酷睿i7 高刷防眩光', price: '5699.00', originalPrice: '6299.00', thumbnail: 'https://lilishop-pc.oss-cn-beijing.aliyuncs.com/static/goods/goods_3.png' },
|
||||
{ id: '4', goodsName: '运动健康专业监测智能手表 心率血氧长续航50米防水', price: '899.00', originalPrice: '1199.00', thumbnail: 'https://lilishop-pc.oss-cn-beijing.aliyuncs.com/static/goods/goods_4.png' },
|
||||
{ id: '5', goodsName: '奢宠酵母焕活修护精华露 50ml 紧致淡纹抗皱滋养', price: '680.00', originalPrice: '890.00', thumbnail: 'https://lilishop-pc.oss-cn-beijing.aliyuncs.com/static/goods/goods_5.png' },
|
||||
{ id: '6', goodsName: '意式半自动家用复古咖啡机 20Bar高压恒温萃取蒸汽奶泡', price: '899.00', originalPrice: '1280.00', thumbnail: 'https://lilishop-pc.oss-cn-beijing.aliyuncs.com/static/goods/goods_6.png' },
|
||||
{ id: '7', goodsName: '碳板专业竞速轻量缓震跑步鞋 透气防滑男女同款潮鞋', price: '459.00', originalPrice: '699.00', thumbnail: 'https://lilishop-pc.oss-cn-beijing.aliyuncs.com/static/goods/goods_7.png' },
|
||||
{ id: '8', goodsName: '极简静音无雾负离子香薰加湿器 大容量客厅卧室通用', price: '299.00', originalPrice: '399.00', thumbnail: 'https://lilishop-pc.oss-cn-beijing.aliyuncs.com/static/goods/goods_8.png' },
|
||||
{ id: '9', goodsName: '智能降噪AI翻译蓝牙墨镜 超轻防紫外线偏光太阳镜', price: '599.00', originalPrice: '799.00', thumbnail: 'https://lilishop-pc.oss-cn-beijing.aliyuncs.com/static/goods/goods_1.png' },
|
||||
{ id: '10', goodsName: '15.6英寸 4K超高清便携式显示器 Type-C一线直连高色域', price: '1299.00', originalPrice: '1699.00', thumbnail: 'https://lilishop-pc.oss-cn-beijing.aliyuncs.com/static/goods/goods_3.png' }
|
||||
];
|
||||
}
|
||||
|
||||
const mockPool = [
|
||||
{ id: '1', goodsName: '旗舰 5G 智能手机 12GB+256GB 超光影影像系统', price: '3999.00', thumbnail: '/static/goods/goods_1.png' },
|
||||
{ id: '2', goodsName: '无线头戴式深度主动降噪蓝牙耳机 空间音频Hi-Res', price: '1099.00', thumbnail: '/static/goods/goods_2.png' },
|
||||
{ id: '3', goodsName: '14英寸 全面屏轻薄商务笔记本电脑 酷睿i7 高刷防眩光', price: '5699.00', thumbnail: '/static/goods/goods_3.png' },
|
||||
{ id: '4', goodsName: '运动健康专业监测智能手表 心率血氧长续航50米防水', price: '899.00', thumbnail: '/static/goods/goods_4.png' },
|
||||
{ id: '5', goodsName: '奢宠酵母焕活修护精华露 50ml 紧致淡纹抗皱滋养', price: '680.00', thumbnail: '/static/goods/goods_5.png' },
|
||||
{ id: '6', goodsName: '意式半自动家用复古咖啡机 20Bar高压恒温萃取蒸汽奶泡', price: '899.00', thumbnail: '/static/goods/goods_6.png' },
|
||||
{ id: '7', goodsName: '碳板专业竞速轻量缓震跑步鞋 透气防滑男女同款潮鞋', price: '459.00', thumbnail: '/static/goods/goods_7.png' },
|
||||
{ id: '8', goodsName: '极简静音无雾负离子香薰加湿器 大容量客厅卧室通用', price: '299.00', thumbnail: '/static/goods/goods_8.png' }
|
||||
{ id: '1', goodsName: '旗舰 5G 智能手机 12GB+256GB 超光影影像系统', price: '3999.00', thumbnail: 'https://lilishop-pc.oss-cn-beijing.aliyuncs.com/static/goods/goods_1.png' },
|
||||
{ id: '2', goodsName: '无线头戴式深度主动降噪蓝牙耳机 空间音频Hi-Res', price: '1099.00', thumbnail: 'https://lilishop-pc.oss-cn-beijing.aliyuncs.com/static/goods/goods_2.png' },
|
||||
{ id: '3', goodsName: '14英寸 全面屏轻薄商务笔记本电脑 酷睿i7 高刷防眩光', price: '5699.00', thumbnail: 'https://lilishop-pc.oss-cn-beijing.aliyuncs.com/static/goods/goods_3.png' },
|
||||
{ id: '4', goodsName: '运动健康专业监测智能手表 心率血氧长续航50米防水', price: '899.00', thumbnail: 'https://lilishop-pc.oss-cn-beijing.aliyuncs.com/static/goods/goods_4.png' },
|
||||
{ id: '5', goodsName: '奢宠酵母焕活修护精华露 50ml 紧致淡纹抗皱滋养', price: '680.00', thumbnail: 'https://lilishop-pc.oss-cn-beijing.aliyuncs.com/static/goods/goods_5.png' },
|
||||
{ id: '6', goodsName: '意式半自动家用复古咖啡机 20Bar高压恒温萃取蒸汽奶泡', price: '899.00', thumbnail: 'https://lilishop-pc.oss-cn-beijing.aliyuncs.com/static/goods/goods_6.png' },
|
||||
{ id: '7', goodsName: '碳板专业竞速轻量缓震跑步鞋 透气防滑男女同款潮鞋', price: '459.00', thumbnail: 'https://lilishop-pc.oss-cn-beijing.aliyuncs.com/static/goods/goods_7.png' },
|
||||
{ id: '8', goodsName: '极简静音无雾负离子香薰加湿器 大容量客厅卧室通用', price: '299.00', thumbnail: 'https://lilishop-pc.oss-cn-beijing.aliyuncs.com/static/goods/goods_8.png' }
|
||||
];
|
||||
|
||||
function isSelected(id) {
|
||||
|
||||
@@ -144,7 +144,7 @@ const props = defineProps({
|
||||
}
|
||||
});
|
||||
|
||||
const defaultThumb = '/static/goods/goods_1.png';
|
||||
const defaultThumb = 'https://lilishop-pc.oss-cn-beijing.aliyuncs.com/static/goods/goods_1.png';
|
||||
const showGoodsModal = ref(false);
|
||||
|
||||
// 初始化缺省 options
|
||||
@@ -156,33 +156,33 @@ if (!props.options.subCategories) {
|
||||
props.options.subCategories = ['旗舰手机', '轻薄笔电', '降噪耳机', '智能穿戴', '数码配件'];
|
||||
}
|
||||
if (!props.options.posterImg) {
|
||||
props.options.posterImg = '/static/banner-floor/floor_banner_1.png';
|
||||
props.options.posterImg = 'https://lilishop-pc.oss-cn-beijing.aliyuncs.com/static/banner-floor/floor_banner_1.png';
|
||||
}
|
||||
if (!props.options.posterTitle) props.options.posterTitle = '数码潮电 酷玩季';
|
||||
if (!props.options.posterSub) props.options.posterSub = '领券最高立减 600 元';
|
||||
if (!props.options.columns) props.options.columns = 4;
|
||||
if (!props.options.goods) {
|
||||
props.options.goods = [
|
||||
{ id: '101', goodsName: '旗舰 5G 智能手机 12GB+256GB 超光影影像系统', price: '3999.00', originalPrice: '4599.00', thumbnail: '/static/goods/goods_1.png' },
|
||||
{ id: '102', goodsName: '无线头戴式深度主动降噪蓝牙耳机 空间音频Hi-Res', price: '1099.00', originalPrice: '1499.00', thumbnail: '/static/goods/goods_2.png' },
|
||||
{ id: '103', goodsName: '14英寸 全面屏轻薄商务笔记本电脑 酷睿i7 高刷防眩光', price: '5699.00', originalPrice: '6299.00', thumbnail: '/static/goods/goods_3.png' },
|
||||
{ id: '104', goodsName: '运动健康专业监测智能手表 心率血氧长续航50米防水', price: '899.00', originalPrice: '1199.00', thumbnail: '/static/goods/goods_4.png' },
|
||||
{ id: '105', goodsName: '奢宠酵母焕活修护精华露 50ml 紧致淡纹抗皱滋养', price: '680.00', originalPrice: '890.00', thumbnail: '/static/goods/goods_5.png' },
|
||||
{ id: '106', goodsName: '意式半自动家用复古咖啡机 20Bar高压恒温萃取蒸汽奶泡', price: '899.00', originalPrice: '1280.00', thumbnail: '/static/goods/goods_6.png' },
|
||||
{ id: '107', goodsName: '碳板专业竞速轻量缓震跑步鞋 透气防滑男女同款潮鞋', price: '459.00', originalPrice: '699.00', thumbnail: '/static/goods/goods_7.png' },
|
||||
{ id: '108', goodsName: '极简静音无雾负离子香薰加湿器 大容量客厅卧室通用', price: '299.00', originalPrice: '399.00', thumbnail: '/static/goods/goods_8.png' }
|
||||
{ id: '101', goodsName: '旗舰 5G 智能手机 12GB+256GB 超光影影像系统', price: '3999.00', originalPrice: '4599.00', thumbnail: 'https://lilishop-pc.oss-cn-beijing.aliyuncs.com/static/goods/goods_1.png' },
|
||||
{ id: '102', goodsName: '无线头戴式深度主动降噪蓝牙耳机 空间音频Hi-Res', price: '1099.00', originalPrice: '1499.00', thumbnail: 'https://lilishop-pc.oss-cn-beijing.aliyuncs.com/static/goods/goods_2.png' },
|
||||
{ id: '103', goodsName: '14英寸 全面屏轻薄商务笔记本电脑 酷睿i7 高刷防眩光', price: '5699.00', originalPrice: '6299.00', thumbnail: 'https://lilishop-pc.oss-cn-beijing.aliyuncs.com/static/goods/goods_3.png' },
|
||||
{ id: '104', goodsName: '运动健康专业监测智能手表 心率血氧长续航50米防水', price: '899.00', originalPrice: '1199.00', thumbnail: 'https://lilishop-pc.oss-cn-beijing.aliyuncs.com/static/goods/goods_4.png' },
|
||||
{ id: '105', goodsName: '奢宠酵母焕活修护精华露 50ml 紧致淡纹抗皱滋养', price: '680.00', originalPrice: '890.00', thumbnail: 'https://lilishop-pc.oss-cn-beijing.aliyuncs.com/static/goods/goods_5.png' },
|
||||
{ id: '106', goodsName: '意式半自动家用复古咖啡机 20Bar高压恒温萃取蒸汽奶泡', price: '899.00', originalPrice: '1280.00', thumbnail: 'https://lilishop-pc.oss-cn-beijing.aliyuncs.com/static/goods/goods_6.png' },
|
||||
{ id: '107', goodsName: '碳板专业竞速轻量缓震跑步鞋 透气防滑男女同款潮鞋', price: '459.00', originalPrice: '699.00', thumbnail: 'https://lilishop-pc.oss-cn-beijing.aliyuncs.com/static/goods/goods_7.png' },
|
||||
{ id: '108', goodsName: '极简静音无雾负离子香薰加湿器 大容量客厅卧室通用', price: '299.00', originalPrice: '399.00', thumbnail: 'https://lilishop-pc.oss-cn-beijing.aliyuncs.com/static/goods/goods_8.png' }
|
||||
];
|
||||
}
|
||||
|
||||
const mockPool = [
|
||||
{ id: '101', goodsName: '旗舰 5G 智能手机 12GB+256GB 超光影影像系统', price: '3999.00', thumbnail: '/static/goods/goods_1.png' },
|
||||
{ id: '102', goodsName: '无线头戴式深度主动降噪蓝牙耳机 空间音频Hi-Res', price: '1099.00', thumbnail: '/static/goods/goods_2.png' },
|
||||
{ id: '103', goodsName: '14英寸 全面屏轻薄商务笔记本电脑 酷睿i7 高刷防眩光', price: '5699.00', thumbnail: '/static/goods/goods_3.png' },
|
||||
{ id: '104', goodsName: '运动健康专业监测智能手表 心率血氧长续航50米防水', price: '899.00', thumbnail: '/static/goods/goods_4.png' },
|
||||
{ id: '105', goodsName: '奢宠酵母焕活修护精华露 50ml 紧致淡纹抗皱滋养', price: '680.00', thumbnail: '/static/goods/goods_5.png' },
|
||||
{ id: '106', goodsName: '意式半自动家用复古咖啡机 20Bar高压恒温萃取蒸汽奶泡', price: '899.00', thumbnail: '/static/goods/goods_6.png' },
|
||||
{ id: '107', goodsName: '碳板专业竞速轻量缓震跑步鞋 透气防滑男女同款潮鞋', price: '459.00', thumbnail: '/static/goods/goods_7.png' },
|
||||
{ id: '108', goodsName: '极简静音无雾负离子香薰加湿器 大容量客厅卧室通用', price: '299.00', thumbnail: '/static/goods/goods_8.png' }
|
||||
{ id: '101', goodsName: '旗舰 5G 智能手机 12GB+256GB 超光影影像系统', price: '3999.00', thumbnail: 'https://lilishop-pc.oss-cn-beijing.aliyuncs.com/static/goods/goods_1.png' },
|
||||
{ id: '102', goodsName: '无线头戴式深度主动降噪蓝牙耳机 空间音频Hi-Res', price: '1099.00', thumbnail: 'https://lilishop-pc.oss-cn-beijing.aliyuncs.com/static/goods/goods_2.png' },
|
||||
{ id: '103', goodsName: '14英寸 全面屏轻薄商务笔记本电脑 酷睿i7 高刷防眩光', price: '5699.00', thumbnail: 'https://lilishop-pc.oss-cn-beijing.aliyuncs.com/static/goods/goods_3.png' },
|
||||
{ id: '104', goodsName: '运动健康专业监测智能手表 心率血氧长续航50米防水', price: '899.00', thumbnail: 'https://lilishop-pc.oss-cn-beijing.aliyuncs.com/static/goods/goods_4.png' },
|
||||
{ id: '105', goodsName: '奢宠酵母焕活修护精华露 50ml 紧致淡纹抗皱滋养', price: '680.00', thumbnail: 'https://lilishop-pc.oss-cn-beijing.aliyuncs.com/static/goods/goods_5.png' },
|
||||
{ id: '106', goodsName: '意式半自动家用复古咖啡机 20Bar高压恒温萃取蒸汽奶泡', price: '899.00', thumbnail: 'https://lilishop-pc.oss-cn-beijing.aliyuncs.com/static/goods/goods_6.png' },
|
||||
{ id: '107', goodsName: '碳板专业竞速轻量缓震跑步鞋 透气防滑男女同款潮鞋', price: '459.00', thumbnail: 'https://lilishop-pc.oss-cn-beijing.aliyuncs.com/static/goods/goods_7.png' },
|
||||
{ id: '108', goodsName: '极简静音无雾负离子香薰加湿器 大容量客厅卧室通用', price: '299.00', thumbnail: 'https://lilishop-pc.oss-cn-beijing.aliyuncs.com/static/goods/goods_8.png' }
|
||||
];
|
||||
|
||||
function handleAddTag() {
|
||||
|
||||
@@ -106,7 +106,7 @@ const props = defineProps({
|
||||
}
|
||||
});
|
||||
|
||||
const defaultThumb = '/static/goods/goods_1.png';
|
||||
const defaultThumb = 'https://lilishop-pc.oss-cn-beijing.aliyuncs.com/static/goods/goods_1.png';
|
||||
const showModal = ref(false);
|
||||
|
||||
if (!props.options.title) props.options.title = '猜你喜欢';
|
||||
@@ -117,24 +117,24 @@ if (!props.options.pageSize) props.options.pageSize = 8;
|
||||
if (!props.options.maxPages) props.options.maxPages = 3;
|
||||
if (!props.options.goods) {
|
||||
props.options.goods = [
|
||||
{ id: '1', goodsName: '旗舰 5G 智能手机 12GB+256GB 超光影影像系统', price: '3999.00', originalPrice: '4599.00', thumbnail: '/static/goods/goods_1.png' },
|
||||
{ id: '2', goodsName: '无线头戴式深度主动降噪蓝牙耳机 空间音频Hi-Res', price: '1099.00', originalPrice: '1499.00', thumbnail: '/static/goods/goods_2.png' },
|
||||
{ id: '3', goodsName: '14英寸 全面屏轻薄商务笔记本电脑 酷睿i7 高刷防眩光', price: '5699.00', originalPrice: '6299.00', thumbnail: '/static/goods/goods_3.png' },
|
||||
{ id: '4', goodsName: '运动健康专业监测智能手表 心率血氧长续航50米防水', price: '899.00', originalPrice: '1199.00', thumbnail: '/static/goods/goods_4.png' },
|
||||
{ id: '5', goodsName: '奢宠酵母焕活修护精华露 50ml 紧致淡纹抗皱滋养', price: '680.00', originalPrice: '890.00', thumbnail: '/static/goods/goods_5.png' },
|
||||
{ id: '6', goodsName: '意式半自动家用复古咖啡机 20Bar高压恒温萃取蒸汽奶泡', price: '899.00', originalPrice: '1280.00', thumbnail: '/static/goods/goods_6.png' },
|
||||
{ id: '7', goodsName: '碳板专业竞速轻量缓震跑步鞋 透气防滑男女同款潮鞋', price: '459.00', originalPrice: '699.00', thumbnail: '/static/goods/goods_7.png' },
|
||||
{ id: '8', goodsName: '极简静音无雾负离子香薰加湿器 大容量客厅卧室通用', price: '299.00', originalPrice: '399.00', thumbnail: '/static/goods/goods_8.png' }
|
||||
{ id: '1', goodsName: '旗舰 5G 智能手机 12GB+256GB 超光影影像系统', price: '3999.00', originalPrice: '4599.00', thumbnail: 'https://lilishop-pc.oss-cn-beijing.aliyuncs.com/static/goods/goods_1.png' },
|
||||
{ id: '2', goodsName: '无线头戴式深度主动降噪蓝牙耳机 空间音频Hi-Res', price: '1099.00', originalPrice: '1499.00', thumbnail: 'https://lilishop-pc.oss-cn-beijing.aliyuncs.com/static/goods/goods_2.png' },
|
||||
{ id: '3', goodsName: '14英寸 全面屏轻薄商务笔记本电脑 酷睿i7 高刷防眩光', price: '5699.00', originalPrice: '6299.00', thumbnail: 'https://lilishop-pc.oss-cn-beijing.aliyuncs.com/static/goods/goods_3.png' },
|
||||
{ id: '4', goodsName: '运动健康专业监测智能手表 心率血氧长续航50米防水', price: '899.00', originalPrice: '1199.00', thumbnail: 'https://lilishop-pc.oss-cn-beijing.aliyuncs.com/static/goods/goods_4.png' },
|
||||
{ id: '5', goodsName: '奢宠酵母焕活修护精华露 50ml 紧致淡纹抗皱滋养', price: '680.00', originalPrice: '890.00', thumbnail: 'https://lilishop-pc.oss-cn-beijing.aliyuncs.com/static/goods/goods_5.png' },
|
||||
{ id: '6', goodsName: '意式半自动家用复古咖啡机 20Bar高压恒温萃取蒸汽奶泡', price: '899.00', originalPrice: '1280.00', thumbnail: 'https://lilishop-pc.oss-cn-beijing.aliyuncs.com/static/goods/goods_6.png' },
|
||||
{ id: '7', goodsName: '碳板专业竞速轻量缓震跑步鞋 透气防滑男女同款潮鞋', price: '459.00', originalPrice: '699.00', thumbnail: 'https://lilishop-pc.oss-cn-beijing.aliyuncs.com/static/goods/goods_7.png' },
|
||||
{ id: '8', goodsName: '极简静音无雾负离子香薰加湿器 大容量客厅卧室通用', price: '299.00', originalPrice: '399.00', thumbnail: 'https://lilishop-pc.oss-cn-beijing.aliyuncs.com/static/goods/goods_8.png' }
|
||||
];
|
||||
}
|
||||
|
||||
const mockPool = [
|
||||
{ id: '1', goodsName: '旗舰 5G 智能手机 12GB+256GB 超光影影像系统', price: '3999.00', thumbnail: '/static/goods/goods_1.png' },
|
||||
{ id: '2', goodsName: '无线头戴式深度主动降噪蓝牙耳机 空间音频Hi-Res', price: '1099.00', thumbnail: '/static/goods/goods_2.png' },
|
||||
{ id: '3', goodsName: '14英寸 全面屏轻薄商务笔记本电脑 酷睿i7 高刷防眩光', price: '5699.00', thumbnail: '/static/goods/goods_3.png' },
|
||||
{ id: '4', goodsName: '运动健康专业监测智能手表 心率血氧长续航50米防水', price: '899.00', thumbnail: '/static/goods/goods_4.png' },
|
||||
{ id: '5', goodsName: '奢宠酵母焕活修护精华露 50ml 紧致淡纹抗皱滋养', price: '680.00', thumbnail: '/static/goods/goods_5.png' },
|
||||
{ id: '6', goodsName: '意式半自动家用复古咖啡机 20Bar高压恒温萃取蒸汽奶泡', price: '899.00', thumbnail: '/static/goods/goods_6.png' }
|
||||
{ id: '1', goodsName: '旗舰 5G 智能手机 12GB+256GB 超光影影像系统', price: '3999.00', thumbnail: 'https://lilishop-pc.oss-cn-beijing.aliyuncs.com/static/goods/goods_1.png' },
|
||||
{ id: '2', goodsName: '无线头戴式深度主动降噪蓝牙耳机 空间音频Hi-Res', price: '1099.00', thumbnail: 'https://lilishop-pc.oss-cn-beijing.aliyuncs.com/static/goods/goods_2.png' },
|
||||
{ id: '3', goodsName: '14英寸 全面屏轻薄商务笔记本电脑 酷睿i7 高刷防眩光', price: '5699.00', thumbnail: 'https://lilishop-pc.oss-cn-beijing.aliyuncs.com/static/goods/goods_3.png' },
|
||||
{ id: '4', goodsName: '运动健康专业监测智能手表 心率血氧长续航50米防水', price: '899.00', thumbnail: 'https://lilishop-pc.oss-cn-beijing.aliyuncs.com/static/goods/goods_4.png' },
|
||||
{ id: '5', goodsName: '奢宠酵母焕活修护精华露 50ml 紧致淡纹抗皱滋养', price: '680.00', thumbnail: 'https://lilishop-pc.oss-cn-beijing.aliyuncs.com/static/goods/goods_5.png' },
|
||||
{ id: '6', goodsName: '意式半自动家用复古咖啡机 20Bar高压恒温萃取蒸汽奶泡', price: '899.00', thumbnail: 'https://lilishop-pc.oss-cn-beijing.aliyuncs.com/static/goods/goods_6.png' }
|
||||
];
|
||||
|
||||
function isSelected(id) {
|
||||
|
||||
@@ -48,19 +48,6 @@
|
||||
<el-input v-model="options.placeholder" size="small" placeholder="请输入商品名称、品牌或型号" class="flex-1" />
|
||||
</div>
|
||||
|
||||
<div class="form-row mt-10">
|
||||
<span class="row-label">默认搜索类型</span>
|
||||
<el-select v-model="options.searchType" size="small" class="flex-1">
|
||||
<el-option label="商品搜索" value="goods" />
|
||||
<el-option label="店铺搜索" value="shop" />
|
||||
</el-select>
|
||||
</div>
|
||||
|
||||
<div class="form-row mt-10 flex-between">
|
||||
<span class="row-label">重置搜索类型</span>
|
||||
<el-switch v-model="options.resetSearchType" size="small" />
|
||||
</div>
|
||||
|
||||
<div class="form-row mt-10 flex-between">
|
||||
<span class="row-label">显示右侧购物车</span>
|
||||
<el-switch v-model="options.showCart" size="small" />
|
||||
@@ -74,6 +61,33 @@
|
||||
|
||||
|
||||
|
||||
<!-- 3. 热门搜索词管理 -->
|
||||
<div class="panel-section" v-if="options.showHotWords !== false">
|
||||
<div class="section-title flex-between">
|
||||
<span>热门推荐词</span>
|
||||
<el-button type="primary" link size="small" @click="handleAddHotWord">
|
||||
<el-icon><Plus /></el-icon>添加词
|
||||
</el-button>
|
||||
</div>
|
||||
<div class="hot-words-list" v-if="options.hotWords && options.hotWords.length">
|
||||
<div v-for="(word, idx) in options.hotWords" :key="idx" class="hot-word-item">
|
||||
<el-input v-model="options.hotWords[idx]" size="small" class="word-edit-input" />
|
||||
<div class="word-actions">
|
||||
<el-button link size="small" :disabled="idx === 0" @click="moveHotWord(idx, -1)">
|
||||
<el-icon><Top /></el-icon>
|
||||
</el-button>
|
||||
<el-button link size="small" :disabled="idx === options.hotWords.length - 1" @click="moveHotWord(idx, 1)">
|
||||
<el-icon><Bottom /></el-icon>
|
||||
</el-button>
|
||||
<el-button link type="danger" size="small" @click="handleRemoveHotWord(idx)">
|
||||
<el-icon><Delete /></el-icon>
|
||||
</el-button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="empty-tip-text" v-else>暂无推荐词,点击右上角添加</div>
|
||||
</div>
|
||||
|
||||
<!-- 4. 购物车样式设置 -->
|
||||
<div class="panel-section" v-if="options.showCart !== false">
|
||||
<div class="section-title">购物车设置</div>
|
||||
@@ -136,8 +150,6 @@ const props = defineProps({
|
||||
|
||||
if (props.options.logoLink === undefined) props.options.logoLink = '/';
|
||||
if (props.options.placeholder === undefined) props.options.placeholder = '请输入商品名称、品牌或型号';
|
||||
if (props.options.searchType === undefined) props.options.searchType = 'goods';
|
||||
if (props.options.resetSearchType === undefined) props.options.resetSearchType = false;
|
||||
if (props.options.showCart === undefined) props.options.showCart = true;
|
||||
if (props.options.showHotWords === undefined) props.options.showHotWords = true;
|
||||
if (props.options.cartText === undefined) props.options.cartText = '购物车';
|
||||
|
||||
@@ -150,7 +150,7 @@ export const COMPONENT_DEFINITIONS = [
|
||||
|
||||
defaultOptions: {
|
||||
|
||||
logoUrl: '/static/logo/logo.png',
|
||||
logoUrl: 'https://lilishop-pc.oss-cn-beijing.aliyuncs.com/static/logo/logo.png',
|
||||
|
||||
placeholder: '搜索品牌或商品',
|
||||
|
||||
@@ -268,16 +268,16 @@ export const COMPONENT_DEFINITIONS = [
|
||||
textColor: '#334155',
|
||||
activeColor: '#e11d48',
|
||||
navItems: [
|
||||
{ title: '应急救援', img: '/static/category-nav/cat_1.png', url: '/goodsList?categoryId=1', badge: '' },
|
||||
{ title: '新鲜蔬菜', img: '/static/category-nav/cat_2.png', url: '/goodsList?categoryId=2', badge: '' },
|
||||
{ title: '乳品烘焙', img: '/static/category-nav/cat_3.png', url: '/goodsList?categoryId=3', badge: '' },
|
||||
{ title: '肉禽蛋品', img: '/static/category-nav/cat_4.png', url: '/goodsList?categoryId=4', badge: '' },
|
||||
{ title: '生鲜门店', img: '/static/category-nav/cat_5.png', url: '/goodsList?categoryId=5', badge: '' },
|
||||
{ title: '母婴育儿', img: '/static/category-nav/cat_6.png', url: '/goodsList?categoryId=6', badge: '' },
|
||||
{ title: '美护百货', img: '/static/category-nav/cat_7.png', url: '/goodsList?categoryId=7', badge: '' },
|
||||
{ title: '粮油调味', img: '/static/category-nav/cat_8.png', url: '/goodsList?categoryId=8', badge: '' },
|
||||
{ title: '酒水饮料', img: '/static/category-nav/cat_9.png', url: '/goodsList?categoryId=9', badge: '' },
|
||||
{ title: '海鲜水产', img: '/static/category-nav/cat_10.png', url: '/goodsList?categoryId=10', badge: '' }
|
||||
{ title: '应急救援', img: 'https://lilishop-pc.oss-cn-beijing.aliyuncs.com/static/category-nav/cat_1.png', url: '/goodsList?categoryId=1', badge: '' },
|
||||
{ title: '新鲜蔬菜', img: 'https://lilishop-pc.oss-cn-beijing.aliyuncs.com/static/category-nav/cat_2.png', url: '/goodsList?categoryId=2', badge: '' },
|
||||
{ title: '乳品烘焙', img: 'https://lilishop-pc.oss-cn-beijing.aliyuncs.com/static/category-nav/cat_3.png', url: '/goodsList?categoryId=3', badge: '' },
|
||||
{ title: '肉禽蛋品', img: 'https://lilishop-pc.oss-cn-beijing.aliyuncs.com/static/category-nav/cat_4.png', url: '/goodsList?categoryId=4', badge: '' },
|
||||
{ title: '生鲜门店', img: 'https://lilishop-pc.oss-cn-beijing.aliyuncs.com/static/category-nav/cat_5.png', url: '/goodsList?categoryId=5', badge: '' },
|
||||
{ title: '母婴育儿', img: 'https://lilishop-pc.oss-cn-beijing.aliyuncs.com/static/category-nav/cat_6.png', url: '/goodsList?categoryId=6', badge: '' },
|
||||
{ title: '美护百货', img: 'https://lilishop-pc.oss-cn-beijing.aliyuncs.com/static/category-nav/cat_7.png', url: '/goodsList?categoryId=7', badge: '' },
|
||||
{ title: '粮油调味', img: 'https://lilishop-pc.oss-cn-beijing.aliyuncs.com/static/category-nav/cat_8.png', url: '/goodsList?categoryId=8', badge: '' },
|
||||
{ title: '酒水饮料', img: 'https://lilishop-pc.oss-cn-beijing.aliyuncs.com/static/category-nav/cat_9.png', url: '/goodsList?categoryId=9', badge: '' },
|
||||
{ title: '海鲜水产', img: 'https://lilishop-pc.oss-cn-beijing.aliyuncs.com/static/category-nav/cat_10.png', url: '/goodsList?categoryId=10', badge: '' }
|
||||
]
|
||||
},
|
||||
defaultComponentStyle: {
|
||||
@@ -301,10 +301,10 @@ export const COMPONENT_DEFINITIONS = [
|
||||
imageRadius: 10,
|
||||
gap: 12,
|
||||
items: [
|
||||
{ title: '企业采购', subtitle: '批量省心', img: '/static/channel-grid/channel_1.png', url: '/goodsList?channel=1' },
|
||||
{ title: '领券中心', subtitle: '先领再买', img: '/static/channel-grid/channel_2.png', url: '/couponCenter' },
|
||||
{ title: '新品首发', subtitle: '每月上新', img: '/static/channel-grid/channel_3.png', url: '/goodsList?channel=3' },
|
||||
{ title: '品牌馆', subtitle: '精选好店', img: '/static/channel-grid/channel_4.png', url: '/brand' }
|
||||
{ title: '企业采购', subtitle: '批量省心', img: 'https://lilishop-pc.oss-cn-beijing.aliyuncs.com/static/channel-grid/channel_1.png', url: '/goodsList?channel=1' },
|
||||
{ title: '领券中心', subtitle: '先领再买', img: 'https://lilishop-pc.oss-cn-beijing.aliyuncs.com/static/channel-grid/channel_2.png', url: '/couponCenter' },
|
||||
{ title: '新品首发', subtitle: '每月上新', img: 'https://lilishop-pc.oss-cn-beijing.aliyuncs.com/static/channel-grid/channel_3.png', url: '/goodsList?channel=3' },
|
||||
{ title: '品牌馆', subtitle: '精选好店', img: 'https://lilishop-pc.oss-cn-beijing.aliyuncs.com/static/channel-grid/channel_4.png', url: '/brand' }
|
||||
]
|
||||
},
|
||||
defaultComponentStyle: {
|
||||
@@ -388,22 +388,22 @@ export const COMPONENT_DEFINITIONS = [
|
||||
height: 380,
|
||||
list: [
|
||||
{
|
||||
img: '/static/carousel/banner_1.png',
|
||||
img: 'https://lilishop-pc.oss-cn-beijing.aliyuncs.com/static/carousel/banner_1.png',
|
||||
title: '出游囤好货 · 迎接小长假',
|
||||
url: '/goodsList?seckill=1'
|
||||
},
|
||||
{
|
||||
img: '/static/carousel/banner_2.png',
|
||||
img: 'https://lilishop-pc.oss-cn-beijing.aliyuncs.com/static/carousel/banner_2.png',
|
||||
title: '爆款潮电 · 科技新品首发',
|
||||
url: '/goodsList?category=1'
|
||||
},
|
||||
{
|
||||
img: '/static/carousel/banner_3.png',
|
||||
img: 'https://lilishop-pc.oss-cn-beijing.aliyuncs.com/static/carousel/banner_3.png',
|
||||
title: '原产地直采 · 绿色鲜果集市',
|
||||
url: '/goodsList?category=2'
|
||||
},
|
||||
{
|
||||
img: '/static/carousel/banner_4.png',
|
||||
img: 'https://lilishop-pc.oss-cn-beijing.aliyuncs.com/static/carousel/banner_4.png',
|
||||
title: '甄选大牌美妆 · 唤醒肌肤活力',
|
||||
url: '/goodsList?category=3'
|
||||
}
|
||||
@@ -428,10 +428,10 @@ export const COMPONENT_DEFINITIONS = [
|
||||
columns: 4,
|
||||
gap: 12,
|
||||
items: [
|
||||
{ title: '数码潮玩 · 爆款立减500', img: '/static/brand-wall/brand_1.png', url: '/goodsList?category=1' },
|
||||
{ title: '美妆奢宠 · 每满300减50', img: '/static/brand-wall/brand_2.png', url: '/goodsList?category=2' },
|
||||
{ title: '运动潮品 · 爆款低至5折', img: '/static/brand-wall/brand_3.png', url: '/goodsList?category=3' },
|
||||
{ title: '品质生活 · 限时第2件半价', img: '/static/brand-wall/brand_4.png', url: '/goodsList?category=4' }
|
||||
{ title: '数码潮玩 · 爆款立减500', img: 'https://lilishop-pc.oss-cn-beijing.aliyuncs.com/static/brand-wall/brand_1.png', url: '/goodsList?category=1' },
|
||||
{ title: '美妆奢宠 · 每满300减50', img: 'https://lilishop-pc.oss-cn-beijing.aliyuncs.com/static/brand-wall/brand_2.png', url: '/goodsList?category=2' },
|
||||
{ title: '运动潮品 · 爆款低至5折', img: 'https://lilishop-pc.oss-cn-beijing.aliyuncs.com/static/brand-wall/brand_3.png', url: '/goodsList?category=3' },
|
||||
{ title: '品质生活 · 限时第2件半价', img: 'https://lilishop-pc.oss-cn-beijing.aliyuncs.com/static/brand-wall/brand_4.png', url: '/goodsList?category=4' }
|
||||
]
|
||||
},
|
||||
defaultComponentStyle: {
|
||||
@@ -449,7 +449,7 @@ export const COMPONENT_DEFINITIONS = [
|
||||
icon: 'Aim',
|
||||
description: '一张大图框选多个跳转热区',
|
||||
defaultOptions: {
|
||||
imageUrl: '/static/hot-zone/hotzone_default.png',
|
||||
imageUrl: 'https://lilishop-pc.oss-cn-beijing.aliyuncs.com/static/hot-zone/hotzone_default.png',
|
||||
zones: [
|
||||
{
|
||||
title: '大促主会场 · 领券中心',
|
||||
@@ -532,9 +532,9 @@ export const COMPONENT_DEFINITIONS = [
|
||||
columns: 3,
|
||||
|
||||
cards: [
|
||||
{ title: '限时秒杀', subtitle: '抢券立减50元 · 爆款直降', bgImg: '/static/promo-group/promo_1.png', url: '/goodsList?seckill=1' },
|
||||
{ title: '品牌特惠', subtitle: '大牌买一送一 · 领百元神券', bgImg: '/static/promo-group/promo_2.png', url: '/goodsList?brand=1' },
|
||||
{ title: '新品首发', subtitle: '首单专享特惠 · 1元起尝鲜', bgImg: '/static/promo-group/promo_3.png', url: '/goodsList?new=1' }
|
||||
{ title: '限时秒杀', subtitle: '抢券立减50元 · 爆款直降', bgImg: 'https://lilishop-pc.oss-cn-beijing.aliyuncs.com/static/promo-group/promo_1.png', url: '/goodsList?seckill=1' },
|
||||
{ title: '品牌特惠', subtitle: '大牌买一送一 · 领百元神券', bgImg: 'https://lilishop-pc.oss-cn-beijing.aliyuncs.com/static/promo-group/promo_2.png', url: '/goodsList?brand=1' },
|
||||
{ title: '新品首发', subtitle: '首单专享特惠 · 1元起尝鲜', bgImg: 'https://lilishop-pc.oss-cn-beijing.aliyuncs.com/static/promo-group/promo_3.png', url: '/goodsList?new=1' }
|
||||
]
|
||||
|
||||
},
|
||||
@@ -558,7 +558,7 @@ export const COMPONENT_DEFINITIONS = [
|
||||
description: '品牌宣传与商品视频播放',
|
||||
defaultOptions: {
|
||||
videoUrl: '',
|
||||
coverUrl: '/static/video/video_cover.png',
|
||||
coverUrl: 'https://lilishop-pc.oss-cn-beijing.aliyuncs.com/static/video/video_cover.png',
|
||||
autoPlay: false,
|
||||
loop: false,
|
||||
controls: true,
|
||||
@@ -603,84 +603,84 @@ export const COMPONENT_DEFINITIONS = [
|
||||
goodsName: '旗舰 5G 智能手机 12GB+256GB 超光影影像系统',
|
||||
price: '3999.00',
|
||||
originalPrice: '4599.00',
|
||||
thumbnail: '/static/goods/goods_1.png'
|
||||
thumbnail: 'https://lilishop-pc.oss-cn-beijing.aliyuncs.com/static/goods/goods_1.png'
|
||||
},
|
||||
{
|
||||
id: '2',
|
||||
goodsName: '无线头戴式深度主动降噪蓝牙耳机 空间音频Hi-Res',
|
||||
price: '1099.00',
|
||||
originalPrice: '1499.00',
|
||||
thumbnail: '/static/goods/goods_2.png'
|
||||
thumbnail: 'https://lilishop-pc.oss-cn-beijing.aliyuncs.com/static/goods/goods_2.png'
|
||||
},
|
||||
{
|
||||
id: '3',
|
||||
goodsName: '14英寸 全面屏轻薄商务笔记本电脑 酷睿i7 高刷防眩光',
|
||||
price: '5699.00',
|
||||
originalPrice: '6299.00',
|
||||
thumbnail: '/static/goods/goods_3.png'
|
||||
thumbnail: 'https://lilishop-pc.oss-cn-beijing.aliyuncs.com/static/goods/goods_3.png'
|
||||
},
|
||||
{
|
||||
id: '4',
|
||||
goodsName: '运动健康专业监测智能手表 心率血氧长续航50米防水',
|
||||
price: '899.00',
|
||||
originalPrice: '1199.00',
|
||||
thumbnail: '/static/goods/goods_4.png'
|
||||
thumbnail: 'https://lilishop-pc.oss-cn-beijing.aliyuncs.com/static/goods/goods_4.png'
|
||||
},
|
||||
{
|
||||
id: '5',
|
||||
goodsName: '奢宠酵母焕活修护精华露 50ml 紧致淡纹抗皱滋养',
|
||||
price: '680.00',
|
||||
originalPrice: '890.00',
|
||||
thumbnail: '/static/goods/goods_5.png'
|
||||
thumbnail: 'https://lilishop-pc.oss-cn-beijing.aliyuncs.com/static/goods/goods_5.png'
|
||||
},
|
||||
{
|
||||
id: '6',
|
||||
goodsName: '意式半自动家用复古咖啡机 20Bar高压恒温萃取蒸汽奶泡',
|
||||
price: '899.00',
|
||||
originalPrice: '1280.00',
|
||||
thumbnail: '/static/goods/goods_6.png'
|
||||
thumbnail: 'https://lilishop-pc.oss-cn-beijing.aliyuncs.com/static/goods/goods_6.png'
|
||||
},
|
||||
{
|
||||
id: '7',
|
||||
goodsName: '碳板专业竞速轻量缓震跑步鞋 透气防滑男女同款潮鞋',
|
||||
price: '459.00',
|
||||
originalPrice: '699.00',
|
||||
thumbnail: '/static/goods/goods_7.png'
|
||||
thumbnail: 'https://lilishop-pc.oss-cn-beijing.aliyuncs.com/static/goods/goods_7.png'
|
||||
},
|
||||
{
|
||||
id: '8',
|
||||
goodsName: '极简静音无雾负离子香薰加湿器 大容量客厅卧室通用',
|
||||
price: '299.00',
|
||||
originalPrice: '399.00',
|
||||
thumbnail: '/static/goods/goods_8.png'
|
||||
thumbnail: 'https://lilishop-pc.oss-cn-beijing.aliyuncs.com/static/goods/goods_8.png'
|
||||
},
|
||||
{
|
||||
id: '9',
|
||||
goodsName: '智能降噪AI翻译蓝牙墨镜 超轻防紫外线偏光太阳镜',
|
||||
price: '599.00',
|
||||
originalPrice: '799.00',
|
||||
thumbnail: '/static/goods/goods_1.png'
|
||||
thumbnail: 'https://lilishop-pc.oss-cn-beijing.aliyuncs.com/static/goods/goods_1.png'
|
||||
},
|
||||
{
|
||||
id: '10',
|
||||
goodsName: '15.6英寸 4K超高清便携式显示器 Type-C一线直连高色域',
|
||||
price: '1299.00',
|
||||
originalPrice: '1699.00',
|
||||
thumbnail: '/static/goods/goods_3.png'
|
||||
thumbnail: 'https://lilishop-pc.oss-cn-beijing.aliyuncs.com/static/goods/goods_3.png'
|
||||
},
|
||||
{
|
||||
id: '11',
|
||||
goodsName: '国AA级减蓝光润眼长臂台灯 智能感光多档色温无极调光',
|
||||
price: '249.00',
|
||||
originalPrice: '359.00',
|
||||
thumbnail: '/static/goods/goods_4.png'
|
||||
thumbnail: 'https://lilishop-pc.oss-cn-beijing.aliyuncs.com/static/goods/goods_4.png'
|
||||
},
|
||||
{
|
||||
id: '12',
|
||||
goodsName: '航空级铝镁合金静音万向轮拉杆登机箱 20英寸防刮耐磨',
|
||||
price: '499.00',
|
||||
originalPrice: '699.00',
|
||||
thumbnail: '/static/goods/goods_7.png'
|
||||
thumbnail: 'https://lilishop-pc.oss-cn-beijing.aliyuncs.com/static/goods/goods_7.png'
|
||||
}
|
||||
],
|
||||
|
||||
@@ -734,7 +734,7 @@ export const COMPONENT_DEFINITIONS = [
|
||||
|
||||
showPoster: true,
|
||||
|
||||
posterImg: '/static/banner-floor/floor_banner_1.png',
|
||||
posterImg: 'https://lilishop-pc.oss-cn-beijing.aliyuncs.com/static/banner-floor/floor_banner_1.png',
|
||||
|
||||
posterTitle: '数码潮电 酷玩季',
|
||||
|
||||
@@ -754,56 +754,56 @@ export const COMPONENT_DEFINITIONS = [
|
||||
goodsName: '旗舰 5G 智能手机 12GB+256GB 超光影影像系统',
|
||||
price: '3999.00',
|
||||
originalPrice: '4599.00',
|
||||
thumbnail: '/static/goods/goods_1.png'
|
||||
thumbnail: 'https://lilishop-pc.oss-cn-beijing.aliyuncs.com/static/goods/goods_1.png'
|
||||
},
|
||||
{
|
||||
id: '102',
|
||||
goodsName: '无线头戴式深度主动降噪蓝牙耳机 空间音频Hi-Res',
|
||||
price: '1099.00',
|
||||
originalPrice: '1499.00',
|
||||
thumbnail: '/static/goods/goods_2.png'
|
||||
thumbnail: 'https://lilishop-pc.oss-cn-beijing.aliyuncs.com/static/goods/goods_2.png'
|
||||
},
|
||||
{
|
||||
id: '103',
|
||||
goodsName: '14英寸 全面屏轻薄商务笔记本电脑 酷睿i7 高刷防眩光',
|
||||
price: '5699.00',
|
||||
originalPrice: '6299.00',
|
||||
thumbnail: '/static/goods/goods_3.png'
|
||||
thumbnail: 'https://lilishop-pc.oss-cn-beijing.aliyuncs.com/static/goods/goods_3.png'
|
||||
},
|
||||
{
|
||||
id: '104',
|
||||
goodsName: '运动健康专业监测智能手表 心率血氧长续航50米防水',
|
||||
price: '899.00',
|
||||
originalPrice: '1199.00',
|
||||
thumbnail: '/static/goods/goods_4.png'
|
||||
thumbnail: 'https://lilishop-pc.oss-cn-beijing.aliyuncs.com/static/goods/goods_4.png'
|
||||
},
|
||||
{
|
||||
id: '105',
|
||||
goodsName: '奢宠酵母焕活修护精华露 50ml 紧致淡纹抗皱滋养',
|
||||
price: '680.00',
|
||||
originalPrice: '890.00',
|
||||
thumbnail: '/static/goods/goods_5.png'
|
||||
thumbnail: 'https://lilishop-pc.oss-cn-beijing.aliyuncs.com/static/goods/goods_5.png'
|
||||
},
|
||||
{
|
||||
id: '106',
|
||||
goodsName: '意式半自动家用复古咖啡机 20Bar高压恒温萃取蒸汽奶泡',
|
||||
price: '899.00',
|
||||
originalPrice: '1280.00',
|
||||
thumbnail: '/static/goods/goods_6.png'
|
||||
thumbnail: 'https://lilishop-pc.oss-cn-beijing.aliyuncs.com/static/goods/goods_6.png'
|
||||
},
|
||||
{
|
||||
id: '107',
|
||||
goodsName: '碳板专业竞速轻量缓震跑步鞋 透气防滑男女同款潮鞋',
|
||||
price: '459.00',
|
||||
originalPrice: '699.00',
|
||||
thumbnail: '/static/goods/goods_7.png'
|
||||
thumbnail: 'https://lilishop-pc.oss-cn-beijing.aliyuncs.com/static/goods/goods_7.png'
|
||||
},
|
||||
{
|
||||
id: '108',
|
||||
goodsName: '极简静音无雾负离子香薰加湿器 大容量客厅卧室通用',
|
||||
price: '299.00',
|
||||
originalPrice: '399.00',
|
||||
thumbnail: '/static/goods/goods_8.png'
|
||||
thumbnail: 'https://lilishop-pc.oss-cn-beijing.aliyuncs.com/static/goods/goods_8.png'
|
||||
}
|
||||
]
|
||||
|
||||
@@ -836,16 +836,16 @@ export const COMPONENT_DEFINITIONS = [
|
||||
moreText: '查看全部',
|
||||
columns: 5,
|
||||
goods: [
|
||||
{ id: '1', goodsName: '旗舰 5G 智能手机 12GB+256GB 超光影影像系统', price: '3999.00', originalPrice: '4599.00', thumbnail: '/static/goods/goods_1.png' },
|
||||
{ id: '2', goodsName: '无线头戴式深度主动降噪蓝牙耳机 空间音频Hi-Res', price: '1099.00', originalPrice: '1499.00', thumbnail: '/static/goods/goods_2.png' },
|
||||
{ id: '3', goodsName: '14英寸 全面屏轻薄商务笔记本电脑 酷睿i7 高刷防眩光', price: '5699.00', originalPrice: '6299.00', thumbnail: '/static/goods/goods_3.png' },
|
||||
{ id: '4', goodsName: '运动健康专业监测智能手表 心率血氧长续航50米防水', price: '899.00', originalPrice: '1199.00', thumbnail: '/static/goods/goods_4.png' },
|
||||
{ id: '5', goodsName: '奢宠酵母焕活修护精华露 50ml 紧致淡纹抗皱滋养', price: '680.00', originalPrice: '890.00', thumbnail: '/static/goods/goods_5.png' },
|
||||
{ id: '6', goodsName: '意式半自动家用复古咖啡机 20Bar高压恒温萃取蒸汽奶泡', price: '899.00', originalPrice: '1280.00', thumbnail: '/static/goods/goods_6.png' },
|
||||
{ id: '7', goodsName: '碳板专业竞速轻量缓震跑步鞋 透气防滑男女同款潮鞋', price: '459.00', originalPrice: '699.00', thumbnail: '/static/goods/goods_7.png' },
|
||||
{ id: '8', goodsName: '极简静音无雾负离子香薰加湿器 大容量客厅卧室通用', price: '299.00', originalPrice: '399.00', thumbnail: '/static/goods/goods_8.png' },
|
||||
{ id: '9', goodsName: '折叠屏旗舰手机 典藏陶瓷白 悬停双旋水滴铰链', price: '6999.00', originalPrice: '7999.00', thumbnail: '/static/goods/goods_1.png' },
|
||||
{ id: '10', goodsName: '真无线触控降噪蓝牙耳机 超低延迟游戏降噪', price: '599.00', originalPrice: '799.00', thumbnail: '/static/goods/goods_2.png' }
|
||||
{ id: '1', goodsName: '旗舰 5G 智能手机 12GB+256GB 超光影影像系统', price: '3999.00', originalPrice: '4599.00', thumbnail: 'https://lilishop-pc.oss-cn-beijing.aliyuncs.com/static/goods/goods_1.png' },
|
||||
{ id: '2', goodsName: '无线头戴式深度主动降噪蓝牙耳机 空间音频Hi-Res', price: '1099.00', originalPrice: '1499.00', thumbnail: 'https://lilishop-pc.oss-cn-beijing.aliyuncs.com/static/goods/goods_2.png' },
|
||||
{ id: '3', goodsName: '14英寸 全面屏轻薄商务笔记本电脑 酷睿i7 高刷防眩光', price: '5699.00', originalPrice: '6299.00', thumbnail: 'https://lilishop-pc.oss-cn-beijing.aliyuncs.com/static/goods/goods_3.png' },
|
||||
{ id: '4', goodsName: '运动健康专业监测智能手表 心率血氧长续航50米防水', price: '899.00', originalPrice: '1199.00', thumbnail: 'https://lilishop-pc.oss-cn-beijing.aliyuncs.com/static/goods/goods_4.png' },
|
||||
{ id: '5', goodsName: '奢宠酵母焕活修护精华露 50ml 紧致淡纹抗皱滋养', price: '680.00', originalPrice: '890.00', thumbnail: 'https://lilishop-pc.oss-cn-beijing.aliyuncs.com/static/goods/goods_5.png' },
|
||||
{ id: '6', goodsName: '意式半自动家用复古咖啡机 20Bar高压恒温萃取蒸汽奶泡', price: '899.00', originalPrice: '1280.00', thumbnail: 'https://lilishop-pc.oss-cn-beijing.aliyuncs.com/static/goods/goods_6.png' },
|
||||
{ id: '7', goodsName: '碳板专业竞速轻量缓震跑步鞋 透气防滑男女同款潮鞋', price: '459.00', originalPrice: '699.00', thumbnail: 'https://lilishop-pc.oss-cn-beijing.aliyuncs.com/static/goods/goods_7.png' },
|
||||
{ id: '8', goodsName: '极简静音无雾负离子香薰加湿器 大容量客厅卧室通用', price: '299.00', originalPrice: '399.00', thumbnail: 'https://lilishop-pc.oss-cn-beijing.aliyuncs.com/static/goods/goods_8.png' },
|
||||
{ id: '9', goodsName: '折叠屏旗舰手机 典藏陶瓷白 悬停双旋水滴铰链', price: '6999.00', originalPrice: '7999.00', thumbnail: 'https://lilishop-pc.oss-cn-beijing.aliyuncs.com/static/goods/goods_1.png' },
|
||||
{ id: '10', goodsName: '真无线触控降噪蓝牙耳机 超低延迟游戏降噪', price: '599.00', originalPrice: '799.00', thumbnail: 'https://lilishop-pc.oss-cn-beijing.aliyuncs.com/static/goods/goods_2.png' }
|
||||
]
|
||||
},
|
||||
|
||||
@@ -875,12 +875,12 @@ export const COMPONENT_DEFINITIONS = [
|
||||
|
||||
defaultOptions: {
|
||||
goodsId: '1',
|
||||
goodsInfo: { id: '1', goodsName: '旗舰 5G 智能手机 12GB+256GB 超光影影像系统', price: '3999.00', originalPrice: '4599.00', thumbnail: '/static/goods/goods_1.png' },
|
||||
goodsInfo: { id: '1', goodsName: '旗舰 5G 智能手机 12GB+256GB 超光影影像系统', price: '3999.00', originalPrice: '4599.00', thumbnail: 'https://lilishop-pc.oss-cn-beijing.aliyuncs.com/static/goods/goods_1.png' },
|
||||
customTitle: '年度年度旗舰 · 科技美学',
|
||||
customDesc: '搭载新一代旗舰处理器,超光影三主摄影像,120Hz高刷原色护眼屏,重磅直降立减600元。',
|
||||
badge: '重磅首发',
|
||||
goods: [
|
||||
{ id: '1', goodsName: '旗舰 5G 智能手机 12GB+256GB 超光影影像系统', price: '3999.00', originalPrice: '4599.00', thumbnail: '/static/goods/goods_1.png' }
|
||||
{ id: '1', goodsName: '旗舰 5G 智能手机 12GB+256GB 超光影影像系统', price: '3999.00', originalPrice: '4599.00', thumbnail: 'https://lilishop-pc.oss-cn-beijing.aliyuncs.com/static/goods/goods_1.png' }
|
||||
]
|
||||
},
|
||||
|
||||
@@ -911,17 +911,17 @@ export const COMPONENT_DEFINITIONS = [
|
||||
defaultOptions: {
|
||||
title: '大牌热销榜',
|
||||
subtitle: '经典楼层 · 专享特惠',
|
||||
bannerImg: '/static/banner-floor/floor_banner_1.png',
|
||||
bannerImg: 'https://lilishop-pc.oss-cn-beijing.aliyuncs.com/static/banner-floor/floor_banner_1.png',
|
||||
bannerUrl: '/goodsList?category=1',
|
||||
goodsCount: 6,
|
||||
columns: 3,
|
||||
goods: [
|
||||
{ id: '1', goodsName: '旗舰 5G 智能手机 12GB+256GB 超光影影像系统', price: '3999.00', originalPrice: '4599.00', thumbnail: '/static/goods/goods_1.png' },
|
||||
{ id: '2', goodsName: '无线头戴式深度主动降噪蓝牙耳机 空间音频Hi-Res', price: '1099.00', originalPrice: '1499.00', thumbnail: '/static/goods/goods_2.png' },
|
||||
{ id: '3', goodsName: '14英寸 全面屏轻薄商务笔记本电脑 酷睿i7 高刷防眩光', price: '5699.00', originalPrice: '6299.00', thumbnail: '/static/goods/goods_3.png' },
|
||||
{ id: '4', goodsName: '运动健康专业监测智能手表 心率血氧长续航50米防水', price: '899.00', originalPrice: '1199.00', thumbnail: '/static/goods/goods_4.png' },
|
||||
{ id: '5', goodsName: '奢宠酵母焕活修护精华露 50ml 紧致淡纹抗皱滋养', price: '680.00', originalPrice: '890.00', thumbnail: '/static/goods/goods_5.png' },
|
||||
{ id: '6', goodsName: '意式半自动家用复古咖啡机 20Bar高压恒温萃取蒸汽奶泡', price: '899.00', originalPrice: '1280.00', thumbnail: '/static/goods/goods_6.png' }
|
||||
{ id: '1', goodsName: '旗舰 5G 智能手机 12GB+256GB 超光影影像系统', price: '3999.00', originalPrice: '4599.00', thumbnail: 'https://lilishop-pc.oss-cn-beijing.aliyuncs.com/static/goods/goods_1.png' },
|
||||
{ id: '2', goodsName: '无线头戴式深度主动降噪蓝牙耳机 空间音频Hi-Res', price: '1099.00', originalPrice: '1499.00', thumbnail: 'https://lilishop-pc.oss-cn-beijing.aliyuncs.com/static/goods/goods_2.png' },
|
||||
{ id: '3', goodsName: '14英寸 全面屏轻薄商务笔记本电脑 酷睿i7 高刷防眩光', price: '5699.00', originalPrice: '6299.00', thumbnail: 'https://lilishop-pc.oss-cn-beijing.aliyuncs.com/static/goods/goods_3.png' },
|
||||
{ id: '4', goodsName: '运动健康专业监测智能手表 心率血氧长续航50米防水', price: '899.00', originalPrice: '1199.00', thumbnail: 'https://lilishop-pc.oss-cn-beijing.aliyuncs.com/static/goods/goods_4.png' },
|
||||
{ id: '5', goodsName: '奢宠酵母焕活修护精华露 50ml 紧致淡纹抗皱滋养', price: '680.00', originalPrice: '890.00', thumbnail: 'https://lilishop-pc.oss-cn-beijing.aliyuncs.com/static/goods/goods_5.png' },
|
||||
{ id: '6', goodsName: '意式半自动家用复古咖啡机 20Bar高压恒温萃取蒸汽奶泡', price: '899.00', originalPrice: '1280.00', thumbnail: 'https://lilishop-pc.oss-cn-beijing.aliyuncs.com/static/goods/goods_6.png' }
|
||||
]
|
||||
},
|
||||
|
||||
@@ -954,12 +954,12 @@ export const COMPONENT_DEFINITIONS = [
|
||||
subtitle: '每日人气尖货爆款直降',
|
||||
columns: 6,
|
||||
goods: [
|
||||
{ id: '1', goodsName: '旗舰 5G 智能手机 12GB+256GB 超光影影像系统', price: '3999.00', originalPrice: '4599.00', thumbnail: '/static/goods/goods_1.png' },
|
||||
{ id: '2', goodsName: '无线头戴式深度主动降噪蓝牙耳机 空间音频Hi-Res', price: '1099.00', originalPrice: '1499.00', thumbnail: '/static/goods/goods_2.png' },
|
||||
{ id: '3', goodsName: '14英寸 全面屏轻薄商务笔记本电脑 酷睿i7 高刷防眩光', price: '5699.00', originalPrice: '6299.00', thumbnail: '/static/goods/goods_3.png' },
|
||||
{ id: '4', goodsName: '运动健康专业监测智能手表 心率血氧长续航50米防水', price: '899.00', originalPrice: '1199.00', thumbnail: '/static/goods/goods_4.png' },
|
||||
{ id: '5', goodsName: '奢宠酵母焕活修护精华露 50ml 紧致淡纹抗皱滋养', price: '680.00', originalPrice: '890.00', thumbnail: '/static/goods/goods_5.png' },
|
||||
{ id: '6', goodsName: '意式半自动家用复古咖啡机 20Bar高压恒温萃取蒸汽奶泡', price: '899.00', originalPrice: '1280.00', thumbnail: '/static/goods/goods_6.png' }
|
||||
{ id: '1', goodsName: '旗舰 5G 智能手机 12GB+256GB 超光影影像系统', price: '3999.00', originalPrice: '4599.00', thumbnail: 'https://lilishop-pc.oss-cn-beijing.aliyuncs.com/static/goods/goods_1.png' },
|
||||
{ id: '2', goodsName: '无线头戴式深度主动降噪蓝牙耳机 空间音频Hi-Res', price: '1099.00', originalPrice: '1499.00', thumbnail: 'https://lilishop-pc.oss-cn-beijing.aliyuncs.com/static/goods/goods_2.png' },
|
||||
{ id: '3', goodsName: '14英寸 全面屏轻薄商务笔记本电脑 酷睿i7 高刷防眩光', price: '5699.00', originalPrice: '6299.00', thumbnail: 'https://lilishop-pc.oss-cn-beijing.aliyuncs.com/static/goods/goods_3.png' },
|
||||
{ id: '4', goodsName: '运动健康专业监测智能手表 心率血氧长续航50米防水', price: '899.00', originalPrice: '1199.00', thumbnail: 'https://lilishop-pc.oss-cn-beijing.aliyuncs.com/static/goods/goods_4.png' },
|
||||
{ id: '5', goodsName: '奢宠酵母焕活修护精华露 50ml 紧致淡纹抗皱滋养', price: '680.00', originalPrice: '890.00', thumbnail: 'https://lilishop-pc.oss-cn-beijing.aliyuncs.com/static/goods/goods_5.png' },
|
||||
{ id: '6', goodsName: '意式半自动家用复古咖啡机 20Bar高压恒温萃取蒸汽奶泡', price: '899.00', originalPrice: '1280.00', thumbnail: 'https://lilishop-pc.oss-cn-beijing.aliyuncs.com/static/goods/goods_6.png' }
|
||||
]
|
||||
},
|
||||
|
||||
@@ -989,7 +989,7 @@ export const COMPONENT_DEFINITIONS = [
|
||||
showTitle: true,
|
||||
title: '场景频道',
|
||||
subtitle: '主视觉 + 商品组合楼层',
|
||||
heroImage: '/static/banner-floor/floor_banner_1.png',
|
||||
heroImage: 'https://lilishop-pc.oss-cn-beijing.aliyuncs.com/static/banner-floor/floor_banner_1.png',
|
||||
heroTitle: '品质生活馆',
|
||||
heroSubtitle: '精选场景好物,一站购齐',
|
||||
heroButtonText: '进入频道',
|
||||
@@ -1001,12 +1001,12 @@ export const COMPONENT_DEFINITIONS = [
|
||||
],
|
||||
goodsCount: 6,
|
||||
goods: [
|
||||
{ id: '1', goodsName: '旗舰 5G 智能手机 12GB+256GB 超光影影像系统', price: '3999.00', originalPrice: '4599.00', thumbnail: '/static/goods/goods_1.png' },
|
||||
{ id: '2', goodsName: '无线头戴式深度主动降噪蓝牙耳机 空间音频Hi-Res', price: '1099.00', originalPrice: '1499.00', thumbnail: '/static/goods/goods_2.png' },
|
||||
{ id: '3', goodsName: '14英寸 全面屏轻薄商务笔记本电脑 酷睿i7 高刷防眩光', price: '5699.00', originalPrice: '6299.00', thumbnail: '/static/goods/goods_3.png' },
|
||||
{ id: '4', goodsName: '运动健康专业监测智能手表 心率血氧长续航50米防水', price: '899.00', originalPrice: '1199.00', thumbnail: '/static/goods/goods_4.png' },
|
||||
{ id: '5', goodsName: '意式半自动家用复古咖啡机 20Bar高压恒温萃取蒸汽奶泡', price: '899.00', originalPrice: '1280.00', thumbnail: '/static/goods/goods_6.png' },
|
||||
{ id: '6', goodsName: '奢宠酵母焕活修护精华露 50ml 紧致淡纹抗皱滋养', price: '680.00', originalPrice: '890.00', thumbnail: '/static/goods/goods_5.png' }
|
||||
{ id: '1', goodsName: '旗舰 5G 智能手机 12GB+256GB 超光影影像系统', price: '3999.00', originalPrice: '4599.00', thumbnail: 'https://lilishop-pc.oss-cn-beijing.aliyuncs.com/static/goods/goods_1.png' },
|
||||
{ id: '2', goodsName: '无线头戴式深度主动降噪蓝牙耳机 空间音频Hi-Res', price: '1099.00', originalPrice: '1499.00', thumbnail: 'https://lilishop-pc.oss-cn-beijing.aliyuncs.com/static/goods/goods_2.png' },
|
||||
{ id: '3', goodsName: '14英寸 全面屏轻薄商务笔记本电脑 酷睿i7 高刷防眩光', price: '5699.00', originalPrice: '6299.00', thumbnail: 'https://lilishop-pc.oss-cn-beijing.aliyuncs.com/static/goods/goods_3.png' },
|
||||
{ id: '4', goodsName: '运动健康专业监测智能手表 心率血氧长续航50米防水', price: '899.00', originalPrice: '1199.00', thumbnail: 'https://lilishop-pc.oss-cn-beijing.aliyuncs.com/static/goods/goods_4.png' },
|
||||
{ id: '5', goodsName: '意式半自动家用复古咖啡机 20Bar高压恒温萃取蒸汽奶泡', price: '899.00', originalPrice: '1280.00', thumbnail: 'https://lilishop-pc.oss-cn-beijing.aliyuncs.com/static/goods/goods_6.png' },
|
||||
{ id: '6', goodsName: '奢宠酵母焕活修护精华露 50ml 紧致淡纹抗皱滋养', price: '680.00', originalPrice: '890.00', thumbnail: 'https://lilishop-pc.oss-cn-beijing.aliyuncs.com/static/goods/goods_5.png' }
|
||||
]
|
||||
},
|
||||
|
||||
@@ -1038,14 +1038,14 @@ export const COMPONENT_DEFINITIONS = [
|
||||
imageRadius: 10,
|
||||
gap: 12,
|
||||
goods: [
|
||||
{ id: '1', goodsName: '旗舰 5G 智能手机 12GB+256GB 超光影影像系统', price: '3999.00', originalPrice: '4599.00', thumbnail: '/static/goods/goods_1.png' },
|
||||
{ id: '2', goodsName: '无线头戴式深度主动降噪蓝牙耳机 空间音频Hi-Res', price: '1099.00', originalPrice: '1499.00', thumbnail: '/static/goods/goods_2.png' },
|
||||
{ id: '3', goodsName: '14英寸 全面屏轻薄商务笔记本电脑 酷睿i7 高刷防眩光', price: '5699.00', originalPrice: '6299.00', thumbnail: '/static/goods/goods_3.png' },
|
||||
{ id: '4', goodsName: '运动健康专业监测智能手表 心率血氧长续航50米防水', price: '899.00', originalPrice: '1199.00', thumbnail: '/static/goods/goods_4.png' },
|
||||
{ id: '5', goodsName: '奢宠酵母焕活修护精华露 50ml 紧致淡纹抗皱滋养', price: '680.00', originalPrice: '890.00', thumbnail: '/static/goods/goods_5.png' },
|
||||
{ id: '6', goodsName: '意式半自动家用复古咖啡机 20Bar高压恒温萃取蒸汽奶泡', price: '899.00', originalPrice: '1280.00', thumbnail: '/static/goods/goods_6.png' },
|
||||
{ id: '7', goodsName: '碳板专业竞速轻量缓震跑步鞋 透气防滑男女同款潮鞋', price: '459.00', originalPrice: '699.00', thumbnail: '/static/goods/goods_7.png' },
|
||||
{ id: '8', goodsName: '极简静音无雾负离子香薰加湿器 大容量客厅卧室通用', price: '299.00', originalPrice: '399.00', thumbnail: '/static/goods/goods_8.png' }
|
||||
{ id: '1', goodsName: '旗舰 5G 智能手机 12GB+256GB 超光影影像系统', price: '3999.00', originalPrice: '4599.00', thumbnail: 'https://lilishop-pc.oss-cn-beijing.aliyuncs.com/static/goods/goods_1.png' },
|
||||
{ id: '2', goodsName: '无线头戴式深度主动降噪蓝牙耳机 空间音频Hi-Res', price: '1099.00', originalPrice: '1499.00', thumbnail: 'https://lilishop-pc.oss-cn-beijing.aliyuncs.com/static/goods/goods_2.png' },
|
||||
{ id: '3', goodsName: '14英寸 全面屏轻薄商务笔记本电脑 酷睿i7 高刷防眩光', price: '5699.00', originalPrice: '6299.00', thumbnail: 'https://lilishop-pc.oss-cn-beijing.aliyuncs.com/static/goods/goods_3.png' },
|
||||
{ id: '4', goodsName: '运动健康专业监测智能手表 心率血氧长续航50米防水', price: '899.00', originalPrice: '1199.00', thumbnail: 'https://lilishop-pc.oss-cn-beijing.aliyuncs.com/static/goods/goods_4.png' },
|
||||
{ id: '5', goodsName: '奢宠酵母焕活修护精华露 50ml 紧致淡纹抗皱滋养', price: '680.00', originalPrice: '890.00', thumbnail: 'https://lilishop-pc.oss-cn-beijing.aliyuncs.com/static/goods/goods_5.png' },
|
||||
{ id: '6', goodsName: '意式半自动家用复古咖啡机 20Bar高压恒温萃取蒸汽奶泡', price: '899.00', originalPrice: '1280.00', thumbnail: 'https://lilishop-pc.oss-cn-beijing.aliyuncs.com/static/goods/goods_6.png' },
|
||||
{ id: '7', goodsName: '碳板专业竞速轻量缓震跑步鞋 透气防滑男女同款潮鞋', price: '459.00', originalPrice: '699.00', thumbnail: 'https://lilishop-pc.oss-cn-beijing.aliyuncs.com/static/goods/goods_7.png' },
|
||||
{ id: '8', goodsName: '极简静音无雾负离子香薰加湿器 大容量客厅卧室通用', price: '299.00', originalPrice: '399.00', thumbnail: 'https://lilishop-pc.oss-cn-beijing.aliyuncs.com/static/goods/goods_8.png' }
|
||||
]
|
||||
},
|
||||
|
||||
|
||||
@@ -62,17 +62,6 @@
|
||||
|
||||
<div class="header-right">
|
||||
|
||||
<el-button
|
||||
type="warning"
|
||||
plain
|
||||
size="small"
|
||||
@click="handleLoadDouble11Preset(true)"
|
||||
title="一键加载包含全部25个组件的双11平台首页"
|
||||
>
|
||||
<el-icon><Star /></el-icon>
|
||||
<span>加载双11平台首页</span>
|
||||
</el-button>
|
||||
|
||||
<el-button
|
||||
|
||||
type="primary"
|
||||
@@ -395,9 +384,6 @@
|
||||
<el-button type="primary" @click="handleAddNewRow">
|
||||
<el-icon><Plus /></el-icon> 添加新行
|
||||
</el-button>
|
||||
<el-button type="warning" @click="handleLoadDouble11Preset(true)">
|
||||
<el-icon><Star /></el-icon> 一键生成双11平台首页
|
||||
</el-button>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
@@ -499,7 +485,6 @@ import {
|
||||
import { Message, Modal } from '@/utils/message';
|
||||
|
||||
import * as API_floor from '@/api/other.js';
|
||||
import { DOUBLE11_PAGE_DOCUMENT } from './presets/double11Preset.js';
|
||||
|
||||
import {
|
||||
|
||||
@@ -1631,18 +1616,6 @@ function goBack() {
|
||||
|
||||
}
|
||||
|
||||
function handleLoadDouble11Preset(showMsg = true) {
|
||||
pageDocument.value = JSON.parse(JSON.stringify(DOUBLE11_PAGE_DOCUMENT));
|
||||
pageInfo.name = '双11 平台首页';
|
||||
if (pageDocument.value.list && pageDocument.value.list.length > 0) {
|
||||
selectedRowId.value = pageDocument.value.list[0].id;
|
||||
selectedCompId.value = pageDocument.value.list[0].components[0]?.id || null;
|
||||
}
|
||||
markDirty();
|
||||
if (showMsg) {
|
||||
Message.success('已成功加载双11平台首页模板(全套25个组件)!');
|
||||
}
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
|
||||
@@ -1660,11 +1633,11 @@ onMounted(() => {
|
||||
|
||||
pageInfo.id = '';
|
||||
|
||||
pageInfo.name = route.query.name || '双11 平台首页';
|
||||
pageInfo.name = route.query.name || '平台首页装修';
|
||||
|
||||
pageInfo.pageShow = true;
|
||||
|
||||
handleLoadDouble11Preset(false);
|
||||
handleAddNewRow();
|
||||
|
||||
}
|
||||
|
||||
|
||||
@@ -89,7 +89,7 @@ export const DOUBLE11_PAGE_DOCUMENT = {
|
||||
"backgroundColor": "#ffffff"
|
||||
},
|
||||
"options": {
|
||||
"logoUrl": "/static/logo/logo.png",
|
||||
"logoUrl": "https://lilishop-pc.oss-cn-beijing.aliyuncs.com/static/logo/logo.png",
|
||||
"logoAlt": "双11全球狂欢节",
|
||||
"placeholder": "双11爆款 5折封顶 · 跨店每满300减50",
|
||||
"hotWords": [
|
||||
@@ -261,7 +261,7 @@ export const DOUBLE11_PAGE_DOCUMENT = {
|
||||
"name": "轮播图",
|
||||
"componentStyle": {
|
||||
"widthRatio": "66.67%",
|
||||
"backgroundColor": "transparent",
|
||||
"backgroundColor": "#ffffff",
|
||||
"radius": [
|
||||
8,
|
||||
8,
|
||||
@@ -282,29 +282,29 @@ export const DOUBLE11_PAGE_DOCUMENT = {
|
||||
{
|
||||
"title": "双11全球狂欢 · 潮流数码甄选",
|
||||
"subtitle": "定金膨胀100抵300 抢千元大额神券",
|
||||
"image": "/static/carousel/banner_1.png",
|
||||
"image": "https://lilishop-pc.oss-cn-beijing.aliyuncs.com/static/carousel/banner_1.png",
|
||||
"url": "/goodsList"
|
||||
},
|
||||
{
|
||||
"title": "奢宠美妆 · 经典护肤狂欢",
|
||||
"subtitle": "买1赠1正装量 跨店每满300减50",
|
||||
"image": "/static/carousel/banner_2.png",
|
||||
"image": "https://lilishop-pc.oss-cn-beijing.aliyuncs.com/static/carousel/banner_2.png",
|
||||
"url": "/goodsList"
|
||||
},
|
||||
{
|
||||
"title": "运动潮流 · 破界开练",
|
||||
"subtitle": "顶级碳板竞速 全场低至5折起",
|
||||
"image": "/static/carousel/banner_3.png",
|
||||
"image": "https://lilishop-pc.oss-cn-beijing.aliyuncs.com/static/carousel/banner_3.png",
|
||||
"url": "/goodsList"
|
||||
},
|
||||
{
|
||||
"title": "极简家居 · 美学生活",
|
||||
"subtitle": "大牌家电以旧换新 至高补贴20%",
|
||||
"image": "/static/carousel/banner_4.png",
|
||||
"image": "https://lilishop-pc.oss-cn-beijing.aliyuncs.com/static/carousel/banner_4.png",
|
||||
"url": "/goodsList"
|
||||
}
|
||||
],
|
||||
"fitMode": "cover"
|
||||
"fitMode": "contain"
|
||||
}
|
||||
},
|
||||
{
|
||||
@@ -652,7 +652,7 @@ export const DOUBLE11_PAGE_DOCUMENT = {
|
||||
]
|
||||
},
|
||||
"options": {
|
||||
"imageUrl": "/static/hot-zone/hotzone_default.png",
|
||||
"imageUrl": "https://lilishop-pc.oss-cn-beijing.aliyuncs.com/static/hot-zone/hotzone_default.png",
|
||||
"hotzones": [
|
||||
{
|
||||
"id": "hz1",
|
||||
@@ -729,7 +729,7 @@ export const DOUBLE11_PAGE_DOCUMENT = {
|
||||
"id": "p1",
|
||||
"title": "双11定金膨胀",
|
||||
"subtitle": "100抵300 抢跑双11",
|
||||
"image": "/static/promo/promo_1.png",
|
||||
"image": "https://lilishop-pc.oss-cn-beijing.aliyuncs.com/static/promo-group/promo_1.png",
|
||||
"tag": "预售锁定",
|
||||
"url": "/goodsList"
|
||||
},
|
||||
@@ -737,7 +737,7 @@ export const DOUBLE11_PAGE_DOCUMENT = {
|
||||
"id": "p2",
|
||||
"title": "大牌狂欢买1送1",
|
||||
"subtitle": "买大牌正装赠等量好礼",
|
||||
"image": "/static/promo/promo_2.png",
|
||||
"image": "https://lilishop-pc.oss-cn-beijing.aliyuncs.com/static/promo-group/promo_2.png",
|
||||
"tag": "狂欢赠礼",
|
||||
"url": "/goodsList"
|
||||
},
|
||||
@@ -745,7 +745,7 @@ export const DOUBLE11_PAGE_DOCUMENT = {
|
||||
"id": "p3",
|
||||
"title": "爆款百亿补贴",
|
||||
"subtitle": "全网比价 买贵必赔",
|
||||
"image": "/static/promo/promo_3.png",
|
||||
"image": "https://lilishop-pc.oss-cn-beijing.aliyuncs.com/static/promo-group/promo_3.png",
|
||||
"tag": "官方直补",
|
||||
"url": "/goodsList"
|
||||
}
|
||||
@@ -802,7 +802,7 @@ export const DOUBLE11_PAGE_DOCUMENT = {
|
||||
"badge": "立省600元",
|
||||
"price": "3999.00",
|
||||
"originalPrice": "4599.00",
|
||||
"image": "/static/goods/goods_1.png",
|
||||
"image": "https://lilishop-pc.oss-cn-beijing.aliyuncs.com/static/goods/goods_1.png",
|
||||
"url": "/goods/1"
|
||||
}
|
||||
},
|
||||
@@ -833,7 +833,7 @@ export const DOUBLE11_PAGE_DOCUMENT = {
|
||||
"goodsName": "无线头戴式深度主动降噪耳机 空间音频Hi-Res",
|
||||
"price": "1099.00",
|
||||
"originalPrice": "1499.00",
|
||||
"thumbnail": "/static/goods/goods_2.png",
|
||||
"thumbnail": "https://lilishop-pc.oss-cn-beijing.aliyuncs.com/static/goods/goods_2.png",
|
||||
"tag": "降噪TOP1"
|
||||
},
|
||||
{
|
||||
@@ -841,7 +841,7 @@ export const DOUBLE11_PAGE_DOCUMENT = {
|
||||
"goodsName": "14英寸全面屏轻薄笔记本电脑 酷睿i7 高刷防眩光",
|
||||
"price": "5699.00",
|
||||
"originalPrice": "6299.00",
|
||||
"thumbnail": "/static/goods/goods_3.png",
|
||||
"thumbnail": "https://lilishop-pc.oss-cn-beijing.aliyuncs.com/static/goods/goods_3.png",
|
||||
"tag": "直降600"
|
||||
},
|
||||
{
|
||||
@@ -849,7 +849,7 @@ export const DOUBLE11_PAGE_DOCUMENT = {
|
||||
"goodsName": "运动健康专业监测智能手表 心率血氧长续航防水",
|
||||
"price": "899.00",
|
||||
"originalPrice": "1199.00",
|
||||
"thumbnail": "/static/goods/goods_4.png",
|
||||
"thumbnail": "https://lilishop-pc.oss-cn-beijing.aliyuncs.com/static/goods/goods_4.png",
|
||||
"tag": "抢购热卖"
|
||||
}
|
||||
]
|
||||
@@ -977,7 +977,7 @@ export const DOUBLE11_PAGE_DOCUMENT = {
|
||||
"floorNo": "1F",
|
||||
"title": "潮流数码狂欢",
|
||||
"subtitle": "DIGITAL & GADGETS",
|
||||
"posterImage": "/static/banner-floor/floor_banner_1.png",
|
||||
"posterImage": "https://lilishop-pc.oss-cn-beijing.aliyuncs.com/static/banner-floor/floor_banner_1.png",
|
||||
"posterTitle": "数码狂欢盛典",
|
||||
"posterSubtitle": "最高立省1000元",
|
||||
"goods": [
|
||||
@@ -989,7 +989,7 @@ export const DOUBLE11_PAGE_DOCUMENT = {
|
||||
"sales": 15820,
|
||||
"positiveRate": "99.8%",
|
||||
"isSelf": true,
|
||||
"thumbnail": "/static/goods/goods_1.png"
|
||||
"thumbnail": "https://lilishop-pc.oss-cn-beijing.aliyuncs.com/static/goods/goods_1.png"
|
||||
},
|
||||
{
|
||||
"id": "2",
|
||||
@@ -999,7 +999,7 @@ export const DOUBLE11_PAGE_DOCUMENT = {
|
||||
"sales": 28410,
|
||||
"positiveRate": "99.5%",
|
||||
"isSelf": true,
|
||||
"thumbnail": "/static/goods/goods_2.png"
|
||||
"thumbnail": "https://lilishop-pc.oss-cn-beijing.aliyuncs.com/static/goods/goods_2.png"
|
||||
},
|
||||
{
|
||||
"id": "3",
|
||||
@@ -1009,7 +1009,7 @@ export const DOUBLE11_PAGE_DOCUMENT = {
|
||||
"sales": 9320,
|
||||
"positiveRate": "99.2%",
|
||||
"isSelf": true,
|
||||
"thumbnail": "/static/goods/goods_3.png"
|
||||
"thumbnail": "https://lilishop-pc.oss-cn-beijing.aliyuncs.com/static/goods/goods_3.png"
|
||||
},
|
||||
{
|
||||
"id": "4",
|
||||
@@ -1019,7 +1019,7 @@ export const DOUBLE11_PAGE_DOCUMENT = {
|
||||
"sales": 19500,
|
||||
"positiveRate": "99.6%",
|
||||
"isSelf": true,
|
||||
"thumbnail": "/static/goods/goods_4.png"
|
||||
"thumbnail": "https://lilishop-pc.oss-cn-beijing.aliyuncs.com/static/goods/goods_4.png"
|
||||
}
|
||||
]
|
||||
}
|
||||
@@ -1055,7 +1055,7 @@ export const DOUBLE11_PAGE_DOCUMENT = {
|
||||
"backgroundColor": "transparent"
|
||||
},
|
||||
"options": {
|
||||
"bannerImage": "/static/banner-floor/floor_banner_1.png",
|
||||
"bannerImage": "https://lilishop-pc.oss-cn-beijing.aliyuncs.com/static/banner-floor/floor_banner_1.png",
|
||||
"title": "双11大牌品质生活盛典",
|
||||
"subtitle": "以旧换新重磅补贴 跨店每满300减50",
|
||||
"goods": [
|
||||
@@ -1067,7 +1067,7 @@ export const DOUBLE11_PAGE_DOCUMENT = {
|
||||
"sales": 34100,
|
||||
"positiveRate": "99.9%",
|
||||
"isSelf": true,
|
||||
"thumbnail": "/static/goods/goods_5.png"
|
||||
"thumbnail": "https://lilishop-pc.oss-cn-beijing.aliyuncs.com/static/goods/goods_5.png"
|
||||
},
|
||||
{
|
||||
"id": "6",
|
||||
@@ -1077,7 +1077,7 @@ export const DOUBLE11_PAGE_DOCUMENT = {
|
||||
"sales": 8760,
|
||||
"positiveRate": "99.1%",
|
||||
"isSelf": false,
|
||||
"thumbnail": "/static/goods/goods_6.png"
|
||||
"thumbnail": "https://lilishop-pc.oss-cn-beijing.aliyuncs.com/static/goods/goods_6.png"
|
||||
},
|
||||
{
|
||||
"id": "7",
|
||||
@@ -1087,7 +1087,7 @@ export const DOUBLE11_PAGE_DOCUMENT = {
|
||||
"sales": 22100,
|
||||
"positiveRate": "99.4%",
|
||||
"isSelf": true,
|
||||
"thumbnail": "/static/goods/goods_7.png"
|
||||
"thumbnail": "https://lilishop-pc.oss-cn-beijing.aliyuncs.com/static/goods/goods_7.png"
|
||||
},
|
||||
{
|
||||
"id": "8",
|
||||
@@ -1097,7 +1097,7 @@ export const DOUBLE11_PAGE_DOCUMENT = {
|
||||
"sales": 14200,
|
||||
"positiveRate": "99.0%",
|
||||
"isSelf": false,
|
||||
"thumbnail": "/static/goods/goods_8.png"
|
||||
"thumbnail": "https://lilishop-pc.oss-cn-beijing.aliyuncs.com/static/goods/goods_8.png"
|
||||
}
|
||||
]
|
||||
}
|
||||
@@ -1135,7 +1135,7 @@ export const DOUBLE11_PAGE_DOCUMENT = {
|
||||
"options": {
|
||||
"title": "双11智能生活场景馆",
|
||||
"subtitle": "SMART LIFE SHOWROOM",
|
||||
"heroImage": "/static/promo/promo_1.png",
|
||||
"heroImage": "https://lilishop-pc.oss-cn-beijing.aliyuncs.com/static/promo-group/promo_1.png",
|
||||
"heroTitle": "智能生活新时代",
|
||||
"heroSubtitle": "畅享未来智慧家庭科技",
|
||||
"goods": [
|
||||
@@ -1147,7 +1147,7 @@ export const DOUBLE11_PAGE_DOCUMENT = {
|
||||
"sales": 15820,
|
||||
"positiveRate": "99.8%",
|
||||
"isSelf": true,
|
||||
"thumbnail": "/static/goods/goods_1.png"
|
||||
"thumbnail": "https://lilishop-pc.oss-cn-beijing.aliyuncs.com/static/goods/goods_1.png"
|
||||
},
|
||||
{
|
||||
"id": "3",
|
||||
@@ -1157,7 +1157,7 @@ export const DOUBLE11_PAGE_DOCUMENT = {
|
||||
"sales": 9320,
|
||||
"positiveRate": "99.2%",
|
||||
"isSelf": true,
|
||||
"thumbnail": "/static/goods/goods_3.png"
|
||||
"thumbnail": "https://lilishop-pc.oss-cn-beijing.aliyuncs.com/static/goods/goods_3.png"
|
||||
},
|
||||
{
|
||||
"id": "6",
|
||||
@@ -1167,7 +1167,7 @@ export const DOUBLE11_PAGE_DOCUMENT = {
|
||||
"sales": 8760,
|
||||
"positiveRate": "99.1%",
|
||||
"isSelf": false,
|
||||
"thumbnail": "/static/goods/goods_6.png"
|
||||
"thumbnail": "https://lilishop-pc.oss-cn-beijing.aliyuncs.com/static/goods/goods_6.png"
|
||||
}
|
||||
]
|
||||
}
|
||||
@@ -1250,7 +1250,7 @@ export const DOUBLE11_PAGE_DOCUMENT = {
|
||||
"sales": 15820,
|
||||
"positiveRate": "99.8%",
|
||||
"isSelf": true,
|
||||
"thumbnail": "/static/goods/goods_1.png"
|
||||
"thumbnail": "https://lilishop-pc.oss-cn-beijing.aliyuncs.com/static/goods/goods_1.png"
|
||||
},
|
||||
{
|
||||
"id": "2",
|
||||
@@ -1260,7 +1260,7 @@ export const DOUBLE11_PAGE_DOCUMENT = {
|
||||
"sales": 28410,
|
||||
"positiveRate": "99.5%",
|
||||
"isSelf": true,
|
||||
"thumbnail": "/static/goods/goods_2.png"
|
||||
"thumbnail": "https://lilishop-pc.oss-cn-beijing.aliyuncs.com/static/goods/goods_2.png"
|
||||
},
|
||||
{
|
||||
"id": "3",
|
||||
@@ -1270,7 +1270,7 @@ export const DOUBLE11_PAGE_DOCUMENT = {
|
||||
"sales": 9320,
|
||||
"positiveRate": "99.2%",
|
||||
"isSelf": true,
|
||||
"thumbnail": "/static/goods/goods_3.png"
|
||||
"thumbnail": "https://lilishop-pc.oss-cn-beijing.aliyuncs.com/static/goods/goods_3.png"
|
||||
},
|
||||
{
|
||||
"id": "4",
|
||||
@@ -1280,7 +1280,7 @@ export const DOUBLE11_PAGE_DOCUMENT = {
|
||||
"sales": 19500,
|
||||
"positiveRate": "99.6%",
|
||||
"isSelf": true,
|
||||
"thumbnail": "/static/goods/goods_4.png"
|
||||
"thumbnail": "https://lilishop-pc.oss-cn-beijing.aliyuncs.com/static/goods/goods_4.png"
|
||||
},
|
||||
{
|
||||
"id": "5",
|
||||
@@ -1290,7 +1290,7 @@ export const DOUBLE11_PAGE_DOCUMENT = {
|
||||
"sales": 34100,
|
||||
"positiveRate": "99.9%",
|
||||
"isSelf": true,
|
||||
"thumbnail": "/static/goods/goods_5.png"
|
||||
"thumbnail": "https://lilishop-pc.oss-cn-beijing.aliyuncs.com/static/goods/goods_5.png"
|
||||
},
|
||||
{
|
||||
"id": "6",
|
||||
@@ -1300,7 +1300,7 @@ export const DOUBLE11_PAGE_DOCUMENT = {
|
||||
"sales": 8760,
|
||||
"positiveRate": "99.1%",
|
||||
"isSelf": false,
|
||||
"thumbnail": "/static/goods/goods_6.png"
|
||||
"thumbnail": "https://lilishop-pc.oss-cn-beijing.aliyuncs.com/static/goods/goods_6.png"
|
||||
},
|
||||
{
|
||||
"id": "7",
|
||||
@@ -1310,7 +1310,7 @@ export const DOUBLE11_PAGE_DOCUMENT = {
|
||||
"sales": 22100,
|
||||
"positiveRate": "99.4%",
|
||||
"isSelf": true,
|
||||
"thumbnail": "/static/goods/goods_7.png"
|
||||
"thumbnail": "https://lilishop-pc.oss-cn-beijing.aliyuncs.com/static/goods/goods_7.png"
|
||||
},
|
||||
{
|
||||
"id": "8",
|
||||
@@ -1320,7 +1320,7 @@ export const DOUBLE11_PAGE_DOCUMENT = {
|
||||
"sales": 14200,
|
||||
"positiveRate": "99.0%",
|
||||
"isSelf": false,
|
||||
"thumbnail": "/static/goods/goods_8.png"
|
||||
"thumbnail": "https://lilishop-pc.oss-cn-beijing.aliyuncs.com/static/goods/goods_8.png"
|
||||
}
|
||||
]
|
||||
}
|
||||
@@ -1394,7 +1394,7 @@ export const DOUBLE11_PAGE_DOCUMENT = {
|
||||
},
|
||||
"options": {
|
||||
"videoUrl": "https://vjs.zencdn.net/v/oceans.mp4",
|
||||
"coverUrl": "/static/video/video_cover.png",
|
||||
"coverUrl": "https://lilishop-pc.oss-cn-beijing.aliyuncs.com/static/video/video_cover.png",
|
||||
"title": "双11全球狂欢发布盛典 · 年度旗舰好物真实开箱测评",
|
||||
"autoplay": false
|
||||
}
|
||||
@@ -1471,25 +1471,25 @@ export const DOUBLE11_PAGE_DOCUMENT = {
|
||||
{
|
||||
"id": "1",
|
||||
"name": "Apple 官方旗舰店",
|
||||
"logo": "/static/brand-wall/brand_1.png",
|
||||
"logo": "https://lilishop-pc.oss-cn-beijing.aliyuncs.com/static/brand-wall/brand_1.png",
|
||||
"tag": "正品补贴"
|
||||
},
|
||||
{
|
||||
"id": "2",
|
||||
"name": "Sony 索尼官方旗舰店",
|
||||
"logo": "/static/brand-wall/brand_2.png",
|
||||
"logo": "https://lilishop-pc.oss-cn-beijing.aliyuncs.com/static/brand-wall/brand_2.png",
|
||||
"tag": "新品独家"
|
||||
},
|
||||
{
|
||||
"id": "3",
|
||||
"name": "Estee Lauder 雅诗兰黛",
|
||||
"logo": "/static/brand-wall/brand_3.png",
|
||||
"logo": "https://lilishop-pc.oss-cn-beijing.aliyuncs.com/static/brand-wall/brand_3.png",
|
||||
"tag": "买1送1"
|
||||
},
|
||||
{
|
||||
"id": "4",
|
||||
"name": "Nike 耐克官方商城",
|
||||
"logo": "/static/brand-wall/brand_4.png",
|
||||
"logo": "https://lilishop-pc.oss-cn-beijing.aliyuncs.com/static/brand-wall/brand_4.png",
|
||||
"tag": "低至5折"
|
||||
}
|
||||
]
|
||||
@@ -1647,7 +1647,7 @@ export const DOUBLE11_PAGE_DOCUMENT = {
|
||||
"sales": 15820,
|
||||
"positiveRate": "99.8%",
|
||||
"isSelf": true,
|
||||
"thumbnail": "/static/goods/goods_1.png"
|
||||
"thumbnail": "https://lilishop-pc.oss-cn-beijing.aliyuncs.com/static/goods/goods_1.png"
|
||||
},
|
||||
{
|
||||
"id": "2",
|
||||
@@ -1657,7 +1657,7 @@ export const DOUBLE11_PAGE_DOCUMENT = {
|
||||
"sales": 28410,
|
||||
"positiveRate": "99.5%",
|
||||
"isSelf": true,
|
||||
"thumbnail": "/static/goods/goods_2.png"
|
||||
"thumbnail": "https://lilishop-pc.oss-cn-beijing.aliyuncs.com/static/goods/goods_2.png"
|
||||
},
|
||||
{
|
||||
"id": "3",
|
||||
@@ -1667,7 +1667,7 @@ export const DOUBLE11_PAGE_DOCUMENT = {
|
||||
"sales": 9320,
|
||||
"positiveRate": "99.2%",
|
||||
"isSelf": true,
|
||||
"thumbnail": "/static/goods/goods_3.png"
|
||||
"thumbnail": "https://lilishop-pc.oss-cn-beijing.aliyuncs.com/static/goods/goods_3.png"
|
||||
},
|
||||
{
|
||||
"id": "4",
|
||||
@@ -1677,7 +1677,7 @@ export const DOUBLE11_PAGE_DOCUMENT = {
|
||||
"sales": 19500,
|
||||
"positiveRate": "99.6%",
|
||||
"isSelf": true,
|
||||
"thumbnail": "/static/goods/goods_4.png"
|
||||
"thumbnail": "https://lilishop-pc.oss-cn-beijing.aliyuncs.com/static/goods/goods_4.png"
|
||||
},
|
||||
{
|
||||
"id": "5",
|
||||
@@ -1687,7 +1687,7 @@ export const DOUBLE11_PAGE_DOCUMENT = {
|
||||
"sales": 34100,
|
||||
"positiveRate": "99.9%",
|
||||
"isSelf": true,
|
||||
"thumbnail": "/static/goods/goods_5.png"
|
||||
"thumbnail": "https://lilishop-pc.oss-cn-beijing.aliyuncs.com/static/goods/goods_5.png"
|
||||
},
|
||||
{
|
||||
"id": "6",
|
||||
@@ -1697,7 +1697,7 @@ export const DOUBLE11_PAGE_DOCUMENT = {
|
||||
"sales": 8760,
|
||||
"positiveRate": "99.1%",
|
||||
"isSelf": false,
|
||||
"thumbnail": "/static/goods/goods_6.png"
|
||||
"thumbnail": "https://lilishop-pc.oss-cn-beijing.aliyuncs.com/static/goods/goods_6.png"
|
||||
},
|
||||
{
|
||||
"id": "7",
|
||||
@@ -1707,7 +1707,7 @@ export const DOUBLE11_PAGE_DOCUMENT = {
|
||||
"sales": 22100,
|
||||
"positiveRate": "99.4%",
|
||||
"isSelf": true,
|
||||
"thumbnail": "/static/goods/goods_7.png"
|
||||
"thumbnail": "https://lilishop-pc.oss-cn-beijing.aliyuncs.com/static/goods/goods_7.png"
|
||||
},
|
||||
{
|
||||
"id": "8",
|
||||
@@ -1717,7 +1717,7 @@ export const DOUBLE11_PAGE_DOCUMENT = {
|
||||
"sales": 14200,
|
||||
"positiveRate": "99.0%",
|
||||
"isSelf": false,
|
||||
"thumbnail": "/static/goods/goods_8.png"
|
||||
"thumbnail": "https://lilishop-pc.oss-cn-beijing.aliyuncs.com/static/goods/goods_8.png"
|
||||
}
|
||||
]
|
||||
}
|
||||
@@ -1800,7 +1800,7 @@ export const DOUBLE11_PAGE_DOCUMENT = {
|
||||
"sales": 15820,
|
||||
"positiveRate": "99.8%",
|
||||
"isSelf": true,
|
||||
"thumbnail": "/static/goods/goods_1.png"
|
||||
"thumbnail": "https://lilishop-pc.oss-cn-beijing.aliyuncs.com/static/goods/goods_1.png"
|
||||
},
|
||||
{
|
||||
"id": "2",
|
||||
@@ -1810,7 +1810,7 @@ export const DOUBLE11_PAGE_DOCUMENT = {
|
||||
"sales": 28410,
|
||||
"positiveRate": "99.5%",
|
||||
"isSelf": true,
|
||||
"thumbnail": "/static/goods/goods_2.png"
|
||||
"thumbnail": "https://lilishop-pc.oss-cn-beijing.aliyuncs.com/static/goods/goods_2.png"
|
||||
},
|
||||
{
|
||||
"id": "3",
|
||||
@@ -1820,7 +1820,7 @@ export const DOUBLE11_PAGE_DOCUMENT = {
|
||||
"sales": 9320,
|
||||
"positiveRate": "99.2%",
|
||||
"isSelf": true,
|
||||
"thumbnail": "/static/goods/goods_3.png"
|
||||
"thumbnail": "https://lilishop-pc.oss-cn-beijing.aliyuncs.com/static/goods/goods_3.png"
|
||||
},
|
||||
{
|
||||
"id": "4",
|
||||
@@ -1830,7 +1830,7 @@ export const DOUBLE11_PAGE_DOCUMENT = {
|
||||
"sales": 19500,
|
||||
"positiveRate": "99.6%",
|
||||
"isSelf": true,
|
||||
"thumbnail": "/static/goods/goods_4.png"
|
||||
"thumbnail": "https://lilishop-pc.oss-cn-beijing.aliyuncs.com/static/goods/goods_4.png"
|
||||
},
|
||||
{
|
||||
"id": "5",
|
||||
@@ -1840,7 +1840,7 @@ export const DOUBLE11_PAGE_DOCUMENT = {
|
||||
"sales": 34100,
|
||||
"positiveRate": "99.9%",
|
||||
"isSelf": true,
|
||||
"thumbnail": "/static/goods/goods_5.png"
|
||||
"thumbnail": "https://lilishop-pc.oss-cn-beijing.aliyuncs.com/static/goods/goods_5.png"
|
||||
},
|
||||
{
|
||||
"id": "6",
|
||||
@@ -1850,7 +1850,7 @@ export const DOUBLE11_PAGE_DOCUMENT = {
|
||||
"sales": 8760,
|
||||
"positiveRate": "99.1%",
|
||||
"isSelf": false,
|
||||
"thumbnail": "/static/goods/goods_6.png"
|
||||
"thumbnail": "https://lilishop-pc.oss-cn-beijing.aliyuncs.com/static/goods/goods_6.png"
|
||||
},
|
||||
{
|
||||
"id": "7",
|
||||
@@ -1860,7 +1860,7 @@ export const DOUBLE11_PAGE_DOCUMENT = {
|
||||
"sales": 22100,
|
||||
"positiveRate": "99.4%",
|
||||
"isSelf": true,
|
||||
"thumbnail": "/static/goods/goods_7.png"
|
||||
"thumbnail": "https://lilishop-pc.oss-cn-beijing.aliyuncs.com/static/goods/goods_7.png"
|
||||
},
|
||||
{
|
||||
"id": "8",
|
||||
@@ -1870,7 +1870,7 @@ export const DOUBLE11_PAGE_DOCUMENT = {
|
||||
"sales": 14200,
|
||||
"positiveRate": "99.0%",
|
||||
"isSelf": false,
|
||||
"thumbnail": "/static/goods/goods_8.png"
|
||||
"thumbnail": "https://lilishop-pc.oss-cn-beijing.aliyuncs.com/static/goods/goods_8.png"
|
||||
}
|
||||
]
|
||||
}
|
||||
|
||||
@@ -46,10 +46,10 @@ const brandList = computed(() => {
|
||||
return props.options.items;
|
||||
}
|
||||
return [
|
||||
{ title: '数码潮玩 · 爆款立减500', img: '/static/brand-wall/brand_1.png', url: '/goodsList?category=1' },
|
||||
{ title: '美妆奢宠 · 每满300减50', img: '/static/brand-wall/brand_2.png', url: '/goodsList?category=2' },
|
||||
{ title: '运动潮品 · 爆款低至5折', img: '/static/brand-wall/brand_3.png', url: '/goodsList?category=3' },
|
||||
{ title: '品质生活 · 限时第2件半价', img: '/static/brand-wall/brand_4.png', url: '/goodsList?category=4' }
|
||||
{ title: '数码潮玩 · 爆款立减500', img: 'https://lilishop-pc.oss-cn-beijing.aliyuncs.com/static/brand-wall/brand_1.png', url: '/goodsList?category=1' },
|
||||
{ title: '美妆奢宠 · 每满300减50', img: 'https://lilishop-pc.oss-cn-beijing.aliyuncs.com/static/brand-wall/brand_2.png', url: '/goodsList?category=2' },
|
||||
{ title: '运动潮品 · 爆款低至5折', img: 'https://lilishop-pc.oss-cn-beijing.aliyuncs.com/static/brand-wall/brand_3.png', url: '/goodsList?category=3' },
|
||||
{ title: '品质生活 · 限时第2件半价', img: 'https://lilishop-pc.oss-cn-beijing.aliyuncs.com/static/brand-wall/brand_4.png', url: '/goodsList?category=4' }
|
||||
];
|
||||
});
|
||||
|
||||
|
||||
@@ -70,11 +70,18 @@ const slidesList = computed(() => {
|
||||
if (Array.isArray(props.options.list) && props.options.list.length > 0) {
|
||||
return props.options.list;
|
||||
}
|
||||
if (Array.isArray(props.options.banners) && props.options.banners.length > 0) {
|
||||
return props.options.banners.map(b => ({
|
||||
title: b.title,
|
||||
img: b.image || b.img || b.url,
|
||||
url: b.url || b.link
|
||||
}));
|
||||
}
|
||||
return [
|
||||
{ title: '出游囤好货', img: '/static/carousel/banner_1.png', url: '/goodsList?seckill=1' },
|
||||
{ title: '科技新品', img: '/static/carousel/banner_2.png', url: '/goodsList?category=1' },
|
||||
{ title: '原产地直采', img: '/static/carousel/banner_3.png', url: '/goodsList?category=2' },
|
||||
{ title: '大牌美妆', img: '/static/carousel/banner_4.png', url: '/goodsList?category=3' }
|
||||
{ title: '出游囤好货', img: 'https://lilishop-pc.oss-cn-beijing.aliyuncs.com/static/carousel/banner_1.png', url: '/goodsList?seckill=1' },
|
||||
{ title: '科技新品', img: 'https://lilishop-pc.oss-cn-beijing.aliyuncs.com/static/carousel/banner_2.png', url: '/goodsList?category=1' },
|
||||
{ title: '原产地直采', img: 'https://lilishop-pc.oss-cn-beijing.aliyuncs.com/static/carousel/banner_3.png', url: '/goodsList?category=2' },
|
||||
{ title: '大牌美妆', img: 'https://lilishop-pc.oss-cn-beijing.aliyuncs.com/static/carousel/banner_4.png', url: '/goodsList?category=3' }
|
||||
];
|
||||
});
|
||||
|
||||
@@ -92,12 +99,13 @@ function getAspectRatioCss(ratio) {
|
||||
|
||||
const customStyle = computed(() => {
|
||||
const s = props.componentStyle || {};
|
||||
const fit = props.options.fitMode || 'cover';
|
||||
const fit = props.options.fitMode || 'contain';
|
||||
|
||||
const styleObj = {
|
||||
borderRadius: Array.isArray(s.radius)
|
||||
? `${s.radius[0]}px ${s.radius[1]}px ${s.radius[2]}px ${s.radius[3]}px`
|
||||
: '0px',
|
||||
: '8px',
|
||||
backgroundColor: s.backgroundColor || '#ffffff',
|
||||
'--carousel-fit': fit
|
||||
};
|
||||
|
||||
@@ -175,22 +183,35 @@ onBeforeUnmount(() => {
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
user-select: none;
|
||||
background: #f8fafc;
|
||||
background: #ffffff;
|
||||
border: 1px solid #e2e8f0;
|
||||
border-radius: 8px;
|
||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.03);
|
||||
box-sizing: border-box;
|
||||
|
||||
.carousel-container {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: relative;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
.slide-view {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background: #ffffff;
|
||||
|
||||
.slide-img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: var(--carousel-fit, contain);
|
||||
max-width: 100%;
|
||||
max-height: 100%;
|
||||
object-fit: var(--carousel-fit, contain) !important;
|
||||
object-position: center;
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -13,7 +13,7 @@
|
||||
class="cat-item"
|
||||
:style="{
|
||||
'--text-color': options.textColor || '#334155',
|
||||
'--active-color': options.activeColor || '#ff6000',
|
||||
'--active-color': options.activeColor || '#409EFF',
|
||||
'--font-size': `${options.fontSize || 13}px`
|
||||
}"
|
||||
>
|
||||
@@ -138,12 +138,12 @@ const customStyle = computed(() => {
|
||||
background: #fff7ed;
|
||||
|
||||
.cat-name {
|
||||
color: var(--active-color, #ff6000);
|
||||
color: var(--active-color, #409EFF);
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.arrow-icon {
|
||||
color: var(--active-color, #ff6000);
|
||||
color: var(--active-color, #409EFF);
|
||||
transform: translateX(2px);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -104,10 +104,10 @@ const props = defineProps({
|
||||
}
|
||||
});
|
||||
|
||||
const defaultThumb = '/static/goods/goods_1.png';
|
||||
const defaultThumb = 'https://lilishop-pc.oss-cn-beijing.aliyuncs.com/static/goods/goods_1.png';
|
||||
|
||||
const heroImg = computed(() => {
|
||||
return props.options?.heroImage || '/static/banner-floor/floor_banner_1.png';
|
||||
return props.options?.heroImage || 'https://lilishop-pc.oss-cn-beijing.aliyuncs.com/static/banner-floor/floor_banner_1.png';
|
||||
});
|
||||
|
||||
const showHero = computed(() => {
|
||||
@@ -138,12 +138,12 @@ const promosList = computed(() => {
|
||||
});
|
||||
|
||||
const defaultGoods = [
|
||||
{ id: '1', goodsName: '旗舰 5G 智能手机 12GB+256GB 超光影影像系统', price: '3999.00', originalPrice: '4599.00', thumbnail: '/static/goods/goods_1.png' },
|
||||
{ id: '2', goodsName: '无线头戴式深度主动降噪蓝牙耳机 空间音频Hi-Res', price: '1099.00', originalPrice: '1499.00', thumbnail: '/static/goods/goods_2.png' },
|
||||
{ id: '3', goodsName: '14英寸 全面屏轻薄商务笔记本电脑 酷睿i7 高刷防眩光', price: '5699.00', originalPrice: '6299.00', thumbnail: '/static/goods/goods_3.png' },
|
||||
{ id: '4', goodsName: '运动健康专业监测智能手表 心率血氧长续航50米防水', price: '899.00', originalPrice: '1199.00', thumbnail: '/static/goods/goods_4.png' },
|
||||
{ id: '5', goodsName: '意式半自动家用复古咖啡机 20Bar高压恒温萃取蒸汽奶泡', price: '899.00', originalPrice: '1280.00', thumbnail: '/static/goods/goods_6.png' },
|
||||
{ id: '6', goodsName: '奢宠酵母焕活修护精华露 50ml 紧致淡纹抗皱滋养', price: '680.00', originalPrice: '890.00', thumbnail: '/static/goods/goods_5.png' }
|
||||
{ id: '1', goodsName: '旗舰 5G 智能手机 12GB+256GB 超光影影像系统', price: '3999.00', originalPrice: '4599.00', thumbnail: 'https://lilishop-pc.oss-cn-beijing.aliyuncs.com/static/goods/goods_1.png' },
|
||||
{ id: '2', goodsName: '无线头戴式深度主动降噪蓝牙耳机 空间音频Hi-Res', price: '1099.00', originalPrice: '1499.00', thumbnail: 'https://lilishop-pc.oss-cn-beijing.aliyuncs.com/static/goods/goods_2.png' },
|
||||
{ id: '3', goodsName: '14英寸 全面屏轻薄商务笔记本电脑 酷睿i7 高刷防眩光', price: '5699.00', originalPrice: '6299.00', thumbnail: 'https://lilishop-pc.oss-cn-beijing.aliyuncs.com/static/goods/goods_3.png' },
|
||||
{ id: '4', goodsName: '运动健康专业监测智能手表 心率血氧长续航50米防水', price: '899.00', originalPrice: '1199.00', thumbnail: 'https://lilishop-pc.oss-cn-beijing.aliyuncs.com/static/goods/goods_4.png' },
|
||||
{ id: '5', goodsName: '意式半自动家用复古咖啡机 20Bar高压恒温萃取蒸汽奶泡', price: '899.00', originalPrice: '1280.00', thumbnail: 'https://lilishop-pc.oss-cn-beijing.aliyuncs.com/static/goods/goods_6.png' },
|
||||
{ id: '6', goodsName: '奢宠酵母焕活修护精华露 50ml 紧致淡纹抗皱滋养', price: '680.00', originalPrice: '890.00', thumbnail: 'https://lilishop-pc.oss-cn-beijing.aliyuncs.com/static/goods/goods_5.png' }
|
||||
];
|
||||
|
||||
const displayGoods = computed(() => {
|
||||
|
||||
@@ -76,21 +76,21 @@ const props = defineProps({
|
||||
}
|
||||
});
|
||||
|
||||
const defaultThumb = '/static/goods/goods_1.png';
|
||||
const defaultThumb = 'https://lilishop-pc.oss-cn-beijing.aliyuncs.com/static/goods/goods_1.png';
|
||||
|
||||
const defaultMockGoods = [
|
||||
{ id: '1', goodsName: '旗舰 5G 智能手机 12GB+256GB 超光影影像系统', price: '3999.00', originalPrice: '4599.00', thumbnail: '/static/goods/goods_1.png' },
|
||||
{ id: '2', goodsName: '无线头戴式深度主动降噪蓝牙耳机 空间音频Hi-Res', price: '1099.00', originalPrice: '1499.00', thumbnail: '/static/goods/goods_2.png' },
|
||||
{ id: '3', goodsName: '14英寸 全面屏轻薄商务笔记本电脑 酷睿i7 高刷防眩光', price: '5699.00', originalPrice: '6299.00', thumbnail: '/static/goods/goods_3.png' },
|
||||
{ id: '4', goodsName: '运动健康专业监测智能手表 心率血氧长续航50米防水', price: '899.00', originalPrice: '1199.00', thumbnail: '/static/goods/goods_4.png' },
|
||||
{ id: '5', goodsName: '奢宠酵母焕活修护精华露 50ml 紧致淡纹抗皱滋养', price: '680.00', originalPrice: '890.00', thumbnail: '/static/goods/goods_5.png' },
|
||||
{ id: '6', goodsName: '意式半自动家用复古咖啡机 20Bar高压恒温萃取蒸汽奶泡', price: '899.00', originalPrice: '1280.00', thumbnail: '/static/goods/goods_6.png' },
|
||||
{ id: '7', goodsName: '碳板专业竞速轻量缓震跑步鞋 透气防滑男女同款潮鞋', price: '459.00', originalPrice: '699.00', thumbnail: '/static/goods/goods_7.png' },
|
||||
{ id: '8', goodsName: '极简静音无雾负离子香薰加湿器 大容量客厅卧室通用', price: '299.00', originalPrice: '399.00', thumbnail: '/static/goods/goods_8.png' },
|
||||
{ id: '9', goodsName: '折叠屏旗舰手机 典藏陶瓷白 悬停双旋水滴铰链', price: '6999.00', originalPrice: '7999.00', thumbnail: '/static/goods/goods_1.png' },
|
||||
{ id: '10', goodsName: '真无线触控降噪蓝牙耳机 超低延迟游戏降噪', price: '599.00', originalPrice: '799.00', thumbnail: '/static/goods/goods_2.png' },
|
||||
{ id: '11', goodsName: '国AA级减蓝光润眼长臂台灯 智能感光多档色温无极调光', price: '249.00', originalPrice: '359.00', thumbnail: '/static/goods/goods_4.png' },
|
||||
{ id: '12', goodsName: '航空级铝镁合金静音万向轮拉杆登机箱 20英寸防刮耐磨', price: '499.00', originalPrice: '699.00', thumbnail: '/static/goods/goods_7.png' }
|
||||
{ id: '1', goodsName: '旗舰 5G 智能手机 12GB+256GB 超光影影像系统', price: '3999.00', originalPrice: '4599.00', thumbnail: 'https://lilishop-pc.oss-cn-beijing.aliyuncs.com/static/goods/goods_1.png' },
|
||||
{ id: '2', goodsName: '无线头戴式深度主动降噪蓝牙耳机 空间音频Hi-Res', price: '1099.00', originalPrice: '1499.00', thumbnail: 'https://lilishop-pc.oss-cn-beijing.aliyuncs.com/static/goods/goods_2.png' },
|
||||
{ id: '3', goodsName: '14英寸 全面屏轻薄商务笔记本电脑 酷睿i7 高刷防眩光', price: '5699.00', originalPrice: '6299.00', thumbnail: 'https://lilishop-pc.oss-cn-beijing.aliyuncs.com/static/goods/goods_3.png' },
|
||||
{ id: '4', goodsName: '运动健康专业监测智能手表 心率血氧长续航50米防水', price: '899.00', originalPrice: '1199.00', thumbnail: 'https://lilishop-pc.oss-cn-beijing.aliyuncs.com/static/goods/goods_4.png' },
|
||||
{ id: '5', goodsName: '奢宠酵母焕活修护精华露 50ml 紧致淡纹抗皱滋养', price: '680.00', originalPrice: '890.00', thumbnail: 'https://lilishop-pc.oss-cn-beijing.aliyuncs.com/static/goods/goods_5.png' },
|
||||
{ id: '6', goodsName: '意式半自动家用复古咖啡机 20Bar高压恒温萃取蒸汽奶泡', price: '899.00', originalPrice: '1280.00', thumbnail: 'https://lilishop-pc.oss-cn-beijing.aliyuncs.com/static/goods/goods_6.png' },
|
||||
{ id: '7', goodsName: '碳板专业竞速轻量缓震跑步鞋 透气防滑男女同款潮鞋', price: '459.00', originalPrice: '699.00', thumbnail: 'https://lilishop-pc.oss-cn-beijing.aliyuncs.com/static/goods/goods_7.png' },
|
||||
{ id: '8', goodsName: '极简静音无雾负离子香薰加湿器 大容量客厅卧室通用', price: '299.00', originalPrice: '399.00', thumbnail: 'https://lilishop-pc.oss-cn-beijing.aliyuncs.com/static/goods/goods_8.png' },
|
||||
{ id: '9', goodsName: '折叠屏旗舰手机 典藏陶瓷白 悬停双旋水滴铰链', price: '6999.00', originalPrice: '7999.00', thumbnail: 'https://lilishop-pc.oss-cn-beijing.aliyuncs.com/static/goods/goods_1.png' },
|
||||
{ id: '10', goodsName: '真无线触控降噪蓝牙耳机 超低延迟游戏降噪', price: '599.00', originalPrice: '799.00', thumbnail: 'https://lilishop-pc.oss-cn-beijing.aliyuncs.com/static/goods/goods_2.png' },
|
||||
{ id: '11', goodsName: '国AA级减蓝光润眼长臂台灯 智能感光多档色温无极调光', price: '249.00', originalPrice: '359.00', thumbnail: 'https://lilishop-pc.oss-cn-beijing.aliyuncs.com/static/goods/goods_4.png' },
|
||||
{ id: '12', goodsName: '航空级铝镁合金静音万向轮拉杆登机箱 20英寸防刮耐磨', price: '499.00', originalPrice: '699.00', thumbnail: 'https://lilishop-pc.oss-cn-beijing.aliyuncs.com/static/goods/goods_7.png' }
|
||||
];
|
||||
|
||||
const actualColumns = computed(() => {
|
||||
|
||||
@@ -68,7 +68,7 @@ const props = defineProps({
|
||||
}
|
||||
});
|
||||
|
||||
const defaultThumb = '/static/goods/goods_1.png';
|
||||
const defaultThumb = 'https://lilishop-pc.oss-cn-beijing.aliyuncs.com/static/goods/goods_1.png';
|
||||
|
||||
const actualColumns = computed(() => {
|
||||
const ratio = props.componentStyle?.widthRatio || '100%';
|
||||
@@ -81,16 +81,16 @@ const actualColumns = computed(() => {
|
||||
});
|
||||
|
||||
const defaultGridGoods = [
|
||||
{ id: '1', goodsName: '旗舰 5G 智能手机 12GB+256GB 超光影影像系统', price: '3999.00', originalPrice: '4599.00', thumbnail: '/static/goods/goods_1.png' },
|
||||
{ id: '2', goodsName: '无线头戴式深度主动降噪蓝牙耳机 空间音频Hi-Res', price: '1099.00', originalPrice: '1499.00', thumbnail: '/static/goods/goods_2.png' },
|
||||
{ id: '3', goodsName: '14英寸 全面屏轻薄商务笔记本电脑 酷睿i7 高刷防眩光', price: '5699.00', originalPrice: '6299.00', thumbnail: '/static/goods/goods_3.png' },
|
||||
{ id: '4', goodsName: '运动健康专业监测智能手表 心率血氧长续航50米防水', price: '899.00', originalPrice: '1199.00', thumbnail: '/static/goods/goods_4.png' },
|
||||
{ id: '5', goodsName: '奢宠酵母焕活修护精华露 50ml 紧致淡纹抗皱滋养', price: '680.00', originalPrice: '890.00', thumbnail: '/static/goods/goods_5.png' },
|
||||
{ id: '6', goodsName: '意式半自动家用复古咖啡机 20Bar高压恒温萃取蒸汽奶泡', price: '899.00', originalPrice: '1280.00', thumbnail: '/static/goods/goods_6.png' },
|
||||
{ id: '7', goodsName: '碳板专业竞速轻量缓震跑步鞋 透气防滑男女同款潮鞋', price: '459.00', originalPrice: '699.00', thumbnail: '/static/goods/goods_7.png' },
|
||||
{ id: '8', goodsName: '极简静音无雾负离子香薰加湿器 大容量客厅卧室通用', price: '299.00', originalPrice: '399.00', thumbnail: '/static/goods/goods_8.png' },
|
||||
{ id: '9', goodsName: '智能降噪AI翻译蓝牙墨镜 超轻防紫外线偏光太阳镜', price: '599.00', originalPrice: '799.00', thumbnail: '/static/goods/goods_1.png' },
|
||||
{ id: '10', goodsName: '15.6英寸 4K超高清便携式显示器 Type-C一线直连高色域', price: '1299.00', originalPrice: '1699.00', thumbnail: '/static/goods/goods_3.png' }
|
||||
{ id: '1', goodsName: '旗舰 5G 智能手机 12GB+256GB 超光影影像系统', price: '3999.00', originalPrice: '4599.00', thumbnail: 'https://lilishop-pc.oss-cn-beijing.aliyuncs.com/static/goods/goods_1.png' },
|
||||
{ id: '2', goodsName: '无线头戴式深度主动降噪蓝牙耳机 空间音频Hi-Res', price: '1099.00', originalPrice: '1499.00', thumbnail: 'https://lilishop-pc.oss-cn-beijing.aliyuncs.com/static/goods/goods_2.png' },
|
||||
{ id: '3', goodsName: '14英寸 全面屏轻薄商务笔记本电脑 酷睿i7 高刷防眩光', price: '5699.00', originalPrice: '6299.00', thumbnail: 'https://lilishop-pc.oss-cn-beijing.aliyuncs.com/static/goods/goods_3.png' },
|
||||
{ id: '4', goodsName: '运动健康专业监测智能手表 心率血氧长续航50米防水', price: '899.00', originalPrice: '1199.00', thumbnail: 'https://lilishop-pc.oss-cn-beijing.aliyuncs.com/static/goods/goods_4.png' },
|
||||
{ id: '5', goodsName: '奢宠酵母焕活修护精华露 50ml 紧致淡纹抗皱滋养', price: '680.00', originalPrice: '890.00', thumbnail: 'https://lilishop-pc.oss-cn-beijing.aliyuncs.com/static/goods/goods_5.png' },
|
||||
{ id: '6', goodsName: '意式半自动家用复古咖啡机 20Bar高压恒温萃取蒸汽奶泡', price: '899.00', originalPrice: '1280.00', thumbnail: 'https://lilishop-pc.oss-cn-beijing.aliyuncs.com/static/goods/goods_6.png' },
|
||||
{ id: '7', goodsName: '碳板专业竞速轻量缓震跑步鞋 透气防滑男女同款潮鞋', price: '459.00', originalPrice: '699.00', thumbnail: 'https://lilishop-pc.oss-cn-beijing.aliyuncs.com/static/goods/goods_7.png' },
|
||||
{ id: '8', goodsName: '极简静音无雾负离子香薰加湿器 大容量客厅卧室通用', price: '299.00', originalPrice: '399.00', thumbnail: 'https://lilishop-pc.oss-cn-beijing.aliyuncs.com/static/goods/goods_8.png' },
|
||||
{ id: '9', goodsName: '智能降噪AI翻译蓝牙墨镜 超轻防紫外线偏光太阳镜', price: '599.00', originalPrice: '799.00', thumbnail: 'https://lilishop-pc.oss-cn-beijing.aliyuncs.com/static/goods/goods_1.png' },
|
||||
{ id: '10', goodsName: '15.6英寸 4K超高清便携式显示器 Type-C一线直连高色域', price: '1299.00', originalPrice: '1699.00', thumbnail: 'https://lilishop-pc.oss-cn-beijing.aliyuncs.com/static/goods/goods_3.png' }
|
||||
];
|
||||
|
||||
const displayGoods = computed(() => {
|
||||
|
||||
@@ -104,7 +104,7 @@ const props = defineProps({
|
||||
}
|
||||
});
|
||||
|
||||
const defaultThumb = '/static/goods/goods_1.png';
|
||||
const defaultThumb = 'https://lilishop-pc.oss-cn-beijing.aliyuncs.com/static/goods/goods_1.png';
|
||||
const activeTagIdx = ref(0);
|
||||
|
||||
const subCategories = computed(() => {
|
||||
@@ -122,7 +122,7 @@ const posterTags = computed(() => {
|
||||
});
|
||||
|
||||
const posterImg = computed(() => {
|
||||
return props.options?.posterImg || '/static/banner-floor/floor_banner_1.png';
|
||||
return props.options?.posterImg || 'https://lilishop-pc.oss-cn-beijing.aliyuncs.com/static/banner-floor/floor_banner_1.png';
|
||||
});
|
||||
|
||||
const showPoster = computed(() => {
|
||||
@@ -145,14 +145,14 @@ const rightColumns = computed(() => {
|
||||
});
|
||||
|
||||
const defaultFloorGoods = [
|
||||
{ id: '101', goodsName: '旗舰 5G 智能手机 12GB+256GB 超光影影像系统', price: '3999.00', originalPrice: '4599.00', thumbnail: '/static/goods/goods_1.png' },
|
||||
{ id: '102', goodsName: '无线头戴式深度主动降噪蓝牙耳机 空间音频Hi-Res', price: '1099.00', originalPrice: '1499.00', thumbnail: '/static/goods/goods_2.png' },
|
||||
{ id: '103', goodsName: '14英寸 全面屏轻薄商务笔记本电脑 酷睿i7 高刷防眩光', price: '5699.00', originalPrice: '6299.00', thumbnail: '/static/goods/goods_3.png' },
|
||||
{ id: '104', goodsName: '运动健康专业监测智能手表 心率血氧长续航50米防水', price: '899.00', originalPrice: '1199.00', thumbnail: '/static/goods/goods_4.png' },
|
||||
{ id: '105', goodsName: '奢宠酵母焕活修护精华露 50ml 紧致淡纹抗皱滋养', price: '680.00', originalPrice: '890.00', thumbnail: '/static/goods/goods_5.png' },
|
||||
{ id: '106', goodsName: '意式半自动家用复古咖啡机 20Bar高压恒温萃取蒸汽奶泡', price: '899.00', originalPrice: '1280.00', thumbnail: '/static/goods/goods_6.png' },
|
||||
{ id: '107', goodsName: '碳板专业竞速轻量缓震跑步鞋 透气防滑男女同款潮鞋', price: '459.00', originalPrice: '699.00', thumbnail: '/static/goods/goods_7.png' },
|
||||
{ id: '108', goodsName: '极简静音无雾负离子香薰加湿器 大容量客厅卧室通用', price: '299.00', originalPrice: '399.00', thumbnail: '/static/goods/goods_8.png' }
|
||||
{ id: '101', goodsName: '旗舰 5G 智能手机 12GB+256GB 超光影影像系统', price: '3999.00', originalPrice: '4599.00', thumbnail: 'https://lilishop-pc.oss-cn-beijing.aliyuncs.com/static/goods/goods_1.png' },
|
||||
{ id: '102', goodsName: '无线头戴式深度主动降噪蓝牙耳机 空间音频Hi-Res', price: '1099.00', originalPrice: '1499.00', thumbnail: 'https://lilishop-pc.oss-cn-beijing.aliyuncs.com/static/goods/goods_2.png' },
|
||||
{ id: '103', goodsName: '14英寸 全面屏轻薄商务笔记本电脑 酷睿i7 高刷防眩光', price: '5699.00', originalPrice: '6299.00', thumbnail: 'https://lilishop-pc.oss-cn-beijing.aliyuncs.com/static/goods/goods_3.png' },
|
||||
{ id: '104', goodsName: '运动健康专业监测智能手表 心率血氧长续航50米防水', price: '899.00', originalPrice: '1199.00', thumbnail: 'https://lilishop-pc.oss-cn-beijing.aliyuncs.com/static/goods/goods_4.png' },
|
||||
{ id: '105', goodsName: '奢宠酵母焕活修护精华露 50ml 紧致淡纹抗皱滋养', price: '680.00', originalPrice: '890.00', thumbnail: 'https://lilishop-pc.oss-cn-beijing.aliyuncs.com/static/goods/goods_5.png' },
|
||||
{ id: '106', goodsName: '意式半自动家用复古咖啡机 20Bar高压恒温萃取蒸汽奶泡', price: '899.00', originalPrice: '1280.00', thumbnail: 'https://lilishop-pc.oss-cn-beijing.aliyuncs.com/static/goods/goods_6.png' },
|
||||
{ id: '107', goodsName: '碳板专业竞速轻量缓震跑步鞋 透气防滑男女同款潮鞋', price: '459.00', originalPrice: '699.00', thumbnail: 'https://lilishop-pc.oss-cn-beijing.aliyuncs.com/static/goods/goods_7.png' },
|
||||
{ id: '108', goodsName: '极简静音无雾负离子香薰加湿器 大容量客厅卧室通用', price: '299.00', originalPrice: '399.00', thumbnail: 'https://lilishop-pc.oss-cn-beijing.aliyuncs.com/static/goods/goods_8.png' }
|
||||
];
|
||||
|
||||
const displayGoods = computed(() => {
|
||||
|
||||
@@ -43,7 +43,7 @@ const defaultZones = [
|
||||
];
|
||||
|
||||
const displayImageUrl = computed(() => {
|
||||
return props.options?.imageUrl || '/static/hot-zone/hotzone_default.png';
|
||||
return props.options?.imageUrl || 'https://lilishop-pc.oss-cn-beijing.aliyuncs.com/static/hot-zone/hotzone_default.png';
|
||||
});
|
||||
|
||||
const displayZones = computed(() => {
|
||||
|
||||
@@ -33,9 +33,9 @@ const props = defineProps({
|
||||
});
|
||||
|
||||
const defaultCards = [
|
||||
{ title: '限时秒杀', subtitle: '抢券立减50元 · 爆款直降', bgImg: '/static/promo-group/promo_1.png', url: '/goodsList?seckill=1' },
|
||||
{ title: '品牌特惠', subtitle: '大牌买一送一 · 领百元神券', bgImg: '/static/promo-group/promo_2.png', url: '/goodsList?brand=1' },
|
||||
{ title: '新品首发', subtitle: '首单专享特惠 · 1元起尝鲜', bgImg: '/static/promo-group/promo_3.png', url: '/goodsList?new=1' }
|
||||
{ title: '限时秒杀', subtitle: '抢券立减50元 · 爆款直降', bgImg: 'https://lilishop-pc.oss-cn-beijing.aliyuncs.com/static/promo-group/promo_1.png', url: '/goodsList?seckill=1' },
|
||||
{ title: '品牌特惠', subtitle: '大牌买一送一 · 领百元神券', bgImg: 'https://lilishop-pc.oss-cn-beijing.aliyuncs.com/static/promo-group/promo_2.png', url: '/goodsList?brand=1' },
|
||||
{ title: '新品首发', subtitle: '首单专享特惠 · 1元起尝鲜', bgImg: 'https://lilishop-pc.oss-cn-beijing.aliyuncs.com/static/promo-group/promo_3.png', url: '/goodsList?new=1' }
|
||||
];
|
||||
|
||||
const cardsList = computed(() => {
|
||||
|
||||
@@ -130,18 +130,18 @@ const props = defineProps({
|
||||
}
|
||||
});
|
||||
|
||||
const defaultThumb = '/static/goods/goods_1.png';
|
||||
const defaultThumb = 'https://lilishop-pc.oss-cn-beijing.aliyuncs.com/static/goods/goods_1.png';
|
||||
|
||||
const defaultPool = [
|
||||
{ id: '1', goodsName: '旗舰 5G 智能手机 12GB+256GB 超光影影像系统', price: '3999.00', originalPrice: '4599.00', thumbnail: '/static/goods/goods_1.png' },
|
||||
{ id: '2', goodsName: '无线头戴式深度主动降噪蓝牙耳机 空间音频Hi-Res', price: '1099.00', originalPrice: '1499.00', thumbnail: '/static/goods/goods_2.png' },
|
||||
{ id: '3', goodsName: '14英寸 全面屏轻薄商务笔记本电脑 酷睿i7 高刷防眩光', price: '5699.00', originalPrice: '6299.00', thumbnail: '/static/goods/goods_3.png' },
|
||||
{ id: '4', goodsName: '运动健康专业监测智能手表 心率血氧长续航50米防水', price: '899.00', originalPrice: '1199.00', thumbnail: '/static/goods/goods_4.png' },
|
||||
{ id: '5', goodsName: '奢宠酵母焕活修护精华露 50ml 紧致淡纹抗皱滋养', price: '680.00', originalPrice: '890.00', thumbnail: '/static/goods/goods_5.png' },
|
||||
{ id: '6', goodsName: '意式半自动家用复古咖啡机 20Bar高压恒温萃取蒸汽奶泡', price: '899.00', originalPrice: '1280.00', thumbnail: '/static/goods/goods_6.png' },
|
||||
{ id: '7', goodsName: '碳板专业竞速轻量缓震跑步鞋 透气防滑男女同款潮鞋', price: '459.00', originalPrice: '699.00', thumbnail: '/static/goods/goods_7.png' },
|
||||
{ id: '8', goodsName: '极简静音无雾负离子香薰加湿器 大容量客厅卧室通用', price: '299.00', originalPrice: '399.00', thumbnail: '/static/goods/goods_8.png' },
|
||||
{ id: '9', goodsName: '智能降噪AI翻译蓝牙墨镜 超轻防紫外线偏光太阳镜', price: '599.00', originalPrice: '799.00', thumbnail: '/static/goods/goods_1.png' }
|
||||
{ id: '1', goodsName: '旗舰 5G 智能手机 12GB+256GB 超光影影像系统', price: '3999.00', originalPrice: '4599.00', thumbnail: 'https://lilishop-pc.oss-cn-beijing.aliyuncs.com/static/goods/goods_1.png' },
|
||||
{ id: '2', goodsName: '无线头戴式深度主动降噪蓝牙耳机 空间音频Hi-Res', price: '1099.00', originalPrice: '1499.00', thumbnail: 'https://lilishop-pc.oss-cn-beijing.aliyuncs.com/static/goods/goods_2.png' },
|
||||
{ id: '3', goodsName: '14英寸 全面屏轻薄商务笔记本电脑 酷睿i7 高刷防眩光', price: '5699.00', originalPrice: '6299.00', thumbnail: 'https://lilishop-pc.oss-cn-beijing.aliyuncs.com/static/goods/goods_3.png' },
|
||||
{ id: '4', goodsName: '运动健康专业监测智能手表 心率血氧长续航50米防水', price: '899.00', originalPrice: '1199.00', thumbnail: 'https://lilishop-pc.oss-cn-beijing.aliyuncs.com/static/goods/goods_4.png' },
|
||||
{ id: '5', goodsName: '奢宠酵母焕活修护精华露 50ml 紧致淡纹抗皱滋养', price: '680.00', originalPrice: '890.00', thumbnail: 'https://lilishop-pc.oss-cn-beijing.aliyuncs.com/static/goods/goods_5.png' },
|
||||
{ id: '6', goodsName: '意式半自动家用复古咖啡机 20Bar高压恒温萃取蒸汽奶泡', price: '899.00', originalPrice: '1280.00', thumbnail: 'https://lilishop-pc.oss-cn-beijing.aliyuncs.com/static/goods/goods_6.png' },
|
||||
{ id: '7', goodsName: '碳板专业竞速轻量缓震跑步鞋 透气防滑男女同款潮鞋', price: '459.00', originalPrice: '699.00', thumbnail: 'https://lilishop-pc.oss-cn-beijing.aliyuncs.com/static/goods/goods_7.png' },
|
||||
{ id: '8', goodsName: '极简静音无雾负离子香薰加湿器 大容量客厅卧室通用', price: '299.00', originalPrice: '399.00', thumbnail: 'https://lilishop-pc.oss-cn-beijing.aliyuncs.com/static/goods/goods_8.png' },
|
||||
{ id: '9', goodsName: '智能降噪AI翻译蓝牙墨镜 超轻防紫外线偏光太阳镜', price: '599.00', originalPrice: '799.00', thumbnail: 'https://lilishop-pc.oss-cn-beijing.aliyuncs.com/static/goods/goods_1.png' }
|
||||
];
|
||||
|
||||
const displayGoods = computed(() => {
|
||||
|
||||
@@ -1,17 +1,25 @@
|
||||
<template>
|
||||
<div class="tpl-search-header" :style="customStyle">
|
||||
<div class="header-inner">
|
||||
<!-- 1. 商城 Logo 区域 -->
|
||||
<div class="logo-area">
|
||||
<img v-if="options.logoUrl" :src="options.logoUrl" alt="logo" class="logo-img" />
|
||||
<img
|
||||
v-if="options.logoUrl"
|
||||
:src="options.logoUrl"
|
||||
:alt="options.logoAlt || 'logo'"
|
||||
class="logo-img"
|
||||
/>
|
||||
<span v-else class="text-logo">LiliShop</span>
|
||||
</div>
|
||||
|
||||
<!-- 2. 搜索核心区(紧凑居中,含搜索框和热门推荐词) -->
|
||||
<div class="search-main">
|
||||
<!-- 搜索输入框与按钮 -->
|
||||
<div class="search-box">
|
||||
<input
|
||||
type="text"
|
||||
class="mock-input"
|
||||
:placeholder="options.placeholder || '搜索品牌或商品'"
|
||||
:placeholder="placeholderText"
|
||||
readonly
|
||||
/>
|
||||
<button type="button" class="search-btn">
|
||||
@@ -19,20 +27,28 @@
|
||||
<span>搜索</span>
|
||||
</button>
|
||||
</div>
|
||||
<div class="hot-words" v-if="options.showHotWords !== false && options.hotWords?.length">
|
||||
<span v-for="(w, idx) in options.hotWords" :key="idx" class="hot-w">{{ w }}</span>
|
||||
|
||||
<!-- 热门推荐词 -->
|
||||
<div class="hot-words" v-if="options.showHotWords !== false && hotWordsList.length">
|
||||
<span
|
||||
v-for="(w, idx) in hotWordsList"
|
||||
:key="idx"
|
||||
class="hot-w"
|
||||
>
|
||||
{{ w }}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 3. 购物车入口(紧凑跟随在搜索框右侧,带数量徽标) -->
|
||||
<div
|
||||
class="cart-btn"
|
||||
v-if="options.showCart !== false"
|
||||
:style="cartBtnStyle"
|
||||
>
|
||||
<el-icon class="cart-icon" :style="{ color: options.cartBadgeColor || '#e11d48' }">
|
||||
<ShoppingCart />
|
||||
</el-icon>
|
||||
<span>{{ options.cartText || '我的购物车' }}</span>
|
||||
<el-icon class="cart-icon"><ShoppingCart /></el-icon>
|
||||
<span class="cart-text">{{ options.cartText || '购物车' }}</span>
|
||||
<span class="cart-count">0</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -53,6 +69,17 @@ const props = defineProps({
|
||||
}
|
||||
});
|
||||
|
||||
const placeholderText = computed(() => {
|
||||
return props.options?.placeholder || '请输入商品名称、品牌或型号';
|
||||
});
|
||||
|
||||
const hotWordsList = computed(() => {
|
||||
if (Array.isArray(props.options?.hotWords) && props.options.hotWords.length) {
|
||||
return props.options.hotWords;
|
||||
}
|
||||
return ['iPhone 16 Pro', '小棕瓶', '戴森吹风机', '华为Mate 70', '五粮液', '跑鞋'];
|
||||
});
|
||||
|
||||
const customStyle = computed(() => {
|
||||
const s = props.componentStyle || {};
|
||||
return {
|
||||
@@ -76,81 +103,149 @@ const cartBtnStyle = computed(() => {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background: #ffffff;
|
||||
user-select: none;
|
||||
|
||||
.header-inner {
|
||||
width: 100%;
|
||||
padding: 16px 20px;
|
||||
width: 1200px;
|
||||
max-width: 100%;
|
||||
padding: 18px 20px 14px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 30px;
|
||||
align-items: flex-start;
|
||||
justify-content: center; /* 紧凑聚拢居中,Logo、搜索框、购物车不向大屏两端散落 */
|
||||
gap: 42px; /* Logo、搜索框、购物车三者紧凑贴近 */
|
||||
|
||||
.logo-area {
|
||||
height: 40px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-shrink: 0;
|
||||
cursor: pointer;
|
||||
|
||||
.logo-img {
|
||||
max-height: 48px;
|
||||
max-height: 40px;
|
||||
max-width: 200px;
|
||||
object-fit: contain;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.text-logo {
|
||||
font-size: 24px;
|
||||
font-size: 26px;
|
||||
font-weight: 800;
|
||||
color: #e11d48;
|
||||
color: #409EFF;
|
||||
letter-spacing: -0.5px;
|
||||
line-height: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.search-main {
|
||||
flex: 1;
|
||||
max-width: 550px;
|
||||
width: 560px;
|
||||
flex-shrink: 0;
|
||||
|
||||
.search-box {
|
||||
display: flex;
|
||||
border: 2px solid #e11d48;
|
||||
border: 2px solid #409EFF;
|
||||
border-radius: 4px;
|
||||
overflow: hidden;
|
||||
height: 40px;
|
||||
box-sizing: border-box;
|
||||
|
||||
.mock-input {
|
||||
flex: 1;
|
||||
border: none;
|
||||
padding: 8px 12px;
|
||||
padding: 0 14px;
|
||||
font-size: 13px;
|
||||
color: #334155;
|
||||
outline: none;
|
||||
background: #ffffff;
|
||||
|
||||
&::placeholder {
|
||||
color: #94a3b8;
|
||||
}
|
||||
}
|
||||
|
||||
.search-btn {
|
||||
background: #e11d48;
|
||||
background: #409EFF;
|
||||
color: #ffffff;
|
||||
border: none;
|
||||
padding: 0 20px;
|
||||
padding: 0 24px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
cursor: pointer;
|
||||
transition: background 0.15s;
|
||||
|
||||
&:hover {
|
||||
background: #66b1ff;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.hot-words {
|
||||
margin-top: 6px;
|
||||
margin-top: 8px;
|
||||
display: flex;
|
||||
gap: 10px;
|
||||
font-size: 11px;
|
||||
color: #94a3b8;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
font-size: 12px;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
|
||||
.hot-w {
|
||||
color: #94a3b8;
|
||||
cursor: pointer;
|
||||
transition: color 0.15s;
|
||||
|
||||
&:hover {
|
||||
color: #409EFF;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.cart-btn {
|
||||
height: 40px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
padding: 8px 16px;
|
||||
gap: 8px;
|
||||
padding: 0 16px;
|
||||
border: 1px solid #e2e8f0;
|
||||
border-radius: 4px;
|
||||
font-size: 13px;
|
||||
color: #334155;
|
||||
background: #f8fafc;
|
||||
background: #ffffff;
|
||||
cursor: pointer;
|
||||
flex-shrink: 0;
|
||||
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.02);
|
||||
transition: all 0.15s ease;
|
||||
box-sizing: border-box;
|
||||
|
||||
.cart-icon {
|
||||
color: #e11d48;
|
||||
font-size: 16px;
|
||||
color: #409EFF;
|
||||
}
|
||||
|
||||
.cart-text {
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.cart-count {
|
||||
background: #409EFF;
|
||||
color: #ffffff;
|
||||
font-size: 11px;
|
||||
font-weight: 700;
|
||||
padding: 0 6px;
|
||||
height: 18px;
|
||||
line-height: 18px;
|
||||
border-radius: 9px;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
border-color: #409EFF;
|
||||
color: #409EFF;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -176,7 +176,7 @@ const customStyle = computed(() => {
|
||||
align-self: flex-start;
|
||||
padding: 1px 6px;
|
||||
background: #fff2e8;
|
||||
color: #ff6000;
|
||||
color: #409EFF;
|
||||
font-size: 10px;
|
||||
font-weight: 700;
|
||||
border-radius: 8px;
|
||||
@@ -223,19 +223,19 @@ const customStyle = computed(() => {
|
||||
transition: all 0.15s ease;
|
||||
|
||||
&.login-btn {
|
||||
background: #ff6000;
|
||||
background: #409EFF;
|
||||
color: #ffffff;
|
||||
box-shadow: 0 2px 6px rgba(255, 96, 0, 0.25);
|
||||
|
||||
&:hover {
|
||||
background: #e55600;
|
||||
background: #66b1ff;
|
||||
}
|
||||
}
|
||||
|
||||
&.register-btn {
|
||||
background: #ffffff;
|
||||
color: #ff6000;
|
||||
border: 1px solid #ff6000;
|
||||
color: #409EFF;
|
||||
border: 1px solid #409EFF;
|
||||
|
||||
&:hover {
|
||||
background: #fff7ed;
|
||||
@@ -273,7 +273,7 @@ const customStyle = computed(() => {
|
||||
|
||||
&:hover {
|
||||
.metric-val, .metric-label {
|
||||
color: #ff6000;
|
||||
color: #409EFF;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -326,7 +326,7 @@ const customStyle = computed(() => {
|
||||
cursor: pointer;
|
||||
|
||||
&:hover {
|
||||
color: #ff6000;
|
||||
color: #409EFF;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -347,7 +347,7 @@ const customStyle = computed(() => {
|
||||
transition: color 0.15s;
|
||||
|
||||
.dot {
|
||||
color: #ff6000;
|
||||
color: #409EFF;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
@@ -358,7 +358,7 @@ const customStyle = computed(() => {
|
||||
}
|
||||
|
||||
&:hover {
|
||||
color: #ff6000;
|
||||
color: #409EFF;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -391,7 +391,7 @@ const customStyle = computed(() => {
|
||||
}
|
||||
|
||||
&:hover {
|
||||
color: #ff6000;
|
||||
color: #409EFF;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
<template>
|
||||
<div class="tpl-video" :style="customStyle">
|
||||
<div class="video-preview-box">
|
||||
<img :src="options.coverUrl || '/static/video/video_cover.png'" alt="cover" class="cover-img" />
|
||||
<img :src="options.coverUrl || 'https://lilishop-pc.oss-cn-beijing.aliyuncs.com/static/video/video_cover.png'" alt="cover" class="cover-img" />
|
||||
<div class="play-btn">▶</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||