jp-employment-kfq/pages/buytickets/confirm.vue

<template>
	<view>
		<car-common   ref="common"></car-common>
		
		<u-navbar title="确认身份"  :is-back="noback">
			<view class="slot-wrap"></view>
			<view class="navbar-right"  @click="gotoHome" v-if="!noback" >
				<u-icon name="home-fill" color="#999" size="28"></u-icon>
				<span >前往首页</span>
			</view>
		</u-navbar>
		
		<view class="confirm">
		
			<h3 v-if="list.length">请选择购票人的照片？</h3>
			<p v-show="!num">一位乘客仅需选择一张照片</p>
			<p v-show="num">如需为您的同伴购票请同时选中Ta的照片</p>
			<view class="confirm-pic" v-if="list.length">
				<template v-for="item in list">
					<view class="confirm-pic-item "   :class="item.ck?'active':''" @click="ckBtn(item)" >
						<img :src="item.imageUrl+'?x-oss-process=image/resize,h_800,m_lfit/auto-orient,1'" alt="">	
					</view>
				</template>	 
			</view>
		</view>
		 
		<view class="upload-button" >
			<view class="reset-btn" @click="upBusNoTicketList">
				<u-icon name="shuaxin" custom-prefix="custom-icon" color="#2979ff" size="36"></u-icon>
			</view>
			
			<view class="submit-btn" v-show="num">
				<u-button type="primary" shape="circle" @click="submit">确定</u-button>
			</view>
			
			<view class="submit-btn" v-show="!num">
				<u-button class="gray-btn" type="default" shape="circle" >请选择</u-button>
			</view>
		</view>
	</view>
</template>

<script>
	import api from './confirm.js'
	export default api;
</script>

<style scoped lang="scss">
	.confirm{
		margin-top: 20px;
		.confirm-img{
			height: 240px;
			width: 240px;
			border-radius: 50%;
			overflow: hidden;
			border:4px solid #1677ff;
			img{
				height: 100%;
				width: 100%;
			}
		}
		.confirm-img-border{
			border: 2px solid #fff;
			height: 244px;
			width: 244px;
			border-radius: 50%;
		}
		.confirm-img-border2{
			border: 2px solid #7fb4ff;
			height: 248px;
			width: 248px;
			border-radius: 50%;		
			margin: 50px auto 20px;
		}
		.confirm-img-border3{
			border: 2px solid #ffb8b8;
			height: 248px;
			width: 248px;
			border-radius: 50%;		
			margin: 50px auto 20px;
			.confirm-img{
				border-color:#ff6666;
			}
		}
		h3{
			text-align: center;
			font-size: 18px;
		}
		p{
			color:#999;text-align: center;
			margin-top: 10rpx;
		}
	}	
	.navbar-right {
			display: flex;
			margin-right: 20rpx;
			span{
				color:rgb(96, 98, 102);
				margin-left: 3px;
			}
		}
		.slot-wrap {
				display: flex;
				align-items: center;
				flex: 1;
			}
	.confirm-pic{
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		padding: 20px;
		margin-bottom: 30px;
		.confirm-pic-item{
			height:100px;
			width: 100px;
			border-radius: 50%;
			overflow: hidden;
			border: 3px solid #fff;
			margin-bottom: 10px;
			margin-right: 17px;
			&:nth-child(3n+0){
				margin-right: 0;
			}
			&.active{
				border: 3px solid #1677ff;
			}
			img{
				height: 100%;
				width: 100%;
			}
		}
	}
	
	.upload-button{
		position: fixed;
		left: 30rpx;
		bottom:30rpx;
		right: 30rpx;
		display: flex;
		.reset-btn{
			height: 40px;
			width: 40px;
			border-radius: 50%;
			text-align: center;
			line-height: 40px;
			border: 1px solid #eee;
			margin-right: 10px;
		}
		.submit-btn{
			flex: 1;
			.gray-btn{
				background-color: #bfbfbf;
				color:#fff;
				border-color: #bfbfbf;
			}
		}
	}
</style>