You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
280 lines
6.3 KiB
280 lines
6.3 KiB
<template>
|
|
<view class="containers">
|
|
<!-- #ifdef MP-WEIXIN -->
|
|
<privacy-popup ref="privacyComponent" @agree-privacy="onAgreePrivacy"
|
|
@reject-privacy="onRejectPrivacy"></privacy-popup>
|
|
<!-- #endif -->
|
|
<view class="steps">
|
|
<uni-steps :options="steps" :active="stepActive" active-color="#4f607e" />
|
|
</view>
|
|
<uni-forms ref="formdata" :model="form" :rules="rules" labelWidth="140px">
|
|
<view class="formtext label-with-en">
|
|
<view>基础信息</view>
|
|
<view class="en-text">Basic Information</view>
|
|
</view>
|
|
<uni-forms-item required>
|
|
<template slot="label">
|
|
<view class="label-with-en-inline">
|
|
<text>学习类型</text>
|
|
<text class="en-text">Study Type</text>
|
|
</view>
|
|
</template>
|
|
<uni-data-select @change='changeType' v-model="form.type" :localdata="typeList">
|
|
</uni-data-select>
|
|
</uni-forms-item>
|
|
<uni-forms-item required name="name">
|
|
<template slot="label">
|
|
<view class="label-with-en-inline">
|
|
<text>姓名</text>
|
|
<text class="en-text">Name</text>
|
|
</view>
|
|
</template>
|
|
<uni-easyinput v-model="form.name" placeholder="请输入姓名 / Please enter name" />
|
|
</uni-forms-item>
|
|
<uni-forms-item required name="mobile">
|
|
<template slot="label">
|
|
<view class="label-with-en-inline">
|
|
<text>联系电话</text>
|
|
<text class="en-text">Phone Number</text>
|
|
</view>
|
|
</template>
|
|
<uni-easyinput v-model="form.mobile" placeholder="请输入联系电话 / Please enter phone number" />
|
|
</uni-forms-item>
|
|
<uni-forms-item required name="idcard">
|
|
<template slot="label">
|
|
<view class="label-with-en-inline">
|
|
<text>身份证号</text>
|
|
<text class="en-text">ID Card Number</text>
|
|
</view>
|
|
</template>
|
|
<uni-easyinput type="idcard" v-model="form.idcard" placeholder="请输入证件号码 / Please enter ID card number" />
|
|
</uni-forms-item>
|
|
</uni-forms>
|
|
<button class='study' type="primary" style="background-color: #4f607e;" @click="toUrl">
|
|
<view class="button-text">
|
|
<view>开始学习 / Start Learning</view>
|
|
</view>
|
|
</button>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import PrivacyPopup from '@/components/privacy-popup/privacy-popup.vue';
|
|
export default{
|
|
components: {
|
|
PrivacyPopup
|
|
},
|
|
data(){
|
|
return{
|
|
canStudy:true,
|
|
steps: [{
|
|
title: '填报\nRegistration'
|
|
}, {
|
|
title: '学习\nStudy'
|
|
}, {
|
|
title: '完成\nComplete'
|
|
}],
|
|
stepActive: 0,
|
|
form:{
|
|
type:2,
|
|
name:'',
|
|
idcard:'',
|
|
mobile:''
|
|
},
|
|
rules:{
|
|
name: {
|
|
rules: [{
|
|
required: true,
|
|
errorMessage: '姓名不能为空'
|
|
}]
|
|
},
|
|
type: {
|
|
rules: [{
|
|
required: true,
|
|
errorMessage: '类型不能为空'
|
|
}]
|
|
},
|
|
mobile: {
|
|
rules: [{
|
|
required: true,
|
|
errorMessage: '联系电话不能为空'
|
|
}, {
|
|
pattern: '^[1][3-9][\\d]{9}',
|
|
errorMessage: '联系号码格式错误'
|
|
}]
|
|
},
|
|
idcard: {
|
|
rules: [{
|
|
required: true,
|
|
errorMessage: '身份证号码不能为空'
|
|
}, {
|
|
pattern: '^[1-9]\\d{5}(18|19|20)\\d{2}((0[1-9])|(1[0-2]))(([0-2][1-9])|10|20|30|31)\\d{3}[0-9Xx]',
|
|
errorMessage: '身份证格式错误'
|
|
}]
|
|
},
|
|
},
|
|
typeList:[{
|
|
value:1,
|
|
text:'普通访客/General Visitor'
|
|
},{
|
|
value:2,
|
|
text:'施工人员/Construction Worker'
|
|
},{
|
|
value:3,
|
|
text:'物流司机/Logistics Driver'
|
|
}]
|
|
}
|
|
},
|
|
|
|
onLoad() {
|
|
this.isStudy()
|
|
let res = uni.getStorageSync('studydata')
|
|
if(res){
|
|
console.log(res)
|
|
this.form = res
|
|
}
|
|
},
|
|
methods:{
|
|
onAgreePrivacy() {
|
|
// 用户同意隐私政策
|
|
// 在这里添加您想要执行的代码
|
|
console.log('User agreed to the privacy policy');
|
|
},
|
|
onRejectPrivacy() {
|
|
// 用户拒绝隐私政策
|
|
// 在这里添加您想要执行的代码
|
|
console.log('User rejected the privacy policy');
|
|
},
|
|
toUrl(){
|
|
if(!this.canStudy){
|
|
this.util.alert("目前您不需要参加培训 No training is required for you at this time")
|
|
return
|
|
}
|
|
this.$refs['formdata'].validate().then(res => {
|
|
uni.setStorageSync('studydata', this.form)
|
|
uni.navigateTo({
|
|
url: '/pages/visit/study?type=' + this.form.type
|
|
})
|
|
}).catch(err => {
|
|
console.log('err', err);
|
|
})
|
|
},
|
|
changeType(e){
|
|
console.log(e)
|
|
this.form.type = e
|
|
if(e==1||e==3){
|
|
this.canStudy = false
|
|
return
|
|
}
|
|
this.canStudy = true
|
|
this.isStudy()
|
|
},
|
|
isStudy(){
|
|
let that = this
|
|
this.util.request({
|
|
api: '/api/mobile/visit/ask-log',
|
|
method: "get",
|
|
data:{
|
|
type:that.form.type
|
|
},
|
|
utilSuccess: function(res) {
|
|
if(res.msg=='学习有效中'){
|
|
uni.showToast({
|
|
title: '该类型培训已通过，无须重复培训',
|
|
duration: 2000,
|
|
icon: 'none'
|
|
})
|
|
}
|
|
},
|
|
utilFail: function(res) {
|
|
// console.log(res)
|
|
// uni.showToast({
|
|
// title: res,
|
|
// duration: 2000,
|
|
// icon: 'none'
|
|
// })
|
|
}
|
|
})
|
|
}
|
|
|
|
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style>
|
|
.containers {
|
|
background-color: #fff;
|
|
min-height: 100vh;
|
|
padding: 20rpx;
|
|
padding-bottom: 60rpx;
|
|
}
|
|
.formtext {
|
|
margin-bottom: 20rpx
|
|
}
|
|
.steps {
|
|
margin-bottom: 40rpx
|
|
}
|
|
|
|
.study{
|
|
position: absolute;
|
|
bottom: 60rpx;
|
|
margin: 20rpx;
|
|
width: 90%;
|
|
}
|
|
.label-with-en {
|
|
display: flex;
|
|
flex-direction: column;
|
|
font-weight: 500;
|
|
}
|
|
.label-with-en .en-text {
|
|
font-size: 24rpx;
|
|
color: #999;
|
|
margin-top: 4rpx;
|
|
font-weight: normal;
|
|
}
|
|
.label-with-en-inline {
|
|
display: flex;
|
|
flex-direction: column;
|
|
width: 140px;
|
|
min-width: 140px;
|
|
font-weight: 500;
|
|
}
|
|
.label-with-en-inline text {
|
|
display: block;
|
|
line-height: 1.5;
|
|
}
|
|
.label-with-en-inline .en-text {
|
|
font-size: 20rpx;
|
|
color: #999;
|
|
margin-top: 4rpx;
|
|
font-weight: normal;
|
|
}
|
|
/deep/ .uni-forms-item__label {
|
|
width: 140px !important;
|
|
min-width: 140px !important;
|
|
padding-right: 16rpx;
|
|
display: flex;
|
|
align-items: flex-start;
|
|
}
|
|
/deep/ .uni-forms-item__content {
|
|
flex: 1;
|
|
min-width: 0;
|
|
}
|
|
/deep/ .uni-easyinput__content-input {
|
|
width: 100%;
|
|
}
|
|
/deep/ .uni-data-select {
|
|
width: 100%;
|
|
}
|
|
.button-text {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
}
|
|
.button-text .en-text {
|
|
font-size: 20rpx;
|
|
opacity: 0.9;
|
|
margin-top: 2rpx;
|
|
}
|
|
</style> |