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

修改接口数据处理

v1.3.0
于肖磊 2025-03-14 15:51:07 +08:00
parent 3d11c9abe2
commit 1476ba18b9
12 changed files with 252 additions and 136 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
src/api/shop.ts
View File

@ -1,5 +1,5 @@
import request from '@/utils/request'; import request from '@/utils/request';
import api_request from '@/utils/api-request';
class ShopAPI { class ShopAPI {
/** 分类品牌查询接口*/ /** 分类品牌查询接口*/
static getShop() { static getShop() {
@ -18,8 +18,8 @@ class ShopAPI {
} }
// 获取多商户的数据 // 获取多商户的数据
static getShopList(data: any) { static getShopList(data: any) {
return request({ return api_request({
url: `plugins/index/pluginsname/shop/pluginscontrol/diyshop/pluginsaction/index`, url: `?s=plugins/index/pluginsname/shop/pluginscontrol/diyshop/pluginsaction/autoshoplist.html`,
method: 'post', method: 'post',
data, data,
}); });

18
src/api/url-value.ts
View File

@ -69,13 +69,29 @@ class UrlValueAPI {
}); });
} }
/** 组合搭配指定数据 */ /** 组合搭配指定数据 */
static getBindingList(data: any) { static getBindingList(data: any) {
return api_request({ return api_request({
url: `?s=plugins/index/pluginsname/binding/pluginscontrol/diybinding/pluginsaction/index.html`, url: `?s=plugins/index/pluginsname/binding/pluginscontrol/diybinding/pluginsaction/index.html`,
method: 'post', method: 'post',
data, data,
}); });
} }
/** 多商户指定数据 */
static getShopList(data: any) {
return api_request({
url: `?s=plugins/index/pluginsname/shop/pluginscontrol/diyshop/pluginsaction/index.html`,
method: 'post',
data,
});
}
/** 多商户指定数据 */
static getRealstoreList(data: any) {
return api_request({
url: `?s=plugins/index/pluginsname/realstore/pluginscontrol/diyrealstore/pluginsaction/index.html`,
method: 'post',
data,
});
}
} }
export default UrlValueAPI; export default UrlValueAPI;

60
src/components/common/data-filter/index.vue
View File

@ -5,7 +5,7 @@
</el-radio-group> </el-radio-group>
</el-form-item> </el-form-item>
<div v-show="form.data_type === '0'" class="nav-list"> <div v-show="form.data_type === '0'" class="nav-list">
<drag-group :list="drag_list" :img-params="img_params" @onsort="data_list_sort" @remove="data_list_remove" @replace="data_list_replace"></drag-group> <drag-group :list="drag_list" :img-params="img_params" :titleParams="title_params" @onsort="data_list_sort" @remove="data_list_remove" @replace="data_list_replace"></drag-group>
<el-button class="mt-20 w" @click="add">+添加</el-button> <el-button class="mt-20 w" @click="add">+添加</el-button>
</div> </div>
<!-- 商品 --> <!-- 商品 -->
@ -39,8 +39,8 @@
</el-form-item> </el-form-item>
</div> </div>
</template> </template>
<!-- 文章 博客 博客选项卡--> <!-- 文章 博客-->
<template v-else-if="type === 'article' || ['blog', 'blog-tabs'].includes(type)"> <template v-else-if="['blog', 'article'].includes(type)">
<div v-show="form.data_type === '1'" class="w h"> <div v-show="form.data_type === '1'" class="w h">
<el-form-item label="关键字"> <el-form-item label="关键字">
<el-input v-model="keywords" placeholder="请输入文章关键字" clearable @blur="keyword_blur"></el-input> <el-input v-model="keywords" placeholder="请输入文章关键字" clearable @blur="keyword_blur"></el-input>
@ -118,6 +118,45 @@
</el-form-item> </el-form-item>
</div> </div>
</template> </template>
<!-- 多商户 | 多门店 -->
<template v-else-if="['realstore', 'merchant'].includes(type)">
<div v-show="form.data_type === '1'" class="w h">
<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.category_ids" multiple collapse-tags filterable placeholder="请选择类型">
<template v-if="type === 'realstore'">
<el-option v-for="item in get_data_list(common_store.common.plugins, 'realstore.category_list')" :key="item.id" :label="item.name" :value="item.id" />
</template>
<template v-else>
<el-option v-for="item in get_data_list(common_store.common.plugins, 'shop.category_list')" :key="item.id" :label="item.name" :value="item.id" />
</template>
</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">
<template v-if="type === 'realstore'">
<el-radio v-for="item in get_data_list(common_store.common.plugins, 'realstore.order_by_type_list')" :key="item.index" :value="item.index">{{ item.name }}</el-radio>
</template>
<template v-else>
<el-radio v-for="item in get_data_list(common_store.common.plugins, 'shop.order_by_type_list')" :key="item.index" :value="item.index">{{ item.name }}</el-radio>
</template>
</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_goods_list" active-value="1" inactive-value="0" />
</el-form-item>
</div>
</template>
<template v-else> <template v-else>
<div v-show="form.data_type === '1'" class="w h"> <div v-show="form.data_type === '1'" class="w h">
<el-form-item label="关键字"> <el-form-item label="关键字">
@ -177,20 +216,33 @@
} }
const option_list = ref<option[]>([]); const option_list = ref<option[]>([]);
const img_params = ref('logo'); const img_params = ref('logo');
const title_params = ref('title');
// 更新数据，避免子组件数据不刷新 // 更新数据，避免子组件数据不刷新
watchEffect(() => { watchEffect(() => {
// 商品
if (props.type === 'goods') { if (props.type === 'goods') {
option_list.value = props.baseList.product_list; option_list.value = props.baseList.product_list;
img_params.value = 'images'; img_params.value = 'images';
} else if (props.type === 'article' || ['blog', 'blog-tabs'].includes(props.type)) { title_params.value = 'title';
} else if (['blog', 'article'].includes(props.type)) {
// 文章 博客选项卡 博客
option_list.value = props.baseList.data_type_list; option_list.value = props.baseList.data_type_list;
img_params.value = 'cover'; img_params.value = 'cover';
title_params.value = 'title';
} else if (props.type === 'binding') { } else if (props.type === 'binding') {
// 组合搭配
option_list.value = props.baseList.data_type_list; option_list.value = props.baseList.data_type_list;
img_params.value = 'images'; img_params.value = 'images';
title_params.value = 'title';
} else if (['realstore', 'merchant'].includes(props.type)) {
// 多商户 多门店
option_list.value = props.baseList.data_type_list;
img_params.value = 'logo';
title_params.value = 'name';
} else { } else {
option_list.value = props.baseList.brand_data_type_list; option_list.value = props.baseList.brand_data_type_list;
img_params.value = 'logo'; img_params.value = 'logo';
title_params.value = 'title';
} }
// 关键字信息 // 关键字信息
keywords.value = props.value.keywords; keywords.value = props.value.keywords;

4
src/components/common/filter-form/index.vue
View File

@ -4,10 +4,10 @@
<div v-if="!isEmpty(item.form_name) && !isEmpty(new_dataInterface) && !isEmpty(item.type)" class="filter-style flex-row gap-12"> <div v-if="!isEmpty(item.form_name) && !isEmpty(new_dataInterface) && !isEmpty(item.type)" class="filter-style flex-row gap-12">
<div v-if="!isEmpty(item.title)" :class="['title text-line-1', props.direction == 'vertical' ? '' : 'horizontal-title']" :style="`width: ${ Number(props.titleWidth) > 0 ? props.titleWidth + 'px;' : '100%' }`">{{ item.title }}</div> <div v-if="!isEmpty(item.title)" :class="['title text-line-1', props.direction == 'vertical' ? '' : 'horizontal-title']" :style="`width: ${ Number(props.titleWidth) > 0 ? props.titleWidth + 'px;' : '100%' }`">{{ item.title }}</div>
<div class="w h flex-1 vertical-style"> <div class="w h flex-1 vertical-style">
<div class="flex-row align-c gap-10"> <div class="flex-row align-c gap-10 w h">
<template v-if="item.type == 'select'"> <template v-if="item.type == 'select'">
<template v-if="+item?.config?.is_level == 1"> <template v-if="+item?.config?.is_level == 1">
<div class="flex-row gap-10"> <div class="flex-row gap-10 w h">
<el-cascader v-model="new_dataInterface[item.form_name]" :placeholder="placeholder_config(item, 'select')" :show-all-levels="false" filterable clearable class="w h" collapse-tags popper-class="filter-form-cascader" :placement="+item?.config?.is_level == 1 && props.direction == 'vertical' ? 'left' : 'bottom'" :props="{'multiple': +item?.config?.is_multiple == 1, 'checkStrictly': true, 'emitPath': false, 'value': item?.data_key || 'id', 'label': item?.data_name || 'name', 'children': item?.config?.children || '' }" :options="selectData(item)" /> <el-cascader v-model="new_dataInterface[item.form_name]" :placeholder="placeholder_config(item, 'select')" :show-all-levels="false" filterable clearable class="w h" collapse-tags popper-class="filter-form-cascader" :placement="+item?.config?.is_level == 1 && props.direction == 'vertical' ? 'left' : 'bottom'" :props="{'multiple': +item?.config?.is_multiple == 1, 'checkStrictly': true, 'emitPath': false, 'value': item?.data_key || 'id', 'label': item?.data_name || 'name', 'children': item?.config?.children || '' }" :options="selectData(item)" />
<template v-if="+item?.config?.is_multiple == 1"> <template v-if="+item?.config?.is_multiple == 1">
<tooltip content="父级选中包含所有子级"></tooltip> <tooltip content="父级选中包含所有子级"></tooltip>

6
src/components/common/url-value/link-binding.vue
View File

@ -111,9 +111,9 @@ const get_list = (new_page: number) => {
}; };
loading.value = true; loading.value = true;
UrlValueAPI.getBindingList(new_data).then((res: any) => { UrlValueAPI.getBindingList(new_data).then((res: any) => {
tableData.value = res.data; tableData.value = res.data?.data_list || [];
data_total.value = res.data.length - 1; data_total.value = res.data?.data_total || 1;
page.value = new_page; page.value = res.data?.page || new_page;
setTimeout(() => { setTimeout(() => {
loading.value = false; loading.value = false;
}, 500); }, 500);

14
src/components/common/url-value/url-value-dialog.vue
View File

@ -58,6 +58,14 @@
<template v-else-if="link_select == 'binding'"> <template v-else-if="link_select == 'binding'">
<link-binding v-model="link_value" :multiple="multiple" :reset="reset_compontent"></link-binding> <link-binding v-model="link_value" :multiple="multiple" :reset="reset_compontent"></link-binding>
</template> </template>
<!-- 多商户 -->
<template v-else-if="link_select == 'merchant'">
<link-shop v-model="link_value" :multiple="multiple" :reset="reset_compontent"></link-shop>
</template>
<!-- 多门店 -->
<template v-else-if="link_select == 'realstore'">
<link-realstore v-model="link_value" :multiple="multiple" :reset="reset_compontent"></link-realstore>
</template>
</div> </div>
</div> </div>
<template #footer> <template #footer>
@ -166,6 +174,12 @@ const dialog_title = computed(() => {
name = '插件'; name = '插件';
} else if (props.type[0] == 'coupon') { } else if (props.type[0] == 'coupon') {
name = '优惠券'; name = '优惠券';
} else if (props.type[0] == 'binding') {
name = '组合搭配';
} else if (props.type[0] == 'merchant') {
name = '多商户';
} else if (props.type[0] == 'realstore') {
name = '多门店';
} }
return name + '选择'; return name + '选择';
} else { } else {

148
src/components/model-realstore/index.vue
View File

@ -12,18 +12,14 @@
<image-empty v-model="item.new_cover[0]" :class="`flex-img${theme}`" :style="content_img_radius"></image-empty> <image-empty v-model="item.new_cover[0]" :class="`flex-img${theme}`" :style="content_img_radius"></image-empty>
</template> </template>
<template v-else> <template v-else>
<image-empty v-model="item.images" :class="`flex-img${theme}`" :style="content_img_radius"></image-empty> <image-empty v-model="item.logo" :class="`flex-img${theme}`" :style="content_img_radius"></image-empty>
</template> </template>
</div> </div>
</template> </template>
<div class="flex-1 flex-col" :style="content_style"> <div class="flex-1 flex-col" :style="content_style">
<div class="flex-col jc-sb gap-10"> <div class="flex-col jc-sb gap-10">
<div class="flex-row jc-sb align-c gap-10"> <div class="flex-row jc-sb align-c gap-10">
<div class="text-line-2" :style="trends_config('title')"> <div class="text-line-2" :style="trends_config('title')">{{ item.name }}</div>
<template v-for="(item1, index1) in new_url_list(item.title_url)" :key="index1">
<img :src="item1.url" class="title-img" :style="title_img_style(item.title_url, index1) + 'vertical-align: middle;'" />
</template>{{ item.title }}
</div>
<div v-if="['0', '2'].includes(theme)" class="flex-row align-c" :style="`gap: ${ new_style.phone_navigation_spacing }px;`"> <div v-if="['0', '2'].includes(theme)" class="flex-row align-c" :style="`gap: ${ new_style.phone_navigation_spacing }px;`">
<img-or-icon-or-text :value="props.value" type="phone" /> <img-or-icon-or-text :value="props.value" type="phone" />
<img-or-icon-or-text :value="props.value" type="navigation" /> <img-or-icon-or-text :value="props.value" type="navigation" />
@ -32,18 +28,21 @@
<div class="flex-row gap-2 align-c"> <div class="flex-row gap-2 align-c">
<img-or-icon-or-text :value="props.value" type="time" /> <img-or-icon-or-text :value="props.value" type="time" />
<div class="flex-1 flex-row align-c"> <div class="flex-1 flex-row align-c">
<span class="text-line-1" :style="trends_config('state')">{{ item.state }}</span> <span class="text-line-1" :style="trends_config('state') + `color: ${ item.status_info.status == 1 ? new_style.realstore_state_color : new_style.realstore_default_state_color }`">{{ item.status_info.msg }}</span>
<span v-if="!isEmpty(item.state) || !isEmpty(item.business_hours)" :style="'color: #ccc;' + margin_computer(new_style.realstore_business_distance)">|</span> <span v-if="!isEmpty(item.status_info.msg) || !isEmpty(item.status_info.time)" :style="'color: #ccc;' + margin_computer(new_style.realstore_business_distance)">|</span>
<span class="text-line-1" :style="trends_config('business_hours')">{{ item.business_hours }}</span> <span class="text-line-1" :style="trends_config('business_hours')">{{ item.status_info.time }}</span>
</div> </div>
</div> </div>
</div> </div>
<template v-if="theme !== '0' && ( form.is_location_show == '1' || !isEmpty(item.location))"> <template v-if="theme !== '0' && form.is_location_show == '1'">
<div :style="border_style"></div> <div :style="border_style"></div>
<div class="flex-row jc-sb align-c gap-10"> <div class="flex-row jc-sb align-c gap-10">
<div class="flex-row align-b gap-2"> <div class="flex-row align-c jc-sb">
<img-or-icon-or-text :value="props.value" type="location" /> <div class="flex-1 flex-row align-b gap-2">
<span class="text-line-2 flex-1" :style="trends_config('location')">{{ item.location }}</span> <img-or-icon-or-text :value="props.value" type="location" />
<span class="text-line-2 flex-1" :style="trends_config('location')">{{ item.province_name }}{{ item.city_name }}{{ item.county_name }}{{ item.address }}</span>
</div>
<span v-if="!isEmpty(item.distance) && theme != '1'" :style="trends_config('location')">距您{{ item.distance }}</span>
</div> </div>
<template v-if="!['0', '2'].includes(theme)"> <template v-if="!['0', '2'].includes(theme)">
<img-or-icon-or-text :value="props.value" type="navigation" /> <img-or-icon-or-text :value="props.value" type="navigation" />
@ -52,11 +51,14 @@
</template> </template>
</div> </div>
</div> </div>
<template v-if="theme == '0' && ( form.is_location_show == '1' || !isEmpty(item.location))"> <template v-if="theme == '0' && form.is_location_show == '1'">
<div :style="border_style"></div> <div :style="border_style"></div>
<div class="flex-row align-b gap-2"> <div class="flex-row align-c jc-sb">
<img-or-icon-or-text :value="props.value" type="location" /> <div class="flex-1 flex-row align-b gap-2">
<span class="text-line-2 flex-1" :style="trends_config('location')">{{ item.location }}</span> <img-or-icon-or-text :value="props.value" type="location" />
<span class="text-line-2 flex-1" :style="trends_config('location')">{{ item.province_name }}{{ item.city_name }}{{ item.county_name }}{{ item.address }}</span>
</div>
<span v-if="!isEmpty(item.distance)" :style="trends_config('location')">距您{{ item.distance }}</span>
</div> </div>
</template> </template>
</div> </div>
@ -73,20 +75,16 @@
<image-empty v-model="item.new_cover[0]" :class="`flex-img${theme}`" :style="content_img_radius"></image-empty> <image-empty v-model="item.new_cover[0]" :class="`flex-img${theme}`" :style="content_img_radius"></image-empty>
</template> </template>
<template v-else> <template v-else>
<image-empty v-model="item.images" :class="`flex-img${theme}`" :style="content_img_radius"></image-empty> <image-empty v-model="item.logo" :class="`flex-img${theme}`" :style="content_img_radius"></image-empty>
</template> </template>
</div> </div>
</template> </template>
<div class="flex-1 flex-col jc-sb gap-10" :style="content_style"> <div class="flex-1 flex-col jc-sb gap-10" :style="content_style">
<div class="text-line-2" :style="trends_config('title')"> <div class="text-line-2" :style="trends_config('title')">{{ item.name }}</div>
<template v-for="(item1, index1) in new_url_list(item.title_url)" :key="index1">
<img :src="item1.url" class="title-img" :style="title_img_style(item.title_url, index1) + 'vertical-align: middle;'" />
</template>{{ item.title }}
</div>
<div class="flex-row jc-sb align-c"> <div class="flex-row jc-sb align-c">
<div class="flex-1 flex-row gap-2 align-c"> <div class="flex-1 flex-row gap-2 align-c">
<img-or-icon-or-text :value="props.value" type="time" /> <img-or-icon-or-text :value="props.value" type="time" />
<span class="text-line-1" :style="trends_config('state')">{{ item.state }}</span> <span class="text-line-1" :style="trends_config('state') + `color: ${ item.status_info.status == 1 ? new_style.realstore_state_color : new_style.realstore_default_state_color }`">{{ item.status_info.msg }}</span>
</div> </div>
<img-or-icon-or-text :value="props.value" type="navigation" /> <img-or-icon-or-text :value="props.value" type="navigation" />
</div> </div>
@ -104,7 +102,7 @@
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 { 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 { old_margin } from "@/utils/common";
import { isEmpty, cloneDeep } from 'lodash'; import { isEmpty, cloneDeep } from 'lodash';
import ShopAPI from '@/api/shop'; import RealstoreAPI from '@/api/realstore';
import { Swiper, SwiperSlide } from 'swiper/vue'; import { Swiper, SwiperSlide } from 'swiper/vue';
import { Autoplay } from 'swiper/modules'; import { Autoplay } from 'swiper/modules';
const modules = [Autoplay]; const modules = [Autoplay];
@ -150,47 +148,42 @@ const border_style = computed(() => {
return border; return border;
}); });
//#region 列表数据 //#region 列表数据
type url = { type info = {
url: string; msg: string;
time: string;
status: number;
type: number;
} }
type data_list = { type data_list = {
title: string; name: string;
images: string; logo: string;
title_url: url[],
new_cover: string[]; new_cover: string[];
state: string; msg: string;
location: string; province_name: string;
business_hours: string; city_name: string;
county_name: string;
address: string;
distance: string,
time: string;
status_info: info;
} }
const default_list = { const default_list = {
title: '测试门店标题', name: '测试门店标题',
location: '测试地址', province_name: '测试地址',
title_url: [{ url: 'http://shopxo.com/static/diy/images/layout/siderbar/data-magic.png'}, { url: ''}], city_name: '',
images: '', county_name: '',
address: '',
logo: '',
new_cover: [], new_cover: [],
state: '营业中', distance: '12km',
business_hours: '7:00-22:00', status_info: {
msg: '营业中',
time: '7:00-22:00',
status: 1,
type: 0,
},
}; };
const list = ref<data_list[]>([]); const list = ref<data_list[]>([]);
const new_url_list = computed(() => {
return (title_url: url[]) => {
return title_url.filter(item1 => !isEmpty(item1.url));
}
});
// 标题图片样式
const title_img_style = computed(() => {
return (title_url: url[], index: number) => {
const { realstore_title_img_width = 0, realstore_title_img_height = 0, realstore_title_img_radius, realstore_title_img_inner_spacing, realstore_title_img_outer_spacing} = new_style.value;
let style = `width: ${realstore_title_img_width || 0 }px;height: ${ realstore_title_img_height || 0 }px;${ radius_computer(realstore_title_img_radius) }`;
const list = title_url.filter(item1 => !isEmpty(item1.url));
if (index < list.length - 1) {
style += `margin-right: ${ realstore_title_img_inner_spacing || 0}px;`;
} else {
style += `margin-right: ${ realstore_title_img_outer_spacing || 0}px;`;
}
return style;
}
});
// 初始化的时候执行 // 初始化的时候执行
onMounted(() => { onMounted(() => {
// 指定商品并且指定商品数组不为空 // 指定商品并且指定商品数组不为空
@ -209,29 +202,30 @@ onMounted(() => {
}); });
const get_products = () => { const get_products = () => {
const { category_ids, brand_ids, number, order_by_type, order_by_rule, keywords } = form.value; const { category_ids, is_goods_list, number, order_by_type, order_by_rule, keywords } = form.value;
const params = { const params = {
goods_keywords: keywords, realstore_keywords: keywords,
goods_category_ids: category_ids, realstore_category_ids: category_ids,
goods_brand_ids: brand_ids, realstore_order_by_type: order_by_type,
goods_order_by_type: order_by_type, realstore_order_by_rule: order_by_rule,
goods_order_by_rule: order_by_rule, realstore_number: number,
goods_number: number, realstore_is_goods_list: is_goods_list,
}; };
list.value = Array(4).fill(default_list); // 获取商户列表
// 获取商品列表 RealstoreAPI.getAutoList(params).then((res: any) => {
// ShopAPI.getShopLists(params).then((res: any) => { if (!isEmpty(res.data)) {
// if (!isEmpty(res.data)) { list.value = res.data;
// list.value = res.data; } else {
// } else { list.value = Array(4).fill(default_list);
// list.value = Array(4).fill(default_list); }
// } }).catch(() => {
// }); list.value = Array(4).fill(default_list);
});
}; };
// 取出监听的数据 // 取出监听的数据
const watch_data = computed(() => { const watch_data = computed(() => {
const { category_ids, brand_ids, number, order_by_type, order_by_rule, data_type, data_list, keywords } = form.value; const { category_ids, number, order_by_type, order_by_rule, data_type, data_list, keywords, is_goods_list } = 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 }; return { category_ids, number, order_by_type, order_by_rule, data_type, data_list, keywords, is_goods_list };
}) })
// 初始化的时候不执行, 监听数据变化 // 初始化的时候不执行, 监听数据变化
watch(() => watch_data.value, (val, oldVal) => { watch(() => watch_data.value, (val, oldVal) => {
@ -241,7 +235,7 @@ watch(() => watch_data.value, (val, oldVal) => {
if (!isEmpty(val.data_list)) { if (!isEmpty(val.data_list)) {
list.value = cloneDeep(val.data_list).map((item: any) => ({ list.value = cloneDeep(val.data_list).map((item: any) => ({
...item.data, ...item.data,
title: !isEmpty(item.new_title) ? item.new_title : item.data.title, name: !isEmpty(item.new_title) ? item.new_title : item.data.name,
new_cover: item.new_cover, new_cover: item.new_cover,
})); }));
} else { } else {

10
src/components/model-realstore/model-realstore-content.vue
View File

@ -192,16 +192,6 @@ const url_value_dialog_call_back = (item: any[]) => {
}; };
} }
}; };
// 标题浮起之后博客标题的颜色和字体更新
const switch_chage = (val: string | number | boolean) => {
if (val == '1') {
data.value.name_color = '#fff';
data.value.name_weight = '400';
} else {
data.value.name_color = '#333';
data.value.name_weight = 'bold';
}
};
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.content { .content {

88
src/components/model-shop/index.vue
View File

@ -11,7 +11,7 @@
<image-empty v-model="item.new_cover[0]" :class="`flex-img${theme}`" :style="content_img_radius"></image-empty> <image-empty v-model="item.new_cover[0]" :class="`flex-img${theme}`" :style="content_img_radius"></image-empty>
</template> </template>
<template v-else> <template v-else>
<image-empty v-model="item.images" :class="`flex-img${theme}`" :style="content_img_radius"></image-empty> <image-empty v-model="item.logo" :class="`flex-img${theme}`" :style="content_img_radius"></image-empty>
</template> </template>
</div> </div>
</template> </template>
@ -19,10 +19,10 @@
<div class="flex-1 flex-col jc-sb gap-10"> <div class="flex-1 flex-col jc-sb gap-10">
<div class="text-line-2" :style="trends_config('title')"> <div class="text-line-2" :style="trends_config('title')">
<template v-for="(item1, index1) in new_url_list(item.title_url)" :key="index1"> <template v-for="(item1, index1) in new_url_list(item.title_url)" :key="index1">
<img :src="item1.url" class="title-img" :style="title_img_style(item.title_url, index1) + 'vertical-align: middle;'" /> <img :src="item1.icon_url" class="title-img" :style="title_img_style(item.title_url, index1) + 'vertical-align: middle;'" />
</template>{{ item.title }} </template>{{ item.name }}
</div> </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.desc }}</span> <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 v-if="theme == '0'" class="flex-row align-c"> <div v-if="theme == '0'" class="flex-row align-c">
<img-or-icon-or-text :value="props.value" type="right" /> <img-or-icon-or-text :value="props.value" type="right" />
@ -42,17 +42,17 @@
<image-empty v-model="item.new_cover[0]" :class="`flex-img${theme}`" :style="content_img_radius"></image-empty> <image-empty v-model="item.new_cover[0]" :class="`flex-img${theme}`" :style="content_img_radius"></image-empty>
</template> </template>
<template v-else> <template v-else>
<image-empty v-model="item.images" :class="`flex-img${theme}`" :style="content_img_radius"></image-empty> <image-empty v-model="item.logo" :class="`flex-img${theme}`" :style="content_img_radius"></image-empty>
</template> </template>
</div> </div>
</template> </template>
<div class="flex-col jc-sb gap-10" :style="content_style"> <div class="flex-col jc-sb gap-10" :style="content_style">
<div class="text-line-2" :style="trends_config('title')"> <div class="text-line-2" :style="trends_config('title')">
<template v-for="(item1, index1) in new_url_list(item.title_url)" :key="index1"> <template v-for="(item1, index1) in new_url_list(item.title_url)" :key="index1">
<img :src="item1.url" class="title-img" :style="title_img_style(item.title_url, index1) + 'vertical-align: middle;'" /> <img :src="item1.icon_url" class="title-img" :style="title_img_style(item.title_url, index1) + 'vertical-align: middle;'" />
</template>{{ item.title }} </template>{{ item.name }}
</div> </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.desc }}</span> <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> </div>
</div> </div>
@ -106,26 +106,26 @@ const style_container = computed(() => common_styles_computer(new_style.value.co
const style_img_container = computed(() => common_img_computer(new_style.value.common_style)); const style_img_container = computed(() => common_img_computer(new_style.value.common_style));
//#region 列表数据 //#region 列表数据
type url = { type url = {
url: string; icon_url: string;
} }
type data_list = { type data_list = {
title: string; name: string;
title_url: url[], title_url: url[],
images: string; logo: string;
new_cover: string[]; new_cover: string[];
desc: string; describe: string;
} }
const default_list = { const default_list = {
title: '测试商户标题', name: '测试商户标题',
desc: '测试商户描述', describe: '测试商户描述',
title_url: [{ url: 'http://shopxo.com/static/diy/images/layout/siderbar/data-magic.png'}, { url: ''}], title_url: [{ icon_url: 'http://shopxo.com/static/diy/images/layout/siderbar/data-magic.png'}, { icon_url: ''}],
images: '', logo: '',
new_cover: [], new_cover: [],
}; };
const list = ref<data_list[]>([]); const list = ref<data_list[]>([]);
const new_url_list = computed(() => { const new_url_list = computed(() => {
return (title_url: url[]) => { return (title_url: url[]) => {
return title_url.filter(item1 => !isEmpty(item1.url)); return title_url.filter(item1 => !isEmpty(item1.icon_url));
} }
}); });
// 标题图片样式 // 标题图片样式
@ -133,7 +133,7 @@ const title_img_style = computed(() => {
return (title_url: url[], index: number) => { return (title_url: 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; 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) }`; let style = `width: ${shop_title_img_width || 0 }px;height: ${ shop_title_img_height || 0 }px;${ radius_computer(shop_title_img_radius) }`;
const list = title_url.filter(item1 => !isEmpty(item1.url)); const list = title_url.filter(item1 => !isEmpty(item1.icon_url));
if (index < list.length - 1) { if (index < list.length - 1) {
style += `margin-right: ${ shop_title_img_inner_spacing || 0}px;`; style += `margin-right: ${ shop_title_img_inner_spacing || 0}px;`;
} else { } else {
@ -146,33 +146,52 @@ const title_img_style = computed(() => {
onMounted(() => { onMounted(() => {
// 指定商品并且指定商品数组不为空 // 指定商品并且指定商品数组不为空
if (!isEmpty(form.value.data_list) && form.value.data_type == '0') { if (!isEmpty(form.value.data_list) && form.value.data_type == '0') {
list.value = form.value.data_list.map((item: any) => ({ const new_list = form.value.data_list.map((item: any) => ({
...item.data, ...item.data,
title: !isEmpty(item.new_title) ? item.new_title : item.data.title, title: !isEmpty(item.new_title) ? item.new_title : item.data.title,
new_cover: item.new_cover, new_cover: item.new_cover,
})); }));
list.value = list_handle(new_list);
} else if (!isEmpty(form.value.data_auto_list) && form.value.data_type == '1') { } else if (!isEmpty(form.value.data_auto_list) && form.value.data_type == '1') {
// 筛选商品并且筛选商品数组不为空 // 筛选商品并且筛选商品数组不为空
list.value = form.value.data_auto_list; list.value = list_handle(form.value.data_auto_list);
} else { } else {
list.value = Array(4).fill(default_list); list.value = Array(4).fill(default_list);
} }
}); });
const list_handle = (list: any[]) => {
list.forEach((item: any) => {
item.title_url = [];
if ((item.is_enable_auth || 0) == 1) {
if (item.auth_type != -1 && (item.auth_type_msg || null) != null) {
if (item.auth_type == 0) {
item.title_url.push({ icon_url: new_style.value.shop_auth_personal_icon });
} else if (item.auth_type == 1) {
item.title_url.push({ icon_url: new_style.value.shop_auth_company_icon });
}
if ((item.bond_status || 0) == 1 && (item.bond_status_msg || null) != null) {
item.title_url.push({ icon_url: new_style.value.shop_auth_bond_icon });
}
}
}
});
return list;
};
const get_products = () => { const get_shops = () => {
const { category_ids, brand_ids, number, order_by_type, order_by_rule, keywords } = form.value; const { category_ids, number, order_by_type, order_by_rule, keywords, is_goods_list } = form.value;
const params = { const params = {
goods_keywords: keywords, shop_keywords: keywords,
goods_category_ids: category_ids, shop_category_ids: category_ids,
goods_brand_ids: brand_ids, shop_order_by_type: order_by_type,
goods_order_by_type: order_by_type, shop_order_by_rule: order_by_rule,
goods_order_by_rule: order_by_rule, shop_number: number,
goods_number: number, shop_is_goods_list: is_goods_list,
}; };
// 获取商品列表 // 获取商品列表
ShopAPI.getShopList(params).then((res: any) => { ShopAPI.getShopList(params).then((res: any) => {
if (!isEmpty(res.data)) { if (!isEmpty(res.data)) {
list.value = res.data; list.value = list_handle(res.data);
} else { } else {
list.value = Array(4).fill(default_list); list.value = Array(4).fill(default_list);
} }
@ -182,8 +201,8 @@ const get_products = () => {
}; };
// 取出监听的数据 // 取出监听的数据
const watch_data = computed(() => { const watch_data = computed(() => {
const { category_ids, brand_ids, number, order_by_type, order_by_rule, data_type, data_list, keywords } = form.value; const { category_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 }; return { category_ids, number, order_by_type, order_by_rule, data_type, data_list, keywords };
}) })
// 初始化的时候不执行, 监听数据变化 // 初始化的时候不执行, 监听数据变化
watch(() => watch_data.value, (val, oldVal) => { watch(() => watch_data.value, (val, oldVal) => {
@ -193,14 +212,14 @@ watch(() => watch_data.value, (val, oldVal) => {
if (!isEmpty(val.data_list)) { if (!isEmpty(val.data_list)) {
list.value = cloneDeep(val.data_list).map((item: any) => ({ list.value = cloneDeep(val.data_list).map((item: any) => ({
...item.data, ...item.data,
title: !isEmpty(item.new_title) ? item.new_title : item.data.title, name: !isEmpty(item.new_title) ? item.new_title : item.data.name,
new_cover: item.new_cover, new_cover: item.new_cover,
})); }));
} else { } else {
list.value = Array(4).fill(default_list); list.value = Array(4).fill(default_list);
} }
} else { } else {
get_products(); get_shops();
} }
} }
}, { deep: true }); }, { deep: true });
@ -340,6 +359,9 @@ const content_outer_height = computed(() => new_style.value.content_outer_height
height: 5rem; height: 5rem;
} }
} }
.title-img {
object-fit: contain;
}
.two-columns { .two-columns {
width: calc((100% - v-bind(two_columns)) / 2); width: calc((100% - v-bind(two_columns)) / 2);
} }

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

@ -32,7 +32,7 @@
<card-container class="card-container-br"> <card-container class="card-container-br">
<div class="mb-12">商户设置</div> <div class="mb-12">商户设置</div>
<!-- 数据筛选组件, 根据数据源类型显示不同的筛选组件 --> <!-- 数据筛选组件, 根据数据源类型显示不同的筛选组件 -->
<data-filter type="shop" :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> <data-filter type="merchant" :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> </card-container>
<template v-if="form.theme == '0'"> <template v-if="form.theme == '0'">
<div class="divider-line"></div> <div class="divider-line"></div>
@ -60,7 +60,7 @@
</card-container> </card-container>
</template> </template>
</el-form> </el-form>
<url-value-dialog v-model:dialog-visible="url_value_dialog_visible" :type="['realstore']" :multiple="url_value_multiple_bool" @update:model-value="url_value_dialog_call_back"></url-value-dialog> <url-value-dialog v-model:dialog-visible="url_value_dialog_visible" :type="['merchant']" :multiple="url_value_multiple_bool" @update:model-value="url_value_dialog_call_back"></url-value-dialog>
</div> </div>
</template> </template>
<script setup lang="ts"> <script setup lang="ts">

16
src/config/const/realstore.ts
View File

@ -54,7 +54,14 @@ interface defaultRealstore {
content: { content: {
content_top: object; content_top: object;
theme: string; theme: string;
data_list: 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,
carousel_col: number; carousel_col: number;
is_navigation_show: string; is_navigation_show: string;
navigation_type: string; navigation_type: string;
@ -142,7 +149,14 @@ const defaultRealstore: defaultRealstore = {
...commonTop, ...commonTop,
}, },
theme: '0', theme: '0',
data_type: '0',
data_list: [], data_list: [],
data_auto_list: [],
category_ids: [],
number: 4,
order_by_type: 0,
order_by_rule: 0,
keywords: '',
carousel_col: 1, carousel_col: 1,
is_navigation_show: '1', is_navigation_show: '1',
navigation_type: 'img-icon', navigation_type: 'img-icon',

14
src/config/const/shop.ts
View File

@ -9,7 +9,14 @@ interface defaultRealstore {
carousel_col: number; carousel_col: number;
shop_desc: string; shop_desc: string;
shop_desc_row: string; shop_desc_row: string;
data_type: string,
data_list: 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; is_right_show: string;
right_type: string; right_type: string;
right_img: uploadList[]; right_img: uploadList[];
@ -67,7 +74,14 @@ const defaultRealstore: defaultRealstore = {
carousel_col: 1, carousel_col: 1,
shop_desc: '1', shop_desc: '1',
shop_desc_row: '1', shop_desc_row: '1',
data_type: '0',
data_list: [], data_list: [],
data_auto_list: [],
category_ids: [],
number: 4,
order_by_type: 0,
order_by_rule: 0,
keywords: '',
is_right_show: '1', is_right_show: '1',
right_type: 'img-icon', right_type: 'img-icon',
right_img: [], right_img: [],