修改页面显示问题
于肖磊
parent
3a44989332
commit
42b0def0c2
|
|
@ -1,5 +1,5 @@
|
|||
<template>
|
||||
<el-image :src="image?.url || ''" class="flex align-c jc-c" @load="on_load">
|
||||
<el-image :src="image?.url || ''" class="flex align-c jc-c w h" @load="on_load">
|
||||
<template #error>
|
||||
<div class="image-slot" :style="errorStyle">
|
||||
<img :src="error_image" :style="errorImgStyle" />
|
||||
|
|
|
|||
|
|
@ -25,12 +25,12 @@
|
|||
>
|
||||
<swiper-slide v-for="(item, index) in form.carousel_list" :key="index">
|
||||
<div class="item-image flex jc-c align-c w h" :style="img_style">
|
||||
<image-empty v-model="item.carousel_img[0]"></image-empty>
|
||||
<image-empty v-model="item.carousel_img[0]" :style="img_style"></image-empty>
|
||||
</div>
|
||||
</swiper-slide>
|
||||
<swiper-slide v-for="(item, index1) in seat_list" :key="index1">
|
||||
<div class="item-image flex jc-c align-c w h" :style="img_style">
|
||||
<image-empty v-model="item.carousel_img[0]"></image-empty>
|
||||
<image-empty v-model="item.carousel_img[0]" :style="img_style"></image-empty>
|
||||
</div>
|
||||
</swiper-slide>
|
||||
<div v-if="new_style.is_show" :class="{'dot-center': new_style.indicator_location == 'center', 'dot-right': new_style.indicator_location == 'flex-end' }" class="dot flex abs">
|
||||
|
|
|
|||
|
|
@ -4,8 +4,8 @@
|
|||
<el-carousel-item v-for="(item, index) in nav_content_list" :key="index">
|
||||
<div ref="bannerImg" class="flex flex-wrap">
|
||||
<div v-for="(item1, index1) in item.split_list" :key="index1" class="item flex-col gap-10 align-c mt-12">
|
||||
<div v-if="['image_with_text', 'image'].includes(nav_style)" class="top-img flex align-c jc-c" :style="img_style">
|
||||
<image-empty v-model="item1.nav_image[0]"></image-empty>
|
||||
<div v-if="['image_with_text', 'image'].includes(nav_style)" class="top-img flex align-c jc-c">
|
||||
<image-empty v-model="item1.nav_image[0]" :style="img_style"></image-empty>
|
||||
</div>
|
||||
<p v-if="['image_with_text', 'text'].includes(nav_style)" class="size-12 ma-0" :style="text_style">{{ item1.title }}</p>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -3,8 +3,8 @@
|
|||
<template v-if="form.notice_style == 'inherit'">
|
||||
<div class="flex-row align-c news-box gap-y-8">
|
||||
<template v-if="form.title_type == 'img'">
|
||||
<div v-if="!isEmpty(form.img_src)" :style="img_style">
|
||||
<el-image :src="form.img_src[0]?.url || ''"></el-image>
|
||||
<div v-if="!isEmpty(form.img_src)">
|
||||
<el-image :src="form.img_src[0]?.url || ''" :style="img_style"></el-image>
|
||||
</div>
|
||||
</template>
|
||||
<template v-else>
|
||||
|
|
@ -20,8 +20,8 @@
|
|||
<div class="news-card flex-col gap-10">
|
||||
<div class="flex-row w jc-sb">
|
||||
<template v-if="form.title_type == 'img'">
|
||||
<div v-if="!isEmpty(form.img_src)" :style="img_style">
|
||||
<el-image :src="form.img_src[0]?.url || ''" ></el-image>
|
||||
<div v-if="!isEmpty(form.img_src)" >
|
||||
<el-image :src="form.img_src[0]?.url || ''" :style="img_style"></el-image>
|
||||
</div>
|
||||
</template>
|
||||
<template v-else>
|
||||
|
|
|
|||
|
|
@ -4,22 +4,31 @@ interface hot_word_list {
|
|||
color: string;
|
||||
}
|
||||
interface search_content {
|
||||
style_radio: string;
|
||||
style_type: string;
|
||||
logo: string;
|
||||
search_title: string;
|
||||
search_link: string;
|
||||
location: string;
|
||||
is_center: boolean;
|
||||
is_icon_show: boolean;
|
||||
icon_type: string;
|
||||
icon_src: string;
|
||||
icon_img_src: uploadList[];
|
||||
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 {
|
||||
search_border: string;
|
||||
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;
|
||||
text_location: string;
|
||||
text_style: string;
|
||||
text_color: string;
|
||||
text_size: number;
|
||||
search_border: string;
|
||||
search_border_radius: object;
|
||||
common_style: object;
|
||||
}
|
||||
|
|
@ -1,37 +1,39 @@
|
|||
<template>
|
||||
<div :style="style_container">
|
||||
<div :style="style" class="flex-row align-c">
|
||||
<template v-if="is_title()">
|
||||
<div class="mr-15" :style="{ 'color': new_style.text_color }"><span class="set-text-size">{{ form.search_title }}</span></div>
|
||||
</template>
|
||||
<template v-if="(form.style_radio == 'search' && form.style_type == 'location') || form.style_radio == 'location'">
|
||||
<div class="mr-15 flex-row align-c" :style="{ 'color': new_style.text_color }" >
|
||||
<template v-if="form.location == 'store'">
|
||||
<span class="set-text-size nowrap">官方...</span><el-icon class="iconfont icon-arrow-right" />
|
||||
<div class="search w re">
|
||||
<div class="box h oh flex align-c gap-10" :style="box_style">
|
||||
<template v-if="form.is_icon_show">
|
||||
<template v-if="form.icon_type == 'icon'">
|
||||
<span class="iconfont icon-search size-14" :style="`color: ${ new_style.icon_color }`"></span>
|
||||
</template>
|
||||
<template v-else>
|
||||
<div class="img-box">
|
||||
<image-empty v-model="form.icon_img_src[0]" class="img" error-img-style="width: 4rem;height: 2.5rem;" />
|
||||
</div>
|
||||
</template>
|
||||
</template>
|
||||
<template v-else>
|
||||
<el-icon class="iconfont icon-index-zxmd-dress mr-3" /><span class="set-text-size nowrap">莲湖...</span><el-icon class="iconfont icon-arrow-right" />
|
||||
<span v-if="form.is_tips_show" class="size-14" :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">
|
||||
<template v-if="form.search_type === 'text'">
|
||||
<div class="pl-16 pr-16 ptb-3 size-12">{{ form.search_tips }}</div>
|
||||
</template>
|
||||
<template v-if="form.search_type === 'img'">
|
||||
<image-empty v-model="form.search_botton_src[0]" class="img" :style="search_button_radius" error-img-style="width: 4rem;height: 2.8rem;" />
|
||||
</template>
|
||||
<template v-if="form.search_type === 'icon'">
|
||||
<div class="pl-16 pr-16 ptb-3 size-12">
|
||||
<icon></icon>
|
||||
</div>
|
||||
</template>
|
||||
</div>
|
||||
</template>
|
||||
<template v-else-if="form.style_radio == 'search' && form.style_type == 'logo' && form.logo.length > 0">
|
||||
<image-empty v-model="form.logo[0]" class="search-image mr-10"></image-empty>
|
||||
</template>
|
||||
<el-input :placeholder="get_placeholder()" :style="{ borderColor: 'red' }" :readonly="true">
|
||||
<template v-if="text_location == 'right'" #suffix>
|
||||
<el-icon class="iconfont icon-search" />
|
||||
</template>
|
||||
<template v-else #prefix>
|
||||
<el-icon class="iconfont icon-search" />
|
||||
</template>
|
||||
</el-input>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script setup lang="ts">
|
||||
import { common_styles_computer } from '@/utils';
|
||||
import { isEmpty } from 'lodash';
|
||||
|
||||
import { background_computer, common_styles_computer, gradient_computer, radius_computer } from '@/utils';
|
||||
const props = defineProps({
|
||||
value: {
|
||||
type: Object,
|
||||
|
|
@ -59,46 +61,45 @@ const style = computed(() => {
|
|||
return common_styles;
|
||||
});
|
||||
const style_container = computed(() => common_styles_computer(new_style.value.common_style));
|
||||
// 输入框颜色
|
||||
const search_border = computed(() => new_style.value.search_border);
|
||||
// 提示语颜色
|
||||
const placeholder_color = computed(() => new_style.value.tips_color || '#CCCCCC');
|
||||
// 定位位置
|
||||
const text_location = computed(() => new_style.value.text_location || 'left');
|
||||
// 字体大小
|
||||
const text_size = computed(() => new_style.value.text_size + 'px' || '15px');
|
||||
|
||||
// 是否显示标题
|
||||
const is_title = () => {
|
||||
return ((form.value.style_radio == 'search' && form.value.style_type == 'title') || form.value.style_radio == 'title') && !isEmpty(form.value.search_title);
|
||||
}
|
||||
// 提示信息修改
|
||||
const get_placeholder = () => {
|
||||
return form.value.tips || '请输入搜索内容';
|
||||
}
|
||||
const search_button_radius = computed(() => radius_computer(new_style.value.search_button_radius));
|
||||
// 搜索框设置
|
||||
const box_style = computed(() => {
|
||||
let style = `background: ${ new_style.value.search_border }; ${ radius_computer(new_style.value.search_border_radius) }`;
|
||||
if (form.value.is_center) {
|
||||
style += `justify-content: center;`;
|
||||
}
|
||||
return style;
|
||||
});
|
||||
const search_button = computed(() => {
|
||||
let style = search_button_radius.value;
|
||||
if (form.value.search_type != 'img') {
|
||||
style += gradient_computer(new_style.value) + background_computer(new_style.value) + `color: ${ new_style.value.button_inner_color };`;
|
||||
}
|
||||
return style;
|
||||
})
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
:deep(.el-input) {
|
||||
& .el-input__wrapper {
|
||||
border-radius: 16px !important;
|
||||
border: 0;
|
||||
box-shadow: none;
|
||||
background: v-bind(search_border);
|
||||
.search {
|
||||
height: 3.2rem;
|
||||
.box {
|
||||
padding: 0.6rem 1.5rem;
|
||||
}
|
||||
& .el-input__inner::placeholder,
|
||||
& .el-input__prefix-inner {
|
||||
text-align: v-bind(text_location);
|
||||
color: v-bind(placeholder_color);
|
||||
.img-box {
|
||||
height: 100%;
|
||||
min-width: 2rem;
|
||||
max-width: 6rem;
|
||||
}
|
||||
}
|
||||
.set-text-size {
|
||||
font-size: v-bind(text_size);
|
||||
}
|
||||
.search-image {
|
||||
width: 5rem;
|
||||
height: 3rem;
|
||||
}
|
||||
.nowrap {
|
||||
text-wrap: nowrap;
|
||||
.search-botton {
|
||||
height: 2.8rem;
|
||||
top: 0.2rem;
|
||||
right: 0.2rem;
|
||||
.img {
|
||||
height: 2.8rem;
|
||||
min-width: 3rem;
|
||||
max-width: 10rem;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -1,51 +1,58 @@
|
|||
<template>
|
||||
<div class="auxiliary-line common-content-height">
|
||||
<div class="auxiliary-line common-content-height bg-f">
|
||||
<el-form :model="form" label-width="70">
|
||||
<card-container class="mb-8">
|
||||
<card-container>
|
||||
<div class="mb-12">展示设置</div>
|
||||
<el-form-item label="选择风格">
|
||||
<el-radio-group v-model="form.style_radio" class="ml-4">
|
||||
<el-radio value="search">搜索</el-radio>
|
||||
<el-radio value="title">标题</el-radio>
|
||||
<el-radio value="location">定位</el-radio>
|
||||
</el-radio-group>
|
||||
<el-form-item label="是否居中">
|
||||
<el-switch v-model="form.is_center"/>
|
||||
</el-form-item>
|
||||
<el-form-item v-if="form.style_radio == 'search'" label="样式类型">
|
||||
<el-radio-group v-model="form.style_type" class="ml-4">
|
||||
<el-radio value="title">标题</el-radio>
|
||||
<el-radio value="location">定位</el-radio>
|
||||
<el-radio value="logo">logo</el-radio>
|
||||
</el-radio-group>
|
||||
<el-form-item label="图标样式" class="align-s">
|
||||
<div class="flex-col w h gap-10">
|
||||
<el-switch v-model="form.is_icon_show"/>
|
||||
<template v-if="form.is_icon_show">
|
||||
<el-radio-group v-model="form.icon_type" class="ml-4">
|
||||
<el-radio value="img">图片</el-radio>
|
||||
<el-radio value="icon">图标</el-radio>
|
||||
</el-radio-group>
|
||||
<template v-if="form.icon_type === 'img'">
|
||||
<upload v-model="form.icon_img_src" :limit="1" size="50"></upload>
|
||||
</template>
|
||||
<template v-else>
|
||||
<upload v-model="form.icon_src" :limit="1" size="50"></upload>
|
||||
</template>
|
||||
</template>
|
||||
</div>
|
||||
</el-form-item>
|
||||
<template v-if="(form.style_radio == 'search' && form.style_type == 'title') || form.style_radio == 'title'">
|
||||
<el-form-item label="标题">
|
||||
<el-input v-model="form.search_title" placeholder="请输入标题"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="链接">
|
||||
<url-value v-model="form.search_link"></url-value>
|
||||
</el-form-item>
|
||||
</template>
|
||||
<template v-if="(form.style_radio == 'search' && form.style_type == 'location') || form.style_radio == 'location'">
|
||||
<el-form-item label="定位方式">
|
||||
<el-radio-group v-model="form.location" class="ml-4">
|
||||
<el-radio value="store">门店</el-radio>
|
||||
<el-radio value="user_location">用户位置</el-radio>
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
</template>
|
||||
<template v-if="form.style_radio == 'search' && form.style_type == 'logo'">
|
||||
<el-form-item label="logo图">
|
||||
<upload v-model="form.logo" :limit="1" size="60"></upload>
|
||||
</el-form-item>
|
||||
</template>
|
||||
</card-container>
|
||||
<card-container class="mb-8">
|
||||
<div class="mb-12">搜索内容</div>
|
||||
<el-form-item label="提示文字">
|
||||
<el-form-item label="是否显示">
|
||||
<el-switch v-model="form.is_tips_show"/>
|
||||
</el-form-item>
|
||||
<el-form-item v-if="form.is_tips_show" label="提示文字">
|
||||
<el-input v-model="form.tips" placeholder="请输入提示文字"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="搜索按钮" class="align-s">
|
||||
<div class="flex-col w h gap-10">
|
||||
<el-switch v-model="form.is_search_show"/>
|
||||
<template v-if="form.is_search_show">
|
||||
<el-radio-group v-model="form.search_type" class="ml-4">
|
||||
<el-radio value="img">图片</el-radio>
|
||||
<el-radio value="icon">图标</el-radio>
|
||||
<el-radio value="text">文字</el-radio>
|
||||
</el-radio-group>
|
||||
<template v-if="form.search_type === 'img'">
|
||||
<upload v-model="form.search_botton_src" :limit="1" size="50"></upload>
|
||||
</template>
|
||||
<template v-else-if="form.search_type === 'icon'">
|
||||
<upload v-model="form.search_botton_icon" :limit="1" size="50"></upload>
|
||||
</template>
|
||||
<template v-else>
|
||||
<el-input v-model="form.search_tips" placeholder="请输入文字内容"></el-input>
|
||||
</template>
|
||||
</template>
|
||||
</div>
|
||||
</el-form-item>
|
||||
</card-container>
|
||||
<card-container class="mb-8">
|
||||
<div class="bg-f5 partition-line" />
|
||||
<card-container>
|
||||
<div class="mb-12">搜索热词</div>
|
||||
<drag :data="form.hot_word_list" @remove="remove" @on-sort="on_sort">
|
||||
<template #default="scoped">
|
||||
|
|
@ -65,13 +72,18 @@ interface Props {
|
|||
}
|
||||
const props = withDefaults(defineProps<Props>(), {
|
||||
value: () => ({
|
||||
style_radio: 'search',
|
||||
style_type: 'title',
|
||||
logo: '',
|
||||
search_title: '',
|
||||
search_link: '',
|
||||
location: 'store',
|
||||
tips: '',
|
||||
is_center: false,
|
||||
is_icon_show: true,
|
||||
icon_type: 'icon',
|
||||
icon_src: '',
|
||||
icon_img_src: [],
|
||||
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作为唯一标识导致渲染节点出现问题
|
||||
|
|
@ -108,4 +120,7 @@ const search_color_change = (color: string, old_hot_word: hot_word_list) => {
|
|||
}
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.partition-line {
|
||||
height: 0.8rem;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -2,44 +2,54 @@
|
|||
<div class="common-style-height">
|
||||
<el-form :model="form" label-width="70">
|
||||
<card-container class="mb-8">
|
||||
<div class="mb-12">搜索框</div>
|
||||
<el-form-item label="文字位置">
|
||||
<el-radio-group v-model="form.text_location" is-button>
|
||||
<el-tooltip content="左对齐" placement="top" effect="light">
|
||||
<el-radio-button value="left"><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="right"><icon name="iconfont icon-right"></icon></el-radio-button>
|
||||
</el-tooltip>
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
<el-form-item label="搜索框">
|
||||
<color-picker v-model="form.search_border"></color-picker>
|
||||
</el-form-item>
|
||||
<el-form-item label="提示文字">
|
||||
<color-picker v-model="form.tips_color"></color-picker>
|
||||
</el-form-item>
|
||||
<el-form-item label="热词文字">
|
||||
<color-picker v-model="form.hot_words_color"></color-picker>
|
||||
<div class="mb-12">左侧图标</div>
|
||||
<el-form-item label="图标">
|
||||
<color-picker v-model="form.icon_color" default-color="#CCCCCC"></color-picker>
|
||||
</el-form-item>
|
||||
</card-container>
|
||||
<card-container v-if="text_show()" class="mb-8">
|
||||
<div class="mb-12">文字设置</div>
|
||||
<el-form-item label="文字样式">
|
||||
<el-radio-group v-model="form.text_style" class="ml-4">
|
||||
<el-radio value="normal">正常</el-radio>
|
||||
<el-radio value="italic">倾斜</el-radio>
|
||||
<el-radio value="500">加粗</el-radio>
|
||||
</el-radio-group>
|
||||
<card-container class="mb-8">
|
||||
<div class="mb-12">搜索按钮</div>
|
||||
<el-form-item label="搜索按钮">
|
||||
<color-picker v-model="form.button_inner_color" default-color="#fff"></color-picker>
|
||||
</el-form-item>
|
||||
<el-form-item label="文字颜色">
|
||||
<color-picker v-model="form.text_color"></color-picker>
|
||||
<el-form-item v-if="content.search_type != 'img'" label="背景设置">
|
||||
<div class="flex-col gap-10 w">
|
||||
<div class="size-12">背景色</div>
|
||||
<mult-color-picker :value="form.color_list" :type="form.direction" @update:value="mult_color_picker_event"></mult-color-picker>
|
||||
<div class="flex-row jc-sb align-c">
|
||||
<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-tooltip>
|
||||
<el-tooltip content="平铺" placement="top" effect="light">
|
||||
<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-tooltip>
|
||||
</el-radio-group>
|
||||
</div>
|
||||
<upload v-model="form.background_img_url" :limit="1"></upload>
|
||||
</div>
|
||||
</el-form-item>
|
||||
<el-form-item label="文字大小">
|
||||
<slider v-model="form.text_size" :max="100"></slider>
|
||||
<el-form-item label="按钮圆角">
|
||||
<radius :value="form.search_button_radius" @update:value="button_radius_change"></radius>
|
||||
</el-form-item>
|
||||
</card-container>
|
||||
<card-container class="mb-8">
|
||||
<div class="mb-12">框体样式</div>
|
||||
<el-form-item label="提示文字">
|
||||
<color-picker v-model="form.tips_color" default-color="#CCCCCC"></color-picker>
|
||||
</el-form-item>
|
||||
<el-form-item label="热词文字">
|
||||
<color-picker v-model="form.hot_words_color" default-color="#000"></color-picker>
|
||||
</el-form-item>
|
||||
<el-form-item label="搜索框">
|
||||
<color-picker v-model="form.search_border" default-color="#fff"></color-picker>
|
||||
</el-form-item>
|
||||
<el-form-item label="框体圆角">
|
||||
<radius :value="form.search_border_radius" @update:value="border_radius_change"></radius>
|
||||
</el-form-item>
|
||||
</card-container>
|
||||
</el-form>
|
||||
|
|
@ -47,23 +57,12 @@
|
|||
</div>
|
||||
</template>
|
||||
<script setup lang="ts">
|
||||
import { isEmpty } from 'lodash';
|
||||
import { isEmpty, pick } from 'lodash';
|
||||
interface Props {
|
||||
value: search_styles;
|
||||
content: search_content;
|
||||
}
|
||||
const props = withDefaults(defineProps<Props>(), {
|
||||
value: () => ({
|
||||
search_border: '#F5F5F5',
|
||||
tips_color: '#CCCCCC',
|
||||
hot_words_color: '#000',
|
||||
text_location: 'left',
|
||||
text_style: 'normal',
|
||||
text_color: '#000',
|
||||
text_size: 15,
|
||||
common_style: {},
|
||||
}),
|
||||
});
|
||||
const props = defineProps<Props>();
|
||||
|
||||
const state = reactive({
|
||||
form: props.value,
|
||||
|
|
@ -79,14 +78,30 @@ const common_styles_update = (val: Object) => {
|
|||
form.value.common_style = val;
|
||||
};
|
||||
|
||||
// 是否显示文字设置
|
||||
const text_show = () => {
|
||||
const { content } = toRefs(state);
|
||||
if (!isEmpty(content.value)) {
|
||||
return (content.value.style_radio == 'search' && content.value.style_type == 'title') || content.value.style_radio == 'title' || (content.value.style_radio == 'search' && content.value.style_type == 'location') || content.value.style_radio == 'location';
|
||||
} else {
|
||||
return true;
|
||||
}
|
||||
// 按钮圆角
|
||||
const button_radius_change = (radius: any) => {
|
||||
form.value.search_button_radius = Object.assign(form.value.search_button_radius, pick(radius, [
|
||||
'radius',
|
||||
'radius_top_left',
|
||||
'radius_top_right',
|
||||
'radius_bottom_left',
|
||||
'radius_bottom_right',
|
||||
]));
|
||||
}
|
||||
// 搜索框圆角
|
||||
const border_radius_change = (radius: any) => {
|
||||
form.value.search_border_radius = Object.assign(form.value.search_border_radius, pick(radius, [
|
||||
'radius',
|
||||
'radius_top_left',
|
||||
'radius_top_right',
|
||||
'radius_bottom_left',
|
||||
'radius_bottom_right',
|
||||
]));
|
||||
}
|
||||
|
||||
const mult_color_picker_event = (arry: color_list[], type: number) => {
|
||||
form.value.color_list = arry;
|
||||
form.value.direction = type.toString();
|
||||
};
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
|
|
|
|||
|
|
@ -58,17 +58,17 @@
|
|||
</template>
|
||||
<template v-else>
|
||||
<el-form-item label="商品分类">
|
||||
<el-select v-model="row.product_type" multiple collapse-tags placeholder="请选择文章分类">
|
||||
<el-select v-model="row.goods_category_ids" multiple collapse-tags placeholder="请选择商品分类">
|
||||
<el-option v-for="item in base_list.product_category_list" :key="item.id" :label="item.name" :value="item.id" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="指定品牌">
|
||||
<el-select v-model="row.product_type" multiple collapse-tags placeholder="请选择文章分类">
|
||||
<el-select v-model="row.goods_brand_ids" multiple collapse-tags placeholder="请选择商品品牌">
|
||||
<el-option v-for="item in base_list.product_brand_list" :key="item.id" :label="item.name" :value="item.id" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="显示数量">
|
||||
<el-input v-model="row.number" placeholder="Please input" clearable />
|
||||
<el-input-number v-model="row.number" :min="1" :max="100" type="number" placeholder="请输入显示数量" value-on-clear="min" class="w number-show" controls-position="right"></el-input-number>
|
||||
</el-form-item>
|
||||
<el-form-item label="排序类型">
|
||||
<el-radio-group v-model="row.sort">
|
||||
|
|
@ -219,4 +219,9 @@ const product_add = (index: number) => {
|
|||
min-height: calc(100vh - 38.2rem);
|
||||
}
|
||||
}
|
||||
.number-show {
|
||||
:deep(.el-input__wrapper .el-input__inner) {
|
||||
text-align: left;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -7,35 +7,49 @@ interface hot_word_list {
|
|||
}
|
||||
interface defaultSearch {
|
||||
content: {
|
||||
style_radio: string;
|
||||
style_type: string;
|
||||
logo: uploadList[];
|
||||
search_title: string;
|
||||
search_link: object;
|
||||
location: string;
|
||||
is_center: boolean;
|
||||
is_icon_show: boolean;
|
||||
icon_type: string;
|
||||
icon_src: string;
|
||||
icon_img_src: uploadList[];
|
||||
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: {
|
||||
search_border: string;
|
||||
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;
|
||||
text_location: string;
|
||||
text_style: string;
|
||||
text_color: string;
|
||||
text_size: number;
|
||||
search_border: string;
|
||||
search_border_radius: object;
|
||||
common_style: object;
|
||||
};
|
||||
}
|
||||
const defaultSearch: defaultSearch = {
|
||||
content: {
|
||||
style_radio: 'search',
|
||||
style_type: 'title',
|
||||
logo: [],
|
||||
search_title: '',
|
||||
search_link: {},
|
||||
location: 'store',
|
||||
tips: '',
|
||||
is_center: false,
|
||||
is_icon_show: true,
|
||||
icon_type: 'icon',
|
||||
icon_src: '',
|
||||
icon_img_src: [],
|
||||
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作为唯一标识导致渲染节点出现问题
|
||||
|
|
@ -45,16 +59,31 @@ const defaultSearch: defaultSearch = {
|
|||
],
|
||||
},
|
||||
style: {
|
||||
search_border: '#F5F5F5',
|
||||
tips_color: '#CCCCCC',
|
||||
icon_color: '#ccc',
|
||||
button_inner_color: '#fff',
|
||||
color_list: [{ color: '#FF973D', color_percentage: '' }, { color: '#FF3131', color_percentage: '' }],
|
||||
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',
|
||||
text_location: 'left',
|
||||
text_style: 'normal',
|
||||
text_color: '#000',
|
||||
text_size: 15,
|
||||
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,
|
||||
color_list: [{ color: '#ffffff', color_percentage: '' }],
|
||||
padding_top: 9,
|
||||
padding_bottom: 9,
|
||||
padding_left: 15,
|
||||
|
|
|
|||
|
|
@ -2,7 +2,7 @@ import defaultCommon from './index';
|
|||
interface articleTabsList {
|
||||
id: string;
|
||||
title: string;
|
||||
img: string;
|
||||
img: uploadList[];
|
||||
desc: string;
|
||||
product_check: string;
|
||||
goods_category_ids: string[];
|
||||
|
|
@ -26,7 +26,7 @@ interface DefaultProductList {
|
|||
shop_button_size: string;
|
||||
};
|
||||
style: {
|
||||
tabs_checked: string[];
|
||||
tabs_checked: color_list[];
|
||||
tabs_direction: string;
|
||||
tabs_weight_checked: string,
|
||||
tabs_size_checked: number,
|
||||
|
|
@ -65,10 +65,10 @@ const defaultProductList: DefaultProductList = {
|
|||
tabs_top_up: false,
|
||||
product_style: '0',
|
||||
tabs_list: [
|
||||
{ id: '1', title: '热门推荐', img: '', desc: '简介', product_check: '0', goods_category_ids: [], goods_brand_ids: [], number: 4, is_price_solo: true, sort: '0', sort_rules: '0', product_list: [] },
|
||||
{ id: '2', title: '测试一', img: '', desc: '简介', product_check: '0', goods_category_ids: [], goods_brand_ids: [], number: 4, is_price_solo: true, sort: '0', sort_rules: '0', product_list: [] },
|
||||
{ id: '3', title: '测试二', img: '', desc: '简介', product_check: '0', goods_category_ids: [], goods_brand_ids: [], number: 4, is_price_solo: true, sort: '0', sort_rules: '0', product_list: [] },
|
||||
{ id: '4', title: '测试三', img: '', desc: '简介', product_check: '0', goods_category_ids: [], goods_brand_ids: [], number: 4, is_price_solo: true, sort: '0', sort_rules: '0', product_list: [] },
|
||||
{ id: '1', title: '热门推荐', img: [], desc: '简介', product_check: '0', goods_category_ids: [], goods_brand_ids: [], number: 4, is_price_solo: true, sort: '0', sort_rules: '0', product_list: [] },
|
||||
{ id: '2', title: '测试一', img: [], desc: '简介', product_check: '0', goods_category_ids: [], goods_brand_ids: [], number: 4, is_price_solo: true, sort: '0', sort_rules: '0', product_list: [] },
|
||||
{ id: '3', title: '测试二', img: [], desc: '简介', product_check: '0', goods_category_ids: [], goods_brand_ids: [], number: 4, is_price_solo: true, sort: '0', sort_rules: '0', product_list: [] },
|
||||
{ id: '4', title: '测试三', img: [], desc: '简介', product_check: '0', goods_category_ids: [], goods_brand_ids: [], number: 4, is_price_solo: true, sort: '0', sort_rules: '0', product_list: [] },
|
||||
],
|
||||
is_show: ['0', '1', '2', '3', '4', '5'],
|
||||
is_shop_show: true,
|
||||
|
|
@ -77,7 +77,7 @@ const defaultProductList: DefaultProductList = {
|
|||
shop_button_size: '1',
|
||||
},
|
||||
style: {
|
||||
tabs_checked: ['rgba(212,212,212,2)', 'rgba(255,210,210,1)'],
|
||||
tabs_checked: [{ color: 'rgba(212,212,212,2)', color_percentage: '' }, { color: 'rgba(255,210,210,1)', color_percentage: '' }],
|
||||
tabs_direction: '90deg',
|
||||
tabs_weight_checked: '500',
|
||||
tabs_size_checked: 14,
|
||||
|
|
|
|||
|
|
@ -15,7 +15,7 @@ service.interceptors.request.use(
|
|||
// 如果是本地则使用静态tonken如果是线上则使用cookie的token
|
||||
const cookie = get_cookie('admin_info');
|
||||
if (import.meta.env.VITE_APP_BASE_API == '/dev-api') {
|
||||
config.url = config.url + '?token=' + 'f714594929c39071f21856b885f91556';
|
||||
config.url = config.url + '?token=' + 'e1bd7d4c5e94c2680c359a982896e524';
|
||||
} else {
|
||||
if (cookie) {
|
||||
config.url = config.url + '&token=' + JSON.parse(cookie).token;
|
||||
|
|
|
|||
Loading…
Reference in New Issue