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>
|