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-28 16:25:51 +08:00
parent 9661fab9ef 7f5df0e0d9
commit 4424ea1220
16 changed files with 237 additions and 80 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
src/assets/images/layout/main/main-top.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 3.9 KiB

After

Width:  |  Height:  |  Size: 3.3 KiB

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

@ -3,10 +3,10 @@
<div class="mb-12">显示内容</div>
<el-form-item label="是否显示">
<el-checkbox-group v-model="form.is_show">
<el-checkbox v-for="item in base_list.list_show_list" :key="item.value" :value="item.value">{{ item.name }}</el-checkbox>
<el-checkbox v-for="item in base_list.list_show_list.filter(item => item.type.includes(form.theme))" :key="item.value" :value="item.value">{{ item.name }}</el-checkbox>
</el-checkbox-group>
</el-form-item>
<el-form-item label="价格独行">
<el-form-item v-if="['0', '1', '2'].includes(form.theme)" label="价格独行">
<el-switch v-model="form.is_price_solo"></el-switch>
</el-form-item>
</card-container>
@ -17,7 +17,7 @@
</el-form-item>
<el-form-item label="按钮样式">
<div class="flex-col w gap-10">
<el-radio-group v-model="form.shop_type">
<el-radio-group v-model="form.shop_type" @change="change_shop_type">
<el-radio v-for="item in base_list.shopping_button_list" :key="item.value" :value="item.value">{{ item.name }}</el-radio>
</el-radio-group>
<template v-if="form.shop_type == 'text'">
@ -49,41 +49,30 @@ const state = reactive({
});
// 如果需要解构，确保使用toRefs
const { form } = toRefs(state);
const base_list = {
list_show_list: [
{ name: '商品名称', value: 'title' },
{ name: '商品标签', value: 'plugins_view_icon' },
{ name: '商品售价', value: 'price' },
{ name: '商品销量', value: 'sales_count' },
{ name: '商品名称', value: 'title', type:['0', '1', '2', '3', '4', '5', '6']},
{ name: '商品标签', value: 'plugins_view_icon', type:['0', '1', '2'] },
{ name: '商品售价', value: 'price', type:['0', '1', '2', '3', '4', '5', '6'] },
{ name: '商品销量', value: 'sales_count', type:['0', '1', '2'] },
// { name: '商品评分', value: '4' },
{ name: '商品原价', value: 'original_price' },
{ name: '售价单位', value: 'price_unit' },
{ name: '原价单位', value: 'original_price_unit' },
{ name: '商品原价', value: 'original_price', type:['0', '1', '2'] },
{ name: '售价单位', value: 'price_unit', type:['0', '1', '2', '3', '4', '5', '6'] },
{ name: '原价单位', value: 'original_price_unit', type:['0', '1', '2'] },
],
shopping_button_list: [
{ name: '文字', value: 'text' },
{ name: 'icon', value: 'icon' },
{ name: '图标', value: 'icon' },
],
shopping_cart_list: [
{ name: '进入商品详情页', value: '0' },
{ name: '商品加购', value: '1' }
]
};
const shop_type = computed(() => {
return (item: { value: string; }) => {
return item.value == form.value.shop_type;
};
});
const shopping_button_click = (item: { value: string; }) => {
if (['3','4','5'].includes(form.value.theme) && ['0', '1'].includes(item.value)) {
return;
} else {
form.value.shop_type = item.value;
}
};
const emit = defineEmits(['change_shop_type']);
const change_shop_type = () => {
emit('change_shop_type');
}
</script>
<style lang="scss" scoped>

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

@ -5,8 +5,10 @@
<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('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 v-if="is_show('price')" class="num nowrap" :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('price_unit')" class="identifying">{{ item.show_price_unit }}</span>
</div>
</div>
</template>

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

@ -50,7 +50,7 @@
</template>
</card-container>
<!-- 商品显示的配置信息 -->
<product-show-config :value="form"></product-show-config>
<product-show-config :value="form" @change_shop_type="change_shop_type"></product-show-config>
</div>
<url-value-dialog v-model:dialog-visible="url_value_dialog_visible" :type="['goods']" multiple @update:model-value="url_value_dialog_call_back"></url-value-dialog>
</el-form>
@ -165,8 +165,12 @@ const goods_list_sort = (new_list: any) => {
// 选择某些风格时， 切换到对应的按钮
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';
if (!is_revise.value) {
if (['3', '4', '5'].includes(val) && form.value.shop_type == 'text') {
form.value.shop_type = 'icon';
} else if (['0', '1', '2'].includes(val) && form.value.shop_type == 'icon') {
form.value.shop_type = 'text';
}
}
if (['0', '4'].includes(val)) {
if (data.value.shop_img_radius.radius == props.defaultConfig.img_radius_0 || (data.value.shop_img_radius.radius_bottom_left == props.defaultConfig.img_radius_1 && data.value.shop_img_radius.radius_bottom_right == props.defaultConfig.img_radius_1 && data.value.shop_img_radius.radius_top_left == props.defaultConfig.img_radius_1 && data.value.shop_img_radius.radius_top_right == props.defaultConfig.img_radius_1)) {
@ -186,6 +190,10 @@ const change_style = (val: any): void => {
}
}
};
const is_revise = ref(false);
const change_shop_type = () => {
is_revise.value = true;
}
</script>
<style lang="scss" scoped>
.content {

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

@ -57,7 +57,7 @@
</el-form-item>
</template>
<template v-else>
<el-form-item label="icon设置">
<el-form-item label="图标设置">
<color-text-size-group v-model:color="form.shop_icon_color" v-model:size="form.shop_icon_size" default-color="#fff" :type-list="['color', 'size']"></color-text-size-group>
</el-form-item>
</template>

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

@ -77,7 +77,7 @@
</div>
</card-container>
<!-- 商品显示的配置信息 -->
<product-show-config :value="form"></product-show-config>
<product-show-config :value="form" @change_shop_type="change_shop_type"></product-show-config>
<url-value-dialog v-model:dialog-visible="url_value_dialog_visible" :type="['goods']" multiple @update:model-value="url_value_dialog_call_back"></url-value-dialog>
</el-form>
</div>
@ -237,8 +237,12 @@ const tabs_theme_change = (val: string | number | boolean | undefined): void =>
// 选择某些风格时， 切换到对应的按钮
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';
if (!is_revise.value) {
if (['3', '4', '5'].includes(val) && form.value.shop_type == 'text') {
form.value.shop_type = 'icon';
} else if (['0', '1', '2'].includes(val) && form.value.shop_type == 'icon') {
form.value.shop_type = 'text';
}
}
if (['0', '4'].includes(val)) {
if (styles.value.shop_img_radius.radius == props.defaultConfig.img_radius_0 || (styles.value.shop_img_radius.radius_bottom_left == props.defaultConfig.img_radius_1 && styles.value.shop_img_radius.radius_bottom_right == props.defaultConfig.img_radius_1 && styles.value.shop_img_radius.radius_top_left == props.defaultConfig.img_radius_1 && styles.value.shop_img_radius.radius_top_right == props.defaultConfig.img_radius_1)) {
@ -258,6 +262,10 @@ const change_style = (val: any): void => {
}
}
};
const is_revise = ref(false);
const change_shop_type = () => {
is_revise.value = true;
}
</script>
<style lang="scss" scoped>
.content {

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

@ -69,7 +69,7 @@
</el-form-item>
</template>
<template v-else>
<el-form-item label="icon设置">
<el-form-item label="图标设置">
<color-text-size-group v-model:color="form.shop_icon_color" v-model:size="form.shop_icon_size" default-color="#fff" :type-list="['color', 'size']"></color-text-size-group>
</el-form-item>
</template>

35
src/components/page-settings/index.vue
View File

@ -1,16 +1,18 @@
<template>
<div class="model-top">
<div class="roll">
<div :class="['roll', { 'page-settings-border': showPage }]" :style="roll_style" @click="page_settings">
<div class="pt-15 pb-10 pl-25 pr-25 w">
<img class="img" src="@/assets/images/layout/main/main-top.png" />
<img class="img" :style="`Filter: brightness(${ new_style.function_buttons_type == 'black' ? 0 : 100 })`" :src="url_computer()" />
</div>
<div :class="['model-head', ' tc', { 'page-settings-border': showPage }]" @click="page_settings">
<div class="model-head tc">
{{ props.pageData.com_data?.content?.title || '新建页面' }}
</div>
</div>
</div>
</template>
<script setup lang="ts">
import { background_computer, gradient_computer } from '@/utils';
interface Props {
pageData: any;
showPage: boolean;
@ -23,13 +25,36 @@ const emits = defineEmits(['page_settings']);
const page_settings = () => {
emits('page_settings');
};
const form = computed(() => props.pageData.com_data.content);
const new_style = computed(() => props.pageData.com_data.style);
const position = computed(() => new_style.value.up_slide_display ? 'absolute' : 'relative');
const roll_style = computed(() => {
let style = ``;
if (new_style.value.background_type === 'color') {
style += gradient_computer({ color_list: new_style.value.background_color_list, direction: new_style.value.background_direction });
} else if (new_style.value.background_type === 'image') {
style += background_computer(new_style.value);
} else {
style += `background: transparent;`;
}
return style
});
const url_computer = () => {
const new_url = ref(new URL(`../../assets/images/layout/main/main-top.png`, import.meta.url).href).value;
return new_url;
};
</script>
<style lang="scss" scoped>
.model-top {
position: v-bind(position);
top: 0;
left: 50%;
z-index: 2;
transform: translateX(-50%);
.roll {
width: 39rem;
background: #fff;
margin: 0 auto;
// box-shadow: 0px 0 0px 0.2rem #fff;
// border-bottom: 0.1rem solid #f5f5f5;
}
.img {
@ -44,7 +69,7 @@ const page_settings = () => {
.page-settings-border {
// border: 0.2rem solid $cr-main;
position: relative;
box-shadow: 0px 0 0px 0.2rem $cr-main;
box-shadow: 0px 0 0px 0.2rem $cr-main !important;
z-index: 1;
box-sizing: border-box;
}

6
src/components/page-settings/page-content.vue
View File

@ -1,5 +1,5 @@
<template>
<div class="auxiliary-line">
<div class="w h">
<el-form :model="form" label-width="70">
<card-container class="common-content-height">
<el-form-item label="页面标题">
@ -43,8 +43,4 @@ const mult_color_picker_event = (arry: color_list[], type: number) => {
};
</script>
<style lang="scss" scoped>
.auxiliary-line {
width: 100%;
height: 100%;
}
</style>

22
src/components/page-settings/page-setting.vue Normal file
View File

@ -0,0 +1,22 @@
<template>
<div class="setting-content">
<template v-if="type == '1'">
<page-content :value="value.content"></page-content>
</template>
<template v-else-if="type == '2'">
<page-styles :value="value.style"></page-styles>
</template>
</div>
</template>
<script setup lang="ts">
const props = defineProps({
type: {
type: String,
default: '1',
},
value: {
type: Object,
default: () => ({}),
},
});
</script>

75
src/components/page-settings/page-styles.vue Normal file
View File

@ -0,0 +1,75 @@
<template>
<div class="styles">
<el-form :model="form" label-width="70" class="m-h">
<card-container class="mb-8">
<div class="mb-12">头部样式</div>
<el-form-item label="顶部背景">
<div class="flex-col gap-10">
<el-radio-group v-model="form.background_type">
<el-radio value="transparent">透明</el-radio>
<el-radio value="color">颜色</el-radio>
<el-radio value="image">图片</el-radio>
</el-radio-group>
<template v-if="form.background_type === 'color'">
<mult-color-picker :value="form.background_color_list" :type="form.background_direction" @update:value="mult_color_picker_event"></mult-color-picker>
</template>
<template v-else-if="form.background_type === 'image'">
<upload v-model="form.background_img_url" :limit="1"></upload>
</template>
</div>
</el-form-item>
<el-form-item label="功能按钮">
<el-radio-group v-model="form.function_buttons_type" class="ml-4">
<el-radio value="black">黑色</el-radio>
<el-radio value="white">白色</el-radio>
</el-radio-group>
</el-form-item>
<el-form-item label="沉浸样式">
<el-radio-group v-model="form.immersive_style" class="ml-4">
<el-radio :value="true">开启</el-radio>
<el-radio :value="false">关闭</el-radio>
</el-radio-group>
</el-form-item>
<el-form-item label="上滑展示">
<el-radio-group v-model="form.up_slide_display" class="ml-4">
<el-radio :value="true">保留</el-radio>
<el-radio :value="false">关闭</el-radio>
</el-radio-group>
</el-form-item>
<el-form-item label="标题名称">
<color-text-size-group v-model:color="form.background_title_color" v-model:typeface="form.background_title_typeface" v-model:size="form.background_title_size" default-color="#000000"></color-text-size-group>
</el-form-item>
</card-container>
</el-form>
<common-styles class="styles-height" :value="form.common_style" @update:value="common_styles_update" />
</div>
</template>
<script setup lang="ts">
const props = defineProps({
value: {
type: Object,
default: () => {
return {};
},
},
});
const emit = defineEmits(['update:value']);
// 默认值
let form = reactive(props.value);
const common_styles_update = (val: Object) => {
form.common_style = val;
};
const mult_color_picker_event = (arry: string[], type: number) => {
form.background_color_list = arry;
form.background_direction = type.toString();
};
</script>
<style lang="scss" scoped>
.styles {
width: 100%;
.styles-height {
min-height: calc(100vh - 16.8rem);
}
}
</style>

32
src/layout/components/main/default/header-nav.ts
View File

@ -1,19 +1,41 @@
import defaultCommon from './index';
interface DefaultFooterNav {
content: {
color_list: color_list[];
title: string;
direction: string;
background_img_style: number;
background_img_url: uploadList[];
};
style: {
background_type: string;
background_color_list: color_list[];
background_direction: string;
background_img_url: uploadList[];
background_title_color: string,
background_title_typeface: string,
background_title_size: number,
function_buttons_type: string,
immersive_style: boolean,
up_slide_display: boolean,
common_style: object;
}
}
const defaultFooterNav: DefaultFooterNav = {
content: {
color_list: [{ color: '#f5f5f5', color_percentage: '' }],
title: '',
direction: '180deg',
background_img_style: 2,
},
style: {
background_type: 'color',
background_color_list: [{ color: '#fff', color_percentage: '' }],
background_direction: '180deg',
background_img_url: [],
background_title_color: '#000',
background_title_typeface: '500',
background_title_size: 14,
function_buttons_type: 'black',
immersive_style: false,
up_slide_display: true,
common_style: defaultCommon,
},
};

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

@ -92,8 +92,8 @@ const defaultProductList: DefaultProductList = {
},
content_outer_spacing: 10, // 商品间距
content_spacing: 10,
content_outer_width: 104,
content_outer_height: 189,
content_outer_width: 140,
content_outer_height: 232,
shop_title_typeface: '500',
shop_title_size: 14,
shop_title_color: "#333333",

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

@ -116,8 +116,8 @@ const defaultProductList: DefaultProductList = {
},
content_outer_spacing: 10,
content_spacing: 10,
content_outer_width: 104,
content_outer_height: 189,
content_outer_width: 140,
content_outer_height: 232,
shop_title_typeface: '500',
shop_title_size: 14,
shop_title_color: "#333333",

48
src/layout/components/main/index.vue
View File

@ -17,21 +17,20 @@
</div>
<!-- 视图渲染 -->
<div class="main">
<div class="acticons">
<el-button size="large" class="" @click="page_settings">页面设置</el-button>
<el-button size="large" class="" @click="export_click">导出</el-button>
<el-button size="large" class="" @click="import_click">导入</el-button>
<el-button size="large" class="" @click="clear_click">清空</el-button>
</div>
<div class="model">
<div class="model-content">
<!-- 页面设置 -->
<page-settings :show-page="page_data.show_tabs" :page-data="page_data" @page_settings="page_settings"></page-settings>
<div class="acticons">
<el-button size="large" class="" @click="page_settings">页面设置</el-button>
<el-button size="large" class="" @click="export_click">导出</el-button>
<el-button size="large" class="" @click="import_click">导入</el-button>
<el-button size="large" class="" @click="clear_click">清空</el-button>
</div>
<!-- 拖拽区 -->
<div ref="scrollTop" class="model-drag">
<div class="seat" style="background: #fff"></div>
<!-- 页面设置 -->
<page-settings :show-page="page_data.show_tabs" :page-data="page_data" @page_settings="page_settings"></page-settings>
<div class="model-wall" :style="content_style">
<div :style="'padding-bottom:' + footer_nav_counter_store.padding_footer + 'px;'">
<div :style="`padding-top:${ top_padding }px; margin-top: ${ top_margin }px;padding-bottom:${ footer_nav_counter_store.padding_footer }px;`">
<VueDraggable v-model="diy_data" :animation="500" :touch-start-threshold="2" group="people" class="drag-area re" ghost-class="ghost" :on-sort="on_sort" :on-start="on_start" :on-end="on_end">
<div v-for="(item, index) in diy_data" :key="item.id" :class="model_class(item)" :style="model_style(item)" @click="on_choose(index, item.show_tabs)">
<div v-if="item.show_tabs" class="plug-in-right" chosenClass="close">
@ -187,11 +186,23 @@ watch(
page_settings();
}
);
const top_padding = ref(90);
const top_margin = ref(0);
watchEffect(() => {
if (props.header.com_data?.content) {
const content = props.header.com_data?.content;
const container_common_styles = gradient_computer(content) + background_computer(content);
content_style.value = container_common_styles;
if (page_data.value.com_data) {
const { immersive_style, up_slide_display } = page_data.value.com_data.style;
// 不开启沉浸式 和 上滑显示
if (immersive_style || !up_slide_display) {
top_padding.value = 2;
} else {
top_padding.value = 90;
}
// 开启沉浸式并且没有开通上滑显示
if (immersive_style && !up_slide_display) {
top_margin.value = -90;
} else {
top_margin.value = 0;
}
}
});
watch(
@ -260,7 +271,7 @@ const model_style = computed(() => {
// window.innerHeight(当前页面高度) - 80(顶部高度) - 844
const height = (window.innerHeight - 924) / 2;
let bottom = parseInt(float_bottom[item.id]) + height;
// 容器自身高度是60 755-60 = 695
// 容器自身高度是60 775-60 = 695
if (parseInt(float_bottom[item.id]) > 695) {
bottom = 695 + height;
}
@ -585,7 +596,7 @@ const float_bottom_change = (val: { bottom: string; location: string }, id: stri
position: absolute;
left: 50%;
margin-left: 26rem;
top: 4.7rem;
top: 0;
display: flex;
flex-direction: column;
gap: 2rem;
@ -605,7 +616,7 @@ const float_bottom_change = (val: { bottom: string; location: string }, id: stri
height: 100%;
.model-content {
position: relative;
height: 84.4rem;
height: 84.6rem;
.model-bottom {
position: absolute;
bottom: 0;
@ -623,7 +634,8 @@ const float_bottom_change = (val: { bottom: string; location: string }, id: stri
.model-drag {
overflow-y: auto;
max-height: 75.5rem;
padding-top: 0.2rem;
max-height: 84.4rem;
&::-webkit-scrollbar {
display: none;
}

12
src/layout/components/settings/index.vue
View File

@ -3,18 +3,16 @@
<div class="settings">
<card-container class="settings-title flex-row jc-sb align-c mb-8" padding="2.1rem 3.8rem">
<div class="title">{{ value.name }}</div>
<template v-if="value.key != 'page-settings'">
<el-radio-group v-model="radio" class="radio-group" size="large" is-button>
<el-radio-button class="radio-item" value="1">内容</el-radio-button>
<el-radio-button class="radio-item" value="2">样式</el-radio-button>
</el-radio-group>
</template>
<el-radio-group v-model="radio" class="radio-group" size="large" is-button>
<el-radio-button class="radio-item" value="1">内容</el-radio-button>
<el-radio-button class="radio-item" value="2">样式</el-radio-button>
</el-radio-group>
</card-container>
<div class="setting-content">
<!-- 基础组件 -->
<!-- 页面设置 -->
<template v-if="value.key == 'page-settings'">
<page-content :value="value.com_data.content"></page-content>
<page-setting :type="radio" :value="value.com_data"></page-setting>
</template>
<!-- 基础组件 -->
<template v-else-if="value.key == 'video'">