绿满眶商城微信小程序-uniapp
peng
4 天以前 f3429013f18b25e2dc4dd99d230170c1892a1479
update 修改商品广场
4个文件已修改
127 ■■■■■ 已修改文件
components/custom-tabbar.vue 4 ●●● 补丁 | 查看 | 原始文档 | blame | 历史
config/api.js 8 ●●●● 补丁 | 查看 | 原始文档 | blame | 历史
pages.json 34 ●●●●● 补丁 | 查看 | 原始文档 | blame | 历史
pages/commodity-square/commoditySquare.vue 81 ●●●●● 补丁 | 查看 | 原始文档 | blame | 历史
components/custom-tabbar.vue
@@ -47,7 +47,9 @@
                "key": 'index'
            },
            {
                "pagePath": "/pages/tabbar/category/category",
                // "pagePath": "/pages/tabbar/category/category",
                "pagePath": "/pages/commodity-square/commoditySquare",
                "iconPath": "/static/tabbar/category.png",
                "selectedIconPath": "/static/tabbar/category-s.png",
                "text": "商城",
config/api.js
@@ -4,10 +4,10 @@
 */
// 开发环境
const dev = {
  im: "http://127.0.0.1:8885",
  common: "http://127.0.0.1:8890",
  buyer: "http://127.0.0.1:8888",
  store: "http://127.0.0.1:8889",
  im: "http://192.168.0.15:8885",
  common: "http://192.168.0.15:8890",
  buyer: "http://192.168.0.15:8888",
  store: "http://192.168.0.15:8889",
  // common: "http://192.168.0.113:8890",
  // buyer: "http://192.168.0.113:8888",
  // im: "http://192.168.0.113:8885",
pages.json
@@ -63,12 +63,14 @@
            }
        },
        {
            "path": "pages/tabbar/category/category",
            // "path": "pages/tabbar/category/category",
            "path": "pages/commodity-square/commoditySquare",
            "style": {
                "navigationBarTitleText": "分类",
                "navigationStyle": "custom", // 隐藏系统导航栏
                "navigationBarTitleText": "商品广场",
                // "navigationStyle": "custom", // 隐藏系统导航栏
                "navigationBarTextStyle": "black",
                "disableScroll": true,
                // "disableScroll": true,
                "bounce": "none",
                "scrollIndicator": "none",
                "componentPlaceholder": {
@@ -1432,17 +1434,18 @@
                    "navigationBarTitleText": "大健康"
                }
            }]
        },
        {
            "root": "pages/commodity-square",
            "pages": [{
                "path" : "commoditySquare",
                "style" :
                {
                    "navigationBarTitleText" : "商品广场"
                }
            }]
        }
        // ,
        // {
        //     "root": "pages/commodity-square",
        //     "pages": [{
        //         "path" : "commoditySquare",
        //         "style" :
        //         {
        //             "navigationBarTitleText" : "商品广场"
        //         }
        //     }]
        // }
    ],
    "globalStyle": {
        "navigationBarTextStyle": "black",
@@ -1470,7 +1473,8 @@
                "text": "首页"
            },
            {
                "pagePath": "pages/tabbar/category/category",
                // "pagePath": "pages/tabbar/category/category",
                "pagePath": "pages/commodity-square/commoditySquare",
                "iconPath": "static/tabbar/category.png",
                "selectedIconPath": "static/tabbar/category-s.png",
                "text": "商城"
pages/commodity-square/commoditySquare.vue
@@ -1,9 +1,10 @@
<template>
    <view class="container">
        <input type="text" v-show="false" v-model="flushDom"/>
        <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)">
                <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"
@@ -21,7 +22,8 @@
                </view>
            </view>
            <view class="right" style="width: 310rpx;">
                <view class="commoditySquareItem" v-for="(item,index) in goodsList2" @click="goToGoodsInfo('goodsList2',item.id)">
                <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"
@@ -53,7 +55,9 @@
                </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>
        <custom-tabbar bgColor="#ffffff" selected="shop"></custom-tabbar>
    </view>
</template>
@@ -75,11 +79,11 @@
                //当前选中的分类
                currentCategort: '',
                //显示没有数据
                canLoadMore:false,
                canLoadMore: false,
                //最大页数
                maxPages: 0,
                //刷新dom使用
                flushDom:'',
                flushDom: '',
                //查询商品需要的参数
                getGoodsParam: {
                    keyword: '',
@@ -117,11 +121,11 @@
                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() {
@@ -150,21 +154,44 @@
                    }
                })
                //平分给两个数组
                    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)
                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 onLoad() {
            await this.loadCategoryList();
            this.getGoodsParam.pageNumber = 1
            this.getGoodsParam.categoryId = ""
            this.getGoodsParam.keyword = ""
            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)
        },
        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();
@@ -181,14 +208,14 @@
                    }
                })
                //平分给两个数组
                    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{
                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>
@@ -222,7 +249,7 @@
    }
    .commoditySquareItem {
        border: 1rpx solid darkgray;
        // border: 1rpx solid #b6dbba;
        border-radius: 12rpx;
        box-sizing: border-box;
        padding: 0 32rpx;