122 lines
3.0 KiB
Vue
Executable File
122 lines
3.0 KiB
Vue
Executable File
<template>
|
|
<view class="px-40rpx">
|
|
<view
|
|
class="py-20rpx flex justify-between items-center border-b-#E5E5E5 border-b-1px"
|
|
>
|
|
<view>头像</view>
|
|
<view class="overflow-hidden rounded-full w-100rpx h-100rpx">
|
|
<choose-avatar
|
|
:defaultValue="userInfo.avatar"
|
|
@changeAvatar="(url) => (userInfo.avatar = url)"
|
|
/>
|
|
</view>
|
|
</view>
|
|
<view
|
|
class="relative h-130rpx flex justify-between items-center border-b-#E5E5E5 border-b-1px"
|
|
>
|
|
<view
|
|
>昵称 <text class="text-#999 text-24rpx">建议改为真实姓名</text></view
|
|
>
|
|
<input
|
|
v-model="userInfo.nickName"
|
|
@change="handleNickName"
|
|
type="nickname"
|
|
placeholder=""
|
|
inputAlign="right"
|
|
maxlength="20"
|
|
border="0"
|
|
/>
|
|
</view>
|
|
<view
|
|
class="relative h-130rpx flex justify-between items-center border-b-#E5E5E5 border-b-1px"
|
|
>
|
|
<view>手机号</view>
|
|
<button
|
|
hover-class="none"
|
|
open-type="getPhoneNumber"
|
|
@getphonenumber="getPhoneNumber"
|
|
class="absolute right-0 z-10 overflow-hidden !hover:bg-transparent !active:bg-transparent w-80% h-full rounded-md"
|
|
></button>
|
|
<u-input
|
|
v-model="userInfo.phone"
|
|
placeholder=""
|
|
type="number"
|
|
inputAlign="right"
|
|
maxlength="20"
|
|
border="0"
|
|
read-only
|
|
></u-input>
|
|
</view>
|
|
<view
|
|
@click="show = true"
|
|
class="h-130rpx flex justify-between items-center border-b-#E5E5E5 border-b-1px"
|
|
>
|
|
<view>性别</view>
|
|
<view>{{ columns[0][userInfo.gender] }}</view>
|
|
</view>
|
|
<u-picker
|
|
:show="show"
|
|
:columns="columns"
|
|
confirmColor="#FF8CA6"
|
|
@confirm="hadleConfirm"
|
|
@cancel="show = false"
|
|
@close="show = false"
|
|
closeOnClickOverlay
|
|
></u-picker>
|
|
<view
|
|
class="fixed bottom-8 left-0 right-0 text-white pt-12rpx border-t-1px border-solid border-#E5E5E5"
|
|
><view
|
|
@click="$u.throttle(handleSave, 800)"
|
|
class="bg-#FF8CA6 rounded-24rpx w-660rpx h-80rpx text-center leading-80rpx hover:shadow-md mx-auto"
|
|
>修改信息</view
|
|
></view
|
|
>
|
|
</view>
|
|
</template>
|
|
|
|
<script setup>
|
|
const instance = getCurrentInstance()
|
|
const { $api, $store, $Router, $u,$toast } = instance.proxy
|
|
const show = ref(false)
|
|
const columns = ref([['男', '女']])
|
|
const userInfo = ref(...$store.user.userInfo)
|
|
const isEdit = ref($Router.query?.edit || false)
|
|
|
|
const hadleConfirm = ({ indexs: [index] }) => {
|
|
userInfo.value.gender = index
|
|
show.value = false
|
|
}
|
|
const getPhoneNumber = async (e) => {
|
|
const { detail } = e
|
|
if (detail.errMsg === 'getPhoneNumber:ok') {
|
|
const res = await $api.getPhone({ code: detail.code })
|
|
if (res.success) {
|
|
userInfo.value.phone = res.msg
|
|
}
|
|
}
|
|
}
|
|
const handleNickName = (e) => {
|
|
userInfo.value.nickName = e.detail.value
|
|
}
|
|
|
|
const handleSave = async () => {
|
|
const res = await $api.userSave(userInfo.value)
|
|
if (res.success) {
|
|
$store.user.setUserInfo(userInfo.value)
|
|
$toast('保存成功').then(()=>{
|
|
$Router.back()
|
|
})
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
page {
|
|
background-color: #fff;
|
|
}
|
|
input{
|
|
text-align: right;
|
|
padding-right: 6rpx;
|
|
}
|
|
</style>
|