商城

pages/index/market/index.js

@@ -0,0 +1,182 @@
+const content = {
+    pageNumber: 1,
+    pageTotal: 1,
+    where: {
+      condition: "",
+      itemclassid: "",
+      tradefield: ""
+    }
+  },
+  _Http = getApp().globalData.http;
+let sa_brandid = null,
+  downCount = null;
+Component({
+  options: {
+    addGlobalClass: true
+  },
+  data: {
+    CustomBar: getApp().globalData.CustomBar,
+    typeList: [],
+    filtratelist: [{
+      label: "领域",
+      index: 0,
+      showName: "tradefield", //显示字段
+      valueKey: "tradefield", //返回Key
+      selectKey: "tradefield", //传参 代表选着字段 不传参返回整个选择对象
+      value: "", //选中值
+      list: [{
+        rowindex: 0,
+        subvalues: [],
+        sys_enterprise_tradefieldid: 0,
+        tradefield: "全部"
+      }]
+    }, {
+      label: "营销分类",
+      index: 0,
+      type: "multilevelClass",
+      showName: "itemclassname", //显示字段
+      valueKey: "itemclassid", //返回Key
+      selectKey: "itemclassid", //传参 代表选着字段 不传参返回整个选择对象
+      value: "", //选中值
+      list: []
+    }]
+  },
+  methods: {
+    init() {
+      this.getBrand();
+      this.getTradefie();
+      getApp().globalData.setTemporaryId = this.handleFiltrate.bind(this)
+    },
+    showModal(e) {
+      this.setData({
+        modalName: e.currentTarget.dataset.target
+      })
+    },
+    hideModal(e) {
+      this.setData({
+        modalName: null
+      })
+    },
+    /* 获取品牌 */
+    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,
+          }
+        }
+      }).then(res => {
+        console.log("营销类别", res)
+        if (res.data[0].ttemclass) {
+          res.data[0].ttemclass.unshift({
+            itemclassid: "",
+            itemclassfullname: "全部",
+            itemclassname: "全部",
+            subdep: []
+          })
+          this.setData({
+            ['filtratelist[1].list']: res.data[0].ttemclass
+          });
+        }
+        this.getList(true);
+      })
+    },
+    /* 获取产品 */
+    getList(init = false) {
+      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)
+        this.selectComponent('#ListBox').RefreshToComplete();
+        content.pageNumber = res.pageNumber + 1;
+        content.pageTotal = res.pageTotal;
+        this.setData({
+          list: res.pageNumber == 1 ? res.data : this.data.list.concat(res.data)
+        })
+        this.setListHeight()
+      })
+    },
+    /* 开始搜索 */
+    onSearch({
+      detail
+    }) {
+      content.where.condition = detail;
+      this.getList(true)
+    },
+    /* 获取领域 */
+    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.unshift({
+            rowindex: 0,
+            subvalues: [],
+            sys_enterprise_tradefieldid: 0,
+            tradefield: "全部"
+          })
+          this.setData({
+            'filtratelist[0].list': res.data
+          });
+        }
+      })
+    },
+    /* 设置页面高度 */
+    setListHeight() {
+      this.selectComponent("#ListBox").setHeight(".division", this);
+    },
+    handleFiltrate({
+      detail
+    }) {
+      clearTimeout(downCount);
+      if (detail.tradefield) content.where.tradefield = detail.tradefield == '全部' ? "" : detail.tradefield;
+      content.where.itemclassid = detail.temporaryId || detail.temporaryId == '' ? detail.temporaryId : content.where.itemclassid;
+      downCount = setTimeout(() => {
+        this.getList(true);
+      }, 300);
+    }
+  }
+})

pages/index/market/index.json

@@ -0,0 +1,7 @@
+{
+  "component": true,
+  "usingComponents": {
+    "List": "./modules/list/index",
+    "Filtrate":"./modules/filtrate/index"
+  }
+}

pages/index/market/index.scss

@@ -0,0 +1,171 @@
+.search-right {
+	padding: 0 10rpx !important;
+}
+
+page {
+	width: 100vw;
+	overflow: hidden;
+}
+
+.groud {
+	width: 100%;
+	padding: 30rpx;
+	border-bottom: 1px solid #DDDDDD;
+
+	.label {
+		height: 40rpx;
+		font-size: 28rpx;
+		font-family: PingFang SC-Regular, PingFang SC;
+		color: #333333;
+	}
+
+	.content {
+		display: flex;
+		flex-wrap: wrap;
+		width: 100%;
+
+
+
+		.but {
+			width: 188rpx;
+			height: 72rpx;
+			background: #F5F5F5;
+			border-radius: 8rpx;
+			font-size: 28rpx;
+			font-family: PingFang SC-Regular, PingFang SC;
+			color: #333333;
+			box-sizing: border-box;
+			margin-right: 20rpx;
+			margin-top: 20rpx;
+			padding: 0;
+		}
+
+		.active {
+			border: 1px solid #3874F6;
+			color: #3874F6;
+			font-weight: bold;
+			background-color: #F5F5F5;
+		}
+	}
+
+	.time {
+		.partition {
+			margin-right: 20rpx;
+			display: flex;
+			align-items: center;
+		}
+
+		.tbox {
+			width: 220rpx;
+			height: 72rpx;
+			text-align: center;
+			line-height: 72rpx;
+			background: #F5F5F5;
+			border-radius: 8rpx;
+			font-size: 28rpx;
+			font-family: PingFang SC-Regular, PingFang SC;
+			color: #333333;
+			box-sizing: border-box;
+			margin-right: 20rpx;
+			margin-top: 20rpx;
+		}
+	}
+}
+
+.DrawerPage {
+	position: fixed;
+	width: 100vw;
+	height: 100vh;
+	left: 0vw;
+	background-color: #f1f1f1;
+	transition: all 0.4s;
+}
+
+.DrawerPage.show {
+	transform: scale(0.9, 0.9);
+	left: 85vw;
+	box-shadow: 0 0 60rpx rgba(0, 0, 0, 0.2);
+	transform-origin: 0;
+}
+
+.DrawerWindow {
+	position: absolute;
+	width: 85vw;
+	height: 100vh;
+	left: 0;
+	top: 0;
+	transform: scale(0.9, 0.9) translateX(-100%);
+	opacity: 0;
+	pointer-events: none;
+	transition: all 0.4s;
+}
+
+.DrawerWindow.show {
+	transform: scale(1, 1) translateX(0%);
+	opacity: 1;
+	pointer-events: all;
+}
+
+.DrawerClose {
+	position: absolute;
+	width: 40vw;
+	height: 100vh;
+	right: 0;
+	top: 0;
+	color: transparent;
+	padding-bottom: 30rpx;
+	display: flex;
+	align-items: flex-end;
+	justify-content: center;
+	background-image: linear-gradient(90deg, rgba(0, 0, 0, 0.01), rgba(0, 0, 0, 0.6));
+	letter-spacing: 5px;
+	font-size: 50rpx;
+	opacity: 0;
+	pointer-events: none;
+	transition: all 0.4s;
+}
+
+.DrawerClose.show {
+	opacity: 1;
+	pointer-events: all;
+	width: 15vw;
+	color: #fff;
+}
+
+.DrawerPage .cu-bar.tabbar .action button.icon {
+	width: 64rpx;
+	height: 64rpx;
+	line-height: 64rpx;
+	margin: 0;
+	display: inline-block;
+}
+
+.DrawerPage .cu-bar.tabbar .action .cu-avatar {
+	margin: 0;
+}
+
+.DrawerPage .nav {
+	flex: 1;
+}
+
+.DrawerPage .nav .cu-item.cur {
+	border-bottom: 0;
+	position: relative;
+}
+
+.DrawerPage .nav .cu-item.cur::after {
+	content: "";
+	width: 10rpx;
+	height: 10rpx;
+	background-color: currentColor;
+	position: absolute;
+	bottom: 10rpx;
+	border-radius: 10rpx;
+	left: 0;
+	right: 0;
+	margin: auto;
+}
+
+.DrawerPage .cu-bar.tabbar .action {
+	flex: initial;
+}

pages/index/market/index.wxml

@@ -0,0 +1,24 @@
+<view class="DrawerPage {{modalName=='viewModal'?'show':''}}">
+	<van-search use-action-slot placeholder='请输入搜索关键词' shape='round' bind:search="onSearch" bind:clear="onSearch">
+		<view slot="action" class="cuIcon-filter search-right" bindtap="showModal" data-target="viewModal">
+			筛选
+		</view>
+	</van-search>
+	<view class="division" style="height: 20rpx;" />
+	<Yl_ListBox id='ListBox' bind:getlist='getList'>
+		<List list="{{list}}" />
+	</Yl_ListBox>
+</view>
+
+
+<view class="DrawerClose {{modalName=='viewModal'?'show':''}}" bindtap="hideModal">
+	<text class="cuIcon-pullright"></text>
+</view>
+
+<scroll-view scroll-y class="DrawerWindow  {{modalName=='viewModal'?'show':''}}">
+	<view style="height:{{CustomBar}}px" />
+	<view class="cu-list menu card-menu margin-top-xl margin-bottom-xl shadow-lg bg-white">
+		<Filtrate list='{{filtratelist}}' bindhandle='handleFiltrate' />
+	</view>
+	<view style="height: 200rpx;" />
+</scroll-view>

pages/index/market/modules/filtrate/index.js

@@ -0,0 +1,59 @@
+Component({
+  properties: {
+    list: {
+      type: Array,
+      value: [{
+        label: "筛选1",
+        index: null,
+        showName: "name", //显示字段
+        valueKey: "name", //返回Key
+        selectKey: "id", //传参 代表选着字段 不传参返回整个选择对象
+        value: "", //选中值
+        list: [{
+          name: "a1",
+          id: 0
+        }, {
+          name: "a2",
+          id: 1
+        }]
+      }]
+    },
+    handle: Function, //按钮回调函数
+    zIndex: {
+      type: String,
+      value: 99999,
+    }
+  },
+  data: {},
+  methods: {
+    /* 选择 */
+    onSelect(e) {
+      const {
+        item, //被选项
+        index, //列表下标
+        i //被选项下标
+      } = e.currentTarget.dataset;
+      if (this.data.list[index].index == i) {
+        this.setData({
+          [`list[${index}].value`]: "",
+          [`list[${index}].index`]: null
+        });
+      } else {
+        this.setData({
+          [`list[${index}].value`]: this.data.list[index].selectKey ? item[this.data.list[index].selectKey] : item,
+          [`list[${index}].index`]: i
+        });
+      }
+      let obj = {};
+      this.data.list.forEach(v => {
+        if (v.type == 'multilevelClass') {
+          obj[v.valueKey] = getApp().globalData.temporaryId;
+          delete(getApp().globalData.temporaryId);
+        } else {
+          obj[v.valueKey] = v.value;
+        }
+      });
+      this.triggerEvent("handle", obj);
+    },
+  }
+})

pages/index/market/modules/filtrate/index.json

@@ -0,0 +1,6 @@
+{
+  "component": true,
+  "usingComponents": {
+    "MultilevelClass": "/components/Yl_Filtrate/modules/multilevelClass"
+  }
+}

pages/index/market/modules/filtrate/index.scss

@@ -0,0 +1,11 @@
+@import "../../../../../components/Yl_Filtrate/groud.scss";
+
+.groud {
+	.content {
+		justify-content: space-between;
+		.but {
+			width: 240rpx;
+			margin-right: 0;
+		}
+	}
+}

pages/index/market/modules/filtrate/index.wxml

@@ -0,0 +1,11 @@
+<block wx:for="{{list}}" wx:key="label">
+	<MultilevelClass id="MultilevelClass" jumboSize item='{{item}}' wx:if="{{item.type=='multilevelClass'}}" />
+	<view wx:elif="{{item.list.length}}" class="groud">
+		<view class="label">
+			{{item.label}}
+		</view>
+		<view class="content">
+			<van-button custom-class='but {{item.index==i?"active":""}}' wx:for="{{item.list}}" wx:for-item="data" wx:for-index="i" wx:key="i" data-item="{{data}}" data-index="{{index}}" data-i="{{i}}" bindtap="onSelect">{{data[item.showName]}}</van-button>
+		</view>
+	</view>
+</block>

pages/index/market/modules/list/index.js

@@ -0,0 +1,18 @@
+Component({
+  properties: {
+    list: Array
+  },
+  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
+        })}`,
+      })
+    }
+  }
+})

pages/index/market/modules/list/index.json

@@ -0,0 +1,4 @@
+{
+  "component": true,
+  "usingComponents": {}
+}

pages/index/market/modules/list/index.scss

@@ -0,0 +1,98 @@
+.product {
+	display: flex;
+	width: 100vw;
+	padding: 20rpx 30rpx;
+	background: #fff;
+	border-bottom: 1rpx solid #ddd;
+	box-sizing: border-box;
+	overflow: hidden;
+
+	.image-box {
+		font-size: 0;
+		width: 176rpx;
+		height: 176rpx;
+		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 {
+		width: 480rpx;
+
+		.title {
+			height: 40rpx;
+			line-height: 40rpx;
+			font-size: 28rpx;
+			font-weight: 600;
+			color: #333333;
+		}
+
+		.type {
+			height: 34rpx;
+			line-height: 34rpx;
+			font-size: 24rpx;
+			color: #888888;
+			margin-top: 8rpx;
+		}
+
+		.tags {
+			display: flex;
+			height: 32rpx;
+			margin-top: 8rpx;
+			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;
+			margin-top: 14rpx;
+
+			view {
+				font-size: 28rpx;
+				font-family: PingFang SC-Medium, PingFang SC;
+				font-weight: 550;
+				color: #3874F6;
+			}
+
+			text {
+				font-size: 24rpx;
+				color: #888888;
+			}
+		}
+	}
+}
+
+.line-1 {
+	overflow: hidden;
+	white-space: nowrap;
+	text-overflow: ellipsis;
+	word-break: break-all;
+}

pages/index/market/modules/list/index.wxml

@@ -0,0 +1,31 @@
+<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>
+		<van-image wx:else width="100%" height="100%" fit="cover" src="https://nb32663.obs.cn-east-2.myhuaweicloud.com:443/202302271677472008916B382a8d8b.jpg" 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 line-1">{{item.groupname||'--'}}</view>
+		<view class="type line-1">{{item.groupnum||'--'}}</view>
+		<view class="tags">
+			<view style="background: #FA8C16;">
+				{{item.brandname}}
+			</view>
+			<view wx:if="{{item.tradefield}}" style="background: #FF3B30;">
+				{{item.tradefield}}
+			</view>
+		</view>
+		<view class="price">
+			<view>
+				￥ {{item.minprice}}~{{item.maxprice}}
+			</view>
+			<text>× {{item.unitname}}</text>
+		</view>
+	</view>
+</navigator>
+<Yl_Empty wx:if="{{list.length === 0}}" />