From 5027240f2bbc9a7f74b8cc661c265eb9d52eb43a Mon Sep 17 00:00:00 2001
From: peng <peng.com>
Date: 星期四, 19 六月 2025 09:16:57 +0800
Subject: [PATCH] Merge remote-tracking branch 'origin/dev' into dev
---
pages/commodity-square/commoditySquare.vue | 303 ++++++++++++++++++++++++++++++++++++++++++++++++++
1 files changed, 303 insertions(+), 0 deletions(-)
diff --git a/pages/commodity-square/commoditySquare.vue b/pages/commodity-square/commoditySquare.vue
new file mode 100644
index 0000000..b335475
--- /dev/null
+++ b/pages/commodity-square/commoditySquare.vue
@@ -0,0 +1,303 @@
+<template>
+ <view class="container">
+ <input type="text" v-show="false" v-model="flushDom"/>
+ <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"
+ :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 == ''"
+ mode="aspectFill" class="goodsImg">
+ </image>
+ <view class="goodsInfo">
+ <view class="">{{item.goodsName}}</view>
+ <view class="priceInfo">
+ <view class="">锟{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"
+ :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 == ''"
+ mode="aspectFill" class="goodsImg">
+ </image>
+ <view class="goodsInfo">
+ <view class="">{{item.goodsName}}</view>
+ <view class="priceInfo">
+ <view class="">锟{item.price}}</view>
+ <view class="">宸插敭: {{item.buyCount}}</view>
+ </view>
+ </view>
+ </view>
+ </view>
+
+
+ <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">
+ <view class="typeNavigationItem" :class="{typeNavigationItemCheck:currentCategort ==item.id}"
+ @click="chooseCategory(item.id)" v-for="item in categoryList" :key="item.id">
+ {{item.name}}
+ </view>
+ </view>
+ </uni-drawer>
+ </view>
+ <view style="display: flex;align-items: center;justify-content: center;margin-top: 20rpx;" v-if="canLoadMore">娌℃湁鏇村鏁版嵁浜�.................</view>
+ </view>
+</template>
+
+<script>
+ import {
+ getCategoryList,
+ getGoodsList
+ } from "@/api/goods.js";
+ import {
+ getSTSToken
+ } from '@/api/common.js'
+ export default {
+ data() {
+ return {
+ //鏄惁鏄剧ず鎵撳紑宸︿晶寮圭獥
+ showLeft: false,
+ //鍟嗗搧瀵艰埅鍒嗙被
+ categoryList: [],
+ //褰撳墠閫変腑鐨勫垎绫�
+ currentCategort: '',
+ //鏄剧ず娌℃湁鏁版嵁
+ canLoadMore:false,
+ //鏈�澶ч〉鏁�
+ maxPages: 0,
+ //鍒锋柊dom浣跨敤
+ flushDom:'',
+ //鏌ヨ鍟嗗搧闇�瑕佺殑鍙傛暟
+ getGoodsParam: {
+ keyword: '',
+ pageSize: 12,
+ pageNumber: 1,
+ categoryId: null,
+ },
+ //鍟嗗搧鍙屽垪鏄剧ず
+ goodsList1: [],
+ goodsList2: [],
+ }
+ },
+ methods: {
+ confirm() {},
+ // 鎵撳紑绐楀彛
+ showDrawer(e) {
+ this.$refs[e].open()
+ },
+ // 鍏抽棴绐楀彛
+ closeDrawer(e) {
+ this.$refs[e].close()
+ },
+ // 鎶藉眽鐘舵�佸彂鐢熷彉鍖栬Е鍙�
+ change(e, type) {
+ this[type] = e
+ },
+ getvideoInfo(e, arrName, index) {
+ const wight = e.detail.width;
+ const height = e.detail.height;
+ this[arrName][index].width = 310 + 'rpx';
+ //璁＄畻瀹介珮姣�
+ const videoHeight = 310 / (wight / height)
+ this[arrName][index].height = Math.floor(videoHeight) + 'rpx';
+ this[arrName][index].show = true;
+ 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}`
+ });
+ },
+ //鑾峰彇鍒嗙被瀵艰埅鏍�
+ async loadCategoryList() {
+ let list = await getCategoryList(0);
+ this.categoryList = list.data.result
+ },
+ 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)
+ }
+ },
+ onShow() {
+ this.showDrawer('showLeft')
+ },
+ onLoad() {
+ this.loadCategoryList();
+ },
+ 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{
+ this.canLoadMore = true;
+ }
+
+ }
+ }
+</script>
+
+<style lang="scss" scoped>
+ .container {
+ width: 750rpx;
+ padding-bottom: 64rpx;
+ }
+
+ .commoditySquare {
+ width: 750rpx;
+ position: relative;
+ box-sizing: border-box;
+ display: flex;
+ justify-content: space-around;
+ }
+
+ .left {
+ box-sizing: border-box;
+ }
+
+ .right {
+ box-sizing: border-box;
+ }
+
+ .goodsImg {
+ width: 300rpx;
+ height: 300rpx;
+ padding-bottom: 10rpx;
+ }
+
+ .commoditySquareItem {
+ border: 1rpx solid darkgray;
+ border-radius: 12rpx;
+ box-sizing: border-box;
+ padding: 0 32rpx;
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ justify-content: center;
+ }
+
+ .commoditySquareItem:nth-child(n+1) {
+ margin-top: 32rpx;
+ }
+
+ .openShowLeft {
+ position: fixed;
+ top: 30rpx;
+ left: 0;
+ }
+
+ .navigationLeft {
+ position: relative;
+ background-color: #fcfcfc;
+ // opacity: 0.5;
+ box-sizing: border-box;
+ }
+
+
+ .scroll-view {
+ /* #ifndef APP-NVUE */
+ width: 100%;
+ height: 100%;
+ /* #endif */
+ flex: 1
+ }
+
+ .priceInfo {
+ margin-top: 10rpx;
+ display: flex;
+ justify-content: space-around;
+ }
+
+ // 澶勭悊鎶藉眽鍐呭婊氬姩
+ .scroll-view-box {
+ flex: 1;
+ position: absolute;
+ top: 0;
+ right: 0;
+ bottom: 0;
+ left: 0;
+ }
+
+
+ .typeNavigation {
+ padding: 10rpx;
+ position: relative;
+ }
+
+ .typeNavigationItem {
+ padding: 24rpx;
+ font-size: 28rpx;
+ color: black;
+ margin-top: 10rpx;
+ border-radius: 12rpx;
+ border: 1rpx solid gray;
+ }
+
+ .typeNavigationItemCheck {
+ background-color: #42b993;
+ color: #fff;
+ border: 0;
+ }
+
+ .closeShowLeft {
+ position: absolute;
+ top: 20rpx;
+ right: 0;
+ }
+</style>
\ No newline at end of file
--
Gitblit v1.8.0