From 3bff34c3aa7ad412042272ea6a37b7d5b49b8d9b Mon Sep 17 00:00:00 2001 From: zxl <763096477@qq.com> Date: 星期四, 26 六月 2025 09:09:51 +0800 Subject: [PATCH] Merge remote-tracking branch 'origin/dev' into dev --- pages/commodity-square/commoditySquare.vue | 158 +++++++++++++++++++++++++++++++++++++++++----------- 1 files changed, 123 insertions(+), 35 deletions(-) diff --git a/pages/commodity-square/commoditySquare.vue b/pages/commodity-square/commoditySquare.vue index 2fdf32b..8a0e232 100644 --- a/pages/commodity-square/commoditySquare.vue +++ b/pages/commodity-square/commoditySquare.vue @@ -1,5 +1,6 @@ <template> <view class="container"> + <top-bar selectedTitleIndex="shop" textColor="black" @changeTab="topBarChange" class="topBar"></top-bar> <input type="text" v-show="false" v-model="flushDom" /> <view class="search"> <u-search class="nav-search" @blur='searchGoods' placeholder="鎼滅储鍟嗗搧" :show-action="false"></u-search> @@ -8,17 +9,17 @@ <view class="left" style="width: 310rpx;"> <view class="commoditySquareItem" v-for="(item,index) in goodsList1" @click="goToGoodsInfo('goodsList1',item.id)"> - <video :src="item.goodsVideo" v-if="item.goodsVideo " v-show="item.show" :initial-time="0" + <!-- <video :src="item.goodsVideo" v-if="item.goodsVideo " v-show="item.show" :initial-time="0" :controls="false" object-fit="contain" :show-play-btn="false" :show-center-play-btn="false" @loadedmetadata="getvideoInfo($event,'goodsList1',index)" :ref="'video'+item.id" - :style="{width:item.width,height:item.height}"></video> - <image :src="item.thumbnail" v-if="item.goodsVideo ==null || item.goodsVideo == ''" + :style="{width:item.width,height:item.height}"></video> --> + <image :src="item.thumbnail" mode="aspectFill" class="goodsImg"> </image> <view class="goodsInfo"> - <view class="">{{item.goodsName}}</view> + <view class="goodsName">{{item.goodsName}}</view> <view class="priceInfo"> - <view class="">锟{item.price}}</view> + <view class="goodsPrice">锟{item.price}}</view> <view class="">宸插敭: {{item.buyCount}}</view> </view> </view> @@ -27,17 +28,17 @@ <view class="right" style="width: 310rpx;"> <view class="commoditySquareItem" v-for="(item,index) in goodsList2" @click="goToGoodsInfo('goodsList2',item.id)"> - <video :src="item.goodsVideo" v-if="item.goodsVideo " v-show="item.show" :initial-time="0" +<!-- <video :src="item.goodsVideo" v-if="item.goodsVideo " v-show="item.show" :initial-time="0" :controls="false" object-fit="contain" :show-play-btn="false" :show-center-play-btn="false" @loadedmetadata="getvideoInfo($event,'goodsList2',index)" :ref="'video'+item.id" - :style="{width:item.width,height:item.height}"></video> - <image :src="item.thumbnail" v-if="item.goodsVideo ==null || item.goodsVideo == ''" + :style="{width:item.width,height:item.height}"></video> --> + <image :src="item.thumbnail" mode="aspectFill" class="goodsImg"> </image> <view class="goodsInfo"> - <view class="">{{item.goodsName}}</view> + <view class="goodsName">{{item.goodsName}}</view> <view class="priceInfo"> - <view class="">锟{item.price}}</view> + <view class="goodsPrice">锟{item.price}}</view> <view class="">宸插敭: {{item.buyCount}}</view> </view> </view> @@ -48,7 +49,7 @@ <view class="openShowLeft" @click="showDrawer('showLeft')" v-if="!showLeft"> <uni-icons type="right" size="30"></uni-icons> </view> - <uni-drawer ref="showLeft" mode="left" width="120" height="94vh" @change="change($event,'showLeft')" + <uni-drawer ref="showLeft" mode="left" width="120" height="80vh" @change="change($event,'showLeft')" :cus-style="true" class="navigationLeft"> <scroll-view class="typeNavigation" :scroll-y="true" show-scrollbar="false"> <view class="typeNavigationItem" :class="{typeNavigationItemCheck:currentCategort ==item.id}" @@ -60,11 +61,11 @@ </view> <view style="display: flex;align-items: center;justify-content: center;margin-top: 20rpx;" v-if="canLoadMore"> 娌℃湁鏇村鏁版嵁浜�.................</view> - <custom-tabbar bgColor="#ffffff" selected="shop"></custom-tabbar> </view> </template> <script> + import TopBar from "@/components/TopBar.vue"; import { getCategoryList, getGoodsList @@ -73,8 +74,12 @@ getSTSToken } from '@/api/common.js' export default { + components: {TopBar}, data() { return { + //璁板綍涓ゅ垪楂樺害 + listHeight1: 0, + listHeight2: 0, //鏄惁鏄剧ず鎵撳紑宸︿晶寮圭獥 showLeft: false, //鍟嗗搧瀵艰埅鍒嗙被 @@ -93,6 +98,7 @@ pageSize: 12, pageNumber: 1, categoryId: null, + canFilter:true }, //鍟嗗搧鍙屽垪鏄剧ず goodsList1: [], @@ -100,12 +106,25 @@ } }, methods: { + topBarChange(titleObj) { + if (titleObj.index === 'home') { + uni.switchTab({ + url: titleObj.pagePath + }); + } else { + uni.redirectTo({ + url: titleObj.pagePath + }); + } + }, async searchGoods(keyWard) { this.getGoodsParam.keyword = keyWard this.getGoodsParam.pageNumber = 1 this.getGoodsParam.categoryId = '' this.goodsList1 = [] this.goodsList2 = [] + this.listHeight1 = 0; + this.listHeight2 = 0; await this.getgoodsData(); }, confirm() {}, @@ -126,9 +145,24 @@ const height = e.detail.height; this[arrName][index].width = 310 + 'rpx'; //璁$畻瀹介珮姣� - const videoHeight = 310 / (wight / height) - this[arrName][index].height = Math.floor(videoHeight) + 'rpx'; + const videoHeight = Math.floor(310 / (wight / height)) + this[arrName][index].height = videoHeight + 'rpx'; this[arrName][index].show = true; + //璁$畻闆嗗悎楂樺害 + if (arrName === 'goodsList2') { + if (videoHeight > 300) { + this.listHeight2 += videoHeight; + } else if (videoHeight < 300) { + this.listHeight2 -= videoHeight; + } + } + if (arrName === 'goodsList1') { + if (videoHeight > 300) { + this.listHeight1 += videoHeight; + } else if (videoHeight < 300) { + this.listHeight1 -= videoHeight; + } + } console.log(this[arrName][index].width, this[arrName][index].height) this.flushDom = new Date(); }, @@ -145,24 +179,48 @@ }, async getgoodsData() { const goodsList = await getGoodsList(this.getGoodsParam); - const sts = await getSTSToken(); - const stsUrl = sts.data.data.endpoint - // 澶勭悊鏁版嵁 - goodsList.data.result.records.forEach(item => { - if (item.thumbnail !== '' && item.thumbnail !== null && item.thumbnail.indexOf('http') === - -1) { - item.thumbnail = stsUrl + '/' + item.thumbnail - } - if (item.goodsVideo !== '' && item.goodsVideo !== null && item.goodsVideo.indexOf( - 'http') === -1) { - item.goodsVideo = stsUrl + '/' + item.goodsVideo - } - }) + // const sts = await getSTSToken(); + // const stsUrl = sts.data.data.endpoint + // // 澶勭悊鏁版嵁 + // goodsList.data.result.records.forEach(item => { + // if (item.thumbnail !== '' && item.thumbnail !== null && item.thumbnail.indexOf('http') === + // -1) { + // item.thumbnail = stsUrl + '/' + item.thumbnail + // } + // if (item.goodsVideo !== '' && item.goodsVideo !== null && item.goodsVideo.indexOf( + // 'http') === -1) { + // item.goodsVideo = stsUrl + '/' + item.goodsVideo + // } + // }) + //璁$畻涓や釜鏁扮粍鐨勯暱搴� 鐢ㄤ簬瑙e喅鐎戝竷娴佷袱杈归珮搴︿笉涓�鑷撮棶棰� //骞冲垎缁欎袱涓暟缁� - const middle = Math.ceil(goodsList.data.result.records.length / 2); + const goodsSize = goodsList.data.result.records.length; + let middle = Math.ceil(goodsSize / 2); + //鍒ゆ柇閭d釜闆嗗悎闀垮害楂� 閲嶆柊鍒嗛厤闆嗗悎鏁版嵁 + const diffHeight = this.listHeight1 - this.listHeight2; + //list1闀垮害澶т簬list2 + if (diffHeight > 0) { + const needCount = Math.floor(diffHeight / 300) + if (needCount > 6) { + middle = 0; + } else { + middle -= needCount; + } + } else if(diffHeight < 0) { + const needCount = Math.abs(Math.floor(diffHeight / 300)) + if (needCount > 6) { + middle += 6 + } else { + middle = needCount; + } + } this.goodsList1 = [...this.goodsList1, ...goodsList.data.result.records.slice(0, middle)]; this.goodsList2 = [...this.goodsList2, ...goodsList.data.result.records.slice(middle)]; this.maxPages = goodsList.data.result.pages + + // if(this.listHeight1===0||this.listHeight2===0)} + this.listHeight1 += middle * 300; + this.listHeight2 += (goodsSize - middle) * 300 }, async chooseCategory(id) { this.canLoadMore = false; @@ -172,6 +230,8 @@ this.getGoodsParam.pageNumber = 1 this.goodsList1 = []; this.goodsList2 = []; + this.listHeight1 = 0; + this.listHeight2 = 0; await this.getgoodsData(); console.log(this.maxPages) } @@ -243,7 +303,7 @@ .openShowLeft { position: fixed; - top: 120rpx; + top: 200rpx; left: 0; align-items: center; justify-content: flex-start; @@ -271,11 +331,11 @@ flex: 1 } - .priceInfo { - margin-top: 10rpx; - display: flex; - justify-content: space-around; - } + // .priceInfo { + // margin-top: 10rpx; + // display: flex; + // justify-content: space-around; + // } // 澶勭悊鎶藉眽鍐呭婊氬姩 .scroll-view-box { @@ -324,4 +384,32 @@ // width: 500rpx; // z-index: 9999; } -</style> \ No newline at end of file + .goodsInfo{ + margin-top: 10rpx; + box-sizing: border-box; + width: 100%; + display: flex; + flex-direction: column; + } + .goodsName{ + display: flex; + align-items: center; + justify-content: center; + } + .priceInfo{ + margin-top: 10rpx; + display: flex; + align-items: center; + justify-content: space-between; + } + .goodsPrice{ + color: red; + font-weight: bold; + } + .topBar { + position: fixed; + top: 20rpx; + left: 20rpx; + z-index: 1000 + } +</style> -- Gitblit v1.8.0