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

搜索更新

v1.0.0
于肖磊 2024-09-05 10:20:04 +08:00
parent 26990d83d4
commit 648a9fa41c
5 changed files with 44 additions and 37 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

19
src/components/model-search/index.vue
View File

@ -4,9 +4,9 @@
<div class="search w re"> <div class="search w re">
<div class="box h oh flex align-c gap-10 bg-f" :style="box_style"> <div class="box h oh flex align-c gap-10 bg-f" :style="box_style">
<template v-if="form.is_icon_show"> <template v-if="form.is_icon_show">
<template v-if="form.icon_img_src.length > 0"> <template v-if="form.icon_img.length > 0">
<div class="img-box"> <div class="img-box">
<image-empty v-model="form.icon_img_src[0]" class="img" error-img-style="width: 4rem;height: 2.5rem;" /> <image-empty v-model="form.icon_img[0]" class="img" error-img-style="width: 4rem;height: 2.5rem;" />
</div> </div>
</template> </template>
<template v-else> <template v-else>
@ -19,12 +19,12 @@
<template v-if="form.search_type === 'text'"> <template v-if="form.search_type === 'text'">
<div :class="['ptb-3 size-12', isPageSettings ? 'plr-12' : 'plr-16']">{{ form.search_tips }}</div> <div :class="['ptb-3 size-12', isPageSettings ? 'plr-12' : 'plr-16']">{{ form.search_tips }}</div>
</template> </template>
<template v-else-if="form.search_botton_src.length > 0"> <template v-else-if="!isEmpty(form.search_botton_img) && form.search_botton_img.length > 0">
<image-empty v-model="form.search_botton_src[0]" class="img" :style="search_button_radius" error-img-style="width: 4rem;height: 2.8rem;" /> <image-empty v-model="form.search_botton_img[0]" class="img" :style="search_button_radius" error-img-style="width: 4rem;height: 2.8rem;" />
</template> </template>
<template v-else> <template v-else>
<div :class="['ptb-3 size-12', isPageSettings ? 'plr-12' : 'plr-16']"> <div :class="['ptb-3 size-12', isPageSettings ? 'plr-12' : 'plr-16']">
<el-icon :class="`iconfont ${ 'icon-' + form.search_botton_icon } size-14`" /> <el-icon :class="`iconfont ${ !isEmpty(form.search_botton_icon) ? 'icon-' + form.search_botton_icon : '' } size-14`" />
</div> </div>
</template> </template>
</div> </div>
@ -79,8 +79,15 @@ const box_style = computed(() => {
}); });
const search_button = computed(() => { const search_button = computed(() => {
let style = search_button_radius.value; let style = search_button_radius.value;
const { search_botton_color_list, search_botton_direction, search_botton_background_img_style, search_botton_background_img } = new_style.value;
if (form.value.search_type != 'img') { if (form.value.search_type != 'img') {
style += gradient_computer(new_style.value) + background_computer(new_style.value) + `color: ${ new_style.value.button_inner_color };`; const data = {
color_list: search_botton_color_list,
direction: search_botton_direction,
background_img: search_botton_background_img,
background_img_style: search_botton_background_img_style,
}
style += gradient_computer(data) + background_computer(data) + `color: ${ new_style.value.button_inner_color };`;
} }
return style; return style;
}) })

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

@ -9,7 +9,7 @@
</el-row> </el-row>
<el-row v-if="form.is_icon_show" class="mt-10 w"> <el-row v-if="form.is_icon_show" class="mt-10 w">
<el-col :span="24"> <el-col :span="24">
<upload v-model="form.icon_img_src" v-model:icon-value="form.icon_class" is-icon :limit="1" size="50"></upload> <upload v-model="form.icon_img" v-model:icon-value="form.icon_class" is-icon :limit="1" size="50"></upload>
</el-col> </el-col>
</el-row> </el-row>
</el-form-item> </el-form-item>
@ -37,7 +37,7 @@
<el-radio value="text">文字</el-radio> <el-radio value="text">文字</el-radio>
</el-radio-group> </el-radio-group>
<template v-if="form.search_type === 'img-icon'"> <template v-if="form.search_type === 'img-icon'">
<upload v-model="form.search_botton_src" v-model:icon-value="form.search_botton_icon" is-icon :limit="1" size="50" class="mt-10"></upload> <upload v-model="form.search_botton_img" v-model:icon-value="form.search_botton_icon" is-icon :limit="1" size="50" class="mt-10"></upload>
</template> </template>
<template v-else> <template v-else>
<el-input v-model="form.search_tips" placeholder="请输入文字内容" class="mt-10"></el-input> <el-input v-model="form.search_tips" placeholder="请输入文字内容" class="mt-10"></el-input>

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

@ -19,10 +19,10 @@
<el-form-item v-if="content.search_type != 'img'" label="背景设置"> <el-form-item v-if="content.search_type != 'img'" label="背景设置">
<div class="flex-col gap-10 w"> <div class="flex-col gap-10 w">
<div class="size-12">背景色</div> <div class="size-12">背景色</div>
<mult-color-picker :value="form.color_list" :type="form.direction" @update:value="mult_color_picker_event"></mult-color-picker> <mult-color-picker :value="form.search_botton_color_list" :type="form.search_botton_direction" @update:value="mult_color_picker_event"></mult-color-picker>
<div class="flex-row jc-sb align-c"> <div class="flex-row jc-sb align-c">
<div class="size-12">背景图</div> <div class="size-12">背景图</div>
<el-radio-group v-model="form.background_img_style" is-button> <el-radio-group v-model="form.search_botton_background_img_style" is-button>
<el-tooltip content="单张" placement="top" effect="light"> <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>
@ -34,7 +34,7 @@
</el-tooltip> </el-tooltip>
</el-radio-group> </el-radio-group>
</div> </div>
<upload v-model="form.background_img" :limit="1"></upload> <upload v-model="form.search_botton_background_img" :limit="1"></upload>
</div> </div>
</el-form-item> </el-form-item>
<el-form-item label="按钮圆角"> <el-form-item label="按钮圆角">
@ -118,8 +118,8 @@ const border_radius_change = (radius: any) => {
} }
const mult_color_picker_event = (arry: color_list[], type: number) => { const mult_color_picker_event = (arry: color_list[], type: number) => {
form.value.color_list = arry; form.value.search_botton_color_list = arry;
form.value.direction = type.toString(); form.value.search_botton_direction = type.toString();
}; };
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>

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

@ -18,9 +18,9 @@ interface DefaultFooterNav {
is_center: boolean; is_center: boolean;
is_icon_show: boolean; is_icon_show: boolean;
icon_src: string; icon_src: string;
icon_img_src: uploadList[]; icon_img: uploadList[];
icon_class: string; icon_class: string;
search_botton_src: uploadList[]; search_botton_img: uploadList[];
search_botton_icon: string; search_botton_icon: string;
is_tips_show: boolean; is_tips_show: boolean;
tips: string; tips: string;
@ -43,10 +43,10 @@ interface DefaultFooterNav {
up_slide_display: boolean, up_slide_display: boolean,
icon_color: string; icon_color: string;
button_inner_color: string; button_inner_color: string;
color_list: color_list[]; search_botton_color_list: color_list[];
direction: string; search_botton_direction: string;
background_img_style: string; search_botton_background_img_style: string;
background_img: uploadList[]; search_botton_background_img: uploadList[];
search_button_radius: object; search_button_radius: object;
tips_color: string; tips_color: string;
hot_words_color: string; hot_words_color: string;
@ -67,9 +67,9 @@ const defaultFooterNav: DefaultFooterNav = {
is_center: false, is_center: false,
is_icon_show: true, is_icon_show: true,
icon_src: '', icon_src: '',
icon_img_src: [], icon_img: [],
icon_class: '', icon_class: '',
search_botton_src: [], search_botton_img: [],
search_botton_icon: '', search_botton_icon: '',
is_tips_show: true, is_tips_show: true,
tips: '请输入搜索内容', tips: '请输入搜索内容',
@ -99,10 +99,10 @@ const defaultFooterNav: DefaultFooterNav = {
up_slide_display: true, up_slide_display: true,
icon_color: '#ccc', icon_color: '#ccc',
button_inner_color: '#fff', button_inner_color: '#fff',
color_list: [{ color: '#FF973D', color_percentage: undefined }, { color: '#FF3131', color_percentage: undefined }], search_botton_color_list: [{ color: '#FF973D', color_percentage: undefined }, { color: '#FF3131', color_percentage: undefined }],
direction: '90deg', search_botton_direction: '90deg',
background_img_style: '', search_botton_background_img_style: '',
background_img: [], search_botton_background_img: [],
search_button_radius: { search_button_radius: {
radius: 16, radius: 16,
radius_top_left: 16, radius_top_left: 16,

24
src/views/layout/components/main/default/search.ts
View File

@ -10,9 +10,9 @@ interface defaultSearch {
is_center: boolean; is_center: boolean;
is_icon_show: boolean; is_icon_show: boolean;
icon_src: string; icon_src: string;
icon_img_src: uploadList[]; icon_img: uploadList[];
icon_class: string; icon_class: string;
search_botton_src: uploadList[]; search_botton_img: uploadList[];
search_botton_icon: string; search_botton_icon: string;
is_tips_show: boolean; is_tips_show: boolean;
tips: string; tips: string;
@ -24,10 +24,10 @@ interface defaultSearch {
style: { style: {
icon_color: string; icon_color: string;
button_inner_color: string; button_inner_color: string;
color_list: color_list[]; search_botton_color_list: color_list[];
direction: string; search_botton_direction: string;
background_img_style: string; search_botton_background_img_style: string;
background_img: uploadList[]; search_botton_background_img: uploadList[];
search_button_radius: object; search_button_radius: object;
tips_color: string; tips_color: string;
hot_words_color: string; hot_words_color: string;
@ -41,9 +41,9 @@ const defaultSearch: defaultSearch = {
is_center: false, is_center: false,
is_icon_show: true, is_icon_show: true,
icon_src: '', icon_src: '',
icon_img_src: [], icon_img: [],
icon_class: '', icon_class: '',
search_botton_src: [], search_botton_img: [],
search_botton_icon: '', search_botton_icon: '',
is_tips_show: true, is_tips_show: true,
tips: '请输入搜索内容', tips: '请输入搜索内容',
@ -61,10 +61,10 @@ const defaultSearch: defaultSearch = {
style: { style: {
icon_color: '#ccc', icon_color: '#ccc',
button_inner_color: '#fff', button_inner_color: '#fff',
color_list: [{ color: '#FF973D', color_percentage: undefined }, { color: '#FF3131', color_percentage: undefined }], search_botton_color_list: [{ color: '#FF973D', color_percentage: undefined }, { color: '#FF3131', color_percentage: undefined }],
direction: '90deg', search_botton_direction: '90deg',
background_img_style: '', search_botton_background_img_style: '',
background_img: [], search_botton_background_img: [],
search_button_radius: { search_button_radius: {
radius: 16, radius: 16,
radius_top_left: 16, radius_top_left: 16,