123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451 |
- <template>
- <view class="content">
- <view class="pofMap">
- <view :hidden="!isHide">
- <map class="map" scale="16" :latitude="Number(lat)" :longitude="Number(lng)" :markers="list"
- @markertap="bindMarker"></map>
- </view>
- <view class="put-away flex-center" @click="bindPut">
- {{!isHide?'打开地图':'收起地图'}}
- <image src="../static/images/down.png" class="putImg" :class="!isHide?'putImgAct':''"></image>
- </view>
- </view>
- <!-- <view class="hg572"></view> -->
- <scroll-view scroll-y="true" class="scrollview" :class="!isHide?'scrollview1':''" :scroll-top="scrollTop">
- <view class="" style="height: 20rpx;">
- </view>
- <no-none v-if="list.length<=0"></no-none>
- <block v-else>
- <view class="item" :class="index==act_index?'act':''" v-for="(item,index) of list" :key='index'
- @click="bindStore(index,item.id)">
- <view class="box-pack-between">
- <view class="flex-grow-1">
- <view class="title">
- {{item.title}}
- </view>
- <view class="address flex-y-center">
- <text class="iconfont icon-dizhi"></text>{{item.address}}
- </view>
- </view>
- <view class="flex-grow-0">
- <image class="item-logo" :src=" item.thumb? URL+item.thumb:'../../static/avatar_def.png'">
- </image>
- </view>
- </view>
- <view class="distance box-pack-between">
- <text>距你{{item.juli}}公里</text>
- <view class="Navigation" @click.stop="getNavigation(item)">
- <text class="iconfont icon-icon-test"></text>
- 导航到店
- </view>
- </view>
- </view>
- </block>
- </scroll-view>
- <block v-if="is_auth">
- <view class="model"></view>
- <view class="model flex-center">
- <view class="model_cotent">
- <view class="model_cotent_title">地理位置未授权</view>
- <view class="model_cotent_qd">需要您授权打开手机中的定位授权</view>
- <view class="flex">
- <view class="flex-grow-1 flex-center model_cotent_right" @click="cancel">
- 取消
- </view>
- <button class="model_cotent_shezhi flex-grow-1" @click="openSetting">去授权</button>
- </view>
- </view>
- </view>
- </block>
- <view class="hg130">
- </view>
- <view class="store-btn flex-center" @click="getStore">
- <view class="flex-center">
- 进入门店
- </view>
- </view>
- </view>
- </template>
- <script>
- import {
- mapState,
- mapGetters,
- mapMutations
- } from 'vuex'
- export default {
- data() {
- return {
- Putname: '',
- markers: [],
- lat: '',
- lng: '',
- setColor: "",
- URL: getApp().globalData.URL,
- is_auth: false,
- systemInfo: {},
- isHide: true,
- scrollTop: 0,
- list: [],
- act_index: null,
- }
- },
- onLoad() {
- // #ifdef H5
- this.is_auth = false;
- let latitude=31.11325;
- let longitude=121.38206
- this.shop(latitude, longitude);
- // #endif
- // #ifdef MP-WEIXIN
- this.getLocation();
- // #endif
-
- this.systemInfo = uni.getStorageSync('systemInfo');
- uni.setNavigationBarColor({
- frontColor: '#ffffff',
- backgroundColor: this.$store.state.color,
- })
- },
- onShareAppMessage(e) {
- return {}
- },
- methods: {
- getStore(e) {
- console.log(this.list);
- let store_id = this.list[this.act_index].store_id;
- this.$store.commit('SET_STORE_ID', store_id)
- this.$store.commit('SET_TEEN_INDEX', 1) //重置默认
- this.$store.commit('SET_TABLE_ID', "")
- this.$store.commit('SET_CATE_ID', '')
- this.$store.dispatch('getSystemStup', store_id);
- this.$store.dispatch('getOpenid', store_id);
- uni.switchTab({
- url: "/pages/index/index"
- })
- },
- getNavigation({
- latitude,
- longitude,
- title,
- address,
- }) {
- uni.openLocation({
- latitude: Number(latitude),
- longitude: Number(longitude),
- address: address,
- name: title,
- success: function() {
- console.log('success');
- },
-
- });
- },
- bindStore(index, id) {
- this.act_index = index;
- this.list.forEach((i) => {
- i.width = 40
- i.height = 50
- });
- let obj = this.list.find((v, i) => v.id === id);
- console.log(obj);
- this.lat = obj.latitude;
- this.lng = obj.longitude;
- this.list[index].width = 50;
- this.list[index].height = 60;
- },
- bindMarker(e) {
- let act_index = this.list.findIndex(item => item.id === e.detail.markerId);
- this.scrollTop = act_index * 100;
- this.act_index = act_index;
- },
- bindPut(e) {
- this.isHide = !this.isHide;
- },
-
-
- getLocation(e) {
- // let markers = [];
- uni.getLocation({
- type: 'gcj02',
- success: (res) => {
- console.log('getLocation', res);
- // this.lat = res.latitude;
- // this.lng = res.longitude;
- this.is_auth = false;
- // markers.push({
- // id: 1,
- // latitude: res.latitude,
- // longitude: res.longitude,
- // title: "res.data.title",
- // iconPath: "../static/images/storeIcon.png",
- // width: 40,
- // height: 50,
- // });
- // this.markers = markers;
- this.shop(res.latitude, res.longitude);
- },
- fail: (err) => {
- console.log(err, "err")
- if (err.errMsg === "getLocation:fail auth deny" ||
- err.errMsg === "getLocation:fail auth deny" || err.errMsg ===
- "getLocation:fail authorize no response") {
- this.is_auth = true
- }
- }
- });
- },
- shop(lat, lng) {
- this.$http.request('xcx/Accessory_store', {
- store_id: this.$store.state.store_id,
- lat: lat,
- lng: lng,
- }, "", "", false).then(res => {
- if (res.code == '200' && res.data.length > 0) {
- this.lat = res.data[0].lat;
- this.lng = res.data[0].lng;
- for (let i of res.data) {
- this.list.push({
- id: i.id,
- latitude: i.lat,
- longitude: i.lng,
- title: i.title,
- iconPath: "/shop/static/images/storeIcon.png",
- width: 40,
- height: 50,
- store_id: i.id,
- address: i.address,
- thumb: i.thumb,
- juli: i.juli,
- // label:{
- // borderRadius:20,
- // bgColor:"#fff",textAlign:'center',
- // padding:6,
- // content: i.title,color:'#000'
- // }
- })
- }
- } else {
- this.isHide = false
- }
- }).catch(err => {})
- },
- cancel() {
- uni.navigateBack({
- delta: 1
- })
- },
- openSetting(e) {
- uni.openSetting({
- success: (settingdata) => {
- console.log("settingdata", settingdata)
- if (settingdata.authSetting['scope.userLocation']) {
- this.getLocation();
- } else {
- uni.showModal({
- title: '提示',
- content: '获取权限失败,将无法进定位哦~',
- showCancel: false,
- })
- }
- },
- fail(failData) {
- console.log("failData", failData);
- },
- complete(finishData) {
- console.log("finishData", finishData);
- }
- })
- },
- }
- }
- </script>
- <style>
- page {
- width: 100%;
- background-color: #F1F1F1;
- }
- .pofMap {}
- .scrollview {
- height: calc(100vh - 705rpx);
- }
- page .scrollview1 {
- height: calc(100vh - 205rpx);
- }
- .hg130 {
- height: 130rpx;
- }
- .hg572 {
- height: 590rpx;
- }
- .putImgAct {
- transform: rotate(180deg);
- }
- .map {
- height: 500rpx;
- width: 100%;
- }
- .put-away {
- width: 100%;
- height: 72rpx;
- background: #ffffff;
- font-size: 24rpx;
- font-family: PingFang SC, PingFang SC-Regular;
- font-weight: 400;
- text-align: center;
- color: #666666;
- }
- .putImg {
- width: 20rpx;
- height: 10rpx;
- margin-left: 4rpx;
- }
- .item {
- width: 700rpx;
- padding: 30rpx 24rpx;
- background: #ffffff;
- border-radius: 12rpx;
- box-shadow: 0px 8rpx 20rpx 0px rgba(0, 0, 0, 0.24);
- margin: 0 auto;
- margin-bottom: 30rpx;
- }
- .item.act {
- box-shadow: 0px 8rpx 20rpx 0px rgba(252, 140, 4, 0.24);
- border: 3rpx solid #fc8c04;
- }
- .item .title {
- font-size: 32rpx;
- font-family: PingFang SC, PingFang SC-Medium;
- font-weight: 500;
- text-align: left;
- color: #333333;
- }
- .item .address {
- font-size: 24rpx;
- font-family: PingFang SC, PingFang SC-Medium;
- font-weight: 500;
- text-align: left;
- color: #999999;
- padding: 16rpx 0;
- }
- .item .distance {
- font-size: 24rpx;
- font-family: PingFang SC, PingFang SC-Regular;
- font-weight: 400;
- color: #fc8e09;
- }
- .item-logo {
- width: 94rpx;
- height: 94rpx;
- }
- .item .Navigation {
- font-size: 24rpx;
- font-family: PingFang SC, PingFang SC-Medium;
- font-weight: 500;
- color: #fc8c04;
- }
- .item .icon-icon-test {
- font-size: 22rpx;
- margin-right: 10rpx;
- }
- .store-btn {
- position: fixed;
- bottom: 0;
- width: 100%;
- height: 130rpx;
- background: #ffffff;
- box-shadow: 0px -10rpx 20rpx 0px rgba(195, 202, 213, 0.16);
- }
- .store-btn view {
- width: 700rpx;
- height: 98rpx;
- margin: 0 auto;
- background: #fc8c04;
- border-radius: 49rpx;
- box-shadow: 0px 0px 8rpx 0px rgba(51, 135, 255, 0.20);
- font-size: 32rpx;
- font-family: PingFang SC, PingFang SC-Medium;
- font-weight: 500;
- text-align: left;
- color: #ffffff;
- }
- .model {
- position: fixed;
- top: 0;
- width: 100%;
- height: 100%;
- background: rgba(0, 0, 0, 0.5);
- }
- .model_cotent {
- width: 600rpx;
- text-align: center;
- border-radius: 16rpx;
- background: #fff;
- overflow: hidden;
- }
- .model_cotent_title {
- font-size: 34rpx;
- font-weight: 700;
- margin: 40rpx 0 40rpx 0;
- }
- .model_cotent_qd {
- font-size: 30rpx;
- padding-bottom: 65rpx;
- border-bottom: 1rpx solid #f1f1f1;
- }
- .model_cotent_shezhi {
- margin: 0;
- font-weight: 700;
- font-size: 30rpx;
- color: #4e6ef2;
- padding: 30rpx 0;
- background-color: #fff;
- border-radius: none;
- border: none;
- }
- .model_cotent_right {
- border-right: 1rpx solid #F1F1F1;
- }
- .icon-dizhi {
- font-size: 24rpx;
- }
- </style>
|