123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299 |
- <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" @click="changeMobile" @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="#113a28" :checked="userInfo.sex == '1' ? true : false"/>男</label>
- <label class="radio second"><radio value="0" color="#113a28" :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'
- export default {
- 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);
- },
- // 修改手机号
- changeMobile() {
- // #ifdef H5
- this.$navTo('pages/user/mobile');
- // #endif
- },
- // 选择图片
- 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>
|