From 9ec7266c022e4d8b0266cde9d9d3010a34e01f2d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=BC=A0=E8=89=BA?=
 <9855095+pigpigee@user.noreply.gitee.com>
Date: Sat, 12 Feb 2022 08:25:22 +0800
Subject: [PATCH] day02

---
 components/category/category.vue  |  61 +++++++++++++
 components/category/category1.vue |  61 +++++++++++++
 components/category/category2.vue |  61 +++++++++++++
 components/category/category3.vue |  61 +++++++++++++
 components/category/category4.vue |  61 +++++++++++++
 pages.json                        |  14 ++-
 pages/index/index.vue             | 147 ++++++++++++++++--------------
 pages/search/search.vue           |  62 +++++++++++++
 utils/config.js                   |   3 +-
 utils/request.js                  |   5 +-
 10 files changed, 460 insertions(+), 76 deletions(-)
 create mode 100644 components/category/category.vue
 create mode 100644 components/category/category1.vue
 create mode 100644 components/category/category2.vue
 create mode 100644 components/category/category3.vue
 create mode 100644 components/category/category4.vue
 create mode 100644 pages/search/search.vue

diff --git a/components/category/category.vue b/components/category/category.vue
new file mode 100644
index 0000000..4735af2
--- /dev/null
+++ b/components/category/category.vue
@@ -0,0 +1,61 @@
+<template>
+	<view class="phone">
+		<h1>手机</h1>
+		<view class="imgBox">
+			<image src="http://106.15.179.105:3000/public/imgs/phone/Redmi-Note8-pro.png" mode=""></image>
+			<h3>Redmi Note8 Pro</h3>
+			<p>6400万全场景四摄</p>
+			<h4>9999元</h4>
+		</view>
+		<view class="imgBox">
+			<image src="http://106.15.179.105:3000/public/imgs/phone/Redmi-k30.png" mode=""></image>
+			<h3>Redmi K30</h3>
+			<p>120Hz流速屏，全速热爱</p>
+			<h4>1599元</h4>
+		</view>
+		<view class="imgBox">
+			<image src="http://106.15.179.105:3000/public/imgs/phone/Redmi-Note8.png" mode=""></image>
+			<h3>Redmi-Note8.png</h3>
+			<p>千元4800万四摄</p>
+			<h4>999元</h4>
+		</view>
+		<view class="imgBox">
+			<image src="http://106.15.179.105:3000/public/imgs/phone/Redmi-8A.png" mode=""></image>
+			<h3>Redmi-8A</h3>
+			<p>5000mAh超长续航</p>
+			<h4>599元</h4>
+		</view>
+	</view>
+</template>
+
+<script>
+	
+	export default {
+	  name: 'category'
+	}
+</script>
+
+<style lang="stylus">
+	.phone
+		width 100%
+		h1
+			margin-top 20upx
+			border 5upx solid #EEE
+			text-align center
+			color pink
+		.imgBox
+			width 50%
+			text-align center
+			float left
+			box-sizing border-box
+			border 1upx solid #eee
+			image
+				width 100%
+			h3
+				font-size 24upx
+				color orange
+			p
+				font-size 26upx
+			h4
+				color red
+</style>
diff --git a/components/category/category1.vue b/components/category/category1.vue
new file mode 100644
index 0000000..17481a1
--- /dev/null
+++ b/components/category/category1.vue
@@ -0,0 +1,61 @@
+<template>
+	<view class="phone">
+		<h1>智能</h1>
+		<view class="imgBox">
+			<image src="http://106.15.179.105:3000/public/imgs/appliance/AirCondition-V1C1.png" mode=""></image>
+			<h3>米家互联网空调C1(一级能效)</h3>
+			<p>变频节能省电，自清洁</p>
+			<h4>2599元</h4>
+		</view>
+		<view class="imgBox">
+			<image src="	http://106.15.179.105:3000/public/imgs/accessory/charger-30w.png" mode=""></image>
+			<h3>小米USB充电器30W快充版（1A1C）</h3>
+			<p>多一种接口，多一种选择</p>
+			<h4>59元</h4>
+		</view>
+		<view class="imgBox">
+			<image src="http://106.15.179.105:3000/public/imgs/accessory/charger-18w.png" mode=""></image>
+			<h3>小米USB充电器快充</h3>
+			<p>安卓\苹果设备均可使用</p>
+			<h4>29元</h4>
+		</view>
+		<view class="imgBox">
+			<image src="	http://106.15.179.105:3000/public/imgs/accessory/charger-10000mAh.png" mode=""></image>
+			<h3>小米无线充电宝青春版10000mAh</h3>
+			<p>能量满满，无线有线都能充</p>
+			<h4>129元</h4>
+		</view>
+	</view>
+</template>
+
+<script>
+	
+	export default {
+	  name: 'category1'
+	}
+</script>
+
+<style lang="stylus">
+	.phone
+		width 100%
+		h1
+			margin-top 20upx
+			border 5upx solid #EEE
+			text-align center
+			color #0c514f
+		.imgBox
+			width 50%
+			text-align center
+			float left
+			box-sizing border-box
+			border 1upx solid #eee
+			image
+				width 100%
+			h3
+				font-size 24upx
+				color orange
+			p
+				font-size 26upx
+			h4
+				color red
+</style>
diff --git a/components/category/category2.vue b/components/category/category2.vue
new file mode 100644
index 0000000..920c115
--- /dev/null
+++ b/components/category/category2.vue
@@ -0,0 +1,61 @@
+<template>
+	<view class="phone">
+		<h1>家电</h1>
+		<view class="imgBox">
+			<image src="http://106.15.179.105:3000/public/imgs/appliance/AirCondition-F3W1.png" mode=""></image>
+			<h3>米家空调</h3>
+			<p>出众静音，快速制冷热</p>
+			<h4>1699元</h4>
+		</view>
+		<view class="imgBox">
+			<image src="http://106.15.179.105:3000/public/imgs/phone/Redmi-Note8-pro.png" mode=""></image>
+			<h3>Redmi Note8 Pro</h3>
+			<p>6400万全场景四摄</p>
+			<h4>9999</h4>
+		</view>
+		<view class="imgBox">
+			<image src="http://106.15.179.105:3000/public/imgs/appliance/Washer-Pro-10.png" mode=""></image>
+			<h3>米家互联网洗烘一体机 Pro 10kg</h3>
+			<p>智能洗烘，省心省力</p>
+			<h4>2999元</h4>
+		</view>
+		<view class="imgBox">
+			<image src="	http://106.15.179.105:3000/public/imgs/accessory/protectingShell-RedMi-K20&pro.png" mode=""></image>
+			<h3>Redmi K20/ K20 Pro 怪力魔王保护壳</h3>
+			<p>怪力魔王专属定制</p>
+			<h4>39元</h4>
+		</view>
+	</view>
+</template>
+
+<script>
+	
+	export default {
+	  name: 'category2'
+	}
+</script>
+
+<style lang="stylus">
+	.phone
+		width 100%
+		h1
+			margin-top 20upx
+			border 5upx solid #EEE
+			text-align center
+			color #734cba
+		.imgBox
+			width 50%
+			text-align center
+			float left
+			box-sizing border-box
+			border 1upx solid #eee
+			image
+				width 100%
+			h3
+				font-size 24upx
+				color orange
+			p
+				font-size 26upx
+			h4
+				color red
+</style>
diff --git a/components/category/category3.vue b/components/category/category3.vue
new file mode 100644
index 0000000..ba61b81
--- /dev/null
+++ b/components/category/category3.vue
@@ -0,0 +1,61 @@
+<template>
+	<view class="phone">
+		<h1>电视</h1>
+		<view class="imgBox">
+			<image src="http://106.15.179.105:3000/public/imgs/appliance/MiTv-4A-32.png" mode=""></image>
+			<h3>小米电视4A 32英寸</h3>
+			<p>人工智能系统，高清液晶屏</p>
+			<h4>799元</h4>
+		</view>
+		<view class="imgBox">
+			<image src="http://106.15.179.105:3000/public/imgs/appliance/MiTv-E55A.png" mode=""></image>
+			<h3>小米全面屏电视E55A</h3>
+			<p>全面屏设计，人工智能语音</p>
+			<h4>1899元</h4>
+		</view>
+		<view class="imgBox">
+			<image src="http://106.15.179.105:3000/public/imgs/appliance/MiTv-E65A.png" mode=""></image>
+			<h3>小米全面屏电视E65A</h3>
+			<p>全面屏设计，人工智能语音</p>
+			<h4>2799元</h4>
+		</view>
+		<view class="imgBox">
+			<image src="http://106.15.179.105:3000/public/imgs/appliance/MiTv-4X-43.png" mode=""></image>
+			<h3>小米电视4X 43英寸</h3>
+			<p>FHD全高清屏，人工智能语音</p>
+			<h4>1299元</h4>
+		</view>
+	</view>
+</template>
+
+<script>
+	
+	export default {
+	  name: 'category3'
+	}
+</script>
+
+<style lang="stylus">
+	.phone
+		width 100%
+		h1
+			margin-top 20upx
+			border 5upx solid #EEE
+			text-align center
+			color #b72ea9
+		.imgBox
+			width 50%
+			text-align center
+			float left
+			box-sizing border-box
+			border 1upx solid #eee
+			image
+				width 100%
+			h3
+				font-size 24upx
+				color orange
+			p
+				font-size 26upx
+			h4
+				color red
+</style>
diff --git a/components/category/category4.vue b/components/category/category4.vue
new file mode 100644
index 0000000..f46bfb6
--- /dev/null
+++ b/components/category/category4.vue
@@ -0,0 +1,61 @@
+<template>
+	<view class="phone">
+		<h1>笔记本</h1>
+		<view class="imgBox">
+			<image src="http://106.15.179.105:3000/public/imgs/accessory/charger-60w.png" mode=""></image>
+			<h3>小米USB充电器60W快充版（6口）</h3>
+			<p>6口输出，USB-C输出接口</p>
+			<h4>129元</h4>
+		</view>
+		<view class="imgBox">
+			<image src="http://106.15.179.105:3000/public/imgs/accessory/charger-car.png" mode=""></image>
+			<h3>小米车载充电器快充版(37W)</h3>
+			<p>双口快充，车载充电更安全</p>
+			<h4>49元</h4>
+		</view>
+		<view class="imgBox">
+			<image src="http://106.15.179.105:3000/public/imgs/accessory/charger-car-37w.png" mode=""></image>
+			<h3>小米车载充电器快充版</h3>
+			<p>让爱车成为移动充电站</p>
+			<h4>69元</h4>
+		</view>
+		<view class="imgBox">
+			<image src="http://106.15.179.105:3000/public/imgs/accessory/protectingMen-Mi-CC9.png" mode=""></image>
+			<h3>小米CC9&小米CC9美图定制版 标准高透贴膜</h3>
+			<p>高清透亮，耐磨性强</p>
+			<h4>19元</h4>
+		</view>
+	</view>
+</template>
+
+<script>
+	
+	export default {
+	  name: 'category4'
+	}
+</script>
+
+<style lang="stylus">
+	.phone
+		width 100%
+		h1
+			margin-top 20upx
+			border 5upx solid #EEE
+			text-align center
+			color #50d8fd
+		.imgBox
+			width 50%
+			text-align center
+			float left
+			box-sizing border-box
+			border 1upx solid #eee
+			image
+				width 100%
+			h3
+				font-size 24upx
+				color orange
+			p
+				font-size 26upx
+			h4
+				color red
+</style>
diff --git a/pages.json b/pages.json
index dbb18eb..2479850 100644
--- a/pages.json
+++ b/pages.json
@@ -10,18 +10,26 @@
 				"enablePullDownRefresh": false
 			}
 
-		}, {
+		}, 
+		{
 			"path": "pages/index/index",
 			"style": {
 				"navigationBarTitleText": "uni-app"
 			}
-		}, {
+		}, 
+		{
 			"path": "pages/shopcar/shopcar",
 			"style": {
 				"navigationBarTitleText": "",
 				"enablePullDownRefresh": false
 			}
-
+		},
+		{
+			"path": "pages/search/search",
+			"style": {
+				"navigationBarTitleText": "",
+				"enablePullDownRefresh": false
+			}
 		}
 	],
 	"globalStyle": {
diff --git a/pages/index/index.vue b/pages/index/index.vue
index 528be63..17beec6 100644
--- a/pages/index/index.vue
+++ b/pages/index/index.vue
@@ -5,64 +5,54 @@
 			<image src="../../static/image/logo.png"></image>
 			<view class="searchInput">
 				<i class="iconfont icon-sousuo">🔎</i>
-				<input type="text" placeholder="搜索商品" placeholder-class="placeholder" />
+				<input type="text" placeholder="搜索商品" placeholder-class="placeholder" 
+						@click="toSearch"/>
 			</view>
-			<button type="default">登录</button>
+			<!-- <button type="default">登录</button> -->
+			<u-icon name="fingerprint" color="red" size="30" labelPos="right" label="个人中心"></u-icon>
 		</view>
 		<!--导航-->
-		<scroll-view scroll-x enable-flex class="navScroll">
-			<view class="navItem active">推荐</view>
-			<view class="navItem">智能</view>
-			<view class="navItem">电视</view>
-			<view class="navItem">家电</view>
-			<view class="navItem">笔记本</view>
-		</scroll-view>
+		<u-tabs :list="list1" scrollable="false" lineWidth="80" @click="changeCurrent"></u-tabs>
 		<!-- 轮播图 --> 
 		<swiper class="banner" 	
 		          indicator-dots 	
 		          autoplay 	
 		          indicator-active-color="ivory"
 		          circular
-		          interval="100">
-		    <swiper-item>
-		      <image src='http://106.15.179.105:3000/public/imgs/cms_4.jpg'></image>
+		          interval="5000">
+		    <swiper-item v-for="(item,index) in banners" :key="index">
+		      <image :src="'http://106.15.179.105:3000/'+item.imgPath"></image>
 		    </swiper-item>
-			<swiper-item>
-			    <image src='http://106.15.179.105:3000/public/imgs/cms_3.jpg'></image>
-			</swiper-item>
-			<swiper-item>
-			    <image src='http://106.15.179.105:3000/public/imgs/cms_2.jpg'></image>
-			</swiper-item>
 		</swiper>
 		<!-- 轮播图下菜单 -->
 		<view class="navContainer">
 		      <view class="navItem">
 		        <u-icon label="米金商城" 
-						size="40" 
+						size="40" color="red"
 						name="shopping-cart"
 						labelPos="bottom"></u-icon>
 		      </view>
 		      <view class="navItem">
 		        <u-icon label="小米众筹" 
-						size="40" 
+						size="40" color="orange"
 						name="man-add"
 						labelPos="bottom"></u-icon>
 		      </view>
 		      <view class="navItem">
 		        <u-icon label="手机" 
-						size="40" 
+						size="40" color="yellow"
 						name="phone"
 						labelPos="bottom"></u-icon>
 		      </view>
 		      <view class="navItem">
 		        <u-icon label="以旧换新" 
-						size="40" 
+						size="40" color="green"
 						name="hourglass"
 						labelPos="bottom"></u-icon>
 		      </view>
 		      <view class="navItem">
 		        <u-icon label="小米上心" 
-						size="40" 
+						size="40" color="blue"
 						name="car"
 						labelPos="bottom"></u-icon>
 		      </view>
@@ -70,50 +60,41 @@
 		<view class="navContainer">
 		    <view class="navItem">
 		        <u-icon label="智能" 
-						size="40" 
+						size="40" color="pink"
 						name="level"
 						labelPos="bottom"></u-icon>
 		      </view>
 		    <view class="navItem">
 		        <u-icon label="笔记本热卖" 
-						size="40" 
+						size="40" color="black"
 						name="bag-fill"
 						labelPos="bottom"></u-icon>
 		      </view>
 		    <view class="navItem">
 		        <u-icon label="电视热卖" 
-						size="40" 
+						size="40" color="yellowgreen"
 						name="bag-fill"
 						labelPos="bottom"></u-icon>
 		      </view>
 		    <view class="navItem">
 		        <u-icon label="洗衣机热卖" 
-						size="40" 
+						size="40" color="#f9273f"
 						name="bag-fill"
 						labelPos="bottom"></u-icon>
 		      </view>
 		    <view class="navItem">
 		        <u-icon label="米粉卡" 
-						size="40" 
+						size="40" color="#512766"
 						name="coupon"
 						labelPos="bottom"></u-icon>
 		    </view>
 		</view>
-		<!-- 图 -->
-		<view class="phone">
-			<h1>手机</h1>
-			<image src="http://106.15.179.105:3000/public/imgs/phone/Redmi-k30.png" mode=""></image>
-			<image src="http://106.15.179.105:3000/public/imgs/phone/Redmi-k30.png" mode=""></image>
-			<image src="http://106.15.179.105:3000/public/imgs/phone/Redmi-k30.png" mode=""></image>
-			<image src="http://106.15.179.105:3000/public/imgs/phone/Redmi-k30.png" mode=""></image>
-		</view>
-		<view class="phone">
-			<h1>手机</h1>
-			<image src="http://106.15.179.105:3000/public/imgs/phone/Redmi-k30.png" mode=""></image>
-			<image src="http://106.15.179.105:3000/public/imgs/phone/Redmi-k30.png" mode=""></image>
-			<image src="http://106.15.179.105:3000/public/imgs/phone/Redmi-k30.png" mode=""></image>
-			<image src="http://106.15.179.105:3000/public/imgs/phone/Redmi-k30.png" mode=""></image>
-		</view>
+		<!-- 商品 -->
+		<category v-show="index===0"></category>
+		<category1 v-show="index===1"></category1>
+		<category2 v-show="index===2"></category2>
+		<category3 v-show="index===3"></category3>
+		<category4 v-show="index===4"></category4>
 		<!-- 底部 -->
 		<view class="footer">
 			<view class="sb">
@@ -137,14 +118,62 @@
 </template>
 
 <script>
+import request from '../../utils/request.js'
+import category from '../../components/category/category.vue'
+import category1 from '../../components/category/category1.vue'
+import category2 from '../../components/category/category2.vue'
+import category3 from '../../components/category/category3.vue'
+import category4 from '../../components/category/category4.vue'
 export default {
 	data() {
 		return {
-		
+			index:0,
+			list1: [
+					{
+			            name: '--推荐--',
+			        }, 
+					{
+			            name: '--智能--',
+			        },
+					{
+			            name: '--家电--'
+			        },
+					{
+			            name: '--电视--'
+			        },
+					{
+			            name: '--笔记本--'
+			         },
+				],
+			banners:[],
+			
 		};
 	},
-	onLoad() {},
-	methods: {}
+	onLoad() {
+		this.getBanners()
+	},
+	components:{
+		category,
+		category1,
+		category2,
+		category3,
+		category4,
+	},
+	methods: {
+		toSearch(){
+			uni.$u.route('/pages/search/search');
+		},
+		// 获取轮播图
+		async getBanners() {
+			const result = await request('/api/resources/carousel',{},'POST')
+			const bannerList=result
+			this.banners=bannerList.carousel
+		},
+		
+		changeCurrent(current){
+			this.index = current.index
+		}
+	}
 };
 </script>
 
@@ -179,22 +208,7 @@ export default {
 			font-size 24upx
 			color #f89f1b
 			margin 0 20upx
-	.navScroll
-		width 100%
-		display flex
-		white-space nowrap
-		height 80upx
-		.navItem
-			width 200upx
-			height 100%
-			margin 0 20upx
-			padding 0 20upx
-			line-height 80upx
-			text-align center
-			display inline-block
-			box-sizing border-box
-			&.active
-				border-bottom 6upx solid orange
+
 	.banner
 		image
 			width 100%
@@ -205,16 +219,9 @@ export default {
 		.navItem
 			width 20%
 			margin-top 15upx
-	.phone
-		width 100%
-		h1
-			margin-bottom 20upx
-		image
-			box-sizing border-box
-			width 50%
-			border 1px solid #eee
 
 	.footer
+		float left
 		width 100%
 		background-color #2f2f2f
 		.sb
diff --git a/pages/search/search.vue b/pages/search/search.vue
new file mode 100644
index 0000000..dd48e7c
--- /dev/null
+++ b/pages/search/search.vue
@@ -0,0 +1,62 @@
+<template>
+	<view class="search">
+		<!-- 头部导航 -->
+		<view class="header">
+			<i @click="toIndex">🏠</i>
+			<u-search placeholder="输入搜索内容" v-model="keyword" :show-action="true" :animation="true"></u-search>
+		</view>
+		<!-- 中间额呢绒 -->
+		<view class="center">
+			<text class="black">搜索发现</text>
+			<view class="common">
+				<text>小米手机</text>
+				<text>小米手机</text>
+				<br>
+				<text>小米手机</text>
+				<text>小米手机</text>
+				<br>
+				<text>小米手机</text>
+				<text>小米手机</text>
+				<br>
+				<text>小米手机</text>
+				<text>小米手机</text>
+			</view>
+		</view>
+	</view>
+</template>
+
+<script>
+	export default {
+		data() {
+			return {
+				
+			};
+		},
+		onLoad() {},
+		methods: {
+			toIndex(){
+				uni.$u.route('/pages/index/index');
+			}
+		}
+	};
+</script>
+
+<style lang="stylus">
+.search
+	.header
+		display flex
+		i
+			font-size 40upx
+			padding-right 20upx
+	.center
+		text-align center
+		width 100%
+		margin-top 50upx
+		.black
+			color #EEEEEE
+		.common
+			margin-top 50upx
+			color red
+			text
+				margin 70upx
+</style>
diff --git a/utils/config.js b/utils/config.js
index 591dca2..009682d 100644
--- a/utils/config.js
+++ b/utils/config.js
@@ -1,3 +1,4 @@
 export default {
-	host:''
+	// host:'/api'
+	host:'http://106.15.179.105'
 }
\ No newline at end of file
diff --git a/utils/request.js b/utils/request.js
index 6823a13..f0b1811 100644
--- a/utils/request.js
+++ b/utils/request.js
@@ -3,7 +3,7 @@ import config from "./config.js"
 export default  (url, data = {}, method = 'GET') => {
 	return new Promise((resolve, reject) => {
 		wx.request({
-			url: config.hostUrl + url,
+			url: config.host + url,
 			data,
 			method,
 			success: res => {
@@ -13,4 +13,5 @@ export default  (url, data = {}, method = 'GET') => {
 				reject(err)
 			}
 		})
-	})
\ No newline at end of file
+	})
+}
\ No newline at end of file
-- 
Gitee