115 lines
3.4 KiB
Vue
115 lines
3.4 KiB
Vue
<script setup lang="ts">
|
|
import { ref, reactive } from "vue"
|
|
import { onLoad, onShow } from "@dcloudio/uni-app"
|
|
import PlateNum from "@@/components/tongtong-plate/plate-number.vue";
|
|
|
|
import * as hooks from "@@/hooks"
|
|
import * as router from "@@/router"
|
|
import { userCarApi } from "@@/api"
|
|
import { serviceEnum } from "@/sheep/constant"
|
|
import { SERVICE_IMAGE } from "@@/constant/index"
|
|
import { filePath } from "@@/utils/file"
|
|
|
|
const { carTypeEnum } = serviceEnum
|
|
|
|
const applyFormRef = ref<any>(null)
|
|
const plateNumRef = ref<any>(null)
|
|
|
|
const visitorReasonList = ref<Array<{ title: string; id: string }>>(Object.keys(carTypeEnum).map((key) => ({
|
|
title: carTypeEnum[key],
|
|
id: key,
|
|
})))
|
|
|
|
const applyForm = reactive<any>({
|
|
id: "",
|
|
carType: "",
|
|
carTypeStr: "",
|
|
carNumber: "",
|
|
})
|
|
|
|
|
|
const applyFormRules = reactive<any>({
|
|
carTypeStr: [{ required: true, message: "请选择车辆类型" }],
|
|
carNumber: [{ required: true, message: "请输入车牌号" }],
|
|
})
|
|
|
|
|
|
onLoad(() => {
|
|
// 默认第一个
|
|
if (!applyForm.carType) {
|
|
const target = visitorReasonList.value[0]
|
|
applyForm.carType = target.id
|
|
applyForm.carTypeStr = target.title
|
|
}
|
|
})
|
|
onShow(() => {
|
|
})
|
|
|
|
// 选择车俩类型
|
|
const carNumberPickerConfirm = (e) => {
|
|
const target = visitorReasonList.value.find((item) => item.id == e[0])
|
|
if (!target) return
|
|
applyForm.carType = target.id
|
|
applyForm.carTypeStr = target.title
|
|
}
|
|
|
|
const doSubmit = async () => {
|
|
// 车牌号
|
|
const carNumber = plateNumRef.value.getPlate()
|
|
if (!carNumber) {
|
|
uni.showToast({ title: "请输入车牌号", icon: "none" })
|
|
return
|
|
}
|
|
applyForm.carNumber = carNumber
|
|
// 校验
|
|
applyFormRef.value.submit()
|
|
const { isPass } = applyFormRef.value.validate()
|
|
if (!isPass) return
|
|
try {
|
|
uni.showLoading({ title: "申请中...", mask: false })
|
|
const _pa = {
|
|
...applyForm
|
|
}
|
|
const { data, code }: any = await userCarApi.apply(_pa)
|
|
if (code != 0) throw new Error()
|
|
uni.hideLoading()
|
|
uni.showToast({ title: "申请成功", icon: "none" })
|
|
router.back()
|
|
} catch (error) {
|
|
console.error(error)
|
|
uni.hideLoading()
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<crud-layout title="申请车辆" :bg="filePath(SERVICE_IMAGE.blueBg)">
|
|
<view class="h-30rpx" />
|
|
<view class="card p-x-30rpx p-y-40rpx">
|
|
<tm-form ref="applyFormRef" v-model="applyForm" :rules="applyFormRules" direction="vertical">
|
|
<tm-form-item name="carTypeStr" label="车辆类型" :showBottom="false">
|
|
<tm-picker @confirm="carNumberPickerConfirm" :list="visitorReasonList">
|
|
<tm-input :modelValue="applyForm.carTypeStr" placeholder="请选择车辆类型" style="pointer-events: none">
|
|
</tm-input>
|
|
</tm-picker>
|
|
</tm-form-item>
|
|
<tm-form-item name="carNumber" label="车牌号" :showBottom="false">
|
|
<PlateNum ref="plateNumRef" />
|
|
</tm-form-item>
|
|
</tm-form>
|
|
</view>
|
|
<view class=" bg-#0094ff p-y-20rpx text-center rounded-40rpx m-x-30rpx m-t-60rpx sub-text-30 color-white!"
|
|
@tap="doSubmit">
|
|
提交
|
|
</view>
|
|
</crud-layout>
|
|
</template>
|
|
|
|
<style lang="scss" scoped>
|
|
:deep() {
|
|
.tmFormItemLabel {
|
|
padding-bottom: 10rpx !important;
|
|
}
|
|
}
|
|
</style>
|