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-29 18:56:01 +08:00
parent 7754580933 7e34f9011c
commit 991406ce4d
13 changed files with 346 additions and 107 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
src/components/base/qrcode/index.vue
View File

@ -20,7 +20,6 @@
</div>
</template>
<script setup lang="ts">
import { defineProps, ref, onMounted } from 'vue';
import QRCode from 'qrcode';
const props = defineProps({

2
src/components/model-nav-group/index.ts
View File

@ -2,7 +2,7 @@ interface nav_group {
id: string;
nav_image: uploadList[];
title: string;
title_link: string,
title_link: object,
}
interface nav_group_content {

10
src/components/model-nav-group/model-nav-group-content.vue
View File

@ -73,25 +73,25 @@ const props = withDefaults(defineProps<Props>(),{
id: get_math(), // 唯一标识使用，避免使用index作为唯一标识导致渲染节点出现问题
nav_image: [],
title: '',
title_link: '',
title_link: {},
},
{
id: get_math(), // 唯一标识使用，避免使用index作为唯一标识导致渲染节点出现问题
nav_image: [],
title: '',
title_link: '',
title_link: {},
},
{
id: get_math(), // 唯一标识使用，避免使用index作为唯一标识导致渲染节点出现问题
nav_image: [],
title: '',
title_link: '',
title_link: {},
},
{
id: get_math(), // 唯一标识使用，避免使用index作为唯一标识导致渲染节点出现问题
nav_image: [],
title: '',
title_link: '',
title_link: {},
}
]
})
@ -106,7 +106,7 @@ const add = () => {
id: get_math(),
nav_image: [],
title: '',
title_link: '',
title_link: {},
});
}
const remove = (index: number) => {

34
src/components/model-search/index.ts
View File

@ -1,34 +0,0 @@
interface hot_word_list {
id: string;
value: string;
color: string;
}
interface search_content {
is_center: boolean;
is_icon_show: boolean;
icon_src: string;
icon_img_src: uploadList[];
icon_class: string;
search_botton_src: uploadList[];
search_botton_icon: string;
is_tips_show: boolean;
tips: string;
is_search_show: boolean;
search_type: string;
search_tips: string;
hot_word_list: hot_word_list[];
}
interface search_styles {
icon_color: string;
button_inner_color: string;
color_list: color_list[];
direction: string;
background_img_style: string;
background_img_url: uploadList[];
search_button_radius: object;
tips_color: string;
hot_words_color: string;
search_border: string;
search_border_radius: object;
common_style: object;
}

37
src/components/model-search/model-search-content.vue
View File

@ -54,31 +54,11 @@
</template>
<script setup lang="ts">
import { get_math } from '@/utils';
interface Props {
value: search_content;
}
const props = withDefaults(defineProps<Props>(), {
value: () => ({
is_center: false,
is_icon_show: true,
icon_src: '',
icon_img_src: [],
icon_class: '',
search_botton_src: [],
search_botton_icon: '',
is_tips_show: true,
tips: '请输入搜索内容',
is_search_show: false,
search_type: 'text',
search_tips: '搜索',
hot_word_list: [
{
id: get_math(), // 唯一标识使用，避免使用index作为唯一标识导致渲染节点出现问题
value: '',
color: '#000000',
},
],
}),
const props = defineProps({
value: {
type: Object,
default: () => ({}),
},
});
const state = reactive({
@ -97,12 +77,17 @@ const add = () => {
const remove = (index: number) => {
form.value.hot_word_list.splice(index, 1);
};
interface hot_word_list {
id: string;
value: string;
color: string;
}
// 拖拽更新之后，更新数据
const on_sort = (new_list: hot_word_list[]) => {
form.value.hot_word_list = new_list;
};
const search_color_change = (color: string, old_hot_word: hot_word_list) => {
const index = form.value.hot_word_list.findIndex((item) => item.id == old_hot_word.id);
const index = form.value.hot_word_list.findIndex((item: { id: string; }) => item.id == old_hot_word.id);
(<arrayIndex>form.value.hot_word_list)[index].color = color;
};
</script>

15
src/components/model-search/model-search-styles.vue
View File

@ -61,11 +61,16 @@
</template>
<script setup lang="ts">
import { isEmpty, pick } from 'lodash';
interface Props {
value: search_styles;
content: search_content;
}
const props = defineProps<Props>();
const props = defineProps({
value: {
type: Object,
default: () => ({}),
},
content: {
type: Object,
default: () => ({}),
},
});
const state = reactive({
form: props.value,

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

@ -49,6 +49,7 @@
</el-form-item>
</template>
</card-container>
<div class="divider-line"></div>
<!-- 商品显示的配置信息 -->
<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>

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

@ -77,6 +77,7 @@
<el-button class="mtb-20 w" @click="tabs_add">+添加</el-button>
</div>
</card-container>
<div class="divider-line"></div>
<!-- 商品显示的配置信息 -->
<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>

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

@ -1,12 +1,18 @@
<template>
<div class="model-top">
<div :class="['roll', { 'page-settings-border': showPage }]" :style="roll_style" @click="page_settings">
<div class="pt-15 pb-10 pl-25 pr-25 w">
<div class="pb-12 pl-6 pr-13 w">
<img class="img" :style="`Filter: brightness(${ new_style.function_buttons_type == 'black' ? 0 : 100 })`" src="@/assets/images/layout/main/main-top.png" />
</div>
<div class="model-head tc re">
<div class="flex align-c jc-c w h">
{{ props.pageData.com_data?.content?.title || '新建页面' }}
<div class="flex align-c jc-c h gap-16" :style="[{ 'justify-content': form?.indicator_location || 'center', 'padding-right': form?.indicator_location == 'flex-end' ? '90px' : '0'}, text_style]">
<template v-if="form.theme == '2' || form.theme == '3'">
<div class="logo-outer-style"><image-empty v-model="form.logo[0]" class="logo-style" error-img-style="width:2rem;height:2rem;"></image-empty></div>
</template>
<div v-if="form.theme == '1' || form.theme == '2'">{{ form?.title || '新建页面' }}</div>
<template v-if="form.theme == '3'">
<model-search :value="pageData.com_data"></model-search>
</template>
</div>
<div class="model-head-icon">
<img class="function-icon" :src="url_computer(new_style.function_buttons_type == 'black' ? 'function-icon-black' : 'function-icon-white')" />
@ -46,6 +52,7 @@ const url_computer = (name: string) => {
const new_url = ref(new URL(`../../assets/images/layout/main/${name}.png`, import.meta.url).href).value;
return new_url;
};
const text_style = computed(() => `font-weight:${ new_style.value.background_title_typeface }; font-size: ${ new_style.value.background_title_size }px; color: ${ new_style.value.background_title_color };`);
</script>
<style lang="scss" scoped>
.model-top {
@ -56,6 +63,7 @@ const url_computer = (name: string) => {
transform: translateX(-50%);
.roll {
width: 39rem;
padding: 1.5rem 1.2rem 0.9rem 1.2rem;
margin: 0 auto;
cursor: pointer;
}
@ -64,12 +72,13 @@ const url_computer = (name: string) => {
}
}
.model-head {
height: 4.3rem;
height: 3.2rem;
overflow: hidden;
}
.model-head-icon {
position: absolute;
right: 1.2rem;
bottom: 0.6rem;
right: 0;
bottom: 0;
height: 3.2rem;
.function-icon {
height: 3.2rem;
@ -82,4 +91,16 @@ const url_computer = (name: string) => {
z-index: 1;
box-sizing: border-box;
}
.logo-outer-style {
height: 3.2rem;
.logo-style {
max-height: 3.2rem;
max-width: 100%;
:deep(.image-slot) {
height: 3.2rem;
width: 3.2rem;
}
}
}
</style>

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

@ -5,17 +5,51 @@
<el-form-item label="选择风格">
<theme-select v-model="form.theme" :data="base_list.themeList" @update:model-value="themeChange"></theme-select>
</el-form-item>
<template v-if="form.theme == '1' || form.theme == '2'">
<el-form-item label="页面标题">
<el-input v-model="form.title" placeholder="请输入标题名称"></el-input>
<template v-if="form.theme == '1' || form.theme == '2' || form.theme == '3'">
<el-form-item v-if="form.theme == '2' || form.theme == '3'" label="logo">
<upload v-model="form.logo" :limit="1"></upload>
</el-form-item>
<el-form-item v-if="form.theme == '3'" label="链接地址">
<url-value v-model="form.link"></url-value>
</el-form-item>
<template v-if="form.theme == '1' || form.theme == '2'">
<el-form-item label="页面标题">
<el-input v-model="form.title" placeholder="请输入标题名称"></el-input>
</el-form-item>
<el-form-item label="链接地址">
<url-value v-model="form.link"></url-value>
</el-form-item>
<el-form-item label="展示位置">
<el-radio-group v-model="form.indicator_location" is-button>
<el-tooltip content="左对齐" placement="top" effect="light">
<el-radio-button value="flex-start">
<icon name="iconfont icon-left"></icon>
</el-radio-button>
</el-tooltip>
<el-tooltip content="居中" placement="top" effect="light">
<el-radio-button value="center">
<icon name="iconfont icon-center"></icon>
</el-radio-button>
</el-tooltip>
<el-tooltip content="右对齐" placement="top" effect="light">
<el-radio-button value="flex-end">
<icon name="iconfont icon-right"></icon>
</el-radio-button>
</el-tooltip>
</el-radio-group>
</el-form-item>
</template>
</template>
</card-container>
<div class="bg-f5 divider-line" />
<template v-if="form.theme == '3'">
<model-search-content :value="form"></model-search-content>
</template>
<div class="bg-f5 divider-line" />
<card-container>
<el-form-item label="底部导航">
<el-radio-group v-model="form.bottom_navigation_show" class="ml-4">
<el-radio v-for="item in base_list.bottom_navigation" :key="item.value" :value="item.value">{{ item.name }}</el-radio>
<el-radio v-for="item in base_list.bottom_navigation" :key="item.value" :value="item.value">{{item.name }}</el-radio>
</el-radio-group>
</el-form-item>
</card-container>
@ -44,8 +78,10 @@ const base_list = reactive({
{ name: '隐藏', value: '0' },
],
});
const themeChange = (value: string) => {
console.log(value);
const emit = defineEmits(['update:change-theme']);
const themeChange = (val: string) => {
emit('update:change-theme', val);
};
</script>
<style lang="scss" scoped></style>

138
src/components/page-settings/page-setting.vue
View File

@ -1,10 +1,10 @@
<template>
<div class="setting-content">
<template v-if="type == '1'">
<page-content :value="value.content"></page-content>
<page-content :value="value.content" @update:change-theme="change_theme"></page-content>
</template>
<template v-else-if="type == '2'">
<page-styles :value="value.style"></page-styles>
<page-styles :value="value.style" :content="value.content"></page-styles>
</template>
</div>
</template>
@ -19,4 +19,138 @@ const props = defineProps({
default: () => ({}),
},
});
const default_config = {
style: {
theme_1: {
header_background_type: 'color_image',
header_background_color_list: [{ color: '#fff', color_percentage: undefined }],
header_background_direction: '180deg',
header_background_img_style: 2,
header_background_img_url: [],
header_background_title_color: '#000',
header_background_title_typeface: '500',
header_background_title_size: 14,
function_buttons_type: 'black',
immersive_style: false,
up_slide_display: true,
icon_color: '#ccc',
button_inner_color: '#fff',
color_list: [{ color: '#FF973D', color_percentage: undefined }, { color: '#FF3131', color_percentage: undefined }],
direction: '90deg',
background_img_style: '',
background_img_url: [],
search_button_radius: {
radius: 16,
radius_top_left: 16,
radius_top_right: 16,
radius_bottom_left: 16,
radius_bottom_right: 16,
},
tips_color: '#ccc',
hot_words_color: '#000',
search_border: '#fff',
search_border_radius: {
radius: 16,
radius_top_left: 16,
radius_top_right: 16,
radius_bottom_left: 16,
radius_bottom_right: 16,
},
},
theme_2: {
header_background_type: 'color_image',
header_background_color_list: [{ color: '#fff', color_percentage: undefined }],
header_background_direction: '180deg',
header_background_img_style: 2,
header_background_img_url: [],
header_background_title_color: '#000',
header_background_title_typeface: '500',
header_background_title_size: 14,
function_buttons_type: 'black',
immersive_style: false,
up_slide_display: true,
icon_color: '#ccc',
button_inner_color: '#fff',
color_list: [{ color: '#FF973D', color_percentage: undefined }, { color: '#FF3131', color_percentage: undefined }],
direction: '90deg',
background_img_style: '',
background_img_url: [],
search_button_radius: {
radius: 16,
radius_top_left: 16,
radius_top_right: 16,
radius_bottom_left: 16,
radius_bottom_right: 16,
},
tips_color: '#ccc',
hot_words_color: '#000',
search_border: '#fff',
search_border_radius: {
radius: 16,
radius_top_left: 16,
radius_top_right: 16,
radius_bottom_left: 16,
radius_bottom_right: 16,
},
},
theme_3: {
background_type: 'color_image',
background_color_list: [{ color: '#fff', color_percentage: undefined }],
background_direction: '180deg',
background_img_style: 2,
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,
},
theme_4: {
background_type: 'color_image',
background_color_list: [{ color: '#fff', color_percentage: undefined }],
background_direction: '180deg',
background_img_style: 2,
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,
},
theme_5: {
background_type: 'color_image',
background_color_list: [{ color: '#fff', color_percentage: undefined }],
background_direction: '180deg',
background_img_style: 2,
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,
},
theme_6: {
background_type: 'color_image',
background_color_list: [{ color: '#fff', color_percentage: undefined }],
background_direction: '180deg',
background_img_style: 2,
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,
},
},
};
const form = ref(props.value);
const change_theme = (val: string) => {
if (val) {
form.value.style = Object.assign({}, form.value.style, (<arrayIndex>default_config.style)[`theme_${Number(val)}`]);
}
};
</script>

22
src/components/page-settings/page-styles.vue
View File

@ -1,6 +1,6 @@
<template>
<div class="w h">
<el-form :model="form" label-width="70" class="m-h">
<el-form :model="form" label-width="70">
<card-container>
<div class="mb-12">头部样式</div>
<el-form-item label="顶部背景">
@ -15,13 +15,19 @@
<div class="size-12">背景图</div>
<el-radio-group v-model="form.background_img_style" is-button>
<el-tooltip content="单张" placement="top" effect="light">
<el-radio-button value="0"><icon name="single-sheet"></icon></el-radio-button>
<el-radio-button value="0">
<icon name="single-sheet"></icon>
</el-radio-button>
</el-tooltip>
<el-tooltip content="平铺" placement="top" effect="light">
<el-radio-button value="1"><icon name="tile"></icon></el-radio-button>
<el-radio-button value="1">
<icon name="tile"></icon>
</el-radio-button>
</el-tooltip>
<el-tooltip content="铺满" placement="top" effect="light">
<el-radio-button value="2"><icon name="spread-over"></icon></el-radio-button>
<el-radio-button value="2">
<icon name="spread-over"></icon>
</el-radio-button>
</el-tooltip>
</el-radio-group>
</div>
@ -53,6 +59,10 @@
</card-container>
</el-form>
<div class="bg-f5 divider-line" />
<template v-if="content.theme == '3'">
<model-search-styles :value="form" :content="props.content"></model-search-styles>
</template>
<div class="bg-f5 divider-line" />
<common-styles :value="form.common_style" :is-margin="false" :is-shadow="false" :is-radius="false" @update:value="common_styles_update" />
</div>
</template>
@ -64,6 +74,10 @@ const props = defineProps({
return {};
},
},
content: {
type: Object,
default: () => { },
},
});
const emit = defineEmits(['update:value']);
// 默认值

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

@ -1,44 +1,121 @@
import { get_math } from '@/utils';
import defaultCommon from './index';
interface hot_word_list {
id: string;
value: string;
color: string;
}
interface DefaultFooterNav {
content: {
theme: string;
logo: uploadList[];
title: string;
link: object;
indicator_location: string;
bottom_navigation_show: string;
is_center: boolean;
is_icon_show: boolean;
icon_src: string;
icon_img_src: uploadList[];
icon_class: string;
search_botton_src: uploadList[];
search_botton_icon: string;
is_tips_show: boolean;
tips: string;
is_search_show: boolean;
search_type: string;
search_tips: string;
hot_word_list: hot_word_list[];
};
style: {
background_type: string;
background_color_list: color_list[];
background_direction: string;
background_img_style: number;
background_img_url: uploadList[];
background_title_color: string,
background_title_typeface: string,
background_title_size: number,
header_background_type: string;
header_background_color_list: color_list[];
header_background_direction: string;
header_background_img_style: number;
header_background_img_url: uploadList[];
header_background_title_color: string,
header_background_title_typeface: string,
header_background_title_size: number,
function_buttons_type: string,
immersive_style: boolean,
up_slide_display: boolean,
icon_color: string;
button_inner_color: string;
color_list: color_list[];
direction: string;
background_img_style: string;
background_img_url: uploadList[];
search_button_radius: object;
tips_color: string;
hot_words_color: string;
search_border: string;
search_border_radius: object;
common_style: object;
}
}
const defaultFooterNav: DefaultFooterNav = {
content: {
theme: '1',
logo: [],
title: '',
link: {},
indicator_location: 'center',
is_center: false,
is_icon_show: true,
icon_src: '',
icon_img_src: [],
icon_class: '',
search_botton_src: [],
search_botton_icon: '',
is_tips_show: true,
tips: '请输入搜索内容',
is_search_show: false,
search_type: 'text',
search_tips: '搜索',
hot_word_list: [
{
id: get_math(), // 唯一标识使用，避免使用index作为唯一标识导致渲染节点出现问题
value: '',
color: '#000000',
}
],
bottom_navigation_show: '1'
},
style: {
background_type: 'color_image',
background_color_list: [{ color: '#fff', color_percentage: undefined }],
background_direction: '180deg',
background_img_style: 2,
background_img_url: [],
background_title_color: '#000',
background_title_typeface: '500',
background_title_size: 14,
header_background_type: 'color_image',
header_background_color_list: [{ color: '#fff', color_percentage: undefined }],
header_background_direction: '180deg',
header_background_img_style: 2,
header_background_img_url: [],
header_background_title_color: '#000',
header_background_title_typeface: '500',
header_background_title_size: 14,
function_buttons_type: 'black',
immersive_style: false,
up_slide_display: true,
icon_color: '#ccc',
button_inner_color: '#fff',
color_list: [{ color: '#FF973D', color_percentage: undefined }, { color: '#FF3131', color_percentage: undefined }],
direction: '90deg',
background_img_style: '',
background_img_url: [],
search_button_radius: {
radius: 16,
radius_top_left: 16,
radius_top_right: 16,
radius_bottom_left: 16,
radius_bottom_right: 16,
},
tips_color: '#ccc',
hot_words_color: '#000',
search_border: '#fff',
search_border_radius: {
radius: 16,
radius_top_left: 16,
radius_top_right: 16,
radius_bottom_left: 16,
radius_bottom_right: 16,
},
common_style: defaultCommon,
},
};