商品分类的接口 及数据渲染

api/category/index.js

@@ -14,4 +14,7 @@ export const list = (param, option) => {
 // 获取子分类
 export const sonList = (param, option) => {
   return request.get(api.sonList, param, option)
+}
+export const childrenList = (param, option) => {
+  return request.get('category/childrenList', param, option)
 }

api/newFun.js

@@ -251,4 +251,8 @@ export const editCollector = (param) => {
 // 运费模版
 export const deliveryall = (param) => {
   return request.post('setting/deliveryall', param)
+}
+// 安装包修
+export const maintenance = (param) => {
+  return request.get('/user/maintenance', param)
 }

pages/goods/list.vue

@@ -8,11 +8,11 @@
 					<search :tips="options.search ? options.search : '搜索商品'" @event="handleSearch" />
 				</view>
 			</view>
-			<view class="store-sort">
+			<view class="store-sort" v-if="tabbar.length>0">
 				<view class="goodsType">
 					<scroll-view class="typeList" scroll-x="true">
-						<view v-for="(item,index) in banrdType" :key="index" class="typeItem" @click="onChage(item,1)"
-							:style="{'color':item.id==isBanrdActive?'#F43B21':'#5A5A5A','background':item.id==isBanrdActive?'#FEF6F6':'#F7F8FA','border':item.id==isBanrdActive?'2rpx solid #F22029':'none'}">
+						<view v-for="(item,index) in tabbar" :key="index" class="typeItem" @click="onChage(item,1)"
+							:style="{'color':item.category_id==isBanrdActive?'#F43B21':'#5A5A5A','background':item.category_id==isBanrdActive?'#FEF6F6':'#F7F8FA','border':item.category_id==isBanrdActive?'2rpx solid #F22029':'none'}">
 							{{item.name}}
 						</view>
 					</scroll-view>
@@ -20,7 +20,7 @@
 				<view class="goodsType">
 					<scroll-view class="typeList" scroll-x="true">
 						<view v-for="(item,index) in goodsType" :key="index" class="typeItem" @click="onChage(item,2)"
-							:style="{'color':isActive==item.id?'#F43B21':'#5A5A5A','background':isActive==item.id?'#FEF6F6':'#F7F8FA','border':isActive==item.id?'2rpx solid #F22029':'none'}">
+							:style="{'color':isActive==item.category_id?'#F43B21':'#5A5A5A','background':isActive==item.category_id?'#FEF6F6':'#F7F8FA','border':isActive==item.category_id?'2rpx solid #F22029':'none'}">
 							{{item.name}}
 						</view>
 					</scroll-view>
@@ -143,7 +143,7 @@
 
 	const pageSize = 15
 	const showViewKey = 'GoodsList-ShowView';
-
+	import * as cstegory from '@/api/category'
 	export default {
 		components: {
 			Search
@@ -152,40 +152,12 @@
 		data() {
 			return {
 				searchText: '',
-				banrdType: [{
-					name: '长虹',
-					id: 1,
-				}, {
-					name: '苹果',
-					id: 2,
-				}, {
-					name: '联想',
-					id: 3,
-				}, {
-					name: '小米',
-					id: 4,
-				}, {
-					name: 'TCL',
-					id: 5,
-				}],
+				banrdType: [],
+				keyName1: '',
 				isBanrdActive: '',
 				isActive: '',
-				goodsType: [{
-					name: '80英寸',
-					id: 1,
-				}, {
-					name: '75英寸',
-					id: 2,
-				}, {
-					name: '70英寸',
-					id: 3,
-				}, {
-					name: '65英寸',
-					id: 4,
-				}, {
-					name: '60英寸',
-					id: 5,
-				}, ],
+				goodsType: [],
+				keyName2: '',
 				showView: false, // 列表显示方式 (true列表、false平铺)
 				sortType: 'all', // 排序类型
 				sortPrice: false, // 价格排序 (true高到低 false低到高)
@@ -202,7 +174,8 @@
 					},
 					// 数量要大于4条才显示无更多数据
 					noMoreSize: 4,
-				}
+				},
+				tabbar: []
 			}
 		},
 
@@ -218,16 +191,40 @@
 			this.setShowView()
 			// 设置微信公众号链接分享卡片内容
 			this.setWxofficialShareData()
+			this.getGoodsTypeList(options.categoryId)
 		},
 
 		methods: {
+			getGoodsTypeList(category_id) {
+				const that = this;
+				that.goodsType = []
+				return new Promise((resolve, reject) => {
+					cstegory.childrenList({
+							category_id: category_id
+						})
+						.then(res => {
+							if (res.data.list.length > 0) {
+								that.tabbar = res.data.list;
+								res.data.list.forEach(item => {
+									item.children.forEach(item_1 => {
+										that.goodsType.push(item_1)
+									})
+								});
+							}
+						})
+						.catch(reject)
+				})
+			},
 			onChage(item, type) {
 				if (type == 1) {
-					this.isBanrdActive = item.id
+					this.isBanrdActive = item.category_id;
+					this.keyName1 = item.name
 				}
 				if (type == 2) {
-					this.isActive = item.id
+					this.isActive = item.category_id
+					this.keyName2 = item.name
 				}
+				this.getGoodsList()
 			},
 			/**
 			 * 上拉加载的回调 (页面初始化时也会执行一次)
@@ -257,13 +254,20 @@
 			 */
 			getGoodsList(pageNo = 1) {
 				const app = this
-				console.log(app.options)
+				let keywords = []
+				if (this.keyName1) {
+					keywords.push(this.keyName1)
+				}
+				if (this.keyName2) {
+					keywords.push(this.keyName2)
+				}
 				const param = {
 					sortType: app.sortType,
 					sortPrice: Number(app.sortPrice),
 					categoryId: app.options.categoryId || 0,
 					goodsName: app.options.search || '',
-					page: pageNo
+					page: pageNo,
+					keywords: keywords
 				}
 				return new Promise((resolve, reject) => {
 					GoodsApi.list(param)
@@ -306,7 +310,7 @@
 			 * 商品搜索
 			 */
 			handleSearch() {
-				const searchPageUrl = 'pages/search/index'
+				const searchPageUrl = 'pages/search/index?category_id=' + this.options.categoryId
 				// 判断来源页面
 				let pages = getCurrentPages()
 				if (pages.length > 1 &&
@@ -363,9 +367,10 @@
 
 		// 搜索框
 		.search {
-		width: 100%;
+			width: 100%;
 			padding: 0 30rpx;
-			.search-wrapper{
+
+			.search-wrapper {
 				padding: 0;
 				width: 100%;
 			}

pages/search/index.vue

@@ -78,7 +78,8 @@
 				searchList: [],
 				searchFindList: [],
 				page: 1,
-				goodsList: [],
+				goodsList: [],
+				category_id:0
 			}
 		},
 
@@ -90,7 +91,8 @@
 			}
 
 		},
-		onLoad() {
+		onLoad(op) {
+			this.category_id=op.category_id
 			this.getHot()
 			this.chartsGoodsJingHandle()
 		},
@@ -141,7 +143,7 @@
 					uni.setStorageSync('searchList', this.searchList)
 				}
 				uni.navigateTo({
-					url: '/pages/goods/list?search=' + this.searchValue
+					url: '/pages/goods/list?search=' + this.searchValue+'&categoryId=' + this.category_id
 				})
 			},
 			chartsGoodsJingHandle() {

pages/serve/install.vue

@@ -6,7 +6,7 @@
 		<view class="install_content" v-for="(item,index) in list">
 			<view class="install_name">{{item.name}}</view>
 			<view class="install_bao">
-				<view class="install_xiu" v-for="(child,index) in item.children" :key="index" @click="onLookCord">
+				<view class="install_xiu" v-for="(child,index) in item.tags" :key="index" @click="onLookCord(child.url)">
 					{{child.name}}
 				</view>
 			</view>
@@ -40,59 +40,27 @@
 		data() {
 			return {
 				showQRCodePopup: false,
-				list: [{
-					name: '空调报修',
-					children: [{
-						name: '空调漏水'
-					}, {
-						name: '空调漏水'
-					}, {
-						name: '空调外机维修'
-					}, {
-						name: '空调漏水'
-					}, {
-						name: '空调漏水'
-					}, {
-						name: '空调外机维修'
-					}, {
-						name: '空调漏水'
-					}, {
-						name: '空调漏水'
-					}, {
-						name: '空调外机维修'
-					}]
-				}, {
-					name: '电视报修',
-					children: [{
-						name: '电视黑屏'
-					}, {
-						name: '电视黑屏'
-					}, {
-						name: '电视外机维修'
-					}, {
-						name: '电视黑屏'
-					}, {
-						name: '电视黑屏'
-					}, {
-						name: '电视外机维修'
-					}, {
-						name: '电视黑屏'
-					}, {
-						name: '电视黑屏'
-					}, {
-						name: '电视外机维修'
-					}]
-				}],
+				list: [],
 				qrcode:''
 			};
 		},
-		onLoad(o) {},
+		onLoad(o) {
+			this.getList()
+		},
 		methods: {
-			onLookCord() {
+			onLookCord(url) {
 				this.showQRCodePopup = true
-				let url='https://www.cnblogs.com/majiayin/p/16359337.html'
 				this.qrcode = createQrCodeImg(url, { 'size': 500 });
 			},
+			/**
+			 * 获取列表
+			 */
+			async getList() {
+				let {status, message, data} = await newFunApi.maintenance({});
+				if(status == 200){
+					this.list=data
+				}
+			},
 		}
 	}
 </script>
@@ -169,11 +137,9 @@
 
 			.install_bao {
 				overflow: hidden;
-				padding: 25rpx 30rpx 5rpx 30rpx;
+				padding: 25rpx 20rpx 5rpx 20rpx;
 				display: flex;
-				justify-content: space-around;
 				flex-wrap: wrap;
-
 				.install_xiu {
 					font-family: Alibaba PuHuiTi;
 					font-weight: 400;
@@ -187,6 +153,7 @@
 					text-align: center;
 					line-height: 70rpx;
 					margin-bottom: 20rpx;
+					margin: 0 10rpx;
 				}
 			}
 		}