<template>
|
<view class="content">
|
<view class="u-demo-block">
|
<view class="u-demo-block__content" style="width: 650rpx;">
|
<!-- 注意，如果需要兼容微信小程序，最好通过setRules方法设置rules规则 -->
|
<u--form labelPosition="left" :model="model1" ref="form1">
|
<u-form-item label="库区名称:" labelWidth="100" borderBottom ref="item1">
|
{{model1.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="姓名,只能为中文" @blur="getBlur()" @focus="getFocus()"></u--input>
|
</u-form-item>
|
<u-form-item label="司机手机号:" labelWidth="100" required prop="phone" borderBottom ref="item1">
|
<u--input v-model="model1.phone" border="none" placeholder="请输入手机号" @blur="getBlur()" @focus="getFocus()"></u--input>
|
</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="customerName" borderBottom
|
@click="showCustomer = true" ref="item1">
|
<u--input v-model="model1.customerName" border="none" placeholder="请选择客户名称:" disabled disabledColor="#efeff4"></u--input>
|
<u-icon slot="right" name="arrow-right"></u-icon>
|
</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" prop="eatTag" borderBottom ref="item1">
|
<u-radio-group v-model="model1.eatTag">
|
<u-radio :customStyle="{marginRight: '16px'}" v-for="(item, index) in isEatTag" :key="index"
|
:label="item.name" :name="item.type">
|
</u-radio>
|
</u-radio-group>
|
</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-item>
|
<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-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>
|
<u-picker :show="showCustomer" :columns="customer" closeOnClickOverlay @confirm="customerConfirm"
|
@cancel="customerClose" @close="customerClose" keyName="customerName"></u-picker>
|
<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,
|
showCustomer: false,
|
showdataTime: false,
|
index: 0,
|
model1: {
|
deptId: '',
|
deptName: '',
|
bizType: 'IN',
|
userName: '',
|
dataTime: '',
|
plateNum: '',
|
phone: '',
|
userId: '',
|
eatTag: '',
|
customerName: '',
|
customerId: '',
|
openid: ''
|
},
|
requestData: {
|
openid: '',
|
type: 'IN',
|
deptId: ''
|
},
|
customStyle1:{
|
marginTop:'50px'
|
},
|
customStyle2:{
|
marginTop:'10px'
|
},
|
dataTime: Number(new Date().setTime(new Date().getTime() + 24 * 60 * 60 * 1000)),
|
customer: [],
|
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"],
|
},
|
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"],
|
},
|
phone: {
|
// 此为同步验证，可以直接返回true或者false，如果是异步验证，稍微不同，见下方说明
|
validator: (rule, value, callback) => {
|
// 调用uView自带的js验证规则，详见：https://www.uviewui.com/js/test.html
|
return uni.$u.test.mobile(value);
|
},
|
message: "手机号错误",
|
// 触发器可以同时用blur和change，二者之间用英文逗号隔开
|
trigger: ["change", "blur"],
|
},
|
customerName: {
|
type: 'string',
|
required: true,
|
min: 1,
|
message: '请填写客户名称',
|
trigger: ["change", "blur"],
|
}
|
},
|
isEatTag: [{
|
type: 'Y',
|
name: '是',
|
disabled: false
|
},
|
{
|
type: 'N',
|
name: '否',
|
disabled: false
|
}
|
],
|
}
|
},
|
onReady() {
|
// 如果需要兼容微信小程序，并且校验规则中含有方法等，只能通过setRules方法设置规则
|
this.$refs.form1.setRules(this.rules)
|
},
|
mounted() {
|
|
},
|
onLoad: function(param) {
|
var info = JSON.parse(uni.getStorageSync('dept') || '[]');
|
this.model1.deptId = info.deptId
|
this.model1.deptName = info.deptName
|
// this.model1.customerId = info.customerId
|
// this.model1.customerName = info.customerName
|
this.model1.openid = info.openid
|
this.requestData.openid = info.openid
|
this.requestData.deptId = info.deptId
|
|
|
uni.request({
|
url: 'https://app.fzzygf.com/igds-wx/gateway',
|
data: {
|
interfaceId:'2004',
|
data:this.requestData
|
},
|
method:'POST',
|
header:{
|
'Content-Type':'application/json'
|
},
|
success: (res) => {
|
if (res.data.code == "0000") {
|
console.log(res.data.data,"res.data")
|
this.customer.push(res.data.data)
|
console.log(this.customer)
|
} else{
|
uni.$u.toast(res.data.msg)
|
}
|
|
},fail: (res) => {
|
uni.$u.toast(res.data.msg)
|
}
|
|
})
|
},
|
methods: {
|
//点击客户名称确认键触发该事件
|
customerConfirm(e) {
|
this.showCustomer = false
|
this.model1.customerName = this.customer[0][e.indexs[0]].customerName
|
this.model1.customerId = this.customer[0][e.indexs[0]].customerId
|
this.$refs.form1.validateField('customerName')
|
},
|
customerClose() {
|
this.showCustomer = false
|
this.$refs.form1.validateField('customerName')
|
},
|
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:'2005',
|
data:this.model1
|
},
|
method:'POST',
|
header:{
|
'Content-Type':'application/json'
|
},
|
success: (res) => {
|
uni.$u.toast(res.data.msg)
|
console.log(JSON.stringify(res))
|
this.reset()
|
},fail: (errors) => {
|
uni.$u.toast('提交失败')
|
}
|
})
|
console.log(JSON.stringify(this.model1))
|
}).catch(errors => {
|
uni.$u.toast('校验失败')
|
})
|
}else{
|
uni.$u.toast('请阅读并同意协议!')
|
}
|
},
|
//重置输入的信息
|
reset() {
|
const validateList = ['userName', 'phone', 'plateNum', 'userId', 'dataTime', 'customerName']
|
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.customerId=''
|
this.model1.customerName=''
|
this.model1.dataTime=''
|
this.model1.eatTag=''
|
},
|
hideKeyboard() {
|
uni.hideKeyboard()
|
},
|
// 复选框的点击事件
|
changeChecked() {
|
this.isChecked = !this.isChecked;
|
console.log(this.isChecked)
|
},
|
goPrivacy(){
|
uni.navigateTo({
|
url: '/pages/privacy/privacy'
|
})
|
},getFocus(){
|
setTimeout(() => {
|
console.log("focus","foucus")
|
}, 100)
|
|
},
|
getBlur(){
|
console.log("blur","blur")
|
}
|
|
}
|
}
|
</script>
|
|
<style lang="scss">
|
.content {
|
padding-top: 30rpx;
|
display: flex;
|
flex-direction: column;
|
align-items: center;
|
justify-content: center;
|
.m1{
|
position: absolute;
|
bottom: -450rpx;
|
transform: translateX(50%);
|
font-size: 20rpx;
|
white-space: nowrap;
|
}
|
}
|
</style>
|
