|
|
@@ -1,12 +1,12 @@
|
|
|
<template>
|
|
|
<fs-form ref="formRef" :model="userInfo">
|
|
|
- <fs-cell title="头像" justify="right" border tighten>
|
|
|
- <template #value>
|
|
|
- <fs-avatar bgColor="#EBEFF5" :src="userInfo.photo" @click="handleUpload">
|
|
|
- <fs-icon type="icon-photo"></fs-icon>
|
|
|
+ <view class="text-center">
|
|
|
+ <button class="avatar-wrapper" open-type="chooseAvatar" @chooseavatar="handleUpload">
|
|
|
+ <fs-avatar size="140rpx" bgColor="#EBEFF5" :src="userInfo.photo">
|
|
|
+ <fs-icon type="icon-photo" size="50rpx"></fs-icon>
|
|
|
</fs-avatar>
|
|
|
- </template>
|
|
|
- </fs-cell>
|
|
|
+ </button>
|
|
|
+ </view>
|
|
|
<fs-form-item required label="姓名">
|
|
|
<fs-field placeholder="请输入姓名" v-model="userInfo.name"></fs-field>
|
|
|
</fs-form-item>
|
|
|
@@ -46,18 +46,20 @@ const formRef = ref(null)
|
|
|
const form = useForm(rules, 'formRef')
|
|
|
|
|
|
const { proxy } = getCurrentInstance()
|
|
|
-const handleUpload = () => {
|
|
|
- utils
|
|
|
- .chooseAndUploadImage(
|
|
|
- {},
|
|
|
- {
|
|
|
- url: proxy.$uploadUrl,
|
|
|
- editable: true
|
|
|
- }
|
|
|
- )
|
|
|
- .then(res => {
|
|
|
- userInfo.value.photo = res
|
|
|
- })
|
|
|
+const handleUpload = e => {
|
|
|
+ wx.editImage({
|
|
|
+ src: e.detail.avatarUrl,
|
|
|
+ success: res => {
|
|
|
+ utils
|
|
|
+ .uploadFile({
|
|
|
+ filePath: res.tempFilePath,
|
|
|
+ url: proxy.$uploadUrl
|
|
|
+ })
|
|
|
+ .then(res => {
|
|
|
+ userInfo.value.photo = res
|
|
|
+ })
|
|
|
+ }
|
|
|
+ })
|
|
|
}
|
|
|
|
|
|
const handleSave = () => {
|
|
|
@@ -70,4 +72,18 @@ const handleSave = () => {
|
|
|
}
|
|
|
</script>
|
|
|
|
|
|
-<style lang="scss" scoped></style>
|
|
|
+<style lang="scss" scoped>
|
|
|
+.avatar-wrapper {
|
|
|
+ margin: 30rpx;
|
|
|
+ width: 140rpx;
|
|
|
+ height: 140rpx;
|
|
|
+ border-radius: 50%;
|
|
|
+ border: none;
|
|
|
+ padding: 0;
|
|
|
+ display: inline-block;
|
|
|
+ background-color: transparent;
|
|
|
+ &::after {
|
|
|
+ border: none;
|
|
|
+ }
|
|
|
+}
|
|
|
+</style>
|
tongshangming