sugarpark-mini-program/pages/info/editCenter.vue

<template>
	<view class="container">
		<image-cropper :src="tempFilePath" @confirm="confirm" @cancel="cancel"></image-cropper>
		<view id="topnav" class="topnav flex-start" :style="{'height':`${topbarOffsetHeight-statusBarHeight}px`,'padding-top':`${statusBarHeight}px`,'background-color':`rgba(21, 17, 38,${topNavAlpha})`}" v-if="!cover.isFullScreen">
			<view class="nav-item flex-center" @click="back">
				<image :src="`${assetsUrl}back.png`" mode="widthFix" class="nav-img"></image>
			</view>
			<view class="nav-text font32 fw600">
				{{pageName}}
			</view>
			<view class="nav-item"></view>
		</view>
		<uni-popup ref="popup" type="bottom" :is-mask-click="false">
			<view class="popup" @touchmove.prevent>
				<view class="p-title-box flex-between">
					<view class="p-title font36 fw600">
						上传头像
					</view>
					<image :src="`${assetsUrl}info-figure-close.png`" mode="aspectFill" class="p-close" @click="hideHeadPopup"></image>
				</view>
				<view class="p-title-tip font28 fw400">
					上传清晰本人照片更容易交到好友哦
				</view>
				<view class="p-img-box flex-between">
					<view class="p-img">
						<image :src="`${assetsUrl}info-figure-img1.png`" mode="aspectFill" class="img"></image>
						<view class="p-text font22 fw400">
							五官清晰
						</view>
					</view>
					<view class="p-img">
						<image :src="`${assetsUrl}info-figure-img2.png`" mode="aspectFill" class="img"></image>
						<view class="p-text font22 fw400">
							半身照
						</view>
					</view>
					<view class="p-img">
						<image :src="`${assetsUrl}info-figure-img3.png`" mode="aspectFill" class="img"></image>
						<view class="p-text font22 fw400">
							风景和人
						</view>
					</view>
				</view>
				<view style="height: 60rpx;">
					
				</view>
			</view>
			
		</uni-popup>
		<scroll-view
		scroll-y="true" 
		:style="{'height': `${scrollHeight}px`,'padding-top':`${topNavHeight}px`}"
		v-if="scrollHeight>0"
		lower-threshold="200"
		refresher-enabled="true"
		:refresher-triggered="scrollTriggered"
		:refresher-threshold="45" 
		refresher-default-style="white"
		refresher-background="#151126" 
		@refresherrefresh="scrollRefresh" 
		@refresherpulling="scrollPulling"
		@refresherrestore="scrollRestore" 
		@refresherabort="scrollAbort"
		@scrolltolower="scrollToBottom"
		class="scroll-view flex-start"
		>
		
			<view class="head-info" @click="showHeadPopup">
				<view class="head-box flex-center">
					<view class="head-inner flex-center" v-if="!cropFilePath">
						<image :src="`${assetsUrl}info-figure-add.png`" mode="aspectFill" class="add"></image>
					</view>
					<image :src="cropFilePath" mode="aspectFit" v-else></image>
				</view>
				<image :src="`${assetsUrl}info-figure-camera.png`" mode="aspectFill" class="camera"></image>
			</view>
			<view class="label-box flex-between">
				<view class="left font28 fw400">
					昵称
				</view>
				<view class="right flex-center" @click="randNick">
					<view class="rand-btn flex-center">
						<image :src="`${assetsUrl}info-figure-tou.png`" mode="aspectFill" class="rand"></image>
						<view class="rand-text font20 fw400">
							随机昵称
						</view>
					</view>
				</view>
			</view>
			<view class="input-box flex-between">
				<input type="text" maxlength="10" placeholder="请输入你的昵称" placeholder-style="color:#494667;font-size:28rpx;" class="input fw500 font32" v-model="nickname">
				<view class="input-num font22 fw400" v-if="nickname!==''">
					{{nickname.length}}/10
				</view>
			</view>
			<view class="label-box flex-between">
				<view class="left font28 fw400">
					个人简介
				</view>
				<view class="right flex-center" v-if="introduce!==''">
					<view class="input-num font22 fw400">
						{{introduce.length}}/200
					</view>
				</view>
			</view>
			<view class="textarea-box flex-between">
				<textarea  maxlength="200" placeholder="可以填写个人介绍、人生经历、交友期望等" placeholder-style="color:#494667;font-size:28rpx;" class="textarea fw500 font32" v-model="introduce"></textarea>
			</view>
			<view class="select-title font28 fw400">
				你的身高
			</view>
			<picker mode="selector" :range="heights" value="30" @change="heightsChange">
				<view class="select flex-between">
					<view class="select-val font28 fw400" :style="{'color':`${height==='选择身高'?'':'#ffffff'}`}">
						{{height}}
					</view>
					<image :src="`${assetsUrl}info-figure-select.png`" mode="aspectFill" class="select-icon"></image>
				</view>
			</picker>
			<view class="select-title font28 fw400">
				你的体重
			</view>
			<picker mode="selector" :range="weights" value="50" @change="weightsChange">
				<view class="select flex-between">
					<view class="select-val font28 fw400" :style="{'color':`${weight==='选择体重'?'':'#ffffff'}`}">
						{{weight}}
					</view>
					<image :src="`${assetsUrl}info-figure-select.png`" mode="aspectFill" class="select-icon"></image>
				</view>
			</picker>
			<view class="select-title font28 fw400">
				你的年龄
			</view>
			<picker mode="date" fields="day" value="1993-09-12" @change="agesChange">
				<view class="select flex-between">
					<view class="select-val font28 fw400" :style="{'color':`${age==='选择年龄'?'':'#ffffff'}`}">
						{{age}}
					</view>
					<image :src="`${assetsUrl}info-figure-select.png`" mode="aspectFill" class="select-icon"></image>
				</view>
			</picker>
			<view class="select-title font28 fw400">
				你的职业
			</view>
			<picker mode="multiSelector" :range="jobs" @change="jobsChange" @columnchange="jobsColumnChange">
				<view class="select flex-between">
					<view class="select-val font28 fw400" :style="{'color':`${job==='选择职业'?'':'#ffffff'}`}">
						{{job}}
					</view>
					<image :src="`${assetsUrl}info-figure-select.png`" mode="aspectFill" class="select-icon"></image>
				</view>
			</picker>
			<view class="label-box flex-between">
				<view class="left font28 fw400">
					微信号
				</view>
			</view>
			<view class="input-box flex-between">
				<input type="text" maxlength="10" placeholder="请填写真实正确的微信号" placeholder-style="color:#494667;font-size:28rpx;" class="input fw500 font32" v-model="wechat">
			</view>
			<view class="select-title font28 fw400">
				设置查看权限
			</view>
			<picker mode="selector" :range="auths" range-key="value" @change="authsChange">
				<view class="select flex-between">
					<view class="select-val font28 fw400" :style="{'color':`${height===''?'':'#ffffff'}`}">
						{{auth}}
					</view>
					<image :src="`${assetsUrl}info-figure-select.png`" mode="aspectFill" class="select-icon"></image>
				</view>
			</picker>
			<view class="label-box flex-between">
				<view class="left font28 fw400">
					常驻城市
				</view>
				<view class="right flex-center" @click="editCity">
					<image :src="`${assetsUrl}mine-edit.png`" mode="aspectFill" class="edit"></image>
				</view>
			</view>
			<view class="tag-box flex-start">
				<view class="tag font28" v-for="(item,index) in myCitys" :key="index">
					{{item}}
				</view>
				<view class="tag font28" v-if="myCitys.length===0">
					未设置
				</view>
			</view>
			<view class="label-box flex-between">
				<view class="left font28 fw400">
					个性标签
				</view>
				<view class="right flex-center" @click="editLabels">
					<image :src="`${assetsUrl}mine-edit.png`" mode="aspectFill" class="edit"></image>
				</view>
			</view>
			<view class="tag-box flex-start">
				<view class="tag font28" v-for="(item,index) in myLabels" :key="index">
					{{item.name}}
				</view>
				<view class="tag font28" v-if="myLabels.length===0">
					未设置
				</view>
			</view>
			<view class="label-box flex-between">
				<view class="left font28 fw400">
					我喜欢的
				</view>
				<view class="right flex-center" @click="editWants">
					<image :src="`${assetsUrl}mine-edit.png`" mode="aspectFill" class="edit"></image>
				</view>
			</view>
			<view class="tag-box flex-start">
				<view class="tag font28" v-for="(item,index) in myWants" :key="index">
					{{item.name}}
				</view>
				<view class="tag font28" v-if="myWants.length===0">
					未设置
				</view>
			</view>
		</scroll-view>
		<view class="btn font32 fw600" @click="sure">
			{{btnText}}
		</view>
	</view>
</template>

<script>
	import TabBar from '@/components/TabBar/TabBar.vue';
	import ImageCropper from "@/components/invinbg-image-cropper/invinbg-image-cropper.vue";
	import wxMap from '@/static/qqmap-wx-jssdk1.2/qqmap-wx-jssdk.min.js';
	import {getPolicy,computeSignature,getKey} from '@/util/oss.js';
	import {encode} from '@/util/base64.js'
	/**
	 * 腾讯位置服务，手机账号：18996226740
	 */
	const wxMapSdk=new wxMap({key:'E5SBZ-T2YC3-CBL3F-YGFQQ-26PP2-ERFII'})
	export default {
		components:{TabBar,ImageCropper},
		data() {
			return {
				btnText:'完成',
				pageName:'个人资料',
				assetsUrl:this.$util.assetsUrl,
				scrollHeight:0,
				topNavHeight:0,
				scrollRefreshing:false,
				scrollTriggered:true,
				tempFilePath: '',
				cropFilePath: '',
				nickname:'',
				introduce:'',
				heights:[],
				height:'选择身高',
				weights:[],
				weight:'选择体重',
				age:'选择年龄',
				jobs:[],
				careersData:[],
				job:'选择职业',
				auths:[
					{key:'WxM2F5',value:'对VIP公开或使用颜豆、权益卡查看'},
					{key:'WaitAuth',value:'经过我授权才能查看微信'},
				],
				auth:'经过我授权才能查看微信',
				weiXinStatusEnum:'WaitAuth',
				wechat:'',
				myCitys:[],
				myLabels:[],
				myWants:[],
				saveOptions:{
						birthday: "",
						career: "",
						cities: [],
						completeUser: {},
						desc: "",
						education: {},
						height: 0,
						icon: "",
						myLabelIds: [],
						nick: "",
						wantedLabelIds: [],
						weiXinStatus: {},
						weight: 0,
						wxId: ""
				}
			};
		},
		computed: {
			statusBarHeight() {
				return this.$store.state.statusBarHeight;
			},
			topbarOffsetHeight() {
				return this.$store.state.topbarOffsetHeight;
			}
		},
		onLoad(options) {
			this.computedScollviewHeight();
			this.getMineData();
		},
		mounted() {
			let arr=[];
			for(let i=150;i<210;i++){
				arr.push(`${i}cm`);
			}
			this.heights=arr;
			arr=[];
			for(let i=30;i<150;i++){
				arr.push(`${i}kg`);
			}
			this.weights=arr;
			this.getCareersConfig();
			
		},
		onPageScroll(e) {
			
		},
		methods:{
			back(){
				uni.navigateBack({
					delta:1
				})
			},
			showHeadPopup(){
				this.btnText="从相册上传";
				this.$refs.popup.open();
			},
			hideHeadPopup(){
				this.btnText="完成";
				this.$refs.popup.close();
			},
			/**
			 * 计算scroll高度
			 */
			computedScollviewHeight() {
				let query = uni.createSelectorQuery().in(this);
				let heightLeaf =0;
				query.select('#topnav').boundingClientRect(data => {
					this.topNavHeight=data.height;
					heightLeaf += data.height;
				}).exec(() => {
					let sysInfo = uni.getSystemInfoSync();
					this.scrollHeight = sysInfo.windowHeight - heightLeaf;
				});
			
			},
			/**
			 * 推荐下拉刷新、加载更多
			 */
			scrollRefresh(){
				if (this.scrollRefreshing) 
				{
					return;
				}
				this.scrollRefreshing = true;
				setTimeout(() => {
					this.scrollTriggered = false;
					this.scrollRefreshing = false;
				}, 1000)
				this.getMineDetail();
			},
			scrollPulling(e) {},
			scrollRestore() {this.scrollTriggered = true;},
			scrollAbort() {},
			scrollToBottom(){

			},
			randNick(){
				this.$api.login.randNick({}).then(res=>{
					this.nickname=res.data.nick;
				}).catch(err=>{})
			},
			confirm(e) {
				this.tempFilePath = ''
				this.cropFilePath = e.detail.tempFilePath;
				const that=this;
				const policyText=getPolicy();
				const policy=encode(JSON.stringify(policyText));
				const key=getKey(0,this.cropFilePath.split('.')[1]);
				that.$api.public.aliossToken({}).then(resuslt=>{
					let formData={
						key:key,
						policy:policy,
						OSSAccessKeyId:resuslt.data.accessKeyId,
						signature:computeSignature(resuslt.data.accessKeySecret,policy),
						'x-oss-security-token':resuslt.data.securityToken,
						success_action_status:'200'
					}
					uni.uploadFile({
						url: 'https://zhenyanapp-gen.oss-cn-qingdao.aliyuncs.com',
						filePath:this.cropFilePath,
						name: 'file',
						header:{
							"Content-Type": "multipart/form-data"
						},
						formData: formData,
						success: (data) => {
						    if (data.statusCode === 200) {
							  that.icon=`${that.$store.state.imageCdn}/${key}`;
							  that.saveOptions.icon=`${that.$store.state.imageCdn}/${key}`;
						    }
						},
						fail: err => {
						    console.log(err);
						  }
					})
				})
				
			},
			cancel() {
				console.log('canceled')
			},
			getCareersConfig(){
				this.$api.public.config({tscsj:['Careers']}).then(res=>{
					this.careersData=res.data.careers;
					let arr=[],arr1=[];
					for(let item in res.data.careers){
						arr1.push(item)
					}
					arr.push(arr1);
					arr.push(res.data.careers[arr1[0]]);
					this.jobs=arr;
				}).catch(err=>{
					console.log(err)
				})
			},
			getMineDetail(){
				let user=JSON.parse(uni.getStorageSync('user'));
				this.$api.public.mineDetail({
					getAlbum:true,
					completeUser:user
				}).then(res=>{
					this.$store.commit('setUserInfo',res.data);
					uni.setStorageSync('userInfo',JSON.stringify(res.data));//正式环境删除
				})
			},
			heightsChange(e){
				this.height=this.heights[e.detail.value];
			},
			weightsChange(e){
				this.weight=this.weights[e.detail.value];
			},
			agesChange(e){
				this.age=e.detail.value;
			},
			jobsChange(e){
				let str=this.jobs[1][e.detail.value[1]];
				this.job=str;
			},
			jobsColumnChange(e){
				let leftValue=this.jobs[e.detail.column][e.detail.value];
				if(e.detail.column===0){
					this.jobs[1]=this.careersData[leftValue];
					this.$forceUpdate()
				}
			},
			authsChange(e){
				this.auth=this.auths[e.detail.value].value;
				this.weiXinStatusEnum=this.auths[e.detail.value].key;
			},
			editCity(){
				uni.navigateTo({
					url:'/pages/info/city?type=edit'
				})
			},
			editLabels(){
				uni.navigateTo({
					url:'/pages/info/labels?type=labels'
				})
			},
			editWants(){
				uni.navigateTo({
					url:'/pages/info/labels?type=wants'
				})
			},
			getMineData(){
				let userInfo=this.$store.state.userInfo||JSON.parse(uni.getStorageSync('userInfo'));
				console.log(userInfo)
				this.saveOptions.icon=userInfo.icon
				this.cropFilePath=userInfo.iconThumbnail;
				this.nickname=userInfo.nick;
				this.introduce=userInfo.desc;
				this.height=userInfo.height;
				this.weight=userInfo.weight;
				this.age=userInfo.ageInfo.birthday;
				this.job=userInfo.career;
				this.wechat=userInfo.wxId
				this.weiXinStatusEnum=userInfo.weixinStatus;
				this.auths.forEach((item,index)=>{
					if(item.key===this.weiXinStatusEnum){
						this.auth=item.value;
					}
				});
				this.myCitys=userInfo.cities||[];
				this.myLabels=userInfo.myLabels||[];
				this.myWants=userInfo.userWantedLabels||[];
				
			},
			sure(){
				if(this.btnText==='完成'){
					let userInfo=this.$store.state.userInfo||JSON.parse(uni.getStorageSync('userInfo'));
					this.saveOptions.birthday=this.age;
					this.saveOptions.education=userInfo.education;
					this.saveOptions.career=this.job;
					this.saveOptions.cities=this.myCitys;
					this.saveOptions.completeUser=JSON.parse(uni.getStorageSync('user'));
					this.saveOptions.desc=this.introduce;
					this.saveOptions.weight=this.weight;
					this.saveOptions.height=this.height;
					this.saveOptions.nick=this.nickname;
					this.saveOptions.weiXinStatus=this.weiXinStatusEnum;
					this.saveOptions.wxId=this.wechat;
					if(!this.saveOptions.icon){uni.showToast({mask:true,title:'请上传头像',icon:'none'});return;}
					if(!this.saveOptions.nick){uni.showToast({mask:true,title:'请填写昵称',icon:'none'});return;}
					if(!this.saveOptions.desc){uni.showToast({mask:true,title:'请填写个人简介',icon:'none'});return;}
					uni.showLoading({
						mask:true,
						title:'更新中···'
					})
					this.$api.login.editPersonal(this.saveOptions).then(res=>{
						
						if(res.status==='Succ'){
							let user=JSON.parse(uni.getStorageSync('user'));
							
							this.$api.login.editHead({completeUser:user,icon:this.saveOptions.icon}).then(res=>{
								uni.hideLoading();
								uni.showToast({
									mask:true,
									title:'更新成功',
									icon:'success'
								});
							})
							this.getMineDetail();
						}
					})
					
				}
				else{
					this.$refs.popup.close();
					this.btnText="完成";
					uni.chooseImage({
						count: 1, //默认9
						sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
						sourceType: ['album','camera'], //从相册选择
						success: res=>{
							this.tempFilePath = res.tempFiles[0].path;
						}
					});
				}
				
				
			}
		}
			
	}
</script>

<style lang="scss" scoped>
.container{
	width: 100vw;
	height: 100vh;
	background-color: $bgcolor1;
	position: relative;
	.topnav {
		padding: 0 10rpx;
		position: fixed;
		top: 0;
		left: 0;
		width: 100vw;
		z-index: 100;
		backdrop-filter: blur(10px);
		.nav-item {
			width: 40rpx;
			height: 40rpx;
			margin-left: 16rpx;
			.nav-img{
				width: 40rpx;
				height: 40rpx;
			}
			
		}
		.nav-text{
			flex: 1;
			color: $fontcolor5;
			height: 40rpx;
			text-align: center;
		}
	}
	.popup{
		width: 100vw;
		box-sizing: border-box;
		padding: 56rpx 60rpx;
		background-color: $bgcolor3;
		.p-title-box{
			.p-title{
				color: $fontcolor5;
			}
			.p-close{
				width: 40rpx;
				height: 40rpx;
			}
		}
		.p-title-tip{
			color: $fontcolor3;
			margin-top: 16rpx;
		}
		.p-img-box{
			margin-top: 80rpx;
			.p-img{
				.img{
					width: 200rpx;
					height: 200rpx;
				}
				.p-text{
					color: $fontcolor2;
					text-align: center;
				}
			}
		}
	}
	.scroll-view{
		flex-wrap: wrap;
		align-items: flex-start !important;
		box-sizing: border-box;
		.head-info{
			position: relative;
			width: 184rpx;
			height: 184rpx;
			margin: 0 auto;
			.head-box{
				width: 184rpx;
				height: 184rpx;
				border-radius: 92rpx;
				margin: 0 auto;
				margin-top: 88rpx;
				overflow: hidden;
				
				.head-inner{
					width: 184rpx;
					height: 184rpx;
					background: linear-gradient(133deg, rgba(250, 92, 116, 1), rgba(188, 85, 191, 1), rgba(138, 79, 255, 1));
					.add{
						width: 40rpx;
						height: 40rpx;
						background-color: $bgcolor1;
						border-radius: 92rpx;
						padding: 68rpx;
					}
				}
			}
			.camera{
				position: absolute;
				right: 0;
				bottom: 0;
				width: 56rpx;
				height: 56rpx;
			}
		}
		.label-box{
			margin: 0 60rpx;
			margin-top: 56rpx;
			.left{
				color: $fontcolor3;
			}
			.right{
				.rand-btn{
					border-radius: 24rpx;
					border: 1rpx solid #7D7DA4;
					width: 136rpx;
					height: 40rpx;
					.rand{
						width: 24rpx;
						height: 24rpx;
					}
					.rand-text{
						color: $fontcolor2;
						margin-left: 10rpx;
					}
				}
				.edit{
					width: 32rpx;
					height: 32rpx;
				}
			}
		}
		.tag-box{
			margin: 0 60rpx;
			margin-top: 56rpx;
			flex-wrap: wrap;
			.tag{
				height: 40rpx;
				line-height: 40rpx;
				color: $fontcolor3;
				padding: 0 20rpx;
				margin-right: 20rpx;
				border-radius: 16rpx;
				background-color: $bgcolor3;
				margin-bottom: 20rpx;
			}
		}
		.input-box{
			
			margin: 0rpx 60rpx;
			margin-top: 16rpx;
			background-color: $bgcolor3;
			border-radius: 16rpx;
			height: 112rpx;
			padding: 0rpx 32rpx;
			.input{
				color: $fontcolor5;
			}
			
		}
		.textarea-box{
			
			border-radius: 16rpx;
			margin: 0rpx 60rpx;
			margin-top: 16rpx;
			background-color: $bgcolor3;
			padding: 0rpx 32rpx;
			min-height: 200rpx;
			.textarea{
				color: $fontcolor5;
				height: 136rpx;
			}
		}
		.select-title{
			color: $fontcolor3;
			margin: 0 60rpx;
			margin-top: 56rpx;
		}
		.select{
			background-color: $bgcolor3;
			margin: 0 60rpx;
			margin-top: 16rpx;
			height: 112rpx;
			border-radius: 16px;
			padding: 0 36rpx;
			.select-val{
				color: $fontcolor1;
			}
			.select-icon{
				width: 24rpx;
				height: 24rpx;
			}
		}
	}
	.btn{
		position: fixed;
		z-index: 999;
		left: 0;
		right: 0;
		bottom: 44rpx;
		margin: auto;
		width: 630rpx;
		height: 104rpx;
		border-radius: 52rpx;
		background-color: $primary;
		color: $fontcolor5;
		text-align: center;
		line-height: 104rpx;
	}
	.input-num{
		color: $fontcolor2;
	}
}

</style>