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

更新

Browse Source
main
JING 8 months ago
parent b2214ee718
commit 77603386fe
2 changed files with 389 additions and 32 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. 421
      pagesA/merge/index.vue
  2. BIN
      static/img/index/select.png

421
pagesA/merge/index.vue
Unescape View File

@ -15,7 +15,7 @@
</view>
<view class="tabs_div">
<view class="tabs_div1">
<u-tabs @click="changeTab()" :current="this_tab" :list="list1" lineWidth="25" lineHeight="10"
:lineColor="`url(${lineBg}) 100% 100%`" :activeStyle="{
color: '#333333',
@ -24,7 +24,7 @@
}" :inactiveStyle="{
color: '#333333',
transform: 'scale(1)'
}" itemStyle="padding-left: 15; padding-right:15px; height: 100rpx; width:140rpx">
}" itemStyle="padding-left: 15; padding-right:15px; height: 100rpx; width:203rpx">
</u-tabs>
</view>
@ -37,17 +37,46 @@
lower-threshold="50">
<view class="photo_list_div_one" v-for="(item,key) in temList" :key="key" @tap="goThis(item.id)">
<view class="photo_list_div_one_img" >
<image
:src="item.url"
mode="aspectFill" />
</view>
<view class="photo_list_div_one_text">
{{item.title}}
</view>
</view>
<view class="listBox">
<view class="photoBox" v-for="(item,index) in temList" :key="index" @click="checkHave(item)">
<view class="photoTop">
<view class="topLeft">
<image :src="item.icon" mode="widthFix" @error="specsErr(index)"></image>
</view>
<view class="topCenter">
<view class="title">{{item.title}}</view>
<view class="desc">{{item.w_h_mm.w}}×{{item.w_h_mm.h}}mm | {{item.w_h_px.w}}×{{item.w_h_px.h}}px</view>
</view>
<view class="topRight">
<view class="distance">
<image src="/static/img/index/right.png" mode="widthFix"></image>
</view>
</view>
</view>
</view>
<view class="photoBox" @click="showEdit">
<view class="photoTop">
<view class="topLeft">
<image src="/static/img/index/zj_icon.png" mode="widthFix"></image>
</view>
<view class="topCenter">
<view class="title">自定义寸照</view>
<view class="desc">自己设置照片的宽和高</view>
</view>
<view class="topRight">
<view class="distance">
<image src="/static/img/index/right.png" mode="widthFix"></image>
</view>
</view>
</view>
</view>
</view>
</scroll-view>
@ -55,6 +84,92 @@
</view>
<u-popup :show="custom_show" :round="10" mode="center" bgColor="transparent" @close="close('custom_show')" @open="open('custom_show')">
<view class="popupBox">
<view class="popupTop">
自定义尺寸
</view>
<view class="popupDesc">
<view class="inputLine">
<view class="item1">尺寸(必填)</view>
<view class="item2">
<u-input
placeholder="宽"
border="surround"
v-model="value"
@change="change"
></u-input>
</view>
<view class="item3">x</view>
<view class="item4">
<u-input
placeholder="高"
border="surround"
v-model="value"
@change="change"
></u-input>
</view>
<view class="item5">PX</view>
</view>
<view class="inputLine">
<view class="item1">文件大小</view>
<view class="item2">
<u-input
placeholder="最小"
border="surround"
v-model="value"
@change="change"
></u-input>
</view>
<view class="item3">-</view>
<view class="item4">
<u-input
placeholder="最大"
border="surround"
v-model="value"
@change="change"
></u-input>
</view>
<view class="item5">KB</view>
</view>
</view>
<view class="popupBtn">
<view class="sbtnBox1 a1" @click="close('custom_show')">取消</view>
<view class="sbtnBox1 a2" @click="submit('custom_show')">确认</view>
</view>
</view>
</u-popup>
<u-popup :show="select_show" :round="10" mode="center" bgColor="transparent" @close="close('select_show')" @open="open('select_show')">
<view class="popupBox">
<view class="popupTop">
请选择需要生成写真的面部档案
</view>
<view class="popupDesc">
<scroll-view class="scrollBox" scroll-x="true" @scroll="scroll" scroll-left="0">
<view class="imgBox">
<image class="imgBg" src="/static/img/user/user.png" mode="widthFix"></image>
<image class="imgSelect" src="/static/img/index/select.png" mode="widthFix"></image>
</view>
<view class="imgBox">
<image class="imgBg" src="/static/img/user/user.png" mode="widthFix"></image>
</view>
<view class="imgBox">
<image class="imgBg" src="/static/img/user/user.png" mode="widthFix"></image>
</view>
</scroll-view>
</view>
<view class="popupBtn">
<view class="sbtnBox1 a1" @click="close('select_show')">取消</view>
<view class="sbtnBox1 a2" @click="submit('select_show')">确认</view>
</view>
</view>
</u-popup>
</view>
</template>
@ -87,15 +202,19 @@
curPage: 0,
total: 0,
temList:[]
temList:[],
//自定义弹窗
custom_show:false,
//选面部档案 弹窗
select_show:false,
}
},
mounted() {
//this.getScreenSize();
//initListHeight();
onLoad(){
this.getList();
},
methods: {
lower(){
console.log('this is lower')
@ -131,20 +250,73 @@
},1000)
},
onLoad(){
this.getList();
},
getListData(){
let list = [];
let n= 0;
for(n=0;n<10;n++){
let t = {};
t.url = 'https://img30.360buyimg.com/sku/jfs/t1/221254/4/39390/74349/661e039aF46114279/48532008a0001dd0.jpg'
t.id = '123';
t.title = '哈哈哈哈哈哈哈哈哈哈或或或哈哈哈哈哈哈哈哈哈哈或或或';
list.push(t);
}
let list = [
{
"id": 3,
"type": 1,
"ilk": 1,
"title": "大一寸照",
"icon": "https://resourcedev.aicverse.com/ai_tour/assets/static/images/map/scenic_HL.png",
"w_h_mm": {
"h": "48",
"w": "33"
},
"w_h_px": {
"h": "567",
"w": "390"
}
},
{
"id": 4,
"type": 1,
"ilk": 1,
"title": "小一寸照",
"icon": "https://resourcedev.aicverse.com/ai_tour/assets/static/images/map/scenic_HL.png",
"w_h_mm": {
"h": "32",
"w": "22"
},
"w_h_px": {
"h": "378",
"w": "260"
}
},
{
"id": 5,
"type": 1,
"ilk": 1,
"title": "三寸照",
"icon": "https://resourcedev.aicverse.com/ai_tour/assets/static/images/map/scenic_HL.png",
"w_h_mm": {
"h": "84",
"w": "55"
},
"w_h_px": {
"h": "992",
"w": "650"
}
},
{
"id": 6,
"type": 1,
"ilk": 1,
"title": "五寸生活照",
"icon": "https://resourcedev.aicverse.com/ai_tour/assets/static/images/map/scenic_HL.png",
"w_h_mm": {
"h": "127",
"w": "89"
},
"w_h_px": {
"h": "1500",
"w": "1050"
}
}
];
return {total:32,list:list};
},
@ -178,7 +350,36 @@
uni.navigateTo({
url:'/pagesA/photo/photo_2?id='+id
})
}
},
//证件照图片加载失败默认
specsErr(index)
{
this.temList[index].icon = '/static/img/index/zj_icon.png';
},
//自定义
showEdit(){
var _this = this;
_this.custom_show = true;
},
open(key) {
console.log('open',key);
},
close(key) {
var _this = this;
_this[key] = false;
},
//自定义 确认
submit(key){
var _this =this;
_this.close(key);
},
//判断选择
checkHave(item){
var _this = this;
_this.select_show = true;
},
}
@ -191,7 +392,11 @@
// page {
// //background-color: #E3E8FE !important;
// }
.tabs_div1{
width:700rpx;
margin: 10rpx auto;
}
.photo_back {
background-color: #E3E8FE;
min-height: 100vh;
@ -201,4 +406,156 @@
height: 100%;
overflow: hidden;
}
.listBox{ width: 100%; height: auto;}
.photoBox{
padding:20rpx 10rpx 10rpx 10rpx;
height: auto;
border-radius: 24rpx 24rpx 24rpx 24rpx;
opacity: 1;
background: #FFFFFF;
width: 670rpx;
margin: 15rpx auto;
}
.photoTop{width: 100%; height: auto; display: flex;
}
.photoTop .topLeft{
width: 100rpx;
height: 88rpx;
}
.topLeft image{ width: 60rpx; height: auto; margin-left: 14rpx;}
.photoTop .topCenter{
width: 400rpx;
height: auto;
padding-left: 18rpx;
}
.topCenter .title{
font-size: 30rpx;
font-weight: 400;
color:#333333;
line-height: 50rpx;
width: 100%;
overflow: hidden; //超出文本隐藏
white-space: nowrap; //不换行，只显示一行
text-overflow: ellipsis; //超出部分省略号显示
}
.topCenter .desc{
font-size: 24rpx;
color:#999999;
line-height: 30rpx;
width: 100%;
overflow: hidden; //超出文本隐藏
white-space: nowrap; //不换行，只显示一行
text-overflow: ellipsis; //超
}
.photoTop .topRight{
width: 160rpx;
height: auto;
text-align: right;
}
.topRight .distance{ color: #90A1AA; font-size: 24rpx; font-family: PingFang SC-Regular; padding-top: 20rpx;}
.topRight .distance image{ width: 32rpx; height: 32rpx; margin-right: 24rpx;}
.popupBox{
width: 600rpx;
height: auto;
border-radius: 24rpx;
background-color: #FFFFFF;
}
.popupTop{
width: 600rpx;
height: 140rpx;
background: linear-gradient(to bottom, #D3D5FF 20%, #FFFFFF 50%);
border-radius: 24rpx 24rpx 0rpx 0rpx;
line-height: 140rpx;
text-align: center;
font-weight: 700;
font-size: 30rpx;
color: #333333;
}
.popupBtn{ width: 100%; height: auto;
display: flex; flex-wrap: wrap;
justify-content: space-around; /* 使子元素在容器中均匀分布 */
align-items: center; /* 如果需要垂直居中子元素 */
}
.sbtnBox{
margin: 30rpx auto;
width: 478rpx;
height: 80rpx;
font-weight: 700;
font-size: 30rpx;
line-height: 80rpx;
border: 2rpx solid #4D94FF;
text-align: center;
border-radius: 44rpx;
}
.popupDesc{
width:560rpx;
font-weight: 400;
font-size: 28rpx;
color: #555555;
height: auto;
padding: 0rpx 20rpx;
}
.custom-input-height {
height: 40px !important;
min-height: 40px !important;
}
.inputLine{ width: 100%; height: 64rpx; display: flex; margin: 10rpx auto;}
.inputLine .item1{width: 200rpx; height: 64rpx; line-height: 64rpx;text-align: center;}
.inputLine .item2{width: 140rpx;}
::v-deep .item2 .u-input{height:64rpx; padding: 0rpx 10rpx !important; text-align: center !important;}
.inputLine .item3{width: 80rpx;text-align: center;height: 64rpx; line-height: 64rpx;}
.inputLine .item4{width: 140rpx;}
::v-deep .item4 .u-input{height:64rpx;padding: 0rpx 10rpx !important;text-align: center !important;}
.inputLine .item5{width: 80rpx; text-align: center;height: 64rpx; line-height: 64rpx;}
.sbtnBox1{
margin: 30rpx auto;
width: 226rpx;
height: 80rpx;
font-weight: 700;
font-size: 30rpx;
line-height: 80rpx;
border: 2rpx solid #4D94FF;
text-align: center;
border-radius: 44rpx;
}
.scrollBox {
width: 100%;
height: 160rpx;
white-space: nowrap;
}
.imgBox{width: 160rpx; height: 160rpx; position: relative; margin: 0rpx 0rpx 0rpx 20rpx; display: inline-block;}
.imgBox .imgBg{width: 160rpx; height: 160rpx; border-radius: 20rpx; position: absolute; left: 0; top: 0;}
.imgBox .imgSelect{width: 40rpx; height: 40rpx;position: absolute; bottom: 0; right: 0; z-index: 5;}
.a1{
background: linear-gradient( 270deg, rgba(46,87,241,0.15) 0%, rgba(131,88,246,0.15) 100%);
color:#7A74F0;
}
.a2{
background: linear-gradient( 270deg, #2E57F1 0%, #8358F6 100%);
color:#FFFFFF;
}
.a3{
background: linear-gradient( 270deg, #2E57F1 0%, #8358F6 100%);
color:#FFFFFF;
}
</style>

BIN
static/img/index/select.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 762 B

Write Preview
Loading…
Cancel
Save