ソースを参照

Signed-off-by: 1004749546@qq.com <1004749546@qq.com>
首页修改

1004749546@qq.com 4 年 前
コミット
1203ed8d07
2 ファイル変更57 行追加50 行削除
  1. 0 1
      components/uni-nav-bar/uni-nav-bar.vue
  2. 57 49
      pages/index/index.vue

+ 0 - 1
components/uni-nav-bar/uni-nav-bar.vue

@@ -175,7 +175,6 @@
 		/* #endif */
 		width: 160rpx;
 		justify-content: flex-start;
-		align-items: center;
 	}
 
 	.uni-navbar__header-btns-right {

+ 57 - 49
pages/index/index.vue

@@ -1,36 +1,36 @@
 <template>
 	<view class="content">
 		<!-- 顶部导航 -->
-		<uni-nav-bar :border="false" @click-left="toUserCenter" leftIcon="person-filled" leftText="个人中心" :shadow="false"
+		<uni-nav-bar :border="false" @click-left="toUserCenter" leftIcon="person-filled" leftText=" " :shadow="false"
 		 background-color="#fff" :status-bar="true" :fixed="true" color="rgb(255,0,0)" title=" ">
 		</uni-nav-bar>
 		<!-- 页面主体 -->
 		<view class="pageContent">
 			<map id="map" :latitude="centerY" :longitude="centerX" scale="14" :markers="markers" bindmarkertap="markertap"
 			 show-location style="width: 100%; height:100%;">
-				<cover-view class="cover-view">
-					<cover-view class="flex-wrp">
-						<cover-view @click="intoList" class="flex-item">
-							<cover-image class="img" src="/static/img/index-list.png"></cover-image>
-							<cover-view>网点列表</cover-view>
-						</cover-view>
-						<cover-view @click="concatServicer" class="flex-item">
-							<cover-image class="img" src="/static/img/index-call.png"></cover-image>
-							<cover-view>联系客服</cover-view>
-						</cover-view>
-						<cover-view class="flex-item">
-							<cover-image class="img" src="/static/img/index-discount.png"></cover-image>
-							<cover-view>优惠活动</cover-view>
-						</cover-view>
-					</cover-view>
-				</cover-view>
-				<cover-view class="cover-bottom">
+				<view class="cover-view">
+					<view class="flex-wrp">
+						<view @click="intoList" class="flex-item">
+							<image class="img" src="/static/img/index-list.png"></image>
+							<view>网点列表</view>
+						</view>
+						<view @click="showPop=true" class="flex-item">
+							<image class="img" src="/static/img/index-call.png"></image>
+							<view>联系客服</view>
+						</view>
+						<view class="flex-item">
+							<image class="img" src="/static/img/index-discount.png"></image>
+							<view>优惠活动</view>
+						</view>
+					</view>
+				</view>
+				<view class="cover-bottom">
 					<button @click="scanCode" type="warn">扫码洗车</button>
-				</cover-view>
+				</view>
 			</map>
 		</view>
 		<!-- 客服弹窗 -->
-		<uni-popup ref="popup" type="bottom">
+		<u-popup v-model="showPop" mode="bottom">
 			<view class="popup-box">
 				<view class="pop-top">
 					<view class="top-first pop-item">
@@ -40,11 +40,11 @@
 						电话客服
 					</view>
 				</view>
-				<view @click="$refs.popup.close()" class="pop-cancle">
+				<view @click="showPop=false" class="pop-cancle">
 					取消
 				</view>
 			</view>
-		</uni-popup>
+		</u-popup>
 	</view>
 </template>
 
@@ -60,6 +60,7 @@
 				markers: [], // 标注点
 				centerX: '',
 				centerY: '',
+				showPop: 'false', // 是否显示客服弹窗
 				markData: [{
 						id: '1',
 						name: '洗车机',
@@ -97,22 +98,12 @@
 			this.mapCtx = wx.createMapContext('map')
 		},
 		onLoad() {
-			wx.getLocation({
-				type: 'gcj02', //返回可以用于wx.openLocation的经纬度
-				success: (res) => {
-					console.log(res)
-					let latitude = res.latitude;
-					let longitude = res.longitude;
-					this.centerX = longitude
-					this.centerY = latitude
-					this.markers = this.getMarkersData()
-				}
-			});
-			// this.getUserLocation()
+			this.getUserLocation()
 		},
 		methods: {
 			// 用户位置信息授权
 			getUserLocation() {
+				let _this = this
 				// 可以通过 wx.getSetting 先查询一下用户是否授权了 "scope.userLocation" 这个 scope
 				wx.getSetting({
 					success(res) {
@@ -120,25 +111,31 @@
 							wx.authorize({
 								scope: 'scope.userLocation',
 								success() {
-									// 用户已经同意小程序使用位置信息,后续调用 wx.startRecord 接口不会弹窗询问
-									wx.getLocation({
-										type: 'gcj02', //返回可以用于wx.openLocation的经纬度
-										success: (res) => {
-											console.log(res)
-											console.log(11111111111)
-											let latitude = res.latitude;
-											let longitude = res.longitude;
-											this.centerX = longitude
-											this.centerY = latitude
-											this.markers = this.getMarkersData()
-										}
-									});
+									// 用户已经同意小程序使用位置信息,后续调用 wx.getLocation 接口不会弹窗询问
+									_this.getLocation()
 								}
 							})
+						} else {
+							_this.getLocation()
 						}
 					}
 				})
 			},
+			// 获取用户位置
+			getLocation () {
+				wx.getLocation({
+					type: 'gcj02', //返回可以用于wx.openLocation的经纬度
+					success: (res) => {
+						console.log(res)
+						console.log(11111111111)
+						let latitude = res.latitude;
+						let longitude = res.longitude;
+						this.centerX = longitude
+						this.centerY = latitude
+						this.markers = this.getMarkersData()
+					}
+				});
+			},
 			// 点击标点获取数据
 			markertap(e) {
 				var id = e.markerId
@@ -158,10 +155,16 @@
 				}
 				return markers;
 			},
+			// 进入个人中心
+			toUserCenter () {
+				uni.navigateTo({
+				    url: '/pages/userCenter/index'
+				})
+			},
 			// 打开网点列表
 			intoList() {
 				uni.navigateTo({
-				    url: ''
+				    url: '/pages/store/storeList'
 				})
 			},
 			// 联系客服
@@ -230,10 +233,11 @@
 			flex: 1;
 
 			.cover-view {
+				z-index: 9;
 				position: absolute;
 				top: calc(60% - 120rpx);
 				left: calc(50% - 360rpx);
-				background: rgba(255, 0, 0, 0.5);
+				background: rgba(255, 0, 0, 0.6);
 				border-radius: 20rpx;
 
 				.flex-wrp {
@@ -259,6 +263,7 @@
 			}
 
 			.cover-bottom {
+				z-index: 9;
 				position: absolute;
 				bottom: calc(60rpx);
 				width: 80%;
@@ -266,6 +271,9 @@
 			}
 
 		}
+		uni-popup{
+			z-index: 999;
+		}
 		.popup-box{
 			width: 100%;
 			height: 320rpx;