|
|
@@ -0,0 +1,212 @@
|
|
|
+<template>
|
|
|
+ <view>
|
|
|
+ <!-- #ifdef MP-ALIPAY -->
|
|
|
+ <u-navbar :placeholder="true" bgColor="#fff" :autoBack="true" :border="true" title="个人信息"
|
|
|
+ leftIconSize="0"></u-navbar>
|
|
|
+ <!-- #endif -->
|
|
|
+ <!-- #ifdef MP-WEIXIN -->
|
|
|
+ <u-navbar :placeholder="true" bgColor="#fff" :autoBack="true" :border="true" title="个人信息"></u-navbar>
|
|
|
+ <!-- #endif -->
|
|
|
+ <!-- #ifndef MP-WEIXIN || MP-ALIPAY -->
|
|
|
+ <view v-if="pagesNum > 1">
|
|
|
+ <u-navbar :placeholder="true" bgColor="#fff" :autoBack="true" :border="true" title="个人信息" />
|
|
|
+ </view>
|
|
|
+ <view v-else>
|
|
|
+ <u-navbar leftIconSize="0" :placeholder="true" bgColor="#fff" :border="true" title="个人信息">
|
|
|
+ <view class="nav-left flex" slot="left" @click="$toIndex()">
|
|
|
+ <u-icon name="arrow-left" size="20" color="#333"></u-icon>
|
|
|
+ </view>
|
|
|
+ </u-navbar>
|
|
|
+ </view>
|
|
|
+ <!-- #endif -->
|
|
|
+
|
|
|
+ <view class="wrap">
|
|
|
+ <view class="wrap-avatar flex">
|
|
|
+ <view class="title">头像</view>
|
|
|
+ <!-- <view><u-avatar :src="avatarUrl"></u-avatar></view> -->
|
|
|
+ <!-- #ifdef H5 -->
|
|
|
+ <button type="button" class="button" @click="onChooseImage">
|
|
|
+ <u-avatar :src="avatarUrl" mode="aspectFill"></u-avatar>
|
|
|
+ </button>
|
|
|
+ <!-- #endif -->
|
|
|
+
|
|
|
+ <!-- #ifndef H5 -->
|
|
|
+ <button type="balanced" class="button" open-type="chooseAvatar" @chooseavatar="onChooseavatar">
|
|
|
+ <u-avatar :src="avatarUrl" mode="aspectFill"></u-avatar>
|
|
|
+ </button>
|
|
|
+ <!-- #endif -->
|
|
|
+ </view>
|
|
|
+ <view class="wrap-avatar flex">
|
|
|
+ <view class="title">昵称</view>
|
|
|
+ <view class="setName">
|
|
|
+ <!-- <u-input v-model="userInfo.nickName" placeholder="请设置昵称" inputAlign="right" border="none" /> -->
|
|
|
+ <input v-model="userInfo.nickName" class="input" type="nickname" placeholder="请设置昵称" />
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <!-- #ifdef MP-WEIXIN -->
|
|
|
+ <view class="tip">建议使用您的微信头像与昵称</view>
|
|
|
+ <!-- #endif -->
|
|
|
+ <view class="btn">
|
|
|
+ <u-button type="primary" text="确定" @click="setAvatar" shape="circle"></u-button>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+ import env from '../../config/env.js'
|
|
|
+ import $http from '@/utils/request.js'
|
|
|
+ import appId from '@/config/appId.js'
|
|
|
+ export default {
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ avatarUrl: '', //展示用
|
|
|
+ avatar: '', //上传用
|
|
|
+ userInfo: {},
|
|
|
+ pagesNum: '',
|
|
|
+ }
|
|
|
+ },
|
|
|
+ onShow() {
|
|
|
+ this.pagesNum = getCurrentPages().length
|
|
|
+ this.getInfo()
|
|
|
+ // this.userInfo = uni.getStorageSync('userInfo')
|
|
|
+ // this.avatarUrl = env.filePublic + this.userInfo.avatar
|
|
|
+ // this.avatar = this.userInfo.avatar
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ // 我的信息
|
|
|
+ getInfo() {
|
|
|
+ uni.showLoading({
|
|
|
+ title: '加载中'
|
|
|
+ });
|
|
|
+ $http.post('/api/v1/mp/user/getLoginUserinfo', { appSource: appId }).then(res => {
|
|
|
+ uni.hideLoading();
|
|
|
+ if (res.code == 0) {
|
|
|
+ this.userInfo = res.data
|
|
|
+ this.avatarUrl = env.filePublic + res.data.avatar
|
|
|
+ this.avatar = res.data.avatar
|
|
|
+ }
|
|
|
+ }).catch(() => {
|
|
|
+ uni.hideLoading();
|
|
|
+ })
|
|
|
+ },
|
|
|
+ setAvatar() {
|
|
|
+ uni.showLoading({
|
|
|
+ title: '加载中'
|
|
|
+ });
|
|
|
+ let data = {
|
|
|
+ nickName: this.userInfo.nickName, //昵称
|
|
|
+ userId: this.userInfo.userId, //用户id
|
|
|
+ avatar: this.avatar, //文件地址
|
|
|
+ }
|
|
|
+ $http.post('/api/v1/mp/user/mine/updateUserInfo', data).then(res => {
|
|
|
+ uni.hideLoading();
|
|
|
+ if (res.code == 0) {
|
|
|
+ $http.post('/api/v1/mp/user/getLoginUserinfo', { appSource: appId }).then(res => {
|
|
|
+ if (res.code == 0) {
|
|
|
+ uni.setStorageSync('userInfo', res.data)
|
|
|
+ this.toUserIndex()
|
|
|
+ }
|
|
|
+ })
|
|
|
+ }
|
|
|
+ }).catch(() => {
|
|
|
+ uni.hideLoading();
|
|
|
+ })
|
|
|
+ },
|
|
|
+ onChooseImage() {
|
|
|
+ let _this = this
|
|
|
+ uni.chooseImage({ //选择本地图片
|
|
|
+ count: 1, //默认9
|
|
|
+ sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
|
|
|
+ sourceType: ['album'], //从相册选择
|
|
|
+ success: (res) => {
|
|
|
+ console.log(res.tempFilePaths[0]);
|
|
|
+ _this.avatarUrl = res.tempFilePaths[0] // 将选择的图片路径预览
|
|
|
+ $http.upload(res.tempFilePaths[0]).then(res2 => {
|
|
|
+ uni.hideLoading();
|
|
|
+ console.log('res2',res2);
|
|
|
+ if (res.code == 0) {
|
|
|
+ _this.avatar = res2.data.fileName
|
|
|
+ }
|
|
|
+ }).catch(() => {
|
|
|
+ uni.hideLoading();
|
|
|
+ })
|
|
|
+ }
|
|
|
+ });
|
|
|
+ },
|
|
|
+ onChooseavatar(e) {
|
|
|
+ uni.showLoading({
|
|
|
+ title: '加载中'
|
|
|
+ });
|
|
|
+ $http.upload(e.detail.avatarUrl).then(res => {
|
|
|
+ uni.hideLoading();
|
|
|
+ if (res.code == 0) {
|
|
|
+ this.avatarUrl = e.detail.avatarUrl
|
|
|
+ this.avatar = res.data.fileName
|
|
|
+ }
|
|
|
+ }).catch(() => {
|
|
|
+ uni.hideLoading();
|
|
|
+ })
|
|
|
+ },
|
|
|
+ toUserIndex() {
|
|
|
+ uni.switchTab({
|
|
|
+ url: `/pages/user/index`
|
|
|
+ })
|
|
|
+ },
|
|
|
+ }
|
|
|
+ }
|
|
|
+</script>
|
|
|
+<style lang="scss" scoped>
|
|
|
+ .wrap {
|
|
|
+ min-height: calc(100vh - 64px - var(--status-bar-height));
|
|
|
+ background-color: #FFFFFF;
|
|
|
+ padding: 15px;
|
|
|
+
|
|
|
+ &-avatar {
|
|
|
+ justify-content: space-between;
|
|
|
+ border-bottom: 1px solid rgba(102, 102, 102, 0.12);
|
|
|
+ line-height: 50px;
|
|
|
+
|
|
|
+ .title {
|
|
|
+ color: #666;
|
|
|
+ font-size: 30rpx
|
|
|
+ }
|
|
|
+
|
|
|
+ .setName {
|
|
|
+ .input {
|
|
|
+ text-align: right;
|
|
|
+ width: 600rpx;
|
|
|
+ line-height: 100rpx;
|
|
|
+ height: 100rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .button {
|
|
|
+ border: none;
|
|
|
+ border-radius: 50%;
|
|
|
+ background-color: #fff;
|
|
|
+ padding: 0;
|
|
|
+ margin: 0;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ &-avatar:first-child {
|
|
|
+ margin-bottom: 10px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .tip {
|
|
|
+ margin: 5px 0;
|
|
|
+ font-size: 24rpx;
|
|
|
+ color: #999;
|
|
|
+ }
|
|
|
+
|
|
|
+ .btn {
|
|
|
+ ::v-deep .u-button {
|
|
|
+ margin-top: 80rpx;
|
|
|
+ border: none;
|
|
|
+ color: #fff;
|
|
|
+ background: $uni-text-color;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+</style>
|
