You cannot select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

702 lines
28 KiB
Vue

1 year ago
<template>
<view>
<!-- catchtouchmove="filterTouchMove" -->
<form @submit="formSubmit" v-if="showClone">
<view class="leftBox" hover-class="none" :hover-stop-propagation="false">
<view class="mask" v-if="showClone" @touchmove.stop.prevent="modalMove" @tap="hideLeft"></view>
<view :class="'hideBox ' + (showClone ? 'leftShow' : '')" v-if="touchClose" :style="'background-color:' + color" @touchstart="filterTouchStart">
<view class="tac fw500 por">
<!-- <slot name="title"></slot> -->
<view class="iconfont icon-guanbi11 f14 c9 poa" style="color: #333; right: 8px; top: -46px; width: 32px; height: 32px" @tap.stop.prevent="hideLeft"></view>
</view>
<!-- <slot></slot> -->
<view class="bgf container">
<view
class="weui-cells weui-cells_form"
style="display: flex; flex-direction: column; justify-content: space-between; margin-top: 0; height: calc(100% - 32px)"
>
<view class v-if="morePeople" style="height: calc(100%); overflow: auto">
<view class="fsa pt16 pb16 bb1" v-for="(item, index) in recordList" :key="index">
<view class>
<view class="fw500">{{ item.name + (item.gender ? '/' + item.gender : '') }}</view>
<view class="c9">{{ item.tel }}</view>
</view>
<view class>
<view
class="iconfont icon-lajitong tac c6"
style="font-size: 14px; background-color: #f6f6f6; width: 32px; height: 32px; border-radius: 50%; line-height: 32px"
hover-class="thover"
:hover-stop-propagation="true"
></view>
<!-- <checkbox class value="{{item.checked}}" color></checkbox> -->
</view>
</view>
</view>
<view class v-else>
<view class="weui-cell bb1 pb12">
<view class="weui-cell__hd display-flex aic mb16" style="max-width: 80px">
<label class="weui-label c9 f12">
您的姓名
<text class="cfred">*</text>
</label>
</view>
<view class="weui-cell__bd fsa">
<input
class="weui-input f17 flex-1"
type="text"
name="userName"
@input="bothwayBind"
data-type="name"
:value="userName"
placeholder="请输入您的姓名"
placeholder-class="input__placeholder cccc"
/>
<view class="sexBox fss">
<view :class="'sub mr12 ' + (sex == 1 ? 'subActive' : '')" @tap="changeSex" data-type="1">先生</view>
<view :class="'sub ' + (sex == 2 ? 'subActive' : '')" @tap="changeSex" data-type="2">女士</view>
</view>
</view>
</view>
<!-- wx:if="{{info.agencyOperation == 1}}" -->
<view class="weui-cell bb1 pb12 pt12">
<view class="weui-cell__hd display-flex aic mb16" style="max-width: 90px">
<label class="weui-label c9 f12" @tap="uploadCard">
您的身份证号
<text class="cfred">*</text>
</label>
</view>
<view class="weui-cell__bd display-flex">
<input
class="weui-input f17 flex-1 mr20"
type="idcard"
maxlength="18"
name="idCard"
:value="idCardNum"
placeholder="请输入您的身份证号"
placeholder-class="input__placeholder cccc"
/>
<view class="t-icon t-icon-paizhao rightPz" @tap.stop.prevent="chooseIdCard"></view>
</view>
</view>
<view class="weui-cell bb1 pb12 pt12">
<view class="weui-cell__hd display-flex aic mb16" style="max-width: 80px">
<label class="weui-label c9 f12">
您的年龄
<text class="cfred">*</text>
</label>
</view>
<view class="weui-cell__bd">
<picker @change="bindPickerChangeAge" style="width: 100%" :value="ageIndex" :range="ageArray">
<view class="picker display-flex">
<block v-if="ageIndex == -1">
<view class="ccc dib flex-1" style="color: #ccc">请选择年龄</view>
</block>
<block v-else>
<view class="c3 dib flex-1">{{ ageArray[ageIndex] }}</view>
</block>
<i class="iconfont icon-gengduo11 f16 dib pr c9 mr12" style="line-height: 1; top: 4px"></i>
</view>
</picker>
</view>
</view>
<view class="weui-cell bb1 pb12 pt12">
<view class="weui-cell__hd display-flex aic mb16" style="max-width: 80px">
<label class="weui-label c9 f12">
您的手机号
<text class="cfred">*</text>
</label>
</view>
<view class="weui-cell__bd">
<input
class="weui-input f17"
type="number"
maxlength="11"
name="tel"
:value="tel"
placeholder="请输入您的手机号"
placeholder-class="input__placeholder cccc"
/>
</view>
</view>
<view class="weui-cell bb1 pb12 pt12">
<view class="weui-cell__hd display-flex aic mb16" style="max-width: 90px">
<label class="weui-label c9 f12">
预约面试时间
<text class="cfred">*</text>
</label>
</view>
<view class="weui-cell__bd">
<picker
mode="multiSelector"
:range="dateTimeArray"
:value="dateTime"
@change="changeDateTime"
@columnchange="changeDateTimeColumn"
style="color: #333"
>
{{ !!currentTime ? currentTime : '----' }}
<i class="iconfont icon-rili f16 ml4 dib pr c9" style="line-height: 1"></i>
</picker>
</view>
</view>
<view class="weui-cell pb12 pt12">
<view class="weui-cell__hd display-flex aic mb16" style="max-width: 80px">
<label class="weui-label c9 f12">备注</label>
</view>
<view class="weui-cell__bd">
<input class="weui-input f17" type="text" name="desp" placeholder="请输入备注" placeholder-class="input__placeholder cccc" />
</view>
</view>
</view>
<view class="sticky" style="margin-bottom: 32px">
<!-- <view class="f16 poa" style="top:-320px" bindtap="handlerMore">多人报名切换</view>
<button class="bgf pt12 pb12 mb16" style="width: 100%; color:#0DCC91" hover-class="thover" bindtap="addPersion">
<i class="iconfont icon-tianjia3 mr8 fw400"></i>选择报名人
</button>-->
<button :class="'loginOut mt0 ' + (disabled ? 'disabled' : '')" style="width: 100%" formType="submit" hover-class="thover">立即报名</button>
</view>
</view>
</view>
</view>
<!-- <view class="hideBox {{show ? 'leftShow':''}}" wx:else style="height: {{height}};background-color:{{color}}">
<view class="tac bb1 fw500 por">
<slot name="title"></slot>
<view class="iconfont icon-guanbi11 f14 c9 poa" wx:if="{{cancerShow}}" style="color:#333;right:8px;top:16px;width:32px;height:32px" catchtap="hideLeft"></view>
</view>
<slot></slot>
</view>-->
</view>
</form>
</view>
</template>
<script>
const app = getApp();
const mydate = new Date();
var dateUtil = require('../../utils/dateUtil.js');
var dateTimePicker = require('../../utils/dateTimePicker.js');
export default {
data() {
return {
disabled: false,
idCardImageUrl: '',
idCardNum: '',
tel: '',
userName: '',
dateTime: '',
currentTime: dateUtil.formatDateYMD(mydate.toLocaleDateString()),
copyTime: dateUtil.formatDateYMD(mydate.toLocaleDateString()),
sex: 1,
ageArray: [],
ageIndex: -1,
morePeople: false,
recordList: [
{
id: 0,
name: '李红霞',
tel: 13488887125,
gender: '女',
checked: false
},
{
id: 1,
name: '张卫国',
tel: 13488887125,
gender: '男',
checked: false
},
{
id: 2,
name: '王丽丽',
tel: 13488887125,
gender: '男',
checked: false
},
{
id: 3,
name: '王丽丽',
tel: 13488887125,
gender: '男',
checked: false
},
{
id: 4,
name: '王丽丽',
tel: 13488887125,
gender: '男',
checked: false
}
],
dateTimeArray: '',
userInfo: {
age: ''
},
isShow: false,
color: '',
infoClone: '',
showClone: false
};
},
props: {
// 抽屉高度
height: {
type: String,
default: ''
},
drawerType: {
type: String,
default: ''
},
//抽屉显示隐藏
show: {
type: Boolean,
default: false
},
titleText: {
type: String,
default: ''
},
// 是否需要显示tabbar
hideTabbar: {
type: Boolean,
default: false
},
cancerShow: {
type: Boolean,
default: true
},
//
touchClose: {
type: Boolean,
default: true
},
info: {
type: Object,
default: () => ({})
}
},
mounted() {
// 处理小程序 ready 生命周期
this.$nextTick(() => this.ready());
},
methods: {
ready() {
let that = this;
console.log('this.data.info', this.info);
console.log('app.globalData.loginUserInfo', app.globalData.loginUserInfo);
for (let i = 16; i < 70; i++) {
that.ageArray.push(i);
}
this.setData({
ageArray: that.ageArray,
infoClone: that.info
});
// 监听弹窗的显示与隐藏
Object.defineProperty(that, 'show', {
enumerable: true,
configurable: true,
set(val) {
console.log(val); //打印设置好的值
if (val) {
that.setData({
tel: app.globalData.loginUserInfo.tel,
userName: app.globalData.loginUserInfo.user.realName,
idCardNum: app.globalData.loginUserInfo.user.idcard
});
}
}
});
let hour = new Date().getHours();
if (hour < 20 && hour >= 6) {
if (that.currentTime == that.copyTime) {
that.currentTime = that.currentTime + ' ' + (hour + 1) + ':00';
}
} else if (hour >= 20) {
if (that.currentTime == that.copyTime) {
that.currentTime = that.currentTime + ' ' + '19:30';
}
} else if (hour < 6) {
if (that.currentTime == that.copyTime) {
that.currentTime = that.currentTime + ' ' + '6:00';
}
}
this.setData({
currentTime: that.currentTime
});
var obj = dateTimePicker.dateTimePicker(this.startYear, this.endYear, this.currentTime);
console.log(obj);
console.log(obj.dateTimeArray);
for (let index = 0; index < obj.dateTimeArray[0].length; index++) {
obj.dateTimeArray[0][index] = obj.dateTimeArray[0][index] + '年';
}
for (let index = 0; index < obj.dateTimeArray[1].length; index++) {
obj.dateTimeArray[1][index] = obj.dateTimeArray[1][index] + '月';
}
for (let index = 0; index < obj.dateTimeArray[2].length; index++) {
obj.dateTimeArray[2][index] = obj.dateTimeArray[2][index] + '日';
}
this.setData({
dateTimeArray: obj.dateTimeArray,
dateTime: obj.dateTime
});
},
changeDateTime(e) {
var dateTimeArray = this.dateTimeArray;
var dateTime = e.detail.value;
this.setData({
// dateTime: e.detail.value,
currentTime:
dateTimeArray[0][dateTime[0]].replace('年', '') +
'-' +
dateTimeArray[1][dateTime[1]].replace('月', '') +
'-' +
dateTimeArray[2][dateTime[2]].replace('日', '') +
' ' +
dateTimeArray[3][dateTime[3]]
});
},
changeDateTimeColumn(e) {
console.log(e);
console.log(e.detail.value);
console.log(e.detail.column);
var arr = this.dateTime;
var dateArr = this.dateTimeArray;
console.log(arr);
console.log(dateArr);
arr[e.detail.column] = e.detail.value;
console.log(dateArr[0][arr[0]], dateArr[1][arr[1]]);
dateArr[2] = dateTimePicker.getMonthDay(dateArr[0][arr[0]], dateArr[1][arr[1]]);
for (let index = 0; index < dateArr[2].length; index++) {
dateArr[2][index] = dateArr[2][index] + '日';
}
// .replace("年",'').replace("月",'').replace("日",'')
this.setData({
dateTimeArray: dateArr,
dateTime: arr
});
},
bindPickerChangeAge(e) {
this.setData({
ageIndex: e.detail.value,
['userInfo.age']: parseInt(e.detail.value) + 16
});
},
formSubmit(e) {
let that = this;
console.log(e.detail.value);
if (e.detail.value.userName == '') {
uni.showToast({
icon: 'none',
title: '请输入姓名'
});
return;
}
if (e.detail.value.tel == '') {
uni.showToast({
icon: 'none',
title: '请输入手机号'
});
return;
}
var reg = /^1[3|4|5|6|9|7|8][0-9]\d{8}$/;
if (reg.test(e.detail.value.tel) == false) {
uni.showToast({
icon: 'none',
title: '请输入正确的手机号'
});
return;
}
// if (that.data.info.agencyOperation == 2) {
if (that.ageIndex == -1) {
uni.showToast({
icon: 'none',
title: '请选择年龄'
});
return;
}
e.detail.value.age = parseInt(that.ageIndex) + 16;
e.detail.value.sex = that.sex;
// } else {
if (e.detail.value.idCard == '') {
uni.showToast({
icon: 'none',
title: '请输入身份证号'
});
return;
}
var regIdCard = /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/;
if (regIdCard.test(e.detail.value.idCard) == false) {
uni.showToast({
icon: 'none',
title: '请输入正确的身份证号'
});
return;
}
e.detail.value.interviewTimeStr = that.currentTime;
// }
if (that.idCardImageUrl != '') {
e.detail.value.idCardImageUrl = that.idCardImageUrl;
}
e.detail.value.jobId = that.info.id;
that.setData({
disabled: true
});
console.log('form发生了submit事件携带数据为', e.detail.value);
uni.request({
url: app.globalData.ip + '/yishoudan/common/order/add',
data: e.detail.value,
header: app.globalData.headers,
method: 'POST',
success: function (res) {
console.log(res);
if (res.data.status == 200) {
uni.showToast({
icon: 'none',
title: '报名成功'
});
that.setData({
showClone: false,
ageIndex: -1,
disabled: false,
idCardNum: ''
});
uni.showTabBar({
animation: false,
success: (result) => {},
fail: () => {},
complete: () => {}
});
} else {
that.setData({
disabled: false
});
uni.showToast({
icon: 'none',
title: res.data.msg
});
}
}
});
},
/**
* 阻止滑动穿透
*
*
*/
modalMove() {
// console.log(this.data.color);
return false;
},
// 触摸开始事件
handletouchtart: function (event) {
this.lastX = event.touches[0].pageX;
this.lastY = event.touches[0].pageY;
},
filterTouchStart(event) {
this.handletouchtart(event);
},
filterTouchMove(event) {
let tx = this.handletouchmove(event);
if (this.touchClose) {
if (tx.ty > 100) {
this.hideLeft();
}
} else {
return false;
}
},
/**
* 页面滑动事件监听
*
*
*/
handletouchmove: function (event) {
let that = this;
var currentX = event.touches[0].pageX;
var currentY = event.touches[0].pageY;
var tx = currentX - this.lastX;
var ty = currentY - this.lastY;
//左右方向滑动
if (Math.abs(tx) > Math.abs(ty)) {
return {
tx
};
}
//上下方向滑动
else {
return {
ty
};
}
},
hideLeft() {
// this.data.show = false
this.setData({
ageIndex: -1,
idCardNum: ''
});
var eventDetail = {
type: this.drawerType
};
this.$emit('hidedrawer', {
detail: eventDetail
});
if (this.hideTabbar) {
setTimeout(() => {
this.getTabBar().setData({
isShow: true
});
}, 200);
}
},
changeSex(e) {
this.setData({
sex: e.currentTarget.dataset.type
});
},
addPersion() {
uni.navigateTo({
url: '/pages/mine/vitaeList/index?type=add'
});
},
handlerMore() {
this.setData({
morePeople: !this.morePeople
});
},
chooseIdCard() {
var that = this;
console.log('ischoise');
uni.chooseMedia({
count: 1,
sizeType: ['original', 'compressed'],
sourceType: ['album', 'camera'],
success(res) {
console.log(res);
// debugger;
that.uploadIdcardImg(res);
}
});
},
uploadIdcardImg(imgPath) {
let that = this;
// tempFilePath可以作为img标签的src属性显示图片
let filePath;
console.log('22222222222222222');
console.log(imgPath);
if (imgPath.tempFiles[0].tempFilePath) {
filePath = imgPath.tempFiles[0].tempFilePath;
} else {
filePath = imgPath;
}
console.log(filePath);
uni.showLoading({
title: '识别中...'
});
uni.uploadFile({
// url: app.globalData.ip + '/commons/idCardOcrRecognize',
url: app.globalData.ip + '/commons/idCardOcrRecognizeAndUploadToAliyunOss',
filePath,
name: 'uploadFile',
header: app.globalData.headers,
success: function (res) {
console.log('9999999999');
console.log(res);
if (res.statusCode == 413) {
uni.showToast({
duration: 2000,
title: '身份证未识别',
icon: 'none',
mask: true
});
return;
}
var idcard = JSON.parse(res.data);
console.log(idcard);
if (idcard.status == 200) {
that.setData({
idCardNum: idcard.data.num,
idCardImageUrl: idcard.data.idCardImageUrl
});
} else {
uni.showToast({
duration: 2000,
title: '身份证未识别',
icon: 'none',
mask: true
});
}
uni.hideLoading();
},
fail: function (res) {
console.log('99999999998');
console.log(res);
uni.hideLoading();
uni.showToast({
duration: 2000,
title: '身份证未识别',
icon: 'none',
mask: true
});
}
});
},
bothwayBind() {
console.log('占位:函数 bothwayBind 未声明');
},
uploadCard() {
console.log('占位:函数 uploadCard 未声明');
}
},
created: function () {},
watch: {
info: {
handler: function (newVal, oldVal) {
this.infoClone = newVal;
},
immediate: true,
deep: true
},
show: {
handler: function (newVal, oldVal) {
1 year ago
// alert(newVal)
1 year ago
this.showClone = newVal;
1 year ago
this.$forceUpdate()
1 year ago
},
immediate: true
}
}
};
</script>
<style>
@import './index.css';
</style>