feat(SpecialArealist): 专区分类调整
This commit is contained in:
woody
parent
b097d35d48
commit
1bff96951a
|
|
@ -1,15 +1,3 @@
|
|||
/*
|
||||
* @Descripttion:
|
||||
* @version:
|
||||
* @Author: kBank
|
||||
* @Date: 2022-11-23 11:10:29
|
||||
*/
|
||||
/*
|
||||
* @Descripttion:
|
||||
* @version:
|
||||
* @Author: kBank
|
||||
* @Date: 2022-11-23 11:10:29
|
||||
*/
|
||||
const http = uni.$u.http
|
||||
|
||||
//商品列表
|
||||
|
|
@ -117,3 +105,6 @@ export const energyShop = params =>
|
|||
//hi粉确认订单
|
||||
export const energyShopSilo = params =>
|
||||
http.post('/sale/api/order/valid-silo', params)
|
||||
|
||||
export const getAllCategory = params =>
|
||||
http.get('/sale/api/area-classify/listTree', { params })
|
||||
|
|
|
|||
|
|
@ -1,9 +1,3 @@
|
|||
/*
|
||||
* @Descripttion:
|
||||
* @version:
|
||||
* @Author: kBank
|
||||
* @Date: 2022-05-24 14:43:45
|
||||
*/
|
||||
import { getToken, removeToken } from '@/config/auth.js'
|
||||
|
||||
module.exports = vm => {
|
||||
|
|
@ -19,7 +13,7 @@ module.exports = vm => {
|
|||
|
||||
//#ifdef DEV_SERVER
|
||||
console.log('DEV_SERVER')
|
||||
config.baseURL = 'https://t-app.beida666.com/prod-api'
|
||||
config.baseURL = 'http://192.168.2.102:8080'
|
||||
//#endif
|
||||
|
||||
//#ifdef QA_SERVER
|
||||
|
|
|
|||
|
|
@ -1,9 +1,3 @@
|
|||
<!--
|
||||
* @Descripttion:
|
||||
* @version:
|
||||
* @Author: kBank
|
||||
* @Date: 2022-11-21 15:11:22
|
||||
-->
|
||||
<template>
|
||||
<view class="content">
|
||||
<backIcon :diff="diff"></backIcon>
|
||||
|
|
@ -32,34 +26,55 @@
|
|||
</view>
|
||||
</u-scroll-list>
|
||||
<view class="index_btm">
|
||||
<!-- sangelxiu1 会员专区 隐藏分类-->
|
||||
<view class="index_l" v-if="!newShareMember">
|
||||
<!-- 新的可收起展开的一二级菜单 -->
|
||||
<view class="menu_container">
|
||||
<view class="collapsible_menu">
|
||||
<view v-for="item in oneList" :key="item.pkId" class="menu_group">
|
||||
<!-- 一级分类 -->
|
||||
<view
|
||||
v-for="item in oneList"
|
||||
:class="['classIfy', oneId == item.pkId ? 'actOne' : '']"
|
||||
@click="
|
||||
((oneId = item.pkId),
|
||||
getAllGoods(item.pkId),
|
||||
getClassIfyTwo(item.pkId))
|
||||
class="first_level_item"
|
||||
:class="{ active: oneId == item.pkId }"
|
||||
@click="toggleFirstLevel(item)"
|
||||
>
|
||||
<view class="menu_text">{{
|
||||
truncateText(item.classifyName, 10)
|
||||
}}</view>
|
||||
<view
|
||||
v-if="item.children && item.children.length > 0"
|
||||
class="expand_icon"
|
||||
:class="{ expanded: expandedMenus.includes(item.pkId) }"
|
||||
>
|
||||
<u-icon
|
||||
name="arrow-right"
|
||||
size="14"
|
||||
:color="oneId == item.pkId ? '#fff' : '#666'"
|
||||
></u-icon>
|
||||
</view>
|
||||
</view>
|
||||
<view
|
||||
class="second_level_container"
|
||||
:class="{ expanded: expandedMenus.includes(item.pkId) }"
|
||||
v-if="
|
||||
item.pkId === oneId && item.children && item.children.length > 0
|
||||
"
|
||||
:key="item.pkId"
|
||||
>{{ item.classifyName }}</view
|
||||
>
|
||||
</view>
|
||||
<view :class="newShareMember ? 'index_r_2' : 'index_r'">
|
||||
<u-scroll-list :indicator="false" class="tabList">
|
||||
<view class="tab">
|
||||
<view
|
||||
v-for="(item, index) in twoList"
|
||||
:key="index"
|
||||
@click="((twoId = item.pkId), getAllGoods1(item.pkId))"
|
||||
:class="[twoId == item.pkId ? 'actTab' : 'tab_i']"
|
||||
v-for="subItem in item.children"
|
||||
:key="subItem.pkId"
|
||||
class="second_level_item"
|
||||
:class="{ active: twoId == subItem.pkId }"
|
||||
@click="selectSecondLevel(subItem)"
|
||||
>
|
||||
<view>{{ item.classifyName }}</view>
|
||||
<!-- <view :class="[twoId == item.pkId ? 'heng' : 'heng1']"></view> -->
|
||||
<view class="sub_menu_text">{{
|
||||
truncateText(subItem.classifyName, 10)
|
||||
}}</view>
|
||||
</view>
|
||||
</view>
|
||||
</u-scroll-list>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="index_r">
|
||||
<view class="search">
|
||||
<u--input
|
||||
placeholder="请输入商品名称"
|
||||
|
|
@ -285,6 +300,7 @@ export default {
|
|||
countryList: [],
|
||||
isCountry: false,
|
||||
waresName: '',
|
||||
expandedMenus: [], // 存储展开的一级菜单ID
|
||||
}
|
||||
},
|
||||
onLoad(options) {
|
||||
|
|
@ -351,10 +367,10 @@ export default {
|
|||
this.setSpecial({
|
||||
value: this.specialArea,
|
||||
})
|
||||
this.getAllCategory()
|
||||
},
|
||||
onShow() {
|
||||
this.newShareMember = uni.getStorageSync('User')?.loginType !== 0
|
||||
console.log(this.newShareMember, '...this.newShareMember')
|
||||
let that = this
|
||||
uni.$on('returnData', function (data) {
|
||||
that.specialArea = data.value
|
||||
|
|
@ -363,7 +379,7 @@ export default {
|
|||
})
|
||||
})
|
||||
// 获取国家
|
||||
this.getJScountry()
|
||||
// this.getJScountry()
|
||||
this.$nextTick(() => {
|
||||
this.$refs.cart.getCar()
|
||||
})
|
||||
|
|
@ -373,11 +389,61 @@ export default {
|
|||
this.setSmallCarLength(0)
|
||||
},
|
||||
beforeDestroy() {
|
||||
console.log('beforeDestroy........?')
|
||||
this.setSmallCarLength(0)
|
||||
},
|
||||
methods: {
|
||||
...mapActions(['setSmallCarLength', 'setShopCarLength']),
|
||||
getAllCategory() {
|
||||
api
|
||||
.getAllCategory({
|
||||
specialArea: this.specialArea,
|
||||
pkCountry: this.pkCountry,
|
||||
})
|
||||
.then(res => {
|
||||
if (res.code === 200) {
|
||||
const tempList = res.data || []
|
||||
this.oneList = tempList.map(item => {
|
||||
const children = item.children
|
||||
if (children && children.length > 0) {
|
||||
item.children = [
|
||||
{ classifyName: '全部', pkId: item.pkId },
|
||||
...children,
|
||||
]
|
||||
}
|
||||
return {
|
||||
...item,
|
||||
}
|
||||
})
|
||||
this.toggleFirstLevel(this.oneList[0])
|
||||
}
|
||||
})
|
||||
},
|
||||
truncateText(text, maxLength) {
|
||||
if (!text) return ''
|
||||
if (text.length <= maxLength) return text
|
||||
return text.substring(0, maxLength) + '...'
|
||||
},
|
||||
toggleFirstLevel(item) {
|
||||
const index = this.expandedMenus.indexOf(item.pkId)
|
||||
this.expandedMenus = []
|
||||
|
||||
if (index === -1) {
|
||||
this.expandedMenus.push(item.pkId)
|
||||
}
|
||||
|
||||
if (item.pkId === this.oneId) {
|
||||
return
|
||||
}
|
||||
this.oneId = item.pkId
|
||||
this.twoId = item.pkId
|
||||
this.getAllGoods(item.pkId)
|
||||
// this.getClassIfyTwo(item.pkId)
|
||||
},
|
||||
// 选择二级分类
|
||||
selectSecondLevel(item) {
|
||||
this.twoId = item.pkId
|
||||
this.getAllGoods1(item.pkId)
|
||||
},
|
||||
changeCountry() {
|
||||
this.isCountry = true
|
||||
},
|
||||
|
|
@ -416,18 +482,7 @@ export default {
|
|||
})
|
||||
},
|
||||
setSpecial(item) {
|
||||
if (item.value == 21) {
|
||||
// uni.navigateTo({
|
||||
// url:
|
||||
// '/pages/specialArea/haIndex?label=' +
|
||||
// this.titLabel +
|
||||
// '&specialArea=21&children=' +
|
||||
// JSON.stringify(this.itemChildren),
|
||||
// })
|
||||
} else {
|
||||
this.specialArea = item.value
|
||||
this.getClassIfy()
|
||||
}
|
||||
},
|
||||
addCar(item) {
|
||||
let carList = {
|
||||
|
|
@ -481,6 +536,12 @@ export default {
|
|||
// })
|
||||
this.oneList = res.data
|
||||
this.oneId = this.oneList[0] ? this.oneList[0].pkId : ''
|
||||
|
||||
// 默认展开第一个菜单
|
||||
if (this.oneList[0]) {
|
||||
this.expandedMenus = [this.oneList[0].pkId]
|
||||
}
|
||||
|
||||
this.getClassIfyTwo(this.oneList[0].pkId)
|
||||
this.getAllGoods(this.oneList[0].pkId)
|
||||
})
|
||||
|
|
@ -621,7 +682,126 @@ export default {
|
|||
}
|
||||
|
||||
.index_btm {
|
||||
flex: 1; // display: flex;
|
||||
flex: 1;
|
||||
display: flex;
|
||||
|
||||
.menu_container {
|
||||
width: 200rpx;
|
||||
background: #f8f9fa;
|
||||
border-right: 1px solid #e9ecef;
|
||||
|
||||
.collapsible_menu {
|
||||
height: 86vh;
|
||||
overflow-y: auto;
|
||||
padding: 10rpx 0;
|
||||
|
||||
.menu_group {
|
||||
margin-bottom: 4rpx;
|
||||
|
||||
.first_level_item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 16rpx 12rpx;
|
||||
margin: 0 8rpx;
|
||||
background: #ffffff;
|
||||
border-radius: 8rpx;
|
||||
font-size: 20rpx;
|
||||
font-weight: 500;
|
||||
color: #333333;
|
||||
box-shadow: 0 1rpx 4rpx rgba(0, 0, 0, 0.06);
|
||||
transition: all 0.3s ease;
|
||||
border: 1rpx solid transparent;
|
||||
|
||||
&:active {
|
||||
transform: scale(0.98);
|
||||
background: #f0f7ff;
|
||||
}
|
||||
|
||||
&.active {
|
||||
background: linear-gradient(135deg, #005bac 0%, #0066cc 100%);
|
||||
color: #ffffff;
|
||||
border-color: #005bac;
|
||||
box-shadow: 0 2rpx 8rpx rgba(0, 91, 172, 0.3);
|
||||
|
||||
.expand_icon {
|
||||
.u-icon {
|
||||
color: #ffffff !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.menu_text {
|
||||
flex: 1;
|
||||
font-size: 24rpx;
|
||||
line-height: 1.3;
|
||||
}
|
||||
|
||||
.expand_icon {
|
||||
margin-left: 8rpx;
|
||||
transition: transform 0.3s ease;
|
||||
|
||||
&.expanded {
|
||||
transform: rotate(90deg);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.second_level_container {
|
||||
max-height: 0;
|
||||
overflow: hidden;
|
||||
transition: max-height 0.3s ease;
|
||||
margin: 0 8rpx;
|
||||
|
||||
&.expanded {
|
||||
max-height: 1000rpx;
|
||||
}
|
||||
|
||||
.second_level_item {
|
||||
padding: 18rpx 10rpx;
|
||||
margin: 4rpx 0;
|
||||
margin-left: 8rpx;
|
||||
background: #ffffff;
|
||||
border-radius: 6rpx;
|
||||
font-size: 20rpx;
|
||||
color: #666666;
|
||||
border-left: 3rpx solid #e9ecef;
|
||||
transition: all 0.2s ease;
|
||||
position: relative;
|
||||
|
||||
&:active {
|
||||
transform: translateX(4rpx);
|
||||
background: #f8f9fa;
|
||||
}
|
||||
|
||||
&.active {
|
||||
background: #e8f4fd;
|
||||
color: #005bac;
|
||||
border-left-color: #005bac;
|
||||
font-weight: 500;
|
||||
|
||||
&::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
right: 8rpx;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
width: 8rpx;
|
||||
height: 8rpx;
|
||||
background: #005bac;
|
||||
border-radius: 50%;
|
||||
}
|
||||
}
|
||||
|
||||
.sub_menu_text {
|
||||
font-size: 22rpx;
|
||||
line-height: 1.3;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.index_l {
|
||||
width: 198rpx;
|
||||
|
|
@ -641,17 +821,11 @@ export default {
|
|||
}
|
||||
|
||||
.index_r {
|
||||
// flex: 1;
|
||||
flex: 1;
|
||||
background: #fff;
|
||||
margin-left: 198rpx; // padding: 20rpx;
|
||||
// display: flex;
|
||||
}
|
||||
|
||||
.index_r_2 {
|
||||
// flex: 1;
|
||||
background: #fff;
|
||||
margin-left: 20rpx; // padding: 20rpx;
|
||||
// display: flex;
|
||||
margin-left: 10rpx;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
Loading…
Reference in New Issue