jzmall_uni/pages/goods/hotGoods/hotGoods.vue

<template>
    <view class="container">
        <view class="brand-info">
            <view class="name">
                <image class="img" :src="bannerInfo.imgUrl" mode="widthFix"></image>
                <!-- <view class="info-box">
        <view class="info">
          <text class="txt">{{bannerInfo.name}}</text>
          <text class="line"></text>
        </view>
      </view> -->
            </view>
        </view>
        <view class="sort">
            <view class="sort-box">
                <view :class="'item ' + (currentSortType == 'default' ? 'active' : '')" @tap="openSortFilter" id="defaultSort">
                    <text class="txt">综合</text>
                </view>
                <view :class="'item ' + (currentSortType == 'price' ? 'active' : '')" @tap="openSortFilter" id="priceSort">
                    <text class="txt">价格</text>
                    <!-- <van-icon name="arrow-up" v-if="currentSortType == 'price' && currentSortOrder == 'asc'" /> -->
                    <!-- <van-icon name="arrow-down" v-else-if="currentSortType == 'price' && currentSortOrder == 'desc'" /> -->
                </view>
                <view :class="'item ' + (currentSortType == 'category' ? 'active' : '')" @tap="openSortFilter" id="categoryFilter">
                    <text class="txt">分类</text>
                </view>
            </view>
            <view class="sort-box-category" v-if="categoryFilter">
                <view :class="'item ' + (item.checked ? 'active' : '')" :data-category-index="index" @tap="selectCategory" v-for="(item, index) in filterCategory" :key="index">
                    {{ item.name }}
                </view>
            </view>
        </view>
        <view class="cate-item">
            <view class="b">
                <block v-for="(iitem, iindex) in goodsList" :key="iindex">
                    <navigator :class="'item ' + (iindex % 2 == 0 ? 'item-b' : '')" :url="'/pages/goods/goods?id=' + iitem.id">
                        <image class="img" :src="iitem.picUrl" background-size="cover"></image>
                        <!-- <text class="name">{{iitem.name}}</text> -->
                        <view style="display: flex; margin-top: 10rpx; height: 71rpx">
                            <!-- <image wx:if="{{iitem.activited}}"
              src="https://7a68-zhaijieshi-3guecm78383ca692-1307626841.tcb.qcloud.la/activity/618.png"
              style="width: 39px;height:16px;margin-right: 2px;" /> -->
                            <text class="name">{{ iitem.name }}</text>
                        </view>
                        <view class="price">
                            <!-- <view class="retailPrice">￥{{iitem.retailPrice}}</view>
            <view class="memberPrice">￥{{iitem.memberPrice}}</view>
           <view class="member-price-tag">会员价</view> -->
                            <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>

                        <!-- <view  class="price"><text>￥{{iitem.retailPrice}}</text>
          <text class="counterPrice sub-color">￥{{iitem.counterPrice}}</text>
          </view> -->
                    </navigator>
                </block>
            </view>
        </view>
    </view>
</template>

<script>
var util = require('../../../utils/util.js');
var api = require('../../../config/api.js');
var app = getApp();
export default {
    data() {
        return {
            addressInfo: {},

            bannerInfo: {
                imgUrl: 'https://mall.zhaijieshi.cc/file/jzmall/weixin/new/img-hot.png',
                name: '大家都在买的'
            },

            categoryFilter: false,
            filterCategory: [],
            goodsList: [],
            categoryId: 0,
            currentSortType: 'default',
            currentSort: 'create_time',
            currentSortOrder: 'desc',
            page: 1,
            limit: 10,
            iindex: 0,

            iitem: {
                id: '',
                picUrl: '',
                name: '',
                activited: '',
                counterPrice: '',
                retailPrice: ''
            }
        };
    },
    onLoad: function (options) {
        // 页面初始化 options为页面跳转所带来的参数
        var addressInfo = uni.getStorageSync('addressInfo');
        if (addressInfo) {
            this.setData({
                addressInfo: addressInfo
            });
        }
        this.getGoodsList();
    },
    onReady: function () {
        // 页面渲染完成
    },
    onShow: function () {
        // 页面显示
    },
    onHide: function () {
        // 页面隐藏
    },
    onUnload: function () {
        // 页面关闭
    },
    methods: {
        getCategoryList: function () {
            var that = this;
            util.request(api.GoodsFilter, {
                isHot: 1
            }).then(function (res) {
                if (res.errno === 0) {
                    that.setData({
                        filterCategory: res.data.filterCategoryList
                    });
                }
            });
        },

        getGoodsList: function () {
            var that = this;
            util.request(api.GoodsList, {
                isHot: true,
                page: that.page,
                limit: that.limit,
                order: that.currentSortOrder,
                sort: that.currentSort,
                categoryId: that.categoryId,
                city: that.addressInfo.city,
                shopId: that.addressInfo.shopId
            }).then(function (res) {
                console.info(res);
                if (res.errno === 0) {
                    that.setData({
                        goodsList: res.data.list,
                        filterCategory: res.data.filterCategoryList
                    });
                }
            });
        },

        openSortFilter: function (event) {
            let currentId = event.currentTarget.id;
            switch (currentId) {
                case 'categoryFilter':
                    this.setData({
                        categoryFilter: !this.categoryFilter,
                        currentSortType: 'category',
                        currentSort: 'create_time',
                        currentSortOrder: 'desc'
                    });
                    break;
                case 'priceSort':
                    let tmpSortOrder = 'asc';
                    if (this.currentSortOrder == 'asc') {
                        tmpSortOrder = 'desc';
                    }
                    this.setData({
                        currentSortType: 'price',
                        currentSort: 'retail_price',
                        currentSortOrder: tmpSortOrder,
                        categoryFilter: false
                    });
                    this.getGoodsList();
                    break;
                default:
                    //综合排序
                    this.setData({
                        currentSortType: 'default',
                        currentSort: 'create_time',
                        currentSortOrder: 'desc',
                        categoryFilter: false,
                        categoryId: 0
                    });
                    this.getGoodsList();
            }
        },

        selectCategory: function (event) {
            let currentIndex = event.target.dataset.categoryIndex;
            this.setData({
                categoryFilter: false,
                categoryId: this.filterCategory[currentIndex].id
            });
            this.getGoodsList();
        }
    }
};
</script>
<style>
page {
    background: #f4f4f4;
}

.brand-info .name {
    width: 750rpx;
    height: 184rpx;
    /* position: relative; */
}

.brand-info .img {
    /* position: absolute;
  top: 0;
  left: 0; */
    width: 750rpx;
    height: 184rpx;
}

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

.brand-info .info-box {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 278rpx;
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
}

.brand-info .info {
    display: block;
}

.brand-info .txt {
    display: block;
    height: 40rpx;
    font-size: 37.5rpx;
    /* color: #fff; */
}

.brand-info .line {
    margin: 0 auto;
    margin-top: 16rpx;
    display: block;
    height: 2rpx;
    width: 145rpx;
    background: #fff;
}

.sort {
    position: relative;
    background: #fff;
    width: 100%;
    height: 78rpx;
}

.sort-box {
    background: #fff;
    width: 100%;
    height: 78rpx;
    overflow: hidden;
    padding: 0 30rpx;
    display: flex;
    align-items: center;
    border-bottom: 1px solid #d9d9d9;
}

.sort-box .item {
    height: 78rpx;
    line-height: 78rpx;
    text-align: center;
    flex: 1;
    color: #333;
    font-size: 30rpx;
}

.sort-box .item .txt {
    color: #333;
}

.sort-box .item.active .txt {
    color: #b4282d;
}

.sort-box .item .van-icon {
    margin-left: 6rpx;
}

.sort-box-category {
    background: #fff;
    width: 100%;
    height: auto;
    overflow: hidden;
    padding: 40rpx 40rpx 0 0;
    border-bottom: 1px solid #d9d9d9;
}

.sort-box-category .item {
    height: 54rpx;
    line-height: 54rpx;
    text-align: center;
    float: left;
    padding: 0 16rpx;
    margin: 0 0 40rpx 40rpx;
    border: 1px solid #666;
    color: #333;
    font-size: 24rpx;
}

.sort-box-category .item.active {
    color: #b4282d;
    border: 1px solid #b4282d;
}

.cate-item .b {
    /* width: 750rpx;
  height: auto;
  overflow: hidden;
  border-top: 1rpx solid #f4f4f4;
  margin-top: 20rpx; */
    width: 750rpx;
    /* padding: 0 6.25rpx; */
    height: auto;
    overflow: hidden;
}

.cate-item .b .item {
    /* float: left;
  background: #fff;
  width: 375rpx;
  padding-bottom: 33.333rpx;
  border-bottom: 1rpx solid #f4f4f4;
  height: auto;
  overflow: hidden;
  text-align: center; */
    float: left;
    background: #fff;
    width: 342rpx;
    height: auto;
    overflow: hidden;
    padding: 15rpx;
    border-radius: 15rpx;
    margin: 16.5rpx 16.5rpx 8.5rpx 16.5rpx;
}

.cate-item .b .item-b {
    border-right: 1rpx solid #f4f4f4;
}

.cate-item .item .img {
    width: 312rpx;
    height: 312rpx;
    border-radius: 15rpx;
}

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

.cate-item .item .price {
    height: 40rpx;
    /* justify-content: center; */
    display: flex;
    align-items: flex-end;
    justify-content: flex-start;
    margin-top: 10rpx;
}
.counterPrice {
    text-decoration: line-through;
    font-size: 24rpx;
    margin: 0 0 0 20rpx;
    color: #c7c7c7;
}
.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;
}
</style>