Skip to content

S
singleStore
Commit f2845dc8 authored by June's avatar June
Browse files
Options

fix:优化自定义导航栏返回上一页和首页的控制，以及分组商品切换没有重置参数的问题

parent 23c26165
Hide whitespace changes
Inline Side-by-side
Showing with 71 additions and 496 deletions
App.vue
View file @ f2845dc8
......@@ -26,15 +26,10 @@ export default {
}
})
},
globalData: {
backHome: false // 根据分享进入场景，自定义返回是否是返回首页
},
globalData: {},
onShow(ops) {
if([1007, 1008, 1154, 1155].includes(ops.scene)) {
this.globalData.backHome = true
}
if(!this.$store.state.systemInfo.menuCalcInfo) {
this.setMobileData()
}
......
apis/category.js
View file @ f2845dc8
......@@ -24,7 +24,8 @@ export function cateGoodsList({cat_id, keywords = '', page = 1, pagenum = 10}) {
export function groupCates() {
return request({
url: 'zsxcx/shopGoodsCategoryCustom.htm',
method: 'post'
method: 'post',
needMask: true
})
}
......
components/c-nav_bar/index.vue
View file @ f2845dc8
......@@ -57,18 +57,14 @@ export default {
methods: {
handleBack() {
const { backHome } = app.globalData
if(backHome) {
const pages = getCurrentPages()
if(pages.length === 1) {
uni.switchTab({
url: '/pages/home/index',
success: () => {
app.globalData.backHome = false
}
url: '/pages/home/index'
})
} else {
} else {
uni.navigateBack()
}
}
}
}
......
components/goods-popup/index.vue
View file @ f2845dc8
......@@ -150,6 +150,7 @@ export default {
*/
async show(params) {
try{
if(!params.skuData) return this.$toast({title: '该商品暂无规格'})
this.goods = params.goodsInfo
this.skuData = JSON.parse(JSON.stringify(params.skuData))
this.skuData.forEach(item => {
......
pages/category/index-1.vue deleted 100644 → 0
View file @ 23c26165
<template>
<view class="category-wrap w-100">
<template v-if="isOverdue">
<view style="width: 100vw; height: 100vh;display: flex;justify-content: center;align-items: center;">
<over-due />
</view>
</template>
<template v-else>
<!-- search bar -->
<view class="searchBar-wrap flex j-center a-center w-100">
<navigator
class="search flex j-center a-center"
hover-class="none"
url="/pages/search/index"
>
<image class="search-icon mr-1" src="/static/images/common/icon-search.png" mode="aspectFit" />
<text class="font-24">搜索商品</text>
</navigator>
</view>
<!-- category 未优化，可以递归组件 -->
<template v-if="goods_list.length === 0">
<view class="flex j-center a-center w-100 category">
<empty-view
iconSrc="/static/images/common/noGoods.png"
text="店铺尚未上架商品"
/>
</view>
</template>
<template v-else>
<view class="category flex j-between w-100 font-24">
<scroll-view
class="scroll-left"
scroll-y
:scroll-into-view="leftScrollName"
>
<!-- 一级分类 -->
<view
class="w-100 px-3 py-2"
v-for="(cate_1, cate_idx_1) in cate_list"
:key="cate_1.cat_id"
:class="cate1_current === cate_1.cat_id ? 'cate-active' : null"
@click.stop=""
>
<view
class="mb-2"
@click.stop="cateChange(1, cate_1.cat_id, cate_idx_1)"
:class="cate1_current === cate_1.cat_id ? 'cate-1_active' : null"
>{{cate_1.cat_name}}</view>
<view v-show="cate1_current === cate_1.cat_id && cate_1.list.length > 0">
<!-- 二级分类 -->
<view
class="ml-2 second-item"
v-for="(cate_2, cate_idx_2) in cate_1.list"
:key="cate_2.cat_id"
>
<view
:class="cate2_current === cate_2.cat_id ? 'cate-2_active' : null"
@click.stop="cateChange(2, cate_2.cat_id, cate_idx_1, cate_idx_2)"
>{{cate_2.cat_name}}</view>
</view>
</view>
</view>
</scroll-view>
<view class="scroll-right flex-1">
<view class="cates_title">{{cate1_name}} {{cate2_name ? '-' + cate2_name : ''}}</view>
<pull-list
ref="pullList"
:refresherEnabled="false"
>
<view
class="goods-item flex j-start a-center"
v-for="good in goods_list"
:key="good.goods_id"
@click="navDetail(good)"
>
<image
class="goods-cover mr-2"
lazy-load
:src="baseUrl + '/' + good.goods_thumb"
mode="aspectFit"
/>
<view class="goods-price flex-1 flex flex-column j-between font-28">
<view class="title">{{good.goods_name}}</view>
<view class="descColor desc font-24 w-100 flex j-between a-center">
<text class="flex-1">{{good.specification}}</text>
<text class="sale-count text-right">销量：{{good.virtual_quantity_sold}}</text>
</view>
<view class="w-100 flex j-between a-center">
<view class="flex j-start a-center">
<price
:is_inquiry="good.is_inquiry"
:price="good.shop_price"
/>
<text class="primaryColor font-28">{{good.least_str}}</text>
</view>
<image
class="cart-icon"
src="/static/images/common/icon-cart.png"
mode="aspectFit"
@click.stop="handlePop(good)"
/>
</view>
</view>
</view>
<view class="empty-text text-center mt-4 p-2">到底了，看看别的分类吧~</view>
</pull-list>
</view>
</view>
</template>
<!-- 购物弹窗 -->
<goods-popup ref="popup" :fitIphoneX="false" />
</template>
</view>
</template>
<script>
// 所有写法需要优化！！！
import pullList from '@/components/pull-list/index.vue'
import goodsPopup from '@/components/goods-popup/index.vue'
import overDue from '@/components/overDue-view/index.vue'
import price from '@/components/price/index.vue'
import { getCatetories, cateGoodsList } from '@/apis/category.js'
import { searchGoods, goodsSku } from '@/apis/goods.js'
import { baseUrl } from '@/config/index.js'
import common_share from '@/mixins/setting_share.js'
import { mapState, mapActions } from 'vuex'
import { debounce } from '@/utils/common.js'
let cat_id = 0
export default {
data() {
return {
baseUrl,
cate1_current: '1', // 和cateid对应则未选中状态
cate2_current: '0',
cate1_name: '',
cate2_name: '',
cate_list: [], // 分类列表
goods_list: [], // 分类商品列表
showNoMoreMsg: false
}
},
components: {
pullList,
goodsPopup,
overDue,
price
},
computed: {
...mapState({
token: state => state.user.token,
isOverdue: state => state.user.isOverdue
})
},
// async created() {
// this.getCate()
// },
onShow() {
uni.showLoading()
this.getCate()
this.getCateGoods()
if(this.token) {
this.setCount()
}
uni.hideLoading()
},
mixins: [common_share],
methods: {
...mapActions('cart', ['setCount']),
async getCate() {
try{
const { status, data } = await getCatetories()
if(status) {
let cate_list = this.cate_list
cate_list = data
cat_id = cate_list[0].cat_id
this.cate1_current = cate_list[0].cat_id
this.cate_list = cate_list
this.cate1_name = cate_list[0].cat_name
// this.cate2_name = cate_list[0].list[0].cat_name
this.getCateGoods()
}
}catch(e){
console.log(e)
this.$toast({title: e.msg || '获取分类失败'})
}
},
// 切换分类 type === 1 分类1 type === 2 分类2, cate1_idx 分类一的下表
cateChange(type, cate_id, cate1_idx, cate2_idx) {
if(cat_id === cate_id) return
const cate_list = this.cate_list
if(type === 1) {
this.cate1_current = cate_id
this.cate2_current = "0" // 初始化，让二级不在激活状态
cat_id = cate_id
this.cate1_name = cate_list[cate1_idx].cat_name
this.cate2_name = ''
} else if(type === 2) {
this.cate2_current = cate_id
cat_id = cate_id
this.cate2_name = cate_list[cate1_idx].list[cate2_idx].cat_name
}
this.$refs.pullList.scroll2Top()
this.getCateGoods()
},
// 获取分类商品
async getCateGoods() {
try{
const { status, data } = await cateGoodsList(cat_id)
if(status) {
this.goods_list = data
} else {
this.goods_list = []
}
}catch(e){
console.log(e)
this.$toast({title: e.msg || '程序错误'})
}
},
// 商品详情
navDetail(good) {
uni.navigateTo({
url: `/pages/goods/detail?goods_id=${good.goods_id}&shop_id=${good.shop_id}&agent_id=${good.agent_id}`
})
},
// tolower() {
// console.log('触底了')
// },
// 点击拉起弹窗
handlePop: debounce(async function(goods) {
try{
uni.showLoading({
title: '加载中...',
mask: true
})
const { status, data } = await goodsSku(goods.goods_id)
if(status) {
console.log(data)
const params = {
goodsInfo: {
cover: `${this.baseUrl}/${goods.goods_thumb}`,
title: goods.goods_name,
is_inquiry: goods.is_inquiry,
unit: goods.goods_unit
},
skuData: data
}
console.log(params)
this.$refs.popup.show(params)
}
uni.hideLoading()
}catch(e){
console.log(e)
uni.hideLoading()
//TODO handle the exception
}
}, 800)
}
}
// disableScroll: true
</script>
<style lang="scss" scoped>
.category-wrap {
height: 100vh;
box-sizing: border-box;
border-top: 1rpx solid $line;
overflow: hidden;
.searchBar-wrap {
height: 112rpx;
background-color: #fff;
.search {
width: 690rpx;
height: 72rpx;
border-radius: 4rpx;
background-color: $mainBg;
.search-icon {
width: 32rpx;
height: 32rpx;
}
}
}
.category{
height: calc(100vh - 112rpx);
background-color: $mainBg;
overflow: hidden;
.scroll-left {
flex: 0 0 180rpx;
overflow: hidden;
.cate-1_active {
color: $primary;
font-weight: bold;
}
.cate-2_active {
color: $primary;
}
.cate-active {
background-color: #fff;
}
.second-item {
margin-bottom: 20rpx;
&:last-child {
margin-bottom: 0;
}
}
}
.scroll-right {
position: relative;
padding-top: 72rpx;
background-color: #fff;
.cates_title {
position: absolute;
left: 0;
top: 0;
right: 0;
z-index: 2;
height: 72rpx;
line-height: 72rpx;
margin-left: 20rpx;
background-color: #fff;
}
.empty-text {
font-size: 20rpx;
color: $desc;
}
.goods-item {
@include borderBox(20rpx, 20rpx);
border-bottom: 1rpx solid $line;
.goods-cover {
flex: 0 0 160rpx;
width: 160rpx;
height: 160rpx;
}
.goods-price {
height: 160rpx;
.title {
@include text-ellipsis(1);
color: #343434;
}
.desc{
.spec {
@include text-ellipsis(1);
}
.sale-count {
flex: 0 0 200rpx;
}
}
.price-txt {
color: $primary;
}
.cart-icon {
width: 34rpx;
height: 32rpx;
}
}
}
}
}
}
</style>
pages/category/index.vue
View file @ f2845dc8
......@@ -33,8 +33,10 @@
<scroll-view
class="scroll-left"
scroll-y
:scroll-into-view="leftScrollName"
refresher-enabled
:refresher-triggered="cateRefreshStatus"
@click="handleCate"
@refresherrefresh="cateRefresh"
>
<view
class="cate-item overtext-1"
......@@ -48,67 +50,56 @@
</scroll-view>
<view class="scroll-right flex-1">
<template v-if="goods_list.length === 0">
<view class="flex j-center a-center w-100 empty-wrap">
<empty-view
iconSrc="/static/images/common/noGoods.png"
text="该分类暂无商品"
/>
</view>
</template>
<template v-else>
<view class="cates_title">{{cate_name}}</view>
<pull-list
ref="pullList"
@refresh="refresh"
@tolower="tolower"
<pull-list
ref="pullList"
@refresh="refresh"
@tolower="tolower"
>
<block
v-for="(goods, goodsidx) in goods_list"
:key="goodsidx"
>
<block
v-for="(goods, goodsidx) in goods_list"
:key="goodsidx"
<view
class="goods-item flex j-start a-center"
v-for="good in goods"
:key="good.goods_id"
@click="navDetail(good)"
>
<view
class="goods-item flex j-start a-center"
v-for="good in goods"
:key="good.goods_id"
@click="navDetail(good)"
>
<image
class="goods-cover mr-2"
lazy-load
:src="baseUrl + '/' + good.goods_thumb"
mode="aspectFit"
/>
<view class="goods-price flex-1 flex flex-column j-between font-28">
<view class="title">{{good.goods_name}}</view>
<view class="descColor desc font-24 w-100 flex j-between a-center">
<text class="flex-1">{{good.specification}}</text>
<text class="sale-count text-right">销量：{{good.virtual_quantity_sold}}</text>
</view>
<view class="w-100 flex j-between a-center">
<view class="flex j-start a-center">
<price
:is_inquiry="good.is_inquiry"
:price="good.shop_price"
/>
<text class="primaryColor font-28">{{good.least_str}}</text>
</view>
<image
class="cart-icon"
src="/static/images/common/icon-cart.png"
mode="aspectFit"
@click.stop="handlePop(good)"
<image
class="goods-cover mr-2"
lazy-load
:src="baseUrl + '/' + good.goods_thumb"
mode="aspectFit"
/>
<view class="goods-price flex-1 flex flex-column j-between font-28">
<view class="title">{{good.goods_name}}</view>
<view class="descColor desc font-24 w-100 flex j-between a-center">
<text class="flex-1">{{good.specification}}</text>
<text class="sale-count text-right">销量：{{good.virtual_quantity_sold}}</text>
</view>
<view class="w-100 flex j-between a-center">
<view class="flex j-start a-center">
<price
:is_inquiry="good.is_inquiry"
:price="good.shop_price"
/>
<text class="primaryColor font-28">{{good.least_str}}</text>
</view>
<image
class="cart-icon"
src="/static/images/common/icon-cart.png"
mode="aspectFit"
@click.stop="handlePop(good)"
/>
</view>
</view>
</block>
<view class="empty-text text-center mt-4 p-2">到底了，看看别的分类吧~</view>
</pull-list>
</template>
</view>
</block>
<view class="empty-text text-center mt-4 p-2">到底了，看看别的分类吧~</view>
</pull-list>
</view>
</view>
</template>
......@@ -140,7 +131,7 @@ export default {
cate_name: '',
cate_list: [], // 分类列表
goods_list: [], // 分类商品列表
showNoMoreMsg: false
cateRefreshStatus: false
}
},
components: {
......@@ -158,11 +149,12 @@ export default {
created() {
this.loadMore = new LoadMore()
this.getCate()
},
onShow() {
uni.showLoading()
this.getCate()
// this.getCate()
if(this.token) {
this.setCount()
}
......@@ -206,7 +198,6 @@ export default {
async getCateGoods() {
try{
const { status, data } = await this.loadMore.getList({cat_id}, cateGoodsList)
if(status) {
this.$set(this.goods_list, this.goods_list.length, data)
}
......@@ -228,26 +219,6 @@ export default {
this.getCateGoods()
},
// 切换分类 type === 1 分类1 type === 2 分类2, cate1_idx 分类一的下表
cateChange(type, cate_id, cate1_idx, cate2_idx) {
if(cat_id === cate_id) return
const cate_list = this.cate_list
if(type === 1) {
this.cate1_current = cate_id
this.cate2_current = "0" // 初始化，让二级不在激活状态
cat_id = cate_id
this.cate1_name = cate_list[cate1_idx].cat_name
this.cate2_name = ''
} else if(type === 2) {
this.cate2_current = cate_id
cat_id = cate_id
this.cate2_name = cate_list[cate1_idx].list[cate2_idx].cat_name
}
this.$refs.pullList.scroll2Top()
this.getCateGoods()
},
// 商品详情
navDetail(good) {
uni.navigateTo({
......@@ -255,10 +226,6 @@ export default {
})
},
// tolower() {
// console.log('触底了')
// },
// 点击拉起弹窗
handlePop: debounce(async function(goods) {
try{
......@@ -287,10 +254,20 @@ export default {
uni.hideLoading()
//TODO handle the exception
}
}, 800)
}, 800) ,
// 分类下拉刷新
cateRefresh() {
this.cateRefreshStatus = true
this.loadMore.resetParams()
this.cate_cur = 0
this.getCate()
let timer = setTimeout(() => {
this.cateRefreshStatus = false
}, 800)
}
}
}
// disableScroll: true
</script>
<style lang="scss" scoped>
......@@ -339,7 +316,6 @@ export default {
.scroll-right {
position: relative;
padding-top: 72rpx;
background-color: #fff;
.empty-wrap {
position: absolute;
......@@ -348,17 +324,6 @@ export default {
top: 0;
bottom: 0;
}
.cates_title {
position: absolute;
left: 0;
top: 0;
right: 0;
z-index: 2;
height: 72rpx;
line-height: 72rpx;
margin-left: 20rpx;
background-color: #fff;
}
.empty-text {
font-size: 20rpx;
color: $desc;
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment