|
|
@@ -1,414 +1,414 @@
|
|
|
-<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>
|
|
|
+<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}&spread=${this.userInfo.uid}`
|
|
|
+ });
|
|
|
+ },
|
|
|
+ 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>
|
