index.vue 8.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319
  1. <route lang="json">
  2. { "style": { "navigationBarTitleText": "个人设置" } }
  3. </route>
  4. <script setup lang="ts">
  5. import SectionHeading from '@/components/section-heading.vue'
  6. import { useUserStore } from '../../../store'
  7. import { storeToRefs } from 'pinia'
  8. import {
  9. getUserAuthInfo,
  10. updateMemberUserInfo,
  11. getUserBasicInfo,
  12. updateUserAuthInfo,
  13. } from '../../../core/libs/requests'
  14. import { NetImages } from '../../../core/libs/net-images'
  15. import FormMessageBox from '@/components/form-message-box.vue'
  16. import { useMessage } from 'wot-design-uni'
  17. import { requestToast } from '../../../core/utils/common'
  18. import { DataFormSchema } from '../../../components/data-form'
  19. import dayjs from 'dayjs'
  20. const userStore = useUserStore()
  21. const { userInfo, isDesigner } = storeToRefs(userStore)
  22. const { setUserInfo } = userStore
  23. const { confirm } = useMessage('nickname')
  24. const formData = ref<any>({})
  25. const schema = ref<DataFormSchema>()
  26. const birthday = ref(dayjs().toDate().getTime())
  27. const birthdayShow = ref(false)
  28. const { data: userAuthInfo, run: setUserAuthInfo } = useRequest(() => getUserAuthInfo(), {})
  29. const { data: userBasicInfo, run: setUserBasicInfo } = useRequest(
  30. () => getUserBasicInfo({ userId: userInfo.value.userId.toString() }),
  31. {},
  32. )
  33. const handleChooseAvatar = async ({ detail: { avatarUrl } }) => {
  34. const { data } = await uni.uploadFile({
  35. url: '/app-api/infra/file/upload',
  36. filePath: avatarUrl,
  37. name: 'file',
  38. })
  39. const { data: url } = JSON.parse(data)
  40. console.log(url)
  41. const { code, msg } = await updateMemberUserInfo({ avatar: url })
  42. if (code === 0) {
  43. uni.showToast({
  44. title: '修改成功',
  45. icon: 'none',
  46. })
  47. setUserInfo({
  48. ...userInfo.value,
  49. avatar: url,
  50. })
  51. return
  52. }
  53. uni.showToast({
  54. title: msg,
  55. icon: 'none',
  56. mask: true,
  57. })
  58. }
  59. const handleLogout = () => {
  60. userStore.clearUserInfo()
  61. uni.reLaunch({
  62. url: '/pages/home/index',
  63. })
  64. }
  65. const handleSetNickname = async () => {
  66. if (isDesigner.value) {
  67. return false
  68. }
  69. formData.value = {
  70. nickname: userInfo.value.nickname,
  71. }
  72. schema.value = { nickname: { type: 'TextField', label: '姓名', props: { type: 'nickname' } } }
  73. confirm({
  74. title: '修改姓名',
  75. beforeConfirm: async ({ resolve }) => {
  76. const { code } = await requestToast(() => updateMemberUserInfo(formData.value), {
  77. success: true,
  78. successTitle: '修改成功',
  79. })
  80. if (code === 0) {
  81. setUserInfo({
  82. ...userInfo.value,
  83. nickname: formData.value?.nickname,
  84. })
  85. resolve(true)
  86. formData.value = {}
  87. }
  88. resolve(false)
  89. },
  90. })
  91. }
  92. const handleSetSex = async () => {
  93. formData.value = {
  94. sex: userInfo.value.sex.toString(),
  95. }
  96. schema.value = {
  97. sex: {
  98. type: 'Radio',
  99. label: '性别',
  100. hiddenLabel: true,
  101. props: {
  102. columns: [
  103. { label: '未知', value: '0' },
  104. { label: '男', value: '1' },
  105. { label: '女', value: '2' },
  106. ],
  107. },
  108. },
  109. }
  110. confirm({
  111. title: '修改性别',
  112. beforeConfirm: async ({ resolve }) => {
  113. const res = await Promise.all([updateMemberUserInfo(formData.value)])
  114. console.log(res)
  115. setUserInfo({
  116. ...userInfo.value,
  117. sex: formData.value.sex,
  118. })
  119. resolve(true)
  120. formData.value = {}
  121. uni.showToast({
  122. title: '修改成功',
  123. icon: 'none',
  124. mask: true,
  125. })
  126. },
  127. })
  128. }
  129. const handleSetEmployer = async () => {
  130. formData.value = {
  131. employer: userAuthInfo.value.employer,
  132. }
  133. schema.value = {
  134. employer: {
  135. type: 'TextField',
  136. label: '公司',
  137. hiddenLabel: true,
  138. props: {},
  139. },
  140. }
  141. confirm({
  142. title: '修改公司',
  143. beforeConfirm: async ({ resolve }) => {
  144. const { code } = await requestToast(
  145. () =>
  146. updateUserAuthInfo({
  147. ...userAuthInfo.value,
  148. employer: formData.value.employer,
  149. }),
  150. {
  151. success: true,
  152. successTitle: '修改成功',
  153. },
  154. )
  155. if (code === 0) {
  156. resolve(true)
  157. formData.value = {}
  158. setUserAuthInfo()
  159. }
  160. resolve(false)
  161. },
  162. })
  163. }
  164. const handeleSetBirthday = async () => {
  165. const { code, data } = await requestToast(
  166. () =>
  167. updateMemberUserInfo({
  168. birthday: dayjs(birthday.value).toDate().getTime(),
  169. }),
  170. {
  171. success: true,
  172. successTitle: '修改成功',
  173. },
  174. )
  175. if (code === 0) {
  176. // await setUserBasicInfo()
  177. setUserInfo({
  178. ...userInfo.value,
  179. birthday: dayjs(birthday.value).toDate().getTime(),
  180. })
  181. birthdayShow.value = false
  182. }
  183. }
  184. onMounted(async () => {
  185. await setUserAuthInfo()
  186. if (isDesigner.value) {
  187. await Promise.all([setUserBasicInfo()])
  188. console.log(userBasicInfo.value)
  189. }
  190. birthday.value = userInfo.value.birthday || dayjs().toDate().getTime()
  191. })
  192. </script>
  193. <template>
  194. <div class="flex-grow bg-white flex flex-col p-4.5 gap-8">
  195. <div class="flex flex-col items-center">
  196. <button
  197. class="p-0 leading-0 bg-transparent after:b-none"
  198. open-type="chooseAvatar"
  199. @chooseavatar="handleChooseAvatar"
  200. >
  201. <wd-img
  202. round
  203. width="97"
  204. height="97"
  205. :src="(userInfo.avatar ?? '') === '' ? NetImages.DefaultAvatar : userInfo.avatar"
  206. custom-class="border border-white border-solid"
  207. ></wd-img>
  208. </button>
  209. <div
  210. class="mt-2 text-center text-black/40 text-xs font-normal font-['PingFang_SC'] leading-none"
  211. >
  212. 更换头像
  213. </div>
  214. </div>
  215. <button
  216. class="w-full p-0 leading-0 bg-transparent hover:bg-transparent after:b-none"
  217. @click="handleSetNickname"
  218. >
  219. <SectionHeading
  220. title="姓名"
  221. size="sm"
  222. :end-text="userInfo.nickname"
  223. :end-arrow="!isDesigner"
  224. ></SectionHeading>
  225. </button>
  226. <template v-if="isDesigner">
  227. <div @click="handleSetSex">
  228. <SectionHeading
  229. title="性别"
  230. size="sm"
  231. :end-text="{ '0': '未知', '1': '男', '2': '女' }[String(userInfo.sex)] ?? '设置'"
  232. end-arrow
  233. ></SectionHeading>
  234. </div>
  235. <div class="relative" @click="birthdayShow = true">
  236. <SectionHeading
  237. title="生日"
  238. size="sm"
  239. :end-text="
  240. (userInfo.birthday ?? '') === ''
  241. ? '设置'
  242. : dayjs(userInfo.birthday).format('YYYY-MM-DD')
  243. "
  244. end-arrow
  245. ></SectionHeading>
  246. </div>
  247. <!-- <div class="absolute left-0 top-0 w-full h-full opacity-" style="visibility: hidden">
  248. <wd-datetime-picker type="date" v-model="birthday" custom-class=""></wd-datetime-picker>
  249. </div> -->
  250. </template>
  251. <SectionHeading
  252. title="手机号"
  253. size="sm"
  254. :end-text="userInfo?.mobile"
  255. :end-arrow="true"
  256. path="/pages-sub/mine/setting/mobile/index"
  257. ></SectionHeading>
  258. <template v-if="isDesigner">
  259. <div @click="handleSetEmployer">
  260. <SectionHeading
  261. title="公司"
  262. size="sm"
  263. :end-text="userAuthInfo?.employer"
  264. end-arrow
  265. ></SectionHeading>
  266. </div>
  267. <SectionHeading title="推荐人" size="sm" :end-text="userAuthInfo?.referrer"></SectionHeading>
  268. <SectionHeading
  269. title="经纪人"
  270. size="sm"
  271. :end-text="userBasicInfo?.brokerName"
  272. ></SectionHeading>
  273. </template>
  274. <div class="flex-1"></div>
  275. <div><wd-button block :round="false" @click="handleLogout">退出登录</wd-button></div>
  276. <FormMessageBox v-model="formData" selector="nickname" :schema="schema"></FormMessageBox>
  277. <wd-action-sheet v-model="birthdayShow" title="设置生日">
  278. <!-- <view style="padding: 15px 15px 150px 15px"> -->
  279. <wd-datetime-picker-view
  280. type="date"
  281. v-model="birthday"
  282. :minDate="dayjs().subtract(80, 'y').toDate().getTime()"
  283. :maxDate="dayjs().toDate().getTime()"
  284. label="年月日"
  285. />
  286. <!-- </view> -->
  287. <div class="px-4 pb-4">
  288. <wd-button block :round="false" @click="handeleSetBirthday">确定</wd-button>
  289. </div>
  290. </wd-action-sheet>
  291. </div>
  292. </template>
  293. <style lang="scss">
  294. .aaaa {
  295. &:after {
  296. position: absolute;
  297. top: 0;
  298. right: 0;
  299. bottom: 0;
  300. left: 0;
  301. content: '';
  302. background: #03f463;
  303. border-radius: 10px;
  304. transform: skewX(15deg);
  305. }
  306. &::before {
  307. position: absolute;
  308. top: 0;
  309. right: -13px;
  310. width: 100px;
  311. height: 64px;
  312. content: '';
  313. background: orange;
  314. border-radius: 10px;
  315. }
  316. }
  317. </style>