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.
485 lines
11 KiB
485 lines
11 KiB
<template> |
|
<!--pages/user/personalData/index.wxml--> |
|
<view class="personal-index"> |
|
<view class="head_box"> |
|
<cu-custom :isBack="true" :bgColor="rgb(35, 35, 40)"></cu-custom> |
|
</view> |
|
<view class="bg-img-box"><image src="https://download.cyjyyjy.com/personalPage-bg.png"></image></view> |
|
<view class="logo-box acea-row row-column"> |
|
<image src="/static/images/logo.png"></image> |
|
<view>欢迎入驻湖北省艺术设计协会</view> |
|
</view> |
|
<view class="form-box"> |
|
<view class="title">请完善个人信息</view> |
|
<view class="form"> |
|
<view class="inp-box"> |
|
<view class="label">姓名</view> |
|
<input type="text" placeholder="请填写您的真实姓名" :value="form.realName" @input="changeName" placeholder-style="color:#6D6D6D"> |
|
</view> |
|
<view class="inp-box"> |
|
<view class="label">身份证号</view> |
|
<input type="idcard" placeholder="请填写您的身份证号码" maxlength="18" @input="changeidCard" :value="form.idCard" placeholder-style="color:#6D6D6D"> |
|
</view> |
|
<view class="inp-box"> |
|
<view class="label">手机号</view> |
|
<input type="text" placeholder="请填写您的手机号" :value="form.phone" maxlength="11" @input="changePhone" placeholder-style="color:#6D6D6D"> |
|
<button v-if="form.phone == ''" class="getPhone-btn" open-type="getPhoneNumber" @getphonenumber="getPhoneNumber">一键获取</button> |
|
</view> |
|
<view class="inp-box"> |
|
<view class="label">短信验证码</view> |
|
<view class="sencode-box acea-row-nowrap row-between row-middle"> |
|
<input type="text" placeholder="请填写短信验证码" :value="form.code" @input="changeCode" maxlength="6" placeholder-style="color:#6D6D6D"> |
|
<view class="sendcode-btn" v-if="!disabled" @tap="sendCode">发送验证码</view> |
|
<view class="sendcode-btn default" v-else>{{ second }}秒后重新发送</view> |
|
</view> |
|
</view> |
|
<view class="inp-box"> |
|
<view class="label">所在城市</view> |
|
<region-picker @change="bindRegionChange" :value="form.city"> |
|
<view class="picker"> |
|
{{form.city}} |
|
</view> |
|
</region-picker> |
|
</view> |
|
<view class="inp-box"> |
|
<view class="label">所在行业</view> |
|
<input type="text" placeholder="请选择" @tap="toProfession" disabled="disabled" :value="form.profession" placeholder-style="color:#6D6D6D"> |
|
</view> |
|
<view class="inp-box noBorder"> |
|
<view class="label">所在职位</view> |
|
<picker @change="bindPickerChange" :value="form.position" :range="positionArr"> |
|
<view class="picker">{{form.position}}</view> |
|
</picker> |
|
<!-- <input type="text" placeholder="请填写您的职位" placeholder-style="color:#FFE8D8"/> --> |
|
</view> |
|
</view> |
|
<view class="submit-btn" @tap="toComplete">保存并入驻</view> |
|
</view> |
|
</view> |
|
</template> |
|
|
|
<script> |
|
// pages/user/personalData/index.js |
|
const app = getApp(); |
|
|
|
export default { |
|
data() { |
|
return { |
|
navTopHeight: app.globalData.menuTop + app.globalData.navTopHeight + 20, |
|
form: { |
|
realName: '', |
|
idcard: '', |
|
phone: '', |
|
code: '', |
|
city: '请选择所在城市', |
|
profession: '', |
|
position: '请选择' |
|
}, |
|
disabled: false, |
|
second: 60, |
|
positionArr: ['企业负责人', '高层管理者', '中层管理者', '基层管理者', '普通员工'], |
|
timer: null, |
|
userInfo: "" |
|
}; |
|
}, |
|
|
|
components: {}, |
|
props: {}, |
|
|
|
/** |
|
* 生命周期函数--监听页面加载 |
|
*/ |
|
onLoad: function (options) { |
|
this.setData({ |
|
userInfo: uni.getStorageSync('userInfo') |
|
}); |
|
|
|
if (this.userInfo.phone) { |
|
this.setData({//['form.phone']: this.data.userInfo.phone |
|
}); |
|
//try fix |
|
this.form.phone = this.userInfo.phone; |
|
} |
|
|
|
if (app.globalData.inviterId) { |
|
this.bindInviter(); |
|
} |
|
}, |
|
|
|
/** |
|
* 生命周期函数--监听页面初次渲染完成 |
|
*/ |
|
onReady: function () {}, |
|
|
|
/** |
|
* 生命周期函数--监听页面显示 |
|
*/ |
|
onShow: function () { |
|
if (uni.getStorageSync('form')) { |
|
let form = uni.getStorageSync('form'); |
|
//try fix |
|
this.form.position = form.position; |
|
//try fix |
|
this.form.code = form.code; |
|
//try fix |
|
this.form.idCard = form.idCard; |
|
//try fix |
|
this.form.city = form.city; |
|
//try fix |
|
this.form.realName = form.realName; |
|
} |
|
}, |
|
|
|
/** |
|
* 生命周期函数--监听页面隐藏 |
|
*/ |
|
onHide: function () {}, |
|
|
|
/** |
|
* 生命周期函数--监听页面卸载 |
|
*/ |
|
onUnload: function () {}, |
|
|
|
/** |
|
* 页面相关事件处理函数--监听用户下拉动作 |
|
*/ |
|
onPullDownRefresh: function () {}, |
|
|
|
/** |
|
* 页面上拉触底事件的处理函数 |
|
*/ |
|
onReachBottom: function () {} |
|
/** |
|
* 用户点击右上角分享 |
|
*/ |
|
// onShareAppMessage: function () { |
|
// } |
|
, |
|
methods: { |
|
//绑定上级 |
|
bindInviter() { |
|
app.http('get', 'user/bindInviter', { |
|
inviterId: app.globalData.inviterId |
|
}).then(res => { |
|
if (res.data.success) { |
|
console.log('绑定成功'); |
|
} else { |
|
console.log('绑定失败'); |
|
} |
|
}); |
|
}, |
|
|
|
setFormStorage() { |
|
uni.setStorageSync('form', this.form); |
|
}, |
|
|
|
changeName(e) { |
|
this.setData({//['form.realName']: e.detail.value |
|
}); |
|
//try fix |
|
this.form.realName = e.detail.value; |
|
this.setFormStorage(); |
|
}, |
|
|
|
changePhone(e) { |
|
this.setData({//.form.phone: e.detail.value |
|
}); |
|
//try fix |
|
this.form.phone = e.detail.value; |
|
}, |
|
|
|
changeidCard(e) { |
|
this.setData({//.form.idCard: e.detail.value |
|
}); |
|
//try fix |
|
this.form.idCard = e.detail.value; |
|
this.setFormStorage(); |
|
}, |
|
|
|
bindRegionChange(e) { |
|
this.setData({//.form.city: e.detail.value.join(' ') |
|
}); |
|
//try fix |
|
this.form.city = e.detail.value.join(' '); |
|
this.setFormStorage(); |
|
}, |
|
|
|
bindPickerChange(e) { |
|
this.setData({//.form.position: this.data.positionArr[e.detail.value] |
|
}); |
|
//try fix |
|
this.form.position = this.positionArr[e.detail.value]; |
|
this.setFormStorage(); |
|
}, |
|
|
|
changeCode(e) { |
|
this.setData({//.form.code: e.detail.value |
|
}); |
|
//try fix |
|
this.form.code = e.detail.value; |
|
this.setFormStorage(); |
|
}, |
|
|
|
toProfession() { |
|
uni.navigateTo({ |
|
url: '../profession/index' |
|
}); |
|
this.setFormStorage(); |
|
}, |
|
|
|
getPhoneNumber(e) { |
|
if (e.detail.errMsg == 'getPhoneNumber:ok') { |
|
app.http('post', 'wxapp/binding', { |
|
encryptedData: e.detail.encryptedData, |
|
iv: e.detail.iv |
|
}).then(res => { |
|
if (res.data.success) { |
|
this.setData({//['form.phone']: res.data.data.phone |
|
}); |
|
//try fix |
|
this.form.phone = res.data.data.phone; |
|
uni.showToast({ |
|
title: res.data.msg |
|
}); |
|
} else { |
|
uni.showToast({ |
|
title: res.data.msg, |
|
icon: 'none' |
|
}); |
|
} |
|
}); |
|
} |
|
}, |
|
|
|
backPage() { |
|
uni.navigateBack({ |
|
delta: 1 |
|
}); |
|
}, |
|
|
|
sendCode() { |
|
var reg = /^1[3456789]\d{9}$/; |
|
|
|
if (this.form.phone === '') { |
|
uni.showModal({ |
|
title: '手机号码不能为空', |
|
type: 'none' |
|
}); |
|
return; |
|
} else if (!reg.test(this.form.phone)) { |
|
uni.showModal({ |
|
title: '请输入有效的手机号码', |
|
type: 'none' |
|
}); |
|
return; |
|
} else { |
|
if (this.disabled == false) { |
|
clearInterval(this.timer); |
|
this.setData({ |
|
disabled: true |
|
}); |
|
let timer = setInterval(() => { |
|
//设置延迟执行 |
|
this.timeup(); |
|
}, 1000); |
|
this.setData({ |
|
timer: timer |
|
}); |
|
} |
|
|
|
app.http('post', 'user/getVerificationCode', { |
|
phone: this.form.phone |
|
}).then(res => { |
|
if (res.data.success) { |
|
uni.showToast({ |
|
title: '短信已发送！' |
|
}); |
|
} else { |
|
uni.showToast({ |
|
title: res.data.msg, |
|
icon: 'none' |
|
}); |
|
} |
|
}); |
|
} |
|
}, |
|
|
|
timeup() { |
|
this.setData({ |
|
second: this.second - 1 |
|
}); |
|
|
|
if (this.second == 0) { |
|
this.second = 60; |
|
this.setData({ |
|
disabled: false, |
|
second: 60 |
|
}); |
|
clearInterval(this.timer); |
|
return; |
|
} |
|
}, |
|
|
|
toComplete() { |
|
let data = { |
|
realName: this.form.realName, |
|
idCard: this.form.idCard, |
|
code: this.form.code, |
|
phone: this.form.phone, |
|
city: this.form.city, |
|
industry: this.form.profession, |
|
position: this.form.position |
|
}; |
|
app.http('post', 'user/edit', data).then(res => { |
|
if (res.data.success) { |
|
uni.navigateTo({ |
|
url: '../completeData/index' |
|
}); |
|
app.getInfo(); |
|
} else { |
|
uni.showToast({ |
|
title: res.data.msg, |
|
icon: 'none' |
|
}); |
|
} |
|
}); |
|
} |
|
|
|
} |
|
}; |
|
</script> |
|
<style> |
|
/* pages/user/personalData/index.wxss */ |
|
page{ |
|
width: 100%; |
|
height: 100vh; |
|
} |
|
.head_box{ |
|
color: #fff; |
|
} |
|
.personal-index{ |
|
width: 100%; |
|
height: 100vh; |
|
position: relative; |
|
overflow: hidden; |
|
} |
|
.bg-img-box{ |
|
width: 100%; |
|
height: 100%; |
|
position: absolute; |
|
top: 0; |
|
left: 0; |
|
} |
|
.bg-img-box image{ |
|
width: 100%; |
|
height: 100%; |
|
} |
|
.logo-box{ |
|
position: absolute; |
|
top: 220rpx; |
|
left: 32rpx; |
|
width: 100%; |
|
font-size: 40rpx; |
|
color: #EFDACA; |
|
} |
|
.logo-box image{ |
|
width: 160rpx; |
|
height: 90rpx; |
|
margin-bottom: 22rpx; |
|
} |
|
|
|
.form-box{ |
|
position: absolute; |
|
top: 400rpx; |
|
left: 0; |
|
font-size: 28rpx; |
|
color: #363636; |
|
width: 100%; |
|
padding: 0 32rpx; |
|
} |
|
.title{ |
|
font-size: 40rpx; |
|
color: #EFDACA; |
|
} |
|
|
|
.form{ |
|
width: 100%; |
|
min-height: 640rpx; |
|
background: linear-gradient(322deg, #DEB99F 0%, #E9D1C0 51%, #E3C9B5 100%); |
|
border-radius: 8rpx; |
|
margin: 62rpx 0; |
|
padding: 16rpx 0; |
|
} |
|
.form .inp-box{ |
|
width: 100%; |
|
height: 86rpx; |
|
padding: 0 16rpx; |
|
border-bottom: 2rpx solid #B89F83; |
|
display: flex; |
|
align-items: center; |
|
justify-content: space-between; |
|
} |
|
.form .inp-box .label{ |
|
width: 160rpx; |
|
text-align: left; |
|
} |
|
.inp-box input{ |
|
text-align: right; |
|
} |
|
.sencode-box{ |
|
width: calc(100% - 180rpx); |
|
} |
|
.sencode-box input{ |
|
width: 230rpx; |
|
} |
|
.sencode-box .sendcode-btn,.getPhone-btn{ |
|
width: 220rpx; |
|
height: 66rpx; |
|
text-align: center; |
|
line-height: 66rpx; |
|
background: #FFFFFF; |
|
color: #BE996F; |
|
box-shadow: 6rpx 6rpx 12rpx #D1BCA5; |
|
border-radius: 8rpx; |
|
position: relative; |
|
} |
|
.sendcode-btn::before{ |
|
content: ''; |
|
display: inline-block; |
|
width: 2rpx; |
|
height: 40rpx; |
|
background: #C3AA91; |
|
position: absolute; |
|
left: -10rpx; |
|
top: 10rpx; |
|
} |
|
.picker{ |
|
color: #6D6D6D; |
|
} |
|
.noBorder{ |
|
border: none !important; |
|
} |
|
|
|
.submit-btn{ |
|
width: 268rpx; |
|
height: 82rpx; |
|
text-align: center; |
|
line-height: 82rpx; |
|
color: #946F46; |
|
font-size: 32rpx; |
|
background: linear-gradient(322deg, #DEB99F 0%, #E9D1C0 51%, #E3C9B5 100%); |
|
box-shadow: 6rpx 6rpx 20rpx rgba(22, 22, 22, 0.43); |
|
border-radius: 62rpx; |
|
margin: 0 auto; |
|
} |
|
|
|
|
|
.getPhone-btn{ |
|
width: 210rpx !important; |
|
padding: 0 !important; |
|
font-size: 28rpx; |
|
font-weight: normal; |
|
color: #BE996F; |
|
margin-left: 10rpx !important; |
|
} |
|
</style> |