panxiaohe
/
ceres-uniapp-v2.0
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

小程序分类功能界面布局修改

master
dy-hu 11 months ago
parent
6fae48201b
commit
c28837bb1b
2 changed files with 232 additions and 45 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 172
      pages/tabbar/category/index.vue
  2. 105
      pages/tabbar/category/slide-cate.vue

172
pages/tabbar/category/index.vue
View File

@ -1,55 +1,69 @@
<template>
<view>
<global-loading />
<view class="header">
<!-- <view class="header">
<image class="logo" src="https://ceres.zkthink.com//assets/img/logo.png" mode="widthFix"></image>
</view>
<view class="content">
</view>-->
<view class="flex-hor">
<image class="cate-expand" src="https://wechat.hnthee.com/ceres-local-file/image/icon_cate_expand.png" @click="openMenu"/>
<view class="search-content" @click="handleSearch">
<image class="input-search" src="https://wechat.hnthee.com/ceres-local-file/image/icon_input_search.png"/>
<input class="input-content" type="text" placeholder="搜索商品" disabled/>
</view>
</view>
<view class="content" @touchstart="touchStart" @touchend="touchEnd">
<!-- 分类中心 -->
<scroll-view scroll-y class="left-aside">
<!-- <scroll-view scroll-y class="left-aside">
<view v-for="(item,index) in flist" :key="item.classifyId" class="f-item b-b" :class="{active: index === currentIndex}" @click="tabtap(item,index)">
{{item.classifyName}}
</view>
</scroll-view>
</scroll-view>-->
<scroll-view scroll-with-animation scroll-y class="right-aside" v-if="!ifEmpty">
<view v-if="onlyTwoLayer">
<view class="t-list" v-if="slist.length>0">
<view @click="navToList(titem.classifyPid, titem.classifyId)" class="t-item" v-for="titem in slist" :key="titem.classifyId">
<image :src="titem.classifyImage" class="pic-img"></image>
<text>{{titem.classifyName}}</text>
<text class="cate-name-txt">{{titem.classifyName}}</text>
</view>
</view>
</view>
<view v-if="!onlyTwoLayer">
<view v-for="item in slist" :key="item.classifyId" class="s-list">
<view class="classBox flex-items-plus">
<image class="emptyOrder-img" src="https://ceres.zkthink.com/static/images/classRight.png"></image>
<text class="s-item" >{{item.classifyName}}</text>
<image class="emptyOrder-img" src="https://ceres.zkthink.com/static/images/classLeft.png"></image>
<image src="https://wechat.hnthee.com/ceres-local-file/image/icon_class_left.png"></image>
<text class="s-item" >{{item.classifyName}}</text>
<image src="https://wechat.hnthee.com/ceres-local-file/image/icon_class_right.png"></image>
</view>
<view class="t-list">
<view class="t-list" style="margin-top: 20rpx">
<view @click="navToList(item.classifyId, titem.classifyId)" class="t-item" v-for="titem in item.childs" :key="titem.classifyId">
<image :src="titem.classifyImage" class="pic-img"></image>
<text>{{titem.classifyName}}</text>
<text class="cate-name-txt">{{titem.classifyName}}</text>
</view>
</view>
</view>
</view>
</scroll-view>
<view v-if="ifEmpty" class="emptyOrder-box flex-items-plus flex-column">
<image class="emptyOrder-img" src="https://ceres.zkthink.com/static/img/bgnull.png"></image>
<label class="font-color-999 fs26 mar-top-30">{{$t('common.classifyproductempty')}}</label>
</view>
</view>
<slide-cate v-model="showMenu" @checked="tabtap" :checked="currentIndex" :cate-list="flist"></slide-cate>
</view>
</template>
<script>
const NET = require('../../../utils/request')
import SlideCate from "./slide-cate";
const NET = require('../../../utils/request')
const API = require('../../../config/api')
export default {
data() {
components: {SlideCate},
data() {
return {
sizeCalcState: false,
tabScrollTop: 0,
@ -58,8 +72,12 @@
flist: [],
slist: [],
ifEmpty: false,
onlyTwoLayer : true
}
onlyTwoLayer : true,
showMenu: false,
startTime: null, // 手势滑动时间
startPosition: 0, // 手势进入时
endPosition: 0 // 手势离开时
}
},
onLoad() {
this.loadData();
@ -90,7 +108,7 @@
classifyId:this.currentId
},'GET').then(res => {
uni.hideLoading()
if (res.data.length === 0) {
this.ifEmpty = true
}
@ -98,7 +116,7 @@
this.onlyTwoLayer = !this.slist.some(function(item){
return item.childs.length>0
});
}).catch(res => {
uni.hideLoading()
})
@ -145,7 +163,45 @@
uni.navigateTo({
url: `../../../pages_category_page1/goodsModule/goodsList?category3Id=${tid}`
})
}
},
// 查询产品
handleSearch() {
uni.navigateTo({
url: `/pages_category_page1/search/index/index`
})
},
openMenu() {
this.showMenu = true;
//this.$refs.slideCate.open()
},
closeMenu() {
this.showMenu = false;
//this.$refs.slideCate.open()
},
// 手势进入时
touchStart(e) {
this.startTime = Date.now()
this.startPosition = e.changedTouches[0].clientX
},
// 手势离开时
touchEnd(e){
const endTime = Date.now()
if (endTime - this.startTime > 2000){
return;
}
this.endPosition = e.changedTouches[0].clientX;
var slideDistance = this.endPosition - this.startPosition;
if( slideDistance > 50){
this.openMenu()
}
if(slideDistance < -50){
this.closeMenu()
}
}
}
}
</script>
@ -167,31 +223,11 @@
.content {
display: flex;
}
.left-aside {
flex-shrink: 0;
width: 200upx;
height: 100vh;
background-color: #F8F8F8;
}
.f-item {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
height: 100upx;
font-size: 28upx;
color: $font-color-base;
position: relative;
&.active{
color: $base-color;
background: #FFFFFF;
}
}
.right-aside{
flex: 1;
width: 100%;
padding: 20upx 0 20upx 0;
background: #fff;
background-color: #FAFAFA;
height: 100vh;
}
.s-item{
@ -201,13 +237,14 @@
height: 70upx;
padding-top: 8upx;
font-size: 28upx;
color: $font-color-dark;
color: #252744;
font-weight: bold;
}
.t-list{
display: flex;
flex-wrap: wrap;
width: 100%;
background: #fff;
background-color: #FAFAFA;
padding-top: 12upx;
&:after{
content: '';
@ -225,7 +262,8 @@
justify-content: center;
align-items: center;
flex-direction: column;
width: 176upx;
//width: 176upx;
width: 248upx;
font-size: 26upx;
color: #666;
padding-bottom: 20upx;
@ -246,11 +284,55 @@
.classBox {
image {
width: 66rpx;
height: 4rpx;
height: 20rpx;
margin-top: 10rpx;
}
.s-item {
margin: 0 10rpx;
}
}
.flex-hor{
width: 100%;
display: flex;
align-items: center;
background-color: #FAFAFA;
flex-direction: row;
padding: 20rpx 30rpx;
}
.cate-expand{
width: 32rpx;
height: 30rpx;
margin-right: 20rpx;
}
.search-content{
display: flex;
align-items: center;
height: 55rpx;
flex-grow: 1;
padding-left: 17rpx;
flex-direction: row;
background-color: white;
border-radius: 50rpx;
}
.input-search{
width: 28rpx;
height: 28rpx;
}
.input-content{
font-size: 20rpx;
flex-grow: 1;
margin-left: 15rpx;
}
.cate-name-txt{
margin-top: 12rpx;
color: #252744;
font-size: 14rpx;
}
</style>

105
pages/tabbar/category/slide-cate.vue
View File

@ -0,0 +1,105 @@
<template>
<view>
<view class="menu-window" :class="{ 'menu-window-visible': value }">
<scroll-view style="height: 100%;" scroll-y="true" class="list">
<view v-for="(vo,index) in cateList" :key="index" class="navlist" @click.stop="onCateClick(vo, index)">
<span :class="{active:checked == index}">{{vo.classifyName}}</span>
</view>
</scroll-view>
</view>
<view class="mask" @touchmove.prevent :hidden="value === false" @click="onClose"></view>
</view>
</template>
<script>
export default {
name: "slide-cate",
props: {
value: Boolean,
checked: Number,
cateList: Array,
},
methods: {
onClose() {
this.$emit("input", false);
},
onCateClick(item, index) {
this.$emit("checked", item, index);
this.$emit("input", false);
}
}
}
</script>
<style lang="scss" scoped>
.mask {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: 55;
background-color: rgba(0, 0, 0, 0.5);
}
.menu-window {
display: block;
position: fixed;
width: 85%;
height: 100%;
left: 0;
top: 86rpx;
//background-color: #fff;
background-color: rgba(255, 255, 255, 1);
z-index: 999;
transform: translateX(calc(-100%));
transition: transform 0.3s ease;
}
.menu-window-visible {
//z-index: 999;
transform: translateX(0px);
}
.menu-window .list {
width: 100%;
display: flex;
flex-direction: column;
}
.list{
background-color: white;
color: #333333;
font-size: 14px;
padding-bottom: 20rpx;
padding-top: 20rpx;
width: 710rpx;
.navlist {
box-sizing: border-box;
border-radius: 10vw;
margin-top: 20rpx;
margin-right: 3vw;
margin-left: 3vw;
padding: 1.2vw 3vw;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
transition: all linear 0.2s;
}
.active {
background-color: #252744;
border-radius: 10vw;
padding: 1.2vw 3vw;
color: white;
margin-right: -3vw;
margin-left: -3vw;
}
}
</style>
Write Preview
Loading…
Cancel
Save