赞
踩
- <template>
- <view class="containar">
- <view class="avatarUrl">
- <button type="balanced" open-type="chooseAvatar" @chooseavatar="onChooseavatar">
- <image :src="avatarUrl" class="refreshIcon"></image>
- </button>
- </view>
- <view class="userName">
- <text>昵称:</text>
- <input type="nickName" class="weui-input" :value="userName" @blur="bindblur" placeholder="请输入昵称"
- @input="bindinput" />
- </view>
- <view class="userPhone">
- <view>手机</view>
- <view class="weui-input">{{phone}}</view>
- <view class="changebtn" @click="ChangePhone()">更换</view>
- </view>
- <view class="d-center">
- <view class="bcbtn" @click="onSubmit">保存</view>
- </view>
- </view>
- </template>
- <script>
- import {
- aUser,//修改
- getUser //回显
- } from '../../api/index.js'
- const uploadPath = getApp().globalData.api_url + '/system/file/picture'
- export default {
- data() {
- return {
- avatarUrl: '',
- userName: '',
- phone: ''
- };
- },
- onShow() {
- // 下载图片,注意下载图片地址必须得是图片存放地址,downloadFile合法域名
- this.loadUserInfoData()
- },
- methods: {
- // 跳转到修改手机号码页面
- ChangePhone() {
- uni.navigateTo({
- url: '/subpackage/user/edit-phone'
- })
- },
- // 将网络照片进行下载,然后进行上传(小程序不支持直接进行修改网络资源文件)
- loadUserInfoData() {
- getUser().then(res => {
- this.userName = res.data.nickname
- this.avatarUrl = res.data.avatar
- this.phone = res.data.phone
- uni.downloadFile({
- url: this.avatarUrl, //仅为示例,并非真实的资源
- success: (res) => {
- if (res.statusCode === 200) {
- this.avatarUrl = res.tempFilePath
- }
- }
- });
- })
- },
- bindblur(e) {
- this.userName = e.detail.value; // 获取微信昵称
- },
- bindinput(e) {
- this.userName = e.detail.value; // 获取微信昵称
- },
- // 上传头像
- onChooseavatar(e) {
- let self = this;
- let {
- avatarUrl
- } = e.detail;
- this.avatarUrl = avatarUrl
- },
- // 提交信息
- onSubmit() {
- var that = this
- uni.login({
- "provider": "weixin",
- // "onlyAuthorize": true, // 微信登录仅请求授权认证
- success: function(event) {
- const {
- code
- } = event
- const name = that.userName
- // 判断头像以及昵称不为空 再上传
- if (that.userName && that.avatarUrl) {
- let a = uni.uploadFile({
- url: uploadPath, // 仅为示例,非真实的接口地址
- filePath: that.avatarUrl,
- name: 'file',
- header: {
- Authorization: 'Bearer ' + that.$store.getters.accessToken,
- 'tenant-id': 1
- },
- success: (res) => {
- let userInfo = {
- avatarFileId: JSON.parse(res.data).data.id,
- nickname: that.userName
- }
- aUser(userInfo).then(res => {
- uni.$u.toast('已保存')
- setTimeout(() => {
- uni.switchTab({
- url: '/pages/user/user'
- })
- }, 300)
- })
- }
- });
- } else {
- uni.showToast({
- icon: 'none',
- title: '请上传头像并填写昵称'
- })
- return false;
- }
- },
- fail: function(err) {
- console.log('失败')
- }
- })
- }
- }
- }
- </script>
- <style lang="scss" scoped>
- page {
- background: #fff;
-
- }
-
- .containar {
- height: 100vh;
- background: #fff;
-
- .avatarUrl {
- padding: 80rpx 0 40rpx;
-
- button {
- background: #fff;
- line-height: 80rpx;
- height: auto;
- border: none !important;
- width: auto;
- // padding: 20rpx 30rpx;
- margin: 0;
- display: flex;
- border: none;
- justify-content: center;
- align-items: center;
-
- &::after {
- border: none;
- }
-
- .refreshIcon {
- width: 160rpx;
- height: 160rpx;
- border-radius: 50%;
- background-color: #ccc;
- }
-
- .jt {
- width: 14rpx;
- height: 28rpx;
- }
- }
- }
-
- .userName {
- background: #fff;
- padding: 20rpx 30rpx 40rpx;
- display: flex;
- align-items: center;
- justify-content: center;
-
- .weui-input {
- margin-left: 60rpx;
- padding-bottom: 10rpx;
- border-bottom: 1px solid #eee;
- }
- }
-
- .bcbtn {
- width: 500rpx;
- height: 80rpx;
- color: #fff;
- margin-top: 200rpx;
- text-align: center;
- line-height: 80rpx;
- border-radius: 40rpx;
- background: var(--themeColor);
- }
-
- .userPhone {
- background: #fff;
- padding: 0 120rpx 40rpx;
- display: flex;
- align-items: center;
-
- .changebtn {
- font-size: 14px;
- color: var(--themeColor);
- margin-left: 70rpx;
- }
-
-
- .weui-input {
- padding-left: 90rpx;
- }
- }
-
- .btn {
- width: 300rpx;
- display: flex;
- text-align: center;
- justify-content: center;
- }
- }
- </style>

赞
踩
Copyright © 2003-2013 www.wpsshop.cn 版权所有,并保留所有权利。