<template>
<view class="container">
<view class="info-list">
<view class="info-item">
<view class="contacts avatar-warp">
<text class="name">头像</text>
<image class="avatar" @click="chooseImage()" :src="avatar"></image>
</view>
</view>
<view class="info-item">
<view class="contacts">
<text class="name">称呼</text>
<input class="weui-input value" type="nickname" @blur="getnickname" v-model="nickname" placeholder="请输入称呼"/>
</view>
</view>
<view class="info-item">
<view class="contacts">
<text class="name">手机</text>
<button class="button btn-normal value" open-type="getPhoneNumber" @getphonenumber="getPhoneNumber">
<text v-if="userInfo.mobile">{{ userInfo.mobile }}</text>
<text style="color: #f9211c;margin-left: 2px;">更换</text>
</button>
</view>
</view>
<view class="info-item">
<view class="contacts">
<text class="name">密码</text>
<button class="button btn-normal value" @click="changePassword">
<text class="password">********</text>
<text style="color: #f9211c;margin-left: 2px;">修改</text>
</button>
</view>
</view>
<view class="info-item">
<view class="contacts">
<text class="name">性别</text>
<view class="value">
<radio-group @change="genderChange">
<label class="radio"><radio value="1" color="#00acac" :checked="userInfo.sex == '1' ? true : false"/>男</label>
<label class="radio second"><radio value="0" color="#00acac" :checked="userInfo.sex == '0' ? true: false"/>女</label>
</radio-group>
</view>
</view>
</view>
<view class="info-item">
<view class="contacts">
<text class="name">生日</text>
<picker class="value" mode="date" :value="userInfo.birthday" start="1900-01-01" @change="bindDateChange">
<view class="picker">{{ userInfo.birthday ? userInfo.birthday : '选择生日' }}</view>
</picker>
</view>
</view>
</view>
<!-- 底部操作按钮 -->
<view class="footer-fixed" v-if="userInfo.id">
<view class="btn-wrapper">
<view class="btn-item btn-item-main" @click="save()">保存信息</view>
</view>
<view class="btn-wrapper">
<view class="btn-item btn-item-out" @click="logout()">退出登录</view>
</view>
</view>
</view>
</template>
<script>
import * as UserApi from '@/api/user'
import * as UploadApi from '@/api/upload'
import store from '@/store'
import keyWords from "@/components/bian-keywords/index.vue"
export default {
components: {
keyWords
},
data() {
return {
//当前页面参数
options: {},
// 正在加载
isLoading: true,
userInfo: { avatar: '', name: '', sex: 0, birthday: '', hasPassword: '' },
openCardPara: null,
code: "",
nickname: "",
avatar: ""
}
},
/**
* 生命周期函数--监听页面加载
*/
onLoad(options) {
// 当前页面参数
this.options = options;
this.getUserInfo();
},
methods: {
/**
* 用户信息
* */
getUserInfo() {
const app = this
app.isLoading = true
UserApi.info()
.then(result => {
app.userInfo = result.data.userInfo;
if (result.data.openCardPara) {
app.openCardPara = result.data.openCardPara;
}
app.nickname = app.userInfo.name;
app.avatar = app.userInfo.avatar;
app.isLoading = false;
})
},
bindDateChange (e) {
let that = this;
that.userInfo.birthday = e.detail.value;
},
getnickname(e) {
this.nickname = e.detail.value;
},
genderChange(e) {
this.userInfo.sex = e.detail.value
},
/**
* 获取会员手机
* */
getPhoneNumber(e) {
if (e.detail.errMsg == "getPhoneNumber:ok") {
this.onAuthSuccess(e)
}
},
getCode(e) {
const app = this
return new Promise((resolve, reject) => {
uni.login({
provider: 'weixin',
success: res => {
e.detail.code = res.code
UserApi.save(e.detail)
.then(result => {
app.userInfo.mobile = result.data.mobile
})
resolve(res.code)
},
fail: reject
})
})
},
onAuthSuccess(e) {
this.getCode(e)
},
// 修改密码
changePassword() {
this.$navTo('pages/user/password?hasPassword=' + this.userInfo.hasPassword);
console.log(this.userInfo.hasPassword);
},
// 选择图片
chooseImage() {
const app = this
// 选择图片
uni.chooseImage({
count: 1,
sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图，默认二者都有
sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有
success({ tempFiles }) {
const imageList = tempFiles;
return new Promise((resolve, reject) => {
if (imageList.length > 0) {
UploadApi.image(imageList)
.then(files => {
if (files && files.length > 0) {
app.userInfo.avatar = files[0].fileName;
app.avatar = files[0].domain + app.userInfo.avatar;
}
resolve(files)
})
.catch(err => reject(err))
} else {
resolve()
}
})
}
});
},
/**
* 保存个人信息
*/
save() {
const app = this
app.isLoading = true
UserApi.save({"name": app.nickname, "avatar": app.avatar, "sex": app.userInfo.sex, "birthday": app.userInfo.birthday})
.then(result => {
app.userInfo = result.data
app.isLoading = false
app.$success('保存成功！')
}).catch(err => {
app.isLoading = false;
})
},
/**
* 退出登录
*/
logout() {
store.dispatch('Logout');
this.$navTo('pages/user/index');
}
}
}
</script>
<style lang="scss" scoped>
.info-list {
padding-bottom: 100rpx;
margin-top: 25rpx;
}
// 项目内容
.info-item {
margin: 20rpx auto 20rpx auto;
padding: 30rpx 40rpx;
width: 94%;
box-shadow: 0 1rpx 5rpx 0px rgba(0, 0, 0, 0.05);
border-radius: 16rpx;
background: #fff;
.avatar-warp {
line-height: 120rpx;
}
}
.contacts {
font-size: 30rpx;
.name {
margin-left:0px;
}
.value {
float:right;
color:#999999;
text-align: right;
.second {
margin-left: .6rem;
}
}
.password {
text-align: right;
float: left;
padding-right: 5rpx;
}
.avatar {
width: 120rpx;
height: 120rpx;
border-radius: 120rpx;
border: solid 1px #cccccc;
float: right;
}
}
.item-option {
display: flex;
justify-content: space-between;
height: 48rpx;
}
// 底部操作栏
.footer-fixed {
height: 100rpx;
z-index: 11;
.btn-wrapper {
height: 100%;
display: flex;
align-items: center;
padding: 0 20rpx;
}
.btn-item {
flex: 1;
font-size: 28rpx;
height: 80rpx;
line-height: 80rpx;
text-align: center;
color: #fff;
border-radius: 40rpx;
}
.btn-item-main {
background: linear-gradient(to right, #f9211c, #ff6335);
}
.btn-item-out {
margin-top: 20rpx;
background: #FFFFFF;
border: 1px solid $fuint-theme;
color: #666666;
}
}
</style>