Explorar o código

Merge branch 'deploy' of http://git.chelingzhu.com/chelingzhu-web/qhsxKx-mini-html into deploy

lilei %!s(int64=4) %!d(string=hai) anos
pai
achega
e742385d20
Modificáronse 8 ficheiros con 483 adicións e 139 borrados
  1. 22 21
      pages.json
  2. 62 69
      pages/index/index.vue
  3. 197 49
      pages/store/StoreList.vue
  4. 202 0
      pages/store/storeDetail.vue
  5. BIN=BIN
      static/img/location.png
  6. BIN=BIN
      static/img/mddef.jpg
  7. BIN=BIN
      static/img/store-zt.png
  8. BIN=BIN
      static/img/store.png

+ 22 - 21
pages.json

@@ -16,37 +16,38 @@
 			"style": {
 				"navigationBarTitleText": "网点列表"
 			}
-		}
-	    ,{
-            "path" : "pages/userCenter/index",
-            "style" : {
+		}, {
+			"path": "pages/store/storeDetail",
+			"style": {
+				"navigationBarTitleText": "网点详情"
+			}
+		}, {
+			"path": "pages/userCenter/index",
+			"style": {
 				"navigationBarTitleText": "个人中心"
 			}
-        }
-        ,{
-            "path" : "pages/coupon/index/index",
-            "style" : {
+		}, {
+			"path": "pages/coupon/index/index",
+			"style": {
 				"navigationBarTitleText": "我的优惠卷"
 			}
-        }
-        ,{
-            "path" : "pages/order/order",
-            "style" : {
+		}, {
+			"path": "pages/order/order",
+			"style": {
 				"navigationBarTitleText": "我的订单"
 			}
-        },{
-            "path" : "pages/order/orderDetail",
-            "style" : {
+		}, {
+			"path": "pages/order/orderDetail",
+			"style": {
 				"navigationBarTitleText": "订单详情"
 			}
-        }
-        ,{
-            "path" : "pages/work/index/index",
-            "style" : {
+		}, {
+			"path": "pages/work/index/index",
+			"style": {
 				"navigationBarTitleText": "洗车服务中"
 			}
-        }
-    ],
+		}
+	],
 	"globalStyle": {
 		"navigationBarTextStyle": "black",
 		"navigationBarTitleText": "uni-app",

+ 62 - 69
pages/index/index.vue

@@ -12,8 +12,9 @@
 		</uni-nav-bar>
 		<!-- 页面主体 -->
 		<view class="pageContent">
-			<map id="map" :latitude="centerY" :longitude="centerX" scale="14" :markers="markers" bindmarkertap="markertap"
+			<map id="map" :latitude="centerY" :longitude="centerX" scale="14" show-compass :markers="markers" @markertap="markertap"
 			 show-location style="width: 100%; height:100%;">
+			 <!-- 左边控件 -->
 				<view class="cover-view">
 					<view class="flex-wrp">
 						<cover-view @click="intoList" class="flex-item">
@@ -30,6 +31,10 @@
 						</cover-view>
 					</view>
 				</view>
+				<!-- 地图移动后返回原位置控件 -->
+				<view class="cover-location">
+					<cover-image class="img" @click="moveToLocation" src="/static/img/location.png"></cover-image>
+				</view>
 				<view class="cover-bottom">
 					<button @click="scanCode" type="warn">扫码洗车</button>
 				</view>
@@ -47,6 +52,7 @@
 		},
 		data() {
 			return {
+				mapCtx: null, // 地图对象
 				markers: [], // 标注点
 				centerX: '',
 				centerY: '',
@@ -55,57 +61,74 @@
 						name: '洗车机',
 						latitude: '34.29318',
 						longitude: '108.94712',
+						status: 1
+					},
+					{
+						id: '22',
+						name: '洗车机',
+						latitude: '34.29318',
+						longitude: '108.96712',
+						status: 1
 					},
 					{
 						id: '2',
 						name: '洗车机',
 						latitude: '34.29318',
 						longitude: '118.94712',
+						status: 1
 					},
 					{
 						id: '11',
 						name: '洗车机',
 						latitude: '34.29318',
-						longitude: '128.94712',
+						longitude: '110.94712',
+						status: 1
 					},
 					{
 						id: '12',
 						name: '洗车机',
-						latitude: '38.29318',
+						latitude: '34.39318',
 						longitude: '108.94712',
+						status: 0
 					},
 					{
 						id: '13',
 						name: '洗车机',
 						latitude: '44.29318',
 						longitude: '108.94712',
+						status: 1
 					}
-				]
+				],
 			}
 		},
 		onReady() {
-			this.mapCtx = wx.createMapContext('map')
+			this.mapCtx = uni.createMapContext('map')
 		},
 		onLoad() {
 			this.getUserLocation()
-			// H5及APP平台适配代码
-			// #ifdef H5 || APP-PLUS
-			this.getLocation()
-			// #endif
 		},
 		methods: {
 			// 用户位置信息授权
 			getUserLocation() {
 				let _this = this
 				// 可以通过 wx.getSetting 先查询一下用户是否授权了 "scope.userLocation" 这个 scope  H5及APP平台不适用
+				// H5及APP平台适配代码
+				// #ifndef H5 || APP-PLUS
 				uni.getSetting({
 					success(res) {
+						console.log(res,'11111')
 						if (!res.authSetting['scope.userLocation']) {
 							uni.authorize({
 								scope: 'scope.userLocation',
 								success() {
-									// 用户已经同意小程序使用位置信息,后续调用 wx.getLocation 接口不会弹窗询问
+									// 用户已经同意小程序使用位置信息,后续调用 uni.getLocation 接口不会弹窗询问
 									_this.getLocation()
+								},
+								// 用户拒绝授权位置信息时默认展示青海西宁位置地图
+								fail: (err) => {
+									_this.centerX = '101.760521'
+									_this.centerY = '36.636193'
+									_this.markers = _this.getMarkersData()
 								}
 							})
 						} else {
@@ -113,30 +136,32 @@
 						}
 					}
 				})
+				// #endif
 			},
 			// 获取用户位置
 			getLocation () {
-				wx.getLocation({
-					type: 'gcj02', //返回可以用于wx.openLocation的经纬度
+				uni.getLocation({
+					type: 'gcj02', 
 					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()
+					},
+					// 定位失败默认展示青海西宁位置地图
+					fail: (err) => {
+						this.centerX = '101.760521'
+						this.centerY = '36.636193'
+						this.markers = this.getMarkersData()
 					}
 				});
 			},
 			// 点击标点获取数据
 			markertap(e) {
-				var id = e.markerId
-				var name = this.data.markers[id - 1].name
-				console.log(name)
-				this.setData({
-					lingyuanName: name,
-					showDialog: true,
+				console.log(e)
+				uni.navigateTo({
+					url: `/pages/store/storeDetail?id=${e.markerId}`
 				})
 			},
 			// 获取标记点数据
@@ -148,6 +173,10 @@
 				}
 				return markers;
 			},
+			// 点击回到定位坐标点
+			moveToLocation () {
+				this.mapCtx.moveToLocation()
+			},
 			// 进入个人中心
 			toUserCenter () {
 				uni.navigateTo({
@@ -200,26 +229,16 @@
 				let latitude = point.latitude;
 				let longitude = point.longitude;
 				let marker = {
-					iconPath: "/image/location.png",
+					iconPath: point.status ? "/static/img/store.png": '/static/img/store-zt.png',
 					id: point.id || 0,
 					name: point.name || '',
 					latitude: latitude,
 					longitude: longitude,
 					width: 30,
 					height: 30,
-					label: {
-						content: point.name,
-						color: '#22ac38',
-						fontSize: 14,
-						bgColor: 'transparent',
-						borderRadius: 30,
-						borderColor: "#22ac38",
-						// borderWidth: 1,
-						padding: 3
-					},
 					callout: {
 						content: point.name,
-						fontSize: 0,
+						fontSize: 14,
 					}
 				};
 				return marker;
@@ -270,50 +289,24 @@
 				}
 				
 			}
-
+			.cover-location{
+				position: absolute;
+				top: calc(75%);
+				left: calc(85%);
+				.img{
+					width: 80rpx;
+					height: 80rpx;
+				}
+			}
 			.cover-bottom {
 				position: absolute;
-				bottom: calc(100rpx);
+				bottom: calc(60rpx);
 				width: 80%;
 				left: calc(9%);
 			}
 
 		}
 		
-		.popup-box{
-			width: 100%;
-			height: 320rpx;
-			background-color: #F8F8F8;
-			display: flex;
-			flex-direction: column;
-			.pop-top{
-				width: 100%;
-				font-size: 32rpx;
-				display: flex;
-				flex-direction: column;
-				align-items: center;
-				justify-content: center;
-				background-color: #fff;
-				.pop-item{
-					width: 80%;
-					text-align: center;
-					line-height: 100rpx;
-				}
-				.top-first{
-					border-bottom: 1px solid #F8F8F8;
-				}
-			}
-			.pop-cancle{
-				width: 100%;
-				flex: 1;
-				margin-top: 20rpx;
-				background-color: #fff;
-				display: flex;
-				justify-content: center;
-				align-items: center;
-				font-size: 30rpx;
-				color: #333;
-			}
-		}
+		
 	}
 </style>

+ 197 - 49
pages/store/StoreList.vue

@@ -1,86 +1,138 @@
 <template>
 	<view class="content">
-		<view>
-			<scroll-view scroll-y="true" class="scroll-Y" @scrolltolower="reachBottom"
-			@scroll="scroll">
-				<view class="">
-					
+		<scroll-view scroll-y="true" class="scroll-Y" @scrolltolower="reachBottom" @scroll="scroll">
+			<view class="list" @click="intoDetail" v-for="item in storeList" :key="item.id">
+				<image class="list-img" :src="item.icon?item.icon:'../../static/img/mddef.jpg'"></image>
+				<view class="store-info">
+					<view class="name">
+						{{item.name}}
+					</view>
+					<view class="address">
+						{{item.addrDetail}}
+					</view>
+					<view class="location">
+						<view class="left">
+							<uni-icons class="icon" size="16" type="paperplane"></uni-icons>
+							<text>{{item.distance}} km</text>
+						</view>
+						<view class="right">
+							<u-icon class="icon" size="32" name="clock"></u-icon>
+							<text>{{item.time}} 营业</text>
+						</view>
+					</view>
 				</view>
-			</scroll-view>
-		</view>
+				<view class="list-right">
+					<view :class="item.statusClass">{{getStoreStatus(item)}}</view>
+				</view>
+			</view>
+		</scroll-view>
 	</view>
 </template>
 
 <script>
-	
+	import uniIcons from "@/components/uni-icons/uni-icons.vue"
 	export default {
-		components: {},
+		components: {
+			uniIcons
+		},
 		data() {
 			return {
-				storeList: [],
+				storeList: [{
+						id: 1,
+						icon: '',
+						addrDetail: '陕西省西安市未央区北二环贞观路',
+						name: '贞观路站',
+						distance: 0.1,
+						time: '8:00-22:00',
+						status: 1
+					},
+					{
+						id: 10,
+						icon: '',
+						addrDetail: '陕西省西安市未央区北二环贞观路',
+						name: '贞观路站',
+						distance: 0.1,
+						time: '8:00-22:00',
+						status: 0
+					},
+					{
+						id: 11,
+						icon: '',
+						addrDetail: '陕西省西安市未央区北二环贞观路',
+						name: '贞观路站',
+						distance: 0.1,
+						time: '8:00-22:00',
+						status: 2
+					}
+				],
 				currentPosition: {
-				  lat: '0',
-				  lng: '0'
+					lat: '0',
+					lng: '0'
 				},
 				pageNo: 1,
 				pageSize: 10
 			}
 		},
 		onShow() {
-			 
+
 		},
-	    onLoad() {
-		    // 获取当前经纬度
-		    let _this = this
-		    uni.getLocation({
-				 type: 'wgs84', // 默认wgs84
-				 success: function(res) {
-				   _this.currentPosition.lat = res.latitude;
-				   _this.currentPosition.lng = res.longitude;
-				   _this.gpsCompletion = true;
-				   // 查询门店信息
-				   // _this.getStoresList()
-				 },
-				 fail: function(res) { 
-					 console.log(res)
-					 // 查询门店信息
-					 // _this.getStoresList()
-				 },
-		    });
-	    },
-		
-		computed: {
+		onLoad() {
+			// 获取当前经纬度
+			let _this = this
+			uni.getLocation({
+				type: 'wgs84', // 默认wgs84
+				success: function(res) {
+					_this.currentPosition.lat = res.latitude;
+					_this.currentPosition.lng = res.longitude;
+					_this.gpsCompletion = true;
+					// 查询门店信息
+					// _this.getStoresList()
+				},
+				fail: function(res) {
+					console.log(res)
+					// 查询门店信息
+					// _this.getStoresList()
+				},
+			});
 		},
-		methods:{
-			getStoresList () {
+
+		computed: {},
+		methods: {
+			getStoresList() {
 				uni.showLoading({
 					title: '正在加载...'
 				})
 				let lat = this.currentPosition.lat
 				let lng = this.currentPosition.lng
-				getStoresList({pageNo:this.pageNo,pageSize:this.pageSize,lat:lat,lng:lng}).then(res => {
+				getStoresList({
+					pageNo: this.pageNo,
+					pageSize: this.pageSize,
+					lat: lat,
+					lng: lng
+				}).then(res => {
 					console.log(res)
-					if(res.status == 200){
+					if (res.status == 200) {
 						let list = res.data.list
-						if(list&&list.length){
+						if (list && list.length) {
 							list.map(item => {
-								if (item.addrDetail.indexOf("省")>0 && item.addrDetail.indexOf("市")>0 && item.addrDetail.indexOf("区")>0){
+								if (item.addrDetail.indexOf("省") > 0 && item.addrDetail.indexOf("市") > 0 && item.addrDetail.indexOf("区") >
+									0) {
 									item.addrDetail = item.addrDetail
 								} else {
-									if (item.addrDetail.indexOf("市")>0 && item.addrDetail.indexOf("区")>0){
+									if (item.addrDetail.indexOf("市") > 0 && item.addrDetail.indexOf("区") > 0) {
 										item.addrDetail = item.addrProvinceName + item.addrDetail
-									} else if (item.addrDetail.indexOf("区")>0) {
+									} else if (item.addrDetail.indexOf("区") > 0) {
 										item.addrDetail = item.addrProvinceName + item.addrCityName + item.addrDetail
 									} else {
 										item.addrDetail = item.addrProvinceName + item.addrCityName + item.addrDistrictName + item.addrDetail
 									}
 								}
-								item.distance = item.distance ? Math.round(item.distance/1000) : ''
+								item.distance = item.distance ? Math.round(item.distance / 1000) : ''
 								item.star = getStarNum(item.level)
 							})
 							this.storeList = this.storeList.concat(list)
-						}else{
-							if(this.pageNo!=1){
+						} else {
+							if (this.pageNo != 1) {
 								uni.showToast({
 									title: '已经是最后一页'
 								})
@@ -91,15 +143,111 @@
 					uni.hideLoading()
 				})
 			},
+			// 获取网点营业状态
+			getStoreStatus(item) {
+				switch (item.status) {
+					case 0:
+						item.statusClass = 'store-off'
+						return '暂停营业'
+						break;
+					case 1:
+						item.statusClass = 'store-on'
+						return '正常营业'
+						break;
+					case 2:
+						item.statusClass = 'store-waite'
+						return '即将开业'
+						break;
+					default:
+						break;
+				}
+			},
+			// 进入网点详情
+			intoDetail (item) {
+				uni.navigateTo({
+					url: `/pages/store/storeDetail?id=${item.id}`
+				})
+			},
 			// 到达底部
-			reachBottom () {
-				
+			reachBottom() {
+
 			}
-			
+
 		}
 	}
 </script>
 
 <style lang="scss" scoped>
-	
+	.content {
+		padding: 0 20rpx;
+
+		.scroll-Y {
+			width: 100%;
+			height: 100%;
+
+			.list {
+				padding: 20rpx 0;
+				display: flex;
+				width: 100%;
+				height: 200rpx;
+				border-bottom: 1px solid #eee;
+
+				.list-img {
+					width: 20%;
+					height: 100%;
+					margin-right: 10rpx;
+				}
+
+				.store-info {
+					height: 100%;
+					display: flex;
+					flex: 1;
+					flex-direction: column;
+					justify-content: space-between;
+					margin-right: 10rpx;
+
+					.name {
+						font-size: 32rpx;
+						color: #000;
+					}
+					.address{
+						font-size: 26rpx;
+					}
+					.location {
+						display: flex;
+						align-items: center;
+						font-size: 24rpx;
+						.left {
+							margin-right: 20rpx;
+						}
+
+						.icon {
+							color: #999;
+							margin-right: 10rpx;
+						}
+					}
+				}
+
+				.list-right {
+					width: 20%;
+					height: 100%;
+					display: flex;
+					justify-content: center;
+					align-items: center;
+
+					.store-off {
+						color: #999;
+					}
+
+					.store-on {
+						color: #51cc51;
+					}
+
+					.store-waite {
+						color: #ffec19;
+					}
+				}
+			}
+		}
+	}
 </style>

+ 202 - 0
pages/store/storeDetail.vue

@@ -0,0 +1,202 @@
+<template>
+	<view class="content">
+		<view class="page-content">
+			<view class="header">
+				<image class="list-img" :src="'../../static/img/mddef.jpg'"></image>
+				<view class="store-info">
+					<view class="name">
+						贞观路站
+					</view>
+					<view class="address">
+						陕西省西安市未央区北二环贞观路
+					</view>
+					<view class="location">
+						<view class="left">
+							<uni-icons class="icon" size="16" type="paperplane"></uni-icons>
+							<text>0.1km</text>
+						</view>
+						<view class="right">
+							<u-icon class="icon" size="32" name="clock"></u-icon>
+							<text>8:00-22:00 营业</text>
+						</view>
+					</view>
+				</view>
+			</view>
+			<!-- 网点标签 -->
+			<view class="store-mark">
+				<text class="mark-item">
+					30分钟内免费洗车
+				</text>
+				<text class="mark-item">
+					30分钟内免费洗车
+				</text>
+			</view>
+			<view class="store-server">
+				服务项目:
+				<text>标准速洗</text>
+				<text>标准速洗</text>
+			</view>
+			<!-- 路线指引 -->
+			<view class="store-rich store-line">
+				<view class="line-title">
+					* 路线指引 *
+				</view>
+			</view>
+			<!-- 温馨提示 -->
+			<view class="store-rich">
+				<view class="line-title">
+					* 温馨提示 *
+				</view>
+			</view>
+		</view>
+		<view class="footer">
+			<button type="warn" plain @click="showPop=true">排队情况</button>
+			<button type="warn" @click="openLocation">立刻导航</button>
+		</view>
+		<u-popup v-model="showPop" mode="center" width="90%" height="60%" closeable>
+			<image class="pop-img" :src="'../../static/img/mddef.jpg'"></image>
+		</u-popup>
+	</view>
+</template>
+
+<script>
+	export default {
+		components: {
+		},
+		data() {
+			return {
+				showPop: false, // 是否显示排队弹窗
+				storeInfo: {
+					latitude: '34.29318',
+					longitude: '108.96712',
+				}
+			}
+		},
+		onLoad(option) {
+			if (option.id) {
+				this.getStoreDetail(option.id)
+			}
+		},
+		methods: {
+			// 获取网点详情信息
+			getStoreDetail (id) {
+				
+			},
+			// 打开导航位置信息界面
+			openLocation () {
+				uni.getLocation({
+				    type: 'gcj02', //返回可以用于uni.openLocation的经纬度
+				    success: function (res) {
+				        const latitude = res.latitude;
+				        const longitude = res.longitude;
+						uni.openLocation({
+							latitude: latitude,
+							longitude: longitude,
+							name: '贞观路站',
+							address: '陕西省西安市未央区北二环贞观路',
+							success: function () {
+								console.log('success');
+							  }
+						})
+				    }
+				});
+			}
+			
+		}
+	}
+</script>
+
+<style lang="scss" scoped>
+	.content{
+		padding: 0 20rpx;
+		.page-content{
+			flex: 1;
+			overflow-y: scroll;
+		}
+		.header {
+			padding: 20rpx 0;
+			display: flex;
+			width: 100%;
+			height: 200rpx;
+			.list-img {
+				width: 20%;
+				height: 100%;
+				margin-right: 10rpx;
+			}
+		
+			.store-info {
+				height: 100%;
+				display: flex;
+				flex: 1;
+				flex-direction: column;
+				justify-content: space-between;
+				margin-right: 10rpx;
+		
+				.name {
+					font-size: 32rpx;
+					color: #000;
+				}
+				.address{
+					font-size: 26rpx;
+				}
+				.location {
+					display: flex;
+					align-items: center;
+					font-size: 24rpx;
+					.left {
+						margin-right: 20rpx;
+					}
+		
+					.icon {
+						color: #999;
+						margin-right: 10rpx;
+					}
+				}
+			}
+		}
+		.store-mark{
+			padding: 20rpx 0;
+			width: 100%;
+			.mark-item{
+				padding: 10rpx 20rpx;
+				border: 1px solid #eee;
+				border-radius: 30rpx;
+				margin-right: 20rpx;
+				font-size: 24rpx;
+			}
+		}
+		.store-server{
+			padding: 20rpx 0;
+			width: 100%;
+			font-size: 24rpx;
+			border-bottom: 1px solid #eee;
+			text{
+				margin-right: 30rpx;
+			}
+		}
+		.store-rich{
+			padding: 20rpx 0;
+			width: 100%;
+			display: flex;
+			flex-direction: column;
+			align-items: center;
+			justify-content: center;
+		}
+		.store-line{
+			border-bottom: 1px solid #eee;
+		}
+		.footer{
+			width: 100%;
+			display: flex;
+			margin-bottom: 20rpx;
+			justify-content: space-between;
+			button{
+				width: 45%;
+			}
+		}
+		.pop-img{
+			width: 100%;
+			height: 100%;
+		}
+	}
+</style>

BIN=BIN
static/img/location.png


BIN=BIN
static/img/mddef.jpg


BIN=BIN
static/img/store-zt.png


BIN=BIN
static/img/store.png