页面设置和搜索true修改

v1.0.0
于肖磊 2024-09-05 11:34:08 +08:00
parent 22510d82c1
commit 0c107a1c45
9 changed files with 54 additions and 54 deletions

View File

@ -3,7 +3,7 @@
<div :style="style" class="flex-row align-c">
<div class="search w re">
<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 == '1'">
<template v-if="form.icon_img.length > 0">
<div class="img-box">
<image-empty v-model="form.icon_img[0]" class="img" error-img-style="width: 4rem;height: 2.5rem;" />
@ -13,17 +13,17 @@
<el-icon :class="`iconfont ${ !isEmpty(form.icon_class) ? 'icon-' + form.icon_class : 'icon-search' } size-14`" :style="`color:${new_style.icon_color};`" />
</template>
</template>
<span v-if="form.is_tips_show" :class="[isPageSettings ? 'size-12 text-line-1' : 'size-14 text-line-1']" :style="`color: ${ new_style.tips_color }`">{{ form.tips }}</span>
<span v-if="form.is_tips_show == '1'" :class="[props.isPageSettings ? 'size-12 text-line-1' : 'size-14 text-line-1']" :style="`color: ${ new_style.tips_color }`">{{ form.tips }}</span>
</div>
<div v-if="form.is_search_show" class="abs search-botton h flex align-c jc-c" :style="search_button">
<div v-if="form.is_search_show == '1'" class="abs search-botton h flex align-c jc-c" :style="search_button">
<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', props.isPageSettings ? 'plr-12' : 'plr-16']">{{ form.search_tips }}</div>
</template>
<template v-else-if="!isEmpty(form.search_botton_img) && form.search_botton_img.length > 0">
<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 v-else>
<div :class="['ptb-3 size-12', isPageSettings ? 'plr-12' : 'plr-16']">
<div :class="['ptb-3 size-12', props.isPageSettings ? 'plr-12' : 'plr-16']">
<el-icon :class="`iconfont ${ !isEmpty(form.search_botton_icon) ? 'icon-' + form.search_botton_icon : '' } size-14`" />
</div>
</template>
@ -72,7 +72,7 @@ const search_button_radius = computed(() => radius_computer(new_style.value.sear
//
const box_style = computed(() => {
let style = `border: 1px solid ${ new_style.value.search_border }; ${ radius_computer(new_style.value.search_border_radius) };`;
if (form.value.is_center) {
if (form.value.is_center == '1') {
style += `justify-content: center;`;
}
return style;

View File

@ -5,9 +5,9 @@
<div class="mb-12">展示设置</div>
<el-form-item label="图标样式" class="align-s">
<el-row class="w">
<el-col :span="24"><el-switch v-model="form.is_icon_show" width="40"></el-switch></el-col>
<el-col :span="24"><el-switch v-model="form.is_icon_show" active-value="1" inactive-value="0"></el-switch></el-col>
</el-row>
<el-row v-if="form.is_icon_show" class="mt-10 w">
<el-row v-if="form.is_icon_show == '1'" class="mt-10 w">
<el-col :span="24">
<upload v-model="form.icon_img" v-model:icon-value="form.icon_class" is-icon :limit="1" size="50"></upload>
</el-col>
@ -15,16 +15,16 @@
</el-form-item>
<el-form-item label="提示文字">
<el-row class="w">
<el-col :span="24"><el-switch v-model="form.is_tips_show"></el-switch></el-col>
<el-col :span="24"><el-switch v-model="form.is_tips_show" active-value="1" inactive-value="0"></el-switch></el-col>
</el-row>
<el-row v-if="form.is_tips_show" class="mt-10 w">
<el-row v-if="form.is_tips_show == '1'" class="mt-10 w">
<el-col :span="24">
<el-input v-model="form.tips" placeholder="请输入提示文字"></el-input>
</el-col>
</el-row>
</el-form-item>
<el-form-item v-if="form.is_tips_show || form.is_icon_show" label="是否居中">
<el-switch v-model="form.is_center"></el-switch>
<el-form-item v-if="form.is_tips_show == '1' || form.is_icon_show == '1'" label="是否居中">
<el-switch v-model="form.is_center" active-value="1" inactive-value="0"></el-switch>
</el-form-item>
<el-form-item label="搜索按钮" class="align-s">
<el-row class="w">
@ -32,15 +32,15 @@
</el-row>
<el-row v-if="form.is_search_show" class="mt-10 w">
<el-col :span="24">
<el-radio-group v-model="form.search_type">
<el-radio-group v-model="form.search_type" class="mb-10">
<el-radio value="img-icon">图片/图标</el-radio>
<el-radio value="text">文字</el-radio>
</el-radio-group>
<template v-if="form.search_type === 'img-icon'">
<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>
<upload v-model="form.search_botton_img" v-model:icon-value="form.search_botton_icon" is-icon :limit="1" size="50"></upload>
</template>
<template v-else>
<el-input v-model="form.search_tips" placeholder="请输入文字内容" class="mt-10"></el-input>
<el-input v-model="form.search_tips" placeholder="请输入文字内容"></el-input>
</template>
</el-col>
</el-row>

View File

@ -17,7 +17,7 @@
</template>
</div>
<div v-else-if="['4', '5'].includes(form.theme)" class="flex align-c h gap-10">
<div class="flex-row gap-2"><icon name="position" size="12" color="0"></icon><span class="size-14 cr-3 text-line-1">{{ form.positioning_name }}</span><icon v-if="form.is_arrows_show" name="arrow-right" size="12" color="0"></icon></div>
<div class="flex-row gap-2"><icon name="position" size="12" color="0"></icon><span class="size-14 cr-3 text-line-1">{{ form.positioning_name }}</span><icon v-if="form.is_arrows_show == '1'" name="arrow-right" size="12" color="0"></icon></div>
<template v-if="['5'].includes(form.theme)">
<div class="flex-1" style="padding-right:95px">
<model-search :value="pageData.com_data" :is-page-settings="true"></model-search>
@ -47,7 +47,7 @@ const 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 position = computed(() => new_style.value.up_slide_display == '1' ? 'absolute' : 'relative');
const roll_style = computed(() => {
let style = ``;
const { header_background_img, header_background_img_style, header_background_color_list, header_background_direction, header_background_type } = new_style.value;

View File

@ -46,8 +46,8 @@
</el-form-item>
<el-form-item label="箭头按钮">
<el-radio-group v-model="form.is_arrows_show">
<el-radio :value="true">显示</el-radio>
<el-radio :value="false">隐藏</el-radio>
<el-radio value="1">显示</el-radio>
<el-radio value="0">隐藏</el-radio>
</el-radio-group>
</el-form-item>
</template>

View File

@ -28,14 +28,14 @@ const default_data = {
header_background_title_typeface: '500',
header_background_title_size: 16,
function_buttons_type: 'black',
immersive_style: false,
up_slide_display: true,
immersive_style: '0',
up_slide_display: '1',
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: [],
search_botton_color_list: [{ color: '#FF973D', color_percentage: undefined }, { color: '#FF3131', color_percentage: undefined }],
search_botton_direction: '90deg',
search_botton_background_img_style: '',
search_botton_background_img: [],
search_button_radius: {
radius: 16,
radius_top_left: 16,

View File

@ -43,14 +43,14 @@
</el-form-item>
<el-form-item v-if="form.header_background_type == 'transparent'" label="沉浸样式">
<el-radio-group v-model="form.immersive_style">
<el-radio :value="true">开启</el-radio>
<el-radio :value="false">关闭</el-radio>
<el-radio value="1">开启</el-radio>
<el-radio value="0">关闭</el-radio>
</el-radio-group>
</el-form-item>
<el-form-item label="上滑展示">
<el-radio-group v-model="form.up_slide_display">
<el-radio :value="true">保留</el-radio>
<el-radio :value="false">关闭</el-radio>
<el-radio value="1">保留</el-radio>
<el-radio value="0">关闭</el-radio>
</el-radio-group>
</el-form-item>
<el-form-item v-if="['1', '2'].includes(search_content.theme)" label="标题名称">

View File

@ -14,17 +14,17 @@ interface DefaultFooterNav {
indicator_location: string;
bottom_navigation_show: string;
positioning_name: string;
is_arrows_show: boolean;
is_center: boolean;
is_icon_show: boolean;
is_arrows_show: string;
is_center: string;
is_icon_show: string;
icon_src: string;
icon_img: uploadList[];
icon_class: string;
search_botton_img: uploadList[];
search_botton_icon: string;
is_tips_show: boolean;
is_tips_show: string;
tips: string;
is_search_show: boolean;
is_search_show: string;
search_type: string;
search_tips: string;
hot_word_list: hot_word_list[];
@ -39,8 +39,8 @@ interface DefaultFooterNav {
header_background_title_typeface: string,
header_background_title_size: number,
function_buttons_type: string,
immersive_style: boolean,
up_slide_display: boolean,
immersive_style: string,
up_slide_display: string,
icon_color: string;
button_inner_color: string;
search_botton_color_list: color_list[];
@ -63,17 +63,17 @@ const defaultFooterNav: DefaultFooterNav = {
link: {},
indicator_location: 'center',
positioning_name: '默认定位名称',
is_arrows_show: true,
is_center: false,
is_icon_show: true,
is_arrows_show: '1',
is_center: '0',
is_icon_show: '1',
icon_src: '',
icon_img: [],
icon_class: '',
search_botton_img: [],
search_botton_icon: '',
is_tips_show: true,
is_tips_show: '1',
tips: '请输入搜索内容',
is_search_show: false,
is_search_show: '0',
search_type: 'text',
search_tips: '搜索',
hot_word_list: [
@ -95,8 +95,8 @@ const defaultFooterNav: DefaultFooterNav = {
header_background_title_typeface: '500',
header_background_title_size: 16,
function_buttons_type: 'black',
immersive_style: false,
up_slide_display: true,
immersive_style: '0',
up_slide_display: '1',
icon_color: '#ccc',
button_inner_color: '#fff',
search_botton_color_list: [{ color: '#FF973D', color_percentage: undefined }, { color: '#FF3131', color_percentage: undefined }],
@ -112,7 +112,7 @@ const defaultFooterNav: DefaultFooterNav = {
},
tips_color: '#ccc',
hot_words_color: '#000',
search_border: '#fff',
search_border: '#E4E4E4',
search_border_radius: {
radius: 16,
radius_top_left: 16,

View File

@ -7,16 +7,16 @@ interface hot_word_list {
}
interface defaultSearch {
content: {
is_center: boolean;
is_icon_show: boolean;
is_center: string;
is_icon_show: string;
icon_src: string;
icon_img: uploadList[];
icon_class: string;
search_botton_img: uploadList[];
search_botton_icon: string;
is_tips_show: boolean;
is_tips_show: string;
tips: string;
is_search_show: boolean;
is_search_show: string;
search_type: string;
search_tips: string;
hot_word_list: hot_word_list[];
@ -38,16 +38,16 @@ interface defaultSearch {
}
const defaultSearch: defaultSearch = {
content: {
is_center: false,
is_icon_show: true,
is_center: '0',
is_icon_show: '1',
icon_src: '',
icon_img: [],
icon_class: '',
search_botton_img: [],
search_botton_icon: '',
is_tips_show: true,
is_tips_show: '1',
tips: '请输入搜索内容',
is_search_show: false,
is_search_show: '0',
search_type: 'text',
search_tips: '搜索',
hot_word_list: [

View File

@ -223,13 +223,13 @@ watchEffect(() => {
const { immersive_style, up_slide_display } = new_style;
//
if (immersive_style || !up_slide_display) {
if (immersive_style == '1' || up_slide_display != '1') {
top_padding.value = 0;
} else {
top_padding.value = 90;
}
//
if (immersive_style && !up_slide_display) {
if (immersive_style == '1' && up_slide_display != '1') {
top_margin.value = -90;
} else {
top_margin.value = 0;