jp-xqjy/pages/login/step4.vue

<template>
	<view>
		<u-navbar :background="background" :border-bottom="false"></u-navbar>
		<view class="jpLogin">
			<view class="jpLogin-title">
				<h2>上传您的头像 <span>4</span>/4</h2>
				<p>选择一张你的优质照片作为头像吧~</p>
			</view>
			<view class="jpLogin-main">
				<view class="jpLogin-upload" @click="uploadPhoto">
					<u-image class="newsList-img" src="/static/img/head.png" height="320" width="320" border-radius="10"></u-image>
				</view>
				<p>点击上传头像</p>
				<view class="jpLogin-case">
					<view class="jpLogin-case-item">
						<u-image class="newsList-img" src="/static/img/user1.jpg" height="170" width="170" border-radius="10"></u-image>
					</view>
					<view class="jpLogin-case-item">
						<u-image class="newsList-img" src="/static/img/user4.jpg" height="170" width="170" border-radius="10"></u-image>
					</view>
					<view class="jpLogin-case-item">
						<u-image class="newsList-img" src="/static/img/user3.jpg" height="170" width="170" border-radius="10"></u-image>
					</view>
				</view>
			</view>
			<view style="margin-top: 60px;">
				<u-button type="error" shape="circle" :custom-style="customStyle" @click="formsubmit">确认提交</u-button>
				<view class="step-btn" @click="previous">返回上一步</view>
			</view>
		</view>
	</view>
</template>

<script>
	let _self;
	import * as loginApi from '@/apis/login.js'
	import { pathToBase64, base64ToPath } from '../../utils/image-tools/index.js'
	export default {
		data() {
			return { 
				personal_info:{},
				action: 'http://www.example.com/upload',
				fileList: [
					{
						url: 'http://pics.sc.chinaz.com/files/pic/pic9/201912/hpic1886.jpg',
					}
				],
				background:{
					background: 'none'
				}
			} 
		},
		onLoad(){
			_self = this;
			_self.get_options();
		},
		onReady(){
			_self.get_options();
		},
		methods:{
			uploadPhoto(){
			    // 上传图片
				const ctx = uni.createCanvasContext('myCanvas');
				//console.log('url'+this.uploadUrl)
				let _this = this;
			    uni.chooseImage({
			        count: 5, //默认9
			        // sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
			        sourceType: ['album','camera'], //从相册选择
			        success:(res)=> {
			            let imgFile = res.tempFilePaths;
						
						for(let i = 0;i < imgFile.length;i++)
						{
							 
							pathToBase64(imgFile[i])
							  .then(base64 => { 
								  let data = {photoName:imgFile[i],photoBase64Data: base64};
								  console.log('图片数据'+JSON.stringify(data));
								  let ret = loginApi.uploadFile(data).then(function(res){
								  	console.log('result1' + JSON.stringify(res));
								  	if(res.statusCode == 200)
								  	{
								  		let imgUrls = JSON.parse(res.data) //百度支持 this.site_url +'/' +
								  		//let image ={src: imgUrls.data.filePath,fileId:imgUrls.data.fileId};
								  		 
								  		_this.fileList.push(imgUrls); //微信
								  		  
								  	}
								  },function(err){
								  	console.log('上传图片失败'+JSON.stringify(err))
								  }) 
							  })
							  .catch(error => {
							    console.error(error)
							  })   
							
						}
			        },
			    }); 
			},
			get_options(){
				console.log('get options')
				// #ifdef APP-NVUE
				 const eventChannel = this.$scope.eventChannel; // 兼容APP-NVUE
				 // #endif
				 // #ifndef APP-NVUE
				 const eventChannel = this.getOpenerEventChannel();
				 // #endif
				 eventChannel.on('acceptDataFromOpenerPage', function(data) {
					 _self.personal_info = data;
					 console.log('options'+JSON.stringify(data))
				});
			},
			previous(){
				uni.navigateBack({
					deta:1
				})
			},
			formsubmit(){
				 
			}	  
 
		}
	}
</script>

<style lang="scss" scoped>
	.jpLogin {
		background: url(/static/img/loginBg.png) top center no-repeat;
		background-size: 100%;
		min-height: 100vh;
		padding: 50px;
		margin-top: -44px;
	}
	.step-btn {
		text-align: center;
		margin-top: 20px;
		color: #444953;
	}
	.jpLogin-title {
		h2 {
			font-size: 24px;
			font-weight: normal;
		}
		span{
			color: #FF5E5E;
			margin-left: 5px;
		}
		p {
			color: #777;
			font-size: 14px;
			margin-top: 3px;
		}
	}

	.jpLogin-main {
		margin-top: 40px;
		p{
			font-size: 16px;
			color:#958F90;
			text-align: center;
			margin: 10px 0 60px;
		}
	}
	.jpLogin-case{
		display: flex;
		justify-content: space-between;
	}
	.jpLogin-upload{
		border: 1px dashed #FFA199;
		border-radius: 12px;
		overflow: hidden;
		width: 160px;
		margin: 0 auto;
		p{
			margin-top: 5px;
		}
	}
</style>