You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
133 lines
4.0 KiB
133 lines
4.0 KiB
<!-- 分类 -->
|
|
<template>
|
|
<view class="category-box">
|
|
<view class="navbar">
|
|
<view>
|
|
<!-- 状态栏小程序撑起高度 -->
|
|
<view :style="{height:statusBarHeight+'px'}"></view>
|
|
<view class="searchContainer" @tap="$Router.push('/pages/public/search')">
|
|
<u-search :bg-color="!isDrop?'#fff':'transparent'" style="width: 450rpx;position: relative;z-index:999" border-color="#f2f2f2" placeholder="水果鲜花" :show-action="false" shape="round" :disabled="true" v-model="value"></u-search>
|
|
</view>
|
|
</view>
|
|
<!-- 需要添加占位符高度 状态栏高度+导航栏高度（否则下面tab会塌陷）-->
|
|
<!-- <view :style="{height: navBarHeight+'px'}"></view> -->
|
|
</view>
|
|
|
|
|
|
<!-- 三级分类 -->
|
|
<three-catgory :categoryStyleId="categoryStyleId" v-if="categoryType === 4"></three-catgory>
|
|
<!-- 二级分类 -->
|
|
<two-catgory :categoryStyleId="categoryStyleId" @isDrop="isDropHandle" v-if="categoryType === 3"></two-catgory>
|
|
<!-- 一级分类-->
|
|
<one-catgory :categoryStyleId="categoryStyleId" v-if="categoryType === 2"></one-catgory>
|
|
<!--直接购买，点餐 -->
|
|
<takeout-catgory :categoryStyleId="categoryStyleId" v-if="categoryType === 1"></takeout-catgory>
|
|
<!-- 登录提示 -->
|
|
<shopro-auth-modal v-if="authType"></shopro-auth-modal>
|
|
<!-- <shopro-tabbar></shopro-tabbar> -->
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import takeoutCatgory from './category/takeout-catgory.vue';
|
|
import threeCatgory from './category/three-catgory.vue';
|
|
import twoCatgory from './category/two-catgory.vue';
|
|
import oneCatgory from './category/one-catgory.vue';
|
|
import { mapMutations, mapActions, mapState, mapGetters } from 'vuex';
|
|
export default {
|
|
components: {
|
|
takeoutCatgory,
|
|
threeCatgory,
|
|
twoCatgory,
|
|
oneCatgory
|
|
},
|
|
data() {
|
|
return {
|
|
isDrop:false,
|
|
value:'',
|
|
categoryType: 0, //1:快速购买,2:一级分类，3:二级分类，4:三级分类
|
|
categoryStyleId: 0, //分类Id
|
|
statusBarHeight: 20,/* 状态栏高度 */
|
|
navBarHeight: 45,/* 导航栏高度 */
|
|
windowWidth: 375,/* 窗口宽度 */
|
|
/* 设定状态栏默认高度 */
|
|
};
|
|
},
|
|
computed: {
|
|
...mapGetters(['authType'])
|
|
},
|
|
onLoad() {
|
|
this.getCategory();
|
|
// 获取手机系统信息
|
|
const info = uni.getSystemInfoSync()
|
|
// 设置状态栏高度（H5顶部无状态栏小程序有状态栏需要撑起高度）
|
|
this.statusBarHeight = info.statusBarHeight
|
|
this.windowWidth = info.windowWidth
|
|
// 除了h5 app mp-alipay的情况下执行
|
|
// #ifndef H5 || APP-PLUS || MP-ALIPAY
|
|
// 获取胶囊的位置
|
|
const menuButtonInfo = uni.getMenuButtonBoundingClientRect()
|
|
console.log(menuButtonInfo);
|
|
// (胶囊底部高度 - 状态栏的高度) + (胶囊顶部高度 - 状态栏内的高度) = 导航栏的高度
|
|
this.navBarHeight = (menuButtonInfo.bottom - info.statusBarHeight) + (menuButtonInfo.top - info.statusBarHeight)
|
|
this.windowWidth = menuButtonInfo.left
|
|
// #endif
|
|
},
|
|
methods: {
|
|
/**
|
|
* 获取分类数据
|
|
* type4:三级分类， type3:二级分类 ,type2:一级分类,type1:快速购买
|
|
*/
|
|
getCategory() {
|
|
this.$http('category.info', {
|
|
id: this.$Route.query.id ? this.$Route.query.id : 0
|
|
}).then(res => {
|
|
if (res.code === 1) {
|
|
if (res.data?.type) {
|
|
this.categoryType = Number(res.data.type);
|
|
this.categoryStyleId = Number(res.data.id);
|
|
uni.setNavigationBarTitle({
|
|
title: res.data?.name
|
|
});
|
|
}
|
|
}
|
|
});
|
|
},
|
|
isDropHandle(val){
|
|
this.isDrop = val
|
|
console.log(val,"6767")
|
|
}
|
|
}
|
|
};
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
.category-box {
|
|
height: 100%;
|
|
flex: 1;
|
|
overflow: hidden;
|
|
}
|
|
.searchContainer{
|
|
position: relative;
|
|
margin-top: 10rpx;
|
|
margin-bottom:10rpx;
|
|
// height: 100rpx;
|
|
display: flex;
|
|
align-items: center;
|
|
padding-left:24rpx;
|
|
// .searchBtn{
|
|
// height:90%;
|
|
// position:absolute;
|
|
// padding:0 20rpx;
|
|
// right:20rpx;
|
|
// top:5%;
|
|
// color:#ffffff;
|
|
// font-size:26rpx;
|
|
// z-index:99;
|
|
// background-color: #17C161;
|
|
// border-radius:55px;
|
|
// display:flex;
|
|
// align-items: center;
|
|
// }
|
|
}
|
|
</style>
|
|
|