shuolol/kccharge-app
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

first

Browse Source
This commit is contained in:
dev
2025-10-28 09:25:46 +08:00
commit 9431e325df
1089 changed files with 143917 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
pages/my-car/add-my-car/add-my-car.vue
+377
View File
@@ -0,0 +1,377 @@
<template>
<s-layout navbar="normal" onShareAppMessage>
<view class="block">
<view class="carInfo">
<image src="https://kxcharge.oss-cn-beijing.aliyuncs.com/add-car-image.png" mode="aspectFit"></image>
<view class="carType">
<text class="title">车型</text>
<text>新能源汽车</text>
</view>
<view class="plateNum" @click="inputPlate">
<text class="title">车牌号</text>
<view class="num">
<text class="numItem" v-for="(item,index) in blockArr" :key="index">{{item || ''}}</text>
</view>
</view>
<view class="isDefault" v-if="!isEdit">
<text class="title">是否为默认充电车辆</text>
<uv-switch v-model="defaultCar"></uv-switch>
</view>
<view class="carType" v-else>
<text class="title">车辆识别代码</text>
<text>未认证</text>
</view>
</view>
<uv-button type="primary" text="添加车辆" shape="circle" @click="addCar('add')" v-if="!isEdit"></uv-button>
<view v-else>
<uv-button type="primary" text="编辑车辆" shape="circle" @click="addCar('edit')"></uv-button>
<view class="delCar" @click="onDelCar">删除车辆</view>
</view>
<!-- <text @click="goBack" class="goBack">我再想想</text> -->
<uv-popup ref="popup" mode="bottom" @change="onPopupChange">
<view class="popup-content">
<view class="btn">
<text @click="()=>$refs.popup.close()">取消</text>
<text @click="submitPlate">确定</text>
</view>
<view>
<text class="label">车牌号</text>
<view class="num">
<text class="text-block" v-for="(item,index) in popBlockArr" :key="index">{{item || ''}}</text>
</view>
</view>
<uv-keyboard :autoChange="true" ref="uKeyboard" mode="car" :overlay="false" @change="clickKeyboard($event)"
:tooltip="false" @backspace="backspace"></uv-keyboard>
</view>
</uv-popup>
<uv-modal ref="modal" content='是否确认删除该车辆?' title='提示' :showCancelButton="true" class="modal"
@cancel="showModal = false" @confirm="submitDel"></uv-modal>
</view>
</s-layout>
</template>
<script>
import {
delCar,
createCar,
editCar
} from "@/sheep/api/charge/member"
export default {
data() {
return {
defaultCar: true,
showModal: false,
plateValue: '',
isFocus: false,
time1: 0,
time2: 0,
time3: 0,
blockArr: new Array(8),
popBlockArr: new Array(8),
isEdit: false,
carId: '',
};
},
methods: {
clickKeyboard(event) {
if (this.plateValue.length >= 8) {
return;
}
this.plateValue += event;
this.plateValue.split("").forEach((k, index) => {
this.popBlockArr[index] = k;
});
},
backspace() {
this.popBlockArr = this.popBlockArr.map((item, index, arr) => {
if (!arr[index + 1]) item = '';
return item;
});
this.plateValue = this.popBlockArr.join("")
// console.log('this.popBlockArr: ',this.popBlockArr, this.plateValue);
},
addCar(type) {
if (!this.plateValue) {
uni.showToast({
icon: 'none',
title: '请输入车牌号'
})
return;
}
const data = {
plateNumber: this.plateValue,
isDefault: Number(this.defaultCar),
plateType: 1
}
if (this.carId) {
data['id'] = this.carId;
}
try {
const method = type == "add" ? createCar : editCar;
const tip = type == "add" ? '添加' : '编辑'
method(data).then(res => {
console.log('res: ', res);
uni.showToast({
title: `${tip}成功!`,
icon: 'success'
})
// 使用 setTimeout 延迟跳转
setTimeout(() => {
uni.navigateTo({
url: `/pages/my-car/my-car`
});
}, 1500); // 2000 毫秒 = 2 秒
}).catch(err => {
uni.showToast({
title: `${tip}失败!`,
icon: 'error'
})
})
} catch (e) {
uni.showToast({
title: '添加失败!',
icon: 'error'
})
}
},
goBack() {
uni.navigateBack();
},
inputPlate() {
// if (this.isEdit) return;
this.$refs.popup.open()
this.$refs.uKeyboard.open()
},
onPopupChange(e) {
if (e) {
this.open()
} else {
this.close()
}
},
open() {
this.$refs.popup.open();
this.time2 = setTimeout(() => {
this.isFocus = true;
}, 1000)
},
close() {
this.isFocus = false;
this.plateValue = '';
},
submitPlate() {
if (!this.plateValue) {
uni.showToast({
icon: 'none',
title: '输入的车牌号是否为空'
})
return;
}
// const plateArr = this.plateValue.split("")
if (this.plateValue.length !== 8 && this.plateValue.length !== 7) {
uni.showToast({
icon: 'none',
title: '输入的车牌号有误，请重新输入'
})
return;
}
this.$refs.popup.close()
this.$refs.uKeyboard.close()
this.plateValue.split("").forEach((k, index) => {
this.blockArr[index] = k;
});
this.blockArr = this.blockArr.filter(k => k);
},
onDelCar() {
this.$refs.modal.open();
},
submitDel() {
try {
delCar(this.carId).then(res => {
this.$refs.modal.close();;
uni.showToast({
title: '删除成功!',
icon: 'success'
})
// 使用 setTimeout 延迟跳转
setTimeout(() => {
uni.navigateTo({
url: `/pages/my-car/my-car`
});
}, 1500); // 2000 毫秒 = 2 秒
}).catch(err => {
console.log('err: ', err);
uni.showToast({
title: '删除失败!',
icon: 'error'
})
})
} catch (e) {
//TODO handle the exception
uni.showToast({
title: '删除失败!',
icon: 'error'
})
}
}
},
beforeDestroy() {
clearTimeout(this.time1);
clearTimeout(this.time2);
clearTimeout(this.time3);
},
onLoad(options) {
if (options.carInfo) {
console.log('options.carInfo: ', options.carInfo);
const info = JSON.parse(options.carInfo);
this.defaultCar = info.isDefault
this.plateValue = info.plateNumber;
this.plateValue.split("").forEach((k, index) => {
this.blockArr[index] = k;
});
this.blockArr = this.blockArr.filter(k => k);
this.popBlockArr = this.blockArr;
this.isEdit = true;
this.carId = info.id;
}
}
}
</script>
<style lang="scss" scoped>
page {
background-color: #f0f3f8;
}
.block {
height: 100vh;
padding: 15rpx;
.carInfo {
background-color: #fff;
border-radius: 20rpx;
image {
width: 730rpx;
height: 365rpx;
}
.carType {
padding: 0 30rpx 30rpx;
display: flex;
justify-content: space-between;
font-size: 35rpx;
}
.title {
color: #999999;
margin-right: 25rpx;
}
.plateNum {
display: flex;
align-items: center;
justify-content: space-between;
padding: 0 15rpx 30rpx;
.num {
display: flex;
}
.numItem {
display: inline-block;
margin-right: 10rpx;
width: 60rpx;
background-color: #f2f2f2;
height: 70rpx;
line-height: 50rpx;
text-align: center;
padding: 13rpx;
}
}
.isDefault {
padding: 0 25rpx 30rpx 15rpx;
display: flex;
justify-content: space-between;
align-items: center;
}
}
.delCar {
margin-top: 25rpx;
display: flex;
justify-content: center;
align-items: center;
color: #797979;
font-size: 30rpx;
}
.uv-button {
margin-top: 40rpx;
width: 720rpx !important;
height: 110rpx !important;
.uv-button__text {
font-size: 35rpx !important;
}
}
.goBack {
display: flex;
justify-content: center;
align-items: center;
color: #797979;
font-size: 40rpx;
margin: 30rpx auto;
}
.popup-content {
padding: 35rpx 35rpx 450rpx;
position: relative;
.label {
font-size: 22rpx;
color: #797979;
}
.btn {
color: #1890ff;
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 50rpx;
}
.num {
display: flex;
justify-content: space-around;
align-items: center;
}
.text-block {
display: inline-block;
margin-right: 10rpx;
width: 60rpx;
background-color: #f2f2f2;
height: 70rpx;
line-height: 80rpx;
text-align: center;
}
.uv-popup {
position: absolute;
bottom: 0;
.uv-popup__content {
padding: 0;
}
}
}
}
</style>
pages/my-car/my-car.vue
+242
View File
@@ -0,0 +1,242 @@
<template>
<s-layout title="我的车辆" navbar="normal" onShareAppMessage>
<view class="block">
<uv-loading-icon text="加载中" v-if="isShowPageLoading"></uv-loading-icon>
<scroll-view scroll-y="true" v-else class="scroll">
<view class="noCar" v-if="isShowNoCar">
<text class="title">您还没有添加车辆</text>
<text class="tip">添加车辆可以获得更贴心的服务</text>
<image src="https://kxcharge.oss-cn-beijing.aliyuncs.com/mini/car-default.png" mode="aspectFit"></image>
<uv-button type="primary" text="添加车辆" shape="circle" @click="goToAddCar"></uv-button>
</view>
<view v-else>
<view class="scrollItem" v-for="(item,index) in carList" :key="item.id" @click="goToInfo(item)">
<text class="plateNum">{{item.plateNumber}}</text>
<view class="info">
<image src="https://kxcharge.oss-cn-beijing.aliyuncs.com/car-icon.png" mode="aspectFit"></image>
<view class="detail">
<view class="item"><text class="title">汽车类型:</text>{{item.CarType}}</view>
<view class="item"><text class="title">上次充电地点:</text>{{item.latelyPlace || ''}}</view>
<view class="item"><text class="title">上次充电时间:</text>{{item.LatelyTime || ''}}</view>
<view class="item"><text class="title">充电次数:</text>{{item.chargeQuantity}}</view>
<view class="item"><text class="title">创建时间:</text>{{formatTime(item.createTime)}}</view>
</view>
</view>
<view class="default" v-if="item.isDefault">
默认车辆
</view>
<view class="default" v-else style="background-color: #1890ff;" @click.stop="setDefault(item.id)">
设为默认
</view>
</view>
<uv-button type="primary" text="添加车辆" shape="circle" @click="goToAddCar"></uv-button>
<uv-modal ref="modal" content='是否设置该车辆为默认车辆' title='提示' :showCancelButton="true" class="modal"
@cancel="showModal = false" @confirm="submitDefault"></uv-modal>
</view>
</scroll-view>
</view>
</s-layout>
</template>
<script>
import moment from "dayjs";
import {
getMyCar,
setDefaultCar
} from "@/sheep/api/charge/member";
let connectorCode = null
export default {
data() {
return {
carList: [],
isShowNoCar: true,
showModal: false,
carTypeMap: new Map([
[1, '新能源汽车']
]),
activeId: '',
isShowPageLoading: true
};
},
methods: {
formatTime(ts) {
return moment(ts).format("YYYY-MM-DD HH:mm");
},
getCarList() {
this.isShowPageLoading = true;
getMyCar().then(res => {
const {
data
} = res;
this.isShowNoCar = data.length === 0;
if (!this.isShowNoCar) {
data.forEach(item => {
item['CarType'] = this.carTypeMap.get(item.plateType);
item['LatelyTime'] = item.latelyTime ? moment(item.latelyTime).format("YYYY-MM-DD HH:mm:ss") :
'';
this.carList.push(item);
})
}
}).finally(() => {
this.isShowPageLoading = false
})
},
goToInfo(data) {
if (connectorCode) {
uni.navigateTo({
url: `/pages/equipment-detail/index?carInfo=${JSON.stringify(data)}&connectorCode=${connectorCode}`
})
} else {
uni.navigateTo({
url: `/pages/my-car/add-my-car/add-my-car?carInfo=${JSON.stringify(data)}`
})
}
},
goToAddCar() {
uni.navigateTo({
url: '/pages/my-car/add-my-car/add-my-car'
})
},
setDefault(id) {
this.activeId = id;
this.$refs.modal.open();
},
submitDefault() {
try {
setDefaultCar(this.activeId, 0).then(res => {
this.carList = [];
this.getCarList();
this.$refs.modal.close();;
uni.showToast({
icon: 'success',
title: '设置成功!'
})
}).catch(err => {
uni.showToast({
icon: 'fail',
title: '设置失败!'
})
console.log('err: ', err);
})
} catch (e) {
//TODO handle the exception
uni.showToast({
icon: 'fail',
title: '设置失败!'
})
}
}
},
onLoad(options) {
if (options.connectorCode) {
connectorCode = options.connectorCode
}
},
onShow() {
this.carList = [];
this.getCarList();
}
}
</script>
<style lang="scss" scoped>
page {
background-color: #f0f3f8;
}
.block {
// height: 100vh;
// background-color: #f2f2f2;
.noCar {
display: flex;
flex-direction: column;
image {
width: 650rpx;
height: 650rpx;
margin: auto;
}
.title {
font-size: 58rpx;
margin: 180rpx 40rpx 15rpx;
}
.tip {
color: #a7a7a7;
margin-left: 40rpx;
}
}
.scroll {
background-color: #fff;
padding: 15rpx;
}
.uv-button {
margin-top: 50rpx;
width: 375rpx !important;
height: 95rpx !important;
margin: 20rpx auto;
.uv-button__text {
font-size: 35rpx !important;
}
}
.scrollItem {
background-color: #fff;
margin: 35rpx 15rpx 0;
position: relative;
padding: 30rpx 20rpx 0;
border-radius: 20rpx;
.plateNum {
font-size: 35rpx;
display: inline-block;
margin-left: 10rpx;
}
.info {
display: flex;
font-size: 25rpx;
image {
width: 220rpx;
height: 220rpx;
margin-right: 30rpx;
}
.item {
margin-bottom: 25rpx;
}
.title {
width: 160rpx;
display: inline-block;
text-align: right;
margin-right: 20rpx;
}
}
.default {
position: absolute;
top: 20rpx;
right: 0rpx;
color: #fff;
background-color: #61ec0b;
border-top-left-radius: 25rpx;
border-bottom-left-radius: 25rpx;
padding: 8rpx 15rpx;
font-size: 25rpx;
}
}
}
</style>