123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309 |
- <template>
- <view class="page">
- <!-- 公共组件-每个页面必须引入 -->
- <public-module></public-module>
- <view class="IDcardInfo p-3 mb-3" style="background-color: #FFFFFF;">
- <view class="inputView d-flex">
- <view class="d-flex a-center">姓名</view>
- <view class="d-flex a-center">
- <input placeholder="请输入姓名" v-model="staffInfo.name" />
- </view>
- </view>
- <view class="warp" v-if="contentSlot">
- <view class="mt-1 position-relative border-bottom">
- <view class="position-absolute d-flex a-center j-center left-0 top-0 font-weight"
- style="width: 100rpx;height: 100%;">+86</view>
- <input type="text" v-model="staffInfo.phone" class="uni-input common-input"
- style="padding-left: 100rpx;" placeholder="手机号" />
- </view>
- <view class="mt-2 position-relative border-bottom">
- <input type="text" v-model="staffInfo.phoneMsg" class="uni-input common-input" maxlength="4"
- style="padding-right: 240rpx;" placeholder="请输入验证码" />
- <view class="position-absolute top-0 right-0 d-flex a-center j-center text-light-muted"
- style="width: 240rpx;height: 100%;" @tap="getCheckNum1">
- <view class="d-flex a-center j-center "
- :class="!codetime?'yanzhengmaView1 main-text-color':'yanzhengmaView2'">
- {{!codetime?'获取验证码':codetime+' S'+'后重新获取'}}
- </view>
- </view>
- </view>
- </view>
- </view>
- <button class="mx-3 my-5 d-flex a-center j-center main-bg-color" type="primary" @tap="submit">提 交</button>
- </view>
- </template>
- <script>
- import {
- mapState,
- mapMutations
- } from "vuex"
- import bankBin from "@/common/bankcardinfo.js"
- import {
- pathToBase64,
- base64ToPath
- } from '@/common/image-tools-base64.js';
- import zPopup from "@/components/common/z-popup.vue"
- export default {
- components: {
- zPopup
- },
- data() {
- return {
- IdCardBefore: "", //身份证正影像
- staffInfo: {
- name: "",
- phone: '', //手机号
- phoneMsg: '', //手机号验证码
- jobNumber: "" //id
- },
- contentSlot: true,
- codetime: 0, //验证码获取倒计时
- }
- },
- computed: {
- ...mapState(["userInfo", "userCheckInfo"]),
- },
- onLoad() {
- this.staffInfo.jobNumber = this.userInfo.sysUser.id;
- },
- methods: {
- ...mapMutations(['setUserModules']),
- async getCheckNum1() {
- uni.hideKeyboard();
- if (this.codetime > 0) return;
- // 验证手机号合法性
- if (!this.staffInfo.phone) {
- return uni.showToast({
- title: '请输入手机号',
- icon: 'none'
- });
- }
- if (!this.$base.phoneRegular.test(this.staffInfo.phone)) {
- return uni.showToast({
- title: '请输入正确的手机号码',
- icon: 'none'
- });
- }
- // 请求服务器,发送验证码
- let res = await this.$http.get('/sendMsg', {
- phone: this.staffInfo.phone,
- type: "1"
- });
- // 请求失败处理
- console.log(res)
- if (res.code != 200) {
- return uni.showToast({
- title: res.msg,
- icon: "none"
- });
- } else {
- uni.showToast({
- title: "发送成功",
- icon: "none"
- });
- }
- // 发送成功,开启倒计时
- this.codetime = 60;
- let timer = setInterval(() => {
- this.codetime--;
- if (this.codetime < 1) {
- clearInterval(timer);
- this.codetime = 0;
- }
- }, 1000);
- },
- isName() {
- let mPattern = /^([\u4e00-\u9fa5]{1,6}|[a-zA-Z\.\s]{1,6})$/;
- return mPattern.test(this.staffInfo.name);
- },
- async submit() {
- if (!this.isName()) {
- return uni.showToast({
- title: '请输入正确的姓名',
- icon: "none"
- });
- }
- var info = {
- sysUser: {},
- esmUserInternal: {},
- esmUserAgent: {}
- };
- Object.assign(info.sysUser, this.userInfo.sysUser)
- Object.assign(info.esmUserInternal, this.userInfo.esmUserInternal)
- Object.assign(info.esmUserAgent, this.userInfo.esmUserAgent)
- info.sysUser.name = this.staffInfo.name;
- info.sysUser.phone = this.staffInfo.phone;
- info.sysUser.jobCode = "17";
- // 修改并保存人员信息
- let res = await this.$http.post('/wechat/bindPhone', this.staffInfo);
- console.log(res)
- if (res.code == 200) {
- //保存临时数据到本地
- this.setUserModules({
- title: 'userInfo',
- data: info
- })
- setTimeout(() => {
- return uni.reLaunch({
- url: "/pages/index/index"
- })
- }, 500);
- } else if(res.code=='10100'){
- var that = this;
- uni.showToast({
- title: res.msg,
- icon: "none",
- duration: 2000
- });
- uni.login({
- provider: 'weixin',
- scopes: "auth_user",
- onlyAuthorize: true,
- success: function(loginRes) {
- that.codeRes(loginRes);
- }
- });
-
- }else{
- uni.showToast({
- title: res.msg,
- icon: "none",
- duration: 2000
- });
- }
- },
- async codeRes(data) {
- this.$login({
- url: "/wechat/login",
- data: {
- code: data.code,
- }
- }).then(res => {
- socket.init();
- return;
- })
-
- },
- }
- }
- </script>
- <style lang="scss" scoped>
- @import '@/style/mixin.scss';
- .idCardBefore {
- background: rgba($themeColor, 0.1) url('/static/image/user/identy2.png') center center no-repeat;
- background-size: auto 70%;
- padding: 10upx;
- }
- .idCardAfter {
- background: rgba($themeColor, 0.1) url('/static/image/user/identy1.png') center center no-repeat;
- background-size: auto 70%;
- padding: 10upx;
- }
- .bankCardImage {
- background: rgba($themeColor, 0.1) url('/static/image/user/card.png') center center no-repeat;
- background-size: auto 70%;
- padding: 10upx;
- }
- .imageBorder {
- border: 2px solid #ddd;
- padding: 10upx;
- }
- .cardImages>view {
- width: 310rpx;
- height: 260rpx;
- }
- .cardImages>view>image {
- width: 100%;
- height: 100%;
- }
- .IDcardInfo .IDcardNotice,
- .BankCardInfo .BankCardNotice {
- text-align: center;
- height: 110rpx;
- line-height: 110rpx;
- }
- .inputView {
- border-bottom: 1px solid #ddd;
- height: 90upx;
- }
- .inputView>view:nth-of-type(1) {
- flex-shrink: 0;
- font-size: 32upx;
- padding-left: 12px;
- color: #333;
- }
- .inputView>view:nth-of-type(2)>input {
- font-size: 30upx;
- color: #999;
- }
- .BankCardInfo {
- background-color: #FFFFFF;
- padding: 30upx;
- }
- .popup_box {
- width: 100%;
- // border-radius: 12upx;
- }
- .popup_title {
- display: flex;
- justify-content: space-between;
- height: 88upx;
- line-height: 88upx;
- border-bottom: 2upx solid #ebebeb;
- padding: 0 20upx;
- background-color: #FFF;
- }
- .popup_title view {
- font-size: 32upx;
- display: flex;
- align-items: center;
- }
- .popup_title text {
- width: 80upx;
- flex-shrink: 0;
- text-align: center;
- }
- .popup_title text {
- font-size: 28upx;
- color: #999;
- }
- .popup_title text:last-child {
- color: $themeColor;
- }
- .popup_content {
- padding: 40rpx 30rpx;
- background-color: #FFFFFF;
- text-align: center;
- }
- .popup_content .body {
- padding: 20upx 30upx;
- }
- .popup_content .body image {
- width: 540upx;
- }
- </style>
|