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

新增问答组件

v1.3.0
于肖磊 2025-03-17 11:34:54 +08:00
parent 5e174d8af8
commit eeccb4b7a7
5 changed files with 915 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

368
src/components/model-ask/index.vue Normal file
View File

@ -0,0 +1,368 @@
<template>
<div class="oh" :style="style_container">
<div :style="style_img_container">
<div :class="outer_class" :style="onter_style">
<template v-if="!['3'].includes(theme)">
<div v-for="(item, index) in list" :key="index" class="re oh" :class="layout_type" :style="layout_style">
<div :class="['oh w h', ['0'].includes(theme) ? 'flex-row' : 'flex-col' ]" :style="layout_img_style">
<template v-if="!isEmpty(item)">
<div class="oh re" :class="`flex-img${theme}`">
<template v-if="!isEmpty(item.new_cover)">
<image-empty v-model="item.new_cover[0]" :class="`flex-img${theme}`" :style="content_img_radius"></image-empty>
</template>
<template v-else>
<image-empty v-model="item.logo" :class="`flex-img${theme}`" :style="content_img_radius"></image-empty>
</template>
</div>
</template>
<div class="flex-1 flex-row jc-sb gap-10" :style="content_style">
<div class="flex-1 flex-col jc-sb gap-10">
<div class="text-line-2" :style="trends_config('title')">
<template v-for="(item1, index1) in new_url_list(item.icon_list)" :key="index1">
<img :src="item1.icon" class="title-img" :style="title_img_style(item.icon_list, index1) + 'vertical-align: middle;'" />
</template>{{ item.name }}
</div>
<span v-if="form.shop_desc == '1'" :class="form.shop_desc_row == '2' ? 'text-line-2' : 'text-line-1'" :style="trends_config('desc', 'desc')">{{ item.describe }}</span>
</div>
<div v-if="theme == '0'" class="flex-row align-c">
<img-or-icon-or-text :value="props.value" type="right" />
</div>
</div>
</div>
</div>
</template>
<template v-else>
<swiper :key="carouselKey" class="w flex" direction="horizontal" :loop="true" :autoplay="autoplay" :slides-per-view="form.carousel_col" :slides-per-group="slides_per_group" :allow-touch-move="false" :space-between="content_outer_spacing" :pause-on-mouse-enter="true" :modules="modules">
<swiper-slide v-for="(item, index) in list" :key="index">
<div :class="layout_type" :style="layout_style">
<div :class="['oh w h', ['0', '4'].includes(theme) ? 'flex-row' : 'flex-col' ]" :style="layout_img_style">
<template v-if="!isEmpty(item)">
<div class="oh re" :class="`flex-img${theme}`">
<template v-if="!isEmpty(item.new_cover)">
<image-empty v-model="item.new_cover[0]" :class="`flex-img${theme}`" :style="content_img_radius"></image-empty>
</template>
<template v-else>
<image-empty v-model="item.logo" :class="`flex-img${theme}`" :style="content_img_radius"></image-empty>
</template>
</div>
</template>
<div class="flex-col jc-sb gap-10" :style="content_style">
<div class="text-line-2" :style="trends_config('title')">
<template v-for="(item1, index1) in new_url_list(item.icon_list)" :key="index1">
<img :src="item1.icon" class="title-img" :style="title_img_style(item.icon_list, index1) + 'vertical-align: middle;'" />
</template>{{ item.name }}
</div>
<span v-if="form.shop_desc == '1'" :class="form.shop_desc_row == '2' ? 'text-line-2' : 'text-line-1'" :style="trends_config('desc', 'desc')">{{ item.describe }}</span>
</div>
</div>
</div>
</swiper-slide>
</swiper>
</template>
</div>
</div>
</div>
</template>
<script setup lang="ts">
import { common_styles_computer, common_img_computer, get_math, gradient_handle, margin_computer, border_computer, box_shadow_computer, radius_computer, background_computer, padding_computer } from '@/utils';
import { old_margin } from "@/utils/common";
import { isEmpty, cloneDeep } from 'lodash';
import ShopAPI from '@/api/shop';
import { Swiper, SwiperSlide } from 'swiper/vue';
import { Autoplay } from 'swiper/modules';
const modules = [Autoplay];
/**
* @description: 文章列表（渲染）
* @param value{Object} 样式数据
* @param isCommonStyle{Object} 是否为通用样式
*/
const props = defineProps({
value: {
type: Object,
default: () => ({}),
},
isCommonStyle: {
type: Boolean,
default: true,
},
});
const form = computed(() => props.value?.content || {});
const new_style = computed(() => props.value?.style || {});
// 选择的风格
const theme = computed(() => form.value.theme);
// 最外层不同风格下的显示
const outer_class = computed(() => {
const flex = ['0', '2' ].includes(theme.value) ? 'flex-col ' : 'flex-row ';
const wrap = theme.value == '3' ? '' : 'flex-wrap ';
return flex + wrap + 'oh';
});
const onter_style = computed(() => {
const radius = `gap: ${new_style.value.content_outer_spacing + 'px'};`;
return `${radius}`;
});
// 公共样式
const style_container = computed(() => common_styles_computer(new_style.value.common_style));
const style_img_container = computed(() => common_img_computer(new_style.value.common_style));
//#region 列表数据
type url = {
icon: string;
}
type data_list = {
name: string;
icon_list: url[],
logo: string;
new_cover: string[];
describe: string;
}
const default_list = {
name: '测试商户标题',
describe: '测试商户描述',
icon_list: [{ icon: 'http://shopxo.com/static/diy/images/layout/siderbar/data-magic.png'}, { icon: ''}],
logo: '',
new_cover: [],
};
const list = ref<data_list[]>([]);
const new_url_list = computed(() => {
return (icon_list: url[]) => {
return icon_list.filter(item1 => !isEmpty(item1.icon));
}
});
// 标题图片样式
const title_img_style = computed(() => {
return (icon_list: url[], index: number) => {
const { shop_title_img_width = 0, shop_title_img_height = 0, shop_title_img_radius, shop_title_img_inner_spacing, shop_title_img_outer_spacing} = new_style.value;
let style = `width: ${shop_title_img_width || 0 }px;height: ${ shop_title_img_height || 0 }px;${ radius_computer(shop_title_img_radius) }`;
const list = icon_list.filter(item1 => !isEmpty(item1.icon));
if (index < list.length - 1) {
style += `margin-right: ${ shop_title_img_inner_spacing || 0}px;`;
} else {
style += `margin-right: ${ shop_title_img_outer_spacing || 0}px;`;
}
return style;
}
});
// 初始化的时候执行
onMounted(() => {
// 指定商品并且指定商品数组不为空
if (!isEmpty(form.value.data_list) && form.value.data_type == '0') {
list.value = form.value.data_list.map((item: any) => ({
...item.data,
title: !isEmpty(item.new_title) ? item.new_title : item.data.title,
new_cover: item.new_cover,
}));
} else if (!isEmpty(form.value.data_auto_list) && form.value.data_type == '1') {
// 筛选商品并且筛选商品数组不为空
list.value = form.value.data_auto_list;
} else {
list.value = Array(4).fill(default_list);
}
});
const get_shops = () => {
const { category_ids, number, order_by_type, order_by_rule, keywords, is_goods_list } = form.value;
const params = {
shop_keywords: keywords,
shop_category_ids: category_ids,
shop_order_by_type: order_by_type,
shop_order_by_rule: order_by_rule,
shop_number: number,
shop_is_goods_list: is_goods_list,
};
// 获取商品列表
ShopAPI.getShopList(params).then((res: any) => {
if (!isEmpty(res.data)) {
list.value = res.data;
} else {
list.value = Array(4).fill(default_list);
}
}).catch(() => {
list.value = Array(4).fill(default_list);
});
};
// 取出监听的数据
const watch_data = computed(() => {
const { category_ids, number, order_by_type, order_by_rule, data_type, data_list, keywords } = form.value;
return { category_ids, number, order_by_type, order_by_rule, data_type, data_list, keywords };
})
// 初始化的时候不执行, 监听数据变化
watch(() => watch_data.value, (val, oldVal) => {
// 使用JSON.stringify()进行判断 新值和旧值是否一样 不一样就重新获取数据
if ((JSON.stringify(val) !== JSON.stringify(oldVal)) || props.isCommonStyle) {
if (val.data_type == '0') {
if (!isEmpty(val.data_list)) {
list.value = cloneDeep(val.data_list).map((item: any) => ({
...item.data,
name: !isEmpty(item.new_title) ? item.new_title : item.data.name,
new_cover: item.new_cover,
}));
} else {
list.value = Array(4).fill(default_list);
}
} else {
get_shops();
}
}
}, { deep: true });
//#endregion
// 门店间距
const content_outer_spacing = computed(() => new_style.value.content_outer_spacing);
// 圆角设置
const content_radius = computed(() => radius_computer(new_style.value.shop_radius));
// 图片圆角设置
const content_img_radius = computed(() => radius_computer(new_style.value.shop_img_radius));
// 内边距设置
const content_padding = computed(() => padding_computer(new_style.value.shop_padding));
const shop_left_right_width_margin = computed(() => {
const { shop_margin = old_margin } = new_style.value;
return shop_margin.margin_left + shop_margin.margin_right;
});
// 两列风格
const two_columns = computed(() => content_outer_spacing.value + shop_left_right_width_margin.value * 2 + 'px' );
// 根据传递的参数，从对象中取值
const trends_config = (key: string, type?: string) => {
return style_config(new_style.value[`shop_${key}_typeface`], new_style.value[`shop_${key}_size`], new_style.value[`shop_${key}_color`], type);
};
// 根据传递的值，显示不同的内容
const style_config = (typeface: string, size: number, color: string | object, type?: string) => {
let style = `font-weight:${typeface}; font-size: ${size}px;color: ${color};`;
return style;
};
// 不同风格下的样式
const layout_type = computed(() => {
let class_type = '';
switch (theme.value) {
case '0':
class_type = `oh`;
break;
case '1':
class_type = `two-columns oh`;
break;
case '2':
class_type = `oh`;
break;
case '3':
class_type = `multicolumn-columns oh`;
break;
default:
break;
}
return class_type;
});
// 容器样式
const layout_style = computed(() => {
const radius = theme.value == '6' ? '' : content_radius.value;
const width = theme.value == '0' ? `width: calc(100% - ${ shop_left_right_width_margin.value }px);` : '';
const gradient = gradient_handle(new_style.value.shop_color_list, new_style.value.shop_direction) + margin_computer(new_style.value.shop_margin) + border_computer(new_style.value) + box_shadow_computer(new_style.value);
return `${radius} ${ gradient } ${ width }`;
});
// 容器图片样式
const layout_img_style = computed(() => {
const padding = theme.value == '0' ? content_padding.value : '';
const data = {
background_img_style: new_style.value.shop_background_img_style,
background_img: new_style.value.shop_background_img,
}
return padding + background_computer(data);
});
// 内容区域的样式
const content_style = computed(() => {
const spacing_value = new_style.value.content_spacing;
let spacing = '';
if (['0'].includes(theme.value)) {
spacing = `margin-left: ${spacing_value}px;`;
} else {
spacing = content_padding.value;
}
return `${spacing}`;
});
//#region 轮播设置
// 轮播图key值
const carouselKey = ref('0');
const autoplay = ref<boolean | object>(false);
const slides_per_group = ref(1);
// 内容参数的集合
watchEffect(() => {
// 是否滚动
if (new_style.value.is_roll == '1' && list.value.length > 0) {
autoplay.value = {
delay: (new_style.value.interval_time || 2) * 1000,
pauseOnMouseEnter: true,
};
} else {
autoplay.value = false;
}
// 判断是平移还是整屏滚动
slides_per_group.value = new_style.value.rolling_fashion == 'translation' ? 1 : form.value.carousel_col;
// 更新轮播图的key，确保更换时能重新更新轮播图
carouselKey.value = get_math();
});
//#endregion
const shop_style_list = [
{ name: '单列展示', value: '0', width: 50, height: 50 },
{ name: '两列展示（纵向）', value: '1', width:180, height: 180 },
{ name: '大图展示', value: '2', width:0, height: 180 },
{ name: '左右滑动展示', value: '3', width:0, height: 0 },
]
// 宽度和高度为空的时候，修改默认值
const shop_img_width = computed(() => {
if (typeof new_style.value.content_img_width == 'number') {
return new_style.value.content_img_width + 'px';
} else {
const list = shop_style_list.filter(item => item.value == theme.value);
if (list.length > 0) {
return list[0].width + 'px';
} else {
return 'auto';
}
}
});
// 宽度和高度为空的时候，修改默认值
const shop_img_height = computed(() => {
if (typeof new_style.value.content_img_height == 'number') {
return new_style.value.content_img_height + 'px';
} else {
const list = shop_style_list.filter(item => item.value == theme.value);
if (list.length > 0) {
return list[0].height + 'px';
} else {
return 'auto';
}
}
});
const content_outer_height = computed(() => new_style.value.content_outer_height + 'px');
</script>
<style lang="scss" scoped>
:deep(.el-image) {
background-color: #fff;
.image-slot img {
width: 5rem;
height: 5rem;
}
}
.title-img {
object-fit: contain;
}
.two-columns {
width: calc((100% - v-bind(two_columns)) / 2);
}
.multicolumn-columns {
height: v-bind(content_outer_height);
}
.flex-img0 {
height: v-bind(shop_img_height);
width: v-bind(shop_img_width);
}
.flex-img1 {
width: 100%;
height: v-bind(shop_img_height);
}
.flex-img2 {
width: 100%;
height: v-bind(shop_img_height);
}
.flex-img3 {
width: 100%;
height: 100%;
}
</style>

147
src/components/model-ask/model-ask-content.vue Normal file
View File

@ -0,0 +1,147 @@
<template>
<div class="content">
<el-form :model="form" label-width="75" class="m-h">
<common-content-top :value="form.content_top"></common-content-top>
<div class="divider-line"></div>
<card-container>
<div class="mb-12">展示设置</div>
<el-form-item label="选择风格">
<el-radio-group v-model="form.theme">
<el-radio v-for="item in base_list.theme_list" :key="item.value" :value="item.value">{{ item.name }}</el-radio>
</el-radio-group>
</el-form-item>
<el-form-item v-if="form.theme == '3'" label="轮播列数">
<el-radio-group v-model="form.carousel_col">
<el-radio :value="1">单列展示</el-radio>
<el-radio :value="2">两列展示</el-radio>
<el-radio :value="3">三列展示</el-radio>
<el-radio :value="4">四列展示</el-radio>
</el-radio-group>
</el-form-item>
</card-container>
<div class="divider-line"></div>
<card-container class="card-container-br">
<div class="mb-12">问答设置</div>
<!-- 数据筛选组件, 根据数据源类型显示不同的筛选组件 -->
<data-filter type="ask" :value="form" :list="form.data_list" :base-list="base_list" @add="add" @data_list_replace="data_list_replace" @data_list_remove="data_list_remove" @data_list_sort="data_list_sort"></data-filter>
</card-container>
<template v-if="form.theme == '0'">
<div class="divider-line"></div>
<card-container>
<div class="mb-12">列表设置</div>
</card-container>
</template>
</el-form>
<url-value-dialog v-model:dialog-visible="url_value_dialog_visible" :type="['ask']" :multiple="url_value_multiple_bool" @update:model-value="url_value_dialog_call_back"></url-value-dialog>
</div>
</template>
<script setup lang="ts">
import { get_math } from '@/utils';
import { commonStore } from '@/store';
const common_store = commonStore();
/**
* @description 博客列表（内容）
* @param value{Object} 传过来的数据，用于数据渲染
* @param styles{Object} 样式
*/
const props = defineProps({
value: {
type: Object,
default: () => ({}),
},
styles: {
type: Object,
default: () => ({}),
},
defaultConfig: {
type: Object,
default: () => ({
// 图片不同风格下的圆角
img_radius_0: 4,
img_radius_1: 0,
}),
},
});
// 默认值
const state = reactive({
form: props.value,
data: props.styles,
});
// 如果需要解构，确保使用toRefs
const { form, data } = toRefs(state);
const base_list = reactive({
theme_list: [
{ name: '单列展示', value: '0', width: 50, height: 50 },
{ name: '两列展示（纵向）', value: '1', width:180, height: 180 },
{ name: '左右滑动展示', value: '2', width:0, height: 0 },
],
data_type_list: [
{ name: '指定问答', value: '0' },
{ name: '筛选问答', value: '1' },
],
show_list: [
{ name: '日期时间', value: 'head', show: ['0', '1' , '2'] },
{ name: '浏览量', value: 'nick_name', show: ['0', '1' , '2'] },
{ name: '回复状态', value: 'goods_image', show: ['0', '1' , '2'] },
{ name: 'TOP排名', value: 'goods_title', show: ['0'] },
]
});
// 移除
const data_list_remove = (index: number) => {
form.value.data_list.splice(index, 1);
};
const url_value_multiple_bool = ref(true);
const data_list_replace_index = ref(0);
// 替换
const data_list_replace = (index: number) => {
data_list_replace_index.value = index;
url_value_multiple_bool.value = false;
url_value_dialog_visible.value = true;
};
// 拖动排序
const data_list_sort = (item: any) => {
form.value.data_list = item;
};
// 新增
const add = () => {
url_value_multiple_bool.value = true;
url_value_dialog_visible.value = true;
};
// 开启关闭链接
const url_value_dialog_visible = ref(false);
const url_value_dialog_call_back = (item: any[]) => {
if (url_value_multiple_bool.value) {
item.forEach((child: any) => {
form.value.data_list.push({
id: get_math(),
new_title: '',
new_cover: [],
data: child,
});
});
} else {
form.value.data_list[data_list_replace_index.value] = {
id: get_math(),
new_title: '',
new_cover: form.value.data_list[data_list_replace_index.value]?.new_cover || [],
data: item[0],
};
}
};
</script>
<style lang="scss" scoped>
.content {
width: 100%;
}
.img {
width: 4rem;
height: 4rem;
}
.number-show {
:deep(.el-input__wrapper .el-input__inner) {
text-align: left;
}
}
</style>

33
src/components/model-ask/model-ask-setting.vue Normal file
View File

@ -0,0 +1,33 @@
<template>
<div class="setting-content">
<template v-if="type == '1'">
<model-shop-content :value="form.content" :styles="form.style" :default-config="data_config"></model-shop-content>
</template>
<template v-else-if="type == '2'">
<model-shop-styles :value="form.style" :content="form.content" :default-config="data_config"></model-shop-styles>
</template>
</div>
</template>
<script setup lang="ts">
/**
* @description: 文章选项卡列表（设置）
* @param type{String} 类型是进入内容组件还是样式组件
* @param value{Object} 样式数据
*/
const props = defineProps({
type: {
type: String,
default: '1',
},
value: {
type: Object,
default: () => ({}),
},
});
const data_config = reactive({
// 图片不同风格下的圆角
img_radius_0: 4,
img_radius_1: 0,
});
const form = ref(props.value);
</script>

165
src/components/model-ask/model-ask-styles.vue Normal file
View File

@ -0,0 +1,165 @@
<template>
<div class="h">
<el-form :model="form" label-width="75">
<card-container>
<div class="mb-12">内容样式</div>
<el-form-item label="内容背景">
<background-common v-model:color_list="form.shop_color_list" v-model:direction="form.shop_direction" v-model:img_style="form.shop_background_img_style" v-model:img="form.shop_background_img" @mult_color_picker_event="mult_color_picker_event" />
</el-form-item>
<el-form-item label="标题图标">
<div class="flex-col gap-10 w h">
<el-form-item label="宽度" label-width="60" class="form-item-child-label">
<slider v-model="form.shop_title_img_width" :max="1000"></slider>
</el-form-item>
<el-form-item label="高度" label-width="60" class="form-item-child-label">
<slider v-model="form.shop_title_img_height" :max="1000"></slider>
</el-form-item>
<el-form-item label="圆角" label-width="60" class="form-item-child-label">
<radius :value="form.shop_title_img_radius"></radius>
</el-form-item>
<el-form-item label="图标间距" label-width="60" class="form-item-child-label">
<slider v-model="form.shop_title_img_inner_spacing" :max="50"></slider>
</el-form-item>
<el-form-item label="标题间距" label-width="60" class="form-item-child-label">
<slider v-model="form.shop_title_img_outer_spacing" :max="50"></slider>
</el-form-item>
</div>
</el-form-item>
<el-form-item label="内容标题">
<color-text-size-group v-model:color="form.shop_title_color" v-model:typeface="form.shop_title_typeface" v-model:size="form.shop_title_size" default-color="#000000"></color-text-size-group>
</el-form-item>
<el-form-item label="店铺介绍">
<color-text-size-group v-model:color="form.shop_desc_color" v-model:typeface="form.shop_desc_typeface" v-model:size="form.shop_desc_size" default-color="#000000"></color-text-size-group>
</el-form-item>
<el-form-item label="外间距">
<margin :value="form.shop_margin"></margin>
</el-form-item>
<el-form-item label="内间距">
<padding :value="form.shop_padding"></padding>
</el-form-item>
<el-form-item label="内容圆角">
<radius :value="form.shop_radius"></radius>
</el-form-item>
<el-form-item v-if="data.theme == '0'" label="内容间距">
<slider v-model="form.content_spacing" :max="100"></slider>
</el-form-item>
<el-form-item label="商户间距">
<slider v-model="form.content_outer_spacing" :max="100"></slider>
</el-form-item>
<template v-if="theme == '3'">
<el-form-item label="内容高度">
<slider v-model="form.content_outer_height" :max="1000"></slider>
</el-form-item>
</template>
<template v-else>
<el-form-item v-if="data.theme == '0'" label="图片宽度">
<slider v-model="form.content_img_width" :max="1000"></slider>
</el-form-item>
<el-form-item label="图片高度">
<slider v-model="form.content_img_height" :max="1000"></slider>
</el-form-item>
</template>
<el-form-item label="图片圆角">
<radius :value="form.shop_img_radius"></radius>
</el-form-item>
<!-- 边框处理 -->
<border-config v-model:show="form.border_is_show" v-model:color="form.border_color" v-model:style="form.border_style" v-model:size="form.border_size"></border-config>
<!-- 阴影配置 -->
<shadow-config v-model="form"></shadow-config>
</card-container>
<template v-if="data.is_right_show == '1' && theme == '0'">
<div class="divider-line"></div>
<card-container>
<div class="mb-12">图标设置</div>
<img-or-icon-or-text-style v-model:value="form.right_style" :type="data.right_type" :is-icon="data.right_type == 'img-icon' && !isEmpty(data.right_icon)" />
</card-container>
</template>
<template v-if="theme == '3'">
<div class="divider-line"></div>
<card-container class="card-container">
<div class="mb-12">轮播设置</div>
<el-form-item label="自动轮播">
<el-switch v-model="form.is_roll" active-value="1" inactive-value="0" />
</el-form-item>
<template v-if="form.is_roll == '1'">
<el-form-item label="间隔时间">
<slider v-model="form.interval_time" :min="1" :max="100"></slider>
</el-form-item>
<el-form-item label="滚动方式">
<el-radio-group v-model="form.rolling_fashion">
<el-radio value="translation">平移</el-radio>
<el-radio value="cut-screen">切屏</el-radio>
</el-radio-group>
</el-form-item>
</template>
</card-container>
</template>
</el-form>
<div class="divider-line"></div>
<common-styles :value="form.common_style" @update:value="common_style_update" />
</div>
</template>
<script setup lang="ts">
import { isEmpty } from "lodash";
/**
* @description: 博客列表（样式）
* @param value{Object} 样式数据
* @param content{Object} 内容数据
* @param defaultConfig{Object} 默认配置
*/
const props = defineProps({
value: {
type: Object,
default: () => ({}),
},
content: {
type: Object,
default: () => ({}),
},
defaultConfig: {
type: Object,
default: () => ({
// 图片不同风格下的圆角
img_radius_0: 4,
img_radius_1: 0,
}),
},
});
// 默认值
const state = reactive({
form: props.value,
data: props.content,
});
// 如果需要解构，确保使用toRefs
const { form, data } = toRefs(state);
const theme = computed(() => data.value.theme);
if (['0', '4'].includes(theme.value)) {
if (form.value.shop_img_radius.radius == props.defaultConfig.img_radius_0 || (form.value.shop_img_radius.radius_bottom_left == props.defaultConfig.img_radius_1 && form.value.shop_img_radius.radius_bottom_right == props.defaultConfig.img_radius_1 && form.value.shop_img_radius.radius_top_left == props.defaultConfig.img_radius_1 && form.value.shop_img_radius.radius_top_right == props.defaultConfig.img_radius_1)) {
form.value.shop_img_radius.radius = props.defaultConfig.img_radius_0;
form.value.shop_img_radius.radius_bottom_left = props.defaultConfig.img_radius_0;
form.value.shop_img_radius.radius_bottom_right = props.defaultConfig.img_radius_0;
form.value.shop_img_radius.radius_top_left = props.defaultConfig.img_radius_0;
form.value.shop_img_radius.radius_top_right = props.defaultConfig.img_radius_0;
}
} else {
if (form.value.shop_img_radius.radius == props.defaultConfig.img_radius_0 || (form.value.shop_img_radius.radius_bottom_left == props.defaultConfig.img_radius_1 && form.value.shop_img_radius.radius_bottom_right == props.defaultConfig.img_radius_1 && form.value.shop_img_radius.radius_top_left == props.defaultConfig.img_radius_1 && form.value.shop_img_radius.radius_top_right == props.defaultConfig.img_radius_1)) {
form.value.shop_img_radius.radius = props.defaultConfig.img_radius_1;
form.value.shop_img_radius.radius_bottom_left = props.defaultConfig.img_radius_1;
form.value.shop_img_radius.radius_bottom_right = props.defaultConfig.img_radius_1;
form.value.shop_img_radius.radius_top_left = props.defaultConfig.img_radius_1;
form.value.shop_img_radius.radius_top_right = props.defaultConfig.img_radius_1;
}
}
// 多商户背景渐变设置
const mult_color_picker_event = (arry: color_list[], type: number) => {
form.value.shop_color_list = arry;
form.value.shop_direction = type.toString();
};
const common_style_update = (value: any) => {
form.value.common_style = value;
};
</script>
<style lang="scss" scoped>
</style>

202
src/config/const/ask.ts Normal file
View File

@ -0,0 +1,202 @@
import defaultCommon from "./index";
import commonTop from './common-top';
import { cloneDeep } from "lodash";
interface defaultRealstore {
content: {
content_top: object;
theme: string;
carousel_col: number;
shop_desc: string;
shop_desc_row: string;
data_type: string,
data_list: string[];
data_auto_list: string[];
category_ids: string[],
number: number,
order_by_type: number,
order_by_rule:number,
keywords: string;
is_right_show: string;
right_type: string;
right_img: uploadList[];
right_icon: string;
right_text: string;
};
style: {
shop_color_list: color_list[];
shop_direction: string;
shop_background_img_style: string;
shop_background_img: uploadList[];
shop_img_radius: radiusStyle;
shop_margin: marginStyle;
shop_padding: paddingStyle;
shop_radius: radiusStyle;
content_img_width: number;
content_img_height: number;
content_spacing: number;
content_outer_spacing: number;
content_outer_height: number;
shop_title_img_width: number,
shop_title_img_height: number,
shop_title_img_radius: radiusStyle,
shop_title_img_inner_spacing: number,
shop_title_img_outer_spacing: number,
shop_title_color: string;
shop_title_typeface: string;
shop_title_size: number;
shop_desc_color: string;
shop_desc_typeface: string;
shop_desc_size: number;
right_style: object,
is_roll: string;
interval_time: number;
rolling_fashion: string;
border_is_show: string,
border_color: string,
border_style: string,
border_size: paddingStyle,
// 阴影
box_shadow_color: string;
box_shadow_x: number;
box_shadow_y: number;
box_shadow_blur: number;
box_shadow_spread: number;
common_style: object;
};
}
const defaultRealstore: defaultRealstore = {
content: {
content_top: {
...commonTop,
},
theme: '0',
carousel_col: 1,
shop_desc: '1',
shop_desc_row: '1',
data_type: '0',
data_list: [],
data_auto_list: [],
category_ids: [],
number: 4,
order_by_type: 0,
order_by_rule: 0,
keywords: '',
is_right_show: '1',
right_type: 'img-icon',
right_img: [],
right_icon: 'arrow-right',
right_text: '',
},
style: {
shop_color_list: [{ color: '#fff', color_percentage: undefined }],
shop_direction: '90deg',
shop_background_img_style: '2',
shop_background_img: [],
// 图片圆角
shop_img_radius: {
radius: 0,
radius_top_left: 0,
radius_top_right: 0,
radius_bottom_left: 0,
radius_bottom_right: 0,
},
shop_margin: {
margin: 0,
margin_top: 0,
margin_bottom: 0,
margin_left: 0,
margin_right: 0,
},
shop_padding: {
padding: 10,
padding_top: 10,
padding_bottom: 10,
padding_left: 10,
padding_right: 10,
},
shop_radius: {
radius: 8,
radius_top_left: 8,
radius_top_right: 8,
radius_bottom_left: 8,
radius_bottom_right: 8,
},
content_img_width: 50,
content_img_height: 50,
content_spacing: 10,
content_outer_spacing: 10,
content_outer_height: 204,
shop_title_img_width: 12,
shop_title_img_height: 12,
shop_title_img_radius: {
radius: 0,
radius_top_left: 0,
radius_top_right: 0,
radius_bottom_left: 0,
radius_bottom_right: 0,
},
shop_title_img_inner_spacing: 5,
shop_title_img_outer_spacing: 5,
shop_title_color: '#333',
shop_title_typeface: 'bold',
shop_title_size: 14,
shop_desc_color: '#666',
shop_desc_typeface: '400',
shop_desc_size: 12,
right_style: {
color_list: [{ color: '', color_percentage: undefined }],
direction: '90deg',
color: '#ccc',
size: 12,
img_width: 14,
img_height: 14,
margin: 0,
margin_top: 0,
margin_bottom: 0,
margin_left: 0,
margin_right: 0,
padding: 0,
padding_top: 0,
padding_bottom: 0,
padding_left: 0,
padding_right: 0,
radius: 0,
radius_top_left: 0,
radius_top_right: 0,
radius_bottom_left: 0,
radius_bottom_right: 0,
},
// 是否滚动
is_roll: '1',
interval_time: 3,
rolling_fashion: 'translation', // 滚动方式 translation 平移 cut-screen 切屏
border_is_show: '0',
border_color: '#eee',
border_style: 'solid',
border_size: {
padding: 1,
padding_top: 1,
padding_right: 1,
padding_bottom: 1,
padding_left: 1,
},
// 阴影
box_shadow_color: '',
box_shadow_x: 0,
box_shadow_y: 0,
box_shadow_blur: 0,
box_shadow_spread: 0,
// 公共样式
common_style: {
...defaultCommon,
padding: 10,
padding_top: 10,
padding_bottom: 10,
padding_left: 10,
padding_right: 10,
}
},
};
export default defaultRealstore;