update 修改商品广场样式

peng

2025-07-02 274b52d99807967726ec3234a744c34e3de3f913

update 修改商品广场样式

 App.vue

@@ -250,15 +250,15 @@
    .flex1 {
        flex: 1; //必须父级设置flex
    }
	
    /* 在线链接服务仅供平台体验和调试使用，平台不承诺服务的稳定性，企业客户需下载字体包自行发布使用并做好备份。 */
    @font-face {
      font-family: 'iconfont';  /* Project id 4921691 */
      src: 
           url('//at.alicdn.com/t/c/font_4921691_3vdxatwdwe9.woff2?t=1750062394172') format('woff2'),
           url('//at.alicdn.com/t/c/font_4921691_3vdxatwdwe9.woff?t=1750062394172') format('woff'),
           url('//at.alicdn.com/t/c/font_4921691_3vdxatwdwe9.ttf?t=1750062394172') format('truetype');
    }

  /* 在线链接服务仅供平台体验和调试使用，平台不承诺服务的稳定性，企业客户需下载字体包自行发布使用并做好备份。 */
  @font-face {
    font-family: 'iconfont';  /* Project id 4921691 */
    src:
        url('//at.alicdn.com/t/c/font_4921691_xee9dyc5vvk.woff2?t=1751423177597') format('woff2'),
        url('//at.alicdn.com/t/c/font_4921691_xee9dyc5vvk.woff?t=1751423177597') format('woff'),
        url('//at.alicdn.com/t/c/font_4921691_xee9dyc5vvk.ttf?t=1751423177597') format('truetype');
  }
    .iconfont {
          /* font-family需要和自定义的相同 */
           font-family: "iconfont" !important;

 api/trade.js

@@ -58,7 +58,21 @@
    data,
  });
}

/**
 * 添加货品到购物车
 * @param skuId      产品ID
 * @param num         产品的购买数量
 * @param cartType       购物车类型，默认加入购物车
 */
export function addCard(data) {
  return http.request({
    url: "/trade/carts/addCard",
    method: Method.POST,
    needToken: true,
    header: { "content-type": "application/x-www-form-urlencoded" },
    data,
  });
}


/**

 pages/commodity-square/commoditySquare.vue

@@ -1,67 +1,64 @@
<template>
    <view class="container">
    <view class="container" :style="{paddingTop:buttonHeight+'px'}">
        <input type="text" value="flushDom" v-if="false" />
        <top-bar selectedTitleIndex="shop" textColor="black" @changeTab="topBarChange" class="topBar"></top-bar>
        <input type="text" v-show="false" v-model="flushDom" />
        <view class="search" :style="{marginTop: buttonHeight+'px',}">
            <u-search class="nav-search" @blur='searchGoods' placeholder="搜索商品" :show-action="false"></u-search>
        <view class="search">
            <u-search class="nav-search" @blur='searchGoods' v-model="searchInfo" placeholder="搜索商品"
                :show-action="false"></u-search>
        </view>
        <scroll-view class="scrollContainer"  :scroll-y="true" @scrolltolower="loadMoreData" >
            <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"
                        mode="aspectFill" class="goodsImg">
                    </image>
                    <view class="goodsInfo">
                        <view class="goodsName">{{item.goodsName}}</view>
                        <view class="priceInfo">
                            <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"
                        :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"
                        mode="aspectFill" class="goodsImg">
                    </image>
                    <view class="goodsInfo">
                        <view class="goodsName">{{item.goodsName}}</view>
                        <view class="priceInfo">
                            <view class="goodsPrice">￥{{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>
        </view>
        <view style="display: flex;align-items: center;justify-content: center;margin-top: 20rpx;" v-if="canLoadMore">
            没有更多数据了.................</view>
        </scroll-view>
            <uni-drawer ref="showLeft" mode="left" width="120" height="80vh" :drawerTop="buttonHeight" @change="change($event,'showLeft')"
                :cus-style="true" class="navigationLeft" :mask="false">
                <scroll-view class="typeNavigation" :scroll-y="true" :show-scrollbar="false" >
        <view style="display: flex;padding: 32rpx;box-sizing: border-box;height: 100%;">
            <view class="navigatorMenue">
                <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>
                </scroll-view>
            </uni-drawer>

            </view>
            <view class="goodsInfos">
                <scroll-view :scroll-y="true" :show-scrollbar="false">

                    <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;">
                        <view class="pic">
                            <image :src="item.thumbnail" mode="aspectFill"
                                style="height: 150rpx;width: 150rpx;border-radius: 24rpx;">
                            </image>
                        </view>
                        <view class="goodsContent" style="display: flex;align-items: flex-start;justify-content: space-between;
                            margin-left: 10rpx;flex-direction: column;width: 100%;">
                            <view class="goodsName">
                                <text style="background-color: #f92e20;color: #fff;
                                    font-weight: bold;border-radius: 12rpx;padding: 5rpx;
                                    margin-right: 15rpx;">预售</text>
                                <text>{{item.goodsName}}</text>
                            </view>
                            <view
                                style="display: flex; justify-content: space-between;align-items:center; 100%;margin-top: 32rpx;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" :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)">
                                        <uni-icons type="plus" size="30" color="#e06c75"></uni-icons>
                                        <!-- <text class="iconfont" style="size: 1.5em;">&#xe7b1;</text> -->
                                    </view>
                                </view>
                            </view>
                        </view>
                    </view>
                </scroll-view>
            </view>
        </view>

    </view>
</template>

@@ -72,18 +69,27 @@
        getGoodsList
    } from "@/api/goods.js";
    import {
        addCard,
        getCarts,
        deleteSkuItem
    } from '@/api/trade.js'
    import {
        getSTSToken
    } from '@/api/common.js'
    import {
        data
    } from "../../components/uview-components/uview-ui/libs/mixin/mixin";
    export default {
        components: {TopBar},
        components: {
            TopBar
        },
        data() {
            return {
                buttonHeight:0,
                searchInfo: '',
                //商品列表
                goodsList: [],
                buttonHeight: 0,
                //记录两列高度
                listHeight1: 0,
                listHeight2: 0,
                //是否显示打开左侧弹窗
                showLeft: false,
                //商品导航分类
                categoryList: [],
                //当前选中的分类
@@ -100,14 +106,79 @@
                    pageSize: 12,
                    pageNumber: 1,
                    categoryId: null,
                    canFilter:true
                    canFilter: true
                },
                //商品双列显示
                goodsList1: [],
                goodsList2: [],
            }
        },
        methods: {
            addCardNum(e, id) {
                this.goodsList.forEach(item => {
                    if (item.id === id) {
                        if (item.cardNum) {
                            item.cardNum++;
                        } else {
                            item.cardNum = 1;
                        }
                        this.flushDom = new Date().getMilliseconds();
                        console.log("选中的商品为------------------->", JSON.stringify(item))
                        const data = {
                            skuId: item.id,
                            num: item.cardNum
                        }
                        addCard(data)
                        return;
                    }
                })

            },
            miousCardNum(e, id) {
                for (let i = 0; i < this.goodsList.length; i++) {
                    const item = this.goodsList[i];
                    if (item.id === id) {
                        if (item.cardNum && item.cardNum > 1) {
                            item.cardNum--;
                        } else {
                            deleteSkuItem([id]);
                            item.cardNum = 0;
                            this.flushDom = new Date().getMilliseconds();
                            break; // 退出整个循环
                        }
                        this.flushDom = new Date().getMilliseconds();
                        const data = {
                            skuId: item.id,
                            num: item.cardNum
                        };
                        addCard(data);
                        break; // 退出整个循环
                    }
                }
                // this.goodsList.forEach(item => {
                //     console.log('测试为什么不进入循环1',id,JSON.stringify(item.cardNum))
                //     if (item.id === id) {
                //         console.log('测试为什么不进入循环2',id,JSON.stringify(item.cardNum))
                //         if (item.cardNum && item.cardNum > 1) {
                //             console.log('测试为什么不进入循环3',id,JSON.stringify(item.cardNum))
                //             item.cardNum--;
                //         } else {
                //             console.log('测试为什么不进入循环4',id,JSON.stringify(item.cardNum))
                //             deleteSkuItem([id])
                //             item.cardNum = 0;
                //             this.flushDom = new Date().getMilliseconds();
                //             return;
                //         }
                //         this.flushDom = new Date().getMilliseconds();
                //         console.log("选中的商品为------------------->", JSON.stringify(item))
                //         console.log(item.cardNum, item.id)
                //         const data = {
                //             skuId: item.id,
                //             num: item.cardNum
                //         }
                //         addCard(data)
                //         return;
                //     }
                // })

            },
            topBarChange(titleObj) {
                if (titleObj.index === 'home') {
                    uni.switchTab({
@@ -123,10 +194,6 @@
                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() {},
@@ -168,8 +235,8 @@
                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);
            goToGoodsInfo(id) {
                const item = this.goodsList.find(item => id === item.id);
                uni.navigateTo({
                    url: `/pages/product/goods?id=${item.id}&goodsId=${item.goodsId}`
                });
@@ -182,80 +249,66 @@
                } else {
                    this.canLoadMore = true;
                }
			

            },
            //获取分类导航栏
            async loadCategoryList() {
                let list = await getCategoryList(0);
                list.data.result.unshift({
                    id: 'ALL',
                    name: '全部'
                })
                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
                const cardInfos = await getCarts();
                // 处理购物车信息
                let cardMap = new Map();
                cardInfos.data.result.cartList.forEach(item => {

                // if(this.listHeight1===0||this.listHeight2===0)}
                this.listHeight1 += middle * 300;
                this.listHeight2 += (goodsSize - middle) * 300
                    item.skuList.forEach(sku => {
                        cardMap.set(sku.goodsSku.id, {
                            skuId: sku.goodsSku.id,
                            num: sku.num
                        })
                    })

                })
                //回显购物车数据
                const goodsList = await getGoodsList(this.getGoodsParam);
                goodsList.data.result.records.forEach(item => {
                    const cardItem = cardMap.get(item.id);
                    if (cardItem) {
                        item.cardNum = cardItem.num;
                    }
                })
                this.goodsList = goodsList.data.result.records;

            },
            async chooseCategory(id) {
                this.searchInfo = '';
                this.canLoadMore = false;
                this.currentCategort = id
                this.getGoodsParam.categoryId = id
                this.getGoodsParam.keyword = ''
                this.getGoodsParam.pageNumber = 1
                this.goodsList1 = [];
                this.goodsList2 = [];
                this.listHeight1 = 0;
                this.listHeight2 = 0;
                this.goodsList = []
                if (id === 'ALL') {
                    this.getGoodsParam.categoryId = '';
                } else {
                    this.getGoodsParam.categoryId = id
                }
                await this.getgoodsData();
                console.log(this.maxPages)
            }
        },
        onShow() {
            this.showDrawer('showLeft')
        },

        async onLoad() {
            // 获取状态栏高度
            const systemInfo = uni.getSystemInfoSync();
            this.buttonHeight = systemInfo.statusBarHeight +40;
            console.log('-------------------------------->',this.buttonHeight)

            this.buttonHeight = systemInfo.statusBarHeight + 40;
            console.log('-------------------------------->', JSON.stringify(systemInfo))
            await this.loadCategoryList();
            this.getGoodsParam.pageNumber = 1
            this.getGoodsParam.categoryId = ""
@@ -271,106 +324,35 @@
        padding-bottom: 64rpx;
        height: 100vh;
        overflow: hidden;

    }

    .commoditySquare {
        width: 750rpx;
        box-sizing: border-box;
        display: flex;
        justify-content: space-around;

    .navigatorMenue {
        margin-left: -32rpx;
        background-color: #f4f4f4;
        height: 100%;
    }
    .scrollContainer{
        overflow: hidden;
        height: 1224rpx;
        -webkit-overflow-scrolling: touch;
    }
    .scrollContainer::-webkit-scrollbar {
      display: none; /* Chrome/Safari等 */
      width: 0 !important; /* 兼容iOS */
      height: 0 !important;
    }
    .left {
        box-sizing: border-box;
        width: 200rpx;
        border-radius: 0 24rpx 24rpx 0;
    }

    .right {
        box-sizing: border-box;
    .goodsInfos {
        width: 500rpx;
        margin-left: 10rpx;
    }

    .goodsImg {
        width: 300rpx;
        height: 300rpx;
        padding-bottom: 10rpx;
    }

    .commoditySquareItem {
        // border: 1rpx solid #b6dbba;
        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 {
    .topBar {
        position: fixed;
        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;
        top: 20rpx;
        left: 20rpx;
        z-index: 1000;
        background-color: #ffffff;
    }

    .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 {
        box-sizing: border-box;
        padding: 10rpx;
        height: 100%;
        // position: relative;
    }

    .typeNavigationItem {
@@ -387,51 +369,22 @@
        border: 0;
    }

    .closeShowLeft {
        position: absolute;
        top: 20rpx;
        right: 0;
    }

    .nav-search {
        padding-left: 30rpx !important;
        padding-right: 20rpx !important;
        // position: fixed;
        // top: 0;
        // width: 500rpx;
        // z-index: 9999;
    }
    .goodsInfo{
        margin-top: 10rpx;
    .goodsName {
        padding: 10rpx;
        box-sizing: border-box;
        width: 100%;
        display: flex;
        flex-direction: column;
    }
    .goodsName{
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 1;
        height: 32rpx;
        height: 52rpx;
        font-weight: bold;
        overflow: hidden;
        text-overflow: ellipsis;
        text-align: center;
        text-align: start;
        vertical-align: middle;
    }
    .priceInfo{
        margin-top: 10rpx;
        display: flex;
        align-items: center;
        justify-content: space-between;
    }
    .goodsPrice{

    .goodsPrice {
        color: red;
        font-weight: bold;
    }
    .topBar {
        position: fixed;
        top: 20rpx;
        left: 20rpx;
        z-index: 1000
    }
</style>
</style>

 pages/order/myOrder.vue

@@ -415,18 +415,9 @@
     */
    pay(val) {
      if (val.sn) {
        // #ifdef MP-WEIXIN
        new LiLiWXPay({
          sn: val.sn,
          price: val.flowPrice,
          orderType: "ORDER",
        }).pay();
        // #endif
        // #ifndef MP-WEIXIN
        uni.navigateTo({
          url: "/pages/cart/payment/payOrder?order_sn=" + val.sn,
        });
        // #endif
      }
    },


 pages/product/shopPage.vue

@@ -2,14 +2,14 @@
  <view>
    <!-- 楼层装修店铺信息 -->
    <div>
      <u-navbar :border-bottom="false">
<!--      <u-navbar :border-bottom="false">
        <u-search
          v-model="keyword"
          @search="search"
          @click="search"
          placeholder="请输入搜索"
        ></u-search>
      </u-navbar>
      </u-navbar> -->
      <div class="wrapper">
        <!-- 店铺信息模块 -->
        <div class="store flex">