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

修改商品选项卡的显示

v1.0.0
于肖磊 2024-09-09 11:02:47 +08:00
parent 5154ac7afe
commit 83f347e2b3
6 changed files with 40 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

36
src/components/model-goods-list/index.vue
View File

@ -223,20 +223,34 @@ const default_list = {
},
],
};
//#region 列表数据
const list = ref<data_list[]>([]);
// 初始化的时候执行
onBeforeMount(() => {
// 指定商品并且指定商品数组不为空
if (!isEmpty(form.value.data_list) && form.value.data_type == '0') {
list.value = form.value.data_list;
} else if (!isEmpty(form.value.data_auto_list) && form.value.data_type == '1') {
// 筛选商品并且筛选商品数组不为空
list.value = form.value.data_auto_list;
} else { // 为空的时候走默认数据
list.value = Array(4).fill(default_list);
}
});
const get_products = () => {
const { category, data_ids, number, sort, sort_rules } = form.value;
const { category, brand, number, sort, sort_rules } = form.value;
const params = {
goods_keywords: '',
goods_category_ids: category,
goods_brand_ids: data_ids,
goods_brand_ids: brand,
goods_order_by_type: sort,
goods_order_by_rule: sort_rules,
goods_number: number,
};
// 获取商品列表
ShopAPI.getShopLists(params).then((res: any) => {
form.value.data_auto_list = res.data;
if (!isEmpty(res.data)) {
list.value = res.data;
} else {
@ -244,11 +258,16 @@ const get_products = () => {
}
});
};
watchEffect(() => {
if (form.value.data_type == '0') {
if (!isEmpty(form.value.data_list)) {
list.value = cloneDeep(form.value.data_list).map((item: any) => ({
// 取出监听的数据
const watch_data = computed(() => {
const { category, brand, number, sort, sort_rules, data_type, data_list } = form.value;
return { category: category, brand: brand, number: number, sort: sort, sort_rules: sort_rules, data_type: data_type, data_list: data_list };
})
// 初始化的时候不执行, 监听数据变化
watch(() => watch_data.value, (val) => {
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,
@ -259,7 +278,8 @@ watchEffect(() => {
} else {
get_products();
}
});
}, { deep: true });
//#endregion
// 圆角设置
const content_radius = computed(() => radius_computer(new_style.value.shop_radius));

2
src/components/model-goods-list/model-goods-list-content.vue
View File

@ -38,7 +38,7 @@
</el-select>
</el-form-item>
<el-form-item label="指定品牌">
<el-select v-model="form.data_ids" multiple collapse-tags placeholder="请选择品牌">
<el-select v-model="form.brand" multiple collapse-tags placeholder="请选择品牌">
<el-option v-for="item in base_list.product_brand_list" :key="item.id" :label="item.name" :value="item.id" />
</el-select>
</el-form-item>

2
src/components/model-goods-tabs/index.vue
View File

@ -27,7 +27,7 @@ watch(tabs_list.value, (val) => {
// 产品的值
new_data.content.data_type = new_data.content.tabs_list[0].data_type;
new_data.content.category = new_data.content.tabs_list[0].category;
new_data.content.data_ids = new_data.content.tabs_list[0].data_ids;
new_data.content.brand = new_data.content.tabs_list[0].brand;
new_data.content.number = new_data.content.tabs_list[0].number;
new_data.content.sort = new_data.content.tabs_list[0].sort;
new_data.content.sort_rules = new_data.content.tabs_list[0].sort_rules;

2
src/components/model-goods-tabs/model-goods-tabs-content.vue
View File

@ -60,7 +60,7 @@
</el-select>
</el-form-item>
<el-form-item label="指定品牌">
<el-select v-model="row.data_ids" multiple collapse-tags placeholder="请选择商品品牌">
<el-select v-model="row.brand" multiple collapse-tags placeholder="请选择商品品牌">
<el-option v-for="item in base_list.product_brand_list" :key="item.id" :label="item.name" :value="item.id" />
</el-select>
</el-form-item>

4
src/views/layout/components/main/default/goods-list.ts
View File

@ -5,9 +5,11 @@ interface DefaultProductList {
data_type: string;
carousel_col: number;
category: string[];
brand: string[];
data_ids: string[];
product_show_list: string[];
data_list: string[];
data_auto_list: string[];
is_price_solo: string;
number: number;
sort: string;
@ -57,7 +59,9 @@ const defaultProductList: DefaultProductList = {
carousel_col: 3,
product_show_list: [],
data_list: [],
data_auto_list: [],
category: [],
brand: [],
data_ids: [],
is_price_solo: '1',
number: 4,

9
src/views/layout/components/main/default/goods-tabs.ts
View File

@ -6,6 +6,7 @@ interface articleTabsList {
desc: string;
data_type: string;
category: string[];
brand: string[];
data_ids: string[];
number: number;
sort: string;
@ -74,10 +75,10 @@ const defaultProductList: DefaultProductList = {
theme: '0',
carousel_col: 3,
tabs_list: [
{ id: '1', title: '热门推荐', img: [], desc: '简介', data_type: '0', category: [], data_ids: [], number: 4, sort: '0', sort_rules: '0', data_list: [] },
{ id: '2', title: '测试一', img: [], desc: '简介', data_type: '0', category: [], data_ids: [], number: 4, sort: '0', sort_rules: '0', data_list: [] },
{ id: '3', title: '测试二', img: [], desc: '简介', data_type: '0', category: [], data_ids: [], number: 4, sort: '0', sort_rules: '0', data_list: [] },
{ id: '4', title: '测试三', img: [], desc: '简介', data_type: '0', category: [], data_ids: [], number: 4, sort: '0', sort_rules: '0', data_list: [] },
{ id: '1', title: '热门推荐', img: [], desc: '简介', data_type: '0', category: [], brand: [], data_ids: [], number: 4, sort: '0', sort_rules: '0', data_list: [] },
{ id: '2', title: '测试一', img: [], desc: '简介', data_type: '0', category: [], brand: [], data_ids: [], number: 4, sort: '0', sort_rules: '0', data_list: [] },
{ id: '3', title: '测试二', img: [], desc: '简介', data_type: '0', category: [], brand: [], data_ids: [], number: 4, sort: '0', sort_rules: '0', data_list: [] },
{ id: '4', title: '测试三', img: [], desc: '简介', data_type: '0', category: [], brand: [], data_ids: [], number: 4, sort: '0', sort_rules: '0', data_list: [] },
],
is_show: ['title', 'plugins_view_icon', 'price', 'sales_count', 'original_price'],
is_shop_show: '1',