pet_uni/pages/UserDetail/index.vue

<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 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 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+'/static/image/background.png',
				},
				user:{
					avatar:imghost+'/static/image/banner.png',
					name:'清晨的风',
					background_image:imghost+'/static/image/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(){
        uni.clearStorageSync();
        this.$store.commit('userInfo',{});
        this.$store.commit('userExtends',{});
        uni.reLaunch({url:'/pages/Index/index'});
      }
		},
		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>