706 lines
18 KiB
Vue
706 lines
18 KiB
Vue
<template>
|
||
<view class="uinfo_view">
|
||
<view class="u_head">
|
||
<view class="head_img">
|
||
<image :src="currentUser.headimgurl" class="i_img"></image>
|
||
</view>
|
||
</view>
|
||
<view class="u_mid">
|
||
<view class="mid_view">
|
||
<view class="tab_left">
|
||
姓 名：<text style="color: red;position: absolute;">*</text>
|
||
</view>
|
||
<view class="tab_rig">
|
||
<input :disabled="uinfo.userStatus == 2" v-model="uinfo.realName" placeholder="请填写姓名"/>
|
||
</view>
|
||
</view>
|
||
<view class="mid_view">
|
||
<view class="tab_left">
|
||
手机号：<text style="color: red;position: absolute;">*</text>
|
||
</view>
|
||
<view class="tab_rig">
|
||
<input v-model="uinfo.mobile" type="number" placeholder="请填写手机号码" maxlength="11"/>
|
||
</view>
|
||
</view>
|
||
<view class="mid_view code-box" >
|
||
<view class="tab_left">
|
||
验证码：
|
||
</view>
|
||
<view class="tab_rig">
|
||
<input class="ipt" v-model="vCode" type="number" placeholder="请填写验证码" maxlength="6"/>
|
||
</view>
|
||
<view class="getCodeBtn" :class="jsq ? 'bg-ccc' : ''" @click="getCodeInfo()">{{btnText}}</view>
|
||
</view>
|
||
<!-- <view class="mid_view">
|
||
<view class="tab_left">
|
||
性 别：
|
||
</view>
|
||
<view class="select">
|
||
<image class="arrow" src="/static/icons/right-arrow.png" mode=""></image>
|
||
<picker class="picker" :range="sexs" @change="change(0,$event)">
|
||
<view>{{sexs[index]}}</view>
|
||
</picker>
|
||
</view>
|
||
</view> -->
|
||
|
||
<!-- <view v-if="uinfo.userStatus != 2" class="mid_view">
|
||
<view class="tab_left">
|
||
类 型：
|
||
</view>
|
||
<view class="uni-list">
|
||
<radio-group @change="radioChange">
|
||
<label class="radio" style="margin-left: 30upx;" v-for="(item, index) in items" :key="item.value">
|
||
<radio :value="item.value" :checked="index === current" />
|
||
{{item.name}}
|
||
</label>
|
||
</radio-group>
|
||
</view>
|
||
</view> -->
|
||
|
||
<view v-if="true" class="mid_view">
|
||
<view class="tab_left">
|
||
单 位：
|
||
</view>
|
||
<view class="ipt-box select">
|
||
<image class="arrow" src="/static/icons/right-arrow.png" mode=""></image>
|
||
<picker class="picker" v-if="companyList.length > 0" :range="companyList" @change="companyChange" range-key="name">
|
||
<view>{{ companyList[companyListIndex].name }}</view>
|
||
</picker>
|
||
</view>
|
||
</view>
|
||
|
||
<view class="mid_view" v-if="companyList[companyListIndex].name != '其它'">
|
||
<view class="tab_left">
|
||
部 门：
|
||
</view>
|
||
<view class="ipt-box select">
|
||
<image class="arrow" src="/static/icons/right-arrow.png" mode=""></image>
|
||
<picker class="picker" v-if="departmentList.length > 0" :range="departmentList" @change="departmentChange" range-key="name">
|
||
<view>{{ departmentList[departmentListIndex].name }}</view>
|
||
</picker>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- <view class="mid_view" v-if="current == 0">
|
||
<view class="tab_left">
|
||
部 门：
|
||
</view>
|
||
<view class="tab_rig" v-if="isload">
|
||
<xfl-select
|
||
:list="finalList"
|
||
:clearable="true"
|
||
:listShow="showList"
|
||
:isCanInput="true"
|
||
:style_Container="'height: 24px; width:460upx; font-size: 14px;'"
|
||
:placeholder = "'请输入部门名称搜索'"
|
||
@change="changeSel"
|
||
@input="inputSel"
|
||
:selectHideType="'hideAll'"
|
||
:initValue="ttt"
|
||
>
|
||
</xfl-select>
|
||
</view>
|
||
</view> -->
|
||
|
||
<view class="mid_view" v-if="companyList[companyListIndex].name == '其它'">
|
||
<view class="tab_left">
|
||
|
||
</view>
|
||
<view class="tab_rig">
|
||
<input v-model="uinfo.companyName" placeholder="请填写单位名称"/>
|
||
</view>
|
||
|
||
</view>
|
||
|
||
<view v-if="uinfo.userStatus ==2 || uinfo.userStatus == 1" class="mid_view">
|
||
<view class="tab_left">
|
||
状 态：
|
||
</view>
|
||
<view v-if="uinfo.userStatus==1" class="tab_rig">
|
||
<label>{{this.uinfo.orgName}}/未审核</label>
|
||
</view>
|
||
<view v-if="uinfo.userStatus==2" class="tab_rig">
|
||
<label>{{this.uinfo.orgName}}/已审核</label>
|
||
</view>
|
||
<!-- <view v-if="uinfo.isInner==1&&uinfo.userStatus==1" class="tab_rig">
|
||
<label>内部员工/未审核</label>
|
||
</view>
|
||
<view v-if="uinfo.isInner==1&&uinfo.userStatus==2" class="tab_rig">
|
||
<label>内部员工/已审核</label>
|
||
</view>
|
||
<view v-if="uinfo.isInner==2&&uinfo.userStatus==1" class="tab_rig">
|
||
<label>外部访客/未审核</label>
|
||
</view>
|
||
<view v-if="uinfo.isInner==2&&uinfo.userStatus==2" class="tab_rig">
|
||
<label>外部访客/已审核</label>
|
||
</view> -->
|
||
</view>
|
||
|
||
|
||
|
||
</view>
|
||
<!-- <button class="confirm-btn bg-gray" v-if="uinfo.register == 1 ">待审核</button>
|
||
<button class="confirm-btn" v-else @click="toSubUinfo">更新</button> -->
|
||
<button class="confirm-btn" @click="toSubUinfo">更新</button>
|
||
<!-- <view style="width: 100%;padding: 12upx 0upx 24upx 0upx;text-align: center;font-size: 28upx;background: white;position: fixed;bottom: 0upx;color: gray;">
|
||
<text>甘肃同兴智能科技发展有限责任公司提供技术支持</text><br>
|
||
<text>13919995340</text>
|
||
</view> -->
|
||
<wechat @getOpenId="getOpenId"></wechat>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
import{saveWechatUser,iOpenidGetUserInfo,getCodeInfo,getOrargs,getAllCompany,getAllDeptOfCompany} from '@/common/api.js'
|
||
import {callbackRequest,alertTip,setStorage,getStorage,devEnv} from '@/common/util.js'
|
||
import uniIcons from '@/components/uni-icons/uni-icons.vue';
|
||
import wechat from '@/mixins/wechat.vue'
|
||
import dyDatetimePicker from '@/components/dateTime.vue'
|
||
import xflSelect from '../../components/xfl-select/xfl-select.vue'
|
||
export default {
|
||
components: {
|
||
uniIcons,
|
||
wechat,
|
||
dyDatetimePicker,
|
||
xflSelect
|
||
},
|
||
data() {
|
||
return {
|
||
sexs: ["男","女"],
|
||
index: 0,
|
||
currentUser: {},
|
||
uinfo:{
|
||
realName:'',
|
||
idnumber:'',
|
||
telnumber:'',
|
||
orgName:'',
|
||
isInner:'',
|
||
deptName:''
|
||
},
|
||
vCode:'',
|
||
codeKey:'',
|
||
saving:false,
|
||
jsq:null,//计时器
|
||
btnText:'获取验证码',
|
||
list: [],
|
||
finalList: [],
|
||
|
||
showList:false,
|
||
isload:false,
|
||
ttt:"444",
|
||
items: [{
|
||
value: '1',
|
||
name: '内部'
|
||
},
|
||
{
|
||
value: '2',
|
||
name: '外部',
|
||
checked: 'true'
|
||
},
|
||
|
||
],
|
||
current: 0,
|
||
departmentList: [{name:"请选择..."}], //部门列表
|
||
departmentListIndex:0,
|
||
companyList: [{name:"请选择..."}], //部门列表
|
||
companyListIndex:0,
|
||
needInitial:false,//用于初始化部门信息
|
||
|
||
}
|
||
|
||
},
|
||
/* components: { xflSelect }, //注册为子组件 */
|
||
computed: {
|
||
},
|
||
onLoad() {
|
||
|
||
this.getOrgeName();
|
||
this.getCompany();
|
||
},
|
||
methods: {
|
||
radioChange: function(evt) {
|
||
if(this.uinfo.isInner == 2){
|
||
return
|
||
}
|
||
for (let i = 0; i < this.items.length; i++) {
|
||
if (this.items[i].value === evt.target.value) {
|
||
|
||
this.current = i;
|
||
//this.uinfo.isInner = this.items[this.current].value;
|
||
break;
|
||
}
|
||
}
|
||
|
||
},
|
||
|
||
makePhone(x){
|
||
// 导入Activity、Intent类
|
||
var Intent = plus.android.importClass("android.content.Intent");
|
||
var Uri = plus.android.importClass("android.net.Uri");
|
||
// 获取主Activity对象的实例
|
||
var main = plus.android.runtimeMainActivity();
|
||
// 创建Intent
|
||
var uri = Uri.parse("tel:"+x); // 这里可修改电话号码
|
||
var call = new Intent("android.intent.action.CALL",uri);
|
||
// 调用startActivity方法拨打电话
|
||
main.startActivity( call );
|
||
},
|
||
getOpenId(e){
|
||
|
||
if(devEnv){
|
||
this.currentUser = {
|
||
// openid:"o1Y6NxPbYn-aetCzknfLTn26IM-M",
|
||
openid:"ovRg7w7y-xtRAIwydz8cpSi00Dsc",
|
||
headimgurl:"http://thirdwx.qlogo.cn/mmopen/vi_32/Q0j4TwGTfTISdddo0mV33rHIXxtRXPvYNTq5DOI8hWaBfGmDu633AuOkcpicm2zvN2nCQDQTPJ0hRQoERqiaDetw/132"
|
||
}
|
||
} else {
|
||
this.currentUser = e;
|
||
}
|
||
this.iOpenidGetUserInfo();
|
||
},
|
||
iOpenidGetUserInfo(){
|
||
let data = {
|
||
"method": iOpenidGetUserInfo,
|
||
"data": {
|
||
wxOpenId:this.currentUser.openid,
|
||
headportrait:this.currentUser.headimgurl
|
||
}
|
||
};
|
||
let that = this;
|
||
callbackRequest(data)
|
||
.then(res =>{
|
||
console.log("code:",res.data);
|
||
if(res.data.returnCode == 1){
|
||
this.uinfo = res.data.returnData;
|
||
this.uinfo.wxOpenId = this.currentUser.openid;
|
||
this.uinfo.wxProfile = this.currentUser.headimgurl;
|
||
this.uinfo.isInner = res.data.returnData.isInner;
|
||
this.uinfo.userStatus = res.data.returnData.userStatus;
|
||
|
||
if(!this.uinfo.realName){
|
||
this.uinfo.realName = '';
|
||
}
|
||
if(!this.uinfo.mobile){
|
||
this.uinfo.mobile = '';
|
||
}
|
||
if(!this.uinfo.orgName){
|
||
|
||
this.uinfo.orgName='';
|
||
}
|
||
if(res.data.returnData.isInner == 2){
|
||
this.uinfo.companyName=res.data.returnData.orgName;
|
||
}
|
||
|
||
that.ttt = that.uinfo.departmentName || that.uinfo.orgName;
|
||
|
||
for(var k=0; k<that.companyList.length; k++){
|
||
if(that.uinfo.orgName == that.companyList[k].name){
|
||
this.companyListIndex = k;
|
||
break;
|
||
}
|
||
}
|
||
this.needInitial = true;
|
||
that.getDepartmentOfCompany();
|
||
|
||
that.isload=true;
|
||
if(this.uinfo.gender == '男'){
|
||
this.index=0;
|
||
}else{
|
||
this.index=1;
|
||
}
|
||
|
||
if(this.uinfo.userStatus == 2 && this.uinfo.isInner == 2){
|
||
this.current = 1;
|
||
}
|
||
|
||
setStorage('userInfo',this.uinfo);
|
||
} else {
|
||
this.isload=true;
|
||
}
|
||
})
|
||
},
|
||
//获取公司列表
|
||
getCompany() {
|
||
let data = {
|
||
method: getAllCompany,
|
||
data: {}
|
||
};
|
||
callbackRequest(data).then(res => {
|
||
if (res.data.returnCode == 1) {
|
||
// console.log("---",res.data.returnData);
|
||
|
||
this.companyList = this.companyList.concat(res.data.returnData);
|
||
this.companyList = this.companyList.concat([{name:"其它"}]);
|
||
console.log(this.companyList)
|
||
}
|
||
});
|
||
},
|
||
//公司改变事件
|
||
companyChange(e) {
|
||
this.companyListIndex = e.detail.value;
|
||
console.log(this.companyListIndex);
|
||
this.getDepartmentOfCompany();
|
||
},
|
||
//获取某个公司的部门列表
|
||
getDepartmentOfCompany(){
|
||
let data = {
|
||
method: getAllDeptOfCompany,
|
||
data: {companyName:this.companyList[this.companyListIndex]}
|
||
};
|
||
callbackRequest(data).then(res => {
|
||
if (res.data.returnCode == 1) {
|
||
|
||
this.departmentList = [{name:"请选择..."}];
|
||
this.departmentList = this.departmentList.concat(res.data.returnData);
|
||
if(this.departmentListIndex >= this.companyList.length){
|
||
this.departmentListIndex = 0;
|
||
}
|
||
console.log(this.departmentList);
|
||
//刚进入页面时，部门数据回显
|
||
if(this.needInitial){
|
||
for(var k=0; k<this.departmentList.length; k++){
|
||
if(this.ttt == this.departmentList[k].name){
|
||
this.departmentListIndex = k;
|
||
break;
|
||
}
|
||
}
|
||
this.needInitial = false;
|
||
}
|
||
}
|
||
});
|
||
},
|
||
//部门切换
|
||
departmentChange(e) {
|
||
this.departmentListIndex = e.detail.value;
|
||
console.log(this.departmentListIndex);
|
||
},
|
||
getOrgeName(){
|
||
let data = {
|
||
"method": getOrargs,
|
||
"data": {
|
||
}
|
||
}
|
||
callbackRequest(data)
|
||
.then(res =>{
|
||
if(res.data.returnCode == 1){
|
||
this.list = res.data.returnData;
|
||
this.finalList = this.list;
|
||
}
|
||
})
|
||
},
|
||
inputSel(e){
|
||
this.uinfo.orgName = e.detail.value;
|
||
if(e.detail.value == ""){
|
||
this.finalList = this.list;
|
||
this.showList = true;
|
||
return
|
||
}
|
||
var finalList = [];
|
||
for (var i = 0; i < this.list.length; i++) {
|
||
let ite = this.list[i];
|
||
// 包含某一字符串
|
||
if(ite.indexOf(e.detail.value) !== -1){
|
||
finalList = finalList.concat(ite);
|
||
}
|
||
}
|
||
this.finalList = finalList;
|
||
this.showList = true;
|
||
},
|
||
changeSel(newVal){
|
||
this.uinfo.orgName = newVal.newVal;
|
||
},
|
||
checkPhone (phone) {
|
||
if (!(/^1[3456789]\d{9}$/.test(phone))) {
|
||
return false;
|
||
}
|
||
return true;
|
||
},
|
||
testCode(code) {
|
||
if(!(/^\d{6}$/.test(code))){
|
||
return false;
|
||
}
|
||
return true;
|
||
},
|
||
getCodeInfo(){
|
||
if(this.jsq){return false;}
|
||
if (!this.checkPhone(this.uinfo.mobile)) {
|
||
alertTip('请填写正确的手机号码','',1000);
|
||
return false;
|
||
}
|
||
let data = {
|
||
"method": getCodeInfo,
|
||
"data": {
|
||
phone:this.uinfo.mobile
|
||
}
|
||
}
|
||
callbackRequest(data)
|
||
.then(res =>{
|
||
if(res.data.returnCode == 1){
|
||
this.codeKey = res.data.returnMsg;
|
||
alertTip('验证码已发送，请注意查收！','',3000);
|
||
this.timer();
|
||
}
|
||
})
|
||
},
|
||
//倒计时
|
||
timer(){
|
||
let i = 60;
|
||
let _this = this;
|
||
this.jsq = setInterval(function(){
|
||
if(i == 0){
|
||
_this.btnText = '重新发送';
|
||
clearInterval(_this.jsq);
|
||
_this.jsq = null;
|
||
return false;
|
||
}
|
||
_this.btnText = i+'s';
|
||
i--;
|
||
},1000);
|
||
|
||
},
|
||
toSubUinfo() {
|
||
if(!this.currentUser.openid){
|
||
alertTip('微信授权失败，请退出重新进入此页面','',3000);
|
||
return false;
|
||
}
|
||
if(!this.uinfo.realName){
|
||
alertTip('姓名不能为空','',1000);
|
||
return false;
|
||
}
|
||
if (!this.checkPhone(this.uinfo.mobile)) {
|
||
alertTip('请填写正确的手机号码','',1000);
|
||
return false;
|
||
}
|
||
if (!this.testCode(this.vCode)) {
|
||
alertTip('请输入六位数字验证码','',1000);
|
||
return false;
|
||
}
|
||
if(this.companyList[this.companyListIndex].name == '请选择...'){
|
||
alertTip('请选择单位信息','',1000);
|
||
return false;
|
||
}
|
||
if(this.companyList[this.companyListIndex].name == '其它' && !this.uinfo.companyName){
|
||
alertTip('请输入单位信息','',1000);
|
||
return false;
|
||
}
|
||
if(this.companyList[this.companyListIndex].name != '其它' &&
|
||
this.departmentList[this.departmentListIndex].name == '请选择...'){
|
||
alertTip('请选择部门信息','',1000);
|
||
return false;
|
||
}
|
||
|
||
uni.showModal({
|
||
title: "保存信息",
|
||
content: "确定要保存修改内容？",
|
||
showCancel: true,
|
||
cancelText: "取消",
|
||
confirmText: "保存",
|
||
success: (res) => {
|
||
if (res.confirm) {
|
||
let that = this;
|
||
that.saving = true
|
||
that.uinfo.gender = that.sexs[that.index];
|
||
that.uinfo.wxOpenId = that.currentUser.openid;
|
||
that.uinfo.wxProfile = that.currentUser.headimgurl;
|
||
that.uinfo.vCode = that.vCode;
|
||
that.uinfo.codeKey = that.codeKey;
|
||
console.log("codeKey--->"+that.uinfo.codeKey)
|
||
// debugger
|
||
if(that.companyList[that.companyListIndex].name == '其它'){
|
||
that.uinfo.orgName = that.uinfo.companyName;
|
||
}
|
||
else{
|
||
that.uinfo.orgName = that.companyList[that.companyListIndex].name;
|
||
}
|
||
that.uinfo.departmentName = that.departmentList[that.departmentListIndex].name;
|
||
that.uinfo.departmentId = that.departmentList[that.departmentListIndex].id;
|
||
that.uinfo.department_id = that.departmentList[that.departmentListIndex].id;
|
||
let param={
|
||
"method":saveWechatUser,
|
||
data:that.uinfo,
|
||
}
|
||
console.log("params:",that.uinfo);
|
||
callbackRequest(param)
|
||
.then(({data}) => {
|
||
if(data.returnCode == 2){
|
||
that.uinfo.register = 1;
|
||
//that.uinfo.isCheck = 0;
|
||
that.uinfo.isCheck = 1;//信息错误，不变成待审核
|
||
alertTip(data.returnMsg,'',5000);
|
||
}else{
|
||
alertTip(data.returnMsg);
|
||
that.uinfo.userStatus = 2;
|
||
}
|
||
})
|
||
|
||
} else if (res.cancel) {
|
||
}
|
||
}
|
||
|
||
})
|
||
},
|
||
bindDateChange: function(e) {
|
||
this.date = e.target.value
|
||
},
|
||
chooseDate(e) {
|
||
this.date = e.time;
|
||
},
|
||
change(type, e) {
|
||
this.index = e.detail.value;
|
||
},
|
||
confirm(e) {
|
||
this.selectedTime = e.fulldate;
|
||
},
|
||
open() {
|
||
this.$refs.calendar.open();
|
||
},
|
||
|
||
},
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss">
|
||
@import '@/static/css/common.scss';
|
||
.bg-ccc{
|
||
background: #ccc !important;
|
||
}
|
||
.icon_view {
|
||
color: $font-color-light;
|
||
margin-left: 2vw;
|
||
}
|
||
|
||
.uinfo_view {
|
||
font-size: $font-lg;
|
||
background: #fff;
|
||
min-height:100vh;
|
||
}
|
||
|
||
.u_head {
|
||
padding: 4vw;
|
||
}
|
||
|
||
.head_img {
|
||
margin: 40upx auto;
|
||
margin-top: 50upx;
|
||
width: 25vw;
|
||
height: 25vw;
|
||
box-shadow: 0 0 10rpx 1rpx #f8f8f8;
|
||
border-radius:50%;
|
||
}
|
||
.head_img image{
|
||
width:100%;
|
||
height:100%;
|
||
border-radius: 50%;;
|
||
}
|
||
.head_edit {
|
||
position: absolute;
|
||
top: 41vw;
|
||
left: 56vw;
|
||
width: 10vw;
|
||
height: 10vw;
|
||
z-index: 9999;
|
||
}
|
||
|
||
.i_img {
|
||
width: 100%;
|
||
height: 100%;
|
||
border-radius: 50%;
|
||
|
||
}
|
||
|
||
.head_name {
|
||
font-size: 40upx;
|
||
font-weight: 800;
|
||
text-align: center;
|
||
}
|
||
|
||
.u_mid {
|
||
padding: 4vw;
|
||
}
|
||
|
||
.mid_view {
|
||
padding: 4vw 0;
|
||
display: flex;
|
||
border-bottom: 1px solid #eee;
|
||
}
|
||
.code-box .getCodeBtn{
|
||
float:right;
|
||
width:22vw;
|
||
height:50rpx;
|
||
background: #ff6600;
|
||
text-align: center;
|
||
line-height: 50rpx;
|
||
border-radius:4rpx;
|
||
font-size:26rpx;
|
||
color:#fff;
|
||
}
|
||
.code-box .tab_rig {
|
||
width: 40vw;
|
||
height: 25px;
|
||
}
|
||
.tab_left {
|
||
width: 25vw;
|
||
text-align: right;
|
||
margin-right: 3vw;
|
||
line-height:50rpx;
|
||
}
|
||
|
||
.tab_rig {
|
||
width: 55vw;
|
||
line-height:50rpx;
|
||
input{
|
||
height: 50rpx;
|
||
}
|
||
}
|
||
|
||
.confirm-btn {
|
||
width: 630upx;
|
||
height: 76upx;
|
||
line-height: 76upx;
|
||
border-radius: 50px;
|
||
margin-top: 90upx;
|
||
margin-bottom: 60upx;
|
||
background: #00c277;
|
||
color: #fff;
|
||
font-size: $font-lg;
|
||
|
||
&:after {
|
||
border-radius: 100px;
|
||
}
|
||
}
|
||
.ipt-box {
|
||
margin-left: 160upx;
|
||
input {
|
||
width: 100%;
|
||
height: 50upx;
|
||
line-height: 50upx;
|
||
font-size: 26upx;
|
||
color: #666;
|
||
}
|
||
}
|
||
|
||
.select {
|
||
margin-left: 0rpx;
|
||
width: 60vw;
|
||
font-size: 30rpx;
|
||
color: #666;
|
||
.picker{
|
||
line-height: 50rpx;
|
||
}
|
||
.arrow {
|
||
float: right;
|
||
width: 16upx;
|
||
height: 29upx;
|
||
margin-top: 10upx;
|
||
}
|
||
|
||
input {
|
||
width: 70%;
|
||
}
|
||
}
|
||
|
||
.bg-gray{
|
||
background-color: #9A9A9A;
|
||
}
|
||
</style>
|