111

pages.json

@@ -139,8 +139,17 @@
 					"navigationBarTitleText" : "上传图片",
 					"navigationStyle": "custom"
 				}
+			},
+			{
+				"path" : "merge/idcard",
+				"style" : 
+				{
+					"navigationBarTitleText" : "二寸证件照",
+					"navigationStyle": "custom"
+				}
 			}
 
+
 		]
 	}],
 	"globalStyle": {

pagesA/merge/face_1.vue

@@ -47,7 +47,7 @@
 
 
 				<view class="photo_main_face_4 photo_full_blue_btn" v-if="uploadFiles.length >=5" @tap="subFace()">
-					提交制作 0/30
+					提交制作
 				</view>
 
 				<view class="photo_main_face_5" v-if="errorFiles.length > 0">以下照片不合格，请重新上传</view>

pagesA/merge/idcard.vue

@@ -0,0 +1,162 @@
+<template>
+	<view>
+		<view class="content photo_back">
+			<custom_navbar :title="navbar_title" @getNavHeight="getNavHeight" :theme="theme" />
+			<view class="photo_main" :style="'margin-top:'+margin_top+'px'" style="width: 100%;margin-left: 0;">
+				<view class="idcard_1">
+					<image :src="selectedImg" />
+				</view>
+
+				<view class="idcard_2">
+					<view class="idcard_2_1">
+						<u-tabs :list="list1" lineWidth="30" lineColor="#5A8FFF" :activeStyle="{
+						              color: '#5A8FFF',
+						              fontWeight: 'bold',
+						              transform: 'scale(1.05)'
+						          }" :inactiveStyle="{
+						              color: '#999999',
+						              transform: 'scale(1)'
+						          }"></u-tabs>
+					</view>
+					
+					<view class="idcard_2_2">
+						<scroll-view class="idcard_2_2_1" 
+						enable-flex="true"
+						scroll-x="true"
+						scroll-with-animation="true">
+							<view style="overflow: hidden;" class="idcard_2_2_1_one" v-for="(item,key) in tem_list" :key="key" @tap="selectThis(key)">
+								<view class="idcard_2_2_1_one_1">
+									<image :src="item.url"/>
+								</view>
+								<view class="idcard_2_2_1_one_2" :style="key != selectedIndex ? 'display:none' : ''">
+									<view class="idcard_2_2_1_one_2_1">
+										<image src="/static/img/common/idcard_1.png"/>
+									</view>
+								</view>
+							</view>
+						</scroll-view>
+						 
+						
+					</view>
+				</view>
+			</view>
+
+
+
+		</view>
+
+
+
+	</view>
+</template>
+
+<script>
+	import custom_navbar from "../photo/components/photo_header.vue";
+	export default {
+		components: {
+			custom_navbar
+
+		},
+		data() {
+			return {
+				navbar_title: '二寸证件照',
+				theme: "white1",
+				margin_top: 10,
+				selectedImg:'',
+				selectedIndex:0,
+				list1: [{
+						id: 1,
+						name: '女装'
+					},
+					{
+						id: 2,
+						name: '男装'
+					},
+				],
+				tem_list: [{
+						id: 1,
+						url: '/static/img/index/banner.png'
+					},
+					{
+						id: 2,
+						url: 'https://img14.360buyimg.com/jdcms/s460x460_jfs/t1/234494/2/24198/178409/66a8aad1F59feafc5/41e6871120f47687.jpg'
+					},
+					{
+						id: 3,
+						url: '/static/img/index/banner.png'
+					},
+					{
+						id: 4,
+						url: 'https://img14.360buyimg.com/jdcms/s460x460_jfs/t1/234494/2/24198/178409/66a8aad1F59feafc5/41e6871120f47687.jpg'
+					},
+					{
+						id: 5,
+						url: '/static/img/index/banner.png'
+					},
+					{
+						id: 6,
+						url: 'https://img14.360buyimg.com/jdcms/s460x460_jfs/t1/234494/2/24198/178409/66a8aad1F59feafc5/41e6871120f47687.jpg'
+					},
+					{
+						id: 7,
+						url: '/static/img/index/banner.png'
+					},
+					{
+						id: 8,
+						url: 'https://img14.360buyimg.com/jdcms/s460x460_jfs/t1/234494/2/24198/178409/66a8aad1F59feafc5/41e6871120f47687.jpg'
+					},
+					{
+						id: 9,
+						url: '/static/img/index/banner.png'
+					},
+					{
+						id: 10,
+						url: 'https://img14.360buyimg.com/jdcms/s460x460_jfs/t1/234494/2/24198/178409/66a8aad1F59feafc5/41e6871120f47687.jpg'
+					},
+					{
+						id: 11,
+						url: '/static/img/index/banner.png'
+					},
+					{
+						id: 12,
+						url: 'https://img14.360buyimg.com/jdcms/s460x460_jfs/t1/234494/2/24198/178409/66a8aad1F59feafc5/41e6871120f47687.jpg'
+					},
+				]
+
+			}
+		},
+
+		mounted() {
+
+		},
+		onLoad() {
+
+		},
+		onShow() {
+			
+		},
+
+
+		methods: {
+
+			getNavHeight(e) {
+				this.margin_top += e;
+			},
+			selectThis(index){
+				this.selectedImg = this.tem_list[index].url;
+				this.selectedIndex = index;
+			}
+
+
+
+		}
+	}
+</script>
+
+<style lang="scss" scoped>
+	@import './this.scss';
+
+	.photo_back {
+		background-color: #F5F6FB;
+	}
+</style>

pagesA/merge/this.scss

@@ -230,4 +230,75 @@ image{
 	
 	
 	
+}
+
+
+// ----------------idcard
+.idcard_1{
+	width: 516rpx;
+	height: 720rpx;
+	margin: 100rpx auto;
+	
+}
+
+.idcard_2{
+	width: 100%;
+	background-color: #fff;
+	border-top-left-radius: 24rpx;
+	border-top-right-radius: 24rpx;
+	
+	
+	.idcard_2_1{
+		overflow: hidden;
+		margin: 40rpx auto;
+		margin-left: 20rpx;
+	}
+	
+	.idcard_2_2{
+		width: 725rpx;
+		height: 120rpx;		
+		margin-left: 24rpx;
+		
+		.idcard_2_2_1{
+			width: 100%;
+			height: 100%;
+			white-space: nowrap;
+			.idcard_2_2_1_one{
+				width: 104rpx;
+				height: 120rpx;
+				border-radius: 8rpx;
+				margin-right: 20rpx;
+				
+				display: inline-block;
+				
+				.idcard_2_2_1_one_1{
+					width: 100%;
+					height: 100%;
+					border-radius: 8rpx;
+					image{
+						border-radius: 8rpx;
+					}
+				}
+				
+				.idcard_2_2_1_one_2{
+					
+					margin-top: -120rpx;
+					margin-left: 0rpx;
+					width: 100%;
+					height: 100%;
+					background: rgba(0, 0, 0, 0.5);
+					position: relative;
+					// opacity: 0.5;
+					display: flex;
+					justify-content: center;
+					align-items: center;
+					border-radius: 8rpx;
+					.idcard_2_2_1_one_2_1{
+						width: 40rpx;
+						height: 40rpx;
+					}
+				}
+			}
+		}
+	}
 }

pagesA/photo/components/photo_header.vue

@@ -45,7 +45,9 @@ export default {
            	case 'white':
            	    this.thisBack = '#E3E8FE';
            	    break;	
-           		
+           	case 'white1':
+           	    this.thisBack = '#fff';
+           	    break;		
            	default :
            	this.thisBack = 'transparent';
            	
@@ -65,7 +67,9 @@ export default {
 			case 'white':
 			    this.thisBack = '#E3E8FE';
 			    break;	
-				
+			case 'white1':
+			    this.thisBack = '#fff';
+			    break;		
 			default :
 			this.thisBack = 'transparent';