123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319 |
- <route lang="json">
- { "style": { "navigationBarTitleText": "个人设置" } }
- </route>
- <script setup lang="ts">
- import SectionHeading from '@/components/section-heading.vue'
- import { useUserStore } from '../../../store'
- import { storeToRefs } from 'pinia'
- import {
- getUserAuthInfo,
- updateMemberUserInfo,
- getUserBasicInfo,
- updateUserAuthInfo,
- } from '../../../core/libs/requests'
- import { NetImages } from '../../../core/libs/net-images'
- import FormMessageBox from '@/components/form-message-box.vue'
- import { useMessage } from 'wot-design-uni'
- import { requestToast } from '../../../core/utils/common'
- import { DataFormSchema } from '../../../components/data-form'
- import dayjs from 'dayjs'
- const userStore = useUserStore()
- const { userInfo, isDesigner } = storeToRefs(userStore)
- const { setUserInfo } = userStore
- const { confirm } = useMessage('nickname')
- const formData = ref<any>({})
- const schema = ref<DataFormSchema>()
- const birthday = ref(dayjs().toDate().getTime())
- const birthdayShow = ref(false)
- const { data: userAuthInfo, run: setUserAuthInfo } = useRequest(() => getUserAuthInfo(), {})
- const { data: userBasicInfo, run: setUserBasicInfo } = useRequest(
- () => getUserBasicInfo({ userId: userInfo.value.userId.toString() }),
- {},
- )
- const handleChooseAvatar = async ({ detail: { avatarUrl } }) => {
- const { data } = await uni.uploadFile({
- url: '/app-api/infra/file/upload',
- filePath: avatarUrl,
- name: 'file',
- })
- const { data: url } = JSON.parse(data)
- console.log(url)
- const { code, msg } = await updateMemberUserInfo({ avatar: url })
- if (code === 0) {
- uni.showToast({
- title: '修改成功',
- icon: 'none',
- })
- setUserInfo({
- ...userInfo.value,
- avatar: url,
- })
- return
- }
- uni.showToast({
- title: msg,
- icon: 'none',
- mask: true,
- })
- }
- const handleLogout = () => {
- userStore.clearUserInfo()
- uni.reLaunch({
- url: '/pages/home/index',
- })
- }
- const handleSetNickname = async () => {
- if (isDesigner.value) {
- return false
- }
- formData.value = {
- nickname: userInfo.value.nickname,
- }
- schema.value = { nickname: { type: 'TextField', label: '姓名', props: { type: 'nickname' } } }
- confirm({
- title: '修改姓名',
- beforeConfirm: async ({ resolve }) => {
- const { code } = await requestToast(() => updateMemberUserInfo(formData.value), {
- success: true,
- successTitle: '修改成功',
- })
- if (code === 0) {
- setUserInfo({
- ...userInfo.value,
- nickname: formData.value?.nickname,
- })
- resolve(true)
- formData.value = {}
- }
- resolve(false)
- },
- })
- }
- const handleSetSex = async () => {
- formData.value = {
- sex: userInfo.value.sex.toString(),
- }
- schema.value = {
- sex: {
- type: 'Radio',
- label: '性别',
- hiddenLabel: true,
- props: {
- columns: [
- { label: '未知', value: '0' },
- { label: '男', value: '1' },
- { label: '女', value: '2' },
- ],
- },
- },
- }
- confirm({
- title: '修改性别',
- beforeConfirm: async ({ resolve }) => {
- const res = await Promise.all([updateMemberUserInfo(formData.value)])
- console.log(res)
- setUserInfo({
- ...userInfo.value,
- sex: formData.value.sex,
- })
- resolve(true)
- formData.value = {}
- uni.showToast({
- title: '修改成功',
- icon: 'none',
- mask: true,
- })
- },
- })
- }
- const handleSetEmployer = async () => {
- formData.value = {
- employer: userAuthInfo.value.employer,
- }
- schema.value = {
- employer: {
- type: 'TextField',
- label: '公司',
- hiddenLabel: true,
- props: {},
- },
- }
- confirm({
- title: '修改公司',
- beforeConfirm: async ({ resolve }) => {
- const { code } = await requestToast(
- () =>
- updateUserAuthInfo({
- ...userAuthInfo.value,
- employer: formData.value.employer,
- }),
- {
- success: true,
- successTitle: '修改成功',
- },
- )
- if (code === 0) {
- resolve(true)
- formData.value = {}
- setUserAuthInfo()
- }
- resolve(false)
- },
- })
- }
- const handeleSetBirthday = async () => {
- const { code, data } = await requestToast(
- () =>
- updateMemberUserInfo({
- birthday: dayjs(birthday.value).toDate().getTime(),
- }),
- {
- success: true,
- successTitle: '修改成功',
- },
- )
- if (code === 0) {
- // await setUserBasicInfo()
- setUserInfo({
- ...userInfo.value,
- birthday: dayjs(birthday.value).toDate().getTime(),
- })
- birthdayShow.value = false
- }
- }
- onMounted(async () => {
- await setUserAuthInfo()
- if (isDesigner.value) {
- await Promise.all([setUserBasicInfo()])
- console.log(userBasicInfo.value)
- }
- birthday.value = userInfo.value.birthday || dayjs().toDate().getTime()
- })
- </script>
- <template>
- <div class="flex-grow bg-white flex flex-col p-4.5 gap-8">
- <div class="flex flex-col items-center">
- <button
- class="p-0 leading-0 bg-transparent after:b-none"
- open-type="chooseAvatar"
- @chooseavatar="handleChooseAvatar"
- >
- <wd-img
- round
- width="97"
- height="97"
- :src="(userInfo.avatar ?? '') === '' ? NetImages.DefaultAvatar : userInfo.avatar"
- custom-class="border border-white border-solid"
- ></wd-img>
- </button>
- <div
- class="mt-2 text-center text-black/40 text-xs font-normal font-['PingFang_SC'] leading-none"
- >
- 更换头像
- </div>
- </div>
- <button
- class="w-full p-0 leading-0 bg-transparent hover:bg-transparent after:b-none"
- @click="handleSetNickname"
- >
- <SectionHeading
- title="姓名"
- size="sm"
- :end-text="userInfo.nickname"
- :end-arrow="!isDesigner"
- ></SectionHeading>
- </button>
- <template v-if="isDesigner">
- <div @click="handleSetSex">
- <SectionHeading
- title="性别"
- size="sm"
- :end-text="{ '0': '未知', '1': '男', '2': '女' }[String(userInfo.sex)] ?? '设置'"
- end-arrow
- ></SectionHeading>
- </div>
- <div class="relative" @click="birthdayShow = true">
- <SectionHeading
- title="生日"
- size="sm"
- :end-text="
- (userInfo.birthday ?? '') === ''
- ? '设置'
- : dayjs(userInfo.birthday).format('YYYY-MM-DD')
- "
- end-arrow
- ></SectionHeading>
- </div>
- <!-- <div class="absolute left-0 top-0 w-full h-full opacity-" style="visibility: hidden">
- <wd-datetime-picker type="date" v-model="birthday" custom-class=""></wd-datetime-picker>
- </div> -->
- </template>
- <SectionHeading
- title="手机号"
- size="sm"
- :end-text="userInfo?.mobile"
- :end-arrow="true"
- path="/pages-sub/mine/setting/mobile/index"
- ></SectionHeading>
- <template v-if="isDesigner">
- <div @click="handleSetEmployer">
- <SectionHeading
- title="公司"
- size="sm"
- :end-text="userAuthInfo?.employer"
- end-arrow
- ></SectionHeading>
- </div>
- <SectionHeading title="推荐人" size="sm" :end-text="userAuthInfo?.referrer"></SectionHeading>
- <SectionHeading
- title="经纪人"
- size="sm"
- :end-text="userBasicInfo?.brokerName"
- ></SectionHeading>
- </template>
- <div class="flex-1"></div>
- <div><wd-button block :round="false" @click="handleLogout">退出登录</wd-button></div>
- <FormMessageBox v-model="formData" selector="nickname" :schema="schema"></FormMessageBox>
- <wd-action-sheet v-model="birthdayShow" title="设置生日">
- <!-- <view style="padding: 15px 15px 150px 15px"> -->
- <wd-datetime-picker-view
- type="date"
- v-model="birthday"
- :minDate="dayjs().subtract(80, 'y').toDate().getTime()"
- :maxDate="dayjs().toDate().getTime()"
- label="年月日"
- />
- <!-- </view> -->
- <div class="px-4 pb-4">
- <wd-button block :round="false" @click="handeleSetBirthday">确定</wd-button>
- </div>
- </wd-action-sheet>
- </div>
- </template>
- <style lang="scss">
- .aaaa {
- &:after {
- position: absolute;
- top: 0;
- right: 0;
- bottom: 0;
- left: 0;
- content: '';
- background: #03f463;
- border-radius: 10px;
- transform: skewX(15deg);
- }
- &::before {
- position: absolute;
- top: 0;
- right: -13px;
- width: 100px;
- height: 64px;
- content: '';
- background: orange;
- border-radius: 10px;
- }
- }
- </style>
|