jzmall_uni/pages/category/category.vue

<template>
    <view class="container">
        <view class="cate-nav">
            <scroll-view :scroll-x="true" class="cate-nav-body" :scroll-left="scrollLeft">
                <view :class="'item ' + (id == item.id ? 'active' : '')" :data-id="item.id" :data-index="index" @tap="switchCate" v-for="(item, index) in navList" :key="index">
                    <view class="name">{{ item.name }}</view>
                </view>
            </scroll-view>
        </view>
        <scroll-view :scroll-y="true" :scroll-top="scrollTop" :style="'height:' + scrollHeight + ';'">
            <view class="cate-item">
                <view class="b">
                    <navigator
                        :class="'item ' + ((iindex + 1) % 2 == 0 ? 'item-b' : '')"
                        :url="'/pages/goods/goods?id=' + iitem.id"
                        v-for="(iitem, iindex) in goodsList"
                        :key="iindex"
                    >
                        <image class="img" :src="iitem.picUrl" background-size="cover"></image>
                        <view style="display: flex; margin-top: 10rpx; height: 71rpx">
                            <text class="name">{{ iitem.name }}</text>
                        </view>

                        <view class="price">
                            <view v-if="iitem.activited" class="retailPrice">
                                <text class="price-unit">￥</text>
                                {{ iitem.activityPrice }}
                            </view>
                            <view v-else class="retailPrice">
                                <text class="price-unit">￥</text>
                                {{ iitem.retailPrice }}
                            </view>
                            <view v-if="iitem.activited || iitem.counterPrice != iitem.retailPrice" class="counterPrice">原价￥{{ iitem.counterPrice }}</view>
                        </view>
                    </navigator>
                </view>
            </view>
        </scroll-view>
    </view>
</template>

<script>
var util = require('../../utils/util.js');
var api = require('../../config/api.js');
const app = getApp();
export default {
    data() {
        return {
            navList: [],
            goodsList: [],
            id: 0,
            navIndex: 0,
            attribute: '',
            currentCategory: {},
            scrollLeft: 0,
            scrollTop: 0,
            scrollHeight: 0,
            page: 1,
            limit: 10,
            totalPages: 1,
            addressInfo: {},
            iindex: 0,

            iitem: {
                id: '',
                picUrl: '',
                name: '',
                activited: '',
                counterPrice: '',
                retailPrice: ''
            }
        };
    },
    onLoad: function (options) {
        // 页面初始化 options为页面跳转所带来的参数
        console.log(options);
        var that = this;
        if (options.id) {
            that.setData({
                id: parseInt(options.id)
            });
        }
        if (options.attribute) {
            that.setData({
                attribute: parseInt(options.attribute)
            });
        }
        uni.getSystemInfo({
            success: function (res) {
                that.setData({
                    scrollHeight: res.windowHeight
                });
            }
        });
        var addressInfo = uni.getStorageSync('addressInfo');
        if (addressInfo) {
            this.setData({
                addressInfo: addressInfo
            });
        }
        this.getCategoryInfo();
    },
    onReady: function () {
        // 页面渲染完成
    },
    onShow: function () {
        // 页面显示
    },
    onHide: function () {
        // 页面隐藏
    },
    onUnload: function () {
        // 页面关闭
    },
    onReachBottom() {
        if (this.totalPages > this.page) {
            this.setData({
                page: this.page + 1
            });
            this.getGoodsList();
        } else {
            uni.showToast({
                title: '没有更多商品了',
                icon: 'none',
                duration: 2000
            });
            return false;
        }
    },
    methods: {
        getCategoryInfo: function () {
            console.info('getCategoryInfo');
            let that = this;
            util.request(api.GoodsCategory, {
                id: this.attribute ? '-1' : this.id,
                attribute: this.attribute,
                shopId: this.addressInfo.shopId,
                city: this.addressInfo.city
            }).then((res) => {
                if (res.errno == 0) {
                    that.setData({
                        navList: res.data.brotherCategory,
                        currentCategory: res.data.currentCategory
                    });
                    // 当id是L1分类id时，这里需要重新设置成L1分类的一个子分类的id
                    // 周期服务包特殊处理
                    if (this.attribute == '3' || this.attribute == '2') {
                        uni.setNavigationBarTitle({
                            title: res.data.currentCategory.name
                        });
                        that.setData({
                            id: res.data.currentCategory.id
                        });
                    } else {
                        uni.setNavigationBarTitle({
                            title: res.data.parentCategory.name
                        });
                        if (res.data.parentCategory.id == that.id) {
                            that.setData({
                                id: res.data.currentCategory.id
                            });
                        }
                    }

                    //nav位置
                    let currentIndex = 0;
                    let navListCount = that.navList.length;
                    for (let i = 0; i < navListCount; i++) {
                        currentIndex += 1;
                        if (that.navList[i].id == that.id) {
                            break;
                        }
                    }
                    if (currentIndex > navListCount / 2 && navListCount > 5) {
                        that.setData({
                            scrollLeft: currentIndex * 70
                        });
                    }
                    that.getGoodsList();
                } else {
                    //显示错误信息
                }
            });
        },

        getGoodsList: function () {
            var that = this;
            util.request(api.GoodsList, {
                categoryId: this.attribute == '3' ? '-1' : that.id,
                attribute: this.attribute == '3' ? '3' : '',
                page: that.page,
                limit: that.limit,
                city: that.addressInfo.city,
                shopId: that.addressInfo.shopId
            }).then(function (res) {
                console.info(res);
                console.info(that.page);
                if (that.page == 1) {
                    that.setData({
                        goodsList: res.data.list,
                        totalPages: res.data.pages
                    });
                } else {
                    that.setData({
                        goodsList: that.goodsList.concat(res.data.list),
                        totalPages: res.data.pages
                    });
                }
                console.info(that.goodsList);
            });
        },

        switchCate: function (event) {
            if (this.id == event.currentTarget.dataset.id) {
                return false;
            }
            var that = this;
            var clientX = event.detail.x;
            var currentTarget = event.currentTarget;
            if (clientX < 60) {
                that.setData({
                    scrollLeft: currentTarget.offsetLeft - 60
                });
            } else if (clientX > 330) {
                that.setData({
                    scrollLeft: currentTarget.offsetLeft
                });
            }
            this.setData({
                id: event.currentTarget.dataset.id,
                navIndex: event.currentTarget.dataset.index,
                page: 1
            });
            this.getGoodsList();
        }
    }
};
</script>
<style>
.container {
    background: linear-gradient(180deg, #09afff 10%, #f8f8f8 40%);
    height: 100vh;
}
page {
    background: #f8f8f8;
}

.cate-nav {
    width: 690rpx;
    padding: 20rpx 0 0;
    margin: 0 30rpx 0;
}

.cate-nav-body {
    height: 104rpx;
    margin: 0 14rpx;
    width: 660rpx;
    overflow-x: scroll;
    white-space: nowrap;
    background: url('https://mall.zhaijieshi.cc/file/wx-dy/category-bg.png') no-repeat center bottom;
    background-size: 660rpx 104rpx;
}

.cate-nav .item {
    display: inline-block;
    height: 84rpx;
    min-width: 130rpx;
}

.cate-nav .item .name {
    display: block;
    height: 84rpx;
    line-height: 84rpx;
    color: #333;
    font-size: 30rpx;
    width: auto;
}

.cate-nav .item.active .name {
    color: #09afff;
}

.cate-item {
    margin: 0rpx 30rpx 0;
    height: auto;
    overflow: hidden;
    width: 690rpx;
    background: #fff;
    height: 100vh;
    border-radius: 20rpx 20rpx 0 0;
    padding-left: 10rpx;
}

.cate-item .h {
    height: 145rpx;
    width: 750rpx;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.cate-item .h .name {
    display: block;
    height: 35rpx;
    margin-bottom: 18rpx;
    font-size: 30rpx;
    color: #333;
}

.cate-item .h .desc {
    display: block;
    height: 24rpx;
    font-size: 24rpx;
    color: #999;
}

.cate-item .b .item {
    float: left;
    background: #fff;
    width: 306rpx;
    height: auto;
    overflow: hidden;
    padding: 16rpx;
    border-radius: 15rpx;
    margin: 16.5rpx 16.5rpx 8.5rpx 16.5rpx;
    border: 2rpx solid #00c0ff;
    border-radius: 20rpx;
}

.cate-item .b .item-b {
    margin-left: 6.25rpx;
}

.cate-item .item .img {
    width: 274rpx;
    height: 274rpx;
    background: #e0e0e0;
    border-radius: 15rpx;
}

.cate-item .b .item .mark {
    width: 122rpx;
    height: 100rpx;
    margin-top: -20rpx;
    margin-left: 0rpx;
}

.cate-item .item .name {
    display: block;
    width: 274rpx;
    margin: 0 0 5rpx 0;
    overflow: hidden;
    padding: 0 20rpx;
    font-size: 26rpx;
    color: #1c1c1c;
    line-height: 1.3em;
    padding-left: 0rpx;
}

.price-unit {
    font-size: 23rpx;
    font-weight: 400;
    color: #202020;
}

.cate-item .item .brand {
    display: block;
    width: 365.625rpx;
    height: 22rpx;
    font-size: 22rpx;
    color: #ab956d;
    margin-top: 10rpx;
    margin-left: 22rpx;
}

.counterPrice {
    text-decoration: line-through;
    font-size: 24rpx;
    margin: 0 0 0 20rpx;
    color: #c7c7c7;
}

.cate-item .item .price {
    height: 40rpx;
    display: flex;
    margin-top: 10rpx;
    align-items: flex-end;
}

.retailPrice {
    font-size: 40rpx;
    height: 40rpx;
    line-height: 40rpx;
    font-weight: bold;
    color: #202020;
}

.memberPrice {
    font-size: 22rpx;
    color: #dd483e;
    margin: 0 10rpx 0 20rpx;
}

.member-price-tag {
    width: 88rpx;
    height: 26rpx;
    line-height: 26rpx;
    background: url('https://mall.zhaijieshi.cc/file/jzmall/weixin/member/member-price-bg.png') no-repeat center center;
    background-size: 100% 100%;
    color: #5e3a11;
    font-size: 16rpx;
    padding: 0 8rpx 0 0;
    text-align: right;
    margin: 0 0 6rpx 0;
}
.cate-nav .item {
    padding-top: 20rpx;
    height: 104rpx;
}
.cate-nav .item .name {
    line-height: 84rpx;
    height: 84rpx;
    padding: 0 34rpx;
}
.cate-nav .item:first-child .name {
    border-radius: 20rpx 0 0 0;
}
.cate-nav .item:last-child .name {
    border-radius: 0 20rpx 0 0;
}
.cate-nav .active.item {
    padding: 0;
}
.cate-nav .active.item .name {
    border-radius: 20rpx 20rpx 0 0;
    height: 104rpx;
    line-height: 104rpx;
    background: #fff;
}
</style>