|
@@ -1,20 +1,41 @@
|
|
|
<template>
|
|
|
<view class="box">
|
|
|
-
|
|
|
- <view class="shopline" v-for="(item,index) in queryShopList" @click="goDetail(item)">
|
|
|
+ <view class="regionBox">
|
|
|
+ <view class="regionLine" @click="gocity">
|
|
|
+ <view class="regionTxt">{{cityName}}</view>
|
|
|
+ <image src="../../static/timg/icon_arrow_def@2x.png" mode="" class="jtbelow"></image>
|
|
|
+ </view>
|
|
|
+ <view class="regionSx"></view>
|
|
|
+ <view class="regionLine">
|
|
|
+ <picker @change="bindPickerChange" :value="index" :range="areaList" range-key='area'>
|
|
|
+ <view class="regionTxt">{{areaName}}</view>
|
|
|
+ </picker>
|
|
|
+
|
|
|
+ <image src="../../static/timg/icon_arrow_def@2x.png" mode="" class="jtbelow"></image>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="shopline" v-for="(item,index) in queryShopList" >
|
|
|
<view class="shoplineLeft">
|
|
|
<image :src="item.photoPath" mode="" class="shopImg" v-if="item.photoPath"></image>
|
|
|
<image src="../../static/timg/noimg.png" mode="" class="shopImg" v-else></image>
|
|
|
</view>
|
|
|
<view class="shopright">
|
|
|
- <view class="shopTop">
|
|
|
- <view class="shopName">{{item.shopName}}</view>
|
|
|
- </view>
|
|
|
-
|
|
|
- <view class="brandsBg" v-if="item.brands">
|
|
|
-
|
|
|
- <view class="brands" v-for="(v,index2) in item.brands.split(',')">{{v}}</view>
|
|
|
- </view>
|
|
|
+ <view style="display: flex;justify-content: space-between;">
|
|
|
+ <view style="width: 410rpx;">
|
|
|
+ <view class="shopTop">
|
|
|
+ <view class="shopName">{{item.shopName}}</view>
|
|
|
+ </view>
|
|
|
+ <view class="brandsBg" v-if="item.brands">
|
|
|
+ <view class="brands" v-for="(v,index2) in item.brands.split(',')">{{v}}</view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="yuyuBtnBox" @click="goDetail(item)">
|
|
|
+ <view>预约</view>
|
|
|
+ <image style="width: 21rpx;height: 21rpx;margin-top: 4rpx;margin-left: 5rpx;" src="http://dmsphoto.66km.com.cn/thFiles/1D60717A-DC1D-43BC-BBFE-EE0FAFD1A470.png" mode=""></image>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+
|
|
|
+
|
|
|
|
|
|
<view class="shopTime"><span v-if="item.startTime">{{item.startTime}}</span> - <span
|
|
|
v-if="item.endTime">{{item.endTime}}</span> </view>
|
|
@@ -25,6 +46,16 @@
|
|
|
v-if="item.address">{{item.provinceName}}{{item.cityName}}{{item.areaName}}{{item.address}}</span>
|
|
|
<span v-if="item.distance&&item.distance!= '0.00'">{{item.distance}}km</span>
|
|
|
</view>
|
|
|
+ <view class="shopdhBox">
|
|
|
+ <view class="shopcall" @click="makePhoneCall(item.mobilePhone)">
|
|
|
+ <image class="shopcallIcon" src="http://dmsphoto.66km.com.cn/thFiles/AB063613-7B7A-4BD4-AF43-9ECC082FF5C6.png" mode=""></image>
|
|
|
+ <view class="shopcallTxt">{{item.mobilePhone}}</view>
|
|
|
+ </view>
|
|
|
+ <view class="shopcall" style="padding-left: 65rpx;" @click="goMap(item)">
|
|
|
+ <image class="shopcallIcon" src="http://dmsphoto.66km.com.cn/thFiles/5479ED98-61D3-41CB-8080-889E851FF6C0.png" mode=""></image>
|
|
|
+ <view class="shopcallTxt">一键导航</view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
|
|
|
</view>
|
|
|
|
|
@@ -56,32 +87,125 @@
|
|
|
},
|
|
|
queryShopList: '',
|
|
|
noMoreShow: false,
|
|
|
-
|
|
|
-
|
|
|
-
|
|
|
+ regionName:'',
|
|
|
+ twoRegionName:'',
|
|
|
+ cityName:'',
|
|
|
+ area:'',
|
|
|
+ cityCode:'',
|
|
|
+ areaList:'',
|
|
|
+ index:'',
|
|
|
+ areaName:'区域',
|
|
|
}
|
|
|
},
|
|
|
|
|
|
onLoad() {
|
|
|
var that = this;
|
|
|
+ uni.removeStorageSync('selectCity');
|
|
|
uni.getLocation({
|
|
|
type: 'gcj02',
|
|
|
success: function(res) {
|
|
|
console.log(res)
|
|
|
that.location.lat = res.latitude
|
|
|
that.location.lng = res.longitude
|
|
|
-
|
|
|
- that.getqueryShopList() //获取全部门店列表
|
|
|
+ that.getAdress();
|
|
|
+ //that.getqueryShopList() //获取全部门店列表
|
|
|
|
|
|
},
|
|
|
fail(err) {
|
|
|
|
|
|
}
|
|
|
});
|
|
|
+
|
|
|
+ },
|
|
|
+ onShow() {
|
|
|
+ const selectCity = uni.getStorageSync('selectCity');
|
|
|
+ if(selectCity){
|
|
|
+ this.cityName=selectCity.city
|
|
|
+ this.cityCode=selectCity.code
|
|
|
+ this.getqueryShopList() //获取门店列表
|
|
|
+ }
|
|
|
},
|
|
|
methods: {
|
|
|
-
|
|
|
-
|
|
|
+ gocity(){
|
|
|
+ uni.navigateTo({
|
|
|
+ url:'/pages/subPack/chooseCity'
|
|
|
+ })
|
|
|
+ },
|
|
|
+ bindPickerChange(e){
|
|
|
+ //console.log(e)
|
|
|
+ this.areaName=this.areaList[e.detail.value].area
|
|
|
+ this.area=this.areaList[e.detail.value].code
|
|
|
+ this.getqueryShopList() //获取门店列表
|
|
|
+ },
|
|
|
+ makePhoneCall(num){
|
|
|
+ uni.makePhoneCall({
|
|
|
+ phoneNumber:num
|
|
|
+ });
|
|
|
+ },
|
|
|
+ goMap(item){
|
|
|
+ var that = this;
|
|
|
+ if (!item.lat || !item.lng) {
|
|
|
+ uni.showToast({
|
|
|
+ title: '该店铺未设置定位',
|
|
|
+ icon: 'none',
|
|
|
+ duration: 3000
|
|
|
+ });
|
|
|
+ } else {
|
|
|
+ uni.openLocation({
|
|
|
+ latitude: Number(item.lat),
|
|
|
+ longitude: Number(item.lng),
|
|
|
+ name: item.shopName,
|
|
|
+ address: item.provinceName + item.cityName + item.areaName +
|
|
|
+ item.address,
|
|
|
+ success: function() {
|
|
|
+ console.log('success');
|
|
|
+ },
|
|
|
+ fail(err) {
|
|
|
+ console.log(err)
|
|
|
+ }
|
|
|
+ });
|
|
|
+ }
|
|
|
+ },
|
|
|
+ getAdress(){
|
|
|
+ var that=this;
|
|
|
+ var location = this.location.lng + ',' + this.location.lat
|
|
|
+ uni.request({
|
|
|
+ url: 'https://restapi.amap.com/v3/geocode/regeo',
|
|
|
+ data: {
|
|
|
+ key: '389a059efa3f499d9145eb84b1c3248d',
|
|
|
+ location: location,
|
|
|
+ },
|
|
|
+ dataType: "json",
|
|
|
+ success: (res) => {
|
|
|
+ console.log('定位城市', res);
|
|
|
+ if(res.data.regeocode){
|
|
|
+ console.log("城市名称")
|
|
|
+ console.log(res.data.regeocode.addressComponent.city)
|
|
|
+ // console.log(res.data.pois[0].cityname)
|
|
|
+ let cityname = res.data.regeocode.addressComponent.city;
|
|
|
+ var cityCode = res.data.regeocode.addressComponent.adcode
|
|
|
+ cityCode = cityCode.slice(0, -2)
|
|
|
+ cityCode = cityCode + '00'
|
|
|
+ this.cityName = cityname
|
|
|
+ this.cityCode = cityCode
|
|
|
+ that.getqueryShopList() //获取全部门店列表
|
|
|
+ that.getAreaList()
|
|
|
+
|
|
|
+ }else{
|
|
|
+ console.log("接口获取失败")
|
|
|
+ }
|
|
|
+
|
|
|
+ }
|
|
|
+ });
|
|
|
+ },
|
|
|
+ getAreaList(){
|
|
|
+ this.$http('opencarOwnerHome/shop-area-list', {
|
|
|
+ city:this.cityCode
|
|
|
+ }, 'GET').then(res => {
|
|
|
+ this.areaList=res.data
|
|
|
+
|
|
|
+ })
|
|
|
+ },
|
|
|
getqueryShopList() {
|
|
|
uni.showLoading({
|
|
|
title: '加载中'
|
|
@@ -90,11 +214,11 @@
|
|
|
|
|
|
lat: this.location.lat ? this.location.lat : '',
|
|
|
lng: this.location.lng ? this.location.lng : '',
|
|
|
-
|
|
|
-
|
|
|
+ city:this.cityCode,
|
|
|
+ area:this.area
|
|
|
}, 'GET').then(res => {
|
|
|
uni.hideLoading();
|
|
|
- this.queryShopList = res.data
|
|
|
+ this.queryShopList = res.data.shop
|
|
|
console.log('list+=', this.queryShopList);
|
|
|
|
|
|
})
|
|
@@ -123,12 +247,49 @@
|
|
|
</script>
|
|
|
|
|
|
<style scoped>
|
|
|
+.jtbelow{
|
|
|
+ width: 14rpx;height: 7rpx;
|
|
|
+ margin-left: 10rpx;margin-top: 10rpx;
|
|
|
+}
|
|
|
+.regionSx{
|
|
|
+ width: 2rpx;height: 33rpx;background:#EEEEEE;
|
|
|
+}
|
|
|
+.regionLine{
|
|
|
+ display: flex;justify-content: center;font-size: 26rpx;
|
|
|
+ width: 370rpx;line-height: 33rpx;color: #3C3C3C;
|
|
|
+}
|
|
|
+.regionBox{
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+ background: #FFFFFF;
|
|
|
+ padding: 20rpx 0;
|
|
|
+ margin-bottom: 20rpx;
|
|
|
+}
|
|
|
.box {
|
|
|
min-height: 100vh;
|
|
|
- background-color: #F4F5F7;
|
|
|
- padding-top: 20rpx;
|
|
|
+ background-color: #F4F5F7;
|
|
|
padding-bottom: 60rpx;
|
|
|
}
|
|
|
+ .shopdhBox{
|
|
|
+ display: flex;padding-top: 16rpx;
|
|
|
+ }
|
|
|
+ .shopcall{
|
|
|
+ display: flex;
|
|
|
+ }
|
|
|
+ .shopcallIcon{
|
|
|
+ width: 23rpx;height: 23rpx;margin-top: 5rpx;
|
|
|
+ }
|
|
|
+ .shopcallTxt{
|
|
|
+ color: #3C3C3C;font-size: 24rpx;
|
|
|
+ line-height: 33rpx;padding-left: 8rpx;
|
|
|
+ }
|
|
|
+ .yuyuBtnBox{
|
|
|
+ display: flex;
|
|
|
+ font-size: 24rpx;
|
|
|
+ color: #FF8113;
|
|
|
+ align-items: center;
|
|
|
+ justify-items: center;
|
|
|
+ }
|
|
|
|
|
|
.shopline {
|
|
|
margin: 0rpx 24rpx 20rpx;
|