商城显示优化

components/Yl_ListBox/index.js

@@ -2,7 +2,6 @@ import { getHeight } from "../../utils/GetRheRemainingHeight";
 
 Component({
     properties: {
-        height: { type: Number },
         getlist: { type: Function },
         pullDown: { type: Boolean, value: true },
         safety: { type: Boolean, value: true },
@@ -27,14 +26,6 @@ Component({
         loadThePage() {
             this.triggerEvent("getlist", false);
         },
-        /* 设置组件高度 */
-        setHeight(element, that) {
-            getHeight(element, that).then(res => {
-                if (this.data.height != res) {
-                    this.setData({ height: res });
-                }
-            });
-        },
         /* 新增：回到顶部 */
         goTop() {
             this.setData({ scrollTop: 0 });

components/Yl_ListBox/index.scss

@@ -1,5 +1,6 @@
 .scroll-view {
     position: relative;
+    height: 100%;
 }
 
 /* 适配苹果手机底部安全距离 */

components/Yl_ListBox/index.wxml

@@ -1,4 +1,4 @@
-<scroll-view class="scroll-view" scroll-top="{{scrollTop}}" scroll-with-animation="{{true}}" scroll-y refresher-enabled='{{pullDown}}' refresher-triggered='{{inRefresh}}' style="height: {{height}}px;" triggered='{{true}}' bindrefresherrefresh='pullToRefresh' lower-threshold='300' bindscrolltolower='loadThePage'>
+<scroll-view class="scroll-view" scroll-top="{{scrollTop}}" scroll-with-animation="{{true}}" scroll-y refresher-enabled='{{pullDown}}' refresher-triggered='{{inRefresh}}' triggered='{{true}}' bindrefresherrefresh='pullToRefresh' lower-threshold='300' bindscrolltolower='loadThePage'>
     <slot />
     <view class="safety" wx:if="{{safety}}" />
 </scroll-view>

pages/index/index.json

@@ -4,7 +4,7 @@
 		"Home": "./home/index",
 		"Collect": "./collect/index",
 		"UserCenter": "./userCenter",
-		"Market": "./market/index",
+		"Market": "./market_new/index",
 		"Message": "./message/index",
 		"Annunciate": "./annunciate/index"
 	},

pages/index/market_new/index.js

@@ -0,0 +1,300 @@
+const content = {
+    pageNumber: 1,
+    pageTotal: 1
+  },
+  _Http = getApp().globalData.http;
+let sa_brandid = null,
+  downCount = null;
+Component({
+  options: {
+    addGlobalClass: true
+  },
+  data: {
+    CustomBar: getApp().globalData.CustomBar,
+    typeList: [],
+    list: [],
+    filtratelist: [],
+    popupShow: false,
+    showAction: false,
+    activeKey: 0,
+    sidebarItems: [],
+    firstClassList: [],
+    currentFirstClass: null,
+  },
+  methods: {
+    openAction() {
+      this.setData({
+        showAction: true
+      })
+    },
+    closeAction() {
+      this.setData({
+        showAction: false
+      })
+    },
+    /* 获取领域 */
+    getTradefie() {
+      _Http.basic({
+        "id": 20221223141802,
+        content: {
+          nocache: true,
+          pageNumber: 1,
+          pageSize: 9999,
+          where: {
+            condition: ""
+          }
+        }
+      }, false).then(res => {
+        console.log("获取领域", res)
+        if (res.msg == '成功' && res.data.length > 1) {
+          res.data.unshift({
+            rowindex: 0,
+            subvalues: [],
+            sys_enterprise_tradefieldid: 0,
+            tradefield: "全部",
+            color: "#3874F6"
+          })
+          this.setData({
+            tradefieList: res.data.map(v => {
+              v.name = v.tradefield
+              return v
+            })
+          });
+        }
+      })
+    },
+    onSelect(e) {
+      let tradefield = e.detail.tradefield
+      content.where.tradefield = tradefield == '全部' ? '' : tradefield;
+      this.setData({
+        tradefieList: this.data.tradefieList.map(v => {
+          if (tradefield == v.tradefield) {
+            v.color = "#3874F6"
+          } else {
+            delete v.color
+          }
+          return v
+        }),
+        showAction: false,
+        tradefield: content.where.tradefield
+      })
+      this.getList(true);
+    },
+    init() {
+      content.where = {
+        condition: "",
+        itemclassid: "",
+        tradefield: ""
+      }
+      this.getBrand();
+      this.getTradefie();
+      return true;
+    },
+    /* 获取品牌 */
+    getBrand() {
+      _Http.basic({
+        "id": 20220924163702,
+        content: {
+          nocache: true,
+          pageSize: 999,
+        }
+      }).then(res => {
+        console.log("查询品牌", res)
+        if (res.msg != '成功') return wx.showToast({
+          title: res.msg,
+          icon: "none"
+        });
+        if (res.data.length != 0) {
+          sa_brandid = res.data[0].sa_brandid;
+          this.getTypeList();
+        } else {
+          wx.showToast({
+            title: '未查询到授权品牌',
+            icon: "none"
+          })
+        }
+      })
+    },
+    /* 获取分类 */
+    getTypeList() {
+      _Http.basic({
+        "id": "20220922110403",
+        pageSize: 1000,
+        content: {
+          nocache: true,
+          sa_brandid: sa_brandid,
+          where: {
+            istool: 0,
+            ishide: 0
+          }
+        }
+      }).then(res => {
+        console.log("营销类别", res)
+        if (res.data.length) {
+          // 保存完整的分类数据
+          this.allCategories = res.data[0].ttemclass;
+          console.log('allCategories:', this.allCategories);
+
+          const firstClassList = this.allCategories.map(v => {
+            v.name = v.itemclassname;
+            return v;
+          });
+
+          this.setData({
+            firstClassList: firstClassList,
+            currentFirstClass: this.allCategories[0]
+          });
+
+          // 初始显示第一个一级分类的末级分类
+          this.updateSidebarItems(this.allCategories[0]);
+        }
+        this.getList(true);
+      })
+    },
+
+    /* 更新侧边栏分类 */
+    updateSidebarItems(firstClass) {
+      const sidebarItems = [];
+      let id = 0;
+
+      // 递归遍历分类，找出末级分类
+      const findLeafCategories = (categories, parentName = '') => {
+        if (!categories || categories.length === 0) {
+          console.log('没有子分类');
+          return;
+        }
+        categories.forEach(category => {
+          if (category.subdep && category.subdep.length > 0) {
+            // 不是末级分类，继续遍历子分类
+            findLeafCategories(category.subdep, category.itemclassname);
+          } else {
+            // 是末级分类，添加到侧边栏
+            let title = category.itemclassname;
+            if (parentName) {
+              // 三级分类，拼接二级和三级分类名称
+              title = `${parentName}-${category.itemclassname}`;
+            }
+            sidebarItems.push({
+              id: id++,
+              title: title,
+              itemclassid: category.itemclassid
+            });
+          }
+        });
+      };
+
+      // 从选中的一级分类开始遍历
+      findLeafCategories(firstClass.subdep || []);
+      console.log('侧边栏分类:', sidebarItems);
+
+      // 添加"全部"选项
+      sidebarItems.unshift({
+        id: -1,
+        title: "全部",
+        itemclassid: ""
+      });
+
+      this.setData({
+        sidebarItems: sidebarItems,
+        activeKey: 0
+      });
+
+      // 设置为一级分类的ID
+      if (firstClass && firstClass.itemclassid) {
+        content.where.itemclassid = firstClass.itemclassid;
+        console.log('设置分类ID:', content.where.itemclassid);
+      }
+
+
+    },
+
+    /* 一级分类切换事件 */
+    firstClassChange(e) {
+      // 确保e.detail是一个数字索引
+      let index = e.detail;
+      if (typeof index === 'object' && index !== null) {
+        index = index.index || index.name || 0;
+      }
+      console.log('选中的索引:', index);
+
+      // 确保allCategories存在
+      if (!this.allCategories || this.allCategories.length === 0) {
+        console.log('allCategories未定义或为空');
+        return;
+      }
+
+      console.log('allCategories:', this.allCategories);
+      const selectedClass = this.allCategories[index];
+      console.log('选中的分类:', selectedClass);
+
+      if (selectedClass) {
+        this.setData({
+          currentFirstClass: selectedClass
+        });
+        this.updateSidebarItems(selectedClass);
+        this.getList(true);
+      } else {
+        console.log('未找到选中的分类');
+      }
+    },
+    /* 侧边栏切换事件 */
+    onSidebarChange(event) {
+      const activeKey = event.detail;
+      const selectedItem = this.data.sidebarItems[activeKey];
+      content.where.itemclassid = selectedItem.itemclassid;
+      this.setData({
+        activeKey: activeKey
+      });
+      this.getList(true);
+    },
+    /* 获取产品 */
+    getList(init = false) {
+      wx.hideLoading()
+      if (init.detail != undefined) init = init.detail;
+      if (init) content.pageNumber = 1;
+      if (content.pageNumber > content.pageTotal) return;
+      content.brandids = [sa_brandid];
+      _Http.basic({
+        "id": 20220926142203,
+        content
+      }).then(res => {
+        console.log("商品列表", res)
+        if (res.msg != '成功') return wx.showToast({
+          title: res.msg,
+          icon: "none"
+        })
+        this.selectComponent('#ListBox').RefreshToComplete();
+        if (init) this.selectComponent('#ListBox').goTop()
+        content.pageNumber = res.pageNumber + 1;
+        content.pageTotal = res.pageTotal;
+        this.setData({
+          list: res.pageNumber == 1 ? res.data : this.data.list.concat(res.data)
+        })
+      })
+    },
+    /* 开始搜索 */
+    onSearch({
+      detail
+    }) {
+      content.where.condition = detail;
+      wx.showLoading({
+        title: '搜索中...',
+      })
+      this.setData({
+        'condition': detail
+      })
+      this.getList(true)
+    },
+    onChange({
+      detail
+    }) {
+      content.where.condition = detail
+      this.setData({
+        'condition': detail
+      })
+    },
+
+
+
+  }
+})

pages/index/market_new/index.json

@@ -0,0 +1,11 @@
+{
+  "component": true,
+  "usingComponents": {
+    "List": "./modules/list/index",
+    "van-action-sheet": "@vant/weapp/action-sheet/index",
+    "van-sidebar": "@vant/weapp/sidebar/index",
+    "van-sidebar-item": "@vant/weapp/sidebar-item/index",
+    "van-tabs": "@vant/weapp/tabs/index",
+    "van-tab": "@vant/weapp/tab/index"
+  }
+}

pages/index/market_new/index.scss

@@ -0,0 +1,127 @@
+page {
+	width: 100vw;
+	overflow: hidden;
+}
+
+/* 搜索框样式 */
+.van-search {
+	z-index: 101;
+	.van-search__content {
+		border-radius: 12rpx;
+	}
+
+	.van-search__action {
+		font-size: 28rpx;
+		color: #3874F6;
+	}
+}
+
+.class-box {
+	box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.1);
+	z-index: 100;
+
+	.active-tab {
+		font-weight: bold;
+	}
+}
+
+/* 容器布局 */
+.container {
+	display: flex;
+	height: calc(100vh - 180rpx);
+	box-shadow: 0 6rpx 10rpx -6rpx rgba(0, 0, 0, 0.06);
+	border-radius: 12rpx;
+	overflow: hidden;
+}
+
+/* 左侧边栏 */
+.sidebar-container {
+	width: 240rpx;
+	overflow-y: auto;
+	--sidebar-selected-border-color: #3874F6;
+	--sidebar-selected-font-weight: bold;
+	--sidebar-selected-text-color: #3874F6;
+
+	.sidebar-item {
+		width: 240rpx;
+	}
+}
+
+/* 右侧内容区 */
+.content-container {
+	flex: 1;
+	background-color: #ffffff;
+	margin: 0;
+	padding: 0;
+	display: flex;
+	flex-direction: column;
+}
+
+/* 侧边栏样式 */
+.van-sidebar {
+	background-color: #f8f8f8;
+	margin: 0;
+	padding: 0;
+
+	.van-sidebar-item {
+		height: 90rpx;
+		line-height: 90rpx;
+		font-size: 28rpx;
+		padding: 0 24rpx;
+		box-sizing: border-box;
+		border-bottom: 1rpx solid #f0f0f0;
+		margin: 0;
+
+		&.van-sidebar-item--active {
+			background-color: #ffffff;
+			color: #3874F6;
+			font-weight: bold;
+			position: relative;
+
+			&:before {
+				content: '';
+				position: absolute;
+				left: 0;
+				top: 50%;
+				transform: translateY(-50%);
+				width: 6rpx;
+				height: 40rpx;
+				background-color: #3874F6;
+				border-radius: 0 3rpx 3rpx 0;
+			}
+		}
+	}
+}
+
+/* 产品列表样式 */
+.yl-list-box {
+	padding: 0 20rpx;
+}
+
+/* 分割线样式 */
+.division {
+	background-color: #f5f5f5;
+	height: 12rpx !important;
+	margin: 0 !important;
+}
+
+/* 领域选择样式 */
+.van-action-sheet {
+	.van-action-sheet__header {
+		font-size: 32rpx;
+		font-weight: bold;
+	}
+
+	.van-action-sheet__item {
+		font-size: 28rpx;
+		height: 90rpx;
+		line-height: 90rpx;
+	}
+
+	.van-action-sheet__cancel {
+		font-size: 28rpx;
+		height: 90rpx;
+		line-height: 90rpx;
+		margin-top: 12rpx;
+	}
+}

pages/index/market_new/index.wxml

@@ -0,0 +1,33 @@
+<van-search use-action-slot custom-class="van-search" placeholder='请输入搜索关键词' shape='round' bind:change='onChange'
+	bind:search="onSearch" bind:clear="onSearch">
+	<navigator url="#" wx:if="{{tradefieList.length>1}}" style="padding: 0 10rpx;" slot="action" bind:tap="openAction">
+		{{tradefield||'领域'}}</navigator>
+</van-search>
+
+<!-- 一级分类 -->
+<van-tabs active="0" bind:change="firstClassChange" title-active-color="#3874F6" color="#3874F6"
+	custom-class="class-box" tab-active-class="active-tab">
+	<van-tab wx:for="{{firstClassList}}" wx:key="{{item.itemclassid}}" title="{{item.itemclassname}}">
+	</van-tab>
+</van-tabs>
+<view class="container">
+	<!-- 左侧边栏 -->
+	<view class="sidebar-container">
+		<van-sidebar active-key="{{ activeKey }}" bind:change="onSidebarChange">
+			<van-sidebar-item custom-class="sidebar-item" wx:for="{{sidebarItems}}" wx:key="{{item.id}}"
+				title="{{item.title}}" />
+		</van-sidebar>
+		<view style="height: 400rpx;" />
+	</view>
+
+	<!-- 右侧内容区 -->
+	<view class="content-container">
+		<Yl_ListBox id='ListBox' bind:getlist='getList' style="height: 100%;">
+			<List list="{{list}}" />
+			<view style="height: 400rpx;" />
+		</Yl_ListBox>
+	</view>
+</view>
+
+<van-action-sheet z-index='99999999' actions='{{tradefieList}}' show="{{ showAction }}" bind:cancel='closeAction'
+	bind:click-overlay='closeAction' bind:select='onSelect' cancel-text="取消" />

pages/index/market_new/modules/list/index.js

@@ -0,0 +1,125 @@
+const _Http = getApp().globalData.http;
+Component({
+  properties: {
+    list: {
+      type: Array
+    },
+    authName: {
+      type: Object,
+      value: {
+        appName: "wmarket",
+        formName: "wmarket"
+      }
+    }
+  },
+  data: {
+    privacyFieldC: []
+  },
+  options: {
+    addGlobalClass: true
+  },
+  lifetimes: {
+    attached: function () {
+      this.setData({
+        isdisplaysaleqty:wx.getStorageSync('siteP').isdisplaysaleqty
+      })
+      setTimeout(() => {
+        try {
+          const {
+            formName,
+            appName
+          } = this.data.authName;
+          let privacyFieldC = wx.getStorageSync('auth')[appName].forms[formName].formcols.map(v => v.title);
+          this.setData({
+            privacyFieldC,
+            isShowFavorites: wx.getStorageSync('auth').wfavorites ? true : false
+          })
+          console.log("privacyFieldC", privacyFieldC)
+        } catch (error) {
+          console.error("查询隐私字段", error)
+          this.setData({
+            privacyFieldC: []
+          })
+        }
+      }, 1000)
+    }
+  },
+  methods: {
+    toDetail(e) {
+      const {
+        item
+      } = e.currentTarget.dataset;
+      wx.navigateTo({
+        url: `/packageA/market/detail?params=${JSON.stringify({
+          sa_itemgroupid:item.sa_itemgroupid,
+          sa_brandid:item.sa_brandid
+        })}`,
+      })
+    },
+    buyMore(e) {
+      const {
+        name
+      } = e.target.dataset;
+      if (!name) return;
+      const item1 = e.currentTarget.dataset.item,
+        index = e.currentTarget.dataset.index,
+        item = item1.item[0];
+
+      if (name == '购物车') {
+        wx.showModal({
+          title: '提示',
+          content: `是否确定将“${item.itemname}”加入到购物车`,
+          complete: (res) => {
+            if (res.confirm) _Http.basic({
+              "id": 20220924095102,
+              "content": {
+                sa_brandid: item1.sa_brandid,
+                "itemid": item.itemid, //货品id
+                "qty": item.orderminqty, //数量
+                itemno: item.itemno, //货品编号
+                tradefield: item1.tradefield,
+                width: item.width,
+                length: item.length
+              },
+            }).then(res => {
+              console.log("加入购物车", res)
+              wx.showToast({
+                title: res.msg == '成功' ? '加入成功' : res.msg,
+                icon: "none"
+              });
+              if (res.msg == '成功') getApp().globalData.getCollectCount().then(badge => this.setData({
+                badge
+              }))
+            })
+          }
+        })
+      } else {
+        let iscollection = item.iscollection == 1 ? false : true
+        _Http.basic({
+          "id": 20231121143403,
+          "content": {
+            "itemid": item.itemid, //货品id
+            "qty": item.orderminqty, //数量
+            iscollection,
+            width: item.width,
+            length: item.length
+          }
+        }).then(res => {
+          console.log(iscollection + "收藏夹", res)
+          wx.showToast({
+            title: res.msg == '成功' ? iscollection ? '收藏成功' : "已取消收藏" : res.msg,
+            icon: "none"
+          });
+          if (res.msg == '成功') {
+            this.setData({
+              [`list[${index}].item[0].iscollection`]: iscollection ? 1 : 0
+            })
+            getCurrentPages()[getCurrentPages().length - 1].setData({
+              [`list[${index}].item[0].iscollection`]: iscollection ? 1 : 0
+            })
+          }
+        })
+      }
+    },
+  }
+})

pages/index/market_new/modules/list/index.json

@@ -0,0 +1,6 @@
+{
+  "component": true,
+  "usingComponents": {
+    "van-icon": "@vant/weapp/icon/index"
+  }
+}

pages/index/market_new/modules/list/index.scss

@@ -0,0 +1,144 @@
+.product {
+	display: flex;
+	width: 100%;
+	padding: 20rpx 30rpx;
+	background: #fff;
+	border-bottom: 1rpx solid #ddd;
+	box-sizing: border-box;
+	overflow: hidden;
+
+	.image-box {
+		font-size: 0;
+		width: 156rpx;
+		height: 156rpx;
+		border-radius: 16rpx;
+		overflow: hidden;
+		margin-right: 30rpx;
+		flex-shrink: 0;
+
+		.text {
+			display: inline-block;
+			width: 176rpx;
+			height: 176rpx;
+			line-height: 172rpx;
+			font-size: 24rpx;
+			text-align: center;
+			color: #666;
+			border: 1rpx solid #ddd;
+			border-radius: 16rpx;
+			box-sizing: border-box;
+		}
+	}
+
+	.right-box {
+		flex: 1;
+
+		.title {
+			min-height: 110rpx;
+			line-height: 40rpx;
+			font-size: 28rpx;
+			font-weight: 600;
+			color: #333333;
+			word-break: break-word;
+			display: -webkit-box;
+			-webkit-line-clamp: 3;
+			-webkit-box-orient: vertical;
+			overflow: hidden;
+		}
+
+		.type {
+			height: 34rpx;
+			line-height: 34rpx;
+			font-size: 24rpx;
+			color: #888888;
+		}
+
+		.tags {
+			display: flex;
+			height: 32rpx;
+			margin-top: 6rpx;
+			width: 100%;
+
+			>view {
+				flex-shrink: 0;
+				height: 32rpx;
+				line-height: 32rpx;
+				padding: 0 10rpx;
+				font-size: 20rpx;
+				color: #FFFFFF;
+				margin-right: 8rpx;
+				border-radius: 6rpx;
+			}
+		}
+
+		.price {
+			display: flex;
+			width: 100%;
+			height: 40rpx;
+			align-items: center;
+			justify-content: space-between;
+
+			.view {
+				font-size: 28rpx;
+				font-family: PingFang SC-Medium, PingFang SC;
+				font-weight: 550;
+				color: #3874F6;
+			}
+
+			.punit {
+				font-size: 20rpx;
+				color: #888888;
+				margin-left: 12rpx;
+				margin-top: 8rpx;
+			}
+
+			.shopping {
+				display: flex;
+				font-size: 24rpx;
+				align-items: center;
+
+				.iconfont {
+					color: #F29C37;
+				}
+
+				.cuIcon {
+					font-size: 36rpx;
+					margin-right: 20rpx;
+				}
+			}
+
+		}
+	}
+}
+
+.line-1 {
+	overflow: hidden;
+	white-space: nowrap;
+	text-overflow: ellipsis;
+	word-break: break-all;
+}
+
+/* 空状态样式 */
+.empty-container {
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+	justify-content: center;
+	padding: 120rpx 0;
+	
+	.empty-icon {
+		margin-bottom: 30rpx;
+	}
+	
+	.empty-text {
+		font-size: 28rpx;
+		color: #333;
+		margin-bottom: 12rpx;
+		font-weight: 500;
+	}
+	
+	.empty-desc {
+		font-size: 24rpx;
+		color: #999;
+	}
+}

pages/index/market_new/modules/list/index.wxml

@@ -0,0 +1,35 @@
+<navigator class="product" bindtap="toDetail" data-item="{{item}}" url="#" wx:for="{{list}}" wx:key="index">
+	<view class="image-box">
+		<van-image width="100%" wx:if="{{item.attinfos[0]||item.cover}}" height="100%" fit="cover" src="{{item.attinfos[0].subfiles[0].url||item.attinfos[0].url||item.cover}}" use-loading-slot use-error-slot lazy-load>
+			<van-loading slot="loading" type="spinner" size="20" vertical />
+			<text slot="error">加载失败</text>
+		</van-image>
+	</view>
+	<view class="right-box">
+		<view class="title">{{item.groupname||'--'}}</view>
+		<view class="price">
+			<view style="display: flex;">
+				<view class="view" wx:if="{{item.minprice==item.maxprice}}">
+					￥{{handleHide.verify(item.minprice,'列表价格',privacyFieldC)}}
+				</view>
+				<view class="view" wx:else>
+					￥{{handleHide.verify((item.minprice+'~'+item.maxprice),'列表价格',privacyFieldC)}}
+				</view>
+				<view class="punit" wx:if="{{isdisplaysaleqty}}">已售{{((item.item[0].soldbase-0)+(item.item[0].saleqty-0))||0}}{{item.unitname}}</view>
+			</view>
+			<view wx:if="{{!item.isscheme}}" class="shopping" data-item="{{item}}" data-index="{{index}}" catchtap="buyMore">
+				<view hover-class="navigator-hover" wx:if="{{isShowFavorites}}" url="#" data-name="收藏" class="{{item.item[0].iscollection?'cuIcon-favorfill':'cuIcon-favor'}} cuIcon" style="color:{{item.item[0].iscollection?'#FADB14':''}}" />
+				<view hover-class="navigator-hover" url="#" data-name="购物车" class="iconfont icon-gouwuche" />
+			</view>
+		</view>
+	</view>
+</navigator>
+<view wx:if="{{list.length === 0}}" class="empty-container">
+  <view class="empty-icon">
+    <van-icon name="search" size="80rpx" color="#ccc" />
+  </view>
+  <view class="empty-text">暂无商品</view>
+  <view class="empty-desc">换个分类试试吧</view>
+</view>
+
+<wxs src="/utils/hidePrice.wxs" module="handleHide" />