<template> <HeaderNav title="个人信息" :is-back="true"></HeaderNav> <view class="app-wallpaper" :style="{ backgroundImage:'url('+staticImage.wallpaperBgImage+')' }"> <view class="detail-container"> <view class="detail-content-container"> <view class="detail-content"> <view class="detail-content-item"> <view class="detail-item-title">头像</view> <view class="detail-item-content"> <button open-type="chooseAvatar" class="avatarBtn" @chooseavatar="chooseAvatar"> <image class="img" mode="aspectFill" :src="user.avatar"/> </button> </view> </view> <view class="detail-content-item"> <view class="detail-item-title">昵称</view> <view class="detail-item-content"> <u-input border="none" v-model="user.name" inputAlign="right" ></u-input> <u-icon class="arrow-right" name="arrow-right"></u-icon> </view> </view> <view class="detail-content-item" @click="$refs.datetimepicker.open()"> <view class="detail-item-title">生日</view> <view class="detail-item-content"> <u-text :text="birthday" size="28" color="#636363"></u-text> <uv-datetime-picker ref="datetimepicker" v-model="user.birthday" mode="date" minDate="1900-01-01" @confirm="birthdayConfirm" ></uv-datetime-picker> <u-icon class="arrow-right" name="arrow-right"></u-icon> </view> </view> <view class="detail-content-item"> <view class="detail-item-title">手机</view> <view class="detail-item-content"> <u-input border="none" v-model="user.phone" inputAlign="right" ></u-input> <u-icon class="arrow-right" name="arrow-right"></u-icon> </view> </view> <view class="detail-content-item" @click="$refs.sexPicker.open()"> <view class="detail-item-title">性别</view> <view class="detail-item-content"> <u-text :text="sexTitle" size="28" color="#636363"></u-text> <uv-picker ref="sexPicker" @confirm="sexConfirm" :default-index="[sexChecked]" key-name="title" v-model="user.sex" :columns="sexs"></uv-picker> <u-icon class="arrow-right" name="arrow-right"></u-icon> </view> </view> <view class="detail-content-item"> <view class="detail-item-title">背景</view> <view class="detail-item-content"> <u-upload :file-list="background" :maxCount="1" @delete="backgroundDel" @afterRead="backgroundRead"> </u-upload> </view> </view> <view class="detail-logout-button" @click="loginout"> 退出登录 </view> </view> </view> <view class="detail-background-container"> <view class="detail-background"></view> </view> </view> </view> </template> <script> import { imghost } from '@/config/host.js' import api from '@/utils/functions.js'; import HeaderNav from '@/components/HeaderNav/Index.vue'; import log from "@/utils/log"; import {updateUserDetail, userDetail} from "@/api/user"; import functions from "@/utils/functions.js"; import {UserCache} from "@/config/config"; export default { components:{ HeaderNav }, data: { sexChecked:0, sexTitle:'', birthday:'', show:false, sexShow:false, sexs:[[{title: '男', value: 1}, {title:'女', value:2}]], staticImage:{ wallpaperBgImage:imghost+'/background.png', }, user:{ avatar:imghost+'/banner.png', name:'清晨的风', background_image:imghost+'/banner.png', sex:1, phone:'15012345678', coupons:221, id:88685, birthday:'2002-05-11', }, writeWaitTime:1000, writeHandler:null, background:[], }, onLoad() { this.setSexTitle(); this.getUserDetail(); }, watch:{ user:{ handler(value) { this.writeHandler && clearTimeout(this.writeHandler); this.writeHandler = setTimeout(() => { this.submit(); }, this.writeWaitTime) }, deep: true, } }, methods: { getUserDetail() { userDetail().then(({data}) => { this.user = data; this.birthday = this.user.birthday ? this.user.birthday : '2000-01-01' this.background = [{url:this.user.background_image}] this.user.birthday = this.birthday this.user.sex = this.user.sex === 1 ? 1 : 2; this.setSexTitle(this.user.sex); }) }, sexConfirm(v) { log(v); this.user.sex = v.value[0].value; this.setSexTitle(v.value[0].value); }, birthdayConfirm(v) { this.birthday = uni.$u.timeFormat(v.value, 'yyyy-mm-dd'); }, submit() { if (this.user.birthday) { this.user.birthday = uni.$u.timeFormat(this.user.birthday, 'yyyy-mm-dd') } updateUserDetail(this.user).then((data) => { UserCache.set(data.data); }); }, setSexTitle(v) { log(v); this.sexTitle = [0, '男', '女'][v ? v : this.user.sex]; log(this.sexTitle); }, chooseAvatar(v) { api.uploadOssFile(v.detail.avatarUrl).then(res => { this.user.avatar = res.show_path; }) }, backgroundRead(file, lists, name){ api.uploadOssFile(file.file.url).then((res) => { this.background = [{url:res.show_path}]; this.user.background_image = res.show_path; }) }, backgroundDel(index, file, name){ this.background = []; this.user.background = ''; }, loginout(){ api.logout(); } }, onPageScroll(res) { }, created() { // this.pagePadding = (api.navHeight().navPaddingTop+ // api.navHeight().navHeight + (api.navHeight().headerPadding *2)) } } </script> <style lang="scss"> @import '@/pages/UserDetail/components/index.scss'; </style>