jgl
/
photo_uniapp
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

111

Browse Source
main
SD-20230427NBFT\Administrator 8 months ago
parent e8edd9c9db
commit fa651cdfda
6 changed files with 249 additions and 3 deletions
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Show Stats Download Patch File Download Diff File
  1. 9
      pages.json
  2. 2
      pagesA/merge/face_1.vue
  3. 162
      pagesA/merge/idcard.vue
  4. 71
      pagesA/merge/this.scss
  5. 8
      pagesA/photo/components/photo_header.vue
  6. BIN
      static/img/common/idcard_1.png

9
pages.json
Unescape View File

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

2
pagesA/merge/face_1.vue
Unescape View File

@ -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>

162
pagesA/merge/idcard.vue
Unescape View File

@ -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>

71
pagesA/merge/this.scss
Unescape View File

@ -231,3 +231,74 @@ 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;
}
}
}
}
}
}

8
pagesA/photo/components/photo_header.vue
Unescape View File

@ -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';

BIN
static/img/common/idcard_1.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.6 KiB

Write Preview
Loading…
Cancel
Save