sileya-ai
/
vr-uniapp
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

修改字段显示

v1.0.0
于肖磊 2024-08-23 16:13:41 +08:00
parent deda29e5d6
commit dee26c15e2
16 changed files with 200 additions and 172 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

26
src/components/common/drag-group/index.vue
View File

@ -2,7 +2,7 @@
<drag :data="drag_list" :space-col="20" :is-show-edit="true" @remove="remove" @on-sort="on_sort" @edit="edit">
<template #default="{ row, index }">
<upload v-model="row.new_url" :limit="1" size="40" styles="2"></upload>
<el-image :src="row.link[imgParams]" fit="contain" class="img">
<el-image :src="row.data[imgParams]" fit="contain" class="img">
<template #error>
<div class="bg-f5 flex-row jc-c align-c radius h w">
<icon name="error-img" size="16" color="9"></icon>
@ -13,13 +13,15 @@
<el-input v-model="row.new_title" placeholder="请输入链接" type="textarea" class="flex-1 do-not-trigger" :rows="2"></el-input>
</template>
<template v-else>
<div class="flex-1 flex-width text-line-2 size-12 self-s do-not-trigger" @dblclick="double_click(index)">{{ row.new_title }}</div>
<div class="flex-1 flex-width text-line-2 size-12 self-s do-not-trigger" @dblclick="double_click(index)">{{ !isEmpty(row.new_title) ? row.new_title : row.data.title }}</div>
</template>
</template>
</drag>
</template>
<script lang="ts" setup>
import { isEmpty } from 'lodash';
interface Props {
list: any[];
imgParams: string;
@ -47,12 +49,14 @@ const edit_index = ref(-1);
// 判断点击的是否是可以点击的区域，其他区域隐藏掉编辑属性
const outerClick = (e: any) => {
if (!e.target.className.includes('do-not-trigger') && !e.target.parentNode.className.includes('do-not-trigger')) {
edit_close_processing(edit_index.value);
edit_index.value = -1;
}
};
const emits = defineEmits(['remove', 'onsort']);
const remove = (index: number) => {
if (edit_index.value === index) {
edit_close_processing(index);
edit_index.value = -1;
}
emits('remove', index);
@ -62,14 +66,32 @@ const on_sort = (item: any) => {
}
const edit = (index: number) => {
if (edit_index.value === index) {
edit_close_processing(index);
edit_index.value = -1;
} else {
edit_index.value = index;
edit_processing(index);
}
}
const double_click = (index: number) => {
edit_index.value = index;
edit_processing(index);
}
// new_tile === title new_tile清空，使用title字段，如果不一致，先办判断new_title !=='', 取new_title否则取title
// 编辑时的数据处理
const edit_processing = (index: number) => {
const list = drag_list.value[index];
if (!isEmpty(list) && isEmpty(list.new_title)) {
list.new_title = list.data.title;
}
}
//编辑关闭前的处理
const edit_close_processing = (index: number) => {
const list = drag_list.value[index];
if (!isEmpty(list) && !isEmpty(list.new_title) && list.new_title === list.data.title) {
list.new_title = '';
}
}
</script>
<style lang="scss" scoped>

10
src/components/common/magic-cube/index.vue
View File

@ -35,8 +35,8 @@
import { isEmpty } from 'lodash';
interface content {
data_type: string;
product_list: Array<string>;
img_list: Array<string>;
goods_list: Array<string>;
images_list: Array<string>;
}
interface CubeItem {
start: {
@ -217,10 +217,10 @@ const selected_click = (index: number) => {
const data_title = (item: CubeItem) => {
let title = `共有`;
if (item.data_content) {
if (item.data_content.data_type == 'commodity') {
title += `${ item.data_content.product_list.length }个商品`;
if (item.data_content.data_type == 'goods') {
title += `${ item.data_content.goods_list.length }个商品`;
} else {
title += `${ item.data_content.img_list.length }个图片`;
title += `${ item.data_content.images_list.length }个图片`;
}
}
return title;

20
src/components/common/product-show-config/index.vue
View File

@ -19,10 +19,10 @@
<div class="flex-row align-c jc-s gap-20 shopping_button_all">
<div v-for="item in base_list.shopping_button_list" :key="item.value" :class="['pa-10 re', { 'br-c br-primary radius-sm': shop_type(item) }]" @click="shopping_button_click(item)">
<template v-if="item.value == '0'">
<div :class="['pl-13 pr-13 round size-12 bg-primary cr-f shopping_button', {'disabled': ['3','4','5'].includes(form.product_style) }]">{{ item.name }}</div>
<div :class="['pl-13 pr-13 round size-12 bg-primary cr-f shopping_button', {'disabled': ['3','4','5'].includes(form.theme) }]">{{ item.name }}</div>
</template>
<template v-else-if="item.value == '1'">
<div :class="['pl-13 pr-13 round size-12 bg-primary cr-f shopping_button', {'disabled': ['3','4','5'].includes(form.product_style) }]">{{ item.name }}</div>
<div :class="['pl-13 pr-13 round size-12 bg-primary cr-f shopping_button', {'disabled': ['3','4','5'].includes(form.theme) }]">{{ item.name }}</div>
</template>
<template v-else-if="item.value == '2'">
<icon class="shopping_button round pl-6 pr-6 bg-primary " name="add" color="f" size="16"></icon>
@ -65,14 +65,14 @@ const { form } = toRefs(state);
const base_list = {
list_show_list: [
{ name: '商品名称', value: '0' },
{ name: '商品标签', value: '1' },
{ name: '商品售价', value: '2' },
{ name: '商品销量', value: '3' },
{ name: '商品名称', value: 'title' },
{ name: '商品标签', value: 'plugins_view_icon' },
{ name: '商品售价', value: 'price' },
{ name: '商品销量', value: 'sales_count' },
// { name: '商品评分', value: '4' },
{ name: '商品原价', value: '5' },
{ name: '售价单位', value: '6' },
{ name: '原价单位', value: '7' },
{ name: '商品原价', value: 'original_price' },
{ name: '售价单位', value: 'price_unit' },
{ name: '原价单位', value: 'original_price_unit' },
],
shopping_button_list: [
{ name: '购买', value: '0' },
@ -98,7 +98,7 @@ const shop_type = computed(() => {
});
const shopping_button_click = (item: { value: string; }) => {
if (['3','4','5'].includes(form.value.product_style) && ['0', '1'].includes(item.value)) {
if (['3','4','5'].includes(form.value.theme) && ['0', '1'].includes(item.value)) {
return;
} else {
form.value.shop_type = item.value;

24
src/components/model-data-magic/components/product-list-show.vue
View File

@ -10,10 +10,10 @@
<image-empty v-model="item.images" class="img" :style="contentImgRadius"></image-empty>
</template>
<div v-if="!isEmpty(isShow)" class="flex-col w h tl gap-10">
<div v-if="isShow.includes('0')" class="text-line-2 size-14">{{ item.title }}</div>
<div v-if="isShow.includes('1')" class="identifying">
<div v-if="isShow.includes('title')" class="text-line-2 size-14">{{ item.title }}</div>
<div v-if="isShow.includes('price')" class="identifying">
<span class="num">{{ item.show_price_symbol }}</span>{{ item.min_price }}
<template v-if="isShow.includes('2')">
<template v-if="isShow.includes('price_unit')">
<span class="num">{{ item.show_price_unit }}</span>
</template>
</div>
@ -29,14 +29,14 @@
<template v-else>
<image-empty v-model="item.images" class="img" :style="contentImgRadius"></image-empty>
</template>
<div v-if="isShow.includes('1')" class="price-suspension text-line-1">
<div v-if="isShow.includes('price')" class="price-suspension text-line-1">
{{ item.show_price_symbol }}{{ item.min_price }}
<template v-if="isShow.includes('2')">
<template v-if="isShow.includes('price_unit')">
{{ item.show_price_unit }}
</template>
</div>
</div>
<div v-if="isShow.includes('0')" class="text-line-1 size-14 tl w" style="overflow: inherit;">{{ item.title }}</div>
<div v-if="isShow.includes('title')" class="text-line-1 size-14 tl w" style="overflow: inherit;">{{ item.title }}</div>
</div>
</template>
<template v-else>
@ -48,10 +48,10 @@
<image-empty v-model="item.images" class="img" :style="contentImgRadius"></image-empty>
</template>
<div v-if="!isEmpty(isShow)" class="flex-col w tl gap-10" :style="`${ padding_computer(props.chunkPadding) }`">
<div v-if="isShow.includes('0')" class="text-line-2 size-14">{{ item.title }}</div>
<div v-if="isShow.includes('1')" class="identifying">
<div v-if="isShow.includes('title')" class="text-line-2 size-14">{{ item.title }}</div>
<div v-if="isShow.includes('price')" class="identifying">
<span class="num">{{ item.show_price_symbol }}</span>{{ item.min_price }}
<template v-if="isShow.includes('2')">
<template v-if="isShow.includes('price_unit')">
<span class="num">{{ item.show_price_unit }}</span>
</template>
</div>
@ -71,10 +71,10 @@
<image-empty v-model="item.images" class="img" :style="contentImgRadius"></image-empty>
</template>
<div v-if="!isEmpty(isShow)" class="flex-col w h tl gap-20">
<div v-if="isShow.includes('0')" class="text-line-2 size-14">{{ item.title }}</div>
<div v-if="isShow.includes('1')" class="identifying">
<div v-if="isShow.includes('title')" class="text-line-2 size-14">{{ item.title }}</div>
<div v-if="isShow.includes('price')" class="identifying">
<span class="num">{{ item.show_price_symbol }}</span>{{ item.min_price }}
<template v-if="isShow.includes('2')">
<template v-if="isShow.includes('price_unit')">
<span class="num">{{ item.show_price_unit }}</span>
</template>
</div>

36
src/components/model-data-magic/components/tabs-content.vue
View File

@ -2,11 +2,11 @@
<card-container class="mb-8">
<el-form-item label="数据类型">
<el-radio-group v-model="form.data_type" class="ml-4">
<el-radio value="commodity">商品</el-radio>
<el-radio value="img">图片</el-radio>
<el-radio value="goods">商品</el-radio>
<el-radio value="images">图片</el-radio>
</el-radio-group>
</el-form-item>
<template v-if="form.data_type === 'commodity' && isShowTitle">
<template v-if="form.data_type === 'goods' && isShowTitle">
<el-form-item label="主标题">
<el-input v-model="form.heading_title" placeholder="请输入主标题"></el-input>
</el-form-item>
@ -15,10 +15,10 @@
</el-form-item>
</template>
</card-container>
<card-container v-if="form.data_type == 'img'" class="mb-8">
<card-container v-if="form.data_type == 'images'" class="mb-8">
<div class="mb-12">图片设置</div>
<div class="flex-col gap-20">
<div v-for="(item, index) in form.img_list" :key="index" class="card-background box-shadow-sm re">
<div v-for="(item, index) in form.images_list" :key="index" class="card-background box-shadow-sm re">
<div class="flex-col align-c jc-c gap-20 w">
<div class="upload_style">
<upload v-model="item.carousel_img" :limit="1" size="100%"></upload>
@ -34,8 +34,8 @@
</card-container>
<card-container v-else class="mb-8">
<div class="mb-12">商品设置</div>
<drag-group :list="form.product_list" img-params="images" @onsort="product_list_sort" @remove="product_list_remove"></drag-group>
<el-button class="mtb-20 w" @click="product_list_add">+添加</el-button>
<drag-group :list="form.goods_list" img-params="images" @onsort="goods_list_sort" @remove="goods_list_remove"></drag-group>
<el-button class="mtb-20 w" @click="goods_list_add">+添加</el-button>
<el-form-item label="展示信息" label-width="60">
<el-checkbox-group v-model="form.is_show">
<el-checkbox v-for="item in list_show_list" :key="item.value" :value="item.value">{{ item.name }}</el-checkbox>
@ -59,32 +59,32 @@ const props = defineProps({
}
});
const list_show_list = [{ name: '商品名称', value: '0' }, { name: '商品售价', value: '1' }, { name: '售价单位', value: '2' }]
const list_show_list = [{ name: '商品名称', value: 'title' }, { name: '商品售价', value: 'price' }, { name: '售价单位', value: 'price_unit' }];
const form = ref(props.value);
const img_add = () => {
form.value.img_list.push({
form.value.images_list.push({
carousel_img: [],
carousel_link: {},
});
}
const img_remove = (index: number) => {
form.value.img_list.splice(index, 1);
form.value.images_list.splice(index, 1);
}
const product_list_remove = (index: number) => {
form.value.product_list.splice(index, 1);
const goods_list_remove = (index: number) => {
form.value.goods_list.splice(index, 1);
};
// 拖拽更新之后，更新数据
const product_list_sort = (new_list: any) => {
form.value.product_list = cloneDeep(new_list);
const goods_list_sort = (new_list: any) => {
form.value.goods_list = cloneDeep(new_list);
}
watchEffect(() => {
form.value = props.value;
});
const product_list_add = () => {
const goods_list_add = () => {
url_value_dialog_visible.value = true;
};
// 打开弹出框
@ -92,11 +92,11 @@ const url_value_dialog_visible = ref(false);
// 弹出框选择的内容
const url_value_dialog_call_back = (item: any[]) => {
item.forEach((item: any) => {
form.value.product_list.push({
form.value.goods_list.push({
id: get_math(),
new_url: [],
new_title: item.title,
link: item,
new_title: '',
data: item,
});
});
};

2
src/components/model-data-magic/components/tabs-styles.vue
View File

@ -33,7 +33,7 @@
<el-form-item label="间隔时间">
<slider v-model="form.interval_time" :max="100"></slider>
</el-form-item>
<template v-if="tabs_content.data_type === 'commodity'">
<template v-if="tabs_content.data_type === 'goods'">
<template v-if="isShowTitle">
<el-form-item label="主标题">
<div class="flex-col gap-10 w">

30
src/components/model-data-magic/index.vue
View File

@ -5,7 +5,7 @@
<template v-if="form.style_actived == 7">
<div class="flex-row align-c jc-c style-size flex-wrap">
<div v-for="(item, index) in data_magic_list" :key="index" :style="`${ item.data_style.background_style } ${ content_radius }`" :class="['img-spacing-border', { 'style9-top': [0, 1].includes(index), 'style9-bottom': ![0, 1].includes(index) }]">
<template v-if="item.data_content.data_type == 'commodity'">
<template v-if="item.data_content.data_type == 'goods'">
<div class="w h flex-col gap-20" :style="`${ [0, 1].includes(index) ? padding_computer(item.data_style.chunk_padding) : '' }`">
<div v-if="(!isEmpty(item.data_content.heading_title) || !isEmpty(item.data_content.subtitle)) && [0, 1].includes(index)" class="flex-col gap-5 tl">
<p class="ma-0 w text-line-1" :style="trends_config(item.data_style, 'heading')">{{ item.data_content.heading_title || '' }}</p>
@ -22,7 +22,7 @@
<div v-if="item.data_style.is_show && item.data_content.list.length > 1" :class="{'dot-center': item.data_style?.indicator_location == 'center', 'dot-right': item.data_style?.indicator_location == 'flex-end' }" class="dot flex abs">
<template v-if="item.data_style.indicator_style == 'num'">
<div :style="item.data_style.indicator_styles" class="dot-item">
<span class="num-active" :style="`color: ${ item.data_style.actived_color }`">{{ item.actived_index + 1 }}</span><span>/{{ item.data_content.product_list.length }}</span>
<span class="num-active" :style="`color: ${ item.data_style.actived_color }`">{{ item.actived_index + 1 }}</span><span>/{{ item.data_content.list.length }}</span>
</div>
</template>
<template v-else>
@ -34,7 +34,7 @@
</template>
<template v-else>
<div v-for="(item, index) in data_magic_list" :key="index" class="cube-selected img-spacing-border" :style="`${ selected_style(item) } ${ item.data_style.background_style } ${ content_radius }`">
<template v-if="item.data_content.data_type == 'commodity'">
<template v-if="item.data_content.data_type == 'goods'">
<div :class="[spacing_processing(index) ? 'gap-20 w h flex-col' : 'gap-10 w h flex-col']" :style="`${ padding_computer(item.data_style.chunk_padding) }`">
<div v-if="!isEmpty(item.data_content.heading_title) || !isEmpty(item.data_content.subtitle)" class="flex-col gap-5 tl">
<p class="ma-0 w text-line-1" :style="trends_config(item.data_style, 'heading')">{{ item.data_content.heading_title || '' }}</p>
@ -51,7 +51,7 @@
<div v-if="item.data_style.is_show && item.data_content.list.length > 1" :class="{'dot-center': item.data_style?.indicator_location == 'center', 'dot-right': item.data_style?.indicator_location == 'flex-end' }" class="dot flex abs">
<template v-if="item.data_style.indicator_style == 'num'">
<div :style="item.data_style.indicator_styles" class="dot-item">
<span class="num-active" :style="`color: ${ item.data_style.actived_color }`">{{ item.actived_index + 1 }}</span><span>/{{ item.data_content.product_list.length }}</span>
<span class="num-active" :style="`color: ${ item.data_style.actived_color }`">{{ item.actived_index + 1 }}</span><span>/{{ item.data_content.list.length }}</span>
</div>
</template>
<template v-else>
@ -163,19 +163,19 @@ watch(props.value.content, (val) => {
data_style.background_style = background_style(data_style);
const { is_roll, rotation_direction, interval_time } = data_style;
const { product_list, img_list } = data_content;
if (data_content.data_type == 'commodity') {
data_content.list = commodity_list(data_content.product_list, item.num);
const { goods_list, images_list } = data_content;
if (data_content.data_type == 'goods') {
data_content.list = commodity_list(data_content.goods_list, item.num);
} else {
data_content.list = data_content.img_list;
data_content.list = data_content.images_list;
}
const new_data = {
data_type: data_content.data_type,
interval_time: interval_time,
is_roll: is_roll,
rotation_direction: rotation_direction,
product_list: [...product_list], // 确保深拷贝
img_list: [...img_list] // 确保深拷贝
goods_list: [...goods_list], // 确保深拷贝
images_list: [...images_list] // 确保深拷贝
};
// let old_data = old_list.value[key];
// 获取旧数据
@ -244,17 +244,17 @@ const text_style = (typeface: string, size: number, color: string) => {
const commodity_list = (list: any[], num: number) => {
if (list.length > 0) {
// 深拷贝一下，确保不会出现问题
const commodity_list = cloneDeep(list).map((item: any) => ({
...item.link,
title: item.new_title,
const goods_list = cloneDeep(list).map((item: any) => ({
...item.data,
title: !isEmpty(item.new_title) ? item.new_title : item.data.title,
new_url: item.new_url,
}));
// 存储数据显示
let nav_list = [];
// 拆分的数量
const split_num = Math.ceil(commodity_list.length / num);
const split_num = Math.ceil(goods_list.length / num);
for (let i = 0; i < split_num; i++) {
nav_list.push({ split_list: commodity_list.slice(i * num, (i + 1) * num) });
nav_list.push({ split_list: goods_list.slice(i * num, (i + 1) * num) });
}
return nav_list;
} else {

14
src/components/model-data-magic/model-data-magic-content.vue
View File

@ -91,12 +91,12 @@ const data_style = {
}
// 每个小模块独立的内容
const data_content = {
data_type: 'commodity',
data_type: 'goods',
heading_title: '主标题',
subtitle: '副标题',
product_list:[],
is_show: ['0', '1'],
img_list:[
goods_list:[],
is_show: ['title', 'price'],
images_list:[
{
carousel_img: [],
carousel_link: {},
@ -193,10 +193,10 @@ const show_padding = (index:number, map_index:number) => {
const data_title = (item: any) => {
let title = `共有`;
if (item.data_content) {
if (item.data_content.data_type == 'commodity') {
title += `${ item.data_content.product_list.length }个商品`;
if (item.data_content.data_type == 'goods') {
title += `${ item.data_content.goods_list.length }个商品`;
} else {
title += `${ item.data_content.img_list.length }个图片`;
title += `${ item.data_content.images_list.length }个图片`;
}
}
return title;

80
src/components/model-shop-list/index.vue
View File

@ -2,10 +2,10 @@
<div class="oh" :style="style_container">
<div :class="outer_class" :style="onter_style">
<div v-for="(item, index) in list" :key="index" class="re" :class="layout_type" :style="layout_style">
<template v-if="product_style == '6'">
<template v-if="theme == '6'">
<div :class="['flex-row align-c jc-sb ptb-15 mlr-10 gap-20', { 'br-b-e': index != list.length - 1 }]">
<div v-if="is_show('0')" :class="text_line" :style="trends_config('title')">{{ item.title }}</div>
<div v-if="is_show('2')" class="num" :style="`color: ${new_style.shop_price_color}`">
<div v-if="is_show('title')" :class="text_line" :style="trends_config('title')">{{ item.title }}</div>
<div v-if="is_show('price')" class="num" :style="`color: ${new_style.shop_price_color}`">
<span class="identifying">￥</span><span :style="trends_config('price')">{{ item.min_price }}</span>
</div>
</div>
@ -13,31 +13,31 @@
<template v-else>
<template v-if="!isEmpty(item)">
<template v-if="!isEmpty(item.new_url)">
<image-empty v-model="item.new_url[0]" :class="`flex-img${product_style}`" :style="content_img_radius"></image-empty>
<image-empty v-model="item.new_url[0]" :class="`flex-img${theme}`" :style="content_img_radius"></image-empty>
</template>
<template v-else>
<image-empty v-model="item.images" :class="`flex-img${product_style}`" :style="content_img_radius"></image-empty>
<image-empty v-model="item.images" :class="`flex-img${theme}`" :style="content_img_radius"></image-empty>
</template>
</template>
<div class="flex-col flex-1 jc-sb content gap-10" :style="content_style">
<div class="flex-col gap-10 top-title">
<div v-if="is_show('0')" :class="text_line" :style="trends_config('title')">{{ item.title }}</div>
<div v-if="show_content && is_show('1') && !isEmpty(item.plugins_view_icon_data)" class="flex-row gap-5">
<div v-if="is_show('title')" :class="text_line" :style="trends_config('title')">{{ item.title }}</div>
<div v-if="show_content && is_show('plugins_view_icon') && !isEmpty(item.plugins_view_icon_data)" class="flex-row gap-5">
<div v-for="(icon_data, icon_index) in item.plugins_view_icon_data" :key="icon_index" class="radius-sm size-9 pl-3 pr-3" :style="icon_style(icon_data)">{{ icon_data.name }}</div>
</div>
</div>
<div v-if="!['3', '4', '5'].includes(form.product_style)" class="flex-col gap-5 oh">
<div v-if="!['3', '4', '5'].includes(form.theme)" class="flex-col gap-5 oh">
<div :class="[form.is_price_solo ? 'flex-row align-c nowrap' : 'flex-col gap-5']">
<div v-if="is_show('2')" class="num" :style="`color: ${new_style.shop_price_color}`">
<div v-if="is_show('price')" class="num" :style="`color: ${new_style.shop_price_color}`">
<span class="identifying">{{ item.show_price_symbol }}</span
><span :style="trends_config('price')">{{ item.min_price }}</span>
<span v-if="is_show('6')" class="identifying">{{ item.show_price_unit }}</span>
<span v-if="is_show('price_unit')" class="identifying">{{ item.show_price_unit }}</span>
</div>
<div v-if="show_content && is_show('5')" class="size-10 flex">
<div v-if="show_content && is_show('original_price')" class="size-10 flex">
<span class="original-price-left"></span
><span :class="['original-price text-line-1', { 'flex-1': form.is_price_solo }]"
>{{ item.show_original_price_symbol }}{{ item.min_original_price }}
<template v-if="is_show('7')">
<template v-if="is_show('original_price_unit')">
{{ item.show_original_price_unit }}
</template>
</span>
@ -46,8 +46,8 @@
<div class="flex-row jc-sb align-e">
<div>
<div v-if="show_content" class="flex-row align-c size-10">
<div v-if="is_show('3')" class="pr-5" :style="trends_config('sold_number')">已售{{ item.sales_count }}件</div>
<!-- <div v-if="is_show('3')" :class="['pr-5', {'br-r-e': is_show('3') && is_show('4')}]" :style="trends_config('sold_number')">已售{{ item.sales_count }}件</div> -->
<div v-if="is_show('sales_count')" class="pr-5" :style="trends_config('sold_number')">已售{{ item.sales_count }}件</div>
<!-- <div v-if="is_show('sales_count')" :class="['pr-5', {'br-r-e': is_show('sales_count') && is_show('4')}]" :style="trends_config('sold_number')">已售{{ item.sales_count }}件</div> -->
<!-- <div v-if="is_show('4')" class="pl-5" :style="trends_config('score')">评分0</div> -->
</div>
</div>
@ -69,16 +69,16 @@
</div>
<div v-else class="flex-row align-c jc-sb">
<div class="flex-row align-c nowrap">
<div v-if="is_show('2')" class="num" :style="`color: ${new_style.shop_price_color}`">
<div v-if="is_show('price')" class="num" :style="`color: ${new_style.shop_price_color}`">
<span class="identifying">{{ item.show_price_symbol }}</span
><span :style="trends_config('price')">{{ item.min_price }}</span>
<span v-if="is_show('6')" class="identifying">{{ item.show_price_unit }}</span>
<span v-if="is_show('price_unit')" class="identifying">{{ item.show_price_unit }}</span>
</div>
<div v-if="show_content && is_show('5')" class="size-10 flex">
<div v-if="show_content && is_show('original_price')" class="size-10 flex">
<span class="original-price-left"></span
><span :class="['original-price text-line-1', { 'flex-1': form.is_price_solo }]"
>{{ item.show_original_price_symbol }}{{ item.min_original_price }}
<template v-if="is_show('7')">
<template v-if="is_show('original_price_unit')">
{{ item.show_original_price_unit }}
</template>
</span>
@ -134,7 +134,7 @@ interface plugins_icon_data {
color: string;
url: string;
}
interface product_list {
interface data_list {
title: string;
images: string;
new_url: string[];
@ -159,14 +159,14 @@ const default_list = {
new_url: [],
plugins_view_icon_data: []
};
const list = ref<product_list[]>([]);
const list = ref<data_list[]>([]);
const get_products = () => {
const { goods_category_ids, goods_brand_ids, number, sort, sort_rules } = form.value;
const { category, data_ids, number, sort, sort_rules } = form.value;
const params = {
goods_keywords: '',
goods_category_ids: goods_category_ids,
goods_brand_ids: goods_brand_ids,
goods_category_ids: category,
goods_brand_ids: data_ids,
goods_order_by_type: sort,
goods_order_by_rule: sort_rules,
goods_number: number,
@ -182,11 +182,11 @@ const get_products = () => {
};
watchEffect(() => {
if (form.value.product_check == '0') {
if (!isEmpty(form.value.product_list)) {
list.value = cloneDeep(form.value.product_list).map((item: any) => ({
...item.link,
title: item.new_title,
if (form.value.data_type == '0') {
if (!isEmpty(form.value.data_list)) {
list.value = cloneDeep(form.value.data_list).map((item: any) => ({
...item.data,
title: !isEmpty(item.new_title) ? item.new_title : item.data.title,
new_url: item.new_url,
}));
} else {
@ -204,7 +204,7 @@ const content_img_radius = computed(() => radius_computer(new_style.value.shop_i
// 内边距设置
const content_padding = computed(() => padding_computer(new_style.value.shop_padding));
// 选择的风格
const product_style = computed(() => form.value.product_style);
const theme = computed(() => form.value.theme);
// 商品间距
const content_outer_spacing = computed(() => new_style.value.content_outer_spacing);
// 两列风格
@ -217,13 +217,13 @@ const multicolumn_columns_height = computed(() => new_style.value.content_outer_
// 最外层不同风格下的显示
const outer_class = computed(() => {
const flex = ['0', '2', '6'].includes(product_style.value) ? 'flex-col ' : 'flex-row ';
const wrap = product_style.value == '5' ? '' : 'flex-wrap ';
const background = ['6'].includes(product_style.value) ? 'bg-f ' : '';
const flex = ['0', '2', '6'].includes(theme.value) ? 'flex-col ' : 'flex-row ';
const wrap = theme.value == '5' ? '' : 'flex-wrap ';
const background = ['6'].includes(theme.value) ? 'bg-f ' : '';
return flex + wrap + background + 'oh';
});
const onter_style = computed(() => {
const radius = product_style.value == '6' ? content_radius.value : '';
const radius = theme.value == '6' ? content_radius.value : '';
const gap = `gap: ${new_style.value.content_outer_spacing + 'px'};`;
return `${radius} ${gap}`;
});
@ -231,7 +231,7 @@ const onter_style = computed(() => {
// 不同风格下的样式
const layout_type = computed(() => {
let class_type = '';
switch (product_style.value) {
switch (theme.value) {
case '0':
class_type = `flex-row bg-f oh`;
break;
@ -257,15 +257,15 @@ const layout_type = computed(() => {
});
const layout_style = computed(() => {
const radius = product_style.value == '6' ? '' : content_radius.value;
const padding = ['0', '4'].includes(product_style.value) ? content_padding.value : '';
const radius = theme.value == '6' ? '' : content_radius.value;
const padding = ['0', '4'].includes(theme.value) ? content_padding.value : '';
return `${radius} ${padding}`;
});
// 内容区域的样式
const content_style = computed(() => {
const spacing_value = new_style.value.content_spacing;
let spacing = '';
if (['0', '4'].includes(product_style.value)) {
if (['0', '4'].includes(theme.value)) {
spacing = `margin-left: ${spacing_value}px;`;
} else {
spacing = content_padding.value;
@ -274,13 +274,13 @@ const content_style = computed(() => {
return `${spacing}`;
});
// 显示除标题外的其他区域
const show_content = computed(() => ['0', '1', '2'].includes(product_style.value));
const show_content = computed(() => ['0', '1', '2'].includes(theme.value));
// 超过多少行隐藏
const text_line = computed(() => {
let line = '';
if (['1', '6'].includes(product_style.value)) {
if (['1', '6'].includes(theme.value)) {
line = 'text-line-1';
} else if (['0', '2', '3', '4', '5'].includes(product_style.value)) {
} else if (['0', '2', '3', '4', '5'].includes(theme.value)) {
line = 'text-line-2';
}
return line;

29
src/components/model-shop-list/model-shop-list-content.vue
View File

@ -4,7 +4,7 @@
<card-container class="mb-8">
<div class="mb-12">列表设置</div>
<el-form-item label="选择风格">
<el-radio-group v-model="form.product_style" @change="change_style">
<el-radio-group v-model="form.theme" @change="change_style">
<el-radio v-for="item in base_list.product_style_list" :key="item.value" :value="item.value">{{ item.name }}</el-radio>
</el-radio-group>
</el-form-item>
@ -13,24 +13,24 @@
<card-container class="card-container-br">
<div class="mb-12">商品设置</div>
<el-form-item label="添加商品">
<el-radio-group v-model="form.product_check">
<el-radio-group v-model="form.data_type">
<el-radio v-for="item in base_list.product_list" :key="item.value" :value="item.value">{{ item.name }}</el-radio>
</el-radio-group>
</el-form-item>
<template v-if="form.product_check === '0'">
<template v-if="form.data_type === '0'">
<div class="nav-list">
<drag-group :list="form.product_list" img-params="images" @onsort="product_list_sort" @remove="product_list_remove"></drag-group>
<drag-group :list="form.data_list" img-params="images" @onsort="goods_list_sort" @remove="goods_list_remove"></drag-group>
<el-button class="mt-20 w" @click="add">+添加</el-button>
</div>
</template>
<template v-else>
<el-form-item label="商品分类">
<el-select v-model="form.goods_category_ids" multiple collapse-tags placeholder="请选择商品分类">
<el-select v-model="form.category" multiple collapse-tags placeholder="请选择商品分类">
<el-option v-for="item in base_list.product_category_list" :key="item.id" :label="item.name" :value="item.id" />
</el-select>
</el-form-item>
<el-form-item label="指定品牌">
<el-select v-model="form.goods_brand_ids" multiple collapse-tags placeholder="请选择品牌">
<el-select v-model="form.data_ids" multiple collapse-tags placeholder="请选择品牌">
<el-option v-for="item in base_list.product_brand_list" :key="item.id" :label="item.name" :value="item.id" />
</el-select>
</el-form-item>
@ -125,8 +125,8 @@ onBeforeMount(() => {
init();
});
const product_list_remove = (index: number) => {
form.value.product_list.splice(index, 1);
const goods_list_remove = (index: number) => {
form.value.data_list.splice(index, 1);
};
const add = () => {
url_value_dialog_visible.value = true;
@ -136,20 +136,21 @@ const url_value_dialog_visible = ref(false);
// 弹出框选择的内容
const url_value_dialog_call_back = (item: any[]) => {
item.forEach((item: any) => {
form.value.product_list.push({
form.value.data_list.push({
id: get_math(),
new_url: [],
new_title: item.title,
link: item,
new_title: '',
data: item,
});
});
};
// 拖拽更新之后，更新数据
const product_list_sort = (new_list: any) => {
form.value.product_list = new_list;
const goods_list_sort = (new_list: any) => {
form.value.data_list = new_list;
};
// 选择某些风格时， 切换到对应的按钮
const change_style = (val: any): void => {
form.value.product_style = val;
form.value.theme = val;
if (['3', '4', '5'].includes(val) && ['0', '1'].includes(form.value.shop_type)) {
form.value.shop_type = '2';
}

6
src/components/model-shop-list/model-shop-list-styles.vue
View File

@ -36,13 +36,13 @@
<el-form-item label="内间距">
<padding :value="form.shop_padding" @update:value="shop_padding_change"></padding>
</el-form-item>
<el-form-item v-if="['0', '4'].includes(product_style)" label="内容间距">
<el-form-item v-if="['0', '4'].includes(theme)" label="内容间距">
<slider v-model="form.content_spacing" :max="100"></slider>
</el-form-item>
<el-form-item label="商品间距">
<slider v-model="form.content_outer_spacing" :max="100"></slider>
</el-form-item>
<template v-if="product_style == '5'">
<template v-if="theme == '5'">
<el-form-item label="内容宽度">
<slider v-model="form.content_outer_width" :max="1000"></slider>
</el-form-item>
@ -85,7 +85,7 @@ const state = reactive({
// 如果需要解构，确保使用toRefs
const { form, data } = toRefs(state);
const product_style = computed(() => data.value.product_style);
const theme = computed(() => data.value.theme);
const common_style_update = (value: any) => {
form.value.common_style = value;

9
src/components/model-shop-tabs/index.vue
View File

@ -25,14 +25,13 @@ watch(tabs_list.value, (val) => {
const new_style = val?.style;
let new_data = val;
// 产品的值
new_data.content.product_check = new_data.content.tabs_list[0].product_check;
new_data.content.goods_category_ids = new_data.content.tabs_list[0].goods_category_ids;
new_data.content.goods_brand_ids = new_data.content.tabs_list[0].goods_brand_ids;
new_data.content.data_type = new_data.content.tabs_list[0].data_type;
new_data.content.category = new_data.content.tabs_list[0].category;
new_data.content.data_ids = new_data.content.tabs_list[0].data_ids;
new_data.content.number = new_data.content.tabs_list[0].number;
new_data.content.is_price_solo = new_data.content.tabs_list[0].is_price_solo;
new_data.content.sort = new_data.content.tabs_list[0].sort;
new_data.content.sort_rules = new_data.content.tabs_list[0].sort_rules;
new_data.content.product_list = new_data.content.tabs_list[0].product_list;
new_data.content.goods_list = new_data.content.tabs_list[0].goods_list;
tabs_list.value = new_data;
// 公共样式

33
src/components/model-shop-tabs/model-shop-tabs-content.vue
View File

@ -12,7 +12,7 @@
<el-switch v-model="form.tabs_top_up" />
</el-form-item>
<el-form-item label="商品风格">
<el-radio-group v-model="form.product_style">
<el-radio-group v-model="form.theme" @change="change_style">
<el-radio v-for="item in base_list.product_style_list" :key="item.value" :value="item.value">{{ item.name }}</el-radio>
</el-radio-group>
</el-form-item>
@ -34,24 +34,24 @@
<el-input v-model="row.desc" placeholder="请输入简介" clearable />
</el-form-item>
<el-form-item label="添加商品">
<el-radio-group v-model="row.product_check">
<el-radio-group v-model="row.data_type">
<el-radio v-for="item in base_list.product_list" :key="item.value + get_math()" :value="item.value">{{ item.name }}</el-radio>
</el-radio-group>
</el-form-item>
<template v-if="row.product_check === '0'">
<template v-if="row.data_type === '0'">
<div class="nav-list">
<drag-group :list="row.product_list" img-params="images" @onsort="product_list_sort($event, index)" @remove="product_list_remove($event, index)"></drag-group>
<drag-group :list="row.data_list" img-params="images" @onsort="goods_list_sort($event, index)" @remove="goods_list_remove($event, index)"></drag-group>
<el-button class="mtb-20 w" @click="product_add(index)">+添加</el-button>
</div>
</template>
<template v-else>
<el-form-item label="商品分类">
<el-select v-model="row.goods_category_ids" multiple collapse-tags placeholder="请选择商品分类">
<el-select v-model="row.category" multiple collapse-tags placeholder="请选择商品分类">
<el-option v-for="item in base_list.product_category_list" :key="item.id" :label="item.name" :value="item.id" />
</el-select>
</el-form-item>
<el-form-item label="指定品牌">
<el-select v-model="row.goods_brand_ids" multiple collapse-tags placeholder="请选择商品品牌">
<el-select v-model="row.data_ids" multiple collapse-tags placeholder="请选择商品品牌">
<el-option v-for="item in base_list.product_brand_list" :key="item.id" :label="item.name" :value="item.id" />
</el-select>
</el-form-item>
@ -185,11 +185,11 @@ const tabs_add = () => {
};
// 指定商品
const product_list_remove = (index: number, product_index: number) => {
form.value.tabs_list[product_index].product_list.splice(index, 1);
const goods_list_remove = (index: number, product_index: number) => {
form.value.tabs_list[product_index].data_list.splice(index, 1);
};
const product_list_sort = (item: any, index: number) => {
form.value.tabs_list[index].product_list = item;
const goods_list_sort = (item: any, index: number) => {
form.value.tabs_list[index].data_list = item;
};
let click_index = 0;
const product_add = (index: number) => {
@ -202,14 +202,21 @@ const url_value_dialog_visible = ref(false);
// 弹出框选择的内容
const url_value_dialog_call_back = (item: any[]) => {
item.forEach((item: any) => {
form.value.tabs_list[click_index].product_list.push({
form.value.tabs_list[click_index].data_list.push({
id: get_math(),
new_url: [],
new_title: item.title,
link: item,
new_title: '',
data: item,
});
});
};
// 选择某些风格时， 切换到对应的按钮
const change_style = (val: any): void => {
form.value.theme = val;
if (['3', '4', '5'].includes(val) && ['0', '1'].includes(form.value.shop_type)) {
form.value.shop_type = '2';
}
};
</script>
<style lang="scss" scoped>
.content {

8
src/components/model-shop-tabs/model-shop-tabs-styles.vue
View File

@ -24,20 +24,20 @@
<el-form-item label="内容圆角">
<radius :value="form.shop_radius" @update:value="shop_radius_change"></radius>
</el-form-item>
<template v-if="product_style != '6'">
<template v-if="theme != '6'">
<el-form-item label="图片圆角">
<radius :value="form.shop_img_radius" @update:value="img_radius_change"></radius>
</el-form-item>
<el-form-item label="内间距">
<padding :value="form.shop_padding" @update:value="shop_padding_change"></padding>
</el-form-item>
<el-form-item v-if="['0', '4'].includes(product_style)" label="内容间距">
<el-form-item v-if="['0', '4'].includes(theme)" label="内容间距">
<slider v-model="form.content_spacing" :max="100"></slider>
</el-form-item>
<el-form-item label="商品间距">
<slider v-model="form.content_outer_spacing" :max="100"></slider>
</el-form-item>
<template v-if="product_style == '5'">
<template v-if="theme == '5'">
<el-form-item label="内容宽度">
<slider v-model="form.content_outer_width" :max="1000"></slider>
</el-form-item>
@ -105,7 +105,7 @@ const state = reactive({
// 如果需要解构，确保使用toRefs
const { form, data } = toRefs(state);
const product_style = computed(() => data.value.product_style);
const theme = computed(() => data.value.theme);
const common_style_update = (value: any) => {
form.value.common_style = value;

22
src/layout/components/main/default/shop-list.ts
View File

@ -1,12 +1,12 @@
import defaultCommon from './index';
interface DefaultProductList {
content: {
product_style: string;
product_check: string;
goods_category_ids: string[];
goods_brand_ids: string[];
theme: string;
data_type: string;
category: string[];
data_ids: string[];
product_show_list: string[];
product_list: string[];
data_list: string[];
is_price_solo: boolean;
number: number;
sort: string;
@ -45,17 +45,17 @@ interface DefaultProductList {
}
const defaultProductList: DefaultProductList = {
content: {
product_style: '0',
product_check: '0',
theme: '0',
data_type: '0',
product_show_list: [],
product_list: [],
goods_category_ids: [],
goods_brand_ids: [],
data_list: [],
category: [],
data_ids: [],
is_price_solo: true,
number: 4,
sort: '0',
sort_rules: '0',
is_show: ['0', '1', '2', '3', '4', '5'],
is_show: ['title', 'plugins_view_icon', 'price', 'sales_count', 'original_price'],
is_shop_show: true,
shop_type: '0',
shop_button_effect: '0',

23
src/layout/components/main/default/shop-tabs.ts
View File

@ -4,20 +4,19 @@ interface articleTabsList {
title: string;
img: uploadList[];
desc: string;
product_check: string;
goods_category_ids: string[];
goods_brand_ids: string[];
is_price_solo: boolean;
data_type: string;
category: string[];
data_ids: string[];
number: number;
sort: string;
sort_rules: string;
product_list: [];
data_list: [];
}
interface DefaultProductList {
content: {
tabs_style: string;
tabs_top_up: boolean;
product_style: string;
theme: string;
tabs_list: articleTabsList[];
is_show: string[];
is_shop_show: boolean;
@ -63,14 +62,14 @@ const defaultProductList: DefaultProductList = {
content: {
tabs_style: '0',
tabs_top_up: false,
product_style: '0',
theme: '0',
tabs_list: [
{ id: '1', title: '热门推荐', img: [], desc: '简介', product_check: '0', goods_category_ids: [], goods_brand_ids: [], number: 4, is_price_solo: true, sort: '0', sort_rules: '0', product_list: [] },
{ id: '2', title: '测试一', img: [], desc: '简介', product_check: '0', goods_category_ids: [], goods_brand_ids: [], number: 4, is_price_solo: true, sort: '0', sort_rules: '0', product_list: [] },
{ id: '3', title: '测试二', img: [], desc: '简介', product_check: '0', goods_category_ids: [], goods_brand_ids: [], number: 4, is_price_solo: true, sort: '0', sort_rules: '0', product_list: [] },
{ id: '4', title: '测试三', img: [], desc: '简介', product_check: '0', goods_category_ids: [], goods_brand_ids: [], number: 4, is_price_solo: true, sort: '0', sort_rules: '0', product_list: [] },
{ id: '1', title: '热门推荐', img: [], desc: '简介', data_type: '0', category: [], data_ids: [], number: 4, sort: '0', sort_rules: '0', data_list: [] },
{ id: '2', title: '测试一', img: [], desc: '简介', data_type: '0', category: [], data_ids: [], number: 4, sort: '0', sort_rules: '0', data_list: [] },
{ id: '3', title: '测试二', img: [], desc: '简介', data_type: '0', category: [], data_ids: [], number: 4, sort: '0', sort_rules: '0', data_list: [] },
{ id: '4', title: '测试三', img: [], desc: '简介', data_type: '0', category: [], data_ids: [], number: 4, sort: '0', sort_rules: '0', data_list: [] },
],
is_show: ['0', '1', '2', '3', '4', '5'],
is_show: ['title', 'plugins_view_icon', 'price', 'sales_count', 'original_price'],
is_shop_show: true,
shop_type: '0',
shop_button_effect: '0',