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

Merge remote-tracking branch 'origin/dev-yxl' into dev-sws

v1.0.0
sws 2024-08-22 18:40:52 +08:00
parent 30ddaa172a c1fa0fbb71
commit 93b987da81
19 changed files with 243 additions and 130 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
src/components/common/custom-module/model-image/index.vue
View File

@ -14,6 +14,12 @@ const props = defineProps({
},
required: true
},
sourceList: {
type: Object,
default: () => {
return {};
}
},
isPercentage: {
type: Boolean,
default: false
@ -21,13 +27,14 @@ const props = defineProps({
});
// 用于页面判断显示
const form = reactive(props.value);
const img_src = computed(() => {
if (!isEmpty(form.img_src[0])) {
return form.img_src[0];
} else {
return {
url: form.data_source_list.url
if (!isEmpty(props.sourceList)) {
return props.sourceList[form.data_source_id];
} else {
return '';
}
}
});

27
src/components/common/custom-module/model-image/model-image-style.vue
View File

@ -4,19 +4,12 @@
<card-container>
<div class="mb-12">图片设置</div>
<el-form-item label="上传图片">
<div class="flex-column w">
<upload v-model="form.img_src" :limit="1" size="50"></upload>
<div class="flex-row align-c gap-10 mt-12">
<el-select v-model="form.data_source_id" value-key="id" placeholder="请选择图片数据字段" size="default" class="flex-1">
<el-option v-for="item in options.filter(item => item.type == 'images')" :key="item.field" :label="item.name" :value="item.field" />
</el-select>
<el-popover placement="top-start" :width="200" trigger="hover" content="this is content, this is content, this is content">
<template #reference>
<icon name="tips" size="24"></icon>
</template>
</el-popover>
</div>
</div>
<upload v-model="form.img_src" :limit="1" size="50" @update:model-value="img_src_change('1')"></upload>
</el-form-item>
<el-form-item label="数据字段">
<el-select v-model="form.data_source_id" value-key="id" clearable placeholder="请选择图片数据字段" size="default" class="flex-1" @change="img_src_change('2')">
<el-option v-for="item in options.filter(item => item.type == 'images')" :key="item.field" :label="item.name" :value="item.field" />
</el-select>
</el-form-item>
<el-form-item label="链接">
<url-value v-model="form.link"></url-value>
@ -97,6 +90,14 @@ const border_radius_change = (radius: any) => {
form.value.border_radius = Object.assign(form.value.border_radius, pick(radius, ['radius', 'radius_top_left', 'radius_top_right', 'radius_bottom_left', 'radius_bottom_right']));
};
const img_src_change = (key: string) => {
if (key == '2') {
form.value.img_src = [];
} else {
form.value.data_source_id = '';
}
}
watch(
diy_data,
(val) => {

22
src/components/common/custom-module/model-text/index.vue
View File

@ -2,16 +2,17 @@
<div class="img-outer re" :style="com_style">
<div :style="text_style" class="break">
<template v-if="form.is_rich_text">
<div :innerHTML="form.text_title"></div>
<div :innerHTML="text_title"></div>
</template>
<template v-else>
{{ form.text_title }}
{{ text_title }}
</template>
</div>
</div>
</template>
<script setup lang="ts">
import { radius_computer, padding_computer } from '@/utils';
import { isEmpty } from 'lodash';
const props = defineProps({
value: {
type: Object,
@ -20,6 +21,12 @@ const props = defineProps({
},
required: true
},
sourceList: {
type: Object,
default: () => {
return {};
}
},
isPercentage: {
type: Boolean,
default: false
@ -27,6 +34,17 @@ const props = defineProps({
});
// 用于页面判断显示
const form = reactive(props.value);
const text_title = computed(() => {
let text = '';
if (!isEmpty(form.text_title)) {
text = form.text_title;
} else if(!isEmpty(props.sourceList[form.data_source_id])) {
text = props.sourceList[form.data_source_id];
} else if(!props.isPercentage){
text = '请在此输入文字';
}
return text;
});
const text_style = computed(() => {
let style = `font-size: ${ form.text_size }px;color: ${ form.text_color }; text-align: ${ form.text_location }; transform: rotate(${form.text_rotate}deg);text-decoration: ${ form.text_option };${ padding_computer(form.text_padding) };`;

27
src/components/common/custom-module/model-text/model-text-style.vue
View File

@ -4,19 +4,12 @@
<card-container>
<div class="mb-12">文本设置</div>
<el-form-item label="文本内容">
<div class="flex-column w">
<el-input v-model="form.text_title" placeholder="请输入链接" type="textarea" :rows="3"></el-input>
<div class="flex-row align-c gap-10 mt-12">
<el-select v-model="form.data_source_id" value-key="id" placeholder="请选择图片数据字段" size="default" class="flex-1">
<el-option v-for="item in options.filter(item => item.type == 'text')" :key="item.field" :label="item.name" :value="item.field" />
</el-select>
<el-popover placement="top-start" :width="200" trigger="hover" content="this is content, this is content, this is content">
<template #reference>
<icon name="tips" size="24"></icon>
</template>
</el-popover>
</div>
</div>
<el-input v-model="form.text_title" placeholder="请输入文本内容" type="textarea" :rows="3" @input="text_change('1')"></el-input>
</el-form-item>
<el-form-item label="数据字段">
<el-select v-model="form.data_source_id" value-key="id" clearable placeholder="请选择图片数据字段" size="default" class="flex-1" @change="text_change('2')">
<el-option v-for="item in options.filter(item => item.type == 'text')" :key="item.field" :label="item.name" :value="item.field" />
</el-select>
</el-form-item>
<el-form-item label="链接">
<url-value v-model="form.text_link"></url-value>
@ -137,6 +130,14 @@ const border_radius_change = (radius: any) => {
form.value.border_radius = Object.assign(form.value.border_radius, pick(radius, ['radius', 'radius_top_left', 'radius_top_right', 'radius_bottom_left', 'radius_bottom_right']));
};
const text_change = (key: string) => {
if (key == '2') {
form.value.text_title = '';
} else {
form.value.data_source_id = '';
}
}
watch(
diy_data,
(val) => {

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

@ -13,7 +13,7 @@
<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">{{ row.new_title }}</div>
<div class="flex-1 flex-width text-line-2 size-12 self-s do-not-trigger" @dblclick="double_click(index)">{{ row.new_title }}</div>
</template>
</template>
</drag>
@ -67,6 +67,10 @@ const edit = (index: number) => {
edit_index.value = index;
}
}
const double_click = (index: number) => {
edit_index.value = index;
}
</script>
<style lang="scss" scoped>
.img {

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

@ -69,7 +69,7 @@ const base_list = {
{ name: '商品标签', value: '1' },
{ name: '商品售价', value: '2' },
{ name: '商品销量', value: '3' },
{ name: '商品评分', value: '4' },
// { name: '商品评分', value: '4' },
{ name: '商品原价', value: '5' },
{ name: '售价单位', value: '6' },
{ name: '原价单位', value: '7' },

8
src/components/common/tabs-view/index.vue
View File

@ -2,7 +2,12 @@
<div class="tabs flex-row oh">
<template v-for="(item, index) in tabs.content.tabs_list" :key="index">
<div class="item nowrap flex-col jc-c gap-4" :class="tabs_style + (index == 0 ? ' active' : '')">
<img class="img" src="@/assets/images/components/model-user-info/avatar.png" />
<template v-if="!isEmpty(item.img)">
<image-empty v-model="item.img[0]" class="img" error-img-style="width:2rem;height:2rem;"></image-empty>
</template>
<template v-else>
<image-empty class="img" error-img-style="width:2rem;height:2rem;"></image-empty>
</template>
<div class="title" :style="index == 0 ? tabs_style_style.tabs_title_checked : tabs_style_style.tabs_title">{{ item.title }}</div>
<div class="desc">{{ item.desc }}</div>
<icon name="checked-1" class="icon"></icon>
@ -14,6 +19,7 @@
<script lang="ts" setup>
import { gradient_computer } from '@/utils';
import { isEmpty } from 'lodash';
const props = defineProps({
value: {
type: Object,

2
src/components/common/url-value/url-value-dialog.vue
View File

@ -195,11 +195,13 @@ const custom_link = (data: object) => {
//#region 链接确认回调 -----------------------------------------------start
// 取消回调
const emit = defineEmits(['close']);
const close_event = () => {
link_select.value = props.type.length == 0 ? 'shop' : props.type[0];
dialogVisible.value = false;
link_value.value = [];
reset_compontent.value = !reset_compontent.value;
emit('close');
};
// 确认回调
const confirm_event = () => {

9
src/components/model-custom/components/index.vue
View File

@ -48,13 +48,13 @@
</div>
<div :class="['main-content', { 'plug-in-border': item.show_tabs }]" :style="{ 'z-index': item.com_data.bottom_up ? 0 : 1 }">
<template v-if="item.key == 'text'">
<model-text :key="item.id" :value="item.com_data"></model-text>
<model-text :key="item.id" :value="item.com_data" :source-list="props.sourceList"></model-text>
</template>
<template v-else-if="item.key == 'img'">
<model-image :key="item.id" :value="item.com_data"></model-image>
<model-image :key="item.id" :value="item.com_data" :source-list="props.sourceList"></model-image>
</template>
<template v-else-if="item.key == 'auxiliary-line'">
<model-lines :key="item.id" :value="item.com_data"></model-lines>
<model-lines :key="item.id" :value="item.com_data" :source-list="props.sourceList"></model-lines>
</template>
</div>
</Vue3DraggableResizable>
@ -89,6 +89,7 @@ const app = getCurrentInstance();
const emits = defineEmits(['rightUpdate']);
interface Props {
list: diy_content[];
sourceList: object;
}
const props = defineProps<Props>();
//#endregion
@ -218,7 +219,7 @@ watch(() => center_height.value, () => {
}));
draggable_container.value = true;
});
},{ immediate: true, deep: true });
},{ deep: true });
//#endregion
//#region 左侧拖拽过来的处理
let draggedItem = ref<any>({});

6
src/components/model-custom/index.vue
View File

@ -3,13 +3,13 @@
<div class="w h re">
<div v-for="item in form.custom_list" :key="item.id" class="main-content" :style="{'left': percentage_count(item.location.x, div_width) , 'top': percentage_count(item.location.y, form.height), 'width': percentage_count(item.com_data.com_width, div_width), 'height': percentage_count(item.com_data.com_height, form.height)}">
<template v-if="item.key == 'text'">
<model-text :key="item.com_data" :value="item.com_data" :is-percentage="true"></model-text>
<model-text :key="item.com_data" :value="item.com_data" :source-list="form.source_list" :is-percentage="true"></model-text>
</template>
<template v-else-if="item.key == 'img'">
<model-image :key="item.com_data" :value="item.com_data" :is-percentage="true"></model-image>
<model-image :key="item.com_data" :value="item.com_data" :source-list="form.source_list" :is-percentage="true"></model-image>
</template>
<template v-else-if="item.key == 'auxiliary-line'">
<model-lines :key="item.com_data" :value="item.com_data" :is-percentage="true"></model-lines>
<model-lines :key="item.com_data" :value="item.com_data" :source-list="form.source_list" :is-percentage="true"></model-lines>
</template>
</div>
</div>

102
src/components/model-custom/model-custom-content.vue
View File

@ -4,9 +4,16 @@
<card-container class="common-content-height">
<div class="mb-20">数据源</div>
<el-form-item label="动态数据">
<el-select v-model="form.data_source" value-key="id" placeholder="请选择数据源" @change="changeDataSource">
<el-select v-model="form.data_source" value-key="id" placeholder="请选择数据源" clearable @change="changeDataSource">
<el-option v-for="item in options" :key="item.type" :label="item.name" :value="item.type" />
</el-select>
<div v-if="!isEmpty(form.source_list)" class="flex-row mt-20 gap-20">
<div class="re flex align-c">
<image-empty v-model="form.source_list[img_key]" style="width: 10rem; height: 10rem;"></image-empty>
<div class="plr-15 bg-f abs replace-data size-14" @click="replace_data">替换数据</div>
</div>
<div class="flex-1 size-14 text-line-3">{{ form.source_list.title || form.source_list.name }}</div>
</div>
</el-form-item>
<div class="mb-20">内容设置</div>
<el-button class="w" size="large" @click="custom_edit"><icon name="edit" size="12"></icon>自定义编辑</el-button>
@ -14,7 +21,7 @@
</el-form>
<Dialog ref="dialog" @accomplish="accomplish">
<div class="flex-row h w">
<DragIndex ref="draglist" :key="dragkey" v-model:height="center_height" :list="custom_list" @right-update="right_update"></DragIndex>
<DragIndex ref="draglist" :key="dragkey" v-model:height="center_height" :source-list="form.source_list" :list="custom_list" @right-update="right_update"></DragIndex>
<div class="settings">
<template v-if="diy_data.key === 'img'">
<model-image-style :key="key" v-model:height="center_height" :options="model_data_source" :value="diy_data"></model-image-style>
@ -33,15 +40,16 @@
</div>
</div>
</Dialog>
<url-value-dialog v-model:dialog-visible="url_value_dialog_visible" :type="dialog_type" @update:model-value="url_value_dialog_call_back" @close="url_value_close"></url-value-dialog>
</div>
</template>
<script setup lang="ts">
import Dialog from './components/dialog.vue';
import DragIndex from './components/index.vue';
import { cloneDeep } from 'lodash';
import { isEmpty, cloneDeep } from 'lodash';
import CustomAPI from '@/api/custom';
import { DataSourceStore } from '@/store';
const data_source = DataSourceStore();
const data_source_store = DataSourceStore();
const props = defineProps({
value: {
@ -56,8 +64,8 @@ const form = reactive(props.value);
// 弹出框里的内容
let custom_list = reactive([]);
const center_height = ref(0);
const options = ref<source_list[]>([]);
//#region 初始化数据处理
interface data_list {
name: string;
field: string;
@ -68,23 +76,44 @@ interface source_list {
data: data_list[];
type: string;
};
const init = () => {
const getCustominit = () => {
CustomAPI.getCustominit().then((res) => {
const { data_source } = res.data;
options.value = data_source;
data_source.set_data_source(data_source);
data_source_store.set_data_source(data_source);
});
}
onBeforeMount(() => {
if (!data_source.is_data_source_api) {
data_source.set_is_data_source_api(true);
init();
if (!data_source_store.is_data_source_api) {
data_source_store.set_is_data_source_api(true);
getCustominit();
} else {
options.value = data_source.data_source_list;
options.value = data_source_store.data_source_list;
// 如果历史的值出现，根据历史选中的值处理一下传递的数据结构
processing_data(form.data_source);
}
});
// 处理显示的图片和传递到下去的数据结构
const processing_data = (key: string) => {
const list = options.value.filter(item => item.type == key);
if (list.length > 0) {
model_data_source.value = list[0].data;
// 从中取出包含图片的内容
const field_list = list[0].data.filter(item => item.type == 'images');
// 取出图片的key
if (field_list.length > 0) {
img_key.value = field_list[0].field;
}
} else {
model_data_source.value = [];
}
if (!isEmpty(key)) {
dialog_type.value = [ key ];
}
};
//#endregion
//#region 自定义编辑的内部处理逻辑
const diy_data = ref<diy>({
key: '',
location: {
@ -104,7 +133,7 @@ const right_update = (item: any) => {
// 生成随机id
key.value = Math.random().toString(36).substring(2);
};
// 自定义编辑的逻辑
const custom_edit = () => {
if (!dialog.value) return;
dialog.value.dialogVisible = true;
@ -112,7 +141,7 @@ const custom_edit = () => {
custom_list = cloneDeep(form.custom_list);
center_height.value = cloneDeep(form.height);
};
// 点击完成的处理逻辑
const accomplish = () => {
if (!draglist.value) {
return;
@ -121,15 +150,42 @@ const accomplish = () => {
}
form.height = center_height.value;
};
//#endregion
//#region 数据源更新逻辑处理
const model_data_source = ref<data_list[]>([])
const changeDataSource = (key: any) => {
const list = options.value.filter(item => item.type == key);
if (list.length > 0) {
model_data_source.value = list[0].data;
} else {
model_data_source.value = [];
const dialog_type = ref<string[]>([]);
const img_key = ref('');
// 打开弹出框
const url_value_dialog_visible = ref(false);
const changeDataSource = (key: string) => {
processing_data(key);
form.source_list = {};
if (!isEmpty(key)) {
url_value_dialog_visible.value = true;
}
}
// 弹出框选择的内容
const url_value_dialog_call_back = (item: any[]) => {
if (item.length > 0) {
form.source_list = item[0];
} else {
form.source_list = {};
}
};
// 弹出框关闭
const url_value_close = () => {
if (isEmpty(form.source_list)) {
form.data_source = '';
}
}
// 替换数据
const replace_data = () => {
if (!isEmpty(dialog_type.value)) {
url_value_dialog_visible.value = true;
}
}
//#endregion
</script>
<style lang="scss" scoped>
.card.mb-8 {
@ -172,4 +228,10 @@ const changeDataSource = (key: any) => {
padding: 2.4rem 3rem;
}
}
.replace-data {
bottom: 1rem;
left: 0.5rem;
border-radius: 2rem;
border: 1px solid #ccc;
}
</style>

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

@ -6,11 +6,8 @@
<template v-if="!isEmpty(item.new_url)">
<image-empty v-model="item.new_url[0]" :style="contentImgRadius"></image-empty>
</template>
<template v-else-if="!isEmpty(item.images)">
<el-image :src="item.images" fit="contain" class="img" :style="contentImgRadius"></el-image>
</template>
<template v-else>
<image-empty :style="contentImgRadius"></image-empty>
<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>
@ -29,11 +26,8 @@
<template v-if="!isEmpty(item.new_url)">
<image-empty v-model="item.new_url[0]" :style="contentImgRadius"></image-empty>
</template>
<template v-else-if="!isEmpty(item.images)">
<el-image :src="item.images" fit="contain" class="img" :style="contentImgRadius"></el-image>
</template>
<template v-else>
<image-empty :style="contentImgRadius"></image-empty>
<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">
{{ item.show_price_symbol }}{{ item.min_price }}
@ -50,11 +44,8 @@
<template v-if="!isEmpty(item.new_url)">
<image-empty v-model="item.new_url[0]" :style="contentImgRadius"></image-empty>
</template>
<template v-else-if="!isEmpty(item.images)">
<el-image :src="item.images" fit="contain" class="img" :style="contentImgRadius"></el-image>
</template>
<template v-else>
<image-empty :style="contentImgRadius"></image-empty>
<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>
@ -76,11 +67,8 @@
<template v-if="!isEmpty(item.new_url)">
<image-empty v-model="item.new_url[0]" :style="contentImgRadius"></image-empty>
</template>
<template v-else-if="!isEmpty(item.images)">
<el-image :src="item.images" fit="contain" class="img" :style="contentImgRadius"></el-image>
</template>
<template v-else>
<image-empty :style="contentImgRadius"></image-empty>
<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>

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

@ -35,7 +35,7 @@
<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'">
<div class="w h flex-col gap-20" :style="`${ padding_computer(item.data_style.chunk_padding) }`">
<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>
<p class="ma-0 w text-line-1" :style="trends_config(item.data_style, 'subtitle')">{{ item.data_content.subtitle || '' }}</p>
@ -261,6 +261,10 @@ const commodity_list = (list: any[], num: number) => {
return [];
}
}
// 不属于第9个，并且第9个的第一个和第二个
const spacing_processing = (index: number) => {
return form.value.style_actived !== 8 || (form.value.style_actived === 8 && [0, 1].includes(index))
}
// 公共样式
const style_container = computed(() => common_styles_computer(new_style.value.common_style));
</script>

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

@ -3,7 +3,7 @@
<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'">
<div :class="['flex-row jc-sb ptb-15 mlr-10 gap-20', { 'br-b-e': index != list.length - 1 }]">
<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}`">
<span class="identifying">￥</span><span :style="trends_config('price')">{{ item.min_price }}</span>
@ -13,22 +13,17 @@
<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} flex align-c jc-c`" :style="content_img_radius"></image-empty>
</template>
<template v-else-if="!isEmpty(item.images)">
<el-image :src="item.images" :class="`flex-img${product_style} flex align-c jc-c`" fit="contain" class="img"></el-image>
<image-empty v-model="item.new_url[0]" :class="`flex-img${product_style}`" :style="content_img_radius"></image-empty>
</template>
<template v-else>
<image-empty :class="`flex-img${product_style} flex align-c jc-c`" :style="content_img_radius"></image-empty>
<image-empty v-model="item.images" :class="`flex-img${product_style}`" :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')" class="flex-row gap-5">
<div class="one1 radius-sm size-9 pl-3 pr-3">{{ '满减活动' }}</div>
<div class="one2 radius-sm size-9 pl-3 pr-3">{{ '包邮' }}</div>
<div class="one3 radius-sm size-9 pl-3 pr-3">{{ '领劵' }}</div>
<div v-if="show_content && is_show('1') && !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">
@ -40,7 +35,7 @@
</div>
<div v-if="show_content && is_show('5')" class="size-10 flex">
<span class="original-price-left"></span
><span class="original-price flex-1 text-line-1"
><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')">
{{ item.show_original_price_unit }}
@ -51,8 +46,9 @@
<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', { 'br-r-e': is_show('3') && 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 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('4')" class="pl-5" :style="trends_config('score')">评分0</div> -->
</div>
</div>
<div v-if="form.is_shop_show">
@ -75,11 +71,17 @@
<div class="flex-row align-c nowrap">
<div v-if="is_show('2')" 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 class="identifying">{{ item.show_price_unit }}</span>
><span :style="trends_config('price')">{{ item.min_price }}</span>
<span v-if="is_show('6')" class="identifying">{{ item.show_price_unit }}</span>
</div>
<div v-if="show_content && is_show('5')" class="size-10 flex">
<span class="original-price-left"></span><span class="original-price flex-1 text-line-1">{{ item.show_original_price_symbol }}{{ item.min_original_price }}{{ item.show_original_price_unit }}</span>
<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')">
{{ item.show_original_price_unit }}
</template>
</span>
</div>
</div>
<div v-if="form.is_shop_show">
@ -125,6 +127,13 @@ const form = computed(() => props.value?.content || {});
const new_style = computed(() => props.value?.style || {});
// 目前显示假数据，日后通过分类或者选择的商品来显示真实数据
interface plugins_icon_data {
name: string;
bg_color: string;
br_color: string;
color: string;
url: string;
}
interface product_list {
title: string;
images: string;
@ -136,6 +145,7 @@ interface product_list {
show_price_symbol: string;
show_price_unit: string;
sales_count: string;
plugins_view_icon_data: plugins_icon_data[];
}
const default_list = {
title: '华为荣耀畅享平板换屏服务 屏幕换外屏',
@ -147,6 +157,7 @@ const default_list = {
sales_count: '1000',
images: '',
new_url: [],
plugins_view_icon_data: []
};
const list = ref<product_list[]>([]);
@ -201,7 +212,8 @@ const two_columns = computed(() => content_outer_spacing.value + 'px');
// 三列风格
const three_columns = computed(() => content_outer_spacing.value * 2 + 'px');
// 不换行显示
const multicolumn_columns = computed(() => new_style.value.content_outer_width + 'px');
const multicolumn_columns_width = computed(() => new_style.value.content_outer_width + 'px');
const multicolumn_columns_height = computed(() => new_style.value.content_outer_height + 'px');
// 最外层不同风格下的显示
const outer_class = computed(() => {
@ -315,6 +327,14 @@ const style_config = (typeface: string, size: number, color: string | object, ty
const button_gradient = () => {
return gradient_handle(new_style.value.shop_button_color, '90deg');
};
// icon标志显示样式
const icon_style = (item: { bg_color: string; color: string; br_color: string; }) => {
let style = `background: ${item.bg_color};color: ${item.color};`;
if (!isEmpty(item.br_color)) {
style += `border: 1px solid ${item.br_color};`
}
return style;
}
// 公共样式
const style_container = computed(() => {
if (props.isCommonStyle) {
@ -353,20 +373,6 @@ const style_container = computed(() => {
height: v-bind(button_size);
line-height: v-bind(button_size);
}
.one1 {
border: 1px solid #ea3323;
background: #ea3323;
color: #fff;
}
.one2 {
border: 1px solid #ea3323;
color: #ea3323;
}
.one3 {
border: 1px solid #ffc300;
color: #ffc300;
}
.two-columns {
width: calc((100% - v-bind(two_columns)) / 2);
}
@ -374,7 +380,9 @@ const style_container = computed(() => {
width: calc((100% - v-bind(three_columns)) / 3);
}
.multicolumn-columns {
min-width: v-bind(multicolumn_columns);
width: v-bind(multicolumn_columns_width);
min-width: v-bind(multicolumn_columns_width);
height: v-bind(multicolumn_columns_height);
}
.flex-img0 {
height: auto;
@ -399,6 +407,6 @@ const style_container = computed(() => {
}
.flex-img5 {
width: 100%;
height: 10.4rem;
min-height: 10.4rem;
}
</style>

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

@ -21,12 +21,12 @@
<el-form-item label="数量设置">
<color-picker v-model="form.shop_sold_number_color" default-color="#000000"></color-picker>
</el-form-item>
<el-form-item label="评分">
<!-- <el-form-item label="评分">
<text-size-type v-model:typeface="form.shop_score_typeface" v-model:size="form.shop_score_size"></text-size-type>
</el-form-item>
<el-form-item label="评分颜色">
<color-picker v-model="form.shop_score_color" default-color="#000000"></color-picker>
</el-form-item>
</el-form-item> -->
<el-form-item label="内容圆角">
<radius :value="form.shop_radius" @update:value="shop_radius_change"></radius>
</el-form-item>
@ -42,9 +42,14 @@
<el-form-item label="商品间距">
<slider v-model="form.content_outer_spacing" :max="100"></slider>
</el-form-item>
<el-form-item v-if="product_style == '5'" label="内容宽度">
<slider v-model="form.content_outer_width" :max="1000"></slider>
</el-form-item>
<template v-if="product_style == '5'">
<el-form-item label="内容宽度">
<slider v-model="form.content_outer_width" :max="1000"></slider>
</el-form-item>
<el-form-item label="内容高度">
<slider v-model="form.content_outer_height" :max="1000"></slider>
</el-form-item>
</template>
</card-container>
<card-container class="mb-8">
<div class="mb-12">购物车按钮</div>

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

@ -34,15 +34,17 @@
<el-form-item v-if="['0', '4'].includes(product_style)" label="内容间距">
<slider v-model="form.content_spacing" :max="100"></slider>
</el-form-item>
<el-form-item v-if="product_style != '5'" label="外间距">
<slider v-model="form.content_outer_down_spacing" :max="100"></slider>
</el-form-item>
<el-form-item v-if="!['0', '2'].includes(product_style)" label="左右间距">
<slider v-model="form.content_outer_about_spacing" :max="100"></slider>
</el-form-item>
<el-form-item v-if="product_style == '5'" label="内容宽度">
<slider v-model="form.content_outer_width" :max="1000"></slider>
<el-form-item label="商品间距">
<slider v-model="form.content_outer_spacing" :max="100"></slider>
</el-form-item>
<template v-if="product_style == '5'">
<el-form-item label="内容宽度">
<slider v-model="form.content_outer_width" :max="1000"></slider>
</el-form-item>
<el-form-item label="内容高度">
<slider v-model="form.content_outer_height" :max="1000"></slider>
</el-form-item>
</template>
</template>
<el-form-item label="商品名称">
<text-size-type v-model:typeface="form.shop_title_typeface" v-model:size="form.shop_title_size"></text-size-type>
@ -62,12 +64,12 @@
<el-form-item label="数量设置">
<color-picker v-model="form.shop_sold_number_color" default-color="#000000"></color-picker>
</el-form-item>
<el-form-item label="评分">
<!-- <el-form-item label="评分">
<text-size-type v-model:typeface="form.shop_score_typeface" v-model:size="form.shop_score_size"></text-size-type>
</el-form-item>
<el-form-item label="评分颜色">
<color-picker v-model="form.shop_score_color" default-color="#000000"></color-picker>
</el-form-item>
</el-form-item> -->
</card-container>
<card-container class="mb-8">
<div class="mb-12">购物车按钮</div>

2
src/layout/components/main/default/custom.ts
View File

@ -5,6 +5,7 @@ interface defaultSearch {
content: {
height: number;
data_source: string;
source_list: string[];
custom_list: string[];
};
style: {
@ -14,6 +15,7 @@ interface defaultSearch {
const defaultSearch: defaultSearch = {
content: {
height: 390,
source_list: [],
data_source:'',
custom_list: []
},

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

@ -23,6 +23,7 @@ interface DefaultProductList {
shop_radius: radiusStyle;
content_outer_spacing: number;
content_outer_width: number;
content_outer_height: number;
content_spacing: number;
shop_title_typeface: string;
shop_title_size: number;
@ -85,6 +86,7 @@ const defaultProductList: DefaultProductList = {
content_outer_spacing: 10, // 商品间距
content_spacing: 10,
content_outer_width: 104,
content_outer_height: 189,
shop_title_typeface: 'normal',
shop_title_size: 12,
shop_title_color: "#000",

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

@ -37,9 +37,9 @@ interface DefaultProductList {
shop_padding: paddingStyle;
shop_img_radius: radiusStyle;
shop_radius: radiusStyle;
content_outer_down_spacing: number;
content_outer_about_spacing: number;
content_outer_spacing: number;
content_outer_width: number;
content_outer_height: number;
content_spacing: number;
shop_title_typeface: string;
shop_title_size: number;
@ -106,10 +106,10 @@ const defaultProductList: DefaultProductList = {
radius_bottom_left: 0,
radius_bottom_right: 0,
},
content_outer_down_spacing: 10, // 内容间的上下间距
content_outer_about_spacing: 10, // 内容间的左右间距
content_outer_spacing: 10,
content_spacing: 10,
content_outer_width: 104,
content_outer_height: 189,
shop_title_typeface: 'normal',
shop_title_size: 12,
shop_title_color: "#000",