196 lines
4.7 KiB
Vue
196 lines
4.7 KiB
Vue
<template>
|
|
<view class="page-container">
|
|
<view class="user-info-container">
|
|
<view class="user-item">
|
|
<view class="user-item-title">姓  名</view>
|
|
<view class="user-item-content">
|
|
<input :value="userInfo.userInfoName" @input="inputName" placeholder="请输入姓名" />
|
|
</view>
|
|
</view>
|
|
<view class="user-item">
|
|
<view class="user-item-title">联系电话</view>
|
|
<view class="user-item-content">
|
|
<input :value="userInfo.contactPhone" @input="inputPhone" type="number" placeholder="请输入联系电话" />
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class="bottom-fixed-footer">
|
|
<view class="bottom-btn-green" @click="doUpdateInfo">保存</view>
|
|
</view>
|
|
</view>
|
|
<uni-popup ref="msg" type="message">
|
|
<uni-popup-message :type="msgType" :message="msgTxt" :duration="2000"></uni-popup-message>
|
|
</uni-popup>
|
|
</template>
|
|
|
|
<script>
|
|
import {
|
|
isValidPhone
|
|
} from '@/common/js/validator.js'
|
|
import UserApi from '@/common/js/net/UserApi.js'
|
|
export default {
|
|
data() {
|
|
return {
|
|
userInfo: {
|
|
userInfoName: '',
|
|
contactPhone: ''
|
|
},
|
|
showInfo: false,
|
|
msgType: 'success',
|
|
msgTxt: ''
|
|
}
|
|
},
|
|
onLoad(options) {
|
|
uni.setNavigationBarTitle({
|
|
title: '个人信息'
|
|
})
|
|
uni.setNavigationBarColor({
|
|
frontColor: '#000000', // 必写项，字体颜色仅支持#ffffff和#000000
|
|
backgroundColor: '#F0F0F0', // 传递的颜色值，仅支持十六进制颜色
|
|
animation: { // 可选项
|
|
duration: 500,
|
|
timingFunc: 'linear'
|
|
}
|
|
})
|
|
this.doGetMineInfo()
|
|
},
|
|
methods: {
|
|
//输入姓名
|
|
inputName(e) {
|
|
console.log(e)
|
|
this.userInfo.userInfoName = e.detail.value
|
|
},
|
|
//输入电话号码
|
|
inputPhone(e) {
|
|
console.log(e)
|
|
this.userInfo.contactPhone = e.detail.value
|
|
},
|
|
//校验参数
|
|
checkParams() {
|
|
if (this.userInfo.userInfoName == '') {
|
|
this.msgTxt = '请输入姓名'
|
|
this.msgType = 'error'
|
|
this.$refs.msg.open()
|
|
return false
|
|
}
|
|
if (this.userInfo.contactPhone == '' || !isValidPhone(this.userInfo.contactPhone)) {
|
|
this.msgTxt = '请输入正确的联系电话'
|
|
this.msgType = 'error'
|
|
this.$refs.msg.open()
|
|
return false
|
|
}
|
|
return true
|
|
},
|
|
//修改信息
|
|
doUpdateInfo() {
|
|
const _self = this
|
|
const isLegal = _self.checkParams()
|
|
if (isLegal) {
|
|
uni.showLoading({
|
|
title: '保存中...'
|
|
})
|
|
const data = {
|
|
userInfoName: _self.userInfo.userInfoName,
|
|
contactPhone: _self.userInfo.contactPhone,
|
|
idCardType: 'ID_CARD',
|
|
userInfoType: 'PERSONAL',
|
|
}
|
|
UserApi.doUpdateUserInfo(data)
|
|
.then(res => {
|
|
uni.hideLoading()
|
|
console.log(res)
|
|
_self.msgTxt = '个人信息修改成功'
|
|
_self.msgType = 'success'
|
|
_self.$refs.msg.open()
|
|
})
|
|
.catch(err => {
|
|
uni.hideLoading()
|
|
_self.msgTxt = err.msg ? err.msg : '信息修改失败,请稍后重试'
|
|
_self.msgType = 'error'
|
|
_self.$refs.msg.open()
|
|
})
|
|
}
|
|
},
|
|
//获取个人信息
|
|
doGetMineInfo() {
|
|
const _self = this
|
|
uni.showLoading({
|
|
title: '加载中...'
|
|
})
|
|
UserApi.doGetUserInfo()
|
|
.then(res => {
|
|
console.log(res)
|
|
uni.hideLoading()
|
|
_self.userInfo = res
|
|
})
|
|
.catch(err => {
|
|
uni.hideLoading()
|
|
_self.msgTxt = err.msg ? err.msg : '个人信息获取过程中出现异常，建议您稍作等待后再次尝试。'
|
|
_self.msgType = 'error'
|
|
setTimeout(() => {
|
|
uni.navigateBack()
|
|
}, 1500);
|
|
})
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.user-info-container {
|
|
height: 90vh;
|
|
background-color: white;
|
|
border-radius: 10px;
|
|
padding: 15rpx;
|
|
}
|
|
|
|
.user-item {
|
|
display: flex;
|
|
flex-direction: row;
|
|
justify-content: flex-start;
|
|
align-items: center;
|
|
padding: 10px 5px;
|
|
}
|
|
|
|
.user-item-title {
|
|
flex: .3;
|
|
}
|
|
|
|
.user-item-content {
|
|
flex: .7;
|
|
text-align: right;
|
|
padding: 15rpx;
|
|
border-radius: 15rpx;
|
|
background-color: $bg-gray-input-color;
|
|
}
|
|
|
|
.user-bottom-box {
|
|
position: fixed;
|
|
left: 0;
|
|
bottom: 0;
|
|
width: 100vw;
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: center;
|
|
align-items: center;
|
|
}
|
|
|
|
.user-green-bottom-btn {
|
|
height: 42px;
|
|
width: 90vw;
|
|
line-height: 42px;
|
|
margin-bottom: 20px;
|
|
border-radius: 4px;
|
|
background-color: rgba(255, 169, 0, 1);
|
|
color: rgba(255, 255, 255, 1);
|
|
font-size: 16px;
|
|
text-align: center;
|
|
font-family: PingFangSC-semiBold;
|
|
}
|
|
|
|
|
|
.user-green-bottom-btn:active {
|
|
background-color: rgba(255, 169, 0, 0.3);
|
|
color: white;
|
|
}
|
|
</style> |