分类页面提交

.hbuilderx/launch.json

@@ -0,0 +1,16 @@
+{ // launch.json 配置了启动调试时相关设置，configurations下节点名称可为 app-plus/h5/mp-weixin/mp-baidu/mp-alipay/mp-qq/mp-toutiao/mp-360/
+  // launchtype项可配置值为local或remote, local代表前端连本地云函数，remote代表前端连云端云函数
+    "version": "0.0",
+    "configurations": [{
+     	"default" : 
+     	{
+     		"launchtype" : "local"
+     	},
+     	"mp-weixin" : 
+     	{
+     		"launchtype" : "local"
+     	},
+     	"type" : "uniCloud"
+     }
+    ]
+}

src/components/classfyBox/classfyBox.vue

@@ -0,0 +1,121 @@
+<template>
+	<view class="flex">
+		<view class="type">
+			<view class="item" :style="{'background-color':index===typeCurrent?'#fff':'',color:index===typeCurrent?'rgb(89,146,187)':''}" v-for="(item,index) in typeArr" :key="item.code" @tap="chooseType(item.name,item.code,index)">{{item.name}}</view>
+		</view>
+		<view class="detialType">
+			<view style="padding-left: 15rpx;">{{typeName}}</view>
+			<view class="content">
+				<span v-for="item in detialTypeArr" :key="item.id">{{item.type.description}}</span>
+			</view>
+		</view>
+	</view>
+</template>
+
+<script>
+import { mapState } from 'vuex';
+	export default {
+		name:"classfyBox",
+		data() {
+			return {
+				typeCode:'',
+				typeName:'',
+				typeCurrent: 0,
+				typeArr:[
+					{
+						name:'汽车美容',
+						code:'BEAUTY'
+					},
+					{
+						name:'汽车维修',
+						code:'REPAIR'
+					},
+					{
+						name:'汽车保养',
+						code:'MAINTAIN'
+					},
+					{
+						name:'租车服务',
+						code:'LEASE'
+					},
+					{
+						name:'买车卖车',
+						code:'TRADE'
+					},
+					{
+						name:'汽车改装',
+						code:'REFIT'
+					},
+					{
+						name:'其他服务',
+						code:'OTHER'
+					}
+				],
+			};
+		},
+		mounted(){
+			this.init()
+		},
+		computed:{
+			...mapState(['data']),
+			detialTypeArr(){
+				return this.data.categories.filter(i=>i.type.code === this.typeCode)
+			}
+		},
+		methods:{
+			init(){
+				this.typeCode = this.typeArr[0].code
+				this.typeName = this.typeArr[0].name
+			},
+			chooseType(name,code,index){
+				this.typeName = name
+				this.typeCode = code
+				this.typeCurrent = index
+			}
+		},
+	}
+</script>
+
+<style lang="scss">
+.flex{
+	display: flex;
+	flex-wrap: nowrap;
+	height: 100vh;
+}
+.type{
+	height: 100%;
+	width: 200rpx;
+	background-color: rgb(225,225,225);
+	flex: none;
+	.item{
+		height: 50px;
+		line-height: 50px;
+		text-align: center;
+		width: 100%;
+	}
+}
+.detialType{
+	flex: auto;
+	height:100%;
+	padding: 10rpx;
+	box-sizing: border-box;
+	background-color: rgb(239,239,239);
+}
+.content{
+	display: grid;
+	grid-template-columns:repeat(4,125rpx);
+	grid-column-gap: 10rpx;
+	grid-row-gap: 30rpx;
+	justify-content: center;
+	align-content: center;
+	padding-top: 20rpx;
+	span{
+		background-color: rgb(204,204,204);
+		font-size: 24rpx;
+		height: 60rpx;
+		line-height: 60rpx;
+		text-align: center;
+		overflow: hidden;
+	}
+}
+</style>

src/pages.json

@@ -118,7 +118,13 @@
           "style": {
             "navigationBarTitleText": "养车"
           }
-        }
+        },
+		{
+			"path" : "classfication/classfication",
+			"style" :{
+				"navigationBarTitleText": "分类"
+			}
+	    }
       ]
     },
     {

src/pages/business/classfication/classfication.vue

@@ -0,0 +1,19 @@
+<template>
+	<view>
+		<classfyBox></classfyBox>
+	</view>
+</template>
+
+<script>
+	export default {
+		data() {
+			return {
+				
+			};
+		}
+	}
+</script>
+
+<style lang="scss">
+
+</style>

src/pages/tabbar/home/index.vue

@@ -179,13 +179,14 @@ export default {
           ? initData
               .splice(0, 14)
               .concat([
-                {
+                {
+				  id:'all',
                   icon: 'grid-fill',
                   name: '全部',
-                  type: { code: 'ALL', description: '全部' },
+                  type: { code: 'ALL', description: '全部' }
                 },
               ])
-          : initData.push({ icon: 'grid-fill', name: '全部' });
+          : initData.push({ id:'all', icon: 'grid-fill', name: '全部' });
       return result;
     },
   },
@@ -240,7 +241,12 @@ export default {
       });
     },
     // 点击菜单
-    handleMenuClick(item){
+    handleMenuClick(item){
+		if(item.id==='all'){
+			uni.navigateTo({
+				url:'pages/business/classfication/classfication'
+			})
+		}
       uni.showToast({
         title:'跳转至分类页面',
         icon:'none'