问答和内容修改
于肖磊
parent
eeccb4b7a7
commit
b595131809
|
|
@ -1,10 +1,10 @@
|
|||
import request from '@/utils/request';
|
||||
import api_request from '@/utils/api-request';
|
||||
|
||||
class CouponAPI {
|
||||
/** 领取优惠券列表 */
|
||||
static getCoupon(data: any) {
|
||||
return request({
|
||||
url: `plugins/index/pluginsname/coupon/pluginscontrol/diyapi/pluginsaction/receivecouponlist`,
|
||||
return api_request({
|
||||
url: `?s=plugins/index/pluginsname/coupon/pluginscontrol/diycoupon/pluginsaction/autocouponlist.html`,
|
||||
method: 'post',
|
||||
data,
|
||||
});
|
||||
|
|
|
|||
|
|
@ -0,0 +1,20 @@
|
|||
import api_request from '@/utils/api-request';
|
||||
|
||||
class BlogAPI {
|
||||
/** 博客自动数据 */
|
||||
static getAutoList(data: any) {
|
||||
return api_request({
|
||||
url: `?s=plugins/index/pluginsname/salerecords/pluginscontrol/diyapi/pluginsaction/salerecordsdata`,
|
||||
method: 'post',
|
||||
data,
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
export default BlogAPI;
|
||||
|
||||
// 分类树结构
|
||||
export interface Tree {
|
||||
/** 主键 */
|
||||
id: string;
|
||||
}
|
||||
|
|
@ -53,8 +53,8 @@ class UrlValueAPI {
|
|||
}
|
||||
/** 获取优惠券列表 */
|
||||
static getCouponList(data: any) {
|
||||
return request({
|
||||
url: `plugins/index/pluginsname/coupon/pluginscontrol/diyapi/pluginsaction/couponlist`,
|
||||
return api_request({
|
||||
url: `?s=plugins/index/pluginsname/coupon/pluginscontrol/diycoupon/pluginsaction/index.html`,
|
||||
method: 'post',
|
||||
data,
|
||||
});
|
||||
|
|
@ -84,7 +84,7 @@ class UrlValueAPI {
|
|||
data,
|
||||
});
|
||||
}
|
||||
/** 多商户指定数据 */
|
||||
/** 多门店指定数据 */
|
||||
static getRealstoreList(data: any) {
|
||||
return api_request({
|
||||
url: `?s=plugins/index/pluginsname/realstore/pluginscontrol/diyrealstore/pluginsaction/index.html`,
|
||||
|
|
|
|||
|
|
@ -8,11 +8,16 @@
|
|||
</el-table-column>
|
||||
<template v-for="(item, index) in tableColumnList" :key="index">
|
||||
<template v-if="item.field">
|
||||
<el-table-column :prop="item.field" :label="item?.name || item.field" :width="item?.width || ''">
|
||||
<el-table-column :prop="item.field.toString()" :label="item?.name || item.field" :width="item?.width || ''">
|
||||
<template #default="scope">
|
||||
<template v-if="item.type == 'images'">
|
||||
<image-empty v-if="scope.row[item.field]" v-model="scope.row[item.field]" fit="contain" class="img"></image-empty>
|
||||
</template>
|
||||
<template v-else-if="item.type == 'array'">
|
||||
<template v-for="(item1, index1) in item.field" :key="index1">
|
||||
{{ scope.row[item1]}}
|
||||
</template>
|
||||
</template>
|
||||
<template v-else>
|
||||
{{ scope.row[item.field] }}
|
||||
</template>
|
||||
|
|
|
|||
|
|
@ -2,9 +2,24 @@
|
|||
<!-- 优惠券 -->
|
||||
<div class="container">
|
||||
<div class="flex-row jc-e gap-20 mb-20">
|
||||
<el-select v-model="type" class="search-w" placeholder="请选择" filterable clearable @change="handle_search">
|
||||
<el-option v-for="item in coupon_type_list" :key="item.value" :label="item.name" :value="item.value" />
|
||||
</el-select>
|
||||
<div class="filter-style flex-row gap-12">
|
||||
<div class="title">类型</div>
|
||||
<el-select v-model="type" class="search-w" placeholder="请选择" multiple collapse-tags filterable @change="handle_search">
|
||||
<el-option v-for="item in coupon_type_list" :key="item.value" :label="item.name" :value="item.value" />
|
||||
</el-select>
|
||||
</div>
|
||||
<div class="filter-style flex-row gap-12">
|
||||
<div class="title">到期类型</div>
|
||||
<el-select v-model="expire_type_ids" multiple collapse-tags filterable placeholder="请选择到期类型">
|
||||
<el-option v-for="item in get_data_list(common_store.common.plugins, 'coupon.expire_type_list')" :key="item.value" :label="item.name" :value="item.value" />
|
||||
</el-select>
|
||||
</div>
|
||||
<div class="filter-style flex-row gap-12">
|
||||
<div class="title">使用限制</div>
|
||||
<el-select v-model="use_limit_type_ids" multiple collapse-tags filterable placeholder="请选择使用限制">
|
||||
<el-option v-for="item in get_data_list(common_store.common.plugins, 'coupon.use_limit_type_list')" :key="item.value" :label="item.name" :value="item.value" />
|
||||
</el-select>
|
||||
</div>
|
||||
<el-input v-model="search_value" placeholder="请输入搜索内容" class="search-w" @change="handle_search">
|
||||
<template #suffix>
|
||||
<icon name="search" size="16" color="9" class="c-pointer" @click="handle_search"></icon>
|
||||
|
|
@ -21,11 +36,14 @@
|
|||
</el-table-column>
|
||||
<el-table-column prop="id" label="ID" width="80" type="" />
|
||||
<el-table-column prop="name" label="名称"></el-table-column>
|
||||
<el-table-column prop="desc" label="描述"></el-table-column>
|
||||
<el-table-column prop="type_name" label="类型"></el-table-column>
|
||||
<el-table-column prop="expire_type_name" label="到期类型"></el-table-column>
|
||||
<el-table-column prop="use_limit_type_name" label="使用限制"></el-table-column>
|
||||
<el-table-column prop="cover" label="优惠信息">
|
||||
<template #default="scope">
|
||||
<div class="flex-row align-c gap-3">
|
||||
<div>{{ scope.row.type == '0' ? '减' : '打' }}</div>
|
||||
<div>{{ scope.row.type_first }}</div>
|
||||
<div>{{ scope.row.discount_value }}</div>
|
||||
<div>{{ scope.row.type_unit }}</div>
|
||||
</div>
|
||||
|
|
@ -42,7 +60,7 @@
|
|||
</div>
|
||||
</template>
|
||||
<script lang="ts" setup>
|
||||
import { is_obj_empty } from '@/utils';
|
||||
import { is_obj_empty, get_data_list } from '@/utils';
|
||||
import UrlValueAPI from '@/api/url-value';
|
||||
import { commonStore } from '@/store';
|
||||
const common_store = commonStore();
|
||||
|
|
@ -74,7 +92,9 @@ const search_value = ref('');
|
|||
const loading = ref(false);
|
||||
const init = () => {
|
||||
template_selection.value = '';
|
||||
type.value = '';
|
||||
type.value = [];
|
||||
expire_type_ids.value = [];
|
||||
use_limit_type_ids.value = [];
|
||||
search_value.value = '';
|
||||
if (!is_obj_empty(common_store.common.plugins) && !is_obj_empty(common_store.common.plugins.coupon) && common_store.common.plugins.coupon.type_list.length > 0) {
|
||||
coupon_type_list.value = common_store.common.plugins.coupon.type_list;
|
||||
|
|
@ -84,7 +104,9 @@ const init = () => {
|
|||
const handle_search = () => {
|
||||
get_list(1);
|
||||
};
|
||||
const type = ref('');
|
||||
const type = ref([]);
|
||||
const expire_type_ids = ref([]);
|
||||
const use_limit_type_ids = ref([]);
|
||||
interface couponType {
|
||||
value: string;
|
||||
name: string;
|
||||
|
|
@ -104,7 +126,9 @@ const get_list = (new_page: number) => {
|
|||
let new_data = {
|
||||
page: new_page,
|
||||
keywords: search_value.value,
|
||||
type: type.value,
|
||||
type_ids: type.value.length > 0 ? type.value.join(',') : '',
|
||||
expire_type_ids: expire_type_ids.value.length > 0 ? expire_type_ids.value.join(',') : '',
|
||||
use_limit_type_ids: use_limit_type_ids.value.length > 0 ? use_limit_type_ids.value.join(',') : '',
|
||||
page_size: page_size.value,
|
||||
};
|
||||
loading.value = true;
|
||||
|
|
@ -143,4 +167,15 @@ const handle_select = (selection: any) => {
|
|||
}
|
||||
}
|
||||
}
|
||||
.filter-style {
|
||||
min-height: 3.2rem;
|
||||
min-width: 20rem;
|
||||
}
|
||||
.title {
|
||||
font-size: 1.2rem;
|
||||
line-height: 3.2rem;
|
||||
text-align: right;
|
||||
width: 100%;
|
||||
color: #606266;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -0,0 +1,29 @@
|
|||
<template>
|
||||
<el-form-item label="背景">
|
||||
<background-common v-model:color_list="form.color_list" v-model:direction="form.direction" v-model:img_style="form.background_img_style" v-model:img="form.background_img" @mult_color_picker_event="mult_color_picker_event" />
|
||||
</el-form-item>
|
||||
<el-form-item label="文字">
|
||||
<color-text-size-group v-model:color="form.font_color" v-model:typeface="form.font_typeface" v-model:size="form.font_size" default-color="#000000"></color-text-size-group>
|
||||
</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>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
const props = defineProps({
|
||||
value: {
|
||||
type: Object,
|
||||
default: () => ({}),
|
||||
},
|
||||
});
|
||||
const form = ref(props.value);
|
||||
|
||||
const mult_color_picker_event = (arry: color_list[], type: number) => {
|
||||
form.value.color_list = arry;
|
||||
form.value.direction = type;
|
||||
};
|
||||
|
||||
watch(props.value, (val) => {
|
||||
form.value = val;
|
||||
}, {deep: true});
|
||||
</script>
|
||||
|
|
@ -5,27 +5,17 @@
|
|||
<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 class="flex-row jc-sb gap-10" :style="content_style">
|
||||
<template v-if="theme == '0'">
|
||||
|
||||
</template>
|
||||
<div class="flex-col jc-sb gap-10">
|
||||
<div class="text-line-2" :style="trends_config('title')">{{ item.name }}</div>
|
||||
<div class="flex-row gap-10">
|
||||
<span v-if="form.ask_desc == '1'" :style="trends_config('desc', 'desc')">{{ item.describe }}</span>
|
||||
<span></span>
|
||||
<span>浏览</span>
|
||||
</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>
|
||||
|
|
@ -36,23 +26,13 @@
|
|||
<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>
|
||||
<span v-if="form.ask_desc == '1'" :style="trends_config('desc', 'desc')">{{ item.describe }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -131,13 +111,13 @@ const new_url_list = computed(() => {
|
|||
// 标题图片样式
|
||||
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 { ask_title_img_width = 0, ask_title_img_height = 0, ask_title_img_radius, ask_title_img_inner_spacing, ask_title_img_outer_spacing} = new_style.value;
|
||||
let style = `width: ${ask_title_img_width || 0 }px;height: ${ ask_title_img_height || 0 }px;${ radius_computer(ask_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;`;
|
||||
style += `margin-right: ${ ask_title_img_inner_spacing || 0}px;`;
|
||||
} else {
|
||||
style += `margin-right: ${ shop_title_img_outer_spacing || 0}px;`;
|
||||
style += `margin-right: ${ ask_title_img_outer_spacing || 0}px;`;
|
||||
}
|
||||
return style;
|
||||
}
|
||||
|
|
@ -162,12 +142,12 @@ onMounted(() => {
|
|||
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,
|
||||
ask_keywords: keywords,
|
||||
ask_category_ids: category_ids,
|
||||
ask_order_by_type: order_by_type,
|
||||
ask_order_by_rule: order_by_rule,
|
||||
ask_number: number,
|
||||
ask_is_goods_list: is_goods_list,
|
||||
};
|
||||
// 获取商品列表
|
||||
ShopAPI.getShopList(params).then((res: any) => {
|
||||
|
|
@ -208,20 +188,20 @@ watch(() => watch_data.value, (val, oldVal) => {
|
|||
// 门店间距
|
||||
const content_outer_spacing = computed(() => new_style.value.content_outer_spacing);
|
||||
// 圆角设置
|
||||
const content_radius = computed(() => radius_computer(new_style.value.shop_radius));
|
||||
const content_radius = computed(() => radius_computer(new_style.value.ask_radius));
|
||||
// 图片圆角设置
|
||||
const content_img_radius = computed(() => radius_computer(new_style.value.shop_img_radius));
|
||||
const content_img_radius = computed(() => radius_computer(new_style.value.ask_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 content_padding = computed(() => padding_computer(new_style.value.ask_padding));
|
||||
const ask_left_right_width_margin = computed(() => {
|
||||
const { ask_margin = old_margin } = new_style.value;
|
||||
return ask_margin.margin_left + ask_margin.margin_right;
|
||||
});
|
||||
// 两列风格
|
||||
const two_columns = computed(() => content_outer_spacing.value + shop_left_right_width_margin.value * 2 + 'px' );
|
||||
const two_columns = computed(() => content_outer_spacing.value + ask_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);
|
||||
return style_config(new_style.value[`ask_${key}_typeface`], new_style.value[`ask_${key}_size`], new_style.value[`ask_${key}_color`], type);
|
||||
};
|
||||
// 根据传递的值，显示不同的内容
|
||||
const style_config = (typeface: string, size: number, color: string | object, type?: string) => {
|
||||
|
|
@ -252,16 +232,16 @@ const layout_type = computed(() => {
|
|||
// 容器样式
|
||||
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);
|
||||
const width = theme.value == '0' ? `width: calc(100% - ${ ask_left_right_width_margin.value }px);` : '';
|
||||
const gradient = gradient_handle(new_style.value.ask_color_list, new_style.value.ask_direction) + margin_computer(new_style.value.ask_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,
|
||||
background_img_style: new_style.value.ask_background_img_style,
|
||||
background_img: new_style.value.ask_background_img,
|
||||
}
|
||||
return padding + background_computer(data);
|
||||
});
|
||||
|
|
@ -298,18 +278,18 @@ watchEffect(() => {
|
|||
carouselKey.value = get_math();
|
||||
});
|
||||
//#endregion
|
||||
const shop_style_list = [
|
||||
const ask_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(() => {
|
||||
const ask_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);
|
||||
const list = ask_style_list.filter(item => item.value == theme.value);
|
||||
if (list.length > 0) {
|
||||
return list[0].width + 'px';
|
||||
} else {
|
||||
|
|
@ -318,11 +298,11 @@ const shop_img_width = computed(() => {
|
|||
}
|
||||
});
|
||||
// 宽度和高度为空的时候，修改默认值
|
||||
const shop_img_height = computed(() => {
|
||||
const ask_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);
|
||||
const list = ask_style_list.filter(item => item.value == theme.value);
|
||||
if (list.length > 0) {
|
||||
return list[0].height + 'px';
|
||||
} else {
|
||||
|
|
@ -350,16 +330,16 @@ const content_outer_height = computed(() => new_style.value.content_outer_height
|
|||
height: v-bind(content_outer_height);
|
||||
}
|
||||
.flex-img0 {
|
||||
height: v-bind(shop_img_height);
|
||||
width: v-bind(shop_img_width);
|
||||
height: v-bind(ask_img_height);
|
||||
width: v-bind(ask_img_width);
|
||||
}
|
||||
.flex-img1 {
|
||||
width: 100%;
|
||||
height: v-bind(shop_img_height);
|
||||
height: v-bind(ask_img_height);
|
||||
}
|
||||
.flex-img2 {
|
||||
width: 100%;
|
||||
height: v-bind(shop_img_height);
|
||||
height: v-bind(ask_img_height);
|
||||
}
|
||||
.flex-img3 {
|
||||
width: 100%;
|
||||
|
|
|
|||
|
|
@ -29,7 +29,9 @@
|
|||
<div class="divider-line"></div>
|
||||
<card-container>
|
||||
<div class="mb-12">列表设置</div>
|
||||
|
||||
<el-checkbox-group v-model="form.is_show">
|
||||
<el-checkbox v-for="item in base_list.show_list.filter(item => item.show.includes(form.theme))" :key="item.value" :value="item.value">{{ item.name }}</el-checkbox>
|
||||
</el-checkbox-group>
|
||||
</card-container>
|
||||
</template>
|
||||
</el-form>
|
||||
|
|
@ -40,6 +42,13 @@
|
|||
import { get_math } from '@/utils';
|
||||
import { commonStore } from '@/store';
|
||||
const common_store = commonStore();
|
||||
interface form {
|
||||
theme: string;
|
||||
data_list: any[];
|
||||
content_top: any;
|
||||
is_show: string[];
|
||||
carousel_col: number;
|
||||
}
|
||||
/**
|
||||
* @description 博客列表（内容）
|
||||
* @param value{Object} 传过来的数据，用于数据渲染
|
||||
|
|
@ -54,14 +63,6 @@ const props = defineProps({
|
|||
type: Object,
|
||||
default: () => ({}),
|
||||
},
|
||||
defaultConfig: {
|
||||
type: Object,
|
||||
default: () => ({
|
||||
// 图片不同风格下的圆角
|
||||
img_radius_0: 4,
|
||||
img_radius_1: 0,
|
||||
}),
|
||||
},
|
||||
});
|
||||
// 默认值
|
||||
const state = reactive({
|
||||
|
|
@ -81,10 +82,10 @@ const base_list = reactive({
|
|||
{ 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'] },
|
||||
{ name: '日期时间', value: 'time', show: ['0', '1' , '2'] },
|
||||
{ name: '浏览量', value: 'page_view', show: ['0', '1' , '2'] },
|
||||
{ name: '回复状态', value: 'reply_status', show: ['0', '1' , '2'] },
|
||||
{ name: 'TOP排名', value: 'ranking', show: ['0'] },
|
||||
]
|
||||
});
|
||||
|
||||
|
|
|
|||
|
|
@ -1,10 +1,10 @@
|
|||
<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>
|
||||
<model-ask-content :value="value.content" :styles="value.style"></model-ask-content>
|
||||
</template>
|
||||
<template v-else-if="type == '2'">
|
||||
<model-shop-styles :value="form.style" :content="form.content" :default-config="data_config"></model-shop-styles>
|
||||
<model-ask-styles :value="value.style" :content="value.content"></model-ask-styles>
|
||||
</template>
|
||||
</div>
|
||||
</template>
|
||||
|
|
@ -24,10 +24,4 @@ const props = defineProps({
|
|||
default: () => ({}),
|
||||
},
|
||||
});
|
||||
const data_config = reactive({
|
||||
// 图片不同风格下的圆角
|
||||
img_radius_0: 4,
|
||||
img_radius_1: 0,
|
||||
});
|
||||
const form = ref(props.value);
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -4,77 +4,43 @@
|
|||
<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>
|
||||
<background-common v-model:color_list="form.ask_color_list" v-model:direction="form.ask_direction" v-model:img_style="form.ask_background_img_style" v-model:img="form.ask_background_img" @mult_color_picker_event="mult_color_picker_event" />
|
||||
</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>
|
||||
<color-text-size-group v-model:color="form.ask_title_color" v-model:typeface="form.ask_title_typeface" v-model:size="form.ask_title_size" default-color="#000000"></color-text-size-group>
|
||||
</el-form-item>
|
||||
<el-form-item label="外间距">
|
||||
<margin :value="form.shop_margin"></margin>
|
||||
<margin :value="form.ask_margin"></margin>
|
||||
</el-form-item>
|
||||
<el-form-item label="内间距">
|
||||
<padding :value="form.shop_padding"></padding>
|
||||
<padding :value="form.ask_padding"></padding>
|
||||
</el-form-item>
|
||||
<el-form-item label="内容圆角">
|
||||
<radius :value="form.shop_radius"></radius>
|
||||
<radius :value="form.ask_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="商户间距">
|
||||
<el-form-item label="问答间距">
|
||||
<slider v-model="form.content_outer_spacing" :max="100"></slider>
|
||||
</el-form-item>
|
||||
<template v-if="theme == '3'">
|
||||
<template v-if="theme == '2'">
|
||||
<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>
|
||||
<el-tabs v-model="tabs_icon_name" class="content-tabs">
|
||||
<el-tab-pane v-for="(tab, index) in tabs" :key="index" :label="tab.label" :name="tab.value">
|
||||
<label-style :value="form[`${ tab.value }_style`]"></label-style>
|
||||
</el-tab-pane>
|
||||
</el-tabs>
|
||||
<template v-if="theme == '2'">
|
||||
<div class="divider-line"></div>
|
||||
<card-container class="card-container">
|
||||
<div class="mb-12">轮播设置</div>
|
||||
|
|
@ -100,7 +66,6 @@
|
|||
</div>
|
||||
</template>
|
||||
<script setup lang="ts">
|
||||
import { isEmpty } from "lodash";
|
||||
/**
|
||||
* @description: 博客列表（样式）
|
||||
* @param value{Object} 样式数据
|
||||
|
|
@ -116,15 +81,13 @@ const props = defineProps({
|
|||
type: Object,
|
||||
default: () => ({}),
|
||||
},
|
||||
defaultConfig: {
|
||||
type: Object,
|
||||
default: () => ({
|
||||
// 图片不同风格下的圆角
|
||||
img_radius_0: 4,
|
||||
img_radius_1: 0,
|
||||
}),
|
||||
},
|
||||
});
|
||||
const tabs_icon_name = ref('returned');
|
||||
// 动态生成 tab 配置
|
||||
const tabs = [
|
||||
{ label: "已回样式", value: "returned" },
|
||||
{ label: "未回样式", value: "not_replied_yet" },
|
||||
];
|
||||
// 默认值
|
||||
const state = reactive({
|
||||
form: props.value,
|
||||
|
|
@ -133,29 +96,11 @@ const state = reactive({
|
|||
// 如果需要解构，确保使用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();
|
||||
form.value.ask_color_list = arry;
|
||||
form.value.ask_direction = type.toString();
|
||||
};
|
||||
const common_style_update = (value: any) => {
|
||||
form.value.common_style = value;
|
||||
|
|
|
|||
|
|
@ -46,15 +46,15 @@
|
|||
</el-form-item>
|
||||
</card-container>
|
||||
<div class="divider-line"></div>
|
||||
<card-container>
|
||||
<el-tabs v-model="tabs_name" class="content-tabs">
|
||||
<el-tab-pane v-for="(tab, index) in base_list.tabs" :key="index" :label="tab.label" :name="tab.name">
|
||||
<el-form-item :label="tab.label">
|
||||
<img-or-icon-or-text-content v-model:value="form" :type="tab.name" />
|
||||
</el-form-item>
|
||||
</el-tab-pane>
|
||||
</el-tabs>
|
||||
</card-container>
|
||||
<!-- <card-container> -->
|
||||
<el-tabs v-model="tabs_name" class="content-tabs">
|
||||
<el-tab-pane v-for="(tab, index) in base_list.tabs" :key="index" :label="tab.label" :name="tab.name">
|
||||
<el-form-item :label="tab.label">
|
||||
<img-or-icon-or-text-content v-model:value="form" :type="tab.name" />
|
||||
</el-form-item>
|
||||
</el-tab-pane>
|
||||
</el-tabs>
|
||||
<!-- </card-container> -->
|
||||
</el-form>
|
||||
<url-value-dialog v-model:dialog-visible="url_value_dialog_visible" :type="['binding']" :multiple="url_value_multiple_bool" @update:model-value="url_value_dialog_call_back"></url-value-dialog>
|
||||
</div>
|
||||
|
|
@ -203,20 +203,20 @@ const url_value_dialog_call_back = (item: any[]) => {
|
|||
};
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
:deep(.el-tabs.content-tabs) {
|
||||
.el-tabs__header.is-top {
|
||||
background: #fff;
|
||||
margin: 0;
|
||||
padding-top: 0rem;
|
||||
}
|
||||
.el-tabs__item.is-top {
|
||||
padding: 0;
|
||||
align-items: center;
|
||||
width: 10rem;
|
||||
font-size: 1.4rem;
|
||||
}
|
||||
.el-tabs__active-bar{
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
// :deep(.el-tabs.content-tabs) {
|
||||
// .el-tabs__header.is-top {
|
||||
// background: #fff;
|
||||
// margin: 0;
|
||||
// padding-top: 0rem;
|
||||
// }
|
||||
// .el-tabs__item.is-top {
|
||||
// padding: 0;
|
||||
// align-items: center;
|
||||
// width: 10rem;
|
||||
// font-size: 1.4rem;
|
||||
// }
|
||||
// .el-tabs__active-bar{
|
||||
// width: 100%;
|
||||
// }
|
||||
// }
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -170,20 +170,4 @@ const common_style_update = (value: any) => {
|
|||
};
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
:deep(.el-tabs.content-tabs) {
|
||||
.el-tabs__header.is-top {
|
||||
background: #fff;
|
||||
margin: 0;
|
||||
padding-top: 0rem;
|
||||
}
|
||||
.el-tabs__item.is-top {
|
||||
padding: 0;
|
||||
align-items: center;
|
||||
width: 10rem;
|
||||
font-size: 1.4rem;
|
||||
}
|
||||
.el-tabs__active-bar{
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -213,10 +213,16 @@ onMounted(() => {
|
|||
});
|
||||
// 获取优惠券列表
|
||||
const get_coupon = () => {
|
||||
const { number, type } = form.value;
|
||||
const { number, type, keywords, expire_type_ids, use_limit_type_ids, order_by_type, order_by_rule, is_repeat_receive } = form.value;
|
||||
const params = {
|
||||
number: number,
|
||||
type: type.length > 0 ? type.join(',') : '',
|
||||
coupon_number: number,
|
||||
coupon_type_ids: type.length > 0 ? type.join(',') : '',
|
||||
coupon_keywords: keywords,
|
||||
coupon_expire_type_ids: expire_type_ids.length > 0 ? expire_type_ids.join(',') : '',
|
||||
coupon_use_limit_type_ids: use_limit_type_ids.length > 0 ? use_limit_type_ids.join(',') : '',
|
||||
coupon_order_by_type: order_by_type,
|
||||
coupon_order_by_rule: order_by_rule,
|
||||
coupon_is_repeat_receive: is_repeat_receive,
|
||||
};
|
||||
// 获取商品列表
|
||||
CouponAPI.getCoupon(params).then((res: any) => {
|
||||
|
|
@ -230,8 +236,8 @@ const get_coupon = () => {
|
|||
};
|
||||
// 监听数据类型
|
||||
const data_list_computer = computed(() => {
|
||||
const { data_type, type, number, data_list } = form.value;
|
||||
return { data_type, type, number, data_list };
|
||||
const { data_type, type, number, data_list, keywords, expire_type_ids, use_limit_type_ids, order_by_type, order_by_rule, is_repeat_receive } = form.value;
|
||||
return { data_type, type, number, data_list, keywords, expire_type_ids, use_limit_type_ids, order_by_type, order_by_rule, is_repeat_receive };
|
||||
});
|
||||
// 监听数据类型变化
|
||||
watch(
|
||||
|
|
|
|||
|
|
@ -30,13 +30,39 @@
|
|||
</el-form-item>
|
||||
</template>
|
||||
<template v-else>
|
||||
<el-form-item label="关键字">
|
||||
<el-input v-model="keywords" placeholder="请输入优惠劵关键字" clearable @blur="keyword_blur"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="类型">
|
||||
<el-select v-model="form.type" multiple collapse-tags filterable placeholder="请选择优惠券类型">
|
||||
<el-option v-for="item in base_list.type_list" :key="item.value" :label="item.name" :value="item.value" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="展示数量">
|
||||
<slider v-model="form.number"></slider>
|
||||
<el-form-item label="到期类型">
|
||||
<el-select v-model="form.expire_type_ids" multiple collapse-tags filterable placeholder="请选择到期类型">
|
||||
<el-option v-for="item in get_data_list(common_store.common.plugins, 'coupon.expire_type_list')" :key="item.value" :label="item.name" :value="item.value" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="使用限制">
|
||||
<el-select v-model="form.use_limit_type_ids" multiple collapse-tags filterable placeholder="请选择使用限制">
|
||||
<el-option v-for="item in get_data_list(common_store.common.plugins, 'coupon.use_limit_type_list')" :key="item.value" :label="item.name" :value="item.value" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="显示数量">
|
||||
<el-input-number v-model="form.number" :min="1" :max="50" 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="form.order_by_type">
|
||||
<el-radio v-for="item in get_data_list(common_store.common.plugins, 'coupon.order_by_type_list')" :key="item.index" :value="item.index">{{ item.name }}</el-radio>
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
<el-form-item label="排序规则">
|
||||
<el-radio-group v-model="form.order_by_rule">
|
||||
<el-radio v-for="item in common_store.common.data_order_by_rule_list" :key="item.index" :value="item.index">{{ item.name }}</el-radio>
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
<el-form-item label="首页显示">
|
||||
<el-switch v-model="form.is_repeat_receive" active-value="1" inactive-value="0" />
|
||||
</el-form-item>
|
||||
</template>
|
||||
<template v-if="form.theme === '4'">
|
||||
|
|
@ -53,7 +79,7 @@
|
|||
<url-value-dialog v-model:dialog-visible="url_value_dialog_visible" :type="['coupon']" multiple @update:model-value="url_value_dialog_call_back"></url-value-dialog>
|
||||
</template>
|
||||
<script setup lang="ts">
|
||||
import { online_url, is_obj_empty } from '@/utils';
|
||||
import { online_url, is_obj_empty, get_data_list } from '@/utils';
|
||||
import { commonStore } from '@/store';
|
||||
const common_store = commonStore();
|
||||
/**
|
||||
|
|
@ -110,6 +136,10 @@ const emit = defineEmits(['update:change-theme']);
|
|||
const themeChange = (val: string) => {
|
||||
emit('update:change-theme', val);
|
||||
};
|
||||
const keywords = ref(form.value.keywords);
|
||||
const keyword_blur = () => {
|
||||
form.value.keywords = keywords.value;
|
||||
}
|
||||
// 移除
|
||||
const remove = (index: number) => {
|
||||
form.value.data_list.splice(index, 1);
|
||||
|
|
|
|||
|
|
@ -241,20 +241,4 @@ const common_style_update = (value: any) => {
|
|||
};
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
:deep(.el-tabs.content-tabs) {
|
||||
.el-tabs__header.is-top {
|
||||
background: #fff;
|
||||
margin: 0;
|
||||
padding-top: 0rem;
|
||||
}
|
||||
.el-tabs__item.is-top {
|
||||
padding: 0;
|
||||
align-items: center;
|
||||
width: 9rem;
|
||||
font-size: 1.4rem;
|
||||
}
|
||||
.el-tabs__active-bar{
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -8,20 +8,15 @@
|
|||
<div class="flex-row align-c gap-5">
|
||||
<template v-if="!isEmpty(item) && is_show('head')">
|
||||
<div class="oh re">
|
||||
<template v-if="!isEmpty(item.new_cover)">
|
||||
<image-empty v-model="item.new_cover[0]" :style="heading_img_radius"></image-empty>
|
||||
</template>
|
||||
<template v-else>
|
||||
<image-empty v-model="item.head_img" :style="heading_img_radius"></image-empty>
|
||||
</template>
|
||||
<image-empty v-model="item.user.avatar" :style="heading_img_radius"></image-empty>
|
||||
</div>
|
||||
</template>
|
||||
<span v-if="is_show('nick_name')" class="flex-1 text-line-1" :style="trends_config('nick_name')">{{ item.nick_name }}</span>
|
||||
<span v-if="is_show('nick_name')" class="text-line-1" :style="trends_config('nick_name')">{{ item.user.user_name_view }}</span>
|
||||
<template v-if="is_show('goods_image')">
|
||||
<image-empty v-model="item.goods_images" :style="goods_image_radius"></image-empty>
|
||||
<image-empty v-model="item.goods_url" :style="goods_image_radius"></image-empty>
|
||||
</template>
|
||||
<span v-if="is_show('goods_title')" class="flex-1 text-line-1" :style="trends_config('goods_title')">{{ item.goods_title }}</span>
|
||||
<span v-if="is_show('time')" class="nowarp" :style="trends_config('time')">{{ item.time }}</span>
|
||||
<span v-if="is_show('goods_title')" class="flex-1 text-line-1" :style="trends_config('goods_title')">{{ item.title }}</span>
|
||||
<span v-if="is_show('time')" class="nowarp" :style="trends_config('time')">{{ item.add_time }}</span>
|
||||
</div>
|
||||
</swiper-slide>
|
||||
</swiper>
|
||||
|
|
@ -35,10 +30,10 @@
|
|||
<div :style="swiper_horizontal_container + 'width: auto;'">
|
||||
<div class="flex-row align-c gap-5" :style="swiper_horizontal_img_container">
|
||||
<template v-if="is_show('goods_image')">
|
||||
<image-empty v-model="item1.goods_images" :style="goods_image_radius"></image-empty>
|
||||
<image-empty v-model="item1.goods_url" :style="goods_image_radius"></image-empty>
|
||||
</template>
|
||||
<span v-if="is_show('goods_title')" class="flex-1 text-line-1" :style="trends_config('goods_title') + `max-width: ${ max_title_width }px;`">{{ item1.goods_title }}</span>
|
||||
<span v-if="is_show('time')" class="nowarp" :style="trends_config('time')">{{ item1.time }}</span>
|
||||
<span v-if="is_show('goods_title')" class="flex-1 text-line-1" :style="trends_config('goods_title') + `max-width: ${ max_title_width }px;`">{{ item1.title }}</span>
|
||||
<span v-if="is_show('time')" class="nowarp" :style="trends_config('time')">{{ item1.add_time }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</swiper-slide>
|
||||
|
|
@ -52,6 +47,7 @@
|
|||
<script setup lang="ts">
|
||||
import { common_styles_computer, common_img_computer, get_math, gradient_handle, radius_computer, background_computer, padding_computer } from '@/utils';
|
||||
import { isEmpty, cloneDeep } from 'lodash';
|
||||
import SalerecordsAPI from '@/api/salerecords';
|
||||
import { Swiper, SwiperSlide } from 'swiper/vue';
|
||||
import { Autoplay } from 'swiper/modules';
|
||||
const modules = [Autoplay];
|
||||
|
|
@ -113,20 +109,22 @@ const style_container = computed(() => common_styles_computer(new_style.value.co
|
|||
const style_img_container = computed(() => common_img_computer(new_style.value.common_style));
|
||||
//#region 列表数据
|
||||
type data_list = {
|
||||
head_img: string,
|
||||
new_cover: string[],
|
||||
nick_name: string,
|
||||
goods_title: string,
|
||||
goods_images: string,
|
||||
time: string
|
||||
user: {
|
||||
avatar: string,
|
||||
user_name_view: string,
|
||||
},
|
||||
title: string,
|
||||
goods_url: string,
|
||||
add_time: string
|
||||
}
|
||||
const default_list = {
|
||||
head_img: '',
|
||||
new_cover: [],
|
||||
nick_name: '测试昵称测试昵称测试昵称测试昵称',
|
||||
goods_title: '测试商品标题测试',
|
||||
goods_images: '',
|
||||
time: '02-04 23:01:01'
|
||||
user: {
|
||||
avatar: '',
|
||||
user_name_view: '测试昵称测试昵称测试昵称测试昵称',
|
||||
},
|
||||
title: '测试商品标题测试',
|
||||
goods_url: '',
|
||||
add_time: '02-04 23:01:01'
|
||||
};
|
||||
type split_list = {
|
||||
split_list: data_list[]
|
||||
|
|
@ -135,65 +133,42 @@ const new_list = ref<split_list[]>([]);
|
|||
const list = ref<data_list[]>([]);
|
||||
// 初始化的时候执行
|
||||
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') {
|
||||
if (!isEmpty(form.value.data_auto_list) && form.value.data_type == '1') {
|
||||
// 筛选商品并且筛选商品数组不为空
|
||||
list.value = form.value.data_auto_list;
|
||||
} else {
|
||||
list.value = Array(50).fill(default_list);
|
||||
list.value = Array(10).fill(default_list);
|
||||
}
|
||||
});
|
||||
|
||||
const get_products = () => {
|
||||
const { category_ids, brand_ids, number, order_by_type, order_by_rule, keywords } = form.value;
|
||||
const { number, keywords } = form.value;
|
||||
const params = {
|
||||
goods_keywords: keywords,
|
||||
goods_category_ids: category_ids,
|
||||
goods_brand_ids: brand_ids,
|
||||
goods_order_by_type: order_by_type,
|
||||
goods_order_by_rule: order_by_rule,
|
||||
goods_number: number,
|
||||
keywords: keywords,
|
||||
number: number,
|
||||
};
|
||||
list.value = Array(50).fill(default_list);
|
||||
// 获取商品列表
|
||||
// ShopAPI.getShopLists(params).then((res: any) => {
|
||||
// if (!isEmpty(res.data)) {
|
||||
// list.value = res.data;
|
||||
// } else {
|
||||
// list.value = Array(4).fill(default_list);
|
||||
// }
|
||||
// });
|
||||
SalerecordsAPI.getAutoList(params).then((res: any) => {
|
||||
if (!isEmpty(res.data)) {
|
||||
list.value = res.data;
|
||||
} else {
|
||||
list.value = Array(10).fill(default_list);
|
||||
}
|
||||
});
|
||||
};
|
||||
// 取出监听的数据
|
||||
const watch_data = computed(() => {
|
||||
const { category_ids, brand_ids, number, order_by_type, order_by_rule, data_type, data_list, keywords } = form.value;
|
||||
return { category_ids: category_ids, brand_ids: brand_ids, number: number, order_by_type: order_by_type, order_by_rule: order_by_rule, data_type: data_type, data_list: data_list, keyword: keywords };
|
||||
const { keywords, number } = form.value;
|
||||
return { keywords, number };
|
||||
})
|
||||
// 初始化的时候不执行, 监听数据变化
|
||||
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,
|
||||
title: !isEmpty(item.new_title) ? item.new_title : item.data.title,
|
||||
new_cover: item.new_cover,
|
||||
}));
|
||||
} else {
|
||||
list.value = Array(4).fill(default_list);
|
||||
}
|
||||
} else {
|
||||
get_products();
|
||||
}
|
||||
get_products();
|
||||
}
|
||||
}, { deep: true });
|
||||
}, { immediate: true, deep: true });
|
||||
//#endregion
|
||||
//#region 轮播设置
|
||||
// 轮播图key值
|
||||
|
|
|
|||
|
|
@ -22,13 +22,19 @@
|
|||
<div class="divider-line"></div>
|
||||
<card-container class="card-container-br">
|
||||
<div class="mb-12">自动读取</div>
|
||||
<el-form-item label="关键字">
|
||||
<el-input v-model="keywords" placeholder="请输入记录关键字" clearable @blur="keyword_blur"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="读取数量">
|
||||
<el-input-number v-model="form.show_number" :min="1" :max="50" type="number" placeholder="请输入读取数量" value-on-clear="min" class="w number-show" controls-position="right"></el-input-number>
|
||||
<el-input-number v-model="form.number" :min="1" :max="50" type="number" placeholder="请输入读取数量" value-on-clear="min" class="w number-show" controls-position="right"></el-input-number>
|
||||
</el-form-item>
|
||||
</card-container>
|
||||
<div class="divider-line"></div>
|
||||
<card-container>
|
||||
<div class="mb-12">显示内容</div>
|
||||
<el-form-item label="显示数量">
|
||||
<el-input-number v-model="form.show_number" :min="1" :max="50" 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-checkbox-group v-model="form.is_show">
|
||||
<el-checkbox v-for="item in base_list.filter(item => item.type.includes(form.rotation_direction))" :key="item.value" :value="item.value">{{ item.name }}</el-checkbox>
|
||||
|
|
@ -62,7 +68,11 @@ const state = reactive({
|
|||
});
|
||||
// 如果需要解构，确保使用toRefs
|
||||
const { form, data } = toRefs(state);
|
||||
|
||||
// 关键字处理
|
||||
const keywords = ref(form.value.keywords);
|
||||
const keyword_blur = () => {
|
||||
form.value.keywords = keywords.value;
|
||||
}
|
||||
const base_list = reactive([
|
||||
{ name: '头像', value: 'head', type: ['vertical'] },
|
||||
{ name: '昵称', value: 'nick_name', type: ['vertical'] },
|
||||
|
|
|
|||
|
|
@ -151,7 +151,6 @@ if (['0', '4'].includes(theme.value)) {
|
|||
}
|
||||
}
|
||||
|
||||
|
||||
// 多商户背景渐变设置
|
||||
const mult_color_picker_event = (arry: color_list[], type: number) => {
|
||||
form.value.shop_color_list = arry;
|
||||
|
|
|
|||
|
|
@ -7,8 +7,6 @@ interface defaultRealstore {
|
|||
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[];
|
||||
|
|
@ -17,38 +15,30 @@ interface defaultRealstore {
|
|||
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;
|
||||
is_show: 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;
|
||||
ask_color_list: color_list[];
|
||||
ask_direction: string;
|
||||
ask_background_img_style: string;
|
||||
ask_background_img: uploadList[];
|
||||
ask_margin: marginStyle;
|
||||
ask_padding: paddingStyle;
|
||||
ask_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,
|
||||
ask_title_color: string;
|
||||
ask_title_typeface: string;
|
||||
ask_title_size: number;
|
||||
ask_time_color: string;
|
||||
ask_time_typeface: string;
|
||||
ask_time_size: number;
|
||||
ask_page_view_color: string;
|
||||
ask_page_view_typeface: string;
|
||||
ask_page_view_size: number;
|
||||
is_roll: string;
|
||||
interval_time: number;
|
||||
rolling_fashion: string;
|
||||
|
|
@ -62,6 +52,8 @@ interface defaultRealstore {
|
|||
box_shadow_y: number;
|
||||
box_shadow_blur: number;
|
||||
box_shadow_spread: number;
|
||||
returned_style: object;
|
||||
not_replied_yet_style: object;
|
||||
common_style: object;
|
||||
};
|
||||
}
|
||||
|
|
@ -72,8 +64,6 @@ const defaultRealstore: defaultRealstore = {
|
|||
},
|
||||
theme: '0',
|
||||
carousel_col: 1,
|
||||
shop_desc: '1',
|
||||
shop_desc_row: '1',
|
||||
data_type: '0',
|
||||
data_list: [],
|
||||
data_auto_list: [],
|
||||
|
|
@ -82,40 +72,28 @@ const defaultRealstore: defaultRealstore = {
|
|||
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: '',
|
||||
is_show: ['time', 'page_view', 'reply_status', 'ranking'],
|
||||
},
|
||||
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: {
|
||||
ask_color_list: [{ color: '#fff', color_percentage: undefined }],
|
||||
ask_direction: '90deg',
|
||||
ask_background_img_style: '2',
|
||||
ask_background_img: [],
|
||||
ask_margin: {
|
||||
margin: 0,
|
||||
margin_top: 0,
|
||||
margin_bottom: 0,
|
||||
margin_left: 0,
|
||||
margin_right: 0,
|
||||
},
|
||||
shop_padding: {
|
||||
ask_padding: {
|
||||
padding: 10,
|
||||
padding_top: 10,
|
||||
padding_bottom: 10,
|
||||
padding_left: 10,
|
||||
padding_right: 10,
|
||||
},
|
||||
shop_radius: {
|
||||
ask_radius: {
|
||||
radius: 8,
|
||||
radius_top_left: 8,
|
||||
radius_top_right: 8,
|
||||
|
|
@ -127,46 +105,15 @@ const defaultRealstore: defaultRealstore = {
|
|||
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,
|
||||
},
|
||||
ask_title_color: '#333',
|
||||
ask_title_typeface: 'bold',
|
||||
ask_title_size: 14,
|
||||
ask_time_color: '#666',
|
||||
ask_time_typeface: '400',
|
||||
ask_time_size: 12,
|
||||
ask_page_view_color: '#666',
|
||||
ask_page_view_typeface: '400',
|
||||
ask_page_view_size: 12,
|
||||
// 是否滚动
|
||||
is_roll: '1',
|
||||
interval_time: 3,
|
||||
|
|
@ -187,6 +134,44 @@ const defaultRealstore: defaultRealstore = {
|
|||
box_shadow_y: 0,
|
||||
box_shadow_blur: 0,
|
||||
box_shadow_spread: 0,
|
||||
returned_style: {
|
||||
color_list: [{ color: '', color_percentage: undefined }],
|
||||
direction: '90deg',
|
||||
background_img_style: '2',
|
||||
background_img: [],
|
||||
font_color: '#ccc',
|
||||
font_size: 12,
|
||||
font_typeface: '400',
|
||||
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,
|
||||
},
|
||||
},
|
||||
not_replied_yet_style: {
|
||||
color_list: [{ color: '', color_percentage: undefined }],
|
||||
direction: '90deg',
|
||||
background_img_style: '2',
|
||||
background_img: [],
|
||||
font_color: '#ccc',
|
||||
font_size: 12,
|
||||
font_typeface: '400',
|
||||
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,
|
||||
},
|
||||
},
|
||||
// 公共样式
|
||||
common_style: {
|
||||
...defaultCommon,
|
||||
|
|
|
|||
|
|
@ -10,6 +10,12 @@ interface DefaultCoupon {
|
|||
data_type: string;
|
||||
type: string[];
|
||||
number: number;
|
||||
keywords: string,
|
||||
expire_type_ids: string[],
|
||||
use_limit_type_ids: string[],
|
||||
order_by_type: number,
|
||||
order_by_rule: number,
|
||||
is_repeat_receive: string,
|
||||
title: string;
|
||||
desc: string;
|
||||
data_list: object[];
|
||||
|
|
@ -49,6 +55,12 @@ const defaultCoupoin: DefaultCoupon = {
|
|||
data_type: '0',
|
||||
type: defaultSetting.coupon_ids,
|
||||
number: defaultSetting.page_size,
|
||||
keywords: '',
|
||||
expire_type_ids: [],
|
||||
use_limit_type_ids: [],
|
||||
order_by_type: 0,
|
||||
order_by_rule: 0,
|
||||
is_repeat_receive: '0',
|
||||
// 只有主题4用到
|
||||
title: '先领券 再购物',
|
||||
// 只有主题4用到
|
||||
|
|
|
|||
|
|
@ -8,7 +8,9 @@ interface defaultSalerecords {
|
|||
is_roll: string;
|
||||
rotation_direction: string;
|
||||
interval_time: number;
|
||||
show_number: number;
|
||||
keywords: string,
|
||||
show_number: number,
|
||||
number: number;
|
||||
is_show: string[];
|
||||
};
|
||||
style: {
|
||||
|
|
@ -68,6 +70,8 @@ const defaultSalerecords: defaultSalerecords = {
|
|||
rotation_direction: 'vertical',
|
||||
interval_time: 3,
|
||||
show_number: 2,
|
||||
keywords: '',
|
||||
number: 4,
|
||||
is_show: ['head', 'nick_name', 'goods_image', 'goods_title', 'time'],
|
||||
},
|
||||
style: {
|
||||
|
|
|
|||
Loading…
Reference in New Issue