596 lines
14 KiB
Vue
596 lines
14 KiB
Vue
<template>
|
||
<up-navbar
|
||
title="预约"
|
||
bgColor="#00aa7f"
|
||
:autoBack="true"
|
||
leftIconColor="#fff"
|
||
titleStyle="color:#fff"
|
||
:placeholder="true"
|
||
/>
|
||
<view style="padding: 30rpx;">
|
||
<!-- 注意，如果需要兼容微信小程序，最好通过setRules方法设置rules规则 -->
|
||
<up-form
|
||
labelPosition="left"
|
||
labelWidth="100"
|
||
:model="formdata"
|
||
:rules="rules"
|
||
ref="uFormRef"
|
||
>
|
||
<up-form-item
|
||
label="姓名"
|
||
prop="uname"
|
||
borderBottom
|
||
>
|
||
<up-input v-model="formdata.uname" border="none" placeholder="请输入姓名" clearable />
|
||
</up-form-item>
|
||
<up-form-item
|
||
label="手机号"
|
||
prop="phone"
|
||
borderBottom
|
||
>
|
||
|
||
<!-- <view v-if="nuindex == 1" style="display: flex;justify-content: space-between;align-items: center;padding-top: 12rpx;">
|
||
<up-input maxlength="11" v-model="formdata.phone" readonly border="none" placeholder="请输入手机号" />
|
||
<view @tap="sjhshow = true" style="color: #12a018;">修改</view>
|
||
</view> -->
|
||
|
||
<view style="display: flex;justify-content: space-between;">
|
||
<button
|
||
@tap="actnub(1)"
|
||
:class="{actnub:nuindex == 1}"
|
||
style="width: 280rpx;font-size: 26rpx;"
|
||
open-type="getPhoneNumber"
|
||
@getphonenumber="onGetPhoneNumber"
|
||
>获取微信手机号</button>
|
||
|
||
<button :class="{actnub:nuindex == 2}" style="width: 180rpx;font-size: 26rpx;" @tap="actnub(2)">手动输入</button>
|
||
</view>
|
||
<view v-if="nuindex == 1" style="display: flex;justify-content: space-between;align-items: center;padding-top: 12rpx;">
|
||
<up-input maxlength="11" v-model="formdata.phone" readonly border="none" placeholder="请输入手机号" clearable />
|
||
</view>
|
||
<view v-else-if="nuindex == 2" style="display: flex;justify-content: space-between;align-items: center;padding-top: 12rpx;">
|
||
<up-input type="number" maxlength="11" v-model="formdata.phone" border="none" placeholder="请输入手机号" clearable />
|
||
<!-- <view>获取验证码</view> -->
|
||
</view>
|
||
</up-form-item>
|
||
<template v-if="cpcolumns.length > 0">
|
||
<up-form-item
|
||
label="车牌号"
|
||
prop="plateNum"
|
||
borderBottom
|
||
>
|
||
<up-input v-model="formdata.plateNum" border="none" readonly placeholder="请选择车牌号" suffixIcon="arrow-down" suffixIconStyle="color: #bababa" @tap="cphand" />
|
||
</up-form-item>
|
||
</template>
|
||
<template v-else>
|
||
<up-form-item
|
||
label="车牌号"
|
||
borderBottom
|
||
>
|
||
<view style="display: flex;align-items: center;">
|
||
<view>暂未绑定车辆</view>
|
||
<!-- <view style="padding-left:40rpx;color: #8bc34a;">去绑定</view> -->
|
||
</view>
|
||
</up-form-item>
|
||
</template>
|
||
|
||
<up-form-item
|
||
label="换电站"
|
||
prop="stationName"
|
||
borderBottom
|
||
>
|
||
<up-input v-model="formdata.stationName" readonly border="none" placeholder="请选择换电站" suffixIcon="arrow-down" suffixIconStyle="color: #bababa" @tap="hdzhand" />
|
||
</up-form-item>
|
||
<up-form-item
|
||
label="预约日期"
|
||
prop="swapDay"
|
||
borderBottom
|
||
>
|
||
<up-input v-model="formdata.swapDay" readonly border="none" placeholder="请选择预约日期" suffixIcon="arrow-down" suffixIconStyle="color: #bababa" @tap="datehand" />
|
||
</up-form-item>
|
||
<up-form-item
|
||
label="时间段"
|
||
prop="swapDuration"
|
||
borderBottom
|
||
>
|
||
<up-input v-model="formdata.swapDuration" readonly border="none" placeholder="请选择时间段" suffixIcon="arrow-down" suffixIconStyle="color: #bababa" @tap="timehand" />
|
||
</up-form-item>
|
||
<up-button style="margin-top: 100rpx;" type="success" @tap="submit">提交</up-button>
|
||
</up-form>
|
||
<!--车牌-->
|
||
<up-picker
|
||
:show="cpshow"
|
||
:columns="cpcolumns"
|
||
keyName="plateNum"
|
||
@confirm="cpconfirm"
|
||
@cancel="cpcancel"
|
||
/>
|
||
<!--换电站-->
|
||
<up-picker
|
||
:show="hdzshow"
|
||
:columns="hdzcolumns"
|
||
:defaultIndex="indexarr"
|
||
keyName="label"
|
||
@confirm="hdzconfirm"
|
||
@cancel="hdzcancel"
|
||
/>
|
||
|
||
<!--日期-->
|
||
<up-calendar
|
||
:show="dateshow"
|
||
mode="single"
|
||
color="#00aa7f"
|
||
@confirm="dateconfirm"
|
||
@close="dateclose"
|
||
/>
|
||
|
||
<!--时间段-->
|
||
<template v-if="timeshow">
|
||
<up-picker
|
||
:show="timeshow"
|
||
:columns="timecolumns"
|
||
@confirm="timeconfirm"
|
||
@cancel="timecancel"
|
||
/>
|
||
</template>
|
||
|
||
|
||
|
||
<!--修改手机号-->
|
||
<!-- <up-popup
|
||
:show="sjhshow"
|
||
mode="center"
|
||
:closeOnClickOverlay="true"
|
||
>
|
||
<view style="box-sizing: border-box;width:85%;padding: 20rpx;background: #fff;">
|
||
<view style="display: flex;justify-content: space-between;">
|
||
<button
|
||
@tap="actnub(1)"
|
||
:class="{actnub:nuindex == 1}"
|
||
style="width: 280rpx;font-size: 26rpx;"
|
||
open-type="getPhoneNumber"
|
||
@getphonenumber="onGetPhoneNumber"
|
||
>获取微信手机号</button>
|
||
|
||
<button :class="{actnub:nuindex == 2}" style="width: 180rpx;font-size: 26rpx;" @tap="actnub(2)">手动输入</button>
|
||
</view>
|
||
<view v-if="nuindex == 1" style="display: flex;justify-content: space-between;align-items: center;padding-top: 12rpx;">
|
||
<up-input maxlength="11" v-model="formdata.phone" readonly border="none" placeholder="请输入手机号" clearable />
|
||
</view>
|
||
<view v-else-if="nuindex == 2" style="display: flex;justify-content: space-between;align-items: center;padding-top: 12rpx;">
|
||
<up-input type="number" maxlength="11" v-model="formdata.phone" border="none" placeholder="请输入手机号" clearable />
|
||
<view>获取验证码</view>
|
||
</view>
|
||
</view>
|
||
</up-popup> -->
|
||
</view>
|
||
</template>
|
||
|
||
<script setup lang="ts">
|
||
import { ref, reactive } from 'vue'
|
||
import { addrese,gethdz,getphone,carlist } from '@/utils/service'
|
||
import { onLoad,onShow } from '@dcloudio/uni-app'
|
||
import { isToday } from '@/utils/commen'
|
||
//查询车辆
|
||
let cpcolumns = ref<any[]>([])
|
||
carlist(uni.getStorageSync('wxuid')).then((rps:any) => {
|
||
if(rps.data && rps.data.length > 0){
|
||
cpcolumns.value.push(rps.data)
|
||
}
|
||
})
|
||
|
||
//const phoneNumber = uni.getStorageSync('PhoneNumber')
|
||
|
||
//获取手机号
|
||
let sjhshow = ref(false)
|
||
let nuindex = ref(0)
|
||
function actnub(n:number) {
|
||
nuindex.value = n
|
||
}
|
||
function onGetPhoneNumber(v:any) {
|
||
getphone({
|
||
wuid:uni.getStorageSync('wxuid'),
|
||
code:v.detail.code
|
||
}).then((rps:any) => {
|
||
formdata.phone = rps.data
|
||
uni.setStorageSync('PhoneNumber', rps.data)
|
||
})
|
||
}
|
||
let userInfor = uni.getStorageSync('userInfor')
|
||
let formdata = reactive({
|
||
source:'1', //来源：1-小程序，2-云端，3-站端
|
||
ucode:uni.getStorageSync('wxuid'), //预约人编码
|
||
uname:userInfor.name?userInfor.name:'', //预约人姓名
|
||
phone:'', //手机号码
|
||
plateNum:'', //车牌号
|
||
stationCode:'', //换电站编码
|
||
stationName:'', //换电站名称
|
||
swapDay:'', //预约换电日期,示例值(yyyyMMdd)
|
||
//reservationTime:'', //预约时间
|
||
swapDuration:'' //预约换电时间段,示例值(8:00-10:00)
|
||
})
|
||
|
||
let hdzcode = ref('')
|
||
onLoad((opt:any) => {
|
||
hdzcode.value = opt.hdzcode?opt.hdzcode:''
|
||
if(opt.phoneNumber){
|
||
formdata.phone = opt.phoneNumber
|
||
nuindex.value = 1
|
||
}
|
||
|
||
// formdata.stationCode = hdzcode.value
|
||
// formdata.stationName = opt.hdzname?opt.hdzname:''
|
||
|
||
})
|
||
const timecolumns:any = ref([
|
||
// [
|
||
// '8:00 - 9:00',
|
||
// '9:00 - 10:00',
|
||
// '10:00 - 11:00',
|
||
// '11:00 - 12:00',
|
||
// '12:00 - 13:00',
|
||
// '13:00 - 14:00',
|
||
// '14:00 - 15:00',
|
||
// '15:00 - 16:00',
|
||
// '16:00 - 17:00',
|
||
// '17:00 - 18:00'
|
||
// ]
|
||
])
|
||
|
||
const datelist = [
|
||
{
|
||
time:0,
|
||
timeslot:'00:00 - 1:00'
|
||
},
|
||
{
|
||
time:1,
|
||
timeslot:'1:00 - 2:00'
|
||
},
|
||
{
|
||
time:2,
|
||
timeslot:'2:00 - 3:00'
|
||
},
|
||
{
|
||
time:3,
|
||
timeslot:'3:00 - 4:00'
|
||
},
|
||
{
|
||
time:4,
|
||
timeslot:'4:00 - 5:00'
|
||
},
|
||
{
|
||
time:5,
|
||
timeslot:'5:00 - 6:00'
|
||
},
|
||
{
|
||
time:6,
|
||
timeslot:'6:00 - 7:00'
|
||
},
|
||
{
|
||
time:7,
|
||
timeslot:'7:00 - 8:00'
|
||
},
|
||
{
|
||
time:8,
|
||
timeslot:'8:00 - 9:00'
|
||
},
|
||
{
|
||
time:9,
|
||
timeslot:'9:00 - 10:00'
|
||
},
|
||
{
|
||
time:10,
|
||
timeslot:'10:00 - 11:00'
|
||
},
|
||
{
|
||
time:11,
|
||
timeslot:'11:00 - 12:00'
|
||
},
|
||
{
|
||
time:12,
|
||
timeslot:'12:00 - 13:00'
|
||
},
|
||
{
|
||
time:13,
|
||
timeslot:'13:00 - 14:00'
|
||
},
|
||
{
|
||
time:14,
|
||
timeslot:'14:00 - 15:00'
|
||
},
|
||
{
|
||
time:15,
|
||
timeslot:'15:00 - 16:00'
|
||
},
|
||
{
|
||
time:16,
|
||
timeslot:'16:00 - 17:00'
|
||
},
|
||
{
|
||
time:17,
|
||
timeslot:'17:00 - 18:00'
|
||
},
|
||
{
|
||
time:18,
|
||
timeslot:'18:00 - 19:00'
|
||
},
|
||
{
|
||
time:19,
|
||
timeslot:'19:00 - 20:00'
|
||
},
|
||
{
|
||
time:20,
|
||
timeslot:'20:00 - 21:00'
|
||
},
|
||
{
|
||
time:21,
|
||
timeslot:'21:00 - 22:00'
|
||
},
|
||
{
|
||
time:22,
|
||
timeslot:'22:00 - 23:00'
|
||
},
|
||
{
|
||
time:23,
|
||
timeslot:'23:00 - 24:00'
|
||
}
|
||
]
|
||
|
||
function settime(init?:boolean) {
|
||
timecolumns.value.splice(0)
|
||
const date = new Date()
|
||
const hours = date.getHours()
|
||
const Minutes = date.getMinutes()
|
||
let arr:any = []
|
||
datelist.forEach(n => {
|
||
if(n.time > hours || Minutes <= 30 && (n.time == hours)){
|
||
arr.push(n.timeslot)
|
||
}
|
||
})
|
||
if(init){
|
||
timecolumns.value.push(arr)
|
||
}else{
|
||
if(isToday(new Date(formdata.swapDay))){
|
||
timecolumns.value.push(arr)
|
||
}else{
|
||
timecolumns.value.push([
|
||
'0:00 - 1:00',
|
||
'1:00 - 2:00',
|
||
'2:00 - 3:00',
|
||
'3:00 - 4:00',
|
||
'4:00 - 5:00',
|
||
'5:00 - 6:00',
|
||
'6:00 - 7:00',
|
||
'7:00 - 8:00',
|
||
'8:00 - 9:00',
|
||
'9:00 - 10:00',
|
||
'10:00 - 11:00',
|
||
'11:00 - 12:00',
|
||
'12:00 - 13:00',
|
||
'13:00 - 14:00',
|
||
'14:00 - 15:00',
|
||
'15:00 - 16:00',
|
||
'16:00 - 17:00',
|
||
'17:00 - 18:00',
|
||
'18:00 - 19:00',
|
||
'19:00 - 20:00',
|
||
'20:00 - 21:00',
|
||
'21:00 - 22:00',
|
||
'22:00 - 23:00',
|
||
'23:00 - 24:00'
|
||
])
|
||
}
|
||
}
|
||
|
||
}
|
||
|
||
onShow(() => {
|
||
settime(true)
|
||
// name:n.name,
|
||
// code:n.code,
|
||
// label:`${n.name}${n.isSuitable?'':'(不支持)'}`,
|
||
// isSuitable:n.isSuitable
|
||
})
|
||
const rules = {
|
||
uname: {
|
||
type: 'string',
|
||
required: true,
|
||
message: '请输入姓名',
|
||
trigger: ['blur', 'change'],
|
||
},
|
||
phone: {
|
||
type: 'string',
|
||
required: true,
|
||
message: '请输入手机号',
|
||
trigger: ['blur', 'change'],
|
||
},
|
||
plateNum:[
|
||
{
|
||
type: 'string',
|
||
required: true,
|
||
message: '请选择车牌号',
|
||
trigger: ['blur', 'change'],
|
||
},
|
||
{
|
||
// 自定义验证函数，见上说明
|
||
validator: (rule:any, value:any) => {
|
||
const regExp = new RegExp(/^[京津沪渝冀豫云辽黑湘皖鲁新苏浙赣鄂桂甘晋蒙陕吉闽贵粤青藏川宁琼使领A-Z]{1}[A-Z]{1}(([0-9]{5}[DF])|([DF][A-HJ-NP-Z0-9][0-9]{4}))$/)
|
||
if (regExp.test(value)) {
|
||
return true
|
||
}
|
||
return false
|
||
},
|
||
message: '车牌号格式不对',
|
||
// 触发器可以同时用blur和change
|
||
trigger: ['change','blur'],
|
||
}
|
||
],
|
||
stationName:{
|
||
type: 'string',
|
||
required: true,
|
||
message: '请选择换电站',
|
||
trigger: ['blur', 'change'],
|
||
},
|
||
swapDay:{
|
||
type: 'string',
|
||
required: true,
|
||
message: '请选择预约日期',
|
||
trigger: ['blur', 'change'],
|
||
}
|
||
}
|
||
|
||
//车牌
|
||
let cpshow = ref(false)
|
||
function cphand() {
|
||
cpshow.value = true
|
||
}
|
||
|
||
let indexarr = ref<any[]>([])
|
||
let hdzcolumns = ref<any[]>([])
|
||
let ishdz = ref(false)
|
||
function cpconfirm(v:any) {
|
||
cpshow.value = false
|
||
formdata.plateNum = v.value[0].plateNum
|
||
hdzcolumns.value.splice(0)
|
||
formdata.stationCode = ''
|
||
formdata.stationName = ''
|
||
//获取换电站
|
||
gethdz({
|
||
plateNum:formdata.plateNum
|
||
//code:hdzcode
|
||
}).then((rps:any) => {
|
||
ishdz.value = true
|
||
let arr:any[] = rps.data.map((n:any,i:any) => {
|
||
if(hdzcode.value == n.code){
|
||
indexarr.value = [i]
|
||
}
|
||
return {
|
||
name:n.name,
|
||
code:n.code,
|
||
label:`${n.name}${n.isSuitable?'':'(不支持)'}`,
|
||
isSuitable:n.isSuitable
|
||
}
|
||
})
|
||
hdzcolumns.value.push(arr)
|
||
|
||
//isSuitable
|
||
})
|
||
}
|
||
function cpcancel() {
|
||
cpshow.value = false
|
||
}
|
||
//显示换电站
|
||
let hdzshow = ref(false)
|
||
function hdzhand() {
|
||
if(ishdz.value){
|
||
hdzshow.value = true
|
||
}else{
|
||
uni.showToast({
|
||
title: '请先选择车牌号',
|
||
duration: 2000,
|
||
icon:'none'
|
||
})
|
||
}
|
||
}
|
||
|
||
function hdzconfirm(v:any) {
|
||
if(v.value[0].isSuitable){
|
||
formdata.stationName = v.value[0].name
|
||
formdata.stationCode = v.value[0].code
|
||
hdzshow.value = false
|
||
}else{
|
||
uni.showToast({
|
||
title: '不支持此车型',
|
||
duration: 2000,
|
||
icon:'none'
|
||
})
|
||
}
|
||
|
||
}
|
||
function hdzcancel() {
|
||
hdzshow.value = false
|
||
}
|
||
|
||
//时间段
|
||
let timeshow = ref(false)
|
||
function timehand() {
|
||
timeshow.value = true
|
||
}
|
||
|
||
function timeconfirm(v:any) {
|
||
formdata.swapDuration = v.value[0]
|
||
timeshow.value = false
|
||
}
|
||
function timecancel() {
|
||
timeshow.value = false
|
||
}
|
||
|
||
//选择日期
|
||
let dateshow = ref(false)
|
||
function datehand() {
|
||
dateshow.value = true
|
||
}
|
||
function dateconfirm(v:any) {
|
||
formdata.swapDay = v[0]
|
||
|
||
dateshow.value = false
|
||
formdata.swapDuration = ''
|
||
settime()
|
||
}
|
||
|
||
function dateclose() {
|
||
dateshow.value = false
|
||
}
|
||
|
||
// 提交方法
|
||
const uFormRef = ref(null)
|
||
function submit() {
|
||
(uFormRef as any).value.validate().then((valid:any) => {
|
||
if(valid){
|
||
formdata.swapDay = formdata.swapDay.replaceAll('-','')
|
||
//formdata.phone = formdata.phone+''
|
||
addrese(formdata).then(() => {
|
||
uni.showToast({
|
||
title: '预约成功',
|
||
duration: 2000
|
||
})
|
||
setTimeout(() => {
|
||
uni.navigateBack()
|
||
},2000)
|
||
})
|
||
}
|
||
}).catch(() => {
|
||
// 处理验证错误
|
||
|
||
})
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
page{
|
||
background: #f4f4f4;
|
||
}
|
||
.content{
|
||
margin: 30rpx 20rpx;
|
||
padding: 50rpx 20rpx;
|
||
border-radius: 20rpx;
|
||
background: #fff;
|
||
.weidu{
|
||
|
||
}
|
||
.avatar {
|
||
width: 130rpx;
|
||
height: 130rpx;
|
||
padding: 0;
|
||
border-radius: 50%;
|
||
.img{
|
||
width: 100%;
|
||
height: 100%;
|
||
}
|
||
}
|
||
}
|
||
.actnub{
|
||
background: #bcca32;
|
||
color: #fff;
|
||
}
|
||
</style> |