|
@@ -1,52 +1,303 @@
|
|
|
<template>
|
|
|
<view class="content">
|
|
|
- <image class="logo" src="/static/logo.png"></image>
|
|
|
- <view class="text-area">
|
|
|
- <text class="title">{{title}}</text>
|
|
|
+ <!-- 顶部导航 -->
|
|
|
+ <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">
|
|
|
+ <button @click="scanCode" type="warn">扫码洗车</button>
|
|
|
+ </cover-view>
|
|
|
+ </map>
|
|
|
</view>
|
|
|
+ <!-- 客服弹窗 -->
|
|
|
+ <uni-popup ref="popup" type="bottom">
|
|
|
+ <view class="popup-box">
|
|
|
+ <view class="pop-top">
|
|
|
+ <view class="top-first pop-item">
|
|
|
+ 在线客服
|
|
|
+ </view>
|
|
|
+ <view @click="callPhone" class="pop-item">
|
|
|
+ 电话客服
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view @click="$refs.popup.close()" class="pop-cancle">
|
|
|
+ 取消
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </uni-popup>
|
|
|
</view>
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
+ import uniNavBar from "@/components/uni-nav-bar/uni-nav-bar.vue"
|
|
|
+ import uniPopup from '@/components/uni-popup/uni-popup.vue'
|
|
|
export default {
|
|
|
+ name: 'Index',
|
|
|
+ components: {
|
|
|
+ uniNavBar, uniPopup
|
|
|
+ },
|
|
|
data() {
|
|
|
return {
|
|
|
- title: 'Hello'
|
|
|
+ markers: [], // 标注点
|
|
|
+ centerX: '',
|
|
|
+ centerY: '',
|
|
|
+ markData: [{
|
|
|
+ id: '1',
|
|
|
+ name: '洗车机',
|
|
|
+ latitude: '34.29318',
|
|
|
+ longitude: '108.94712',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ id: '2',
|
|
|
+ name: '洗车机',
|
|
|
+ latitude: '34.29318',
|
|
|
+ longitude: '118.94712',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ id: '11',
|
|
|
+ name: '洗车机',
|
|
|
+ latitude: '34.29318',
|
|
|
+ longitude: '128.94712',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ id: '12',
|
|
|
+ name: '洗车机',
|
|
|
+ latitude: '38.29318',
|
|
|
+ longitude: '108.94712',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ id: '13',
|
|
|
+ name: '洗车机',
|
|
|
+ latitude: '44.29318',
|
|
|
+ longitude: '108.94712',
|
|
|
+ }
|
|
|
+ ]
|
|
|
}
|
|
|
},
|
|
|
+ onReady() {
|
|
|
+ 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()
|
|
|
},
|
|
|
methods: {
|
|
|
+ // 用户位置信息授权
|
|
|
+ getUserLocation() {
|
|
|
+ // 可以通过 wx.getSetting 先查询一下用户是否授权了 "scope.userLocation" 这个 scope
|
|
|
+ wx.getSetting({
|
|
|
+ success(res) {
|
|
|
+ if (!res.authSetting['scope.userLocation']) {
|
|
|
+ wx.authorize({
|
|
|
+ scope: 'scope.userLocation',
|
|
|
+ success() {
|
|
|
+ // 用户已经同意小程序使用位置信息,后续调用 wx.startRecord 接口不会弹窗询问
|
|
|
+ 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()
|
|
|
+ }
|
|
|
+ });
|
|
|
+ }
|
|
|
+ })
|
|
|
+ }
|
|
|
+ }
|
|
|
+ })
|
|
|
+ },
|
|
|
+ // 点击标点获取数据
|
|
|
+ markertap(e) {
|
|
|
+ var id = e.markerId
|
|
|
+ var name = this.data.markers[id - 1].name
|
|
|
+ console.log(name)
|
|
|
+ this.setData({
|
|
|
+ lingyuanName: name,
|
|
|
+ showDialog: true,
|
|
|
+ })
|
|
|
+ },
|
|
|
+ // 获取标记点数据
|
|
|
+ getMarkersData() {
|
|
|
+ let markers = [];
|
|
|
+ for (let item of this.markData) {
|
|
|
+ let marker = this.createMarker(item);
|
|
|
+ markers.push(marker)
|
|
|
+ }
|
|
|
+ return markers;
|
|
|
+ },
|
|
|
+ // 打开网点列表
|
|
|
+ intoList() {
|
|
|
+ console.log(1111)
|
|
|
+ },
|
|
|
+ // 联系客服
|
|
|
+ concatServicer() {
|
|
|
+ this.$refs.popup.open()
|
|
|
+ },
|
|
|
+ // 电话客服
|
|
|
+ callPhone () {
|
|
|
+ uni.makePhoneCall({
|
|
|
+ phoneNumber: '114'
|
|
|
+ })
|
|
|
+ },
|
|
|
+ // 扫码洗车
|
|
|
+ scanCode () {
|
|
|
+ uni.scanCode({
|
|
|
+ success: function (res) {
|
|
|
+ console.log('条码类型:' + res.scanType);
|
|
|
+ console.log('条码内容:' + res.result);
|
|
|
+ }
|
|
|
+ });
|
|
|
+ },
|
|
|
+ // 创建标记点
|
|
|
+ createMarker(point) {
|
|
|
+ let latitude = point.latitude;
|
|
|
+ let longitude = point.longitude;
|
|
|
+ let marker = {
|
|
|
+ iconPath: "/image/location.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,
|
|
|
+ }
|
|
|
+ };
|
|
|
+ return marker;
|
|
|
|
|
|
+ }
|
|
|
}
|
|
|
}
|
|
|
</script>
|
|
|
|
|
|
-<style>
|
|
|
+<style lang="scss" scoped>
|
|
|
.content {
|
|
|
display: flex;
|
|
|
flex-direction: column;
|
|
|
align-items: center;
|
|
|
justify-content: center;
|
|
|
- }
|
|
|
+ padding: 0;
|
|
|
|
|
|
- .logo {
|
|
|
- height: 200rpx;
|
|
|
- width: 200rpx;
|
|
|
- margin-top: 200rpx;
|
|
|
- margin-left: auto;
|
|
|
- margin-right: auto;
|
|
|
- margin-bottom: 50rpx;
|
|
|
- }
|
|
|
+ .pageContent {
|
|
|
+ width: 100%;
|
|
|
+ flex: 1;
|
|
|
|
|
|
- .text-area {
|
|
|
- display: flex;
|
|
|
- justify-content: center;
|
|
|
- }
|
|
|
+ .cover-view {
|
|
|
+ position: absolute;
|
|
|
+ top: calc(60% - 120rpx);
|
|
|
+ left: calc(50% - 360rpx);
|
|
|
+ background: rgba(255, 0, 0, 0.5);
|
|
|
+ border-radius: 20rpx;
|
|
|
|
|
|
- .title {
|
|
|
- font-size: 36rpx;
|
|
|
- color: #8f8f94;
|
|
|
+ .flex-wrp {
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ }
|
|
|
+
|
|
|
+ .flex-item {
|
|
|
+ width: 120rpx;
|
|
|
+ height: 120rpx;
|
|
|
+ font-size: 24rpx;
|
|
|
+ color: #fff;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ justify-content: center;
|
|
|
+ align-items: center;
|
|
|
+ .img {
|
|
|
+ width: 50rpx;
|
|
|
+ height: 50rpx;
|
|
|
+ margin-bottom: 10rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .cover-bottom {
|
|
|
+ position: absolute;
|
|
|
+ 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>
|