代码提交
This commit is contained in:
黄少君
@ -1,39 +1,50 @@
|
||||
<template>
|
||||
<layout>
|
||||
<uv-navbar
|
||||
:fixed="false"
|
||||
title="账号设置"
|
||||
left-arrow
|
||||
@leftClick="$onClickLeft"
|
||||
:fixed="false"
|
||||
title="账号设置"
|
||||
left-arrow
|
||||
@leftClick="goBack"
|
||||
/>
|
||||
<view v-if="user">
|
||||
<view class="y-list">
|
||||
<uv-list border>
|
||||
<uv-list-item
|
||||
border
|
||||
clickable
|
||||
show-arrow
|
||||
@click=""
|
||||
>
|
||||
<view class="y-list-content avatar">
|
||||
<view class="y-list-label">头像</view>
|
||||
<view class="y-list-avatar">
|
||||
<image
|
||||
:src="store.user.avatar"
|
||||
class="img"
|
||||
/>
|
||||
</view>
|
||||
</view>
|
||||
</uv-list-item>
|
||||
</uv-list>
|
||||
<uv-upload
|
||||
:useBeforeRead="true"
|
||||
@afterRead="handleUploadAvatar"
|
||||
>
|
||||
<view class="upload-warp">
|
||||
<uv-list border>
|
||||
<uv-list-item
|
||||
border
|
||||
show-arrow
|
||||
>
|
||||
<view class="y-list-content avatar flex flex-jc__sb">
|
||||
<view class="y-list-label">头像</view>
|
||||
<view class="y-list-avatar">
|
||||
<uv-image
|
||||
class="img"
|
||||
:src="store.user.avatar"
|
||||
width="90rpx"
|
||||
height="90rpx"
|
||||
shape="circle"
|
||||
>
|
||||
<template v-slot:error>
|
||||
<uv-icon name="photo"></uv-icon>
|
||||
</template>
|
||||
</uv-image>
|
||||
</view>
|
||||
</view>
|
||||
</uv-list-item>
|
||||
</uv-list>
|
||||
</view>
|
||||
</uv-upload>
|
||||
</view>
|
||||
<view class="y-list">
|
||||
<uv-list border>
|
||||
<uv-list-item
|
||||
border
|
||||
clickable
|
||||
show-arrow
|
||||
@click=""
|
||||
border
|
||||
clickable
|
||||
@click=""
|
||||
>
|
||||
<view class="y-list-content">
|
||||
<view class="y-list-label">ID</view>
|
||||
@ -43,23 +54,29 @@
|
||||
</view>
|
||||
</uv-list-item>
|
||||
<uv-list-item
|
||||
border
|
||||
clickable
|
||||
show-arrow
|
||||
@click=""
|
||||
border
|
||||
clickable
|
||||
show-arrow
|
||||
@click=""
|
||||
>
|
||||
<view class="y-list-content">
|
||||
<view class="y-list-label">昵称</view>
|
||||
<view class="y-list-select-placeholder">
|
||||
{{ store.user.nickname }}
|
||||
<uv-input
|
||||
placeholder="请输入内容"
|
||||
border="none"
|
||||
v-model="store.user.nickname"
|
||||
@blur="nicknameChange"
|
||||
inputAlign="right"
|
||||
></uv-input>
|
||||
</view>
|
||||
</view>
|
||||
</uv-list-item>
|
||||
<!-- <uv-list-item
|
||||
border
|
||||
clickable
|
||||
show-arrow
|
||||
@click=""
|
||||
<uv-list-item
|
||||
border
|
||||
clickable
|
||||
show-arrow
|
||||
@click=""
|
||||
>
|
||||
<view class="y-list-content">
|
||||
<view class="y-list-label">性别</view>
|
||||
@ -67,12 +84,12 @@
|
||||
{{ store.user.nickname }}
|
||||
</view>
|
||||
</view>
|
||||
</uv-list-item> -->
|
||||
</uv-list-item>
|
||||
<uv-list-item
|
||||
border
|
||||
clickable
|
||||
show-arrow
|
||||
@click=""
|
||||
border
|
||||
clickable
|
||||
show-arrow
|
||||
@click="openBirthdayPicker"
|
||||
>
|
||||
<view class="y-list-content">
|
||||
<view class="y-list-label">出生日期</view>
|
||||
@ -87,15 +104,16 @@
|
||||
<view class="y-list">
|
||||
<uv-list border>
|
||||
<uv-list-item
|
||||
border
|
||||
clickable
|
||||
show-arrow
|
||||
@click=""
|
||||
border
|
||||
clickable
|
||||
show-arrow
|
||||
@click=""
|
||||
>
|
||||
<view class="y-list-content">
|
||||
<view class="y-list-label">手机号</view>
|
||||
<view class="y-list-select-placeholder">
|
||||
{{ store.user.mobile }}
|
||||
<!-- <uv-input placeholder="请输入内容" border="none" v-model="store.user.mobile" @blur="mobileChange" inputAlign="right"></uv-input>-->
|
||||
</view>
|
||||
</view>
|
||||
</uv-list-item>
|
||||
@ -104,75 +122,99 @@
|
||||
</view>
|
||||
<view class="form-buttons">
|
||||
<uv-button
|
||||
round
|
||||
block
|
||||
type="primary"
|
||||
@tap="handleLogout"
|
||||
round
|
||||
block
|
||||
type="primary"
|
||||
@tap="handleLogout"
|
||||
>
|
||||
退出登录
|
||||
</uv-button>
|
||||
</view>
|
||||
<uv-datetime-picker
|
||||
ref="datetimePickerRef"
|
||||
mode="date"
|
||||
minDate="1900"
|
||||
@confirm="datetimeConfirm"
|
||||
>
|
||||
</uv-datetime-picker>
|
||||
</layout>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
|
||||
import { ref, watch } from 'vue'
|
||||
import { orderInfo, applyForAfterSales } from '@/api/order'
|
||||
import { navigateTo, back } from '@/utils/router'
|
||||
import { ref } from 'vue'
|
||||
import { onLoad } from '@dcloudio/uni-app'
|
||||
import { storeToRefs } from 'pinia'
|
||||
import { objectURLToBlob } from '@/utils'
|
||||
|
||||
import { useMainStore } from '@/store/store'
|
||||
import { updateAvatar, updateNickname } from '@/api/user'
|
||||
import { useGlobalProperties } from "@/hooks";
|
||||
import { useRouter } from "@/hooks/useRouter";
|
||||
|
||||
const store = useMainStore()
|
||||
|
||||
const { user, } = storeToRefs(store)
|
||||
console.log("--> % user:\n", user)
|
||||
|
||||
|
||||
// const user = ref(store.user)
|
||||
console.log("--> % user:\n", store)
|
||||
console.log("--> % user:\n", store.value)
|
||||
const {user} = storeToRefs(store)
|
||||
const datetimePickerRef = ref(null)
|
||||
const {$timeFormat} = useGlobalProperties()
|
||||
|
||||
const {goBack} = useRouter()
|
||||
|
||||
const handleLogout = () => {
|
||||
store.logout()
|
||||
}
|
||||
|
||||
const onClickLeft = () => {
|
||||
back()
|
||||
}
|
||||
|
||||
onLoad((option) => {
|
||||
store.getUserInfo()
|
||||
})
|
||||
|
||||
const handleUploadAvatar = async (event) => {
|
||||
const imgObj = await objectURLToBlob(event.file.url)
|
||||
let file = new File([imgObj], '', {
|
||||
type: imgObj.type
|
||||
})
|
||||
let data = new FormData()
|
||||
data.append('avatarFile', file)
|
||||
uni.showLoading({
|
||||
title: '上传中'
|
||||
});
|
||||
updateAvatar(data).then(() => {
|
||||
uni.hideLoading()
|
||||
store.getUserInfo()
|
||||
})
|
||||
}
|
||||
|
||||
// 昵称改变
|
||||
const nicknameChange = () => {
|
||||
if (!store.user.nickname) return
|
||||
uni.showLoading({
|
||||
title: '更新中'
|
||||
});
|
||||
updateNickname({
|
||||
nickname: store.user.nickname,
|
||||
birthday: store.user.birthday
|
||||
}).then(() => {
|
||||
uni.hideLoading()
|
||||
store.getUserInfo()
|
||||
})
|
||||
}
|
||||
|
||||
// 打开生日窗口
|
||||
const openBirthdayPicker = () => {
|
||||
datetimePickerRef.value.open();
|
||||
}
|
||||
|
||||
//
|
||||
const datetimeConfirm = (e) => {
|
||||
store.user.birthday = $timeFormat(e.value, 'yyyy-mm-dd')
|
||||
nicknameChange()
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
<style lang="less">
|
||||
.shopping-checkbox {}
|
||||
|
||||
.shopping-action {
|
||||
padding-left: 34rpx;
|
||||
flex: 1;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
|
||||
&-checkbox {
|
||||
flex: 1
|
||||
}
|
||||
|
||||
&-total {
|
||||
line-height: 48rpx;
|
||||
font-size: 34rpx;
|
||||
color: #333333;
|
||||
margin-right: 10rpx;
|
||||
}
|
||||
|
||||
&-btn {
|
||||
width: 224rpx;
|
||||
}
|
||||
<style lang="scss">
|
||||
.upload-warp {
|
||||
width: 750rpx;
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user