dreamland/pages/user/index.vue

<template>
	<view class="register">
	
		<view class="content">
			<!-- 头部logo -->
			<view class="header">
				<image :src="fetch.avatar" @click="avatarSet(0)"></image>
				<avatar @upload="avatarUpload" ref="avatar"></avatar>
			</view>
			<!-- 主体 -->
			<view class="main">
				<wInput
					v-model="fetch.name"
					type="text"
					placeholder="昵称"
				></wInput>
				
				<wInput
					v-model="fetch.info"
					type="text"
					placeholder="介绍"
				></wInput>
				
			</view>
				
			<wButton 
				class="wbutton"
				text="修改资料"
				:rotate="isRotate" 
				@click.native="update()"
			></wButton>
			
			<!-- 其他登录 -->
			<view class="other_login cuIcon">
				<view class="login_icon">
					<view class="cuIcon-weixin" @tap="bind_weixin"></view>
				</view>
			</view>
			
			<!-- 底部信息 -->
			<view class="footer">
				<navigator url="forget" open-type="navigate" @click="shiming">关系伙伴</navigator>
				<text>|</text>
				<navigator url="register" open-type="navigate" @click="tixian">快速提现</navigator>
			</view>
		</view>
	</view>
</template>

<script>
	import wInput from '@/lib/watch-login/watch-input.vue' //input
	import wButton from '@/lib/watch-login/watch-button.vue' //button
	import avatar from "@/lib/yq-avatar/yq-avatar.vue";
	export default {
		data() {
			return {
				fetch : {
					name : '',
					avatar : '',
					sex : 3,
				},
				isRotate: false, //是否加载旋转
				openAvatar : false
			}
		},
		components:{
			wInput,
			wButton,
			avatar
		},
		// 重新加载
		onPullDownRefresh: function() {
			this.getData();
		},
		onLoad() {
			this.Dever.checkLogin();
			this.getData();
		},
		methods: {
			getData : function() {
				this.Dever.get(this, 'app/user/?l=api.getBaseUser');
			},
			bind_weixin : function() {
				this.Dever.alert('暂未开通');
			},
			shiming : function() {
				this.Dever.alert('敬请期待');
			},
			tixian : function() {
				this.Dever.alert('敬请期待');
			},
		    update : function() {
				if(this.isRotate){
					//判断是否加载中，避免重复点击请求
					return false;
				}
				if (!this.fetch.name) {
					this.Dever.alert('昵称不能为空');
				    return false;
				}
				
				this.isRotate = true;
				var self = this;
				this.Dever.post('package/passport/?l=app.update', {noloading:1, username: this.fetch.name, info: this.fetch.info, gender: this.fetch.sex}, function(t) {
					self.isRotate = false;
					self.Dever.alert('已保存资料，仅影响未修改过信息的合小记');
				}, function(t) {
					self.Dever.alert(t.msg);
					self.isRotate = false;
				});
		    },
			avatarUpload : function(e) {
				var self = this;
				this.openAvatar = false;
				
				this.Dever.uploadFile(e.path, 'avatar', 1, function(type, file) {
					self.fetch.avatar = file;
					self.Dever.post('package/passport/?l=app.update', {avatar:file, noloading:1});
				});
			},
			avatarSet : function(index) {
				this.openAvatar = true;
				this.$refs.avatar.fChooseImg(index,{
					selWidth: "300rpx", selHeight: "300rpx",
					expWidth: '260rpx', expHeight: '260rpx',
					avatarSrc : this.fetch.avatar,
					bgImage : this.fetch.avatar,
					noTab : true,
					
				});
			}
		}
	}
</script>

<style>
	@import url("@/lib/watch-login/css/icon.css");
	@import url("@/lib/watch-login/css/main.css");
	.other_agree {
		display: flex;
		flex-direction: row;
		justify-content: center;
		align-items: center;
		margin-top: 50rpx;
		text-align: center;
	}
	.other_login {
		margin-top: 80rpx;
	}
</style>