jzmall_uni/pages/tabBar/catalog/catalog.vue

<template>
    <view class="container" style="padding-bottom: 100rpx">
        <view class="no-login" v-if="!hasLogin">
            <view class="c">
                <text>您还没有注册</text>
                <button open-type="getUserInfo" @getuserinfo="goLogin">点击授权登录</button>
            </view>
        </view>
        <view class="login" v-else>
            <view class="search">
                <navigator url="/pages/category/search/search" class="input">
                    <!-- <van-icon name="search" size="16px" /> -->
                    <image src="https://mall.zhaijieshi.cc/file/wx-dy/icon-search-grey.png" class="img" mode="aspectFit"></image>
                    <text class="txt">商品搜索, 共{{ goodsCount }}款好物</text>
                </navigator>
            </view>
            <view class="catalog">
                <scroll-view class="nav" :scroll-y="true">
                    <view
                        :class="'item ' + (currentCategory.id == item.id ? 'active' : '')"
                        :data-id="item.id"
                        :data-index="index"
                        :data-name="item.name"
                        @tap="switchCate"
                        v-for="(item, index) in categoryList"
                        :key="index"
                    >
                        <text class="text">{{ item.name }}</text>
                    </view>
                </scroll-view>
                <scroll-view class="cate" :scroll-y="true">
                    <navigator url="/pages/servant/servantList/servantList" class="banner" v-if="currentCategory.name == '保姆/月嫂'">
                        <image class="category-banner" mode="aspectFill" :src="currentCategory.picUrl"></image>
                    </navigator>
                    <view v-if="goodsList.length > 0" v-for="(category, idx) in goodsList" :key="idx">
                        <view class="hd">
                            <text class="txt">{{ category.name }}</text>
								<view class="grey-devide"></view>
											<view class="blue-devide"></view>
                        </view>
                        <view class="a-section a-popular">
                            <view class="b category-line">
                                <view class="item" v-for="(item, index) in category.goodsList" :key="index">
                                    <navigator :url="'/pages/goods/goods?id=' + item.id" class="product-item">
                                        <image class="img" :src="item.picUrl + '?w=200'" mode="aspectFit"></image>
                                        <view class="product-name">{{ item.name }}</view>
                                    </navigator>
                                </view>
                            </view>
                        </view>
                    </view>
                </scroll-view>
            </view>
        </view>
    </view>
</template>

<script>
var util = require('../../../utils/util.js');
var api = require('../../../config/api.js');
const user = require('../../../utils/user.js');
const area = require('../../../utils/area.js');

//获取应用实例
const app = getApp();
export default {
    data() {
        return {
            categoryList: [],

            currentCategory: {
                id: '',
                name: '',
                picUrl: ''
            },

            currentSubCategoryList: {},
            scrollLeft: 0,
            scrollTop: 0,
            goodsList: [],
            goodsCount: 0,
            scrollHeight: 0,
            hasLogin: true,
            city: '',

            //当前业务城市
            citys: [],

            cityIndex: 0,
            addressInfo: {},

            category: {
                name: '',
                goodsList: []
            }
        };
    },
    onLoad: function (options) {
        // this.getCatalog();
    },
    onPullDownRefresh() {
        uni.showNavigationBarLoading(); //在标题栏中显示加载
        this.getCatalog();
        uni.hideNavigationBarLoading(); //完成停止加载
        uni.stopPullDownRefresh(); //停止下拉刷新
    },
    onReady: function () {
        // 页面渲染完成
        if (app.globalData.hasLogin) {
            this.setData({
                hasLogin: true
            });
        }
    },
    onShow: function () {
        // 页面显示
        //显示购物车角标
        //user.cartshow();
        //确定业务城市
        var addressInfo = uni.getStorageSync('addressInfo');
        console.info(addressInfo);
        if (addressInfo) {
            this.setData({
                addressInfo: addressInfo
            });
        } else {
            //手机性能慢，可能首页接口没初始化完毕
            let that = this;
            setTimeout(() => {
                var addressInfo = uni.getStorageSync('addressInfo');
                if (addressInfo) {
                    that.setData({
                        addressInfo: addressInfo
                    });
                }
            }, 500);
        }
        this.getCatalog();
    },
    onHide: function () {
        // 页面隐藏
    },
    onUnload: function () {
        // 页面关闭
    },
    methods: {
        listenerCitySelected(e) {
            this.setData({
                cityIndex: e.detail.value,
                city: this.citys[e.detail.value]
            });
            app.globalData.city = this.city;
        },

        getCatalog: function () {
            //CatalogList
            let that = this;
            var addressInfo = uni.getStorageSync('addressInfo');
            that.setData({
                city: addressInfo.city
            });
            uni.showLoading({
                title: '加载中...'
            });
            util.request(api.CatalogList, {
                shopId: addressInfo.shopId,
                city: addressInfo.city
            }).then(function (res) {
                //1036763 写死值 如果地址不是苏州市 隐藏活动专享
                //20220223关闭所有活动合作专区
                //console.info(res.data.categoryList)
                var list = res.data.categoryList;
                that.setData({
                    categoryList: list,
                    currentCategory: res.data.currentCategory,
                    currentSubCategoryList: res.data.currentSubCategory
                });
                that.getCategoryGoods();
                uni.hideLoading();
            });
            util.request(api.GoodsCount).then(function (res) {
              that.setData({
                goodsCount: res.data
              });
            });
        },

        getCategoryGoods() {
            //获取一级类目下所有商品
            let that = this;
            util.request(api.GoodsL1Category, {
                id: that.currentCategory.name == '热销商品' ? '-1' : that.currentCategory.id,
                shopId: that.addressInfo.shopId,
                isHot: that.currentCategory.name == '热销商品' ? true : false,
                city: that.city
            }).then((res) => {
                console.info(res.data);
                that.setData({
                    goodsList: res.data
                });
            });
        },

        getCurrentCategory: function (id) {
            let that = this;
            util.request(api.CatalogCurrent, {
                id: id
            }).then(function (res) {
                that.setData({
                    currentCategory: res.data.currentCategory,
                    currentSubCategoryList: res.data.currentSubCategory
                });
                that.getCategoryGoods();
            });
        },

        goLogin: function (e) {
            if (e.detail.userInfo == null) {
                app.globalData.hasLogin = false;
                util.showErrorToast('微信授权失败');
                return;
            }
            app.globalData.hasLogin = false;
            uni.setStorageSync('userInfo', null);
            user.loginByWeixin(e.detail.userInfo)
                .then((res) => {
                    //跳转注册页
                    uni.navigateTo({
                        url: '/pages/auth/register/register'
                    });
                })
                .catch((err) => {
                    app.globalData.hasLogin = false;
                });
        },

        switchCate: function (event) {
            var that = this;
            var currentTarget = event.currentTarget;
            if (this.currentCategory.id == event.currentTarget.dataset.id) {
                return false;
            }
            this.getCurrentCategory(event.currentTarget.dataset.id);
        },

        goinviteFriends(e) {
            console.log(app.globalData.hasLogin);
            //跳转到邀请页面
            if (app.globalData.hasLogin) {
                uni.navigateTo({
                    url: '/pages/activity/invitefriends/inviteFriends'
                });
            } else {
                uni.navigateTo({
                    url: '/pages/auth/login/login'
                });
            }
        }
    }
};
</script>
<style>
page {
     color: #2A2A2A; /*主要颜色*/
     font-size: 28rpx;
     background:#f5f5f5;
}

.container {
    height: 100%;
    width: 100%;
    display: flex;
    flex-direction: column;
}

.adv {
    position: fixed;
    left: 0rpx;
    bottom: 0;
    z-index: 100;
    width: 750rpx;
    height: 165rpx;
    display: flex;
    /* border: 1px solid red; */
}

.search {
    /* height: 98rpx;
  width: 100%; */
    margin-bottom: 6rpx;
    padding: 0 30rpx;
    display: flex;
    align-items: center;
    width: 750rpx;
    height: 116rpx;
    /* background: #ffffff; */
    box-shadow: 0px 4rpx 8rpx 0px rgba(245, 246, 250, 0.72);
}

.search .input {
    width: 690rpx;
    height: 76rpx;
    /* background: #f5f6fa; */
	background: #fff;
    border-radius: 76rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #bec0c5;
    font-size: 26rpx;
}
.search .img {
    width: 24rpx;
    height: 24rpx;
    margin-right: 20rpx;
}
.search .txt {
    font-size: 24rpx;
    /* padding:0 0 0 14rpx; */
}

.login {
    height: 100%;
    /* margin-bottom: 380rpx; */
}

.catalog {
    flex: 1;
    width: 100%;
    /* background: #fff; */
    display: flex;
    /* border-top: 1px solid #fafafa; */
    height: 100%;
    /* line-height: 100%; */
}

.catalog .nav {
    /* width: 176rpx;
    height: 100%;
    background: #f5f6fa; */
	  width: 162rpx;
	  height: 100%;
	  background:#EDEDED;
}

.catalog .nav .item {
    text-align: center;
    line-height: 76rpx;
    width: 176rpx;
    height: 76rpx;
    color: #333;
    font-size: 26rpx;
    /* border-left: 4rpx solid #fff; */
    display: flex;
    align-items: center;
    justify-content: center;
}
.catalog .nav .item .text {
    width: 148rpx;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: 26rpx;
    white-space: nowrap;
    margin-left: 8rpx;
}

.catalog .nav .item.active .text {
    flex: 1;
    text-align: center;
}

.catalog .nav .item.active {
    /* font-size: 28rpx; */
    /*border-left: 6rpx solid #ab956d;*/
    /* border-left: 4rpx solid #09afff; */
/*    color: #00c0ff;
    background: url('https://mall.zhaijieshi.cc/file/wx-dy/cate-bg.png') no-repeat center center;
    justify-content: flex-start;
    height: 130rpx;
    background-size: 175rpx 130rpx; */
	 font-size: 28rpx;
	  border-left: 4rpx solid #09afff;
	  color: #09afff;
	  background:#f5f5f5;
	
}

.catalog .cate {
   /* border-left: 1px solid #fafafa; */
    flex: 1;
    height: 100%;
    padding: 0 20rpx 0 10rpx;
	overflow-x: hidden;
	box-sizing: border-box;
}

.banner {
    display: block;
    height: 212rpx;
    width: 100%;
    position: relative;
}

.banner .category-banner {
    /* position: absolute;
  top: 30rpx;
  left: 0; */
    border-radius: 8rpx;
    height: 212rpx;
    width: 566rpx;
}

.banner .txt {
    position: absolute;
    top: 30rpx;
    text-align: center;
    color: #fff;
    font-size: 28rpx;
    left: 0;
    height: 192rpx;
    line-height: 192rpx;
    width: 100%;
}


.catalog .hd {
  /* height: 64rpx; */
  width: 568rpx;
  display: flex;
  align-items: center;
	margin:20rpx 0 24rpx ;
	flex-direction: column;
}
.grey-devide{
	width:568rpx;
	height:2rpx;
background:  #D3D2C7;
}
.blue-devide{
	width:98rpx;
	height:2rpx;
	background:  #09AFFF;
	margin-top:-2rpx;
}

.catalog .hd .txt {
  font-size: 26rpx;
	padding: 0 6rpx;
	height:30rpx;
	margin-bottom:8rpx;
	line-height: 30rpx;
}

.catalog .hd .line {
    width: 100%;
    height: 1px;
    background: #d9d9d9;
    position: absolute;
    z-index: 1;
}

.catalog .bd {
    height: auto;
    width: 100%;
    overflow: hidden;
}

.catalog .bd .item {
    display: block;
    float: left;
    height: 216rpx;
    width: 144rpx;
    margin-right: 34rpx;
}

.catalog .bd .item.last {
    margin-right: 0;
}

.catalog .bd .item .icon {
    height: 144rpx;
    width: 144rpx;
}

.catalog .bd .item .txt {
    display: block;
    text-align: center;
    font-size: 24rpx;
    color: #333;
    height: 72rpx;
    width: 144rpx;
}

.no-login {
    width: 100%;
    height: auto;
    margin: 0 auto;
    background-color: #fff;
}

.no-login .c {
    width: 100%;
    height: auto;
    margin-top: 400rpx;
}

.no-login .c text {
    margin: 0 auto;
    display: block;
    width: 258rpx;
    height: 59rpx;
    line-height: 29rpx;
    text-align: center;
    font-size: 35rpx;
}

.no-login button {
    width: 90%;
    margin: 0 auto;
    color: #fff;
    font-size: 30rpx;
    height: 96rpx;
    line-height: 96rpx;
    right: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    position: flex;
    bottom: 0;
    left: 0;
    border-radius: 0;
    padding: 0;
    margin-left: 5%;
    text-align: center;
    border-top-left-radius: 50rpx;
    border-bottom-left-radius: 50rpx;
    border-top-right-radius: 50rpx;
    border-bottom-right-radius: 50rpx;
    letter-spacing: 3rpx;
    background-image: linear-gradient(to right, #9a9ba1 0%, #9a9ba1 100%);
}

.a-popular {
    width: 570rpx;
    height: auto;
    overflow: hidden;
}

/* .a-popular .b .item {
  border-bottom: 1px solid #d9d9d9;
  margin: 0 20rpx;
  height: 284rpx;
  width: 588rpx;
  padding-top: 20rpx;
} */

.a-popular .b .img {
    width: 170rpx;
     height: 174rpx;
     border-radius: 10rpx;
     margin:0 0 10rpx 0;
}

.a-popular .b .right {
    float: left;
    height: 264rpx;
    width: 336rpx;
    display: flex;
    flex-flow: row nowrap;
}

.a-popular .b .text {
    display: flex;
    flex-wrap: nowrap;
    flex-direction: column;
    /* justify-content: center; */
    overflow: hidden;
    height: 264rpx;
    width: 280rpx;
}

.a-popular .b .name {
    width: 280rpx;
    display: block;
    color: #333;
    line-height: 72rpx;
    font-size: 36rpx;
}

.a-popular .b .desc {
    width: 280rpx;
    display: block;
    color: #a98f76;
    line-height: 50rpx;
    font-size: 25rpx;
    height: 120rpx;
}

.a-popular .b .price {
    width: 280rpx;
    display: block;
    color: darkred;
    /*color: #a81d28;*/
    line-height: 50rpx;
    font-size: 33rpx;
}

.a-popular .b .price span {
    font-size: 24rpx;
    color: gray;
}

.a-popular .b .price .btn {
    width: 120rpx;
    border-radius: 30rpx;
    height: 54rpx;
    line-height: 54rpx;
    font-size: 28rpx;
    background-color: #09afff;
    color: #fff;
    text-align: center;
    float: right;
    /* margin-right: 10rpx; */
    margin-top: -10rpx;
}

.a-popular .b .brand {
    font-size: 20rpx;
    color: #a98f76;
    display: block;
    line-height: 30rpx;
    padding: 2rpx;
}
.category-line {
    display: flex;
    flex-wrap: wrap;
}
.product-item{
  display: flex;
  flex-direction: column;
  align-items: center;
  width:170rpx;
  margin:0 20rpx 40rpx 0;
}
.product-name{
  width:166rpx;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  text-overflow: ellipsis;
  overflow: hidden;
  font-size: 20rpx;
  text-align: center;
}
.nav .active-img {
    width: 8rpx;
    height: 50rpx;
}
.nav .hot-img {
    width: 24rpx;
    height: 24rpx;
    margin: 0 0rpx 0 12rpx;
}
</style>