初始化万家商超用户端仓库
This commit is contained in:
wangxiaowei
476
pages/my/siteClassification/siteClassification.vue
Normal file
476
pages/my/siteClassification/siteClassification.vue
Normal file
@ -0,0 +1,476 @@
|
||||
<template>
|
||||
<view class="page">
|
||||
<!-- <view class="cu-custom bg-white solid-bottom" :style="[{height: CustomBar+'px',paddingTop: StatusBar+'px'}]">
|
||||
<view class="cu-bar bg-white fixed solid-bottom" :style="[{height: CustomBar+'px',paddingTop: StatusBar+'px'}]">
|
||||
<view class="search-form round" @tap="navToSearch" style="height: 64rpx;">
|
||||
<text class="cuIcon-search"><text class="padding-sm placeholderStyle">搜索你想要的商品</text></text>
|
||||
</view>
|
||||
</view>
|
||||
</view> -->
|
||||
|
||||
<view style="height:100%;" class="content solid-top">
|
||||
<!-- 左边tab栏开始 -->
|
||||
<scroll-view class="left" scroll-y>
|
||||
<view style="height: 10rpx;width: 100%;" :style="{background: currentIndex == 0?'#ffffff':''}"></view>
|
||||
<block v-for="(item, index) in lists" :key="index">
|
||||
|
||||
<view class="item text-center" :class="{ active: index == currentIndex}" @click="handleSelect(item, index)">
|
||||
{{ item.title }}
|
||||
<view class="cuIconlujing226"></view>
|
||||
</view>
|
||||
</block>
|
||||
</scroll-view>
|
||||
<!-- 左边tab栏结束 -->
|
||||
<!-- 右边列表开始 -->
|
||||
<view class="right">
|
||||
<scroll-view class="classify-box" scroll-y :scroll-top="scrollTop" :scroll-into-view="scrollViewId"
|
||||
@scroll="onScroll" :scroll-with-animation="true">
|
||||
|
||||
<block >
|
||||
<view class="cateRightBox2" >
|
||||
<view class="cateRightBox">
|
||||
<!-- @click="navToList(item.name,item.aid)" -->
|
||||
<view class="cu-list grid col-3 no-border flex flex-direction" v-if="lists[currentIndex].son_list.length>0">
|
||||
<view @tap="chooseTap(item,i)" style="width: 100%;flex-direction: row;" class="cu-item flex justify-between align-center " v-for="(item, i) in lists[currentIndex].son_list" :key="item.id"
|
||||
>
|
||||
<text class="text-666 text-name">{{ item.title }}</text>
|
||||
<image style="width: 32rpx;height: 32rpx;" :src="item.checked?STATIC_URL+'166.png':STATIC_URL+'165.png'"></image>
|
||||
</view>
|
||||
</view>
|
||||
<fu-empty-ui v-if="lists[currentIndex].son_list.length==0"></fu-empty-ui>
|
||||
</view>
|
||||
</view>
|
||||
</block>
|
||||
</scroll-view>
|
||||
</view>
|
||||
<!-- 右边列表结束 -->
|
||||
</view>
|
||||
<fu-notwork></fu-notwork>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
scrollViewId: '',
|
||||
scrollTop: 0,
|
||||
CustomBar: this.CustomBar, //状态栏高度
|
||||
StatusBar: this.StatusBar, //状态栏高度
|
||||
currentIndex: 0, //选中下标
|
||||
lists: [], //列表
|
||||
banners: [], //轮播图
|
||||
ad: [],// 轮播图广告
|
||||
topList: [],
|
||||
isLeftClick:false,
|
||||
cat_id:'',
|
||||
listsData: [], //商品列表
|
||||
};
|
||||
},
|
||||
// computed: {
|
||||
// level2() {
|
||||
// return (this.lists[this.currentIndex] && this.lists[this.currentIndex].child) || [];
|
||||
// }
|
||||
// },
|
||||
onLoad() {
|
||||
this.loadData();
|
||||
this.setNavigationBarTitle(this.i18n['选择分类'])
|
||||
// #ifdef APP-PLUS
|
||||
var webView = this.$mp.page.$getAppWebview();
|
||||
webView.setTitleNViewButtonStyle(0, {
|
||||
text:this.i18n["确定"],
|
||||
});
|
||||
// #endif
|
||||
// this.getAd();
|
||||
},
|
||||
onShow() {
|
||||
this.setTabBarItem();
|
||||
},
|
||||
onNavigationBarButtonTap() {
|
||||
this.sureBtn()
|
||||
},
|
||||
methods: {
|
||||
getNodesInfo() {
|
||||
this.$nextTick(() => {
|
||||
//小程序没有doucument和window对象(undefined)
|
||||
const query = uni.createSelectorQuery().in(this);
|
||||
query.selectAll(".cateRightBox2").boundingClientRect().exec(res => {
|
||||
let nodes = res[0];
|
||||
let arr = [];
|
||||
nodes.map(item => {
|
||||
arr.push(item.top);
|
||||
})
|
||||
this.topList = arr;
|
||||
})
|
||||
});
|
||||
},
|
||||
onScroll(e) {
|
||||
if(this.isLeftClick){
|
||||
this.isLeftClick=false;
|
||||
return;
|
||||
}
|
||||
// let tempTop = e.detail.scrollTop //scroll期间赋值
|
||||
let tempTop = e.target.scrollTop;
|
||||
for (let i = 0; i < this.topList.length; i++) {
|
||||
let h1 = this.topList[i];
|
||||
let h2 = this.topList[i + 1];
|
||||
if (tempTop > h1 && tempTop < h2) {
|
||||
this.currentIndex = i;
|
||||
}
|
||||
}
|
||||
},
|
||||
// /**
|
||||
// * @event
|
||||
// * @description 广告轮播图
|
||||
// * @return {Boolean}
|
||||
// * */
|
||||
// getAd() {
|
||||
// this.$api
|
||||
// .post(global.apiUrls.postAdvert, {
|
||||
// typeid: 10
|
||||
// })
|
||||
// .then(res => {
|
||||
// console.log(res, '广告');
|
||||
// if (res.data.code == 1) {
|
||||
// this.ad = res.data.data;
|
||||
// }
|
||||
// });
|
||||
// },
|
||||
/**
|
||||
* @event
|
||||
* @description tab切换
|
||||
* @param {Number} item -当前选中数据 //暂时没用
|
||||
* @param {Number} index - 选中下标
|
||||
* @return {Boolean}
|
||||
* */
|
||||
handleSelect(item, index) {
|
||||
console.log(111111111)
|
||||
if(this.currentIndex != index){
|
||||
let list=this.lists;
|
||||
list.forEach((item,i)=>{
|
||||
if(item.son_list.length>0){
|
||||
item.son_list.forEach(res=>{
|
||||
res.checked=false
|
||||
})
|
||||
}
|
||||
})
|
||||
this.lists = list;
|
||||
console.log(this.lists)
|
||||
}
|
||||
this.scrollViewId = "po" + index;
|
||||
this.currentIndex = index;
|
||||
this.isLeftClick=true;
|
||||
this.cat_id=item.aid;
|
||||
|
||||
|
||||
// this.getServiceList()
|
||||
this.$nextTick(() => {
|
||||
this.scrollTop = 0
|
||||
});
|
||||
|
||||
},
|
||||
chooseTap(item,index){
|
||||
let list = this.lists;
|
||||
list = list.map((item,i) => {
|
||||
if(this.currentIndex==i){
|
||||
if(item.son_list.length>0){
|
||||
item.son_list.forEach((res,l)=>{
|
||||
if(index==l){
|
||||
res.checked=true
|
||||
}else{
|
||||
res.checked=false
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
return item;
|
||||
})
|
||||
this.lists = list
|
||||
this.sureBtn()
|
||||
},
|
||||
sureBtn(){
|
||||
// let proficiency=(this.lists.map((item,index)=>(item.checked ? `${item.id}` : '')).filter(item => item != '')).join(',');
|
||||
let id=(this.lists.map((item,index)=>item.son_list.map((res,i)=>(res.checked ? `${res.aid}` : '')).filter(res => res != '')).filter(item => item != '')).join(',')
|
||||
let name=(this.lists.map((item,index)=>item.son_list.map((res,i)=>(res.checked ? `${res.title}` : '')).filter(res => res != '')).filter(item => item != '')).join(',')
|
||||
console.log(id)
|
||||
console.log(name)
|
||||
if(!id) return this.$message.info('请选择分类');
|
||||
uni.$emit('CHOOSEMENU',{
|
||||
id:id,
|
||||
name:name
|
||||
})
|
||||
setTimeout(function(){
|
||||
uni.navigateBack({})
|
||||
},300)
|
||||
},
|
||||
/**
|
||||
* @event
|
||||
* @description 获取分类
|
||||
* @return {Boolean}
|
||||
* */
|
||||
loadData() {
|
||||
this.$api.post(global.apiUrls.shopCategorys).then(res => {
|
||||
console.log(res);
|
||||
if (res.data.code == 1) {
|
||||
let list = res.data.data;
|
||||
// 判断没有二级分类删除此分类
|
||||
// list.forEach((item, index) => {
|
||||
// if (!item.child) {
|
||||
// list.splice(index, 1);
|
||||
// }
|
||||
// // 判断没有三级分类删除此分类
|
||||
// if (this.filterEmpty(item.child)) {
|
||||
// list.splice(index, 1);
|
||||
// }
|
||||
// });
|
||||
// this.cat_id=list[0].id
|
||||
list.forEach(item=>{
|
||||
if(item.son_list.length>0){
|
||||
item.son_list.forEach(res=>{
|
||||
res.checked=false
|
||||
})
|
||||
}
|
||||
})
|
||||
this.lists = list;
|
||||
console.log(this.lists)
|
||||
// this.getServiceList()
|
||||
// this.getNodesInfo();
|
||||
} else {
|
||||
this.$message.error(res.data.msg);
|
||||
}
|
||||
});
|
||||
},
|
||||
/**
|
||||
* @getServiceList 获取分类下商品
|
||||
*/
|
||||
getServiceList(){
|
||||
this.listsData=[]
|
||||
this.$api.post(global.apiUrls.getServiceList,{
|
||||
cid:this.cat_id,
|
||||
page:1,
|
||||
pageSize:200
|
||||
}).then(res=>{
|
||||
console.log(res)
|
||||
if(res.data.code==1){
|
||||
this.listsData=res.data.data.data
|
||||
}
|
||||
})
|
||||
},
|
||||
|
||||
|
||||
|
||||
/**
|
||||
* @description 判断是否有子分类
|
||||
*/
|
||||
filterEmpty(arr) {
|
||||
if (!arr) {
|
||||
return false;
|
||||
}
|
||||
let num = 0;
|
||||
arr.forEach(item => {
|
||||
if (!item.child) {
|
||||
num++;
|
||||
}
|
||||
});
|
||||
if (num == arr.length) {
|
||||
return true;
|
||||
} else {
|
||||
return false;
|
||||
}
|
||||
},
|
||||
/**
|
||||
* @event
|
||||
* @description 去分类列表页
|
||||
* @return {Boolean}
|
||||
* */
|
||||
navToList(name,cid) {
|
||||
this.$urouter.navigateTo({
|
||||
url: '/pages/goods/goodsdetail/goods-detail/index',
|
||||
params: {
|
||||
goods_id: cid,
|
||||
// keyWords:name
|
||||
}
|
||||
});
|
||||
},
|
||||
/**
|
||||
* @event
|
||||
* @description 去搜索页面
|
||||
* @return {Boolean}
|
||||
* */
|
||||
navToSearch() {
|
||||
this.$urouter.navigateTo('/pages/index/search/search/index');
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.page {
|
||||
height: 100vh;
|
||||
background: #f8f8f8;
|
||||
overflow: hidden;
|
||||
|
||||
.content {
|
||||
display: flex;
|
||||
|
||||
.left {
|
||||
width: 168rpx;
|
||||
min-width: 168rpx;
|
||||
height: 100%;
|
||||
.item {
|
||||
width: 100%;
|
||||
height: 100rpx;
|
||||
line-height: 100rpx;
|
||||
transition: all 0.2s;
|
||||
font-size: 28rpx;
|
||||
color: #999;
|
||||
}
|
||||
|
||||
.item.active {
|
||||
font-size: 28rpx;
|
||||
color: #FF9300;
|
||||
font-weight: bold;
|
||||
background: #FFFFFF;
|
||||
position: relative;
|
||||
&::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
left: 0;
|
||||
width: 6rpx;
|
||||
height: 24rpx;
|
||||
float: left;
|
||||
background: #FF9300;
|
||||
border-radius: 4rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.right {
|
||||
flex: 1;
|
||||
/* background-color: #FFFFFF; */
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.right {
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
.one-ad {
|
||||
/* padding: 0 12px; */
|
||||
height: 164rpx;
|
||||
/* padding: 10rpx 20rpx 10rpx 20rpx; */
|
||||
border-radius: 0rpx;
|
||||
margin: 24rpx 0 32rpx;
|
||||
|
||||
.ad-img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border-radius: 0rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.swiper-box {
|
||||
padding: 24rpx;
|
||||
|
||||
.swiper {
|
||||
height: 180rpx;
|
||||
|
||||
.swiper-item {
|
||||
.swiper-item-img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
||||
image {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.classify-box {
|
||||
height: 100%;
|
||||
padding: 0 12rpx;
|
||||
background: #fff;
|
||||
.block-120 {
|
||||
width: 146rpx;
|
||||
height: 146rpx;
|
||||
|
||||
image {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.cateRightBox {
|
||||
overflow: hidden;
|
||||
background: #fff;
|
||||
// margin-bottom: 20rpx;
|
||||
// border-radius: 16rpx;
|
||||
padding: 0 20rpx;
|
||||
|
||||
/* &:nth-child(1) {
|
||||
border-radius: 0;
|
||||
} */
|
||||
}
|
||||
|
||||
.cateRightBox2:last-child {
|
||||
padding-bottom: 20rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.cu-bar .search-form {
|
||||
line-height: 52rpx;
|
||||
height: 52rpx;
|
||||
}
|
||||
|
||||
.text-df {
|
||||
justify-content: left;
|
||||
align-items: left;
|
||||
|
||||
view {
|
||||
width: 120rpx;
|
||||
height: 3rpx;
|
||||
background: #ccc;
|
||||
margin: 0 15rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.placeholderStyle {
|
||||
font-size: 26rpx;
|
||||
color: grey;
|
||||
}
|
||||
|
||||
.block-24 {
|
||||
width: 24rpx;
|
||||
height: 24rpx;
|
||||
font-size: 24rpx;
|
||||
}
|
||||
|
||||
.fu-cate-block {
|
||||
justify-content: space-between !important;
|
||||
padding-top: 32rpx;
|
||||
font-size: 28rpx;
|
||||
padding-left: 24rpx;
|
||||
}
|
||||
|
||||
.text-name {
|
||||
font-size: 24rpx;
|
||||
}
|
||||
.cu-list.grid.no-border>.cu-item{
|
||||
padding-top: 24rpx;
|
||||
padding-bottom: 0!important;
|
||||
}
|
||||
.cu-list.grid>.cu-item uni-text{
|
||||
margin-top: 16rpx;
|
||||
}
|
||||
.cu-list.grid.no-border{
|
||||
padding: 20rpx 0;
|
||||
}
|
||||
</style>
|
||||
100
pages/my/siteClassification/siteClassification1.vue
Normal file
100
pages/my/siteClassification/siteClassification1.vue
Normal file
@ -0,0 +1,100 @@
|
||||
<template>
|
||||
<view class="page" :style="themeColor">
|
||||
<view class="flex benben-position-layout flex flex-wrap align-center siteClassification_flex_0" :style="{height:(88+StatusBarRpx)+'rpx',paddingTop:StatusBarRpx+'rpx'}">
|
||||
<view class='flex flex-wrap align-center justify-between flex-sub siteClassification_fd0_0' >
|
||||
<view class='flex flex-wrap align-center siteClassification_fd0_0_c0' @tap.stop="handleJumpDiy" data-type="back" data-url="1" >
|
||||
<text class='fu-iconfont2 siteClassification_fd0_0_c0_c0' ></text>
|
||||
</view>
|
||||
<view class='flex flex-wrap align-center' >
|
||||
<text class='siteClassification_fd0_0_c1_c0' >店铺分类</text>
|
||||
</view>
|
||||
<view class='flex flex-wrap align-center justify-end siteClassification_fd0_0_c2' @tap.stop="handleJumpDiy" data-type="back" data-url="1" >
|
||||
<text class='siteClassification_fd0_0_c2_c0' >确定</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
</view>
|
||||
<view :style="{height: (88+StatusBarRpx)+'rpx'}" ></view>
|
||||
<benben-goods-classify :top='88' >
|
||||
</benben-goods-classify>
|
||||
|
||||
|
||||
</view>
|
||||
</template>
|
||||
<script>
|
||||
|
||||
export default {
|
||||
components:{},
|
||||
|
||||
|
||||
data(){
|
||||
return {};
|
||||
},
|
||||
computed:{
|
||||
themeColor() {
|
||||
return this.$store.getters.themeColor
|
||||
},
|
||||
|
||||
},
|
||||
watch:{},
|
||||
onLoad(options){
|
||||
|
||||
},
|
||||
onUnload() {
|
||||
|
||||
},
|
||||
onReady(){
|
||||
|
||||
},
|
||||
onShow(){
|
||||
|
||||
},
|
||||
onHide(){
|
||||
|
||||
},
|
||||
onResize(){
|
||||
|
||||
},
|
||||
onPullDownRefresh(){
|
||||
|
||||
},
|
||||
onReachBottom(e){
|
||||
|
||||
},
|
||||
onPageScroll(e){
|
||||
|
||||
},
|
||||
methods:{
|
||||
|
||||
}
|
||||
};
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.page{
|
||||
width: 100vw;
|
||||
overflow-x: hidden;
|
||||
min-height: calc(100vh - var(--window-bottom));
|
||||
background:#F8F8F8;background-size: 100% auto !important;
|
||||
}
|
||||
.siteClassification_flex_0{
|
||||
background:#fff;width:750rpx;height:88rpx;overflow:hidden;z-index:10;top:0rpx;background-size:100% auto !important;
|
||||
}
|
||||
.siteClassification_fd0_0_c2_c0{
|
||||
line-height:35rpx;font-size:32rpx;font-weight:400;color:#000000;
|
||||
}
|
||||
.siteClassification_fd0_0_c2{
|
||||
width:150rpx;
|
||||
}
|
||||
.siteClassification_fd0_0_c1_c0{
|
||||
font-size:36rpx;font-weight:500;color:#333;line-height:88rpx;
|
||||
}
|
||||
.siteClassification_fd0_0_c0_c0{
|
||||
font-size:36rpx;font-weight:500;color:#333;line-height:36rpx;
|
||||
}
|
||||
.siteClassification_fd0_0_c0{
|
||||
width:150rpx;
|
||||
}
|
||||
.siteClassification_fd0_0{
|
||||
margin:0rpx 32rpx 0rpx 32rpx;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user