411 lines
11 KiB
Vue
411 lines
11 KiB
Vue
<template>
|
||
<view class="main ">
|
||
<view class="c-top">
|
||
<view style="width: 10%;" @click="getback()">
|
||
<uni-icons type="left" size="18" color="#000"></uni-icons>
|
||
</view>
|
||
<view class="c-title">车辆信息</view>
|
||
<view style="width: 10%; height: 1px;"></view>
|
||
</view>
|
||
<view class="nickname-pop">
|
||
<!-- <view class="fenjiexian">
|
||
<text class="nickname-label text-lg text-bold">会员资料</text>
|
||
<view class="nickname-input margin-bottom-xs">
|
||
<text style=" width: 120px;">姓名 *</text>
|
||
<input class="input-style" maxlength="10" v-model.trim="user.realName" placeholder="请输入真实姓名"
|
||
border="surround" />
|
||
</view>
|
||
<view class="nickname-input margin-bottom-xs">
|
||
<text style=" width: 120px;">品牌-型号 *</text>
|
||
<input class="input-style" maxlength="10" v-model.trim="userCar.carBrand" placeholder="请输入车辆品牌型号"
|
||
border="surround" />
|
||
</view>
|
||
|
||
<view class="nickname-input margin-bottom-xs" @click="carKeyboardshow = true">
|
||
<text style=" width: 120px;">车牌号码 *</text>
|
||
<u-keyboard ref="uKeyboard" mode="car" :show="carKeyboardshow" @change="valChange" :showCancel=false
|
||
:tips="userCar.carNo" @backspace="backspace" @confirm="carKeyboardshow =false"></u-keyboard>
|
||
<input class="input-style" maxlength="10" v-model.trim="userCar.carNo" placeholder="请输入车牌号码"
|
||
:disabled="true" border="surround" />
|
||
</view> -->
|
||
</view>
|
||
<!-- 分界线 -->
|
||
<view class="fenjiexian">
|
||
<text class="nickname-label margin-top text-lg text-bold">车辆保养/保险信息</text>
|
||
|
||
<view class="nickname-input margin-bottom-xs" @click="maintenanceDatePopShow = true">
|
||
<text style=" width: 120px;">保养时间</text>
|
||
<u-datetime-picker :show="maintenanceDatePopShow" v-model="currDate" confirmColor="#242a38"
|
||
@confirm="maintenanceDateConfirm" mode="date"></u-datetime-picker>
|
||
<input class="input-style" maxlength="10" v-model.trim="userCar.maintenanceDate" placeholder="请选择保养时间"
|
||
:disabled="true" border="surround" />
|
||
</view>
|
||
<view class="nickname-input margin-bottom-xs">
|
||
<text style=" width: 120px;">保养里程</text>
|
||
<input class="input-style" type="number" maxlength="10" v-model.number="userCar.maintenanceMileage"
|
||
placeholder="请输入保养里程" border="surround" />
|
||
</view>
|
||
|
||
<view class="nickname-input margin-bottom-xs" @click="insuranceDatePopShow = true">
|
||
<text style=" width: 120px;">保险时间</text>
|
||
<u-datetime-picker :show="insuranceDatePopShow" v-model="currDate" confirmColor="#242a38"
|
||
@confirm="insuranceDateConfirm" mode="date"></u-datetime-picker>
|
||
<input class="input-style" maxlength="10" v-model.trim="userCar.insuranceDate" placeholder="请选择保险时间"
|
||
:disabled="true" border="surround" />
|
||
</view>
|
||
<view class="nickname-input margin-bottom-xs" @click="insuranceDatePopShow = true" v-if="userCar.carNature&&userCar.carNature != '非营运'">
|
||
<text style=" width: 120px;">维护时间</text>
|
||
<u-datetime-picker :show="insuranceDatePopShow" v-model="userCar.checkDate" confirmColor="#242a38"
|
||
@confirm="insuranceDateConfirm" mode="date"></u-datetime-picker>
|
||
<input class="input-style" maxlength="10" v-model.trim="userCar.insuranceDate" placeholder="请选择维护时间"
|
||
:disabled="true" border="surround" />
|
||
</view>
|
||
</view>
|
||
<u-popup :show="show" :round="10" mode="center" @close="close" @open="open">
|
||
<view class="z-xin">
|
||
<view class="one">恭喜您 成为尊贵的白银会员</view>
|
||
<view class="one"> 享受各项优惠</view>
|
||
<view class="one">将赠送您如下优惠卷 </view>
|
||
|
||
<view class="o-box" >
|
||
<view class="youshang">
|
||
|
||
<text class="xbiao">￥</text>
|
||
<text>汽修</text>
|
||
</view>
|
||
<view class="heng">
|
||
<view class="zuo">50元优惠券</view>
|
||
<view class="you">￥50元</view>
|
||
</view>
|
||
</view>
|
||
|
||
<view class="o-box" >
|
||
<view class="youshang">
|
||
|
||
<text class="xbiao">￥</text>
|
||
<text>检测</text>
|
||
</view>
|
||
<view class="heng">
|
||
<view class="zuo">50元优惠券</view>
|
||
<view class="you">￥50元</view>
|
||
</view>
|
||
</view>
|
||
<view class="anniux" @click="getgo()">
|
||
<view class="">我知道了</view>
|
||
</view>
|
||
</view>
|
||
</u-popup>
|
||
|
||
<view class="button-style">
|
||
<u-button color="linear-gradient(to right, rgba(63, 97, 192, 1), rgba(13, 46, 141, 1))" shape="circle"
|
||
text="保存" @click="saveUserProfile" :customStyle="{color:'#fff',height:'60rpx'}"></u-button>
|
||
</view>
|
||
</view>
|
||
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
import request from '../../utils/request'
|
||
import config from '@/config'
|
||
export default {
|
||
data() {
|
||
return {
|
||
carid:0,
|
||
show: false,
|
||
userProfileInputShow: false,
|
||
user: {
|
||
realName: ''
|
||
},
|
||
imagesUrl: "",
|
||
baseUrl: "",
|
||
|
||
userCar: {
|
||
carBrand: '',
|
||
carModel: '',
|
||
carNo: '',
|
||
maintenanceDate: '',
|
||
inspectionDate: '',
|
||
insuranceDate: '',
|
||
maintenanceMileage: '',
|
||
checkDate:'',
|
||
nextMaintenanceDate: '',
|
||
nextMaintenanceMileage: '',
|
||
nextInspectionDate: '',
|
||
insuranceExpiryDate: '',
|
||
|
||
},
|
||
carKeyboardshow: false,
|
||
maintenanceDatePopShow: false,
|
||
inspectionDatePopShow: false,
|
||
insuranceDatePopShow: false,
|
||
currDate: Number(new Date())
|
||
}
|
||
},
|
||
onLoad(option) {
|
||
this.carid = option.id
|
||
this.baseUrl = this.$baseUrl
|
||
this.imagesUrl = "http://www.nuoyunr.com/lananRsc/"
|
||
console.log('123');
|
||
},
|
||
onShow() {
|
||
this.getUserInfo()
|
||
this.getUserCar()
|
||
},
|
||
methods: {
|
||
getback(){
|
||
uni.navigateBack()
|
||
},
|
||
open() {
|
||
console.log('执行失败');
|
||
},
|
||
close() {
|
||
this.show = false
|
||
console.log('成功');
|
||
},
|
||
// 获取用户信息
|
||
async getUserInfo() {
|
||
const res = await request({
|
||
url: '/getAppInfo',
|
||
})
|
||
if (res.code == 200 && res.hasOwnProperty('user')) {
|
||
this.user = res.user
|
||
}
|
||
|
||
},
|
||
// 获取用户车辆信息
|
||
async getUserCar() {
|
||
const res = await request({
|
||
url: '/appInspection/userOwn/getCarById?carId='+this.carid,
|
||
})
|
||
this.userCar = res.data
|
||
|
||
},
|
||
// 车牌键盘 输入
|
||
// 按键被点击(点击退格键不会触发此事件)
|
||
valChange(val) {
|
||
// 将每次按键的值拼接到value变量中，注意+=写法
|
||
this.userCar.carNo += val;
|
||
},
|
||
// 退格键被点击
|
||
backspace() {
|
||
// 删除value的最后一个字符
|
||
if (this.userCar.carNo.length) this.userCar.carNo = this.userCar.carNo.substr(0, this.userCar.carNo
|
||
.length - 1);
|
||
},
|
||
// 车辆保养保险 日期选择器
|
||
maintenanceDateConfirm(e) {
|
||
this.userCar.maintenanceDate = uni.$u.timeFormat(e.value, 'yyyy-mm-dd');
|
||
this.maintenanceDatePopShow = false
|
||
},
|
||
inspectionDateConfirm(e) {
|
||
this.userCar.inspectionDate = uni.$u.timeFormat(e.value, 'yyyy-mm-dd');
|
||
this.inspectionDatePopShow = false
|
||
},
|
||
insuranceDateConfirm(e) {
|
||
this.userCar.insuranceDate = uni.$u.timeFormat(e.value, 'yyyy-mm-dd');
|
||
this.insuranceDatePopShow = false
|
||
},
|
||
getgo(){
|
||
uni.navigateBack()
|
||
},
|
||
// 用户资料
|
||
async saveUserProfile() {
|
||
|
||
// 处理下一次时间
|
||
// 保养日期 + 半年t
|
||
console.log(this.userCar)
|
||
if (this.userCar.maintenanceDate) {
|
||
let originalDate = new Date(this.userCar.maintenanceDate);
|
||
const futureDate = new Date(originalDate.getFullYear(), originalDate.getMonth() + 6, originalDate
|
||
.getDate());
|
||
this.userCar.nextMaintenanceDate = futureDate.toISOString().substring(0, 10);
|
||
|
||
}
|
||
|
||
// 保养里程 + 6000
|
||
if (this.userCar.maintenanceMileage) {
|
||
this.userCar.nextMaintenanceMileage = parseInt(this.userCar.maintenanceMileage) + 6000;
|
||
}
|
||
|
||
|
||
// 保险日期 + 一年
|
||
if (this.userCar.insuranceDate) {
|
||
|
||
let originalDate = new Date(this.userCar.insuranceDate);
|
||
const futureDate = new Date(originalDate.getFullYear(), originalDate.getMonth() + 12, originalDate
|
||
.getDate());
|
||
this.userCar.insuranceExpiryDate = futureDate.toISOString().substring(0, 10);
|
||
}
|
||
|
||
console.log(this.userCar);
|
||
const res = await request({
|
||
method: 'POST',
|
||
url: '/appInspection/userOwn/editCar',
|
||
data: this.userCar
|
||
})
|
||
console.log(123, res);
|
||
|
||
uni.showToast({
|
||
title:res.msg,
|
||
icon:'none'
|
||
})
|
||
// this.$modal.msgSuccess(res.msg)
|
||
setTimeout(() => {
|
||
uni.navigateBack()
|
||
}, 1500)
|
||
|
||
},
|
||
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
.main {
|
||
background: #F4F4F4;
|
||
min-height: 100vh;
|
||
}
|
||
.c-top{
|
||
width: 100%;
|
||
box-sizing: border-box;
|
||
padding: 15px;
|
||
padding-top: 45px;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
// background-color: white;
|
||
}
|
||
.c-title{
|
||
font-size: 18px;
|
||
color: black;
|
||
font-weight: bold;
|
||
}
|
||
.fenjiexian{
|
||
width: 100%;
|
||
border-radius: 8px;
|
||
background-color: white;
|
||
box-sizing: border-box;
|
||
padding: 10px;
|
||
color: #000 !important;
|
||
margin-top: 20px;
|
||
}
|
||
.one{
|
||
width: 100%;
|
||
text-align: center;
|
||
font-size: 18px;
|
||
font-weight: bold;
|
||
color: #FF861B;
|
||
}
|
||
.o-box{
|
||
width: 100%;
|
||
height: 50px;
|
||
margin-top: 10px;
|
||
background: url('http://www.nuoyunr.com/lananRsc/quanbg.png') no-repeat;
|
||
background-position: center;
|
||
background-size:cover;
|
||
background-repeat: no-repeat;
|
||
overflow: hidden;
|
||
border-radius: 6px;
|
||
|
||
}
|
||
.heng{
|
||
width: 85%;
|
||
margin: 0 auto;
|
||
display: flex;
|
||
justify-content: space-around;
|
||
align-items: center;
|
||
}
|
||
.zuo{
|
||
font-size: 14px;
|
||
font-family: Microsoft YaHei;
|
||
font-weight: bold;
|
||
color: #333333;
|
||
}
|
||
.you{
|
||
font-size: 14px;
|
||
font-family: Microsoft YaHei;
|
||
font-weight: bold;
|
||
color: #FF861B;
|
||
}
|
||
.xbiao{
|
||
width: 20px;
|
||
height: 10px;
|
||
background: linear-gradient(86deg, #FFB034 0%, #FF6714 100%);
|
||
background: #FFB351;
|
||
border-radius: 0px 0px 10px 0px;
|
||
font-size: 10px;
|
||
line-height: 15px;
|
||
text-align: center;
|
||
color: white;
|
||
font-weight: bold;
|
||
}
|
||
.youshang{
|
||
width: 40px;
|
||
height: 20px;
|
||
background: #FFB351;
|
||
border-radius: 0px 0px 10px 0px;
|
||
font-size: 10px;
|
||
line-height: 10px;
|
||
text-align: center;
|
||
|
||
}
|
||
.anniux{
|
||
width: 80px;
|
||
height: 30px;
|
||
margin: 20px auto;
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
color: white;font-weight: bold;
|
||
background: linear-gradient(139deg, #FFB931 0%, #FF491F 100%);
|
||
border-radius: 44px
|
||
}
|
||
.z-xin{
|
||
width: 100%;
|
||
background-color: white;
|
||
height: 300px;
|
||
box-sizing: border-box;
|
||
overflow: hidden;
|
||
padding: 15px;
|
||
border-radius: 10px;
|
||
}
|
||
.nickname-pop {
|
||
width: 95%;
|
||
margin: 0 auto;
|
||
box-sizing: border-box;
|
||
// padding: 10px;
|
||
background: #F4F4F4;
|
||
}
|
||
|
||
.nickname-input {
|
||
width: 100%;
|
||
font-size: 32rpx;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
margin: 20rpx 0;
|
||
}
|
||
|
||
.nickname-label {
|
||
font-size: 30rpx;
|
||
display: block;
|
||
margin-bottom: 20rpx;
|
||
text-align: center;
|
||
color: black;
|
||
}
|
||
|
||
.input-style {
|
||
border-bottom: 1px solid #d2c3af;
|
||
display: block;
|
||
width: 100%;
|
||
height: 60rpx;
|
||
color: black;
|
||
}
|
||
|
||
.button-style {
|
||
width: 600rpx;
|
||
margin: 40rpx auto;
|
||
}
|
||
</style>
|