<template>
|
<view class="content">
|
<view class="u-demo-block" style="width: 100%;">
|
<view class="u-demo-block__content" style="margin: 0 50rpx;">
|
<!-- 注意，如果需要兼容微信小程序，最好通过setRules方法设置rules规则 -->
|
<u--form labelPosition="left" :model="model1" ref="form1">
|
|
<u-form-item label="库区名称:" labelWidth="100" borderBottom ref="item1">
|
{{deptName}}
|
</u-form-item>
|
|
<u-form-item label="司机姓名:" labelWidth="100" required prop="userName" borderBottom ref="item1">
|
<u--input v-model="model1.userName" border="none" placeholder="姓名,只能为中文"></u--input>
|
</u-form-item>
|
<u-form-item label="司机手机号:" labelWidth="100" prop="phone" borderBottom ref="item1">
|
<u--input v-model="model1.phone" border="none" placeholder="请输入手机号"></u--input>
|
</u-form-item>
|
|
<u-form-item label="业务类型:" labelWidth="100" required prop="bizType" borderBottom ref="item1">
|
<u-radio-group v-model="model1.bizType">
|
<u-radio :customStyle="{marginRight: '16px'}" v-for="(item, index) in bizTypeList"
|
:key="index" :label="item.name" :name="item.type">
|
</u-radio>
|
</u-radio-group>
|
</u-form-item>
|
|
<u-form-item label="司机身份证号:" labelWidth="100" required prop="userId" borderBottom ref="item1">
|
<u--input v-model="model1.userId" border="none" placeholder="请输入身份证号"></u--input>
|
</u-form-item>
|
<u-form-item label="车牌号:" labelWidth="100" required prop="plateNum" borderBottom ref="item1">
|
<u--input v-model="model1.plateNum" border="none" placeholder="请输入车牌号"></u--input>
|
</u-form-item>
|
<u-form-item label="预约日期:" labelWidth="100" required prop="dataTime" borderBottom
|
@click="showdataTime = true; hideKeyboard()" ref="item1">
|
<u--input v-model="model1.dataTime" placeholder="请选择预约日期" border="none" disabled disabledColor="#efeff4"></u--input>
|
<u-icon slot="right" name="arrow-right"></u-icon>
|
</u-form-item>
|
|
|
|
|
</u--form>
|
|
<view style="margin: 0 20%;">
|
<u-button type="primary" text="提交" :customStyle="customStyle1" @click="submit"></u-button>
|
</view>
|
<view style="margin: 0 20%;">
|
<u-button type="error" text="重置" :customStyle="customStyle2" @click="reset"></u-button>
|
</view>
|
<view class="m1">
|
<u-checkbox-group>
|
<u-checkbox shape="circle" size="18" :checked="isChecked" @change="changeChecked">
|
</u-checkbox>
|
<label>请阅读并同意</label>
|
<a @click="goPrivacy">《智慧粮库协议》</a>
|
</u-checkbox-group>
|
</view>
|
|
<u-datetime-picker :show="showdataTime" :value="dataTime" mode="date" closeOnClickOverlay
|
@confirm="dataTimeConfirm" @cancel="dataTimeClose" @close="dataTimeClose"></u-datetime-picker>
|
</view>
|
</view>
|
</view>
|
</template>
|
|
<script>
|
export default {
|
data() {
|
return {
|
value: '',
|
isChecked:false,
|
showCalendar: false,
|
showdataTime: false,
|
model1: {
|
deptId: '',
|
bizType: '',
|
userName: '',
|
dataTime: '',
|
phone: '',
|
plateNum:'',
|
userId: '',
|
openid: ''
|
},
|
formStyle:{
|
width:'650rpx'
|
},
|
customStyle1:{
|
marginTop:'50px'
|
},
|
customStyle2:{
|
marginTop:'10px'
|
},
|
deptName: '',
|
dataTime: Number(new Date().setTime(new Date().getTime() + 24 * 60 * 60 * 1000)),
|
rules: {
|
userName: [{
|
type: 'string',
|
required: true,
|
message: '请填写姓名',
|
trigger: ['blur', 'change'],
|
}, {
|
// 此为同步验证，可以直接返回true或者false，如果是异步验证，稍微不同，见下方说明
|
validator: (rule, value, callback) => {
|
// 调用uView自带的js验证规则，详见：https://www.uviewui.com/js/test.html
|
return uni.$u.test.chinese(value);
|
},
|
message: "姓名必须为中文",
|
// 触发器可以同时用blur和change，二者之间用英文逗号隔开
|
trigger: ["change", "blur"],
|
}],
|
dataTime: {
|
type: 'string',
|
required: true,
|
message: '请选择日期',
|
trigger: ['change']
|
},
|
plateNum: {
|
// 此为同步验证，可以直接返回true或者false，如果是异步验证，稍微不同，见下方说明
|
validator: (rule, value, callback) => {
|
// 调用uView自带的js验证规则，详见：https://www.uviewui.com/js/test.html
|
return uni.$u.test.carNo(value);
|
},
|
message: "车牌号错误",
|
// 触发器可以同时用blur和change，二者之间用英文逗号隔开
|
trigger: ["change", "blur"],
|
},
|
bizType: {
|
type: 'string',
|
required: true,
|
message: '请选择业务类型',
|
trigger: ['change']
|
},
|
userId: {
|
// 此为同步验证，可以直接返回true或者false，如果是异步验证，稍微不同，见下方说明
|
validator: (rule, value, callback) => {
|
// 调用uView自带的js验证规则，详见：https://www.uviewui.com/js/test.html
|
return uni.$u.test.idCard(value);
|
},
|
message: "身份证号格式错误",
|
// 触发器可以同时用blur和change，二者之间用英文逗号隔开
|
trigger: ["change", "blur"],
|
},
|
},
|
bizTypeList: [{
|
type: 'OUT',
|
name: '出库预约',
|
disabled: false
|
},
|
{
|
type: 'IN',
|
name: '入库预约',
|
disabled: false
|
}
|
],
|
}
|
},
|
onReady() {
|
// 如果需要兼容微信小程序，并且校验规则中含有方法等，只能通过setRules方法设置规则
|
this.$refs.form1.setRules(this.rules)
|
},
|
mounted() {
|
|
},
|
onLoad: function(option) {
|
var info = JSON.parse(uni.getStorageSync('dept') || '[]');
|
this.model1.deptId = info.deptId
|
this.deptName = info.deptName
|
this.model1.openid = info.openid
|
},
|
methods: {
|
|
dataTimeClose() {
|
this.showdataTime = false
|
this.$refs.form1.validateField('dataTime')
|
},
|
dataTimeConfirm(e) {
|
this.showdataTime = false
|
this.model1.dataTime = uni.$u.timeFormat(e.value, 'yyyy-mm-dd')
|
this.$refs.form1.validateField('dataTime')
|
},
|
submit() {
|
if(this.isChecked){
|
// 如果有错误，会在catch中返回报错信息数组，校验通过则在then中返回true
|
this.$refs.form1.validate().then(res => {
|
uni.request({
|
url: 'https://app.fzzygf.com/igds-wx/gateway',
|
data: {
|
interfaceId:'2007',
|
data:this.model1
|
},
|
method:'POST',
|
header:{
|
'Content-Type':'application/json'
|
},
|
success: (res) => {
|
|
if (res.data.code == "0000") {
|
uni.$u.toast(res.data.msg)
|
this.reset()
|
console.log(JSON.stringify(res))
|
} else{
|
uni.$u.toast(res.data.msg)
|
}
|
},
|
fail: (errors) => {
|
uni.$u.toast(res.data.msg)
|
}
|
|
})
|
console.log(JSON.stringify(this.model1))
|
}).catch(errors => {
|
uni.$u.toast('校验失败')
|
})
|
|
}else{
|
uni.$u.toast('请阅读并同意协议!')
|
}
|
},
|
//重置输入的内容
|
reset() {
|
const validateList = ['userName', 'phone', 'userId', 'dataTime','plateNum','bizType']
|
this.$refs.form1.resetFields()
|
this.$refs.form1.clearValidate()
|
setTimeout(() => {
|
this.$refs.form1.clearValidate(validateList)
|
// 或者使用 this.$refs.form1.clearValidate()
|
}, 10)
|
this.model1.userName=''
|
this.model1.phone=''
|
this.model1.plateNum=''
|
this.model1.userId=''
|
this.model1.dataTime=''
|
this.model1.bizType=''
|
|
},
|
hideKeyboard() {
|
uni.hideKeyboard()
|
},
|
// 复选框的点击事件
|
changeChecked() {
|
this.isChecked = !this.isChecked;
|
console.log(this.isChecked)
|
},
|
goPrivacy(){
|
uni.navigateTo({
|
url: '/pages/privacy/privacy'
|
})
|
}
|
}
|
|
}
|
</script>
|
|
<style lang="scss">
|
.content {
|
padding-top: 30rpx;
|
display: flex;
|
flex-direction: column;
|
align-items: center;
|
justify-content: center;
|
.m1{
|
position: absolute;
|
bottom: -200rpx;
|
transform: translateX(50%);
|
font-size: 20rpx;
|
white-space: nowrap;
|
}
|
}
|
</style>
|
