WenWuGuanJia/user_fenbao/info/profile.vue

<template>
	<view class="body">
		<!-- 导航栏 -->
		<u-navbar title="个人资料" :placeholder="true"  bgColor="rgba(255,255,255,0.3)" leftText="返回" :autoBack="true"
			titleStyle="font-weight:bold;color:#7a5831"></u-navbar>

		<view class="cu-card">
			<view class="cu-item margin-sm radius padding-sm">
				<view class="text-center padding-tb-xl" @tap="chooseAvatar()">
					<view>
						<image class="cu-avatar round" style="width: 200rpx;height: 200rpx;" :src="profile.avatar">
						</image>
					</view>
					<view class="text-center text-sm margin-top-xs text-gray">
						<text>点击更换头像</text>
					</view>
				</view>

				<view class="cu-form-group">
					<view class="title">
						<text>用户昵称</text>
						<text class="margin-left-xs text-red">*</text>
					</view>
					<input class="text-right" placeholder="请输入昵称" v-model="profile.nickname"></input>
				</view>
				<view class="cu-form-group">
					<view class="title">
						<text>性别</text>
					</view>
					<view>
				<u-radio-group
					v-model="selsex"
				    placement="row"
				    @change="swGender"
				   >
				    <u-radio
				      :customStyle="{marginLeft: '10px'}"
				      v-for="(item, index) in sexlist"
				      :key="index"
				      :label="item.name"
				      :name="item.name"				      
				    >
				    </u-radio>
				  </u-radio-group>
				  </view>
				</view>
				<view class="cu-form-group">
					<view class="title">
						<text>联系方式</text>
					</view>
					<input class="text-right" placeholder="请输入手机号" v-model="profile.mobile"></input>
				</view>
				<!-- <view class="cu-form-group">
					<view class="title">
						<text>个人介绍</text>
					</view>
					<input class="text-right" placeholder="一句话介绍一下你自己" v-model="profile.bio"></input>
				</view> -->
			</view>
			<view class="bottom-group padding text-center ">
				<button class="cu-btn main-bg margin-lr-sm round lg" @click="submit">
					<text class="text">确认修改</text>
				</button>
			</view>
		</view>
	</view>
</template>

<script>
	let _this;
	import {
		baseApiUrl
	} from '@/config/config.js';
	export default {
		data() {
			return {
				showLoad: false,
				vuex_user: {},
				upload: false,
				sexlist: [{
				            name: '女',
				            disabled: false
				          },
				            {
				              name: '男',
				              disabled: false
				            }],
				selsex:'女',
				profile: {
					avatar: '',
					bio: '',
					nickname: '',
					openid: '',
					// mobile: '',
					// score: '',
					// token: '',
					// user_id: '',
					// username: '',
					// birthday: '',
					 gender: 0
				}
			}
		},
		onLoad() {
			_this = this;
			
		},
		onShow() {
			this.vuex_user = this.$db.get('user');
		 // 历遍并替换			
			// for (let key in this.profile) {
			// 	this.profile[key] = this.vuex_user[key];            
			// }	
			//avatar: '',					bio: '',					nickname: '',					openid:''          this.profile['']
			this.profile.nickname = this.vuex_user.nickname;
			this.profile.avatar = this.vuex_user.avatar;
			this.profile.bio = this.vuex_user.bio;
			this.profile.mobile = this.vuex_user.mobile;
			if(this.vuex_user.gender==0) 
			this.selsex='女'
			else
			this.selsex='男'
			// this.profile.openid=this.vuex_user.TikTok_open_id;
			console.log(this.profile);
		},
		methods: {
			swGender(e) {
				if(e=='男')
				this.profile.gender=1;
				else
				this.profile.gender=0;
				console.log(e);
				
				//this.profile.gender = e.detail.value ? 1 : 0
			},
			chooseAvatar() {
				uni.navigateTo({
					url: '/user_fenbao/info/clipper?imgType=changeAvatar',
				});
			},
			submit() {
				let i = 0;
				if (this.upload) {
					uni.showToast({
						title: '请稍后上传中...'
					});
					return
				}
				console.log(this.profile)
				this.showLoad = true;
				console.log(this.profile);
			
				this.$api.profile(this.profile, res => {	 				
					this.showLoad = false;
					if (res) {
						this.vuex_user.gender=this.profile.gender;
						this.vuex_user.nickname=this.profile.nickname;
						this.vuex_user.avatar=this.profile.avatar;
						this.$db.set('user', this.vuex_user);						
						uni.showToast({
							title: '保存成功'
						});
						
					}
				});
			}
		}
	}
</script>

<style>
</style>