123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303 |
- <template>
- <view class="content">
- <!-- 顶部导航 -->
- <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 {
- 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 lang="scss" scoped>
- .content {
- display: flex;
- flex-direction: column;
- align-items: center;
- justify-content: center;
- padding: 0;
- .pageContent {
- width: 100%;
- flex: 1;
- .cover-view {
- position: absolute;
- top: calc(60% - 120rpx);
- left: calc(50% - 360rpx);
- background: rgba(255, 0, 0, 0.5);
- border-radius: 20rpx;
- .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>
|