|
|
@@ -37,13 +37,15 @@
|
|
|
|
|
|
<!-- 站点清单 start-->
|
|
|
<view class="w100 content_station">
|
|
|
- <view class="station_item" v-for="item in state.stationList" :key="item.id">
|
|
|
+ <WashStation v-for="item in state.stationList" :key="item.id" :item="item"></WashStation>
|
|
|
+<!-- <view class="station_item" v-for="item in state.stationList" :key="item.id"
|
|
|
+ @click="handleNavStation(item)">
|
|
|
<view class="station_item-title">
|
|
|
<text class="font13">{{ item.stationName }}</text>
|
|
|
</view>
|
|
|
|
|
|
<view class="station_item-status">
|
|
|
- <text class="station_item-status-text">{{ item.stationStatus=='Normal'?'营业中':'暂停营业' }}</text>
|
|
|
+ <text class="station_item-status-text">{{ item.stationStatus == 'Normal' ? '营业中' : '暂停营业' }}</text>
|
|
|
</view>
|
|
|
|
|
|
<view class="station_item-content">
|
|
|
@@ -53,8 +55,8 @@
|
|
|
<text class="station_item-content-left-label-left_idle">空闲</text>
|
|
|
<text class="station_item-content-left-label-left_count">{{ item.parkingNum }}/{{ item.parkingNum }}</text>
|
|
|
</view>
|
|
|
- <!-- <uv-tags size="small" class="station_item-content-left-label_tag" text="洗车机" plain shape="circle"></uv-tags>-->
|
|
|
- <view class="station_item-content-left-label_func">{{ ['清洁', '泡沫', '吸尘', '消毒', '充电']?.join(" | ") }}</view>
|
|
|
+ <!– <uv-tags size="small" class="station_item-content-left-label_tag" text="洗车机" plain shape="circle"></uv-tags>–>
|
|
|
+<!– <view class="station_item-content-left-label_func">{{ ['清洁', '泡沫', '吸尘', '消毒', '充电']?.join(" | ") }}</view>–>
|
|
|
</view>
|
|
|
<view class="station_item-content-left-position">
|
|
|
<uv-icon name="empty-address" size="20" color="#aaa"></uv-icon>
|
|
|
@@ -62,15 +64,15 @@
|
|
|
</view>
|
|
|
</view>
|
|
|
<view class="station_item-content-right">
|
|
|
- <uv-button circle type="primary" size="mini" plain @click="handleNavStation(item)">去洗车</uv-button>
|
|
|
-<!-- <uv-tags text="1222km" type="warning" plain size="mini"></uv-tags>-->
|
|
|
+ <uv-button circle type="primary" size="mini" plain @click.stop="handleNavMap(item)">{{ item.distance }}km</uv-button>
|
|
|
+ <!– <uv-tags text="1222km" type="warning" plain size="mini"></uv-tags>–>
|
|
|
</view>
|
|
|
</view>
|
|
|
|
|
|
<view class="station_item-distance">
|
|
|
<uv-text type="primary" :text="item.parkingFee" size="12"></uv-text>
|
|
|
</view>
|
|
|
- </view>
|
|
|
+ </view>-->
|
|
|
</view>
|
|
|
<!-- 站点清单 end-->
|
|
|
|
|
|
@@ -85,7 +87,7 @@
|
|
|
</view>-->
|
|
|
|
|
|
<login-bar class="w100 text-center loginbar"></login-bar>
|
|
|
- <!-- <tab-bar :index="0"></tab-bar>-->
|
|
|
+ <tab-bar :index="0"></tab-bar>
|
|
|
</view>
|
|
|
</template>
|
|
|
|
|
|
@@ -94,7 +96,9 @@ import {reactive, ref} from 'vue'
|
|
|
import {onHide, onShow, onLoad} from "@dcloudio/uni-app";
|
|
|
import TabBar from "@/components/tab-bar/index.vue";
|
|
|
import LoginBar from "@/components/login-bar/index.vue";
|
|
|
-import {get,post} from "@/utils/https";
|
|
|
+import WashStation from "@/components/station/index.vue"
|
|
|
+import {get, post} from "@/utils/https";
|
|
|
+import {calcMapDistance} from "@/utils/common"
|
|
|
|
|
|
const title = ref('Hello')
|
|
|
const qrcode_ref = ref()
|
|
|
@@ -128,52 +132,25 @@ const initState = () => ({
|
|
|
borderRadius: '40rpx',//圆角
|
|
|
},
|
|
|
notice: '中秋佳节，全场8折，快来洗车吧！',
|
|
|
- stationList: [
|
|
|
- {
|
|
|
- id: 1,
|
|
|
- name: '河源路洗车场2222',
|
|
|
- status: 1,
|
|
|
- total: 17,
|
|
|
- idle: 2,
|
|
|
- funs: ['清洁', '泡沫', '吸尘', '消毒', '充电'],
|
|
|
- address: '深圳市宝安区河源路12345号',
|
|
|
- tips: '半小时内免停车费，超时领取停车券免费',
|
|
|
- },
|
|
|
- {
|
|
|
- id: 2,
|
|
|
- name: '河源路洗车场2222',
|
|
|
- status: 1,
|
|
|
- total: 17,
|
|
|
- idle: 2,
|
|
|
- funs: ['清洁', '泡沫', '吸尘', '消毒', '充电'],
|
|
|
- address: '深圳市宝安区河源路12345号',
|
|
|
- tips: '半小时内免停车费，超时领取停车券免费',
|
|
|
- },
|
|
|
- {
|
|
|
- id: 3,
|
|
|
- name: '河源路洗车场2222',
|
|
|
- status: 1,
|
|
|
- total: 17,
|
|
|
- idle: 2,
|
|
|
- funs: ['清洁', '泡沫', '吸尘', '消毒', '充电'],
|
|
|
- address: '深圳市宝安区河源路12345号',
|
|
|
- tips: '半小时内免停车费，超时领取停车券免费',
|
|
|
- }
|
|
|
- ]
|
|
|
+ stationList: [],
|
|
|
+ location: {
|
|
|
+ latitude: 0,
|
|
|
+ longitude: 0,
|
|
|
+ }
|
|
|
})
|
|
|
|
|
|
const state = reactive(initState())
|
|
|
|
|
|
onLoad((e: any) => {
|
|
|
- let query = decodeURIComponent(e.q);
|
|
|
- let scanTime =e.scancode_time;
|
|
|
- console.log(query)
|
|
|
- if(query){
|
|
|
+ let query = decodeURIComponent(e);
|
|
|
+ let scanTime = e.scancode_time;
|
|
|
+ console.log(e)
|
|
|
+/* if (query) {
|
|
|
uni.showToast({
|
|
|
- title:query,
|
|
|
- duration:5000
|
|
|
+ title: query,
|
|
|
+ duration: 5000
|
|
|
})
|
|
|
- }
|
|
|
+ }*/
|
|
|
|
|
|
})
|
|
|
|
|
|
@@ -182,32 +159,73 @@ onShow(() => {
|
|
|
if (!gd.token) {
|
|
|
console.log(gd)
|
|
|
}
|
|
|
- loadWashStationList();
|
|
|
+ loadCurrentLocation();
|
|
|
+
|
|
|
+
|
|
|
});
|
|
|
|
|
|
onHide(() => {
|
|
|
Object.assign(state, initState());
|
|
|
})
|
|
|
|
|
|
+/**
|
|
|
+ * 获取当前的地理位置
|
|
|
+ */
|
|
|
+const loadCurrentLocation = () => {
|
|
|
+ uni.authorize({
|
|
|
+ scope: 'scope.userLocation',
|
|
|
+ success() {
|
|
|
+ uni.getLocation({
|
|
|
+ type: 'gcj02', //返回可以用于uni.openLocation的经纬度
|
|
|
+ success: res => {
|
|
|
+ state.location = {
|
|
|
+ latitude: res.latitude,
|
|
|
+ longitude: res.longitude
|
|
|
+ }
|
|
|
+ loadWashStationList();
|
|
|
+ console.log("loadCurrentLocation location", res)
|
|
|
+ }
|
|
|
+ });
|
|
|
+ },
|
|
|
+ fail(e) {
|
|
|
+ loadWashStationList();
|
|
|
+ console.log("authorize location fail", e)
|
|
|
+ }
|
|
|
+ })
|
|
|
+
|
|
|
+}
|
|
|
|
|
|
const loadWashStationList = () => {
|
|
|
- post(`/wash-station/listStation`,{pageSize:5}).then((res:any)=>{
|
|
|
+ post(`/wash-station/listStation`, {pageSize: 5}).then((res: any) => {
|
|
|
console.log(res)
|
|
|
- let {list,total} = res;
|
|
|
+ let {list, total} = res;
|
|
|
+ list.forEach((station: any) => {
|
|
|
+ if (station.location) {
|
|
|
+ let stationLocation = JSON.parse(station.location);
|
|
|
+ station.distance = calcMapDistance(state.location.latitude,state.location.longitude,stationLocation.stationLat,stationLocation.stationLng);
|
|
|
+ }
|
|
|
+ })
|
|
|
state.stationList = list;
|
|
|
})
|
|
|
}
|
|
|
|
|
|
+const handleNavMap = (station:any) => {
|
|
|
+ let location = JSON.parse(station.location)
|
|
|
+ uni.openLocation({
|
|
|
+ latitude: location.stationLat,
|
|
|
+ longitude: location.stationLng,
|
|
|
+ scale: 18,
|
|
|
+ name: station.stationName,
|
|
|
+ address: station.address,
|
|
|
+ });
|
|
|
+}
|
|
|
+
|
|
|
const handleNavStation = (station: any) => {
|
|
|
- getApp<any>().globalData.pageData = {station}
|
|
|
+ getApp<any>().globalData.pageData = {station}
|
|
|
uni.navigateTo({
|
|
|
url: '/pages-wash/station/index?id='+station.id
|
|
|
})
|
|
|
-}
|
|
|
-const handleGotoGuide = () => {
|
|
|
- uni.navigateTo({
|
|
|
- url: '/pages/guide/index'
|
|
|
- })
|
|
|
+ console.log(station)
|
|
|
}
|
|
|
|
|
|
</script>
|
|
|
@@ -226,7 +244,7 @@ const handleGotoGuide = () => {
|
|
|
.logo {
|
|
|
height: 200rpx;
|
|
|
width: 200rpx;
|
|
|
- margin: 200 rpx auto 50 rpx;
|
|
|
+ margin: 200rpx auto 50rpx;
|
|
|
}
|
|
|
|
|
|
.menu-content {
|
|
|
@@ -258,107 +276,7 @@ const handleGotoGuide = () => {
|
|
|
text-align: center;
|
|
|
}
|
|
|
|
|
|
-.station_item {
|
|
|
- display: flex;
|
|
|
- flex-direction: column;
|
|
|
- border-radius: 10rpx;
|
|
|
- margin-top: 20rpx;
|
|
|
- padding: 15rpx;
|
|
|
- background: #fafafa;
|
|
|
- position: relative;
|
|
|
-
|
|
|
- &-title {
|
|
|
- display: inline-flex;
|
|
|
- padding-left: 5px;
|
|
|
- }
|
|
|
-
|
|
|
- &-status {
|
|
|
- position: absolute;
|
|
|
- right: 6rpx;
|
|
|
- top: 0;
|
|
|
-
|
|
|
- &-text {
|
|
|
- background: $uni-color-primary;
|
|
|
- padding: 6rpx;
|
|
|
- color: white;
|
|
|
- font-size: 12px;
|
|
|
- border-radius: 20rpx 6rpx;
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- &-content {
|
|
|
- display: flex;
|
|
|
- justify-content: space-between;
|
|
|
- width: 100%;
|
|
|
-
|
|
|
- &-left {
|
|
|
- flex: 1;
|
|
|
- display: flex;
|
|
|
- flex-direction: column;
|
|
|
- padding: 5rpx;
|
|
|
-
|
|
|
- &-label {
|
|
|
- padding: 4rpx 8rpx;
|
|
|
- display: inline-flex;
|
|
|
- margin-top: 8rpx;
|
|
|
- //justify-content: space-between;
|
|
|
-
|
|
|
- &-left {
|
|
|
- //border: 1px solid $uni-color-primary;
|
|
|
- border-radius: 4rpx;
|
|
|
-
|
|
|
- &_idle {
|
|
|
- background: $uni-color-primary;
|
|
|
- padding: 6rpx;
|
|
|
- color: white;
|
|
|
- border-radius: 4rpx;
|
|
|
- }
|
|
|
-
|
|
|
- &_count {
|
|
|
- //border-radius: 4rpx;
|
|
|
- margin-left: 10px;
|
|
|
- color: $uni-color-primary;
|
|
|
- font-size: 13px;
|
|
|
- }
|
|
|
-
|
|
|
- &_tag {
|
|
|
- width: 30rpx;
|
|
|
- }
|
|
|
-
|
|
|
- }
|
|
|
-
|
|
|
-
|
|
|
- &_func {
|
|
|
- padding-left: 50rpx;
|
|
|
- font-size: 24rpx;
|
|
|
- color: #aaa;
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- &-position {
|
|
|
- display: inline-flex;
|
|
|
- font-size: 24rpx;
|
|
|
- margin-top: 8rpx;
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- &-right {
|
|
|
- width: 120rpx;
|
|
|
- display: flex;
|
|
|
- flex-direction: column;
|
|
|
- justify-content: center;
|
|
|
- align-content: center;
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- &-distance {
|
|
|
- font-size: 24rpx;
|
|
|
- padding-left: 5px;
|
|
|
- margin-top: 8rpx;
|
|
|
- }
|
|
|
-}
|
|
|
-
|
|
|
-.loginbar{
|
|
|
+.loginbar {
|
|
|
position: fixed;
|
|
|
bottom: 20rpx;
|
|
|
}
|
zuypeng