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

<template>
	<view class="container">
		<image-cropper :src="tempFilePath" @confirm="confirm" @cancel="cancel"></image-cropper>
		<TopBar></TopBar>
		<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>
		<view class="line-bar flex-between">
			<view class="span active"></view>
			<view class="span active"></view>
			<view class="span"></view>
			<view class="span"></view>
			<view class="span"></view>
		</view>
		<view class="title font44 fw600">
			设置你的社交形象
		</view>
		<view class="tip font28 fw400">
			展示你的真实一面，给大家留一个好印象
		</view>
		<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">
				{{nickname.length}}/10
			</view>
		</view>
		<view class="label-box flex-between">
			<view class="left font28 fw400">
				个人简介
			</view>
			<view class="right flex-center">
				<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="label-box flex-between">
			<view class="left font28 fw400">
				邀请码<span class="font22">(可不填)</span>
			</view>
		</view>
		<view class="input-box flex-between">
			<input type="text" maxlength="6" placeholder="请输入你的邀请码" placeholder-style="color:#494667;font-size:28rpx;" class="input fw500 font32" v-model="code" >
		</view>
		<view style="height: 200rpx;"></view>
		<view class="btn font32 fw600" @click="sure">
			{{btnText}}
		</view>
	</view>
</template>

<script>
	import TopBar from '@/components/TopBar/TopBar.vue';
	import ImageCropper from "@/components/invinbg-image-cropper/invinbg-image-cropper.vue";
	import {getPolicy,computeSignature,getKey} from '@/util/oss.js';
	import {encode} from '@/util/base64.js'
	export default {
		components:{TopBar,ImageCropper},
		data() {
			return {
				assetsUrl:this.$util.assetsUrl,
				nickname:'',
				introduce:'',
				code:'',
				icon:'',
				btnText:'下一步',
				tempFilePath: '',
				cropFilePath: '',
				
			};
		},
		methods:{
			sure(){
				if(this.btnText==='从相册上传'){
					
					uni.chooseImage({
						count: 1, //默认9
						sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
						sourceType: ['album','camera'], //从相册选择
						success: res=>{
							this.tempFilePath = res.tempFiles[0].path;
						}
					});
				}
				else{
					if(this.icon===''){uni.showToast({title:'请上传头像',icon:'none'});return;}
					if(this.nickname===''){uni.showToast({title:'请填写昵称',icon:'none'});return;}
					if(this.introduce===''){uni.showToast({title:'请填写个人简介',icon:'none'});return;}
					uni.showLoading({mask:true});
					let user=JSON.parse(uni.getStorageSync('user'));
					user.nick=this.nickname;
					user.desc=this.introduce;
					user.shareCode=this.code;
					user.icon=this.icon;
					let saveOption={
						"completeUser": user,
						"weiXinStatusEnum": 'NoWeiXin',
					}
					uni.showLoading({
						title:'保存中',
						mask:true
					})
					this.$api.login.saveFigure(saveOption).then(res=>{
						uni.setStorageSync('regStep','SocialData');
						uni.setStorageSync('LL_Ukn',res.data.ukn);
						uni.setStorageSync('user',JSON.stringify(user));
						this.$api.login.editHead({completeUser:user,icon:this.icon}).then(res=>{
							uni.hideLoading();
						})
						uni.reLaunch({
							url:`/pages/info/datum`
						})
					}).catch(err=>{})
				}
			},
			randNick(){
				this.$api.login.randNick({}).then(res=>{
					this.nickname=res.data.nick;
				}).catch(err=>{})
			},
			confirm(e) {
				this.tempFilePath = ''
				this.cropFilePath = e.detail.tempFilePath;
				this.btnText="下一步";
				this.$refs.popup.close();
				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}`;
						    }
						},
						fail: err => {
						    console.log(err);
						  }
					})
				})
				
			},
			cancel() {
				console.log('canceled')
			},
			showHeadPopup(){
				this.btnText="从相册上传";
				this.$refs.popup.open();
			},
			hideHeadPopup(){
				this.btnText="下一步";
				this.$refs.popup.close();
			}
		}
	}
</script>

<style lang="scss" scoped>
.container{
	width: 100vw;
	min-height: 100vh;
	background-color: $bgcolor1;
	.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;
				}
			}
		}
	}
	.line-bar{
		margin: 0 60rpx;
		margin-top: 30rpx;
		.span{
			width: 120rpx;
			height: 8rpx;
			border-radius: 4rpx 0rpx 0rpx 4rpx;
			background-color: $bgcolor4;
		}
		.active{
			background-color: $primary;
		}
	}
	.title{
		color: $fontcolor5;
		padding-left: 60rpx;
		margin-top: 108rpx;
	}
	.tip{
		color: $fontcolor3;
		padding-left: 60rpx;
		margin-top: 8rpx;
	}
	.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;
				}
			}
		}
	}
	.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;
		}
	}
	.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>