popularize-front/pages_my/user-msg.vue

<template>
	<view>
		<view class="head-box"></view>
		<uv-navbar autoBack :title="$t('pages_my.user_msg.title')" leftIconColor="#fff" :bgColor="bgColor" height="100rpx" :titleStyle="{color:'#fff'}"></uv-navbar>
	
		<view class="content">
			<view class="title-box">{{ $t('pages_my.user_msg.basic_info') }}</view>
			<view class="form-box">
				<view class="form-box-line">
					<view class="label-box">{{ $t('pages_my.user_msg.username') }}</view>
					<view class="value-box">
						<uv-input :placeholder="$t('pages_my.user_msg.enter_username')" inputAlign="right" v-model="info.nickName" border="none" color="#CCCCCC"></uv-input>
					</view>
				</view>
				<view class="form-box-line">
					<view class="label-box">{{ $t('pages_my.user_msg.email') }}</view>
					<view class="value-box">
						<uv-input :placeholder="$t('pages_my.user_msg.enter_email')" inputAlign="right" v-model="info.email" border="none" color="#CCCCCC"></uv-input>
					</view>
				</view>
				<view class="form-box-line">
					<view class="label-box">{{ $t('pages_my.user_msg.phone') }}</view>
					<view class="value-box">
						<uv-input :placeholder="$t('pages_my.user_msg.enter_phone')" inputAlign="right" v-model="info.phone" border="none" color="#CCCCCC"></uv-input>
					</view>
				</view>
				<view class="form-box-line">
					<view class="label-box">{{ $t('pages_my.user_msg.gender') }}</view>
					<view class="value-box" @click="$refs.sexPicker.open();">
						<uv-input :placeholder="$t('pages_my.user_msg.select_gender')" readonly inputAlign="right" v-model="info.sex" border="none" color="#CCCCCC"></uv-input>
					</view>
				</view>
				<view class="form-box-line">
					<view class="label-box">{{ $t('pages_my.user_msg.nationality') }}</view>
					<view class="value-box" @click="$refs.cityPicker.open()">
						<uv-input :placeholder="$t('pages_my.user_msg.enter_nationality')" readonly inputAlign="right" v-model="info.city" border="none" color="#CCCCCC"></uv-input>
					</view>
				</view>
				<view class="form-box-line">
					<view class="label-box">{{ $t('pages_my.user_msg.birthday') }}</view>
					<view class="value-box" @click="$refs.datetimePicker.open()">
						<uv-input :placeholder="$t('pages_my.user_msg.enter_birthday')" readonly inputAlign="right" v-model="info.yearDate" border="none" color="#CCCCCC"></uv-input>
					</view>
				</view>
				<view class="form-box-line">
					<view class="label-box">{{ $t('pages_my.user_msg.address') }}</view>
					<view class="value-box">
						<uv-input :placeholder="$t('pages_my.user_msg.enter_address')" inputAlign="right" v-model="info.address" border="none" color="#CCCCCC"></uv-input>
					</view>
				</view>
				<view class="form-box-line">
					<view class="label-box">{{ $t('pages_my.user_msg.personal_status') }}</view>
					<view class="value-box">
						<uv-input :placeholder="$t('pages_my.user_msg.enter_status')" inputAlign="right" v-model="info.state" border="none" color="#CCCCCC"></uv-input>
					</view>
				</view>
			</view>
		
			<view class="title-box">{{ $t('pages_my.user_msg.education') }}</view>
			<view class="form-box">
				<view class="form-title">{{ $t('pages_my.user_msg.degree') }}</view>
				<view class="choose-box">
					<view class="choose-item" :class="info.shcool == item ? 'choose-class' :''" v-for="(item,i) in xueliList" :key="i" @click="info.shcool = item">{{item}}</view>
				</view>
				<view class="form-title">{{ $t('pages_my.user_msg.school') }}</view>
				<view class="choose-box">
					<view class="choose-item" :class="info.shcoolType == item.title ? 'choose-class' :''" v-for="(item,i) in yuanxiaoList" :key="i" @click="info.shcoolType = item.title">{{item.title}}</view>
				</view>
			</view>
		
			<view class="title-box">{{ $t('pages_my.user_msg.work') }}</view>
			<view class="form-box">
				<view class="form-box-line">
					<view class="label-box">{{ $t('pages_my.user_msg.industry') }}</view>
					<view class="value-box">
						<uv-input :placeholder="$t('pages_my.user_msg.enter_industry')" inputAlign="right" v-model="info.workValue" border="none" color="#CCCCCC"></uv-input>
					</view>
				</view>
			</view>
			
			<view class="title-box">{{ $t('pages_my.user_msg.about_me') }}</view>
			<view class="form-box">
				<uv-textarea v-model="info.details" :customStyle="{background: 'transparent',border:'none'}" height="380rpx" :placeholder="$t('pages_my.user_msg.enter_about_me')"></uv-textarea>
			</view>
		</view>
		<view class="btn-box">
			<uv-button :text="$t('pages_my.user_msg.save')" @click="saveClick" color="#381615" shape="circle" :customStyle="btnCustomStyle"></uv-button>
		</view>
		<uv-picker ref="sexPicker" :columns="sexcolumns" @confirm="sexConfirm"></uv-picker>
		<uv-picker ref="cityPicker" keyName="country" :columns="citycolumns" @confirm="cityConfirm"></uv-picker>
		<uv-datetime-picker ref="datetimePicker" :minDate="0" :maxDate="maxDate"  :formatter="formatter"  v-model="value" mode="date" @confirm="dateConfirm"></uv-datetime-picker>
	</view>
</template>

<script>
	export default{
		data() {
			return {
				bgColor:'transparent',
				btnCustomStyle:{
					color:'#FF5858'
				},
				info:{
					nickName:'',
					headImage:'',
					phone:'',
					email:'',
					sex:'',
					city:'',
					yearDate:'',
					address:'',
					state:'',
					shcool:'',
					shcoolType:'',
					workValue:'',
					details:'',
				},
				xueliIndex:0,
				yuanxiaoIndex:0,
				xueliList:[],
				yuanxiaoList:[],
				sexcolumns:[],
				citycolumns:[],
				maxDate:new Date().getTime(),
				value: Number(new Date())
			}
		},
		onPageScroll(e) {
			if(e.scrollTop > 50) {
				this.bgColor = '#49070c'
			}else{
				this.bgColor = 'transparent'
			}
		},
		onLoad() {
			// 初始化国际化数据
			this.xueliList = [
				this.$t('pages_my.user_msg.bachelor'),
				this.$t('pages_my.user_msg.master'),
				this.$t('pages_my.user_msg.doctor'),
				this.$t('pages_my.user_msg.other')
			]
			this.sexcolumns = [[
				this.$t('pages_my.user_msg.male'),
				this.$t('pages_my.user_msg.female')
			]]
			
			this.getUserInfo()
			this.getnationalityPageList()
			this.getlabelPageList()
		},
		methods:{
			getlabelPageList() {
				this.$api('labelPageList',{pageNo:1,pageSize:999},res=>{
					this.yuanxiaoList = res.result.records
				})
			},
			getnationalityPageList() {
				this.$api('nationalityPageList',{pageNo:1,pageSize:999},res=>{
					this.citycolumns = [res.result.records]
				})
			},
			formatter(type, value) {
				if (type === 'year') {
					return `${value}年`
				}
				if (type === 'month') {
					return `${value}月`
				}
				if (type === 'day') {
					return `${value}日`
				}
				return value
			},
			saveClick() {
				for (let k in this.info) {
					if((!this.info[k] && this.info[k] != 0) 
					|| this.info[k] == 'null'){
						this.info[k] = ''
					}
				}
				this.$api('updateInfo',this.info, res => {
					if (res.code == 200) {
											uni.showToast({
						title: this.$t('pages_my.user_msg.save_success'),
						icon:'none'
					})
						setTimeout(()=>{
							uni.navigateBack()
						},1500)
					}
				})
			},
			getUserInfo() {
				this.$api('getInfo', res => {
					if (res.code == 200 && res.result) {
						this.info = res.result
					}
				})
			},
			sexConfirm(val) {
				this.info.sex = val.value[0]
			},
			cityConfirm(val) {
				this.info.city = val.value[0].country
			},
			dateConfirm(val) {
				const date = new Date(val.value);
				const year = date.getFullYear();
				const month = String(date.getMonth() + 1).padStart(2, '0');
				const day = String(date.getDate()).padStart(2, '0');
				this.info.yearDate = `${year}-${month}-${day}`;
			}
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #060504;
	}
</style>
<style lang="scss" scoped>
	.head-box {
		background: url('@/static/image/nav-bg.png') no-repeat;
		background-size: 100% 100%;
		width: 100%;
		height: 534rpx;
		position: absolute;
		z-index: -1;
		top: 0;
	}
	.content {
		margin-top: 40rpx;
		padding: 0 30rpx 170rpx;
		padding-top: calc(var(--status-bar-height) + 110rpx);
		.title-box {
			font-weight: 500;
			font-size: 27rpx;
			color: #666666;
		}
		.form-box {
			background: #1B1713;
			border-radius: 27rpx;
			padding:0 40rpx;
			margin-top: 20rpx;
			margin-bottom: 44rpx;
			.form-box-line {
				height: 112rpx;
				border-bottom: 1px solid #403D3A;
				display: flex;
				align-items: center;
				&:last-child {
					border: none;
				}
				.label-box {
					font-weight: 500;
					font-size: 29rpx;
					color: #CCCCCC;
					margin-right: 34rpx;
				}
				.value-box {
					display: flex;
					align-items: center;
					justify-content: space-between;
					flex: 1;
					.uv-input {
					}
				}
			}
			
			.form-title {
				font-weight: 500;
				font-size: 28rpx;
				color: #CCCCCC;
				padding-top: 32rpx;
				
			}
			.choose-box {
				margin-top: 28rpx;
				display: flex;
				flex-wrap: wrap;
				.choose-item {
					width: 137rpx;
					height: 67rpx;
					border-radius: 13rpx;
					border: 1rpx solid #CCCCCC;
					text-align: center;
					line-height: 67rpx;
					font-weight: 500;
					font-size: 26rpx;
					color: #CCCCCC;
					margin-right: 15rpx;
					margin-bottom: 24rpx;
					&:nth-child(4n){
						margin-right: 0;
					}
				}
				.choose-class {
					background-color: #341616;
					color: #FF4747;
					border: 1rpx solid #FF4747;
				}
			}
		}
	}
	.btn-box {
		background-color: #060504;
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		padding: 20rpx 40rpx;
		height: 150rpx;
		z-index: 999;
		box-sizing: border-box;
	}
</style>