From e3d08d5943c13c3e9a4203835b6c348e6826dde9 Mon Sep 17 00:00:00 2001
From: peng <peng.com>
Date: 星期四, 07 八月 2025 19:35:40 +0800
Subject: [PATCH] 修改商品广场
---
api/goods.js | 6 ++
App.vue | 15 ++--
pages/commodity-square/commoditySquare.vue | 133 ++++++++++++++++++++++++++++++--------------
3 files changed, 104 insertions(+), 50 deletions(-)
diff --git a/App.vue b/App.vue
index d6bac29..ce6063d 100644
--- a/App.vue
+++ b/App.vue
@@ -252,13 +252,14 @@
}
/* 鍦ㄧ嚎閾炬帴鏈嶅姟浠呬緵骞冲彴浣撻獙鍜岃皟璇曚娇鐢紝骞冲彴涓嶆壙璇烘湇鍔＄殑绋冲畾鎬э紝浼佷笟瀹㈡埛闇�涓嬭浇瀛椾綋鍖呰嚜琛屽彂甯冧娇鐢ㄥ苟鍋氬ソ澶囦唤銆� */
- @font-face {
- font-family: 'iconfont'; /* Project id 4921691 */
- src:
- url('//at.alicdn.com/t/c/font_4921691_pgrsygpr4.woff2?t=1751620237240') format('woff2'),
- url('//at.alicdn.com/t/c/font_4921691_pgrsygpr4.woff?t=1751620237240') format('woff'),
- url('//at.alicdn.com/t/c/font_4921691_pgrsygpr4.ttf?t=1751620237240') format('truetype');
- }
+/* 鍦ㄧ嚎閾炬帴鏈嶅姟浠呬緵骞冲彴浣撻獙鍜岃皟璇曚娇鐢紝骞冲彴涓嶆壙璇烘湇鍔＄殑绋冲畾鎬э紝浼佷笟瀹㈡埛闇�涓嬭浇瀛椾綋鍖呰嚜琛屽彂甯冧娇鐢ㄥ苟鍋氬ソ澶囦唤銆� */
+@font-face {
+ font-family: 'iconfont'; /* Project id 4921691 */
+ src:
+ url('//at.alicdn.com/t/c/font_4921691_hqfbvw9iyo8.woff2?t=1754532325642') format('woff2'),
+ url('//at.alicdn.com/t/c/font_4921691_hqfbvw9iyo8.woff?t=1754532325642') format('woff'),
+ url('//at.alicdn.com/t/c/font_4921691_hqfbvw9iyo8.ttf?t=1754532325642') format('truetype');
+}
.iconfont {
/* font-family闇�瑕佸拰鑷畾涔夌殑鐩稿悓 */
font-family: "iconfont" !important;
diff --git a/api/goods.js b/api/goods.js
index e769eb5..b0a0f5b 100644
--- a/api/goods.js
+++ b/api/goods.js
@@ -14,6 +14,12 @@
method: Method.GET,
});
}
+export function getBannerList(goodsId) {
+ return http.request({
+ url: `/goods/goods/getBannerList`,
+ method: Method.GET,
+ });
+}
/**
* 浠嶦S涓幏鍙栫浉鍏冲晢鍝佸搧鐗屽悕绉帮紝鍒嗙被鍚嶇О鍙婂睘鎬�
diff --git a/pages/commodity-square/commoditySquare.vue b/pages/commodity-square/commoditySquare.vue
index f0623af..791daf2 100644
--- a/pages/commodity-square/commoditySquare.vue
+++ b/pages/commodity-square/commoditySquare.vue
@@ -6,8 +6,19 @@
<u-search class="nav-search" @change='searchGoods' v-model="searchInfo" placeholder="鎼滅储鍟嗗搧"
:show-action="false"></u-search>
</view>
- <view style="display: flex;padding: 32rpx;box-sizing: border-box;height: 100%;">
- <view class="navigatorMenue">
+ <view class="banner" style="margin-top: 14rpx;" v-if="bannerList.length>0">
+ <swiper :indicator-dots="false" :autoplay="true" :interval="3000" :duration="1000" :circular="true"
+ style="width: 100%;height: 160rpx;">
+ <swiper-item v-for="item in bannerList" :key="item.id" @click="navigateGoodsInfo(item.skuId,item.goodsId)">
+ <view style="width: 100%; display: flex; align-items: center;justify-content: center;">
+ <image :src="item.showBannerUrl" mode="aspectFill"
+ style="width: 690rpx;height: 150rpx;border-radius: 24rpx;overflow: hidden;"></image>
+ </view>
+ </swiper-item>
+ </swiper>
+ </view>
+ <view style="display: flex;padding: 32rpx;box-sizing: border-box;">
+ <view class="navigatorMenue" style="height: 1050rpx;">
<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">
@@ -16,37 +27,39 @@
</scroll-view>
</view>
- <view class="goodsInfos" style="position: relative;">
- <scroll-view :scroll-y="true" :show-scrollbar="false" style="height: 100%;" @scrolltolower="loadMoreData()">
+ <view class="goodsInfos" style="position: relative;overflow: hidden;box-sizing: border-box;">
+ <scroll-view :scroll-y="true" :show-scrollbar="false" style="height: 1050rpx;"
+ @scrolltolower="loadMoreData()">
<view class="goodsItem" v-for="item in goodsList" :key="item.id"
- @click.prevent="goToGoodsInfo(item.id)"
- style="display: flex;align-items: flex-start;justify-content: flex-start;margin: 10rpx 0;
- box-sizing: border-box; ">
+ @click.prevent="goToGoodsInfo(item.id)" style="display: flex;align-items: flex-start;justify-content: flex-start;margin: 10rpx 0;
+ box-sizing: border-box; border-bottom: 1rpx solid lightgray;">
<view class="pic" style="position: relative;">
<image :src="item.thumbnail" mode="aspectFill"
- style="height: 150rpx;width: 150rpx;border-radius: 24rpx;">
+ style="height: 200rpx;width: 200rpx;border-radius: 24rpx;">
</image>
<text style="background-color: #f92e20;color: #fff;
font-weight: bold;border-radius: 12rpx;padding: 5rpx;
margin-right: 15rpx;position: absolute;top: 0;left: 0;" v-if="item.salesModel==='PRESALE'">棰勫敭</text>
</view>
- <view class="goodsContent" style="display: flex;align-items: flex-start;justify-content: space-between;
+ <view style="display: flex;align-items: flex-start;justify-content: space-between;
margin-left: 10rpx;flex-direction: column;width: 100%;">
<view class="goodsName">
<text>{{item.goodsName}}</text>
</view>
-
+ <view class="goodsContent">
+ {{item.sellingPoint}}
+ </view>
<view
- style="display: flex; justify-content: space-between;align-items:center; 100%;margin-top: 32rpx;width: 100%;">
+ style="display: flex; justify-content: space-between;align-items:center; 100%;width: 100%;">
<view class="goodsPrice">锟{item.price}}</view>
<view class="addCard" style="display: flex; align-items: center;">
<view style="padding: 20rpx 0 20rpx 20rpx;" v-show="item.cardNum && item.cardNum>0"
@click.stop="miousCardNum($event,item.id)">
<uni-icons type="minus" size="30" color="#96a6bc"></uni-icons>
</view>
- <input v-show="item.cardNum&&item.cardNum>0" @click.stop="" :maxlength="2" type="number"
- confirm-type="numeric" style="width: 50rpx;text-align: center;"
+ <input v-show="item.cardNum&&item.cardNum>0" @click.stop="" :maxlength="2"
+ type="number" confirm-type="numeric" style="width: 50rpx;text-align: center;"
v-model="item.cardNum" :disabled="true" />
<view style="padding: 20rpx 20rpx 20rpx 0;"
@click.stop="addCardNum($event,item.id)">
@@ -58,13 +71,18 @@
</view>
</view>
</scroll-view>
- </view>
- <view @click="gotoCardList()" style="position: absolute;bottom: 120rpx; right: 32rpx;">
- <div class="settlement" >鍘昏喘鐗╄溅缁撶畻</div>
- </view>
</view>
+ <!-- <view @click="gotoCardList()" style="position: absolute;bottom: 120rpx; right: 32rpx;">
+ <view class="settlement">鍘昏喘鐗╄溅缁撶畻</view>
+ </view> -->
</view>
-
+ <view class="squareFotter" style="width: 750rpx; display: flex;align-items: center;
+ justify-content: space-between;padding: 0 32rpx;box-sizing: border-box;">
+ <view class="icon">
+ <text class="iconfont"></text>
+ </view>
+ <view class="settlement" @click="gotoCardList()">鍘荤粨绠�</view>
+ </view>
</view>
</template>
@@ -72,7 +90,8 @@
import TopBar from "@/components/TopBar.vue";
import {
getCategoryList,
- getGoodsList
+ getGoodsList,
+ getBannerList
} from "@/api/goods.js";
import {
addCard,
@@ -91,8 +110,9 @@
},
data() {
return {
- canGoToCarList:false,
- nums:10,
+ bannerList:[],
+ canGoToCarList: false,
+ nums: 10,
searchInfo: '',
//鍟嗗搧鍒楄〃
goodsList: [],
@@ -115,16 +135,22 @@
pageNumber: 1,
categoryId: null,
canFilter: true,
- needFilterPre:true,
- order:'desc',
- sort:'goodsSort'
+ needFilterPre: true,
+ order: 'asc',
+ sort: 'goodsSort'
},
}
},
methods: {
- gotoCardList(){
+ navigateGoodsInfo(skuId,goodsId){
+ console.log(skuId,goodsId)
uni.navigateTo({
- url:'/pages/cusbar/cart/cartList'
+ url: `/pages/product/goods?id=${skuId}&goodsId=${goodsId}`
+ });
+ },
+ gotoCardList() {
+ uni.navigateTo({
+ url: '/pages/cusbar/cart/cartList'
})
},
addCardNum(e, id) {
@@ -261,7 +287,7 @@
},
//瑙﹀簳鑾峰彇鏁版嵁
async loadMoreData() {
- console.log("瑙﹀簳鍔犺浇------------銆�",this.maxPages)
+ console.log("瑙﹀簳鍔犺浇------------銆�", this.maxPages)
if (this.getGoodsParam.pageNumber < this.maxPages) {
this.getGoodsParam.pageNumber++;
await this.getgoodsData()
@@ -279,11 +305,16 @@
})
this.categoryList = list.data.result
},
+ async getBannerList() {
+ const bannerList = await getBannerList();
+ this.bannerList = bannerList.data.data
+ console.log(this.bannerList)
+ },
async getgoodsData() {
const cardInfos = await getCarts();
// 澶勭悊璐墿杞︿俊鎭�
let cardMap = new Map();
- this.canGoToCarList = cardInfos.data.result.cartList.length>0
+ this.canGoToCarList = cardInfos.data.result.cartList.length > 0
cardInfos.data.result.cartList.forEach(item => {
item.skuList.forEach(sku => {
@@ -302,9 +333,9 @@
item.cardNum = cardItem.num;
}
})
- this.goodsList = [...this.goodsList,...goodsList.data.result.records];
+ this.goodsList = [...this.goodsList, ...goodsList.data.result.records];
this.maxPages = goodsList.data.result.pages
- console.log('this.goodsList----------------------->',JSON.stringify(goodsList.data.result))
+ console.log('this.goodsList----------------------->', JSON.stringify(goodsList.data.result))
},
async chooseCategory(id) {
@@ -336,27 +367,30 @@
this.getGoodsParam.categoryId = ""
this.getGoodsParam.keyword = ""
await this.getgoodsData()
+ await this.getBannerList()
}
}
</script>
<style lang="scss" scoped>
.container {
+ box-sizing: border-box;
width: 750rpx;
padding-bottom: 64rpx;
height: 100vh;
overflow: hidden;
}
+
.settlement {
- width: 180rpx;
- height: 70rpx;
- line-height: 70rpx;
- background: linear-gradient(91deg, $light-color 1%, $aider-light-color 99%);
- border-radius: 900rpx;
- text-align: center;
- color: #fff;
- margin-right: 10rpx;
+ width: 180rpx;
+ height: 70rpx;
+ line-height: 70rpx;
+ background: linear-gradient(91deg, $light-color 1%, $aider-light-color 99%);
+ border-radius: 900rpx;
+ text-align: center;
+ color: #fff;
+ margin-right: 10rpx;
}
.navigatorMenue {
@@ -368,7 +402,9 @@
}
.goodsInfos {
+ box-sizing: border-box;
width: 500rpx;
+ height: 1050rpx;
margin-left: 10rpx;
}
@@ -401,16 +437,27 @@
}
.goodsName {
- padding: 10rpx;
+ // padding: 10rpx;
box-sizing: border-box;
+ // display: -webkit-box;
+ // -webkit-box-orient: vertical;
+ // -webkit-line-clamp: 1;
+ // height: 52rpx;
+ font-weight: bold;
+ // overflow: hidden;
+ // text-overflow: ellipsis;
+ // text-align: start;
+ // vertical-align: middle;
+ text-wrap: wrap;
+ }
+
+ .goodsContent {
+ text-indent: 2em;
display: -webkit-box;
-webkit-box-orient: vertical;
- -webkit-line-clamp: 1;
- height: 52rpx;
- font-weight: bold;
+ -webkit-line-clamp: 2;
overflow: hidden;
text-overflow: ellipsis;
- text-align: start;
vertical-align: middle;
}
--
Gitblit v1.8.0