软测宝小程序
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.
 
 
 
keysass_app/pages/personal/setup/Information.vue

316 lines
9.0 KiB

<template>
<view class="navTab">
<u-form v-if="wxUserInfo" :model="infornobj" ref="infornobj" label-position='left' label-width='130' border-bottom='false' >
<u-form-item label="头像:" prop="avatar" border-bottom='false' required='true' >
<u-upload ref="upload" width='100px' height='100px'
:action="action"
:header="headers"
:auto-upload="true"
:show-progress="false"
max-count="1"
:deletable="true"
:file-list="infornobj.avatar"
@on-success="(data,index,lists) => {fielUploadSuc(data,index,lists) }"
@on-remove="(index, lists, name)=>{deleteUpfile(index)}"
@on-error="(data,index, lists)=>{errorUpfile(data,index, lists)}"
>
<view slot="addBtn" class="slot-btn" >
<img v-if="infornobj.avatar" :src="infornobj.avatar" mode="aspectFill" style="width: 100px;height: 100px;">
<div v-else class="upliacla">
<p style="font-size: 18px;">+</p>
<p>选择图片</p>
<!-- <u-icon name="arrow-upward" color="#606266" size="38"></u-icon> -->
</div>
</view>
</u-upload>
</u-form-item>
<u-form-item label="昵称:" prop="nickName" border-bottom='false' required='true'>
<view class="sinput">
<u-input style="width:100%;" :disabled='istest' v-model="infornobj.nickName" placeholder='输入昵称'/>
</view>
</u-form-item>
<u-form-item label="性别:" prop="sex" border-bottom='false' required='true'>
<view class="sinput">
<u-input style="width:100%;" v-model="infornobj.sex" type="select" @click="sexshow = true" placeholder='请选择' />
<u-select v-model="sexshow" :list="sexList" @confirm="sexchange"></u-select>
</view>
</u-form-item>
<u-form-item label="邮箱:" prop="email" border-bottom='false' required='true'>
<view class="sinput">
<!-- <input type="text" style="width:100%;" v-model="infornobj.email"/> @input='xgemial'-->
<u-input style="width:100%;" :disabled='istest' v-model="infornobj.email" placeholder='输入邮箱'/>
</view>
</u-form-item>
<u-form-item label="手机号:" prop="phonenumber" border-bottom='false' required='true'>
<view class="sinput">
<u-input style="width:100%;" disabled v-model="infornobj.phonenumber" placeholder='输入手机号'/>
</view>
</u-form-item>
</u-form>
<view class="button-g" @click="resource">保存</view>
<u-toast ref="uToast" />
</view>
</template>
<script>
export default {
data() {
return {
sexshow:false,
wxUserInfo:null,
isPopupShow:false,
istest:false,
infornobj:{avatar:'',nickName:'',phonenumber:'',email:'',sex:''},
sexList:[{value:'0',label:'男'},{value:'1',label:'女'},],
// action: 'https://www.keyitest.cn/prod-api/upload',
action: this.http.baseUrl + '/upload',
headers:{
// 'TENANT-ID': 3, 'accept': '*/*',
// 'Connection': 'keep-alive','Content-Type': 'multipart/form-data; boundary=----WebKitFormBoundaryDX4wOxgD9mzUzAIF',
// 'Origin': 'https://www.keyitest.cn', 'Accept-Encoding': 'gzip, deflate, br',
// 'Accept-Language': 'zh,zh-CN;q=0.9', 'Host': 'https://www.keyitest.cn',
// 'Referer':'https://www.keyitest.cn',
Authorization:'Bearer '+uni.getStorageSync('accessToken'),
},
Rules: {
nickName: [{ required: true, message: '请输入姓名', trigger: 'change',}],
email: [{ required: true, message: '请输入邮箱', trigger: 'change',},
{
pattern:
/^(([^<>()[\]\\.,;:\s@"]+(\.[^<>()[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/,
message: "邮箱格式不对",
trigger: "blur",
},],
//
sex: [{ required: true, message: '请选择性别', trigger: 'change',}],
},
}
},
onReady(){
this.$refs.infornobj.setRules(this.Rules);
},
onShow() {
},
mounted() {
this.infornobj.avatar=this.wxUserInfo.avatar
},
onLoad() {
this.wxUserInfo=uni.getStorageSync('wxUserInfo');
let avatar=uni.getStorageSync('avatar');
let email=uni.getStorageSync('email');
let nickName=uni.getStorageSync('nickName');
let sex=uni.getStorageSync('sex');
console.log('wxUserInfo',this.wxUserInfo,)
let {phonenumber}=this.wxUserInfo;
let setavatar='',sexdata='';
if(avatar){
// if(avatar.indexOf('http')==0){
// setavatar = avatar
// }else{
// setavatar=this.http.baseUrl+avatar
// }
setavatar = this.http.baseUrl + avatar
}else{
setavatar=''
}
if(sex){
sexdata=this.sexList.filter(item=>item.value==sex)[0].label;
}
console.log('sex--',this.infornobj.sex)
console.log('头像',setavatar,this.wxUserInfo)
this.$nextTick(()=>{
let setphone=phonenumber.slice(0,3)+'****'+phonenumber.slice(7,11)
this.infornobj={nickName,sex:sexdata,phonenumber:setphone,avatar:setavatar,email:email?email:''}
console.log('avatar',this.wxUserInfo,this.infornobj)
})
},
methods: {
sexchange(e){
this.infornobj.sex=e[0].label
},
//文件上传成功回调
fielUploadSuc(data,index,lists) {
console.log('-',data,'*',index,lists)
if (data.code === 200) {
this.infornobj.avatar=data.filePath
// console.log('头像',this.infornobj.avatar)
}
},
//移除
deleteUpfile(index,lists){
console.log('del头像',this.infornobj.avatar)
this.infornobj.avatar=''
// if(this.credentialImgList.length>0){
// let id=this.credentialImgList[0].id;
// this.http.quickDelete(`/equestrianinfo/file/${id}`).then(()=>{})
// }
},
errorUpfile(data,index){
// console.log('上传失败-',data,'*',index)
// this.$refs.uToast.show({
// title: '上传失败,请您重新上传',
// type: 'error',
// })
},
open() {
// console.log('open');
},
close() {
this.isPopupShow = false
},
editinform(){
this.isPopupShow = true
},
xgemial(e){
console.log('xgemial===',e,'===xgemial',this.infornobj.avatar);
this.infornobj.avatar=this.infornobj.avatar.slice(0,1)
},
resource(){
console.log('this.infornobj---',this.infornobj)
this.$refs.infornobj.validate(valid => {
if (valid) {
if(!this.infornobj.avatar){
this.$refs.uToast.show({
title: '请上传头像',
type: 'warning',
})
return;
}
let avatar='',avtimg=this.infornobj.avatar;
if(avtimg&&avtimg.indexOf('h')==0){
avatar=avtimg
}else{
avatar=this.http.baseUrl+avtimg
}
let sexindex=this.sexList.filter(item=>item.label==this.infornobj.sex)[0].value;
let data={
userId:this.wxUserInfo.userId,
nickName:this.infornobj.nickName,
email:this.infornobj.email,
sex:sexindex,
avatar,
}
console.log('data---',data)
// return;
this.http.quickPut(`/system/user/profile`,data,true).then(res=>{
if(res.data.code==200){
uni.setStorageSync('avatar', data.avatar)
uni.setStorageSync('email', data.email)
uni.setStorageSync('nickName', data.nickName)
uni.setStorageSync('sex', data.sex)
this.$refs.uToast.show({
title: '信息修改成功',
type: 'success',
isTab:true,
url:'pages/personal/personal'
})
} else {
this.$refs.uToast.show({
title: res.data.msg,
type: 'eroor',
})
}
// console.log('res---',res)
})
}else{
console.log('验证失败',this.infornobj)
}
})
}
}
}
</script>
<style>
.navTab{
background-color: #ffffff;
/* height: 96vh; */
width: 96vw;
margin: 2vh auto;
padding: 10px 15px 30px 25px;
border-radius: 5px;
}
.sinput{
display: flex;
align-items: center;
/* height: 50px; */
}
.u-form-left__content__label{
color:#808080!important;
}
.sinput .u-input{
height:35px;
border-bottom: 1px solid #EBEBEB!important;
}
.slot-btn{
width:200rpx;
height:0rpx;
zIndex:99;
/* display: flex;
justify-content: center;
align-items: center;
background: rgb(244, 245, 246);
border-radius: 10rpx; */
}
.slot-btn__hover {
background-color: rgb(235, 236, 238);
}
.infoencls{
display: flex;
justify-content: space-between;
font-size: 15px;
border-bottom: 1px solid #EBEBEB;
height:43px;
align-items: center;
}
.peodi{
margin:-5px auto 15px;
width: 260px;
text-align: center;
color: #1A1A1A;
font-size:36rpx;
font-weight: bold;
}
.button-g{
/* width:90vw; */
background:#1578ED;
border: 1px solid #1578ED;
color: #FFFFFF;
height: 80rpx;
border-radius:15rpx;
text-align: center;
line-height:80rpx;
font-size: 35rpx;
margin-top: 30px;
/* position: fixed; */
/* bottom:25px; */
}
.picput{
margin:50px auto;
width:65vw;
text-align: center;
}
.u-list-item{
margin: 0 !important;
background: transparent!important;
color:transparent!important;
}
.upliacla{
width: 100px;
height: 100px;
/* line-height:100px; */
border-radius: 4px;
background: #f4f5f6;
color:#606266;
display:flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
</style>