邓洁 : 输入框及轮播图封装

.hbuilderx/launch.json

@@ -2,6 +2,10 @@
   // launchtype项可配置值为local或remote, local代表前端连本地云函数，remote代表前端连云端云函数
     "version": "0.0",
     "configurations": [{
+     	"app-plus" : 
+     	{
+     		"launchtype" : "local"
+     	},
      	"default" : 
      	{
      		"launchtype" : "local"

components/inputAndSwiper/inputAndSwiper.vue

@@ -0,0 +1,156 @@
+<template>
+	<view>
+		<view class="search-box">
+			<view class="search-box-input">
+				<u-input placeholder="热门搜索" placeholder-style="color: #969696" prefixIcon="search"
+					prefixIconStyle="font-size: 24px;color: #909399;" border="true">
+					<template slot="suffix">
+						<view style="display: flex;align-items: center;">
+							<u-icon name="map-fill" color="#329866" size="22"></u-icon>
+							<text class="position">{{position}}</text>
+						</view>
+					</template>
+				</u-input>
+			</view>
+		</view>
+		<u-swiper :list="headerBgList" height="300rpx" />
+	</view>
+</template>
+
+<script>
+	import QQMapWX from "@/utils/qqmap-wx-jssdk.min.js"
+	export default {
+		name: "inputAndSwiper",
+		props: {
+			headerBgList: {
+				type: Array,
+				default () {
+					return [
+						"https://alifei01.cfp.cn/creative/vcg/800/new/VCG41175510742.jpg",
+						"https://alifei01.cfp.cn/creative/vcg/800/new/VCG41175510742.jpg",
+						"https://alifei01.cfp.cn/creative/vcg/800/new/VCG41175510742.jpg"
+					]
+				}
+			},
+			position: {
+				type: String,
+				default () {
+					return '定位'
+				}
+			}
+		},
+		data() {
+			return {
+
+			};
+		},
+		options: {
+			styleIsolation: 'shared', // 解除样式隔离
+		},
+		created() {
+			// this.getLocation()
+		},
+		methods: {
+			getLocation(){
+				uni.getLocation({
+					type: 'wgs84',
+					// geocode: true, // 返回城市信息
+					// enableHighAccuracy: false, // 开启高精度模式
+					success: function(res) {
+						let qqmapsdk = new QQMapWX({
+							key: 'ZRKBZ-Q7FWL-GVZPK-MCRBU-4XFB5-ATBDB'
+						});
+						qqmapsdk.reverseGeocoder({
+							location: {
+								latitude: res.latitude,
+								longitude: res.longitude
+							},
+							success: (re) => {
+								console.log(re.result.ad_info.city, '成都市==');
+								console.log(re.result.ad_info.district, '武侯区==');
+							},
+							fail: (re) => {
+								console.log(re, '失败信息');
+							}
+						})
+					}
+				});
+			},
+			//提示用户开启定位服务
+			open() {
+				// uni.authorize({
+				// 	scope: 'scope.userLocation',
+				// 	success: function() {
+				// 		console.log('授权成功');
+				// 	},
+				// 	fail: function() {
+				// 		console.log('授权失败');
+				// 	}
+				// })
+				// wx.getSetting({
+				// 	success: (res) => {
+				// 		if (res.authSetting['scope.userLocation'] === false) {
+				// 			wx.showModal({
+				// 				title: '提示',
+				// 				content: '请打开定位服务后重新进入该页面',
+				// 				confirmText: '去设置',
+				// 				success: (res) => {
+				// 					if (res.confirm) {
+				// 						wx.openSetting()
+				// 					}
+				// 				}
+				// 			})
+				// 		}
+				// 	}
+				// })
+			}
+		}
+	}
+</script>
+
+<style lang="scss">
+	.search-box {
+		position: absolute;
+		z-index: 1;
+		left: 50%;
+		width: 84.6%;
+		transform: translateX(-50%);
+
+		.search-box-input {
+			border-radius: 12rpx;
+			margin-top: 20rpx;
+			background-color: #fff;
+			opacity: 0.85;
+
+			.u-border {
+				border: none;
+
+				.u-input__content {
+					height: 62rpx;
+					border-radius: 12rpx;
+					background-color: #fff;
+
+					.u-input__content__field-wrapper__field {
+						font-size: 26rpx !important;
+					}
+				}
+			}
+		}
+	}
+
+	.position {
+		font-size: 24rpx;
+		font-family: PingFangSC-Regular, PingFang SC;
+		font-weight: 400;
+		color: #232323;
+		line-height: 33rpx;
+	}
+
+	.u-swiper {
+		border-radius: 0 !important;
+
+		.u-swiper__wrapper__item__wrapper__image {
+			border-radius: 0 !important;
+		}
+	}
+</style>

manifest.json

@@ -54,7 +54,12 @@
         "setting" : {
             "urlCheck" : false
         },
-        "usingComponents" : true
+        "usingComponents" : true,
+        "permission" : {
+            "scope.userLocation" : {
+                "desc" : ""
+            }
+        }
     },
     "mp-alipay" : {
         "usingComponents" : true

pages.json

@@ -11,22 +11,50 @@
 		{
 			"path": "pages/index/index",
 			"style": {
-				"navigationBarTitleText": "uni-app",
+				"navigationBarTitleText": "速配商铺",
-				"navigationBarTextStyle": "white",
+				"navigationBarTextStyle": "black",
-				"navigationBarBackgroundColor": "#12CA64",
+				"navigationBarBackgroundColor": "#FFFFFF",
 				//导航栏取消
 				// "navigationStyle": "custom",
 				//是否开启下拉刷新
 				"enablePullDownRefresh": true
 			}
-		}, {
+		},
+		{
+			"path": "pages/shopTransfer/shopTransfer",
+			"style": {
+				"navigationBarTitleText": "店铺转让",
+				"navigationBarTextStyle": "black",
+				"navigationBarBackgroundColor": "#FFFFFF",
+				"enablePullDownRefresh": false
+			}
+		},
+		//+
+		{
+			"path": "pages/shopAddress/shopAddress",
+			"style": {
+				"navigationBarTitleText": "找店地址",
+				"navigationBarTextStyle": "black",
+				"navigationBarBackgroundColor": "#FFFFFF",
+				"enablePullDownRefresh": false
+			}
+		},
+		{
 			"path": "pages/my/my",
 			"style": {
-				"navigationBarTitleText": "",
+				"navigationBarTitleText": "我的",
-				"navigationBarTextStyle": "white",
+				"navigationBarTextStyle": "black",
-				"navigationBarBackgroundColor": "#12CA64",
+				"navigationBarBackgroundColor": "#FFFFFF",
 				"enablePullDownRefresh": false
 			}
+		},
+		{
+			"path" : "pages/publish/publish",
+			"style" : 
+			{
+				"navigationBarTitleText" : "",
+				"enablePullDownRefresh" : false
+			}
 		}
 	],
 	"tabBar": {
@@ -37,14 +65,32 @@
 		"list": [{
 				"pagePath": "pages/index/index",
 				"text": "首页",
-				"iconPath": "static/tabbar/sy_icon_syh.png",
+				"iconPath": "static/tabbar/di_icon_syh.png",
-				"selectedIconPath": "static/tabbar/sy_icon_sy(1).png"
+				"selectedIconPath": "static/tabbar/di_icon_sy.png"
+			},
+			{
+				"pagePath": "pages/shopTransfer/shopTransfer",
+				"text": "店铺转让",
+				"iconPath": "static/tabbar/di_icon_zrh.png",
+				"selectedIconPath": "static/tabbar/di_icon_zr.png"
+			},
+			{
+				"pagePath": "pages/publish/publish",
+				"text": "发布",
+				"iconPath": "static/tabbar/di_icon_fb.png",
+				"selectedIconPath": "static/tabbar/di_icon_fb.png"
+			},
+			{
+				"pagePath": "pages/shopAddress/shopAddress",
+				"text": "找店地址",
+				"iconPath": "static/tabbar/di_icon_dzh.png",
+				"selectedIconPath": "static/tabbar/di_icon_dz.png"
 			},
 			{
 				"pagePath": "pages/my/my",
-				"text": "我的",
+				"text": "店铺转让",
-				"iconPath": "static/tabbar/sy_icon_wdh.png",
+				"iconPath": "static/tabbar/di_icon_wdh.png",
-				"selectedIconPath": "static/tabbar/sy_icon_wd.png"
+				"selectedIconPath": "static/tabbar/di_icon_wd.png"
 			}
 		]
 	},

pages/index/index.vue

@@ -1,19 +1,13 @@
 <template>
-	<view class="search_box">
+	<view>
-		<view class="search_box_border">
+		<inputAndSwiper></inputAndSwiper>
-			<u-input placeholder="搜索优质产品" placeholder-style="color: #969696" prefixIcon="search"
-				prefixIconStyle="font-size: 22px;color: #909399;margin-left:30rpx" readonly>
-			</u-input>
-		</view>
 	</view>
 </template>
 
 <script>
 	export default {
 		data() {
-			return {
+			return {}
-
-			}
 		},
 		onLoad() {
 
@@ -23,34 +17,8 @@
 		}
 	}
 </script>
-
+<style>
-<style lang="scss">
+	page{
-	// 搜索框样式
+		background-color: #F8F8F8;
-	.search_box {
-		background: linear-gradient(135deg, #12CA64 0%, #1ACA67 100%);
-
-		.search_box_border {
-			width: 94.6%;
-			height: 124rpx;
-			background: linear-gradient(320deg, #36E182 0%, #26DD76 100%, #26DD76 100%);
-			margin: 0 auto;
-			box-shadow: 0 -1px 3px 0 #31B96D;
-			border-radius: 38rpx 38rpx 0 0;
-
-			.u-border {
-				border: none;
-				padding-top: 16px !important;
-
-				.u-input__content {
-					height: 64rpx;
-					border-radius: 32rpx;
-					background-color: #fff;
-
-					.u-input__content__field-wrapper__field {
-						font-size: 26rpx !important;
-					}
-				}
-			}
-		}
 	}
 </style>

pages/publish/publish.vue

@@ -0,0 +1,22 @@
+<template>
+	<view>
+		发布
+	</view>
+</template>
+
+<script>
+	export default {
+		data() {
+			return {
+				
+			}
+		},
+		methods: {
+			
+		}
+	}
+</script>
+
+<style>
+
+</style>

pages/shopAddress/shopAddress.vue

@@ -0,0 +1,22 @@
+<template>
+	<view>
+		找店地址
+	</view>
+</template>
+
+<script>
+	export default {
+		data() {
+			return {
+				
+			}
+		},
+		methods: {
+			
+		}
+	}
+</script>
+
+<style>
+
+</style>

pages/shopTransfer/shopTransfer.vue

@@ -0,0 +1,22 @@
+<template>
+	<view>
+		店铺转让
+	</view>
+</template>
+
+<script>
+	export default {
+		data() {
+			return {
+				
+			}
+		},
+		methods: {
+			
+		}
+	}
+</script>
+
+<style>
+
+</style>