jgl
/
photo_uniapp
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity
合成照相馆小程序
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
61 Commits
2 Branches
0 Tags
8.3 MiB
 
 
 
Tag: Branch: Tree: 93d3048474
Branches Tags
${ item.name }
Create tag ${ searchTerm }
Create branch ${ searchTerm }
from '93d3048474'
${ noResults }
photo_uniapp/pagesA/merge/index.vue

627 lines
16 KiB
Raw Blame History

<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'">
<view class="search_div" style="margin-top: 20rpx;">
<view class="search_div_1">
<image src="/static/img/common/search_icon.png" />
</view>
<view class="search_div_2">
<u--input placeholder="请输入搜索内容" border="none" v-model="search_text"></u--input>
</view>
<view class="search_div_3" @tap="goSearch">搜索</view>
</view>
<view class="tabs_div1">
<u-tabs @click="changeTab()" :current="this_tab" :list="tabList" lineWidth="25" lineHeight="10"
:lineColor="`url(${lineBg}) 100% 100%`" :activeStyle="{
color: '#333333',
fontWeight: 'bold',
transform: 'scale(1.2)'
}" :inactiveStyle="{
color: '#333333',
transform: 'scale(1)'
}" itemStyle="padding-left: 15; padding-right:15px; height: 100rpx; width:203rpx">
</u-tabs>
</view>
<scroll-view class="photo_list_div"
enable-flex="true"
scroll-y="true"
scroll-with-animation="true"
@scrolltolower="lower"
lower-threshold="50">
<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" v-if="!(item.w_h_mm.w == 0 && item.w_h_mm.h == 0 && item.w_h_px.w == 0 && item.w_h_px.h == 0)">{{item.w_h_mm.w}}×{{item.w_h_mm.h}}mm | {{item.w_h_px.w}}×{{item.w_h_px.h}}px</view>
<view class="desc" v-else>自己设置照片的宽和高</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>
</view>
</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>
<u-popup :show="tips_show" :round="10" mode="center" bgColor="transparent" @close="close('tips_show')" @open="open('tips_show')">
<view class="popupBox">
<view class="popupTop">
提醒
</view>
<view class="popupDesc1">
<u-parse :content="content" :tagStyle="style"></u-parse>
</view>
<view class="popupBtn">
<view class="sbtnBox1 a1" @click="close('tips_show')">暂不生成</view>
<view class="sbtnBox1 a2" @click="submit('tips_show')">前往创建</view>
</view>
</view>
</u-popup>
</view>
</template>
<script>
import custom_navbar from "../photo/components/photo_header.vue";
export default {
components: {
custom_navbar
},
data() {
return {
navbar_title: '证件照合成',
theme: "white",
search_text: '', //搜索关键词
margin_top: 0,
lineBg: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACYAAAAOCAYAAABDwm71AAAAAXNSR0IArs4c6QAAAm5JREFUSEu1lD1oFEEUx39vZhOCpghikUIwkMKAjYWFEEELQdQTRfwqLGyMgsFcNDEWEbYQNB+Sw7ugdilSBDQ2tikSsFCwsBFiIVikSBEwQoRLuMzT3ds9z8vtXcjHwOzCzs57v/ef/xshGmdeaLsVUgZQYeZ9t3yN13bz/bpf2wVSYQ7DTNdQMa8Ej1RO76JkRPBQ8JS8OAbfpeX5bkLlHumAcTyxihcIAuSBvlsjMi7nc3pY4TPQFJIq2GiKY3TpF49nfQk27NjwffX25RkzSreJckVggS4FhQ5JZbVHhEwpaxlYsMk4PjYYbk6m5dtOkGUG9ZBzTFjHsUCASrAgh0I6BKMMrFyxeJN15A28susMTTyUxa0A+v3auqeRHqP0GcWLTyURLDL9fOivCHfDpljFAFCZ8oS3P38z98aXlVqQvq/N4jjhKddNcYZApYKrK5ZXw9HQ/OfG9YEoo5UeK1VTcbwhuKPwN9m8VeYNLHqO5cAnxtFs4YBxdFilw4BnXdG3teLFHgO6Q/PHFZ/N6QUDU6I0JSpWL3iVAsrsUA8sr3Cja0SmS9dF6S7LameDMmmgrW6FtSCKTVNUiVDdeootoFy+PSqfYpaSYvGHi2PaIoaXhtAT/wXcFqyrfpQCE2ur9PZmZLncrxvA4sVLWe206+SscqSqWberGHwRSN97KnPVGigRLP75akZPNzjSxnHKgrdlFYuKFQzMWMez+wlAiUeZ1P5XhrV1r+GacZy0cNwo+2s2yT+PLXmOD1aZlTWmB4ZlYTP3YF3FkoLc8bVNGjkYNUqLB82R0VeMY9kTfqw6vg/7mwOpzPMHTiZrgwPNrpsAAAAASUVORK5CYII=',
// 1：普通寸照，2：考试寸照，3：社会寸照
tabList: [{
type:1,
name: '普通寸照'
}, {
type:2,
name: '考试寸照',
},
{
type:3,
name: '社会寸照',
}],
this_tab:0,
curPage: 0,
total: 0,
temList:[],
//自定义弹窗
custom_show:false,
//选面部档案 弹窗
select_show:false,
//弹窗
tips_show: false,
content: `<p>目前系统还未存入您的面部档案信息，</p>
<p>请先前往创建需要生成写真的面部档案</p>
<p>创建成功后再次生成</p>`,
style: {
// 字符串的形式
p: 'font-weight: 400;font-size: 28rpx;color: #555555;line-height: 60rpx;',
},
}
},
onLoad(){
this.getList();
},
methods: {
lower(){
console.log('this is lower')
this.loadMore();
},
loadMore() {
let isLoad = Math.ceil(this.total / 10) > this.curPage;
if (isLoad) {
this.getList();
}
},
getNavHeight(e) {
this.margin_top += e;
},
goSearch() {
this.total =0;
this.temList=[];
this.curPage = 0;
this.getList();
},
changeTab(e) {
this.this_tab = e.index;
this.total =0;
this.temList = [];
this.curPage = 0;
let that = this;
setTimeout(function(){
that.getList();
},1000)
},
getListData(){
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};
},
getList(){
var _this =this;
var post = {
title:_this.search_text,
type:_this.tabList[_this.this_tab].type,
page:_this.curPage + 1,
limit: 10,
};
_this.$api.get('api/specs/list', post, function(res) {
var d = res;
console.log(d);
_this.curPage = post.page;
_this.total = d.total;
_this.temList = _this.temList.concat(d.data);
});
},
goThis(id){
uni.navigateTo({
url:'/pagesA/photo/photo_2?id='+id
})
},
//证件照图片加载失败默认
specsErr(index)
{
this.temList[index].icon = '/static/img/index/zj_icon.png';
},
//自定义
showEdit(item){
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);
if(key == 'tips_show')
{
uni.navigateTo({
url:'/pagesA/merge/face_1'
})
}
},
//判断选择
checkHave(item){
var _this = this;
if(!(item.w_h_mm.w == 0 && item.w_h_mm.h == 0 && item.w_h_px.w == 0 && item.w_h_px.h == 0))
{
var post = {};
_this.$api.get('api/portrait/list', post, function(res) {
var d = res;
console.log(d);
if(d.length == 0)
{
_this.tips_show = true;
}
else
{
_this.select_show = true;
}
});
}
else
{
_this.showEdit(item);
}
},
}
}
</script>
<style lang="scss" scoped>
@import '../photo/this.scss';
// page {
// //background-color: #E3E8FE !important;
// }
.tabs_div1{
width:700rpx;
margin: 10rpx auto;
}
.photo_back {
background-color: #E3E8FE;
min-height: 100vh;
width: 100%;
top: 0;
left: 0;
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;
}
.popupDesc1{
width:480rpx;
font-weight: 400;
font-size: 28rpx;
color: #555555;
height: auto;
padding: 0rpx 60rpx;
}
.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: 34rpx;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>