|
|
@@ -1,40 +1,82 @@
|
|
|
<template>
|
|
|
<view class="content">
|
|
|
- <view class="row b-b">
|
|
|
+ <view class="row1">
|
|
|
+ <text class="tit">头像</text>
|
|
|
+ <view class="background-img" @click="upload"><image class="background-img" v-model="avatar" :src="avatar" mode="aspectFill"></image></view>
|
|
|
+ </view>
|
|
|
+ <view class="row">
|
|
|
<text class="tit">昵称</text>
|
|
|
- <input class="input" type="text" v-model="name" placeholder="修改昵称" placeholder-class="placeholder" />
|
|
|
+ <input class="input" type="button" v-model="name" placeholder-class="placeholder" />
|
|
|
+ </view>
|
|
|
+ <view class="row">
|
|
|
+ <text class="tit">邀请码</text>
|
|
|
+ <input class="input" disabled type="text" v-model="uid" placeholder-class="placeholder" />
|
|
|
</view>
|
|
|
- <button class="add-btn" @click="confirm">提交</button>
|
|
|
+ <view class="row">
|
|
|
+ <text class="tit">账号</text>
|
|
|
+ <input class="input" disabled type="text" v-model="phone" placeholder-class="placeholder" />
|
|
|
+ </view>
|
|
|
+ <button class="add-btn" @click="confirm">修改</button>
|
|
|
+ <button class="loginout" @click="loginout">退出登录</button>
|
|
|
</view>
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
-import { mapState } from 'vuex';
|
|
|
-import { userEdit } from '@/api/set.js';
|
|
|
+import { mapState,mapMutations } from 'vuex';
|
|
|
+import { userEdit,upload,logout } from '@/api/set.js';
|
|
|
export default {
|
|
|
data() {
|
|
|
return {
|
|
|
- name: ''
|
|
|
+ name: '', // 昵称
|
|
|
+ uid: '',
|
|
|
+ phone:'',
|
|
|
+ avatar: '',
|
|
|
};
|
|
|
},
|
|
|
-
|
|
|
computed: {
|
|
|
- ...mapState('user', ['userInfo'])
|
|
|
+ ...mapState('user',['userInfo']),
|
|
|
+ startDate() {
|
|
|
+ console.log('start');
|
|
|
+ },
|
|
|
+ endDate() {
|
|
|
+ console.log('end');
|
|
|
+ }
|
|
|
},
|
|
|
onShow(option) {
|
|
|
+ // 获取生日日期
|
|
|
+ console.log(this.userInfo);
|
|
|
this.name = this.userInfo.nickname + '';
|
|
|
+ this.uid = this.userInfo.uid || '';
|
|
|
+ this.avatar = this.userInfo.avatar || '';
|
|
|
+ this.phone = this.userInfo.phone || '';
|
|
|
},
|
|
|
methods: {
|
|
|
+ ...mapMutations('user', ['logout']),
|
|
|
+ // 上传头像
|
|
|
+ upload() {
|
|
|
+ console.log("111111")
|
|
|
+ upload({
|
|
|
+ filename: ''
|
|
|
+ }).then(data => {
|
|
|
+ this.avatar = data[0].url;
|
|
|
+ console.log(this.avatar, 'tup')
|
|
|
+ setTimeout(() => {
|
|
|
+ uni.hideLoading()
|
|
|
+ }, 500)
|
|
|
+ });
|
|
|
+ },
|
|
|
switchChange(e) {
|
|
|
this.addressData.default = e.value;
|
|
|
},
|
|
|
confirm() {
|
|
|
- userEdit({ nickname: this.name, avatar: this.userInfo.avatar })
|
|
|
- .then(e => {
|
|
|
+ userEdit({
|
|
|
+ nickname: this.name,
|
|
|
+ avatar: this.avatar,
|
|
|
+ }).then(e => {
|
|
|
this.$api.msg('修改成功');
|
|
|
- setTimeout(()=> {
|
|
|
+ setTimeout(() => {
|
|
|
uni.switchTab({
|
|
|
- url:'/pages/user/user'
|
|
|
+ url: '/pages/user/user'
|
|
|
});
|
|
|
}, 1000);
|
|
|
console.log(e);
|
|
|
@@ -42,6 +84,19 @@ export default {
|
|
|
.catch(e => {
|
|
|
console.log(e);
|
|
|
});
|
|
|
+ },
|
|
|
+ loginout() {
|
|
|
+ let obj = this;
|
|
|
+ uni.showModal({
|
|
|
+ content: '确定要退出登录么',
|
|
|
+ success: e => {
|
|
|
+ if (e.confirm) {
|
|
|
+ logout({}).then()
|
|
|
+ uni.navigateBack();
|
|
|
+ obj.logout();
|
|
|
+ }
|
|
|
+ }
|
|
|
+ });
|
|
|
}
|
|
|
}
|
|
|
};
|
|
|
@@ -50,12 +105,35 @@ export default {
|
|
|
<style lang="scss">
|
|
|
page {
|
|
|
background: $page-color-base;
|
|
|
- padding-top: 16upx;
|
|
|
}
|
|
|
|
|
|
+.row1 {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: space-between;
|
|
|
+ position: relative;
|
|
|
+ padding: 0 30upx;
|
|
|
+ height: 110upx;
|
|
|
+ background: #fff;
|
|
|
+ margin-bottom: 20upx;
|
|
|
+ .tit {
|
|
|
+ flex-shrink: 0;
|
|
|
+ width: 120upx;
|
|
|
+ font-size: $font-lg;
|
|
|
+ color: $font-color-dark;
|
|
|
+ }
|
|
|
+
|
|
|
+ .background-img {
|
|
|
+ width: 80rpx;
|
|
|
+ height: 80rpx;
|
|
|
+ border-radius: 50%;
|
|
|
+ background: #f2f2f2;
|
|
|
+ }
|
|
|
+}
|
|
|
.row {
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
+ justify-content: space-between;
|
|
|
position: relative;
|
|
|
padding: 0 30upx;
|
|
|
height: 110upx;
|
|
|
@@ -64,13 +142,21 @@ page {
|
|
|
.tit {
|
|
|
flex-shrink: 0;
|
|
|
width: 120upx;
|
|
|
- font-size: 30upx;
|
|
|
+ font-size: $font-lg;
|
|
|
+ color: $font-color-dark;
|
|
|
+ }
|
|
|
+ .tit1 {
|
|
|
+ flex-shrink: 0;
|
|
|
+ width: 150upx;
|
|
|
+ font-size: $font-lg;
|
|
|
color: $font-color-dark;
|
|
|
+
|
|
|
}
|
|
|
.input {
|
|
|
+ text-align: right;
|
|
|
flex: 1;
|
|
|
- font-size: 30upx;
|
|
|
- color: $font-color-dark;
|
|
|
+ font-size: $font-base;
|
|
|
+ color: $color-gray;
|
|
|
}
|
|
|
.iconlocation {
|
|
|
font-size: 36upx;
|
|
|
@@ -81,13 +167,25 @@ page {
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
justify-content: center;
|
|
|
- width: 690upx;
|
|
|
+ width: 560upx;
|
|
|
height: 80upx;
|
|
|
margin: 60upx auto;
|
|
|
font-size: $font-lg;
|
|
|
color: #fff;
|
|
|
- background-color: $base-color;
|
|
|
- border-radius: 10upx;
|
|
|
- // box-shadow: 1px 2px 5px rgba(219, 63, 96, 0.4);
|
|
|
+ background: $base-color;
|
|
|
+ border-radius: 40upx;
|
|
|
+}
|
|
|
+.loginout {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ width: 560upx;
|
|
|
+ height: 80upx;
|
|
|
+ margin: 60upx auto;
|
|
|
+ font-size: $font-lg;
|
|
|
+ color: $base-color;
|
|
|
+ background: #FFFFFF;
|
|
|
+ border: 1px solid $base-color;
|
|
|
+ border-radius: 40upx;
|
|
|
}
|
|
|
</style>
|
