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 | 276 ++++++++++++++++++++++++++++++++++++++----------------
1 files changed, 194 insertions(+), 82 deletions(-)
diff --git a/pages/commodity-square/commoditySquare.vue b/pages/commodity-square/commoditySquare.vue
index b335475..8a0e232 100644
--- a/pages/commodity-square/commoditySquare.vue
+++ b/pages/commodity-square/commoditySquare.vue
@@ -1,38 +1,44 @@
<template>
<view class="container">
- <input type="text" v-show="false" v-model="flushDom"/>
+ <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>
+ </view>
<view class="commoditySquare">
<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"
+ <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"
: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>
</view>
</view>
<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"
+ <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"
: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>
@@ -43,21 +49,23 @@
<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" @change="change($event,'showLeft')"
- class="navigationLeft">
- <view class="typeNavigation">
+ <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}"
@click="chooseCategory(item.id)" v-for="item in categoryList" :key="item.id">
{{item.name}}
</view>
- </view>
+ </scroll-view>
</uni-drawer>
</view>
- <view style="display: flex;align-items: center;justify-content: center;margin-top: 20rpx;" v-if="canLoadMore">娌℃湁鏇村鏁版嵁浜�.................</view>
+ <view style="display: flex;align-items: center;justify-content: center;margin-top: 20rpx;" v-if="canLoadMore">
+ 娌℃湁鏇村鏁版嵁浜�.................</view>
</view>
</template>
<script>
+ import TopBar from "@/components/TopBar.vue";
import {
getCategoryList,
getGoodsList
@@ -66,8 +74,12 @@
getSTSToken
} from '@/api/common.js'
export default {
+ components: {TopBar},
data() {
return {
+ //璁板綍涓ゅ垪楂樺害
+ listHeight1: 0,
+ listHeight2: 0,
//鏄惁鏄剧ず鎵撳紑宸︿晶寮圭獥
showLeft: false,
//鍟嗗搧瀵艰埅鍒嗙被
@@ -75,17 +87,18 @@
//褰撳墠閫変腑鐨勫垎绫�
currentCategort: '',
//鏄剧ず娌℃湁鏁版嵁
- canLoadMore:false,
+ canLoadMore: false,
//鏈�澶ч〉鏁�
maxPages: 0,
//鍒锋柊dom浣跨敤
- flushDom:'',
+ flushDom: '',
//鏌ヨ鍟嗗搧闇�瑕佺殑鍙傛暟
getGoodsParam: {
keyword: '',
pageSize: 12,
pageNumber: 1,
categoryId: null,
+ canFilter:true
},
//鍟嗗搧鍙屽垪鏄剧ず
goodsList1: [],
@@ -93,6 +106,27 @@
}
},
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() {},
// 鎵撳紑绐楀彛
showDrawer(e) {
@@ -111,84 +145,115 @@
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();
},
- goToGoodsInfo(arrName,id){
- const item =this[arrName].find(item=> id === item.id);
- uni.navigateTo({
- url: `/pages/product/goods?id=${item.id}&goodsId=${item.goodsId}`
- });
+ goToGoodsInfo(arrName, id) {
+ const item = this[arrName].find(item => id === item.id);
+ uni.navigateTo({
+ url: `/pages/product/goods?id=${item.id}&goodsId=${item.goodsId}`
+ });
},
//鑾峰彇鍒嗙被瀵艰埅鏍�
async loadCategoryList() {
let list = await getCategoryList(0);
this.categoryList = list.data.result
},
+ 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 goodsSize = goodsList.data.result.records.length;
+ let middle = Math.ceil(goodsSize / 2);
+ //鍒ゆ柇閭ｄ釜闆嗗悎闀垮害楂� 閲嶆柊鍒嗛厤闆嗗悎鏁版嵁
+ 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) {
- if (this.currentCategort === id) return
this.canLoadMore = false;
this.currentCategort = id
this.getGoodsParam.categoryId = id
this.getGoodsParam.keyword = ''
this.getGoodsParam.pageNumber = 1
- 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 middle = Math.ceil(goodsList.data.result.records.length / 2);
- this.goodsList1 = goodsList.data.result.records.slice(0, middle);
- this.goodsList2 = goodsList.data.result.records.slice(middle);
- this.maxPages = goodsList.data.result.pages
- console.log(this.maxPages)
+ this.goodsList1 = [];
+ this.goodsList2 = [];
+ this.listHeight1 = 0;
+ this.listHeight2 = 0;
+ await this.getgoodsData();
+ console.log(this.maxPages)
}
},
onShow() {
this.showDrawer('showLeft')
},
- onLoad() {
- this.loadCategoryList();
+ async onLoad() {
+ await this.loadCategoryList();
+ this.getGoodsParam.pageNumber = 1
+ this.getGoodsParam.categoryId = ""
+ this.getGoodsParam.keyword = ""
+ await this.getgoodsData()
},
- async onReachBottom(){
- if(this.getGoodsParam.pageNumber<this.maxPages){
+ async onReachBottom() {
+ if (this.getGoodsParam.pageNumber < this.maxPages) {
this.getGoodsParam.pageNumber++;
- 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 middle = Math.ceil(goodsList.data.result.records.length / 2);
- 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
- }else{
+ await this.getgoodsData()
+ } else {
this.canLoadMore = true;
}
-
+
}
}
</script>
@@ -222,7 +287,7 @@
}
.commoditySquareItem {
- border: 1rpx solid darkgray;
+ // border: 1rpx solid #b6dbba;
border-radius: 12rpx;
box-sizing: border-box;
padding: 0 32rpx;
@@ -238,8 +303,16 @@
.openShowLeft {
position: fixed;
- top: 30rpx;
+ top: 200rpx;
left: 0;
+ align-items: center;
+ justify-content: flex-start;
+ background-color: #b6b6b6;
+ opacity: 0.8;
+ z-index: 999;
+ height: 70rpx;
+ width: 50rpx;
+ border-radius: 0 50% 50% 0;
}
.navigationLeft {
@@ -258,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 {
@@ -276,8 +349,10 @@
.typeNavigation {
+ box-sizing: border-box;
padding: 10rpx;
- position: relative;
+ height: 100%;
+ // position: relative;
}
.typeNavigationItem {
@@ -300,4 +375,41 @@
top: 20rpx;
right: 0;
}
-</style>
\ No newline at end of file
+
+ .nav-search {
+ padding-left: 30rpx !important;
+ padding-right: 20rpx !important;
+ // position: fixed;
+ // top: 0;
+ // width: 500rpx;
+ // z-index: 9999;
+ }
+ .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