diff --git a/.local.config.js b/.local.config.js
index 9f45486..b2c63e3 100644
--- a/.local.config.js
+++ b/.local.config.js
@@ -127,11 +127,23 @@ const localDevConfig = ({
uniacid: 2821,
domain: 'https://xcx.aigc-quickapp.com/',
},
+ '18': { // 测试平台
+ uniacid: 18,
+ domain: 'https://test.aigc-quickapp.com',
+ },
+ '2': { // 测试平台
+ uniacid: 2,
+ domain: 'https://test.aigc-quickapp.com',
+ },
+ '48': { // 测试平台
+ uniacid: 48,
+ domain: 'https://test.aigc-quickapp.com',
+ },
// })['5g-237']; // 商品分类，没有立即咨询文字
// })['5g-97']; // 大宗商品贸易，支持自定义字体大小、颜色
// })['5g-50']; // 燃气安全产品机器人，购物车无反应
// })['2821']; // 离型纸硅油纸
-})['2482']; // 低空经济
+})['48']; // 离型纸硅油纸
// })['2485']; // 验证电子表单前后端数据一致性
// })['5g-11']; // 数码
// })['5g-213']; // 选择要使用的环境配置
diff --git a/components-diy/diy-category-item.vue b/components-diy/diy-category-item.vue
index f7a5d29..9c6e419 100644
--- a/components-diy/diy-category-item.vue
+++ b/components-diy/diy-category-item.vue
@@ -2,10 +2,50 @@
-
-
+
+
-
+
+
+
+ {{ one.category_name }}
+
+
+
+
+
+
+
+ {{ item.label_name }}
+
+
+
+ {{ isEnEnv ? item.en_goods_name : item.goods_name }}
+
+
+
+
+ {{ $lang('common.currencySymbol') }}
+ {{ parseFloat(showPrice(item)).toFixed(2).split('.')[0] }}
+ .{{ parseFloat(showPrice(item)).toFixed(2).split('.')[1] }}
+
+
+
+
+
+
+
+
+
+ {{ $lang('components-diy.diy-category.noCategory') }}
+
+
+
+
{{ category.category_name }}
-
+
{{ one.category_name }}
@@ -296,6 +336,14 @@ export default {
isList: {
type: Boolean,
default: false
+ },
+ lastSecondCategoryName: {
+ type: String,
+ default: ''
+ },
+ currentOneCategory: {
+ type: Object,
+ default: null
}
},
mixins: [DiyMinx],
@@ -316,13 +364,28 @@ export default {
scrollTop: 0,
loadType: '',
timeout: {},
- cartEditRepeat: false
+ cartEditRepeat: false,
+ selectedSecondCategory: null,
+ secondCategoryGoodsList: []
};
},
created() {
- this.type = this.value.template == 1 ? 'category' : 'goods';
+ this.type = this.value.template == 1 || this.value.template == 99 ? 'category' : 'goods';
if (this.index == this.select && this.pageIndex == 0) this.getGoodsList();
this.loadType = this.value.goodsLevel == 1 && this.value.loadType == 'all' ? 'all' : 'part';
+ if (this.value.template == 99 && this.index == this.select && this.category.child_list && this.category.child_list.length > 0) {
+ let targetCategory = null;
+ if (this.lastSecondCategoryName) {
+ targetCategory = this.category.child_list.find(item => item.category_name === this.lastSecondCategoryName);
+ }
+ if (!targetCategory) {
+ targetCategory = this.category.child_list[0];
+ }
+ this.selectedSecondCategory = targetCategory.category_id;
+ this.secondCategoryGoodsList = [];
+ // 用当前一级分类下同名二级分类的 id 查商品(而非全局按钮的 id)
+ this.refreshGoodsByCurrentCategory();
+ }
},
mounted() {
setTimeout(() => {
@@ -332,6 +395,18 @@ export default {
if (data) this.contentWrapHeight = data.height;
}).exec();
}, 1000);
+ if (this.value.template == 99 && this.category.child_list && this.category.child_list.length > 0) {
+ let targetCategory = null;
+ if (this.lastSecondCategoryName) {
+ targetCategory = this.category.child_list.find(item => item.category_name === this.lastSecondCategoryName);
+ }
+ if (!targetCategory) {
+ targetCategory = this.category.child_list[0];
+ }
+ this.selectedSecondCategory = targetCategory.category_id;
+ this.secondCategoryGoodsList = [];
+ this.getSecondCategoryGoods(targetCategory.category_id);
+ }
},
watch: {
oneCategorySelect: function () {
@@ -360,6 +435,27 @@ export default {
} else if (this.loadType == 'part') {
this.scrollTop = -1;
}
+ if (this.value.template == 99 && this.category.child_list && this.category.child_list.length > 0) {
+ let targetCategory = null;
+ if (this.lastSecondCategoryName) {
+ targetCategory = this.category.child_list.find(item => item.category_name === this.lastSecondCategoryName);
+ }
+ if (!targetCategory) {
+ targetCategory = this.category.child_list[0];
+ }
+ this.selectedSecondCategory = targetCategory.category_id;
+ this.secondCategoryGoodsList = [];
+ this.refreshGoodsByCurrentCategory();
+ }
+ },
+ // 切换一级分类时, 根据当前一级分类下同名二级分类重新加载商品
+ currentOneCategory: {
+ handler() {
+ if (this.value.template == 99) {
+ this.refreshGoodsByCurrentCategory();
+ }
+ },
+ deep: true
},
'globalStoreInfo.store_id': {
handler(nval, oval) {
@@ -739,6 +835,82 @@ export default {
if (!link) return;
this.$util.diyRedirectTo(JSON.parse(link));
},
+ /**
+ * 根据当前一级分类(currentOneCategory)下与选中按钮同名的二级分类, 加载对应商品
+ * 按钮是全局去重的(选中状态用全局 category_id), 但商品只显示当前一级分类下的
+ * 当前一级分类下若没有同名二级分类, 则商品清空(按钮保持选中)
+ */
+ refreshGoodsByCurrentCategory() {
+ if (this.selectedSecondCategory == null) {
+ this.secondCategoryGoodsList = [];
+ return;
+ }
+ // 取当前选中按钮的名称
+ const cur = (this.category.child_list || []).find(c => c.category_id === this.selectedSecondCategory);
+ if (!cur) {
+ this.secondCategoryGoodsList = [];
+ return;
+ }
+ const one = this.currentOneCategory;
+ if (!one || !one.child_list || one.child_list.length === 0) {
+ this.secondCategoryGoodsList = [];
+ return;
+ }
+ const match = one.child_list.find(c => c.category_name === cur.category_name);
+ if (match) {
+ this.getSecondCategoryGoods(match.category_id);
+ } else {
+ // 当前一级分类下没有该二级分类, 商品清空(按钮仍保持选中)
+ this.secondCategoryGoodsList = [];
+ }
+ },
+ selectSecondCategory(category) {
+ if (this.selectedSecondCategory === category.category_id) {
+ this.selectedSecondCategory = null;
+ this.secondCategoryGoodsList = [];
+ } else {
+ this.selectedSecondCategory = category.category_id;
+ this.secondCategoryGoodsList = [];
+ this.$emit('saveSecondCategory', category.category_name);
+ // 用当前一级分类下同名 category_id 查商品
+ this.refreshGoodsByCurrentCategory();
+ }
+ },
+ getSecondCategoryGoods(categoryId) {
+ this.loading = true;
+ let order = '';
+ let sort = '';
+ if (this.value.sortWay) {
+ if (this.value.sortWay == 'default') {
+ order = '';
+ sort = '';
+ } else if (this.value.sortWay == 'sales') {
+ order = 'sales';
+ sort = 'desc';
+ } else if (this.value.sortWay == 'price') {
+ order = 'min_price';
+ sort = this.value.sortType == 'desc' ? 'desc' : 'asc';
+ }
+ }
+ this.$api.sendRequest({
+ url: '/api/goodssku/pageByCategory',
+ data: {
+ category_id: categoryId,
+ page: 1,
+ page_size: this.pageSize,
+ order: order,
+ sort: sort
+ },
+ success: res => {
+ this.loading = false;
+ if (res.code == 0 && res.data && res.data.list) {
+ this.secondCategoryGoodsList = res.data.list;
+ } else {
+ this.secondCategoryGoodsList = [];
+ }
+ }
+ });
+ },
//加载商品在购物车的总数量
loadGoodsCartNum(isRefresh = false) {
this.goodsList.forEach((item) => {
@@ -1465,4 +1637,147 @@ export default {
.price-font {
font-weight: var(--diy-category-item-price-font-weight, 500) !important;
}
+
+// ===================== 模板99 商品分类样式 =====================
+.second-category-btns {
+ display: flex;
+ flex-wrap: wrap;
+ padding: 20rpx 20rpx 10rpx;
+ background: #fff;
+ border-bottom: 1rpx solid #f0f0f0;
+
+ .second-category-btn {
+ padding: 14rpx 32rpx;
+ background: #f5f5f5;
+ color: #666;
+ border-radius: 40rpx;
+ font-size: 26rpx;
+ margin: 0 16rpx 16rpx 0;
+ max-width: 100%;
+ white-space: nowrap;
+ overflow: hidden;
+ text-overflow: ellipsis;
+
+ &.selected {
+ background: #FF6B35;
+ color: #fff;
+ }
+ }
+}
+
+.category-goods-list {
+ padding: 20rpx;
+ background: #f5f5f5;
+ width: 100%;
+ box-sizing: border-box;
+
+ .goods-list {
+ margin: 0;
+ padding-top: 0;
+ display: flex;
+
+ .goods-item {
+ width: calc(50% - 10rpx);
+ background: #fff;
+ border-radius: 12rpx;
+ overflow: hidden;
+ margin-bottom: 20rpx;
+ display: flex;
+ flex-direction: column;
+ box-sizing: border-box;
+
+ .goods-img {
+ width: 100%;
+ height: 0;
+ padding-top: 100%;
+ position: relative;
+ overflow: hidden;
+ background: #fff;
+ border-top-left-radius: 12rpx;
+ border-top-right-radius: 12rpx;
+
+ image {
+ width: 100%;
+ height: 100%;
+ position: absolute !important;
+ top: 0;
+ left: 0;
+ transform: none;
+ }
+
+ .goods-tag {
+ position: absolute;
+ top: 10rpx;
+ left: 10rpx;
+ padding: 4rpx 12rpx;
+ color: #fff;
+ font-size: 22rpx;
+ border-radius: 6rpx;
+ background: #FF6B35;
+ z-index: 2;
+ }
+ }
+
+ .info-wrap {
+ flex: 1;
+ padding: 16rpx;
+ display: flex;
+ flex-direction: column;
+ }
+
+ .name-wrap {
+ .goods-name {
+ font-size: 26rpx;
+ color: #333;
+ -webkit-line-clamp: 2;
+ display: -webkit-box;
+ -webkit-box-orient: vertical;
+ overflow: hidden;
+ line-height: 1.4;
+ margin-top: 0;
+ white-space: normal;
+ text-overflow: clip;
+ }
+ }
+
+ .price-wrap {
+ margin-top: 10rpx;
+ display: flex;
+ align-items: baseline;
+ justify-content: space-between;
+
+ .discount-price {
+ color: #FF6B35;
+ font-size: 30rpx;
+ font-weight: bold;
+
+ .unit {
+ font-size: 22rpx;
+ }
+ }
+ }
+ }
+ }
+}
+
+.category-goods-empty {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ justify-content: center;
+ padding: 80rpx 0;
+ background: #f5f5f5;
+ width: 100%;
+
+ image {
+ width: 280rpx;
+ height: 252rpx;
+ }
+
+ .tips {
+ font-size: 26rpx;
+ color: #999;
+ margin-top: 20rpx;
+ }
+}
\ No newline at end of file
diff --git a/components-diy/diy-category.vue b/components-diy/diy-category.vue
index e6e01ce..a7186e6 100644
--- a/components-diy/diy-category.vue
+++ b/components-diy/diy-category.vue
@@ -92,17 +92,30 @@
-
+
+
+
+
+
+ :id="'category-' + index" :style="{ display: value.template == 99 && select != index ? 'none' : 'block' }">
+ @loadfinish="getHeightArea" @saveSecondCategory="saveSecondCategoryName">
{{ $lang('components-diy.diy-category.reachedBottom') }}
@@ -194,7 +207,9 @@ export default {
loadType: '',
templateFourData: [],
isList: false,
- lang: uni.getStorageSync("lang")//en-us 英文
+ lang: uni.getStorageSync("lang"),
+ lastSecondCategoryName: '',
+ template99Category: null
};
},
created() {
@@ -331,7 +346,7 @@ export default {
})
.exec();
this.heightArea = heightArea;
- if (index != -1 && index < this.categoryTree.length - 1) this.$refs.categoryItem[index + 1].getGoodsList();
+ if (index != -1 && index < this.categoryTree.length - 1 && Array.isArray(this.$refs.categoryItem) && this.$refs.categoryItem[index + 1]) this.$refs.categoryItem[index + 1].getGoodsList();
},
/**
* 获取全部分类
@@ -361,10 +376,77 @@ export default {
return item;
});
}
+ // 模板99 + 二级分类: 全局查询所有有商品的二级分类(去重), 按钮一直显示
+ if (this.value.template == 99) {
+ this.loadGlobalSecondCategoryBtns();
+ }
}
}
});
},
+ /**
+ * 全局查询所有有商品的二级分类, 按名称去重, 汇总成虚拟分类供 template99 渲染按钮
+ * 只要任何商品属于该二级分类, 按钮就显示; 切换一级分类时按钮不变(一直显示)
+ * 新增的二级分类只要有商品也会自动包含
+ */
+ loadGlobalSecondCategoryBtns() {
+ if (!this.categoryTree || !this.categoryTree.length) {
+ this.template99Category = { category_name: '', child_list: [] };
+ return;
+ }
+ // 收集所有二级分类(保留原始顺序, 不去重, 查询所有同名后再去重)
+ const allSecond = [];
+ this.categoryTree.forEach(one => {
+ if (one.child_list && one.child_list.length) {
+ one.child_list.forEach(two => {
+ allSecond.push(Object.assign({ _origIndex: allSecond.length }, two));
+ });
+ }
+ });
+ if (!allSecond.length) {
+ this.template99Category = { category_name: '', child_list: [] };
+ return;
+ }
+ let pending = allSecond.length;
+ const results = [];
+ const finishOne = () => {
+ pending--;
+ if (pending <= 0) {
+ results.sort((a, b) => a._origIndex - b._origIndex);
+ // 按名称去重, 同名只保留第一个有商品的(只要任一同名有商品就显示)
+ const deduped = [];
+ const seenNames = {};
+ results.forEach(item => {
+ if (!seenNames[item.category_name]) {
+ seenNames[item.category_name] = true;
+ deduped.push(item);
+ }
+ });
+ this.template99Category = {
+ category_name: '',
+ child_list: deduped
+ };
+ }
+ };
+ allSecond.forEach(two => {
+ this.$api.sendRequest({
+ url: '/api/goodssku/pageByCategory',
+ data: {
+ category_id: two.category_id,
+ page: 1,
+ page_size: 1
+ },
+ success: res => {
+ if (res && res.code == 0 && res.data && res.data.list && res.data.list.length > 0) {
+ results.push(two);
+ }
+ },
+ complete: () => {
+ finishOne();
+ }
+ });
+ });
+ },
/**
* 切换一级分类
* @param {Object} index
@@ -373,9 +455,11 @@ export default {
if (index >= this.categoryTree.length) return;
this.select = index;
this.categoryId = 'category-' + index;
- // 阻止切换分类之后滚动事件也立即执行
this.scrollLock = true;
},
+ saveSecondCategoryName(name) {
+ this.lastSecondCategoryName = name;
+ },
touchStart() {
this.scrollLock = false;
},
@@ -393,10 +477,10 @@ export default {
break;
}
}
- if (this.value.template != 1 && this.value.loadType == 'all' && this.heightArea[this.select][1] -
- scrollTop - contentWrapHeight < 300) {
- this.$refs.categoryItem[this.select].getGoodsList();
- }
+ if (this.value.template != 1 && this.value.loadType == 'all' && this.heightArea[this.select][1] -
+ scrollTop - contentWrapHeight < 300) {
+ if (Array.isArray(this.$refs.categoryItem) && this.$refs.categoryItem[this.select]) this.$refs.categoryItem[this.select].getGoodsList();
+ }
}
},
onRefresh() {
@@ -549,7 +633,7 @@ export default {
},
// 操作多规格商品弹框后，刷新商品数据
refreshData() {
- this.$refs.categoryItem[this.select].loadGoodsCartNum(true);
+ if (Array.isArray(this.$refs.categoryItem) && this.$refs.categoryItem[this.select]) this.$refs.categoryItem[this.select].loadGoodsCartNum(true);
},
changeListStyle() {
this.isList = !this.isList;
@@ -1050,4 +1134,99 @@ export default {
border-bottom-right-radius: 8rpx;
}
}
+
+// ===================== 模板99 商品分类样式 =====================
+.category-template-99 {
+ .search-box {
+ padding: 20rpx 24rpx;
+ background: #fff;
+ border-bottom: 1rpx solid #f0f0f0;
+
+ .search-content {
+ height: 64rpx;
+ background-color: #f5f5f5;
+ border-radius: 40rpx;
+
+ input {
+ height: 64rpx;
+ line-height: 64rpx;
+ padding: 0 80rpx 0 30rpx;
+ background: #f5f5f5;
+ border-radius: 40rpx;
+ font-size: 26rpx;
+ color: #333;
+ }
+
+ .iconfont {
+ font-size: 32rpx;
+ color: #89899a;
+ width: 70rpx;
+ text-align: center;
+ }
+ }
+
+ > .iconfont {
+ font-size: 40rpx;
+ color: #666;
+ margin-left: 20rpx;
+ }
+ }
+
+ .content-box {
+ .tree-wrap {
+ width: 200rpx;
+ background-color: #f5f5f5;
+ }
+
+ .right-flex-wrap {
+ flex: 1;
+ width: 0;
+ background: #f5f5f5;
+ }
+ }
+
+ .tree-wrap .category-item {
+ padding: 30rpx 16rpx;
+ background-color: #f5f5f5;
+
+ view {
+ color: #333;
+ font-size: 26rpx;
+ line-height: 1.3;
+ }
+
+ &.select {
+ background: #fff;
+
+ view {
+ color: #FF6B35;
+ font-weight: bold;
+ font-size: 28rpx;
+ }
+
+ &::before {
+ content: ' ';
+ width: 6rpx;
+ height: 36rpx;
+ background: #FF6B35;
+ display: block;
+ position: absolute;
+ left: 0;
+ top: 50%;
+ transform: translateY(-50%);
+ border-radius: 0 6rpx 6rpx 0;
+ }
+ }
+ }
+
+ .content-wrap {
+ background: #f5f5f5;
+ padding: 0;
+ }
+
+ .child-category {
+ width: 100%;
+ box-sizing: border-box;
+ }
+}
\ No newline at end of file
diff --git a/pages.json b/pages.json
index 4437e81..1d0131c 100644
--- a/pages.json
+++ b/pages.json
@@ -147,13 +147,13 @@
"diy-store-label": "view",
"diy-tab": "view",
"diy-text": "view",
- "diy-video": "view",
- "diy-video-list": "view"
- }
+ "diy-video": "view",
+ "diy-video-list": "view"
}
- },
- {
- "path": "cart",
+ }
+ },
+ {
+ "path": "cart",
"style": {
// #ifdef APP-PLUS
"navigationStyle": "custom",