|
@@ -1,621 +1,448 @@
|
|
|
-<template>
|
|
|
|
|
- <view class="content">
|
|
|
|
|
- <view class="navbar" :style="{ position: headerPosition, top: headerTop }">
|
|
|
|
|
- <view class="nav-item" :class="{ current: filterIndex === 0 }" @click="tabClick(0)">综合排序</view>
|
|
|
|
|
- <view class="nav-item" :class="{ current: filterIndex === 1 }" @click="tabClick(1)">
|
|
|
|
|
- <text>销量优先</text>
|
|
|
|
|
- <view class="p-box">
|
|
|
|
|
- <text :class="{ active: numberOrder === 1 && filterIndex === 1 }" class="iconfont iconfold"></text>
|
|
|
|
|
- <text :class="{ active: numberOrder === 2 && filterIndex === 1 }" class="iconfont iconfold xia"></text>
|
|
|
|
|
- </view>
|
|
|
|
|
- </view>
|
|
|
|
|
- <view class="nav-item" :class="{ current: filterIndex === 2 }" @click="tabClick(2)">
|
|
|
|
|
- <text>价格</text>
|
|
|
|
|
- <view class="p-box">
|
|
|
|
|
- <text :class="{ active: priceOrder === 1 && filterIndex === 2 }" class="iconfont iconfold"></text>
|
|
|
|
|
- <text :class="{ active: priceOrder === 2 && filterIndex === 2 }" class="iconfont iconfold xia"></text>
|
|
|
|
|
- </view>
|
|
|
|
|
- </view>
|
|
|
|
|
- <text class="cate-item iconfont iconapps" @click="toggleCateMask('show')"></text>
|
|
|
|
|
- </view>
|
|
|
|
|
- <view class="goods-list">
|
|
|
|
|
- <view v-for="(item, index) in goodsList" :key="index" class="goods-item" @click="navToDetailPage(item)">
|
|
|
|
|
- <view class="image-wrapper">
|
|
|
|
|
- <image :src="item.image" mode="aspectFill"></image>
|
|
|
|
|
- <view class="fanli" v-if="item.give_integral != 0">
|
|
|
|
|
- <view class="fanli-bg"><image src="../../static/img/index-fanl.png" mode=""></image></view>
|
|
|
|
|
- <view class="fanli-font flex">
|
|
|
|
|
- <view class="font-left">获得响亮积分</view>
|
|
|
|
|
- <view class="font-right">{{ item.give_integral * 1 }}</view>
|
|
|
|
|
- </view>
|
|
|
|
|
- </view>
|
|
|
|
|
- </view>
|
|
|
|
|
- <text class="title clamp">{{ item.store_name }}</text>
|
|
|
|
|
- <view class="price-box">
|
|
|
|
|
- <text class="price">{{ item.price }}</text>
|
|
|
|
|
- <text>已售 {{ item.sales }}</text>
|
|
|
|
|
- </view>
|
|
|
|
|
- </view>
|
|
|
|
|
- </view>
|
|
|
|
|
- <uni-load-more :status="loadingType"></uni-load-more>
|
|
|
|
|
-
|
|
|
|
|
- <view class="cate-mask" :class="cateMaskState === 0 ? 'none' : cateMaskState === 1 ? 'show' : ''" @click="toggleCateMask">
|
|
|
|
|
- <view class="cate-content">
|
|
|
|
|
- <scroll-view scroll-y class="left-aside">
|
|
|
|
|
- <view v-for="item in cateList" :key="item.id" class="f-item b-b" :class="{ active: item.id === currentId }" @click.stop="tabtap(item)">{{ item.cate_name }}</view>
|
|
|
|
|
- </scroll-view>
|
|
|
|
|
- <scroll-view scroll-with-animation scroll-y class="right-aside" @scroll="asideScroll" :scroll-top="tabScrollTop">
|
|
|
|
|
- <view v-for="item in cateList" :key="item.id" class="s-list" :id="'main-' + item.id">
|
|
|
|
|
- <text class="s-item">{{ item.cate_name }}</text>
|
|
|
|
|
- <view class="t-list ">
|
|
|
|
|
- <view @click.stop="changeCate(titem)" class="t-item" v-for="titem in item.children" :key="titem.id">
|
|
|
|
|
- <image :src="titem.pic"></image>
|
|
|
|
|
- <text>{{ titem.cate_name }}</text>
|
|
|
|
|
- </view>
|
|
|
|
|
- </view>
|
|
|
|
|
- </view>
|
|
|
|
|
- </scroll-view>
|
|
|
|
|
- </view>
|
|
|
|
|
- <!-- <view class="cate-content" @click.stop.prevent="stopPrevent" @touchmove.stop.prevent="stopPrevent">
|
|
|
|
|
- <scroll-view scroll-y class="cate-list">
|
|
|
|
|
- <view v-for="item in cateList" :key="item.id">
|
|
|
|
|
- <view class="cate-item b-b two">{{ item.cate_name }}</view>
|
|
|
|
|
- <view v-for="tItem in item.children" :key="tItem.id" class="cate-item b-b" :class="{ active: tItem.id == cateId }" @click="changeCate(tItem)">
|
|
|
|
|
- {{ tItem.cate_name }}
|
|
|
|
|
- </view>
|
|
|
|
|
- </view>
|
|
|
|
|
- </scroll-view>
|
|
|
|
|
- </view> -->
|
|
|
|
|
- </view>
|
|
|
|
|
- </view>
|
|
|
|
|
-</template>
|
|
|
|
|
-
|
|
|
|
|
-<script>
|
|
|
|
|
-import uniLoadMore from '@/components/uni-load-more/uni-load-more.vue';
|
|
|
|
|
-import { getProducts } from '@/api/product.js';
|
|
|
|
|
-import { getCategoryList } from '@/api/product.js';
|
|
|
|
|
-export default {
|
|
|
|
|
- components: {
|
|
|
|
|
- uniLoadMore
|
|
|
|
|
- },
|
|
|
|
|
- data() {
|
|
|
|
|
- return {
|
|
|
|
|
- currentId: '',
|
|
|
|
|
- tabScrollTop: 0,
|
|
|
|
|
- cateMaskState: 0, //分类面板展开状态
|
|
|
|
|
- headerPosition: 'fixed',
|
|
|
|
|
- headerTop: '0px',
|
|
|
|
|
- loadingType: 'more', //加载更多状态
|
|
|
|
|
- filterIndex: 0, //查询类型
|
|
|
|
|
- numberOrder: 0, //1 销量从低到高 2销量从高到低
|
|
|
|
|
- limit: 6, //每次加载数据条数
|
|
|
|
|
- page: 1, //当前页数
|
|
|
|
|
- cateId: 0, //已选三级分类id
|
|
|
|
|
- priceOrder: 0, //1 价格从低到高 2价格从高到低
|
|
|
|
|
- cateList: [], //分类列表
|
|
|
|
|
- goodsList: [] //商品列表
|
|
|
|
|
- };
|
|
|
|
|
- },
|
|
|
|
|
-
|
|
|
|
|
- onLoad(options) {
|
|
|
|
|
- // #ifdef H5
|
|
|
|
|
- // this.headerTop = document.getElementsByTagName('uni-page-head')[0].offsetHeight + 'px';
|
|
|
|
|
- // #endif
|
|
|
|
|
- this.cateId = options.tid;
|
|
|
|
|
- this.loadCateList(options.fid, options.sid);
|
|
|
|
|
- this.loadData();
|
|
|
|
|
- },
|
|
|
|
|
- onPageScroll(e) {
|
|
|
|
|
- //兼容iOS端下拉时顶部漂移
|
|
|
|
|
- if (e.scrollTop >= 0) {
|
|
|
|
|
- this.headerPosition = 'fixed';
|
|
|
|
|
- } else {
|
|
|
|
|
- this.headerPosition = 'absolute';
|
|
|
|
|
- }
|
|
|
|
|
- },
|
|
|
|
|
- //下拉刷新
|
|
|
|
|
- onPullDownRefresh() {
|
|
|
|
|
- this.loadData('refresh');
|
|
|
|
|
- },
|
|
|
|
|
- //监听页面是否滚动到底部加载更多
|
|
|
|
|
- onReachBottom() {
|
|
|
|
|
- this.loadData();
|
|
|
|
|
- },
|
|
|
|
|
- methods: {
|
|
|
|
|
- //加载分类
|
|
|
|
|
- async loadCateList(fid, sid) {
|
|
|
|
|
- let obj = this;
|
|
|
|
|
- getCategoryList({}).then(function(e) {
|
|
|
|
|
- obj.cateList = e.data.filter(e => {
|
|
|
|
|
- return e.id != 1;
|
|
|
|
|
- });
|
|
|
|
|
- obj.currentId = obj.cateList[0].id
|
|
|
|
|
- console.log(obj.cateList, '123456789');
|
|
|
|
|
- });
|
|
|
|
|
- },
|
|
|
|
|
- //一级分类点击
|
|
|
|
|
- tabtap(item) {
|
|
|
|
|
- console.log(item);
|
|
|
|
|
- // 判断有没有初始化页面高度对象数据
|
|
|
|
|
- if (!this.sizeCalcState) {
|
|
|
|
|
- this.calcSize();
|
|
|
|
|
- }
|
|
|
|
|
- // 获取当前点击的id
|
|
|
|
|
- this.currentId = item.id;
|
|
|
|
|
- console.log(item.top);
|
|
|
|
|
- this.tabScrollTop = item.top;
|
|
|
|
|
- console.log(this.tabScrollTop);
|
|
|
|
|
- },
|
|
|
|
|
- //右侧栏滚动
|
|
|
|
|
- asideScroll(e) {
|
|
|
|
|
- // 判断有没有初始化页面高度对象数据
|
|
|
|
|
- if (!this.sizeCalcState) {
|
|
|
|
|
- this.calcSize();
|
|
|
|
|
- }
|
|
|
|
|
- let scrollTop = e.detail.scrollTop;
|
|
|
|
|
- let box = 0; //列表包裹框高度初始化
|
|
|
|
|
- let bottom = 10; //距离页面底部多少像素左侧列表切换到最后一个一级分类
|
|
|
|
|
- // 查询当前页面对象
|
|
|
|
|
- let view = uni.createSelectorQuery().select('.content');
|
|
|
|
|
- view.fields(
|
|
|
|
|
- {
|
|
|
|
|
- id: true,
|
|
|
|
|
- dataset: true,
|
|
|
|
|
- rect: true,
|
|
|
|
|
- size: true,
|
|
|
|
|
- scrollOffset: true
|
|
|
|
|
- },
|
|
|
|
|
- function(e) {
|
|
|
|
|
- // 保存包裹框高度
|
|
|
|
|
- box = e.height;
|
|
|
|
|
- }
|
|
|
|
|
- ).exec();
|
|
|
|
|
- // 获取所有距离顶部大于滚轮距离页面高度的所有分类
|
|
|
|
|
- let tabs = this.cateList.filter(item =>( item.top-10) <= scrollTop).reverse();
|
|
|
|
|
- if (tabs.length > 0) {
|
|
|
|
|
- // 判断是否已经到达滚轮底部
|
|
|
|
|
- if (box + scrollTop + bottom >= e.detail.scrollHeight) {
|
|
|
|
|
- this.currentId = this.cateList[this.cateList.length - 1].id;
|
|
|
|
|
- } else {
|
|
|
|
|
- this.currentId = tabs[0].id;
|
|
|
|
|
- }
|
|
|
|
|
- }
|
|
|
|
|
- },
|
|
|
|
|
- //计算右侧栏每个tab的高度等信息
|
|
|
|
|
- calcSize() {
|
|
|
|
|
- let h = 0;
|
|
|
|
|
- this.cateList.forEach(item => {
|
|
|
|
|
- let view = uni.createSelectorQuery().select('#main-' + item.id);
|
|
|
|
|
- view.fields(
|
|
|
|
|
- {
|
|
|
|
|
- size: true
|
|
|
|
|
- },
|
|
|
|
|
- data => {
|
|
|
|
|
- item.top = h;
|
|
|
|
|
- h += data.height;
|
|
|
|
|
- item.bottom = h;
|
|
|
|
|
- }
|
|
|
|
|
- ).exec();
|
|
|
|
|
- });
|
|
|
|
|
- this.sizeCalcState = true;
|
|
|
|
|
- },
|
|
|
|
|
- //加载商品 ,带下拉刷新和上滑加载
|
|
|
|
|
- async loadData(type = 'add', loading) {
|
|
|
|
|
- let obj = this;
|
|
|
|
|
- let data = {
|
|
|
|
|
- page: obj.page,
|
|
|
|
|
- limit: obj.limit,
|
|
|
|
|
- sid: obj.cateId //分类id
|
|
|
|
|
- };
|
|
|
|
|
- //没有更多直接返回
|
|
|
|
|
- if (type === 'add') {
|
|
|
|
|
- if (obj.loadingType === 'nomore') {
|
|
|
|
|
- return;
|
|
|
|
|
- }
|
|
|
|
|
- obj.loadingType = 'loading';
|
|
|
|
|
- } else {
|
|
|
|
|
- obj.loadingType = 'more';
|
|
|
|
|
- }
|
|
|
|
|
- if (type === 'refresh') {
|
|
|
|
|
- // 清空数组
|
|
|
|
|
- obj.goodsList = [];
|
|
|
|
|
- obj.page = 1;
|
|
|
|
|
- }
|
|
|
|
|
- if (this.filterIndex == 1) {
|
|
|
|
|
- console.log(obj.salesOrder);
|
|
|
|
|
- data.salesOrder = obj.numberOrder == 1 ? 'asc' : 'desc';
|
|
|
|
|
- }
|
|
|
|
|
- if (this.filterIndex == 2) {
|
|
|
|
|
- console.log(obj.priceOrder);
|
|
|
|
|
- data.priceOrder = obj.priceOrder == 1 ? 'asc' : 'desc';
|
|
|
|
|
- }
|
|
|
|
|
- getProducts(data).then(function(e) {
|
|
|
|
|
- console.log(e.data);
|
|
|
|
|
- let arr = e.data.filter(info => {
|
|
|
|
|
- return info.cate_id != 2;
|
|
|
|
|
- });
|
|
|
|
|
- obj.goodsList = obj.goodsList.concat(arr);
|
|
|
|
|
- //判断是否还有下一页,有是more 没有是nomore
|
|
|
|
|
- if (obj.limit == e.data.length) {
|
|
|
|
|
- obj.page++;
|
|
|
|
|
- obj.loadingType = 'more';
|
|
|
|
|
- } else {
|
|
|
|
|
- obj.loadingType = 'nomore';
|
|
|
|
|
- }
|
|
|
|
|
- if (type === 'refresh') {
|
|
|
|
|
- if (loading == 1) {
|
|
|
|
|
- uni.hideLoading();
|
|
|
|
|
- } else {
|
|
|
|
|
- uni.stopPullDownRefresh();
|
|
|
|
|
- }
|
|
|
|
|
- }
|
|
|
|
|
- });
|
|
|
|
|
- },
|
|
|
|
|
- //筛选点击
|
|
|
|
|
- tabClick(index) {
|
|
|
|
|
- // 防止重复点击综合排序
|
|
|
|
|
- if (this.filterIndex === 0 && this.filterIndex === index) {
|
|
|
|
|
- return;
|
|
|
|
|
- }
|
|
|
|
|
- this.filterIndex = index;
|
|
|
|
|
- // 判断是否为销量优先
|
|
|
|
|
- if (index === 1) {
|
|
|
|
|
- this.numberOrder = this.numberOrder === 1 ? 2 : 1;
|
|
|
|
|
- }
|
|
|
|
|
- // 判断是否为价格优先
|
|
|
|
|
- if (index === 2) {
|
|
|
|
|
- this.priceOrder = this.priceOrder === 1 ? 2 : 1;
|
|
|
|
|
- }
|
|
|
|
|
- // 初始化页数
|
|
|
|
|
- this.page = 1;
|
|
|
|
|
- // 初始化数组
|
|
|
|
|
- uni.pageScrollTo({
|
|
|
|
|
- duration: 300,
|
|
|
|
|
- scrollTop: 0
|
|
|
|
|
- });
|
|
|
|
|
- this.loadData('refresh', 1);
|
|
|
|
|
- uni.showLoading({
|
|
|
|
|
- title: '正在加载'
|
|
|
|
|
- });
|
|
|
|
|
- },
|
|
|
|
|
- //显示分类面板
|
|
|
|
|
- toggleCateMask(type) {
|
|
|
|
|
- let timer = type === 'show' ? 10 : 300;
|
|
|
|
|
- let state = type === 'show' ? 1 : 0;
|
|
|
|
|
- this.cateMaskState = 2;
|
|
|
|
|
- setTimeout(() => {
|
|
|
|
|
- this.cateMaskState = state;
|
|
|
|
|
- }, timer);
|
|
|
|
|
- },
|
|
|
|
|
- //分类点击
|
|
|
|
|
- changeCate(item) {
|
|
|
|
|
- this.cateId = item.id;
|
|
|
|
|
- // 显示右侧分类
|
|
|
|
|
- this.toggleCateMask();
|
|
|
|
|
- // 滚轮返回顶部
|
|
|
|
|
- uni.pageScrollTo({
|
|
|
|
|
- duration: 300,
|
|
|
|
|
- scrollTop: 0
|
|
|
|
|
- });
|
|
|
|
|
- // 初始化查询页数
|
|
|
|
|
- this.page = 1;
|
|
|
|
|
- // 重新加载数据
|
|
|
|
|
- this.loadData('refresh', 1);
|
|
|
|
|
- uni.showLoading({
|
|
|
|
|
- title: '正在加载'
|
|
|
|
|
- });
|
|
|
|
|
- },
|
|
|
|
|
- //详情
|
|
|
|
|
- navToDetailPage(item) {
|
|
|
|
|
- let id = item.id;
|
|
|
|
|
- uni.navigateTo({
|
|
|
|
|
- url: `/pages/product/product?id=${id}`
|
|
|
|
|
- });
|
|
|
|
|
- }
|
|
|
|
|
- }
|
|
|
|
|
-};
|
|
|
|
|
-</script>
|
|
|
|
|
-
|
|
|
|
|
-<style lang="scss">
|
|
|
|
|
-page,
|
|
|
|
|
-.content {
|
|
|
|
|
- background: $page-color-base;
|
|
|
|
|
-}
|
|
|
|
|
-.content {
|
|
|
|
|
- padding-top: 96rpx;
|
|
|
|
|
-}
|
|
|
|
|
-
|
|
|
|
|
-.navbar {
|
|
|
|
|
- position: fixed;
|
|
|
|
|
- left: 0;
|
|
|
|
|
- top: var(--window-top);
|
|
|
|
|
- display: flex;
|
|
|
|
|
- width: 100%;
|
|
|
|
|
- height: 80rpx;
|
|
|
|
|
- background: #fff;
|
|
|
|
|
- box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.06);
|
|
|
|
|
- z-index: 10;
|
|
|
|
|
- .nav-item {
|
|
|
|
|
- flex: 1;
|
|
|
|
|
- display: flex;
|
|
|
|
|
- justify-content: center;
|
|
|
|
|
- align-items: center;
|
|
|
|
|
- height: 100%;
|
|
|
|
|
- font-size: 30rpx;
|
|
|
|
|
- color: $font-color-dark;
|
|
|
|
|
- position: relative;
|
|
|
|
|
- &.current {
|
|
|
|
|
- color: #ff4c4c;
|
|
|
|
|
- &:after {
|
|
|
|
|
- content: '';
|
|
|
|
|
- position: absolute;
|
|
|
|
|
- left: 50%;
|
|
|
|
|
- bottom: 0;
|
|
|
|
|
- transform: translateX(-50%);
|
|
|
|
|
- width: 150rpx;
|
|
|
|
|
- height: 0;
|
|
|
|
|
- border-bottom: 4rpx solid #ff4c4c;
|
|
|
|
|
- }
|
|
|
|
|
- }
|
|
|
|
|
- }
|
|
|
|
|
- .p-box {
|
|
|
|
|
- display: flex;
|
|
|
|
|
- flex-direction: column;
|
|
|
|
|
- .iconfont {
|
|
|
|
|
- display: flex;
|
|
|
|
|
- align-items: center;
|
|
|
|
|
- justify-content: center;
|
|
|
|
|
- width: 30rpx;
|
|
|
|
|
- height: 14rpx;
|
|
|
|
|
- line-height: 1;
|
|
|
|
|
- margin-left: 4rpx;
|
|
|
|
|
- font-size: 26rpx;
|
|
|
|
|
- color: #888;
|
|
|
|
|
- &.active {
|
|
|
|
|
- color: $base-color;
|
|
|
|
|
- }
|
|
|
|
|
- }
|
|
|
|
|
- .xia {
|
|
|
|
|
- transform: scaleY(-1);
|
|
|
|
|
- }
|
|
|
|
|
- }
|
|
|
|
|
- .cate-item {
|
|
|
|
|
- display: flex;
|
|
|
|
|
- justify-content: center;
|
|
|
|
|
- align-items: center;
|
|
|
|
|
- height: 100%;
|
|
|
|
|
- width: 80rpx;
|
|
|
|
|
- position: relative;
|
|
|
|
|
- font-size: 44rpx;
|
|
|
|
|
- &:after {
|
|
|
|
|
- content: '';
|
|
|
|
|
- position: absolute;
|
|
|
|
|
- left: 0;
|
|
|
|
|
- top: 50%;
|
|
|
|
|
- transform: translateY(-50%);
|
|
|
|
|
- border-left: 1px solid #ddd;
|
|
|
|
|
- width: 0;
|
|
|
|
|
- height: 36rpx;
|
|
|
|
|
- }
|
|
|
|
|
- }
|
|
|
|
|
-}
|
|
|
|
|
-
|
|
|
|
|
-/* 分类 */
|
|
|
|
|
-.cate-mask {
|
|
|
|
|
- position: fixed;
|
|
|
|
|
- left: 0;
|
|
|
|
|
- top: var(--window-top);
|
|
|
|
|
- bottom: 0;
|
|
|
|
|
- width: 100%;
|
|
|
|
|
- background: rgba(0, 0, 0, 0);
|
|
|
|
|
- z-index: 95;
|
|
|
|
|
- transition: 0.3s;
|
|
|
|
|
-
|
|
|
|
|
- .cate-content {
|
|
|
|
|
- width: 630rpx;
|
|
|
|
|
- height: 100%;
|
|
|
|
|
- background: #fff;
|
|
|
|
|
- float: right;
|
|
|
|
|
- transform: translateX(100%);
|
|
|
|
|
- transition: 0.3s;
|
|
|
|
|
- display: flex;
|
|
|
|
|
- .left-aside {
|
|
|
|
|
- flex-shrink: 0;
|
|
|
|
|
- width: 200rpx;
|
|
|
|
|
- height: 100%;
|
|
|
|
|
- background-color: #fff;
|
|
|
|
|
- }
|
|
|
|
|
- .f-item {
|
|
|
|
|
- display: flex;
|
|
|
|
|
- align-items: center;
|
|
|
|
|
- justify-content: center;
|
|
|
|
|
- width: 100%;
|
|
|
|
|
- height: 100rpx;
|
|
|
|
|
- font-size: 28rpx;
|
|
|
|
|
- color: $font-color-base;
|
|
|
|
|
- position: relative;
|
|
|
|
|
- &.active {
|
|
|
|
|
- color: $base-color;
|
|
|
|
|
- background: #f8f8f8;
|
|
|
|
|
- &:before {
|
|
|
|
|
- content: '';
|
|
|
|
|
- position: absolute;
|
|
|
|
|
- left: 0;
|
|
|
|
|
- top: 50%;
|
|
|
|
|
- transform: translateY(-50%);
|
|
|
|
|
- height: 36rpx;
|
|
|
|
|
- width: 8rpx;
|
|
|
|
|
- background-color: $base-color;
|
|
|
|
|
- border-radius: 0 4px 4px 0;
|
|
|
|
|
- opacity: 0.8;
|
|
|
|
|
- }
|
|
|
|
|
- }
|
|
|
|
|
- }
|
|
|
|
|
-
|
|
|
|
|
- .right-aside {
|
|
|
|
|
- flex: 1;
|
|
|
|
|
- overflow: hidden;
|
|
|
|
|
- padding-left: 20rpx;
|
|
|
|
|
- padding-right: 20rpx;
|
|
|
|
|
- }
|
|
|
|
|
- .s-item {
|
|
|
|
|
- display: flex;
|
|
|
|
|
- align-items: center;
|
|
|
|
|
- height: 70rpx;
|
|
|
|
|
- padding-top: 8rpx;
|
|
|
|
|
- font-size: 28rpx;
|
|
|
|
|
- color: $font-color-dark;
|
|
|
|
|
- }
|
|
|
|
|
- .t-list {
|
|
|
|
|
- display: flex;
|
|
|
|
|
- flex-wrap: wrap;
|
|
|
|
|
- border-radius: 15rpx;
|
|
|
|
|
- width: 100%;
|
|
|
|
|
- background: #fff;
|
|
|
|
|
- padding-top: 12rpx;
|
|
|
|
|
- &:after {
|
|
|
|
|
- content: '';
|
|
|
|
|
- flex: 99;
|
|
|
|
|
- height: 0;
|
|
|
|
|
- }
|
|
|
|
|
- }
|
|
|
|
|
- .t-item {
|
|
|
|
|
- flex-shrink: 0;
|
|
|
|
|
- display: flex;
|
|
|
|
|
- justify-content: center;
|
|
|
|
|
- align-items: center;
|
|
|
|
|
- flex-direction: column;
|
|
|
|
|
- width: 171rpx;
|
|
|
|
|
- font-size: 26rpx;
|
|
|
|
|
- color: #666;
|
|
|
|
|
- padding-bottom: 20rpx;
|
|
|
|
|
-
|
|
|
|
|
- image {
|
|
|
|
|
- width: 140rpx;
|
|
|
|
|
- height: 140rpx;
|
|
|
|
|
- }
|
|
|
|
|
- }
|
|
|
|
|
- }
|
|
|
|
|
- &.none {
|
|
|
|
|
- display: none;
|
|
|
|
|
- }
|
|
|
|
|
- &.show {
|
|
|
|
|
- background: rgba(0, 0, 0, 0.4);
|
|
|
|
|
-
|
|
|
|
|
- .cate-content {
|
|
|
|
|
- transform: translateX(0);
|
|
|
|
|
- }
|
|
|
|
|
- }
|
|
|
|
|
-}
|
|
|
|
|
-.cate-list {
|
|
|
|
|
- display: flex;
|
|
|
|
|
- flex-direction: column;
|
|
|
|
|
- height: 100%;
|
|
|
|
|
- .cate-item {
|
|
|
|
|
- display: flex;
|
|
|
|
|
- align-items: center;
|
|
|
|
|
- height: 90rpx;
|
|
|
|
|
- padding-left: 30rpx;
|
|
|
|
|
- font-size: 28rpx;
|
|
|
|
|
- color: #555;
|
|
|
|
|
- position: relative;
|
|
|
|
|
- }
|
|
|
|
|
- .two {
|
|
|
|
|
- height: 64rpx;
|
|
|
|
|
- color: #303133;
|
|
|
|
|
- font-size: 30rpx;
|
|
|
|
|
- background: #f8f8f8;
|
|
|
|
|
- }
|
|
|
|
|
- .active {
|
|
|
|
|
- color: $base-color;
|
|
|
|
|
- }
|
|
|
|
|
-}
|
|
|
|
|
-
|
|
|
|
|
-/* 商品列表 */
|
|
|
|
|
-.goods-list {
|
|
|
|
|
- display: flex;
|
|
|
|
|
- flex-wrap: wrap;
|
|
|
|
|
- padding: 0 30rpx;
|
|
|
|
|
- background: #fff;
|
|
|
|
|
- .goods-item {
|
|
|
|
|
- display: flex;
|
|
|
|
|
- flex-direction: column;
|
|
|
|
|
- width: 48%;
|
|
|
|
|
- padding-bottom: 40rpx;
|
|
|
|
|
- &:nth-child(2n + 1) {
|
|
|
|
|
- margin-right: 4%;
|
|
|
|
|
- }
|
|
|
|
|
- }
|
|
|
|
|
- .image-wrapper {
|
|
|
|
|
- width: 100%;
|
|
|
|
|
- height: 330rpx;
|
|
|
|
|
- border-radius: 3px;
|
|
|
|
|
- overflow: hidden;
|
|
|
|
|
- position: relative;
|
|
|
|
|
- image {
|
|
|
|
|
- width: 100%;
|
|
|
|
|
- height: 100%;
|
|
|
|
|
- opacity: 1;
|
|
|
|
|
- }
|
|
|
|
|
- .fanli {
|
|
|
|
|
- position: absolute;
|
|
|
|
|
- bottom: 0;
|
|
|
|
|
- left: 0;
|
|
|
|
|
- width: 344rpx;
|
|
|
|
|
- height: 96rpx;
|
|
|
|
|
- .fanli-bg {
|
|
|
|
|
- position: absolute;
|
|
|
|
|
- bottom: 0;
|
|
|
|
|
- left: 0;
|
|
|
|
|
- width: 344rpx;
|
|
|
|
|
- height: 96rpx;
|
|
|
|
|
- }
|
|
|
|
|
- .fanli-font {
|
|
|
|
|
- position: relative;
|
|
|
|
|
- z-index: 10;
|
|
|
|
|
- color: #ffffff;
|
|
|
|
|
- height: 96rpx;
|
|
|
|
|
- align-items: flex-end;
|
|
|
|
|
- padding: 36rpx 10rpx 10rpx;
|
|
|
|
|
- .font-left {
|
|
|
|
|
- width: 226rpx;
|
|
|
|
|
- font-size: 20rpx;
|
|
|
|
|
- font-family: PingFang SC;
|
|
|
|
|
- font-weight: 500;
|
|
|
|
|
- color: #ffffff;
|
|
|
|
|
- }
|
|
|
|
|
- .font-right {
|
|
|
|
|
- width: 118rpx;
|
|
|
|
|
- text-align: center;
|
|
|
|
|
- font-size: 36rpx;
|
|
|
|
|
- font-family: Microsoft YaHei;
|
|
|
|
|
- font-weight: bold;
|
|
|
|
|
- color: #ffffff;
|
|
|
|
|
- }
|
|
|
|
|
- }
|
|
|
|
|
- }
|
|
|
|
|
- }
|
|
|
|
|
- .title {
|
|
|
|
|
- font-size: $font-lg;
|
|
|
|
|
- color: $font-color-dark;
|
|
|
|
|
- line-height: 80rpx;
|
|
|
|
|
- }
|
|
|
|
|
- .price-box {
|
|
|
|
|
- display: flex;
|
|
|
|
|
- align-items: center;
|
|
|
|
|
- justify-content: space-between;
|
|
|
|
|
- padding-right: 10rpx;
|
|
|
|
|
- font-size: 24rpx;
|
|
|
|
|
- color: $font-color-light;
|
|
|
|
|
- }
|
|
|
|
|
- .price {
|
|
|
|
|
- font-size: $font-lg;
|
|
|
|
|
- color: #ff4c4c;
|
|
|
|
|
- line-height: 1;
|
|
|
|
|
- &:before {
|
|
|
|
|
- content: '¥';
|
|
|
|
|
- font-size: 26rpx;
|
|
|
|
|
- }
|
|
|
|
|
- }
|
|
|
|
|
-}
|
|
|
|
|
|
|
+<template>
|
|
|
|
|
+ <view class="content">
|
|
|
|
|
+ <view class="navbar" :style="{ position: headerPosition, top: headerTop }">
|
|
|
|
|
+ <view class="nav-item" :class="{ current: filterIndex === 0 }" @click="tabClick(0)">综合排序</view>
|
|
|
|
|
+ <view class="nav-item" :class="{ current: filterIndex === 1 }" @click="tabClick(1)">
|
|
|
|
|
+ <text>销量优先</text>
|
|
|
|
|
+ <view class="p-box">
|
|
|
|
|
+ <text :class="{ active: numberOrder === 1 && filterIndex === 1 }" class="iconfont iconfold"></text>
|
|
|
|
|
+ <text :class="{ active: numberOrder === 2 && filterIndex === 1 }"
|
|
|
|
|
+ class="iconfont iconfold xia"></text>
|
|
|
|
|
+ </view>
|
|
|
|
|
+ </view>
|
|
|
|
|
+ <view class="nav-item" :class="{ current: filterIndex === 2 }" @click="tabClick(2)">
|
|
|
|
|
+ <text>价格</text>
|
|
|
|
|
+ <view class="p-box">
|
|
|
|
|
+ <text :class="{ active: priceOrder === 1 && filterIndex === 2 }" class="iconfont iconfold"></text>
|
|
|
|
|
+ <text :class="{ active: priceOrder === 2 && filterIndex === 2 }"
|
|
|
|
|
+ class="iconfont iconfold xia"></text>
|
|
|
|
|
+ </view>
|
|
|
|
|
+ </view>
|
|
|
|
|
+ <text class="cate-item iconfont iconapps" @click="toggleCateMask('show')"></text>
|
|
|
|
|
+ </view>
|
|
|
|
|
+ <view class="goods-list">
|
|
|
|
|
+ <view v-for="(item, index) in goodsList" :key="index" class="goods-item" @click="navToDetailPage(item)">
|
|
|
|
|
+ <view class="image-wrapper">
|
|
|
|
|
+ <image :src="item.image" mode="aspectFill"></image>
|
|
|
|
|
+ </view>
|
|
|
|
|
+ <text class="title clamp">{{ item.title }}</text>
|
|
|
|
|
+ <view class="price-box">
|
|
|
|
|
+ <text class="price">{{ item.price }}</text>
|
|
|
|
|
+ <text>已售 {{ item.sales }}</text>
|
|
|
|
|
+ </view>
|
|
|
|
|
+ </view>
|
|
|
|
|
+ </view>
|
|
|
|
|
+ <uni-load-more :status="loadingType"></uni-load-more>
|
|
|
|
|
+
|
|
|
|
|
+ <view class="cate-mask" :class="cateMaskState === 0 ? 'none' : cateMaskState === 1 ? 'show' : ''"
|
|
|
|
|
+ @click="toggleCateMask">
|
|
|
|
|
+ <view class="cate-content" @click.stop.prevent="stopPrevent" @touchmove.stop.prevent="stopPrevent">
|
|
|
|
|
+ <scroll-view scroll-y class="cate-list">
|
|
|
|
|
+ <view v-for="item in cateList" :key="item.id">
|
|
|
|
|
+ <view class="cate-item b-b two">{{ item.cate_name }}</view>
|
|
|
|
|
+ <view v-for="tItem in item.children" :key="tItem.id" class="cate-item b-b"
|
|
|
|
|
+ :class="{ active: tItem.id == cateId }" @click="changeCate(tItem)">
|
|
|
|
|
+ {{ tItem.cate_name }}
|
|
|
|
|
+ </view>
|
|
|
|
|
+ </view>
|
|
|
|
|
+ </scroll-view>
|
|
|
|
|
+ </view>
|
|
|
|
|
+ </view>
|
|
|
|
|
+ </view>
|
|
|
|
|
+</template>
|
|
|
|
|
+
|
|
|
|
|
+<script>
|
|
|
|
|
+ import uniLoadMore from '@/components/uni-load-more/uni-load-more.vue';
|
|
|
|
|
+ import {
|
|
|
|
|
+ getProducts
|
|
|
|
|
+ } from '@/api/product.js';
|
|
|
|
|
+ import {
|
|
|
|
|
+ getCategoryList
|
|
|
|
|
+ } from '@/api/product.js';
|
|
|
|
|
+ export default {
|
|
|
|
|
+ components: {
|
|
|
|
|
+ uniLoadMore
|
|
|
|
|
+ },
|
|
|
|
|
+ data() {
|
|
|
|
|
+ return {
|
|
|
|
|
+ cateMaskState: 0, //分类面板展开状态
|
|
|
|
|
+ headerPosition: 'fixed',
|
|
|
|
|
+ headerTop: '0px',
|
|
|
|
|
+ loadingType: 'more', //加载更多状态
|
|
|
|
|
+ filterIndex: 0, //查询类型
|
|
|
|
|
+ numberOrder: 0, //1 销量从低到高 2销量从高到低
|
|
|
|
|
+ limit: 6, //每次加载数据条数
|
|
|
|
|
+ page: 0, //当前页数
|
|
|
|
|
+ cateId: 0, //已选三级分类id
|
|
|
|
|
+ priceOrder: 0, //1 价格从低到高 2价格从高到低
|
|
|
|
|
+ cateList: [], //分类列表
|
|
|
|
|
+ goodsList: [] //商品列表
|
|
|
|
|
+ };
|
|
|
|
|
+ },
|
|
|
|
|
+
|
|
|
|
|
+ onLoad(options) {
|
|
|
|
|
+ // #ifdef H5
|
|
|
|
|
+ this.headerTop = document.getElementsByTagName('uni-page-head')[0].offsetHeight + 'px';
|
|
|
|
|
+ // #endif
|
|
|
|
|
+ this.cateId = options.tid;
|
|
|
|
|
+ this.loadCateList(options.fid, options.sid);
|
|
|
|
|
+ this.loadData();
|
|
|
|
|
+ },
|
|
|
|
|
+ onPageScroll(e) {
|
|
|
|
|
+ //兼容iOS端下拉时顶部漂移
|
|
|
|
|
+ if (e.scrollTop >= 0) {
|
|
|
|
|
+ this.headerPosition = 'fixed';
|
|
|
|
|
+ } else {
|
|
|
|
|
+ this.headerPosition = 'absolute';
|
|
|
|
|
+ }
|
|
|
|
|
+ },
|
|
|
|
|
+ //下拉刷新
|
|
|
|
|
+ onPullDownRefresh() {
|
|
|
|
|
+ this.loadData('refresh');
|
|
|
|
|
+ },
|
|
|
|
|
+ //监听页面是否滚动到底部加载更多
|
|
|
|
|
+ onReachBottom() {
|
|
|
|
|
+ this.loadData();
|
|
|
|
|
+ },
|
|
|
|
|
+ methods: {
|
|
|
|
|
+ //加载分类
|
|
|
|
|
+ async loadCateList(fid, sid) {
|
|
|
|
|
+ let obj = this;
|
|
|
|
|
+ getCategoryList({}).then(function(e) {
|
|
|
|
|
+ console.log(e);
|
|
|
|
|
+ e.data.forEach(function(e) {
|
|
|
|
|
+ if (e.id == fid) {
|
|
|
|
|
+ obj.cateList = e.children;
|
|
|
|
|
+ return;
|
|
|
|
|
+ }
|
|
|
|
|
+ });
|
|
|
|
|
+ console.log(obj.cateList);
|
|
|
|
|
+ });
|
|
|
|
|
+ },
|
|
|
|
|
+ //加载商品 ,带下拉刷新和上滑加载
|
|
|
|
|
+ async loadData(type = 'add', loading) {
|
|
|
|
|
+ let obj = this;
|
|
|
|
|
+ let data = {
|
|
|
|
|
+ page: obj.page,
|
|
|
|
|
+ limit: obj.limit,
|
|
|
|
|
+ sid: obj.cateId //分类id
|
|
|
|
|
+ };
|
|
|
|
|
+ //没有更多直接返回
|
|
|
|
|
+ if (type === 'add') {
|
|
|
|
|
+ if (obj.loadingType === 'nomore') {
|
|
|
|
|
+ return;
|
|
|
|
|
+ }
|
|
|
|
|
+ obj.loadingType = 'loading';
|
|
|
|
|
+ } else {
|
|
|
|
|
+ obj.loadingType = 'more';
|
|
|
|
|
+ }
|
|
|
|
|
+ if (type === 'refresh') {
|
|
|
|
|
+ // 清空数组
|
|
|
|
|
+ obj.goodsList = [];
|
|
|
|
|
+ obj.page = 1
|
|
|
|
|
+ }
|
|
|
|
|
+ if (this.filterIndex == 1) {
|
|
|
|
|
+ console.log(obj.salesOrder);
|
|
|
|
|
+ data.salesOrder = obj.numberOrder == 1 ? 'asc' : 'desc';
|
|
|
|
|
+ }
|
|
|
|
|
+ if (this.filterIndex == 2) {
|
|
|
|
|
+ console.log(obj.priceOrder);
|
|
|
|
|
+ data.priceOrder = obj.priceOrder == 1 ? 'asc' : 'desc';
|
|
|
|
|
+ }
|
|
|
|
|
+ getProducts(data).then(function(e) {
|
|
|
|
|
+ console.log(e.data);
|
|
|
|
|
+ obj.goodsList = obj.goodsList.concat(e.data);
|
|
|
|
|
+ //判断是否还有下一页,有是more 没有是nomore
|
|
|
|
|
+ if (obj.limit == e.data.length) {
|
|
|
|
|
+ obj.page++
|
|
|
|
|
+ obj.loadingType = 'more'
|
|
|
|
|
+ } else {
|
|
|
|
|
+ obj.loadingType = 'nomore'
|
|
|
|
|
+ }
|
|
|
|
|
+ if (type === 'refresh') {
|
|
|
|
|
+ if (loading == 1) {
|
|
|
|
|
+ uni.hideLoading();
|
|
|
|
|
+ } else {
|
|
|
|
|
+ uni.stopPullDownRefresh();
|
|
|
|
|
+ }
|
|
|
|
|
+ }
|
|
|
|
|
+ });
|
|
|
|
|
+ },
|
|
|
|
|
+ //筛选点击
|
|
|
|
|
+ tabClick(index) {
|
|
|
|
|
+ // 防止重复点击综合排序
|
|
|
|
|
+ if (this.filterIndex === 0 && this.filterIndex === index) {
|
|
|
|
|
+ return;
|
|
|
|
|
+ }
|
|
|
|
|
+ this.filterIndex = index;
|
|
|
|
|
+ // 判断是否为销量优先
|
|
|
|
|
+ if (index === 1) {
|
|
|
|
|
+ this.numberOrder = this.numberOrder === 1 ? 2 : 1;
|
|
|
|
|
+ }
|
|
|
|
|
+ // 判断是否为价格优先
|
|
|
|
|
+ if (index === 2) {
|
|
|
|
|
+ this.priceOrder = this.priceOrder === 1 ? 2 : 1;
|
|
|
|
|
+ }
|
|
|
|
|
+ // 初始化页数
|
|
|
|
|
+ this.page = 1;
|
|
|
|
|
+ // 初始化数组
|
|
|
|
|
+ uni.pageScrollTo({
|
|
|
|
|
+ duration: 300,
|
|
|
|
|
+ scrollTop: 0
|
|
|
|
|
+ });
|
|
|
|
|
+ this.loadData('refresh', 1);
|
|
|
|
|
+ uni.showLoading({
|
|
|
|
|
+ title: '正在加载'
|
|
|
|
|
+ });
|
|
|
|
|
+ },
|
|
|
|
|
+ //显示分类面板
|
|
|
|
|
+ toggleCateMask(type) {
|
|
|
|
|
+ let timer = type === 'show' ? 10 : 300;
|
|
|
|
|
+ let state = type === 'show' ? 1 : 0;
|
|
|
|
|
+ this.cateMaskState = 2;
|
|
|
|
|
+ setTimeout(() => {
|
|
|
|
|
+ this.cateMaskState = state;
|
|
|
|
|
+ }, timer);
|
|
|
|
|
+ },
|
|
|
|
|
+ //分类点击
|
|
|
|
|
+ changeCate(item) {
|
|
|
|
|
+ this.cateId = item.id;
|
|
|
|
|
+ // 显示右侧分类
|
|
|
|
|
+ this.toggleCateMask();
|
|
|
|
|
+ // 滚轮返回顶部
|
|
|
|
|
+ uni.pageScrollTo({
|
|
|
|
|
+ duration: 300,
|
|
|
|
|
+ scrollTop: 0
|
|
|
|
|
+ });
|
|
|
|
|
+ // 初始化查询页数
|
|
|
|
|
+ this.page = 1
|
|
|
|
|
+ // 重新加载数据
|
|
|
|
|
+ this.loadData('refresh', 1);
|
|
|
|
|
+ uni.showLoading({
|
|
|
|
|
+ title: '正在加载'
|
|
|
|
|
+ });
|
|
|
|
|
+ },
|
|
|
|
|
+ //详情
|
|
|
|
|
+ navToDetailPage(item) {
|
|
|
|
|
+ let id = item.id;
|
|
|
|
|
+ uni.navigateTo({
|
|
|
|
|
+ url: `/pages/product/product?id=${id}`
|
|
|
|
|
+ });
|
|
|
|
|
+ },
|
|
|
|
|
+ stopPrevent() {}
|
|
|
|
|
+ }
|
|
|
|
|
+ };
|
|
|
|
|
+</script>
|
|
|
|
|
+
|
|
|
|
|
+<style lang="scss">
|
|
|
|
|
+ page,
|
|
|
|
|
+ .content {
|
|
|
|
|
+ background: $page-color-base;
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ .content {
|
|
|
|
|
+ padding-top: 96rpx;
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ .navbar {
|
|
|
|
|
+ position: fixed;
|
|
|
|
|
+ left: 0;
|
|
|
|
|
+ top: var(--window-top);
|
|
|
|
|
+ display: flex;
|
|
|
|
|
+ width: 100%;
|
|
|
|
|
+ height: 80rpx;
|
|
|
|
|
+ background: #fff;
|
|
|
|
|
+ box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.06);
|
|
|
|
|
+ z-index: 10;
|
|
|
|
|
+
|
|
|
|
|
+ .nav-item {
|
|
|
|
|
+ flex: 1;
|
|
|
|
|
+ display: flex;
|
|
|
|
|
+ justify-content: center;
|
|
|
|
|
+ align-items: center;
|
|
|
|
|
+ height: 100%;
|
|
|
|
|
+ font-size: 30rpx;
|
|
|
|
|
+ color: $font-color-dark;
|
|
|
|
|
+ position: relative;
|
|
|
|
|
+
|
|
|
|
|
+ &.current {
|
|
|
|
|
+ color: $base-color;
|
|
|
|
|
+
|
|
|
|
|
+ &:after {
|
|
|
|
|
+ content: '';
|
|
|
|
|
+ position: absolute;
|
|
|
|
|
+ left: 50%;
|
|
|
|
|
+ bottom: 0;
|
|
|
|
|
+ transform: translateX(-50%);
|
|
|
|
|
+ width: 120rpx;
|
|
|
|
|
+ height: 0;
|
|
|
|
|
+ border-bottom: 4rpx solid $base-color;
|
|
|
|
|
+ }
|
|
|
|
|
+ }
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ .p-box {
|
|
|
|
|
+ display: flex;
|
|
|
|
|
+ flex-direction: column;
|
|
|
|
|
+
|
|
|
|
|
+ .iconfont {
|
|
|
|
|
+ display: flex;
|
|
|
|
|
+ align-items: center;
|
|
|
|
|
+ justify-content: center;
|
|
|
|
|
+ width: 30rpx;
|
|
|
|
|
+ height: 14rpx;
|
|
|
|
|
+ line-height: 1;
|
|
|
|
|
+ margin-left: 4rpx;
|
|
|
|
|
+ font-size: 26rpx;
|
|
|
|
|
+ color: #888;
|
|
|
|
|
+
|
|
|
|
|
+ &.active {
|
|
|
|
|
+ color: $base-color;
|
|
|
|
|
+ }
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ .xia {
|
|
|
|
|
+ transform: scaleY(-1);
|
|
|
|
|
+ }
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ .cate-item {
|
|
|
|
|
+ display: flex;
|
|
|
|
|
+ justify-content: center;
|
|
|
|
|
+ align-items: center;
|
|
|
|
|
+ height: 100%;
|
|
|
|
|
+ width: 80rpx;
|
|
|
|
|
+ position: relative;
|
|
|
|
|
+ font-size: 44rpx;
|
|
|
|
|
+
|
|
|
|
|
+ &:after {
|
|
|
|
|
+ content: '';
|
|
|
|
|
+ position: absolute;
|
|
|
|
|
+ left: 0;
|
|
|
|
|
+ top: 50%;
|
|
|
|
|
+ transform: translateY(-50%);
|
|
|
|
|
+ border-left: 1px solid #ddd;
|
|
|
|
|
+ width: 0;
|
|
|
|
|
+ height: 36rpx;
|
|
|
|
|
+ }
|
|
|
|
|
+ }
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ /* 分类 */
|
|
|
|
|
+ .cate-mask {
|
|
|
|
|
+ position: fixed;
|
|
|
|
|
+ left: 0;
|
|
|
|
|
+ top: var(--window-top);
|
|
|
|
|
+ bottom: 0;
|
|
|
|
|
+ width: 100%;
|
|
|
|
|
+ background: rgba(0, 0, 0, 0);
|
|
|
|
|
+ z-index: 95;
|
|
|
|
|
+ transition: 0.3s;
|
|
|
|
|
+
|
|
|
|
|
+ .cate-content {
|
|
|
|
|
+ width: 630rpx;
|
|
|
|
|
+ height: 100%;
|
|
|
|
|
+ background: #fff;
|
|
|
|
|
+ float: right;
|
|
|
|
|
+ transform: translateX(100%);
|
|
|
|
|
+ transition: 0.3s;
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ &.none {
|
|
|
|
|
+ display: none;
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ &.show {
|
|
|
|
|
+ background: rgba(0, 0, 0, 0.4);
|
|
|
|
|
+
|
|
|
|
|
+ .cate-content {
|
|
|
|
|
+ transform: translateX(0);
|
|
|
|
|
+ }
|
|
|
|
|
+ }
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ .cate-list {
|
|
|
|
|
+ display: flex;
|
|
|
|
|
+ flex-direction: column;
|
|
|
|
|
+ height: 100%;
|
|
|
|
|
+
|
|
|
|
|
+ .cate-item {
|
|
|
|
|
+ display: flex;
|
|
|
|
|
+ align-items: center;
|
|
|
|
|
+ height: 90rpx;
|
|
|
|
|
+ padding-left: 30rpx;
|
|
|
|
|
+ font-size: 28rpx;
|
|
|
|
|
+ color: #555;
|
|
|
|
|
+ position: relative;
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ .two {
|
|
|
|
|
+ height: 64rpx;
|
|
|
|
|
+ color: #303133;
|
|
|
|
|
+ font-size: 30rpx;
|
|
|
|
|
+ background: #f8f8f8;
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ .active {
|
|
|
|
|
+ color: $base-color;
|
|
|
|
|
+ }
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ /* 商品列表 */
|
|
|
|
|
+ .goods-list {
|
|
|
|
|
+ display: flex;
|
|
|
|
|
+ flex-wrap: wrap;
|
|
|
|
|
+ padding: 0 30rpx;
|
|
|
|
|
+ background: #fff;
|
|
|
|
|
+
|
|
|
|
|
+ .goods-item {
|
|
|
|
|
+ display: flex;
|
|
|
|
|
+ flex-direction: column;
|
|
|
|
|
+ width: 48%;
|
|
|
|
|
+ padding-bottom: 40rpx;
|
|
|
|
|
+
|
|
|
|
|
+ &:nth-child(2n + 1) {
|
|
|
|
|
+ margin-right: 4%;
|
|
|
|
|
+ }
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ .image-wrapper {
|
|
|
|
|
+ width: 100%;
|
|
|
|
|
+ height: 330rpx;
|
|
|
|
|
+ border-radius: 3px;
|
|
|
|
|
+ overflow: hidden;
|
|
|
|
|
+
|
|
|
|
|
+ image {
|
|
|
|
|
+ width: 100%;
|
|
|
|
|
+ height: 100%;
|
|
|
|
|
+ opacity: 1;
|
|
|
|
|
+ }
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ .title {
|
|
|
|
|
+ font-size: $font-lg;
|
|
|
|
|
+ color: $font-color-dark;
|
|
|
|
|
+ line-height: 80rpx;
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ .price-box {
|
|
|
|
|
+ display: flex;
|
|
|
|
|
+ align-items: center;
|
|
|
|
|
+ justify-content: space-between;
|
|
|
|
|
+ padding-right: 10rpx;
|
|
|
|
|
+ font-size: 24rpx;
|
|
|
|
|
+ color: $font-color-light;
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ .price {
|
|
|
|
|
+ font-size: $font-lg;
|
|
|
|
|
+ color: $uni-color-primary;
|
|
|
|
|
+ line-height: 1;
|
|
|
|
|
+
|
|
|
|
|
+ &:before {
|
|
|
|
|
+ content: '¥';
|
|
|
|
|
+ font-size: 26rpx;
|
|
|
|
|
+ }
|
|
|
|
|
+ }
|
|
|
|
|
+ }
|
|
|
</style>
|
|
</style>
|