<template>
|
<view class="">
|
<view class="content chuany-flex chuany-align-end chuany-justify-center">
|
<button class="avatar-wrapper" open-type="chooseAvatar" @chooseavatar="onChooseAvatar">
|
<!-- <image class="avatar" src="{{avatarUrl}}"></image> -->
|
<up-avatar :src="userInfo.avatar" shape="circle" size='80'></up-avatar>
|
</button>
|
|
</view>
|
<up-cell title="昵称" :border="false">
|
<template #value>
|
<up-form labelPosition="left" :model="userInfo" ref="formRef" labelWidth='90' v-if="showEdit">
|
<up-form-item prop="enterpriseInfo.businessLicense" ref="item1">
|
<up-input v-model="userInfo.nickname" type="nickname" @blur="blurNickName" border="none"
|
placeholder="请输入昵称" :readonly='!showEdit'>
|
<template #suffix>
|
<up-button @tap="saveUserNikename" text="保存" type="success" form-type="submit"
|
size="mini"></up-button>
|
</template>
|
<!-- <template #suffix v-else>
|
<up-icon name="edit-pen" @click='isShow'></up-icon>
|
</template> -->
|
</up-input>
|
|
</up-form-item>
|
</up-form>
|
<text v-else>{{userInfo.nickname}}</text>
|
</template>
|
<template #right-icon v-if='!showEdit'>
|
<up-icon name="edit-pen" @click='isShow'></up-icon>
|
</template>
|
</up-cell>
|
<up-cell title="手机号" :value="userInfo.phone" :border="false"></up-cell>
|
<!-- <up-cell @click="goApply" title="申请接单" isLink :border="false"></up-cell> -->
|
<!-- <view class="tabbtns">
|
<up-button color='#fece01' class="text-69" text="保存" @click=''></up-button>
|
</view> -->
|
</view>
|
</template>
|
|
<script setup>
|
import {
|
apiBaseUrl
|
} from '@/common/setting/constVarsHelper.js';
|
import {
|
onLoad,
|
onShow
|
} from "@dcloudio/uni-app";
|
import {
|
ref,
|
reactive,
|
getCurrentInstance,
|
toRefs,
|
computed
|
} from 'vue';
|
const {
|
$upload,
|
$api,
|
$db,
|
$util
|
} = getCurrentInstance().appContext.config.globalProperties
|
import {
|
useStore
|
} from 'vuex'
|
const store = useStore()
|
onLoad(() => {
|
// getUser()
|
})
|
onShow(() => {
|
// getUser()
|
})
|
// let userInfo = reactive({
|
// nickname: '',
|
// phone: '',
|
// userWorker: false
|
// })
|
let userInfo = computed(() => store.getters.userInfo || {})
|
let showEdit = ref(false)
|
// let src = "http://pic2.sc.chinaz.com/Files/pic/pic9/202002/hpic2119_s.jpg"
|
const goApply = () => {
|
uni.navigateTo({
|
url: '/pages/mine/apply'
|
});
|
}
|
const isShow = () => {
|
showEdit.value = true
|
}
|
const onChooseAvatar = (e) => {
|
const {
|
avatarUrl
|
} = e.detail
|
uploadFile(avatarUrl)
|
}
|
const uploadFile = (val) => {
|
uni.showLoading();
|
let userToken = $db.get("userToken");
|
uni.uploadFile({
|
url: apiBaseUrl + '/api/UpFile/UpdateFile',
|
filePath: val,
|
fileType: 'image',
|
name: 'file',
|
header: {
|
'Accept': 'application/json',
|
'Content-Type': 'multipart/form-data',
|
'Authorization': 'Bearer ' + userToken
|
},
|
formData: {
|
'method': 'images.upload',
|
'upfile': val
|
},
|
success: (uploadFileRes) => {
|
|
let res = JSON.parse(uploadFileRes.data);
|
if (res.code == 1) {
|
let obj = {
|
Avatar: res.data
|
}
|
$api.saveUser(obj).then(red => {
|
if (red.code == 1) {
|
$util.showToast({
|
title: "头像保存成功！",
|
icon: "success"
|
})
|
store.dispatch('getUserInfo')
|
} else {
|
this.$util.showToast({
|
title: red.error
|
})
|
}
|
})
|
} else {
|
this.$util.showToast({
|
title: res.error
|
})
|
}
|
|
},
|
fail: (error) => {
|
console.log("交互失败");
|
console.log(error);
|
if (error && error.response) {
|
$upload.showError(error.response);
|
}
|
},
|
complete: () => {
|
uni.hideLoading();
|
}
|
});
|
}
|
const saveUserNikename = (val) => {
|
if(!userInfo.nickname){
|
$util.showToast({
|
title: "请输入昵称！",
|
icon: "success"
|
})
|
return
|
}
|
$api.saveUser({
|
Nickname: userInfo.nickname
|
}).then(res => {
|
if (res.code == 1) {
|
$util.showToast({
|
title: "昵称保存成功！",
|
icon: "success"
|
})
|
store.commit('setUserInfo',userInfo.value)
|
showEdit.value = false
|
}
|
})
|
}
|
const blurNickName = (val) => {
|
userInfo.nickname = val
|
}
|
</script>
|
|
<style>
|
.content {
|
height: 300rpx;
|
background: linear-gradient(to bottom, #fbec99, #ffffff);
|
}
|
|
.avatar-wrapper {
|
border-radius: 50%;
|
width: 80px !important;
|
height: 80px;
|
margin: 0;
|
padding: 0;
|
background-color: transparent;
|
}
|
|
.fui-list__item {
|
flex: 1;
|
width: 100%;
|
display: flex;
|
align-items: center;
|
justify-content: space-between;
|
|
}
|
|
.fui-text__explain {
|
font-size: 28rpx;
|
color: #7F7F7F;
|
flex-shrink: 0;
|
}
|
|
.u-form-item__body {
|
padding: 0 !important;
|
}
|
</style>
|
