|
@@ -15,7 +15,7 @@
|
|
<view class="sort-right-col" :class="sortSecondCode == item.cateCode ? 'sort-right-col-active' : ''" v-for="(item,index) in sortSecondList"
|
|
<view class="sort-right-col" :class="sortSecondCode == item.cateCode ? 'sort-right-col-active' : ''" v-for="(item,index) in sortSecondList"
|
|
:key="index" @click="checkSecondSort(item)">{{item.cateValue}}</view>
|
|
:key="index" @click="checkSecondSort(item)">{{item.cateValue}}</view>
|
|
</scroll-view>
|
|
</scroll-view>
|
|
- <k-scroll-view @onPullDown="handlePullDown" @onPullUp="handleLoadMore" class="goods-box">
|
|
|
|
|
|
+ <scroll-view class="goods-box" scroll-y="true" @scrolltolower="handleLoadMore()">
|
|
<view class="goods-row" v-for="(item, index) in goodsList" :key="index" @click="goToGoodDetails(item)">
|
|
<view class="goods-row" v-for="(item, index) in goodsList" :key="index" @click="goToGoodDetails(item)">
|
|
<image class="goods-img" :src="item.imgPath"></image>
|
|
<image class="goods-img" :src="item.imgPath"></image>
|
|
<view class="goods-info">
|
|
<view class="goods-info">
|
|
@@ -33,7 +33,7 @@
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
- </k-scroll-view>
|
|
|
|
|
|
+ </scroll-view>
|
|
</view>
|
|
</view>
|
|
<u-modal v-model="modalShow" content="是否将该商品添加至购物车" @confirm="submitAddCart()" :async-close="true"
|
|
<u-modal v-model="modalShow" content="是否将该商品添加至购物车" @confirm="submitAddCart()" :async-close="true"
|
|
:show-cancel-button="true"></u-modal>
|
|
:show-cancel-button="true"></u-modal>
|
|
@@ -44,11 +44,7 @@
|
|
<script>
|
|
<script>
|
|
const NET = require('../../utils/request')
|
|
const NET = require('../../utils/request')
|
|
const API = require('../../config/api')
|
|
const API = require('../../config/api')
|
|
- import kScrollView from '@/components/k-scroll-view/k-scroll-view.vue'
|
|
|
|
export default {
|
|
export default {
|
|
- components: {
|
|
|
|
- kScrollView
|
|
|
|
- },
|
|
|
|
data() {
|
|
data() {
|
|
return {
|
|
return {
|
|
pageIndex: 1,
|
|
pageIndex: 1,
|
|
@@ -64,25 +60,36 @@
|
|
}
|
|
}
|
|
},
|
|
},
|
|
onShow() {
|
|
onShow() {
|
|
- this.sortFirstList = []
|
|
|
|
- NET.request(API.getSortList, {}, 'POST').then(res => {
|
|
|
|
- this.sortFirstList = res.data
|
|
|
|
- if (res.data.length) {
|
|
|
|
- this.checkFirstSort(res.data[0])
|
|
|
|
- } else {
|
|
|
|
|
|
+ this.getBaseData()
|
|
|
|
+ },
|
|
|
|
+ onPullDownRefresh() {
|
|
|
|
+ this.getBaseData()
|
|
|
|
+ uni.stopPullDownRefresh();
|
|
|
|
+ },
|
|
|
|
+ methods: {
|
|
|
|
+ // 获取全部数据
|
|
|
|
+ getBaseData() {
|
|
|
|
+ this.pageIndex = 1
|
|
|
|
+ this.sortFirstList = []
|
|
|
|
+ this.sortSecondList = []
|
|
|
|
+ this.goodsList = []
|
|
|
|
+ NET.request(API.getSortList, {}, 'POST').then(res => {
|
|
|
|
+ this.sortFirstList = res.data
|
|
|
|
+ if (res.data.length) {
|
|
|
|
+ this.checkFirstSort(res.data[0])
|
|
|
|
+ } else {
|
|
|
|
+ this.$refs.uTips.show({
|
|
|
|
+ title: '获取商品分类失败',
|
|
|
|
+ type: 'warning',
|
|
|
|
+ })
|
|
|
|
+ }
|
|
|
|
+ }).catch(error => {
|
|
this.$refs.uTips.show({
|
|
this.$refs.uTips.show({
|
|
title: '获取商品分类失败',
|
|
title: '获取商品分类失败',
|
|
type: 'warning',
|
|
type: 'warning',
|
|
})
|
|
})
|
|
- }
|
|
|
|
- }).catch(error => {
|
|
|
|
- this.$refs.uTips.show({
|
|
|
|
- title: '获取商品分类失败',
|
|
|
|
- type: 'warning',
|
|
|
|
})
|
|
})
|
|
- })
|
|
|
|
- },
|
|
|
|
- methods: {
|
|
|
|
|
|
+ },
|
|
// 切换一级分类
|
|
// 切换一级分类
|
|
checkFirstSort(item) {
|
|
checkFirstSort(item) {
|
|
this.sortFirstCode = item.cateCode
|
|
this.sortFirstCode = item.cateCode
|
|
@@ -108,26 +115,15 @@
|
|
this.pageIndex = 1
|
|
this.pageIndex = 1
|
|
this.getGoodsList()
|
|
this.getGoodsList()
|
|
},
|
|
},
|
|
- // 下拉刷新
|
|
|
|
- handlePullDown(stopLoad) {
|
|
|
|
- this.pageIndex = 1
|
|
|
|
- this.goodsList = []
|
|
|
|
- this.getGoodsList(stopLoad)
|
|
|
|
- stopLoad ? stopLoad() : '';
|
|
|
|
- },
|
|
|
|
// 懒加载
|
|
// 懒加载
|
|
- handleLoadMore(stopLoad) {
|
|
|
|
|
|
+ handleLoadMore() {
|
|
if (!this.isOver) {
|
|
if (!this.isOver) {
|
|
this.pageIndex++
|
|
this.pageIndex++
|
|
this.getGoodsList()
|
|
this.getGoodsList()
|
|
- } else {
|
|
|
|
- stopLoad ? stopLoad({
|
|
|
|
- isEnd: true
|
|
|
|
- }) : '';
|
|
|
|
}
|
|
}
|
|
},
|
|
},
|
|
// 获取商品
|
|
// 获取商品
|
|
- getGoodsList(stopLoad) {
|
|
|
|
|
|
+ getGoodsList() {
|
|
NET.request(API.getGoodsBySort, {
|
|
NET.request(API.getGoodsBySort, {
|
|
name: this.goodName,
|
|
name: this.goodName,
|
|
oneId: this.sortFirstCode,
|
|
oneId: this.sortFirstCode,
|
|
@@ -192,8 +188,8 @@
|
|
|
|
|
|
.container {
|
|
.container {
|
|
width: 100%;
|
|
width: 100%;
|
|
- height: 100%;
|
|
|
|
- position: absolute;
|
|
|
|
|
|
+ height: calc(100% - 70px);
|
|
|
|
+ float: left;
|
|
|
|
|
|
.search-box {
|
|
.search-box {
|
|
width: 100%;
|
|
width: 100%;
|
|
@@ -212,7 +208,6 @@
|
|
.sort-left-box {
|
|
.sort-left-box {
|
|
width: 80px;
|
|
width: 80px;
|
|
height: calc(100% - 58px);
|
|
height: calc(100% - 58px);
|
|
- border-right: 1px solid #DDDDDD;
|
|
|
|
float: left;
|
|
float: left;
|
|
overflow-y: auto;
|
|
overflow-y: auto;
|
|
|
|
|
|
@@ -240,6 +235,7 @@
|
|
width: calc(100% - 81px);
|
|
width: calc(100% - 81px);
|
|
height: calc(100% - 58px);
|
|
height: calc(100% - 58px);
|
|
float: left;
|
|
float: left;
|
|
|
|
+ border-left: 1px solid #DDDDDD;
|
|
|
|
|
|
.sort-right-row {
|
|
.sort-right-row {
|
|
width: 100%;
|
|
width: 100%;
|
|
@@ -275,18 +271,20 @@
|
|
height: calc(100% - 44px) !important;
|
|
height: calc(100% - 44px) !important;
|
|
padding: 6px 0 0px 0;
|
|
padding: 6px 0 0px 0;
|
|
box-sizing: border-box;
|
|
box-sizing: border-box;
|
|
- overflow-y: auto;
|
|
|
|
float: left;
|
|
float: left;
|
|
|
|
+ overflow-y: auto;
|
|
|
|
|
|
.goods-row {
|
|
.goods-row {
|
|
width: calc(100% - 24px);
|
|
width: calc(100% - 24px);
|
|
height: 104px;
|
|
height: 104px;
|
|
|
|
+ float: left;
|
|
padding: 11px 11px 11px 7px;
|
|
padding: 11px 11px 11px 7px;
|
|
box-sizing: border-box;
|
|
box-sizing: border-box;
|
|
margin: 4px 0 12px 12px;
|
|
margin: 4px 0 12px 12px;
|
|
background: #FFFFFF;
|
|
background: #FFFFFF;
|
|
box-shadow: 0px 1px 5px 0px rgba(102, 102, 102, 0.43);
|
|
box-shadow: 0px 1px 5px 0px rgba(102, 102, 102, 0.43);
|
|
border-radius: 15px;
|
|
border-radius: 15px;
|
|
|
|
+ position: relative;
|
|
|
|
|
|
.goods-img {
|
|
.goods-img {
|
|
width: 84px;
|
|
width: 84px;
|