修改商品广场

peng

2025-08-07 e3d08d5943c13c3e9a4203835b6c348e6826dde9

修改商品广场

 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;

 api/goods.js

@@ -14,6 +14,12 @@
    method: Method.GET,
  });
}
export function getBannerList(goodsId) {
  return http.request({
    url: `/goods/goods/getBannerList`,
    method: Method.GET,
  });
}

/**
 * 从ES中获取相关商品品牌名称，分类名称及属性

 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">&#xe761;</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;
    }