From fb7a1be9b4f256860fcf7be0230ea4ca0a297ebb Mon Sep 17 00:00:00 2001 From: lwh <2679599887@qq.com> Date: Thu, 20 Jul 2023 15:09:23 +0800 Subject: [PATCH] =?UTF-8?q?feat=20=E6=B7=BB=E5=8A=A0=E5=95=86=E5=93=81?= =?UTF-8?q?=E8=AF=A6=E6=83=85=E9=A1=B5=E7=9A=84=E5=BA=97=E9=93=BA=E4=BF=A1?= =?UTF-8?q?=E6=81=AF=E6=8E=A5=E5=8F=A3=E5=AF=B9=E6=8E=A5=EF=BC=8C=E5=BA=97?= =?UTF-8?q?=E9=93=BA=E8=AF=A6=E6=83=85=E9=A1=B5?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- app.json | 3 +- components/filter/index.js | 50 ++- components/filter/index.wxml | 25 +- components/goods-card/index.js | 10 +- components/goods-card/index.wxml | 73 ++++ components/goods-card/index.wxss | 43 ++ components/goods-list/index.js | 5 + components/goods-list/index.wxml | 1 + .../components/c-tabbar/index.wxml | 6 +- pages/goods/details/index.js | 9 + pages/goods/details/index.wxml | 12 +- pages/goods/list/index.js | 37 +- pages/goods/list/index.wxml | 3 +- pages/shop/all-goods/index.js | 408 ++++++++++++++++++ pages/shop/all-goods/index.json | 18 + pages/shop/all-goods/index.wxml | 78 ++++ pages/shop/all-goods/index.wxss | 115 +++++ 17 files changed, 860 insertions(+), 36 deletions(-) create mode 100644 pages/shop/all-goods/index.js create mode 100644 pages/shop/all-goods/index.json create mode 100644 pages/shop/all-goods/index.wxml create mode 100644 pages/shop/all-goods/index.wxss diff --git a/app.json b/app.json index 1816d81..d604e8d 100644 --- a/app.json +++ b/app.json @@ -33,7 +33,8 @@ "pages/order/fill-tracking-no/index", "pages/order/delivery-detail/index", "pages/order/invoice/index", - "pages/usercenter/name-edit/index" + "pages/usercenter/name-edit/index", + "pages/shop/all-goods/index" ], "tabBar": { "custom": true, diff --git a/components/filter/index.js b/components/filter/index.js index dc99b95..7c873ee 100644 --- a/components/filter/index.js +++ b/components/filter/index.js @@ -24,12 +24,21 @@ Component({ }); }, }, - sorts: { + priceSorts: { type: String, value: '', - observer(sorts) { + observer(priceSorts) { this.setData({ - sorts, + priceSorts, + }); + }, + }, + soldSorts: { + type: String, + value: '', + observer(soldSorts) { + this.setData({ + soldSorts, }); }, }, @@ -42,7 +51,8 @@ Component({ data: { layout: 1, overall: 1, - sorts: '', + priceSorts: '', + soldSorts: '', }, methods: { @@ -53,11 +63,36 @@ Component({ }, handlePriseSort() { - const { sorts } = this.data; + const { priceSorts } = this.data; + this.setData({ + soldSorts: "" + }) this.triggerEvent('change', { ...this.properties, overall: 0, - sorts: sorts === 'desc' ? 'asc' : 'desc', + soldSorts: '', + }); + this.triggerEvent('change', { + ...this.properties, + overall: 0, + priceSorts: priceSorts === 'desc' ? 'asc' : 'desc', + }); + }, + + handleSoldSort() { + const { soldSorts } = this.data; + this.setData({ + priceSorts: "" + }) + this.triggerEvent('change', { + ...this.properties, + overall: 0, + priceSorts: '', + }); + this.triggerEvent('change', { + ...this.properties, + overall: 0, + soldSorts: soldSorts === 'desc' ? 'asc' : 'desc', }); }, @@ -71,7 +106,8 @@ Component({ const { overall } = this.data; const nextOverall = overall === 1 ? 0 : 1; const nextData = { - sorts: '', + priceSorts: '', + soldSorts: '', prices: [], }; this.triggerEvent('change', { diff --git a/components/filter/index.wxml b/components/filter/index.wxml index 9048bfd..c6853ea 100644 --- a/components/filter/index.wxml +++ b/components/filter/index.wxml @@ -4,20 +4,37 @@ 综合 - - 价格 + + 销量 + + + + 价格 + + + diff --git a/components/goods-card/index.js b/components/goods-card/index.js index eb75361..c24811b 100644 --- a/components/goods-card/index.js +++ b/components/goods-card/index.js @@ -43,10 +43,15 @@ Component({ } }, }, + type:{ + type: String, + value: "card" + } }, data: { independentID: '', + type: '', goods: { id: '' }, isValidityLinePrice: false, }, @@ -93,8 +98,11 @@ Component({ }, init() { - const { thresholds, id } = this.properties; + const { thresholds, id ,type } = this.properties; this.genIndependentID(id); + this.setData({ + type + }) if (thresholds && thresholds.length) { this.createIntersectionObserverHandle(); } diff --git a/components/goods-card/index.wxml b/components/goods-card/index.wxml index a1bd5dd..e7e3de9 100644 --- a/components/goods-card/index.wxml +++ b/components/goods-card/index.wxml @@ -3,6 +3,7 @@ class="goods-card" bind:tap="clickHandle" data-goods="{{ goods }}" + wx:if="{{type == 'card'}}" > @@ -64,3 +65,75 @@ + + + + + + + + + + + + {{ goods.title }} + + {{goods.soldNum}}人付款 + + + + + {{tag}} + + + + + + + + + + + + diff --git a/components/goods-card/index.wxss b/components/goods-card/index.wxss index b6f7174..afe50a8 100644 --- a/components/goods-card/index.wxss +++ b/components/goods-card/index.wxss @@ -131,3 +131,46 @@ .spec-for-symbol { font-size: 24rpx; } + + +.goods-category-card{ + +} + +.goods-category-card__main{ + position: relative; + display: flex; + line-height: 1; + padding: 0; + background: transparent; + width: 100%; + /* justify-content: center; */ + padding: 16rpx; + border-bottom: 1px solid #eeeeee; +} + +.goods-category-card__thumb { + flex-shrink: 0; + position: relative; + width: 220rpx; + height: 220rpx; +} + +.goods-category-card__thumb:empty { + display: none; + margin: 0; +} + + +.goods-category-card__img { + display: block; + width: 100%; + height: 100%; + overflow: hidden; +} + +.goods-category-sold-num{ + margin-top: 10rpx; + font-size: 23rpx; + color: #7e7e7e; +} \ No newline at end of file diff --git a/components/goods-list/index.js b/components/goods-list/index.js index 5184903..f3fe768 100644 --- a/components/goods-list/index.js +++ b/components/goods-list/index.js @@ -17,6 +17,10 @@ Component({ type: Array, value: [], }, + type:{ + type: String, + value: "card" + } }, data: { @@ -47,6 +51,7 @@ Component({ init() { this.genIndependentID(this.id || ''); + this.setData({ type: this.properties.type }); }, genIndependentID(id) { diff --git a/components/goods-list/index.wxml b/components/goods-list/index.wxml index 5a9a804..1d5bb56 100644 --- a/components/goods-list/index.wxml +++ b/components/goods-list/index.wxml @@ -7,6 +7,7 @@ thresholds="{{thresholds}}" class="goods-card-inside" data-index="{{index}}" + type="{{type}}" bind:thumb="onClickGoodsThumb" bind:click="onClickGoods" bind:add-cart="onAddCart" diff --git a/pages/goods/category/components/goods-category/components/c-tabbar/index.wxml b/pages/goods/category/components/goods-category/components/c-tabbar/index.wxml index 1227f88..69f95e1 100644 --- a/pages/goods/category/components/goods-category/components/c-tabbar/index.wxml +++ b/pages/goods/category/components/goods-category/components/c-tabbar/index.wxml @@ -1,4 +1,4 @@ - + + +111 \ No newline at end of file diff --git a/pages/goods/details/index.js b/pages/goods/details/index.js index a13a720..5b739ba 100644 --- a/pages/goods/details/index.js +++ b/pages/goods/details/index.js @@ -315,6 +315,15 @@ Page({ }); }, + gotoShop(){ + const { + shopGuid + } = this.data.details; + wx.navigateTo({ + url: "/pages/shop/all-goods/index?shopGuid=" + shopGuid, + }); + }, + specsConfirm() { const { buyType diff --git a/pages/goods/details/index.wxml b/pages/goods/details/index.wxml index 5ad7277..a6b8904 100644 --- a/pages/goods/details/index.wxml +++ b/pages/goods/details/index.wxml @@ -107,17 +107,17 @@ + src="{{details.shopLogo}}" + class="shop-left-img" mode="aspectFit"/> - 三星官方旗舰店 - 已售：244万 - 三星手机官方旗舰店 + {{details.shopName}} + 已售：{{details.shopSalesOrderCount}} + {{details.shopIntro}} - 进店逛逛 > + 进店逛逛 > diff --git a/pages/goods/list/index.js b/pages/goods/list/index.js index 7058d37..e642878 100644 --- a/pages/goods/list/index.js +++ b/pages/goods/list/index.js @@ -3,7 +3,8 @@ import Toast from 'tdesign-miniprogram/toast/index'; const initFilters = { overall: 1, - sorts: '', + priceSorts: '', + soldSorts: '', layout: 0, }; @@ -11,7 +12,8 @@ Page({ data: { goodsList: [], layout: 0, - sorts: '', + priceSorts: '', + soldSorts: '', overall: 1, show: false, minVal: '', @@ -28,11 +30,12 @@ Page({ total: 0, handleFilterChange(e) { - const { layout, overall, sorts } = e.detail; + const { layout, overall, priceSorts, soldSorts } = e.detail; this.pageNum = 1; this.setData({ layout, - sorts, + priceSorts, + soldSorts, overall, loadMoreStatus: 0, }); @@ -40,9 +43,9 @@ Page({ }, generalQueryData(reset = false) { - const { filter, keywords, minVal, maxVal , goodsCategoryGuid,sorts, overall} = this.data; + const { filter, keywords, minVal, maxVal , goodsCategoryGuid,priceSorts, soldSorts ,overall} = this.data; const { pageNum, pageSize } = this; - // const { sorts, overall } = filter; + // const { priceSorts,soldSorts, overall } = filter; const params = { goodsSort: 0, // 0 综合，1 价格 pageNum: 1, @@ -51,18 +54,23 @@ Page({ // keyword: keywords, }; - if (sorts) { + if (priceSorts) { params.goodsSort = 1; - params.goodsSortType = sorts === 'desc' ? 1 : 0; + params.goodsSortType = priceSorts === 'desc' ? 1 : 0; } + if(soldSorts){ + params.goodsSort = 2; + params.goodsSortType = soldSorts === 'desc' ? 1 : 0; + } if (overall) { params.goodsSort = 0; } else { - params.goodsSort = 1; + // params.goodsSort = 1; } - // params.minPrice = minVal ? minVal * 100 : 0; - // params.maxPrice = maxVal ? maxVal * 100 : undefined; + console.log(minVal,'最小价格'); + params.minPrice = minVal ? minVal : 0; + params.maxPrice = maxVal ? maxVal : 0; if (reset) return params; return { ...params, @@ -188,6 +196,7 @@ Page({ onMinValAction(e) { const { value } = e.detail; this.setData({ minVal: value }); + console.log(this.data.minVal,'最凶啊'); }, onMaxValAction(e) { @@ -222,10 +231,10 @@ Page({ this.setData( { show: false, - minVal: '', - goodsList: [], + // minVal: '', + // goodsList: [], loadMoreStatus: 0, - maxVal: '', + // maxVal: '', }, () => { this.init(); diff --git a/pages/goods/list/index.wxml b/pages/goods/list/index.wxml index 28c59df..5443eb9 100644 --- a/pages/goods/list/index.wxml +++ b/pages/goods/list/index.wxml @@ -3,7 +3,8 @@ wr-class="filter-container" bind:change="handleFilterChange" layout="{{layout}}" - sorts="{{sorts}}" + priceSorts="{{priceSorts}}" + soldSorts="{{soldSorts}}" overall="{{overall}}" bind:showFilterPopup="showFilterPopup" > diff --git a/pages/shop/all-goods/index.js b/pages/shop/all-goods/index.js new file mode 100644 index 0000000..a44bac6 --- /dev/null +++ b/pages/shop/all-goods/index.js @@ -0,0 +1,408 @@ +import { + fetchGoodsList +} from '../../../services/good/fetchGoodsList'; +import Toast from 'tdesign-miniprogram/toast/index'; + +const image = 'https://tdesign.gtimg.com/miniprogram/images/example2.png'; +const items = new Array(12).fill({ + label: '标题文字', + image +}, 0, 12); + +const initFilters = { + overall: 1, + priceSorts: '', + soldSorts: '', + layout: 0, +}; + +Page({ + data: { + goodsList: [], + layout: 0, + priceSorts: '', + soldSorts: '', + overall: 1, + show: false, + minVal: '', + maxVal: '', + filter: initFilters, + hasLoaded: false, + loadMoreStatus: 0, + loading: true, + shopGuid: 0, + + value: 'category', + list: [{ + value: 'all', + label: '全部', + icon: 'home' + }, + { + value: 'category', + label: '分类', + icon: 'app' + }, + ], + + sideBarIndex: 1, + scrollTop: 0, + categories: [{ + label: '选项一', + title: '标题一', + icon: 'app', + badgeProps: {}, + items, + }, + { + label: '选项二', + title: '标题二', + icon: 'app', + badgeProps: { + dot: true, + }, + items: items.slice(0, 9), + }, + { + label: '选项三', + title: '标题三', + icon: 'app', + badgeProps: {}, + items: items.slice(0, 9), + }, + { + label: '选项四', + title: '标题四', + icon: 'app', + badgeProps: { + count: 6, + }, + items: items.slice(0, 6), + }, + { + label: '选项五', + title: '标题五', + icon: 'app', + badgeProps: {}, + items: items.slice(0, 3), + }, + ], + }, + + offsetTopList: [], + pageNum: 1, + pageSize: 6, + total: 0, + + handleFilterChange(e) { + const { + layout, + overall, + priceSorts, + soldSorts + } = e.detail; + this.pageNum = 1; + this.setData({ + layout, + priceSorts, + soldSorts, + overall, + loadMoreStatus: 0, + }); + this.init(true); + }, + + generalQueryData(reset = false) { + const { + filter, + keywords, + minVal, + maxVal, + shopGuid, + priceSorts, + soldSorts, + overall + } = this.data; + const { + pageNum, + pageSize + } = this; + // const { priceSorts,soldSorts, overall } = filter; + const params = { + goodsSort: 0, // 0 综合，1 价格 + pageNum: 1, + pageSize: 6, + shopGuid: shopGuid + // keyword: keywords, + }; + + if (priceSorts) { + params.goodsSort = 1; + params.goodsSortType = priceSorts === 'desc' ? 1 : 0; + } + + if (soldSorts) { + params.goodsSort = 2; + params.goodsSortType = soldSorts === 'desc' ? 1 : 0; + } + if (overall) { + params.goodsSort = 0; + } else { + // params.goodsSort = 1; + } + console.log(minVal, '最小价格'); + params.minPrice = minVal ? minVal : 0; + params.maxPrice = maxVal ? maxVal : 0; + if (reset) return params; + return { + ...params, + pageNum: pageNum + 1, + pageSize, + }; + }, + + async init(reset = true) { + const { + loadMoreStatus, + goodsList = [] + } = this.data; + const params = this.generalQueryData(reset); + if (loadMoreStatus !== 0) return; + this.setData({ + loadMoreStatus: 1, + loading: true, + }); + try { + const result = await fetchGoodsList(params); + const code = 'Success'; + const data = result; + if (code.toUpperCase() === 'SUCCESS') { + const { + result, + totalNum = 0 + } = data; + if (totalNum === 0 && reset) { + this.total = totalNum; + this.setData({ + emptyInfo: { + tip: '抱歉，未找到相关商品', + }, + hasLoaded: true, + loadMoreStatus: 0, + loading: false, + goodsList: [], + }); + return; + } + + const _goodsList = reset ? result : goodsList.concat(result); + const _loadMoreStatus = _goodsList.length === totalNum ? 2 : 0; + this.pageNum = params.pageNum || 1; + this.total = totalNum; + this.setData({ + goodsList: _goodsList, + loadMoreStatus: _loadMoreStatus, + }); + } else { + this.setData({ + loading: false, + }); + wx.showToast({ + title: '查询失败，请稍候重试', + }); + } + } catch (error) { + this.setData({ + loading: false, + }); + } + this.setData({ + hasLoaded: true, + loading: false, + }); + }, + + onLoad(query) { + const { + shopGuid + } = query; + this.setData({ + shopGuid: shopGuid, + }); + + this.init(true); + + const query2 = wx.createSelectorQuery().in(this); + const { + sideBarIndex + } = this.data; + + query2 + .selectAll('.title') + .boundingClientRect((rects) => { + this.offsetTopList = rects.map((item) => item.top); + console.log(this.offsetTopList,'123123123'); + this.setData({ + scrollTop: rects[sideBarIndex].top + }); + }) + .exec(); + }, + + onReachBottom() { + const { + goodsList + } = this.data; + const { + total = 0 + } = this; + if (goodsList.length === total) { + this.setData({ + loadMoreStatus: 2, + }); + return; + } + this.init(false); + }, + + handleAddCart() { + Toast({ + context: this, + selector: '#t-toast', + message: '点击加购', + }); + }, + + tagClickHandle() { + Toast({ + context: this, + selector: '#t-toast', + message: '点击标签', + }); + }, + + gotoGoodsDetail(e) { + const { + index + } = e.detail; + const { + spuId + } = this.data.goodsList[index]; + wx.navigateTo({ + url: `/pages/goods/details/index?spuId=${spuId}`, + }); + }, + + showFilterPopup() { + this.setData({ + show: true, + }); + }, + + showFilterPopupClose() { + this.setData({ + show: false, + }); + }, + + onMinValAction(e) { + const { + value + } = e.detail; + this.setData({ + minVal: value + }); + }, + + onMaxValAction(e) { + const { + value + } = e.detail; + this.setData({ + maxVal: value + }); + }, + + reset() { + this.setData({ + minVal: '', + maxVal: '' + }); + }, + + confirm() { + const { + minVal, + maxVal + } = this.data; + let message = ''; + if (minVal && !maxVal) { + message = `价格最小是${minVal}`; + } else if (!minVal && maxVal) { + message = `价格范围是0-${minVal}`; + } else if (minVal && maxVal && minVal <= maxVal) { + message = `价格范围${minVal}-${this.data.maxVal}`; + } else { + message = '请输入正确范围'; + } + if (message) { + Toast({ + context: this, + selector: '#t-toast', + message, + }); + } + this.pageNum = 1; + this.setData({ + show: false, + // minVal: '', + // goodsList: [], + loadMoreStatus: 0, + // maxVal: '', + }, + () => { + this.init(); + }, + ); + }, + + onChange(e) { + this.setData({ + value: e.detail.value, + }); + }, + + + // 商品分类 + onSideBarChange(e) { + const { + value + } = e.detail; + this.setData({ + sideBarIndex: value, + scrollTop: this.offsetTopList[value] + }); + }, + onScroll(e) { + const { + scrollTop + } = e.detail; + const threshold = 50; // 下一个标题与顶部的距离 + + if (scrollTop < threshold) { + this.setData({ + sideBarIndex: 0 + }); + return; + } + + const index = this.offsetTopList.findIndex((top) => top > scrollTop && top - scrollTop <= threshold); + + if (index > -1) { + this.setData({ + sideBarIndex: index + }); + } + }, + +}); \ No newline at end of file diff --git a/pages/shop/all-goods/index.json b/pages/shop/all-goods/index.json new file mode 100644 index 0000000..cf69f20 --- /dev/null +++ b/pages/shop/all-goods/index.json @@ -0,0 +1,18 @@ +{ + "navigationBarTitleText": "店铺详情", + "usingComponents": { + "t-input": "tdesign-miniprogram/input/input", + "t-empty": "tdesign-miniprogram/empty/empty", + "t-toast": "tdesign-miniprogram/toast/toast", + "goods-list": "/components/goods-list/index", + "filter": "/components/filter/index", + "filter-popup": "/components/filter-popup/index", + "load-more": "/components/load-more/index", + "t-tab-bar": "tdesign-miniprogram/tab-bar/tab-bar", + "t-tab-bar-item": "tdesign-miniprogram/tab-bar-item/tab-bar-item", + "t-side-bar": "tdesign-miniprogram/side-bar/side-bar", + "t-side-bar-item": "tdesign-miniprogram/side-bar-item/side-bar-item", + "t-grid": "tdesign-miniprogram/grid/grid", + "t-grid-item": "tdesign-miniprogram/grid-item/grid-item" + } +} \ No newline at end of file diff --git a/pages/shop/all-goods/index.wxml b/pages/shop/all-goods/index.wxml new file mode 100644 index 0000000..ec37ef1 --- /dev/null +++ b/pages/shop/all-goods/index.wxml @@ -0,0 +1,78 @@ + + + + + + + + + + 三星官方旗舰店 + 已售：244万 + 三星手机官方旗舰店 + + + + + > + + + + + + + + + 价格区间 + + + - + + + + + + + + + + + + + + + + + + + + + + + + + {{item.title || item.label}} + + + + + + + + + + + + + + + + + + + + {{item.label}} + + + + \ No newline at end of file diff --git a/pages/shop/all-goods/index.wxss b/pages/shop/all-goods/index.wxss new file mode 100644 index 0000000..ca4b942 --- /dev/null +++ b/pages/shop/all-goods/index.wxss @@ -0,0 +1,115 @@ +/* pages/shop/all-goods/index.wxss */ +@import '/pages/goods/list/index.wxss'; + +.shop-detail-page{ + background-color: #f8f8f8; + /* height: 100vw; */ + padding-top: 30rpx; + padding-bottom: 170rpx; +} + +/* 店铺 */ +.shop-big-box { + width: 90%; + margin: 0rpx auto 30rpx auto; + border-radius: 40rpx; + display: flex; + justify-content: space-between; + background-color: white; +} + +.shop-left-img-box { + height: 150rpx; + width: 150rpx; + overflow: hidden; + margin-right: 20rpx; +} + +.shop-left-img { + height: 100%; + width: 100%; + border: 1rpx solid rgb(204, 204, 204); +} + +.shop-left-box { + display: flex; +} + +.shop-name { + font-size: 30rpx; + font-weight: bold; + width: 250rpx; + display: -webkit-box; + -webkit-box-orient: vertical; + overflow: hidden; + text-overflow: ellipsis; + -webkit-line-clamp: 1; +} + +.shop-sold { + font-size: 25rpx; + margin: 15rpx 0rpx; +} + +.shop-intro { + font-size: 25rpx; + width: 250rpx; + display: -webkit-box; + -webkit-box-orient: vertical; + overflow: hidden; + text-overflow: ellipsis; + -webkit-line-clamp: 1; +} + +.shop-right-button { + margin-top: 20rpx; + padding: 15rpx 20rpx; + background-color: rgb(251, 48, 44); + border-radius: 50rpx; + color: white; + font-size: 25rpx; +} + +.shop-right-arrow{ + margin-top: 20rpx; + margin-right: 30rpx; + font-weight: bold; +} + + +.shop-bottom-box{ + width: 100%; + height: 150rpx; + background-color: #fff; + position: fixed; + bottom: 0; +} + +/* 商品分类 */ +page .round-image { + border-radius: 12rpx; +} + +.side-bar-wrapper { + display: flex; + height: 100vh; +} + +.side-bar-wrapper .content { + flex: 1; +} + +.side-bar-wrapper .section { + padding: 32rpx 0; +} + +.side-bar-wrapper .title { + padding-left: 40rpx; + margin-bottom: 8rpx; + line-height: 52rpx; +} + +.side-bar-wrapper .image { + width: 96rpx; + height: 96rpx; +} \ No newline at end of file