You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
682 lines
16 KiB
682 lines
16 KiB
<template>
|
|
<view class="content">
|
|
<view class="cu-bar search topNav" :style="{'padding-top':padTop+'px'}">
|
|
|
|
<view class="">
|
|
|
|
</view>
|
|
<view class="search-form round">
|
|
<text class="cuIcon-search"></text>
|
|
<input class="searchPoint" type="text" v-model="search_value" label-width="200" :placeholder="$t('index.Search_appointment_history')"
|
|
confirm-type="search" />
|
|
</view>
|
|
|
|
</view>
|
|
<!-- 轮播图部分 -->
|
|
<view class="swiperCard" v-if="swiperData.swiperList.length!=0">
|
|
<view class="navStyle">
|
|
<u-swiper class="swiper" :radius="8" :height="150" :list="swiperData.swiperList"
|
|
:display-multiple-items="0" autoplay :circular="true" indicator indicatorMode="line"
|
|
imgMode="scaleToFill" bgColor="rgba(255,255,255,0)"></u-swiper>
|
|
</view>
|
|
</view>
|
|
|
|
<view class="section">
|
|
<!-- -->
|
|
<view class="card-nav">
|
|
<view class="bg-white navStyle shadow-warp">
|
|
<view class="flex">
|
|
|
|
<view class="flex-sub panel bg-white radius text-center align-center column" @click="subscribe">
|
|
<view class='subscribeImg'>
|
|
<!-- <view class="cu-tag badge">{{recordNum}}</view> -->
|
|
</view>
|
|
|
|
<text>{{$t('index.Go_appointment')}}</text>
|
|
<!-- alt+鼠标单击跳转/悬浮查看中文 -->
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
|
|
<view v-if="noneShow" class="none-box">
|
|
<image class="image-none" src="../../static/home/nothing.png" :alt="$t('index.change_station_present')" mode='scaleToFill' />
|
|
</view>
|
|
<view v-if="!noneShow">
|
|
<view class="cu-card" v-for="(item,index) in homeData.stationList" :key='item.id'>
|
|
<view class="cu-item shadow">
|
|
<view class="flex card-box flex-wrap">
|
|
<!-- <view class="flex"> -->
|
|
<view class="stateImg">
|
|
<image src="../../static/home/nullImgXs.svg" class="titleImg" mode="scaleToFill"
|
|
style="width: 100%;height: 100%;">
|
|
<view class="cu-tag badge">{{ item.status == 1 ? $t('index.Success') :
|
|
item.status == 2 ? $t('index.cancel') : item.status == 3 ? $t('index.failure')
|
|
: '--'}}</view>
|
|
</image>
|
|
</view>
|
|
<view class="stateFlex">
|
|
<view>
|
|
<view class="titleName"> {{item.carNo ? item.carNo : '--'}} </view>
|
|
</view>
|
|
<view>
|
|
<view class="addressInf">
|
|
{{item.vin}}
|
|
</view>
|
|
</view>
|
|
<view class="flex justify-between">
|
|
<view class="flex align-end">
|
|
<image class="battery-num" src="../../static/home/batteryNum.svg"
|
|
mode="scaleToFill"></image>
|
|
<view class="bat-use">{{item.swapFinishTime}}</view>
|
|
<!-- <view class="bat-total">/{{item.batteryVo.batTotal}}</view> -->
|
|
</view>
|
|
<view class="cu-capsule round">
|
|
<view class="flex align-end">
|
|
<image class="planeIcon" src="../../static/home/planeIcon.svg" mode="">
|
|
</image>
|
|
<!-- <view class="planeNum">{{ Math.round(item.distance * 10) / 10 }}km</view> -->
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<u-loadmore v-if="homeData.stationList.length>3" :status="status" line :loading-text="loadingText"
|
|
:loadmore-text="loadmoreText" :nomore-text="nomoreText" :marginTop='20' />
|
|
<view></view>
|
|
</view>
|
|
<!-- -->
|
|
<uv-modal ref="popup" :title="$t('index.Make_appointment')" @confirm="handle_confirm" @cancel="handle_cancel">
|
|
<view class="slot-content" style="width: 100%;">
|
|
<view class="">
|
|
<view class="flex solid-bottom padding-tb-lg justify-between" @click="getGender_car">
|
|
<view class="orderNumber">{{$t('index.License_plate')}}</view>
|
|
<view class="flex">
|
|
{{appoitmodel.carNo}}
|
|
<!-- <u-input border="none" v-model.trim="appoitmodel.carNo" placeholder=""
|
|
inputAlign='right'></u-input> -->
|
|
<uv-picker ref="popup_pick_car" :columns="canSwapFlag_car_list" keyName="carNo"
|
|
@confirm="confirmGender_carNo"></uv-picker>
|
|
<text class="lg text-gray cuIcon-right center-div"
|
|
style="vertical-align: bottom;"></text>
|
|
</view>
|
|
</view>
|
|
<view class="flex solid-bottom padding-tb-lg justify-between" @click="getGender">
|
|
<view class="orderNumber">{{$t('index.Optional_position')}}</view>
|
|
<view class="flex">
|
|
{{appoitmodel.name}}
|
|
<!-- <u-input border="none" v-model.trim="appoitmodel.name" placeholder=""
|
|
inputAlign='right'></u-input> -->
|
|
<!-- <u-picker :show="charg_show" :columns="canSwapFlag_list" :keyName="name"
|
|
@confirm="confirmGender" @cancel="cancelGender" :immediateChange='true'> </u-picker> -->
|
|
<uv-picker ref="popup_pick" :columns="canSwapFlag_list" keyName="name"
|
|
@confirm="confirmGender"></uv-picker>
|
|
<text class="lg text-gray cuIcon-right center-div"
|
|
style="vertical-align: bottom;"></text>
|
|
<!-- <text> > </text> -->
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</uv-modal>
|
|
</view>
|
|
</view>
|
|
<view class="mainBg"></view>
|
|
</template>
|
|
|
|
<script setup>
|
|
import config from '@/common/config/config.js';
|
|
// import {
|
|
// log
|
|
// } from '../../static/mqtt/dist/mqtt.min.js';
|
|
// console.log('========公用baseURL', config);
|
|
// import qqmapsdk from '../../static/utils/lib/qqmap-wx-jssdk.js';
|
|
// const QQMapWX = require('../../static/utils/lib/qqmap-wx-jssdk.js');
|
|
// const img =require('../../static/home/backBg.png')
|
|
import {
|
|
reactive,
|
|
ref,
|
|
getCurrentInstance
|
|
} from "vue";
|
|
import {
|
|
onLoad,
|
|
onShow,
|
|
|
|
} from "@dcloudio/uni-app";
|
|
// const instance = getCurrentInstance();
|
|
// const { proxy }= getCurrentInstance();//如全局挂在request需要导入使用import {getCurrentInstance} from "vue";
|
|
import { useI18n } from 'vue-i18n'//zz
|
|
const { t } = useI18n()//zz
|
|
const search_value = ref('')
|
|
const appoitmodel = ref({
|
|
name: '',
|
|
carNo: '',
|
|
vin: '',
|
|
customerId: uni.getStorageSync("userInfo").id
|
|
})
|
|
const swiperData = reactive({
|
|
swiperList: [],
|
|
})
|
|
const padTop = ref() //有无刘海屏头部的padding值
|
|
const homeData = ref({
|
|
stationList: [
|
|
// {
|
|
// id: 0,
|
|
// cover: '',
|
|
// operationStatus: 1,
|
|
// stationName: '测试站点',
|
|
// stationLocation: '',
|
|
// batteryVo: {
|
|
// swapBatTotal: 20,
|
|
// batTotal: 10
|
|
// },
|
|
// longitude: '',
|
|
// latitude: '',
|
|
// distance: 30
|
|
// },
|
|
],
|
|
stationBeing: [],
|
|
})
|
|
const noneShow = ref(false)
|
|
swiperData.swiperList = [
|
|
'https://cemicloud.cn/service-file/version/2023-10/d2579e5507fd7f066c0dab2777b21c14/%E6%9C%AA%E6%A0%87%E9%A2%98-2.jpg',
|
|
'https://cemicloud.cn/service-file/version/2023-10/d2579e5507fd7f066c0dab2777b21c14/%E6%9C%AA%E6%A0%87%E9%A2%98-2.jpg',
|
|
]
|
|
|
|
// 加载更多的数据
|
|
const status = ref('loadmore')
|
|
const loadingText = ref(t('index.Trying_load'))
|
|
const loadmoreText = ref(t('index.Pull_load_more'))
|
|
const nomoreText = ref(t('index.Pull_load_more'))
|
|
|
|
const page = ref(1) //触底加载增加的页数
|
|
let totalPages = ref()
|
|
let longiNum = ref()
|
|
let latiNum = ref()
|
|
var qqmapsdk
|
|
const cityRes = ref()
|
|
const radios = reactive([{
|
|
checked: true
|
|
},
|
|
{
|
|
checked: false
|
|
},
|
|
{
|
|
checked: false
|
|
}
|
|
]);
|
|
let recordNum = ref(0)
|
|
const notification = ref('')
|
|
const goShift = ref(false)
|
|
onLoad(async () => {
|
|
//获取胶囊按钮位置信息
|
|
const menuButton = uni.getMenuButtonBoundingClientRect();
|
|
let navBarHeight = menuButton.top;
|
|
padTop.value = navBarHeight
|
|
// qqmapsdk = new QQMapWX({
|
|
// key: config.iMapKey
|
|
// })
|
|
|
|
// getLocation() //获取位置信息
|
|
|
|
})
|
|
onShow(async () => {
|
|
if (!uni.getStorageSync("userInfo")) {
|
|
uni.showToast({
|
|
title: t('index.login_first'),
|
|
duration: 2000,
|
|
icon: 'error'
|
|
});
|
|
setTimeout(() => {
|
|
uni.navigateTo({
|
|
url: '../../pagesCenter/login/enter'
|
|
})
|
|
}, 1000)
|
|
return;
|
|
}
|
|
handle_charge()
|
|
handle_car()
|
|
getList()
|
|
})
|
|
|
|
const canSwapFlag_list = ref([])
|
|
const handle_charge = async () => {
|
|
await uni.$request({
|
|
url: config.baseUrl_charg + 'api/Charge/GetChargMonitorChargBinData',
|
|
}).then(res => {
|
|
// console.log(res, '充电仓信息');
|
|
let array = res.data.data
|
|
let new_array = []
|
|
for (var i = 0; i < array.length; i++) {
|
|
if (array[i].amtLock != 1 && array[i].status != 0 && array[i].canSwapFlag != 0) {
|
|
new_array.push(array[i])
|
|
}
|
|
}
|
|
canSwapFlag_list.value[0] = new_array
|
|
})
|
|
}
|
|
|
|
const canSwapFlag_car_list = ref([])
|
|
const handle_car = async () => {
|
|
await uni.$request({
|
|
url: config.baseUrl + 'api/AppCustomerVehicle/CustomerVehiclePage',
|
|
method: 'POST',
|
|
data: {
|
|
customerId: uni.getStorageSync("userInfo").id
|
|
}
|
|
}).then(res => {
|
|
// console.log(res, '车牌');
|
|
let array = res.data.rows
|
|
canSwapFlag_car_list.value[0] = array
|
|
// console.log(canSwapFlag_car_list, '车牌');
|
|
})
|
|
}
|
|
|
|
const charg_show = ref(false)
|
|
const confirmGender = (e) => {
|
|
// console.log(e,'e');
|
|
appoitmodel.value.binNos = e.value[0].no
|
|
appoitmodel.value.name = e.value[0].name
|
|
}
|
|
const confirmGender_carNo = (e) => {
|
|
// console.log(e, 'e');
|
|
appoitmodel.value.carNo = e.value[0].carNo
|
|
appoitmodel.value.vin = e.value[0].vin
|
|
}
|
|
const popup_pick = ref(null)
|
|
const popup_pick_car = ref(null)
|
|
const getGender = () => {
|
|
// console.log(canSwapFlag_list,'can');
|
|
// charg_show.value = true
|
|
popup_pick.value.open()
|
|
}
|
|
const getGender_car = () => {
|
|
popup_pick_car.value.open()
|
|
}
|
|
const cancelGender = () => {
|
|
charg_show.value = false
|
|
}
|
|
|
|
const getList = async () => {
|
|
await uni.$request({
|
|
url: config.baseUrl + "api/AmtOrderInfo/Page",
|
|
method: 'POST',
|
|
data: {
|
|
customerId: appoitmodel.value.customerId
|
|
},
|
|
}).then(res => {
|
|
homeData.value.stationList = res.data.data.rows
|
|
console.log(homeData.value.stationList, '-----');
|
|
}).catch((err) => {
|
|
console.log(err, 'err');
|
|
// uni.showToast({
|
|
// title: '加载失败',
|
|
// duration: 2000,
|
|
// icon: 'error'
|
|
// });
|
|
})
|
|
}
|
|
const searchPeo = () => {
|
|
//跳转获取搜索地址
|
|
uni.navigateTo({
|
|
url: './searchDestination/searchDestination'
|
|
})
|
|
|
|
}
|
|
const popup = ref(null)
|
|
const subscribe = () => {
|
|
popup.value.open()
|
|
}
|
|
const handle_confirm = async () => {
|
|
if (appoitmodel.value.carNo == '') {
|
|
uni.showToast({
|
|
title: t('index.license_plate_cannot_empty'),
|
|
duration: 2000,
|
|
icon: 'error'
|
|
});
|
|
reset_appint()
|
|
return
|
|
} else if (appoitmodel.value.name == '') {
|
|
uni.showToast({
|
|
title: t('index.position_cannot_empty'),
|
|
duration: 2000,
|
|
icon: 'error'
|
|
});
|
|
reset_appint()
|
|
return
|
|
} else {
|
|
await uni.$request({
|
|
url: config.baseUrl + "api/AmtOrderInfo/add",
|
|
method: 'POST',
|
|
data: appoitmodel.value
|
|
}).then(res => {
|
|
// console.log(res, '预约');
|
|
if (res.data.isSuccess) {
|
|
uni.showToast({
|
|
title: t('index.Reservation_successful'),
|
|
duration: 1000,
|
|
})
|
|
getList()
|
|
handle_charge()
|
|
} else {
|
|
uni.showToast({
|
|
title: res.data.msg,
|
|
duration: 2000,
|
|
icon: 'error'
|
|
});
|
|
}
|
|
}).catch((err) => {
|
|
uni.showToast({
|
|
title: t('index.Failed_appointment'),
|
|
duration: 2000,
|
|
icon: 'error'
|
|
});
|
|
})
|
|
reset_appint()
|
|
|
|
}
|
|
|
|
}
|
|
const reset_appint = () => {
|
|
appoitmodel.value.carNo = ''
|
|
appoitmodel.value.name = ''
|
|
appoitmodel.value.vin = ''
|
|
popup.value.close()
|
|
}
|
|
const handle_cancel = () => {}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.content {
|
|
// position: relative;
|
|
// background-color: #4C91FF;
|
|
// background: linear-gradient(180deg, #4C91FF 0%, #3698FD 11.35%, #73CBFD 21.65%, #94EBFF 37.35%, #EAF4F8 97.71%) no-repeat;
|
|
}
|
|
|
|
.mainBg {
|
|
width: 100vw;
|
|
position: fixed;
|
|
top: 0;
|
|
height: 100vh;
|
|
background: linear-gradient(180deg, #a4c9d3 0%, #a4c9d3 11.35%, #a4c9d3 21.65%, #ffffff 37.35%, #a4c9d3 97.71%);
|
|
z-index: -1;
|
|
}
|
|
|
|
.topNav {}
|
|
|
|
.cu-bar {
|
|
padding-bottom: 16rpx;
|
|
color: #fff;
|
|
justify-content: flex-start;
|
|
|
|
.search-form {
|
|
width: 664rpx;
|
|
// width: 334rpx;
|
|
background-color: #E2E2E2;
|
|
flex: 0;
|
|
}
|
|
|
|
.searchPoint {
|
|
width: 360rpx;
|
|
// width: 334rpx;
|
|
height: 36rpx;
|
|
}
|
|
}
|
|
|
|
.tabList {
|
|
.stateStyle {
|
|
padding: 8rpx 16rpx;
|
|
color: #808A96;
|
|
background-color: #E2E2E2;
|
|
margin-left: 16rpx;
|
|
font-size: 28rpx;
|
|
}
|
|
}
|
|
|
|
.section {
|
|
// background-color: #EAF4F8;
|
|
// background: linear-gradient(180deg, #4C91FF 0%, #3698FD 11.35%, #73CBFD 21.65%, #94EBFF 37.35%, #EAF4F8 97.71%) ;
|
|
// border-radius: 10px 10px 0 0;
|
|
// padding-top: 20rpx;
|
|
// position: relative;
|
|
// top: -10rpx;
|
|
}
|
|
|
|
|
|
.titleName {
|
|
color: #333333;
|
|
font-weight: 400;
|
|
font-size: 36rpx;
|
|
// letter-spacing: 1px;
|
|
}
|
|
|
|
.addressInf {
|
|
width: 442rpx;
|
|
color: #666666;
|
|
font-size: 28rpx;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
// margin:16rpx 0 0rpx 0;
|
|
}
|
|
|
|
.listInf {
|
|
width: 490rpx;
|
|
flex-direction: column;
|
|
justify-content: space-between;
|
|
height: 178rpx;
|
|
}
|
|
|
|
.mapBtn {
|
|
height: 178rpx;
|
|
align-items: flex-end;
|
|
// background-color: greenyellow;
|
|
}
|
|
|
|
.goMap {
|
|
width: 24rpx;
|
|
height: 24rpx;
|
|
background: url('/static/home/goMap.svg') no-repeat;
|
|
background-size: 100% 100%;
|
|
}
|
|
|
|
.moreLocal {
|
|
margin-left: 10rpx;
|
|
}
|
|
|
|
.regionName {
|
|
letter-spacing: 3rpx;
|
|
}
|
|
|
|
.stateImg {
|
|
width: 164rpx;
|
|
height: 164rpx;
|
|
background-color: #eee;
|
|
border-radius: 8rpx;
|
|
|
|
.titleImg {
|
|
border-radius: 8rpx;
|
|
}
|
|
}
|
|
|
|
|
|
.searchImg {
|
|
width: 72rpx;
|
|
height: 72rpx;
|
|
background: url('../../static/home/search.svg') no-repeat;
|
|
background-size: 100% 100%;
|
|
}
|
|
|
|
.chargeImg {
|
|
width: 72rpx;
|
|
height: 72rpx;
|
|
background: url('../../static/home/pay.svg') no-repeat;
|
|
background-size: 100% 100%;
|
|
}
|
|
|
|
.subscribeImg {
|
|
width: 72rpx;
|
|
height: 72rpx;
|
|
background: url('../../static/home/subscribe.svg') no-repeat;
|
|
background-size: 100% 100%;
|
|
position: relative;
|
|
|
|
.cu-tag {
|
|
background-color: #F2634F;
|
|
font-size: 24rpx;
|
|
font-weight: 400;
|
|
}
|
|
|
|
.cu-tag.badge {
|
|
border: 1px solid #fff;
|
|
right: -17rpx;
|
|
height: 34rpx;
|
|
}
|
|
|
|
}
|
|
|
|
.wrap {
|
|
width: 100%;
|
|
// display: flex;
|
|
// justify-content: center;
|
|
// align-item: center;
|
|
// height: 100%; /* 设置容器的高度为100% */
|
|
|
|
}
|
|
|
|
// .swiper {
|
|
// width: 100%;
|
|
// height: 100%;
|
|
// }
|
|
.stateFlex {
|
|
flex: 1;
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: space-between;
|
|
margin-left: 16rpx;
|
|
}
|
|
|
|
.cu-card>.cu-item {
|
|
margin: 0 32rpx 16rpx 32rpx;
|
|
}
|
|
|
|
.stateImg .cu-tag.badge {
|
|
width: 100rpx;
|
|
height: 40rpx;
|
|
top: 0rpx;
|
|
left: 0rpx;
|
|
right: 90rpx;
|
|
padding: 8rpx 0rpx;
|
|
background-image: linear-gradient(to right bottom, #A5C7FF, #2690FB);
|
|
border-radius: 4px;
|
|
font-size: 24rpx;
|
|
text-align: center;
|
|
}
|
|
|
|
.bg-blue {
|
|
background-image: linear-gradient(to right bottom, #A5C7FF, #2690FB);
|
|
}
|
|
|
|
.stateImg .cu-tag .bgPlane {
|
|
padding: 0rpx 8rpx;
|
|
background: rgba(255, 255, 255, 0);
|
|
}
|
|
|
|
.column {
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
|
|
.card-nav {
|
|
padding: 32rpx;
|
|
|
|
.navStyle {
|
|
border-radius: 16rpx;
|
|
}
|
|
}
|
|
|
|
.swiperCard {
|
|
margin: 16rpx 32rpx 0rpx 32rpx;
|
|
}
|
|
|
|
.cu-bar .search-form {
|
|
background-color: #fff;
|
|
}
|
|
|
|
.cu-card .cu-item,
|
|
.radius {
|
|
border-radius: 16rpx;
|
|
}
|
|
|
|
.none-box {
|
|
width: 100vw;
|
|
display: flex;
|
|
justify-content: center;
|
|
|
|
.image-none {
|
|
width: 320rpx;
|
|
height: 452rpx;
|
|
}
|
|
}
|
|
|
|
.battery-num {
|
|
width: 20rpx;
|
|
height: 32rpx;
|
|
}
|
|
|
|
.bat-use {
|
|
font-size: 32rpx;
|
|
font-weight: 400;
|
|
letter-spacing: 1px;
|
|
color: #333333;
|
|
margin-left: 16rpx;
|
|
line-height: 28rpx;
|
|
}
|
|
|
|
.bat-total {
|
|
font-size: 28rpx;
|
|
font-weight: 400;
|
|
letter-spacing: 1px;
|
|
color: #333333;
|
|
line-height: 26rpx;
|
|
}
|
|
|
|
.card-box {
|
|
padding: 32rpx;
|
|
box-shadow: -2px 2px 8px 0px #7AA7D026;
|
|
|
|
}
|
|
|
|
.planeIcon {
|
|
width: 32rpx;
|
|
height: 32rpx;
|
|
margin-right: 12rpx;
|
|
}
|
|
|
|
.planeNum {
|
|
font-size: 28rpx;
|
|
line-height: 28rpx;
|
|
font-weight: 400;
|
|
color: #4C91FF;
|
|
|
|
}
|
|
|
|
.panel {
|
|
padding: 32rpx;
|
|
}
|
|
|
|
.notification {
|
|
margin-top: 16rpx;
|
|
|
|
::v-deep .u-notice-bar {
|
|
border-radius: 16rpx;
|
|
}
|
|
|
|
::v-deep .u-icon text {
|
|
color: #808080 !important;
|
|
}
|
|
}
|
|
</style> |