第一次提交
This commit is contained in:
dt_2916866708
305
components/ChargingStationMap/ChargingStationMap.vue
Normal file
305
components/ChargingStationMap/ChargingStationMap.vue
Normal file
@@ -0,0 +1,305 @@
|
||||
<template>
|
||||
<view class="ChargingStationMap_body">
|
||||
<map @tap='mapTap' :scale="10" @callouttap='callouttap' :circles='circles' :show-location='true'
|
||||
@regionchange='regionchange' id="map_Id" @markertap='markertap' :markers="markers"
|
||||
:latitude="location.latitude" :longitude="location.longitude" class="ChargingStationMap">
|
||||
<cover-view slot="callout">
|
||||
<block v-for="(item,index) in markers" :key="index">
|
||||
<cover-view class="customCallout" :marker-id="item.id">
|
||||
<cover-image class="customCallout_img" src="../../static/customCallout.png"></cover-image>
|
||||
<cover-view></cover-view>
|
||||
<cover-view class="content flex column">
|
||||
<cover-view style="width: 100%;" class="flex">
|
||||
<cover-view class="content_label">
|
||||
闲 {{ item.idleNum}}
|
||||
</cover-view>
|
||||
<cover-view style="text-align: center;line-height: 26rpx; padding-top: 10rpx;"
|
||||
class="oneflex flex jc ac">
|
||||
￥{{tool.getnum(item.totalFee)}}</cover-view>
|
||||
</cover-view>
|
||||
<cover-view class="content_value flex oneflex ac ">
|
||||
<cover-view class="content_value_price oneflex"> 快 {{item.fastNum}}
|
||||
</cover-view>
|
||||
<cover-view class="content_value_price oneflex"> 慢
|
||||
{{item.slowNum}}</cover-view>
|
||||
</cover-view>
|
||||
</cover-view>
|
||||
</cover-view>
|
||||
</block>
|
||||
</cover-view>
|
||||
</map>
|
||||
<station-item :data="stationData" style="position: absolute;bottom: 50rpx;left: 0; right: 0; margin: 0 auto;"
|
||||
v-if="stationData"></station-item>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
// import {
|
||||
// page
|
||||
// } from "@/pages/home/AntiCorruptionLayer.js"
|
||||
import station from "@/api/station.js"
|
||||
import utils from "./static/utils.js"
|
||||
import stationItem from "@/components/stationItem/stationItem.vue"
|
||||
export default {
|
||||
name: "ChargingStationMap",
|
||||
components: {
|
||||
stationItem
|
||||
},
|
||||
props: {
|
||||
pageData: {
|
||||
type: Object,
|
||||
default: () => null
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
user: uni.getStorageSync('user'),
|
||||
showLabelLength: 30,
|
||||
standbyMarkers: [],
|
||||
markersTimer: null,
|
||||
stationData: null,
|
||||
circles: [],
|
||||
getListTimer: null,
|
||||
location: null,
|
||||
markers: [],
|
||||
mapContext: null,
|
||||
isGetRegion: false,
|
||||
};
|
||||
},
|
||||
created() {
|
||||
this.init()
|
||||
},
|
||||
methods: {
|
||||
onshow() {
|
||||
let that = this;
|
||||
this.mapContext.getCenterLocation({
|
||||
success(e) {
|
||||
let {
|
||||
latitude,
|
||||
longitude
|
||||
} = e;
|
||||
that.getRegion({
|
||||
detail: {
|
||||
centerLocation: {
|
||||
latitude,
|
||||
longitude
|
||||
}
|
||||
}
|
||||
})
|
||||
}
|
||||
})
|
||||
},
|
||||
mapTap() {
|
||||
this.stationData = null
|
||||
},
|
||||
getDetails(data) {
|
||||
if(!this.user) {
|
||||
uni.showToast({
|
||||
title: '登陆后可查看',
|
||||
icon: 'none',
|
||||
success() {
|
||||
}
|
||||
});
|
||||
return
|
||||
}
|
||||
station.getSiteDetails(data).then(res => {
|
||||
res.data = [res.data];
|
||||
this.tool.difTags(res);
|
||||
let data = new this.tool.Anticorrosive(res, page);
|
||||
this.stationData = data.list[0];
|
||||
})
|
||||
},
|
||||
//点击气泡
|
||||
callouttap(e) {
|
||||
try {
|
||||
let id = this.standbyMarkers.find(item => item.id == e.detail.markerId)['siteId'];
|
||||
this.getDetails({
|
||||
id,
|
||||
stationLat: this.location.latitude,
|
||||
stationLng: this.location.longitude,
|
||||
})
|
||||
} catch (e) {
|
||||
//TODO handle the exception
|
||||
}
|
||||
},
|
||||
filterMarks(markers) {
|
||||
if (this.markers.length) {
|
||||
let idList = this.markers.map(item => item.siteId);
|
||||
if (this.markers.length >= markers.length) {
|
||||
return markers.filter(item => !idList.includes(item.id))
|
||||
} else {
|
||||
return markers.filter(item => idList.includes(item.id))
|
||||
}
|
||||
} else {
|
||||
return null
|
||||
}
|
||||
},
|
||||
getRegion(e) {
|
||||
let that = this;
|
||||
return new Promise((re, rj) => {
|
||||
this.mapContext.getRegion({
|
||||
success: res => {
|
||||
let juli = utils.getDistance(res.northeast.latitude, res.northeast
|
||||
.longitude, res.northeast.latitude, res.southwest.longitude);
|
||||
that.$emit('update:pageData', Object.assign(that.pageData, {
|
||||
ranger: (juli / 2 / 1000) + 5,
|
||||
...e.detail.centerLocation
|
||||
}));
|
||||
re('success')
|
||||
},
|
||||
fail: (data, code) => {
|
||||
rj(JSON.stringify(data))
|
||||
}
|
||||
})
|
||||
})
|
||||
},
|
||||
regionchange(e) {
|
||||
if (e.type == 'end') {
|
||||
this.getRegion(e).then(res => {
|
||||
this.getList(1500)
|
||||
})
|
||||
}
|
||||
},
|
||||
markertap(e) {
|
||||
console.log(e)
|
||||
},
|
||||
//定位处理
|
||||
locationProcessing(markerList = []) {
|
||||
if (markerList && markerList.length) {
|
||||
let that = this
|
||||
let newMarkerList = markerList.map((item, index) => {
|
||||
let id = Number(`${item.id.substr(item.id.length - 9,item.id.length)}`);
|
||||
let configure = {
|
||||
siteId: item.id,
|
||||
id,
|
||||
width: 20,
|
||||
height: 20,
|
||||
latitude: item.stationLat,
|
||||
longitude: item.stationLng,
|
||||
iconPath: '../../static/tt.png',
|
||||
// joinCluster: true,
|
||||
customCallout: {
|
||||
anchorY: 0, // Y轴偏移量
|
||||
anchorX: 0, // X轴偏移量
|
||||
display: 'ALWAYS', // 一直展示
|
||||
}
|
||||
}
|
||||
let data = Object.assign(JSON.parse(JSON.stringify(item)), configure);
|
||||
if (markerList.length > this.showLabelLength) delete data.customCallout
|
||||
return data
|
||||
});
|
||||
return newMarkerList;
|
||||
} else {
|
||||
// throw 'markerList.length of 0'
|
||||
return []
|
||||
}
|
||||
},
|
||||
addMarkers(newMarkers) {
|
||||
this.mapContext.addMarkers({
|
||||
markers: newMarkers,
|
||||
clear: true,
|
||||
success() {
|
||||
console.log('添加成功')
|
||||
},
|
||||
fail(err) {
|
||||
console.log(err, '添加失败')
|
||||
}
|
||||
})
|
||||
},
|
||||
WeightlessnessReduction(array) {
|
||||
return [...new Set(array)]
|
||||
},
|
||||
//获取列表
|
||||
getList(time = 1000) {
|
||||
let that = this;
|
||||
if (this.getListTimer) {
|
||||
clearTimeout(this.getListTimer);
|
||||
this.getListTimer = null
|
||||
}
|
||||
this.getListTimer = setTimeout(() => {
|
||||
uni.showLoading({
|
||||
title: '电站加载中',
|
||||
mask: true
|
||||
});
|
||||
console.log(this.pageData,'this.pageDatathis.pageDatathis.pageData')
|
||||
station[this.user?'getMapStations':'getMapTouristSites'](this.pageData).then(res => {
|
||||
// this.markers = []
|
||||
console.log(res, '电站列表')
|
||||
clearTimeout(this.markersTimer);
|
||||
this.markersTimer = null;
|
||||
this.markersTimer = setTimeout(() => {
|
||||
let newMarkers = this.locationProcessing(res.data)
|
||||
this.removeMarkers(newMarkers);
|
||||
this.standbyMarkers = newMarkers;
|
||||
if (this.standbyMarkers.length > this.showLabelLength) {
|
||||
this.addMarkers(this.standbyMarkers)
|
||||
} else {
|
||||
this.markers = this.standbyMarkers;
|
||||
}
|
||||
uni.hideLoading();
|
||||
}, 500)
|
||||
})
|
||||
}, time)
|
||||
},
|
||||
removeMarkers(newMarkers) {
|
||||
let standbyMarkersIds = this.standbyMarkers.length ? this.standbyMarkers.map(item => String(item.id)) : [];
|
||||
let newMarkersIds = newMarkers.length ? newMarkers.map(item => String(item.id)) : [];
|
||||
let ids = standbyMarkersIds.filter(item => !newMarkersIds.includes(item));
|
||||
// this.markers = []
|
||||
this.mapContext.removeMarkers({
|
||||
markerIds: ids
|
||||
});
|
||||
// this.mapContext.removeMarkers();
|
||||
},
|
||||
//获取定位
|
||||
async getPosition() {
|
||||
console.log('位置更行')
|
||||
let location = uni.getStorageSync('location');
|
||||
if (location) {
|
||||
this.location = uni.getStorageSync('location');
|
||||
} else {
|
||||
this.location = {
|
||||
longitude: 116.38,
|
||||
latitude: 39.90,
|
||||
}
|
||||
}
|
||||
// await this.tool.userLocationChenk().then(res => {}).catch(err => {})
|
||||
// await this.tool.getLocation().then(res => {
|
||||
// this.location = uni.getStorageSync('location');
|
||||
// }).catch(err => {
|
||||
// this.location = {
|
||||
// longitude: 116.38,
|
||||
// latitude: 39.90,
|
||||
// }
|
||||
// });
|
||||
},
|
||||
moveToLocation(longitude, latitude) {
|
||||
setTimeout(() => {
|
||||
this.mapContext.moveToLocation({
|
||||
longitude,
|
||||
latitude,
|
||||
success() {
|
||||
console.log('移动成功')
|
||||
},
|
||||
fail(e) {
|
||||
console.log(e, '移动失败')
|
||||
},
|
||||
})
|
||||
}, 500)
|
||||
},
|
||||
//初始化
|
||||
async init() {
|
||||
let that = this;
|
||||
// await this.getPosition();
|
||||
this.mapContext = uni.createMapContext("map_Id", this);
|
||||
this.$nextTick(() => {
|
||||
this.onshow()
|
||||
})
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@import 'index.scss';
|
||||
</style>
|
||||
59
components/ChargingStationMap/index.scss
Normal file
59
components/ChargingStationMap/index.scss
Normal file
@@ -0,0 +1,59 @@
|
||||
.ChargingStationMap_body {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: relative;
|
||||
.ChargingStationMap {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
.customCallout {
|
||||
width: 218rpx;
|
||||
height: 108rpx;
|
||||
font-size: 22rpx;
|
||||
position: relative;
|
||||
padding: 10rpx;
|
||||
box-sizing: border-box;
|
||||
.triangle {
|
||||
width: 42rpx;
|
||||
height: 42rpx;
|
||||
background-color: #000000;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
right: 0;
|
||||
margin: 0 auto;
|
||||
transition:rotate(180deg) ;
|
||||
}
|
||||
.content {
|
||||
width: 100%;
|
||||
height: 87rpx;
|
||||
// background-color: #ffffff;
|
||||
border-radius: 10rpx;
|
||||
.content_value {
|
||||
padding: 0 20rpx;
|
||||
box-sizing: border-box;
|
||||
.content_value_price {
|
||||
color: #000000;
|
||||
font-size: 22rpx;
|
||||
}
|
||||
}
|
||||
.content_label {
|
||||
width: 89rpx;
|
||||
padding: 5rpx 5rpx;
|
||||
height: fit-content;
|
||||
background: #476ffa;
|
||||
border-radius: 10rpx 60rpx 60rpx 0rpx;
|
||||
opacity: 1;
|
||||
color: #ffffff;
|
||||
font-size: 26rpx;
|
||||
}
|
||||
}
|
||||
.customCallout_img {
|
||||
z-index: -1;
|
||||
width: 220rpx;
|
||||
height: 108rpx;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
right: 0;
|
||||
}
|
||||
}
|
||||
72
components/ChargingStationMap/static/utils.js
Normal file
72
components/ChargingStationMap/static/utils.js
Normal file
@@ -0,0 +1,72 @@
|
||||
function test() {
|
||||
return 1 + 1
|
||||
}
|
||||
/**
|
||||
* 获取两个经纬度之间的距离
|
||||
* @param lat1 第一点的纬度
|
||||
* @param lng1 第一点的经度
|
||||
* @param lat2 第二点的纬度
|
||||
* @param lng2 第二点的经度
|
||||
* @returns {Number}
|
||||
*/
|
||||
function getRad(d) {
|
||||
var PI = Math.PI;
|
||||
return d * PI / 180.0;
|
||||
}
|
||||
|
||||
function getDistance(lat1, lng1, lat2, lng2) {
|
||||
var f = getRad((lat1 + lat2) / 2);
|
||||
var g = getRad((lat1 - lat2) / 2);
|
||||
var l = getRad((lng1 - lng2) / 2);
|
||||
var sg = Math.sin(g);
|
||||
var sl = Math.sin(l);
|
||||
var sf = Math.sin(f);
|
||||
var s, c, w, r, d, h1, h2;
|
||||
var a = 6378137.0;
|
||||
var fl = 1 / 298.257;
|
||||
sg = sg * sg;
|
||||
sl = sl * sl;
|
||||
sf = sf * sf;
|
||||
s = sg * (1 - sl) + (1 - sf) * sl;
|
||||
c = (1 - sg) * (1 - sl) + sf * sl;
|
||||
w = Math.atan(Math.sqrt(s / c));
|
||||
r = Math.sqrt(s * c) / w;
|
||||
d = 2 * w * a;
|
||||
h1 = (3 * r - 1) / 2 / c;
|
||||
h2 = (3 * r + 1) / 2 / s;
|
||||
s = d * (1 + fl * (h1 * sf * (1 - sg) - h2 * (1 - sf) * sg));
|
||||
// s = s/1000;
|
||||
s = s.toFixed(2); //指定小数点后的位数。
|
||||
return s;
|
||||
}
|
||||
|
||||
function ab2str(buf) {
|
||||
return String.fromCharCode.apply(null, new Uint16Array(buf));
|
||||
}
|
||||
|
||||
function str2ab(str) {
|
||||
var buf = new ArrayBuffer(str.length * 2); // 2 bytes for each char
|
||||
var bufView = new Uint16Array(buf);
|
||||
for (var i = 0, strLen = str.length; i < strLen; i++) {
|
||||
bufView[i] = str.charCodeAt(i);
|
||||
}
|
||||
return buf;
|
||||
}
|
||||
function distance(res){
|
||||
let ALWAYS = [];
|
||||
res.markes.forEach((item,index)=>{
|
||||
let distance = utils.getDistance(res.coordinate.latitude,res.coordinate.longitude,item.latitude, item.longitude);
|
||||
if(distance<1000){
|
||||
ALWAYS.push(index)
|
||||
}
|
||||
});
|
||||
return ALWAYS
|
||||
}
|
||||
|
||||
module.exports = {
|
||||
distance:distance,
|
||||
test: test,
|
||||
ab2str: ab2str,
|
||||
str2ab: str2ab,
|
||||
getDistance: getDistance
|
||||
}
|
||||
40
components/orderItem/index.scss
Normal file
40
components/orderItem/index.scss
Normal file
@@ -0,0 +1,40 @@
|
||||
.orderItem {
|
||||
font-family: PingFang SC-Medium, PingFang SC;
|
||||
width: 691rpx;
|
||||
min-height: 183rpx;
|
||||
background: #ffffff;
|
||||
border-radius: 10rpx 10rpx 10rpx 10rpx;
|
||||
opacity: 1;
|
||||
margin: 0 auto;
|
||||
margin-top: 28rpx;
|
||||
box-shadow: 0rpx 2rpx 6rpx 0rpx rgba(0, 0, 0, 0.08);
|
||||
box-sizing: border-box;
|
||||
padding: 30rpx 24rpx;
|
||||
.orderItem_header {
|
||||
border-bottom: 1rpx solid #f1f2f7;
|
||||
padding-bottom: 19rpx;
|
||||
margin-bottom: 19rpx;
|
||||
.orderItem_header_number {
|
||||
font-size: 22rpx;
|
||||
color: #666666;
|
||||
}
|
||||
.orderItem_header_type {
|
||||
color: #36658d;
|
||||
font-size: 28rpx;
|
||||
}
|
||||
}
|
||||
.orderItem_bottom {
|
||||
.orderItem_bottom_time {
|
||||
color: #666666;
|
||||
font-size: 24rpx;
|
||||
}
|
||||
.orderItem_bottom_price {
|
||||
font-size: 38rpx;
|
||||
color: #ea0000;
|
||||
}
|
||||
.orderItem_bottom_name {
|
||||
color: #000000;
|
||||
font-size: 30rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
70
components/orderItem/orderItem.vue
Normal file
70
components/orderItem/orderItem.vue
Normal file
@@ -0,0 +1,70 @@
|
||||
<template>
|
||||
<view v-if="orderData" @click="goDetails" :class="orderData.orderStatus==2? 'orderItem charging ': 'orderItem '">
|
||||
<view class="orderItem_header flex">
|
||||
<view class="orderItem_header_number oneflex">{{orderData.id}}</view>
|
||||
<view class="orderItem_header_type"> {{ orderData.orderStatus|orderStatus}} </view>
|
||||
</view>
|
||||
<view class="orderItem_bottom">
|
||||
<view class=" flex ac">
|
||||
<view class=" orderItem_bottom_name oneflex">{{orderData.stationName}}</view>
|
||||
<view class="orderItem_bottom_price"> ￥{{ orderData.orderStatus==4? tool.getnum(orderData.payMoneyAcc,3) : tool.getnum(orderData.payMoneyPre,3) }} </view>
|
||||
</view>
|
||||
<view class="orderItem_bottom_time">{{orderData.startTime}}</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "orderItem",
|
||||
props:{
|
||||
orderData:{
|
||||
type:Object,
|
||||
default:()=>null
|
||||
},
|
||||
listIndex:{
|
||||
type:Number,
|
||||
default:0
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
|
||||
};
|
||||
},
|
||||
filters:{
|
||||
orderStatus(e){
|
||||
switch(Number(e)){
|
||||
case 1:
|
||||
return '启动中'
|
||||
case 2:
|
||||
return '充电中'
|
||||
case 3:
|
||||
return '停止中'
|
||||
case 4:
|
||||
return '已结束'
|
||||
default:
|
||||
return '数据错误'
|
||||
}
|
||||
}
|
||||
},
|
||||
methods:{
|
||||
goDetails(){
|
||||
if(this.orderData.orderStatus==2 || this.orderData.orderStatus==3){
|
||||
uni.navigateTo({
|
||||
url:`/Order/pages/charging/index?id=${this.orderData.id}`
|
||||
})
|
||||
}else{
|
||||
uni.navigateTo({
|
||||
url:`/Order/pages/index/index?id=${this.orderData.id}`
|
||||
})
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@import 'index.scss';
|
||||
</style>
|
||||
57
components/stationItem/index.scss
Normal file
57
components/stationItem/index.scss
Normal file
@@ -0,0 +1,57 @@
|
||||
.site-list-item {
|
||||
left: 0;
|
||||
right: 0;
|
||||
width: 95%;
|
||||
padding: 20rpx;
|
||||
box-sizing: border-box;
|
||||
background: #FFFFFF;
|
||||
box-shadow: 0rpx 2rpx 6rpx 2rpx rgba(191, 191, 191, 0.18);
|
||||
border-radius: 8rpx 8rpx 8rpx 8rpx;
|
||||
opacity: 1;
|
||||
margin: 0 auto;
|
||||
margin-top: 30rpx;
|
||||
.look{
|
||||
padding: 10rpx 30rpx;
|
||||
background: #F83D3D;
|
||||
border-radius: 56rpx 56rpx 56rpx 56rpx;
|
||||
opacity: 1;
|
||||
font-size: 24rpx;
|
||||
color: #FFFFFF;
|
||||
}
|
||||
.site-list-item-left {
|
||||
flex-shrink: 0;
|
||||
width: 125rpx;
|
||||
height: 125rpx;
|
||||
background: #F9F9F9;
|
||||
border-radius: 2rpx 2rpx 2rpx 2rpx;
|
||||
opacity: 1;
|
||||
margin-right: 15rpx;
|
||||
|
||||
image {
|
||||
width: 100%;
|
||||
border-radius: 10rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.site-list-item-right {
|
||||
overflow: hidden;
|
||||
flex: 1;
|
||||
|
||||
.name {
|
||||
font-size: 30rpx;
|
||||
color: #333333;
|
||||
}
|
||||
|
||||
.distance {
|
||||
color: #000000;
|
||||
font-size: 26rpx;
|
||||
}
|
||||
|
||||
.address {
|
||||
color: #666666;
|
||||
font-size: 26rpx;
|
||||
width: 100%;
|
||||
margin: 10rpx 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
44
components/stationItem/stationItem.vue
Normal file
44
components/stationItem/stationItem.vue
Normal file
@@ -0,0 +1,44 @@
|
||||
<template>
|
||||
<view class="site-list-item flex ">
|
||||
<view class="site-list-item-left">
|
||||
<image v-if="item.siteImages" mode="widthFix" :src="item.siteImages"></image>
|
||||
</view>
|
||||
<view class="site-list-item-right">
|
||||
<view class="name">{{item.siteName}}</view>
|
||||
<view class="address textov">{{item.address}}</view>
|
||||
<view style="margin-top: 15rpx;" class="flex jw ac">
|
||||
<view class="distance">距离：{{ Number(item.juli / 1000).toFixed(2) }}KM</view>
|
||||
<slot name="button">
|
||||
<view @click="$emit('stationClick',item)" class="look"> 立即查看</view>
|
||||
</slot>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "stationItem",
|
||||
props: {
|
||||
item: {
|
||||
type: Object,
|
||||
default: () => {}
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
|
||||
};
|
||||
},
|
||||
created() {
|
||||
|
||||
},
|
||||
methods: {
|
||||
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@import 'index.scss';
|
||||
</style>
|
||||
35
components/tabBar/index.scss
Normal file
35
components/tabBar/index.scss
Normal file
@@ -0,0 +1,35 @@
|
||||
.tabBar_contaier {
|
||||
background: #ffffff;
|
||||
padding-bottom: constant(safe-area-inset-bottom);
|
||||
padding-bottom: env(safe-area-inset-bottom);
|
||||
padding-top: 26rpx;
|
||||
.tabBar_item {
|
||||
image {
|
||||
width: 50rpx;
|
||||
height: 50rpx;
|
||||
}
|
||||
.tabBar_item_text{
|
||||
color: #CACACA;
|
||||
font-size: 20rpx;
|
||||
margin-top: 10rpx;
|
||||
}
|
||||
.select_tabBar_item_text{
|
||||
color: #121836;
|
||||
}
|
||||
}
|
||||
.tabBar_item:nth-child(3) {
|
||||
width: 50rpx;
|
||||
position: relative;
|
||||
image {
|
||||
position: absolute;
|
||||
width: 150rpx;
|
||||
height: 150rpx;
|
||||
top: -60rpx;
|
||||
padding: 10rpx;
|
||||
// left: -10rpx;
|
||||
background-color: #ffffff;
|
||||
border-radius: 50%;
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
102
components/tabBar/tabBar.vue
Normal file
102
components/tabBar/tabBar.vue
Normal file
@@ -0,0 +1,102 @@
|
||||
<template>
|
||||
<view class="tabBar_contaier flex around">
|
||||
<view @click="selectFn(item,index)" class="tabBar_item flex jc column ac" v-for="(item,index) in tabBarList " :key="index">
|
||||
<image :src="value==item.selectIndex?item.selectedIconPath:item.iconPath"></image>
|
||||
<view :class=" 'tabBar_item_text' + (value==item.selectIndex?' .select_tabBar_item_text':'') ">{{item.text}}</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import station from '@/api/station.js'
|
||||
export default {
|
||||
name: "tabBar",
|
||||
props:{
|
||||
value:{
|
||||
type:Number,
|
||||
default:0
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
tabBarList: [{
|
||||
"selectIndex":0,
|
||||
"iconPath": require('../../static/home.png'),
|
||||
"selectedIconPath": require('../../static/select-home.png'),
|
||||
"text": "首页"
|
||||
},
|
||||
{
|
||||
"selectIndex": 1,
|
||||
"iconPath": require('../../static/ChargingStation.png'),
|
||||
"selectedIconPath": require('../../static/select-ChargingStation.png'),
|
||||
"text": "电站"
|
||||
},
|
||||
{
|
||||
"selectIndex": 2,
|
||||
"iconPath": require('../../static/Scan.png'),
|
||||
"selectedIconPath": require('../../static/Scan.png'),
|
||||
"text": " "
|
||||
},
|
||||
// {
|
||||
// "selectIndex": 3,
|
||||
// "iconPath": require('../../static/order.png'),
|
||||
// "selectedIconPath": require('../../static/select-order.png'),
|
||||
// "text": "订单"
|
||||
// },
|
||||
// {
|
||||
// "selectIndex": 4,
|
||||
// "iconPath": require('../../static/Personal.png'),
|
||||
// "selectedIconPath": require('../../static/select-Personal.png'),
|
||||
// "text": "我的"
|
||||
// }
|
||||
]
|
||||
};
|
||||
},
|
||||
created() {
|
||||
console.log(this.tool);
|
||||
},
|
||||
methods:{
|
||||
async scanCode(){
|
||||
let res = await this.tool.scanCode();
|
||||
if(res.result){
|
||||
uni.navigateTo({
|
||||
url:`/ChargingStation/pages/placeOrder/index?type=qrCode&id=${res.result}`
|
||||
})
|
||||
}
|
||||
},
|
||||
selectFn(e,index){
|
||||
// if(index==2){
|
||||
// const token = uni.getStorageSync('Authorization');
|
||||
// if(!token){
|
||||
// uni.showModal({
|
||||
// title: '暂未登录',
|
||||
// content: '是否去登陆',
|
||||
// success: function(res) {
|
||||
// if (res.confirm) {
|
||||
// uni.redirectTo({
|
||||
// url: '/pages/login/index',
|
||||
// fail(e) {
|
||||
// console.log(e)
|
||||
// }
|
||||
// })
|
||||
// } else if (res.cancel) {
|
||||
// console.log('用户点击取消');
|
||||
// }
|
||||
// }
|
||||
|
||||
// });
|
||||
// return
|
||||
// }
|
||||
// this.scanCode()
|
||||
// }else{
|
||||
// this.$emit('input',e.selectIndex);
|
||||
// }
|
||||
this.$emit('input',e.selectIndex);
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@import 'index.scss'
|
||||
</style>
|
||||
Reference in New Issue
Block a user