Merge branch 'main' of https://git.tsl3060.com/jgl/photo_uniapp
JING
1 year ago
commit
8245fd6423
@ -1,22 +1,366 @@ |
|||||||
<template> |
<template> |
||||||
<view> |
<view> |
||||||
少时诵诗书所所所所所所 |
<view class="content "> |
||||||
|
<custom_navbar :title="navbar_title" @getNavHeight="getNavHeight" :theme="theme" /> |
||||||
|
<view class="photo_main_face" :style="'margin-top:-'+margin_top+'px'"> |
||||||
|
<view class="photo_main_face_head"></view> |
||||||
|
<view class="photo_main_face_1"> |
||||||
|
<image src="/static/img/photo/face_5.png" v-if="uploadFiles.length >=5"/> |
||||||
|
<image src="/static/img/photo/face_1.png" v-if="uploadFiles.length < 5"/> |
||||||
|
</view> |
||||||
|
<view class="photo_main_face_2"> |
||||||
|
<view class="photo_main_face_2_1">上传5-10张，有效照片越多，生成效果越好</view> |
||||||
|
<view class="photo_main_face_2_2"> |
||||||
|
<image src="/static/img/common/common_21.png" /> |
||||||
|
</view> |
||||||
|
</view> |
||||||
|
|
||||||
|
<view class="photo_main_face_3"> |
||||||
|
<view class="photo_main_face_3_one" v-for="(item,key) in successFiles" :key="key" :class="{ |
||||||
|
this_class_0:key==0, |
||||||
|
this_class_4:key==4, |
||||||
|
this_class_5:key==5, |
||||||
|
this_class_9:key==9 |
||||||
|
}"> |
||||||
|
<image :src="item" v-if="item" /> |
||||||
|
<view class="photo_main_face_3_one_icon" v-if="item" @tap="delPhoto(item)"> |
||||||
|
<image src="/static/img/common/common_22.png" /> |
||||||
|
</view> |
||||||
|
</view> |
||||||
|
</view> |
||||||
|
|
||||||
|
|
||||||
|
<u-upload :fileList="photoList" @afterRead="afterRead" @delete="deletePic" name="up1" :maxCount="1" |
||||||
|
v-if="uploadFiles.length < 10 && uploadFiles.length >= 1"> |
||||||
|
<view class="photo_main_face_4 " style="height: 88rpx;margin-left: 24rpx;margin-bottom: 0;"> |
||||||
|
<image src="/static/img/photo/face_7.png" /> |
||||||
|
</view> |
||||||
|
</u-upload> |
||||||
|
|
||||||
|
<!-- :fileList="photoList" @afterRead="afterRead" @delete="deletePic" name="1" :maxCount="5" --> |
||||||
|
<u-upload :fileList="photoList" @afterRead="afterRead" @delete="deletePic" name="up2" :maxCount="1" |
||||||
|
v-if="uploadFiles.length < 1"> |
||||||
|
<view class="photo_main_face_4 photo_full_blue_btn" style="margin-left: 24rpx;"> |
||||||
|
上传照片 |
||||||
|
</view> |
||||||
|
</u-upload> |
||||||
|
|
||||||
|
|
||||||
|
<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> |
||||||
|
<view class="photo_main_face_3" v-if="errorFiles.length > 0"> |
||||||
|
<view class="photo_main_face_3_one" v-for="n in 3" :key="n"> |
||||||
|
<image src="/static/img/index/banner.png" /> |
||||||
|
</view> |
||||||
|
</view> |
||||||
|
|
||||||
|
<view class="photo_main_face_6"> |
||||||
|
<image src="/static/img/photo/face_6.png" /> |
||||||
|
</view> |
||||||
|
|
||||||
|
</view> |
||||||
|
|
||||||
|
</view> |
||||||
|
|
||||||
|
|
||||||
|
<u-popup :show="show_1" mode="center" bgColor="transparent" :round="12"> |
||||||
|
<view class="show_readme_div"> |
||||||
|
<view class="show_readme_div_1"> |
||||||
|
服务说明 |
||||||
|
</view> |
||||||
|
<view class="show_readme_div_2"> |
||||||
|
<view>1.AI生成写真实际效果与您上传的照片有关，请认真上传。</view> |
||||||
|
<view>2.生成高峰期，可能会有排队情况，请耐心等候。</view> |
||||||
|
<view>3.如需更换写真人物, 请前往【我的】增加人物的面部档案。</view> |
||||||
|
</view> |
||||||
|
<view class="show_readme_div_3" @tap="subPhoto"> |
||||||
|
确认 |
||||||
|
</view> |
||||||
|
</view> |
||||||
|
</u-popup> |
||||||
|
|
||||||
|
|
||||||
</view> |
</view> |
||||||
</template> |
</template> |
||||||
|
|
||||||
<script> |
<script> |
||||||
|
import custom_navbar from "../photo/components/photo_header.vue"; |
||||||
|
import unit from "@/config/unit.js"; |
||||||
export default { |
export default { |
||||||
|
components: { |
||||||
|
custom_navbar |
||||||
|
|
||||||
|
}, |
||||||
data() { |
data() { |
||||||
return { |
return { |
||||||
|
navbar_title: '上传图片', |
||||||
|
theme: "blue", |
||||||
|
margin_top: 0, |
||||||
|
show_1: false, |
||||||
|
show_2: false, |
||||||
|
show_3: false, |
||||||
|
photoList: [], |
||||||
|
uploadFiles: [], |
||||||
|
successFiles: [], |
||||||
|
errorFiles: [] |
||||||
|
|
||||||
|
} |
||||||
|
}, |
||||||
|
|
||||||
|
mounted() { |
||||||
|
|
||||||
|
}, |
||||||
|
onPageScroll(e) { |
||||||
|
if (e.scrollTop > 50) { |
||||||
|
this.theme = 'white'; |
||||||
|
|
||||||
|
} else { |
||||||
|
|
||||||
|
this.theme = 'blue'; |
||||||
} |
} |
||||||
}, |
}, |
||||||
|
|
||||||
|
onShow() { |
||||||
|
var _this = this; |
||||||
|
_this.checkAuth(); |
||||||
|
this.setSuccessFiles(); |
||||||
|
console.log('~~~~~~~~~~~~~~~~~~') |
||||||
|
}, |
||||||
|
|
||||||
methods: { |
methods: { |
||||||
|
setSuccessFiles() { |
||||||
|
this.uploadFiles = uni.getStorageSync('ai_face_success'); |
||||||
|
|
||||||
|
console.log('&&&&&&&&&&&&&&&&&&&&&&&&&&', this.uploadFiles); |
||||||
|
if (!this.uploadFiles) { |
||||||
|
this.uploadFiles = []; |
||||||
|
} |
||||||
|
this.successFiles = []; |
||||||
|
this.uploadFiles.forEach((item, index) => { |
||||||
|
this.successFiles.push(item); |
||||||
|
}) |
||||||
|
console.log('&&&&&&&&&&&&&&&&&&&&&&&&&&', this.successFiles); |
||||||
|
let slen = this.successFiles.length; |
||||||
|
|
||||||
|
for (let n = slen; n < 10; n++) { |
||||||
|
this.successFiles.push(''); |
||||||
|
} |
||||||
|
|
||||||
|
}, |
||||||
|
|
||||||
|
delPhoto(url) { |
||||||
|
let tmp = uni.getStorageSync('ai_face_success'); |
||||||
|
if (tmp) { |
||||||
|
const index = tmp.indexOf(url); |
||||||
|
if (index !== -1) { |
||||||
|
tmp.splice(index, 1); |
||||||
|
} |
||||||
|
|
||||||
|
uni.setStorageSync('ai_face_success', tmp); |
||||||
|
this.setSuccessFiles(); |
||||||
|
} |
||||||
|
|
||||||
|
|
||||||
|
}, |
||||||
|
|
||||||
|
getNavHeight(e) { |
||||||
|
this.margin_top += e; |
||||||
|
}, |
||||||
|
|
||||||
|
subPhoto(){ |
||||||
|
let data = {}; |
||||||
|
data.tmp_id = ''; |
||||||
|
let imgs = uni.getStorageSync('ai_face_success'); |
||||||
|
if(imgs.length < 5){ |
||||||
|
this.$com.showError('请上传至少5张照片!') |
||||||
|
return false; |
||||||
|
} |
||||||
|
|
||||||
|
data.imgs = imgs; |
||||||
|
|
||||||
|
//提交申请 |
||||||
|
uni.redirectTo({ |
||||||
|
url:'/pagesA/photo/cartoon_4?from=photo' |
||||||
|
}) |
||||||
|
|
||||||
|
|
||||||
|
}, |
||||||
|
subFace(){ |
||||||
|
let data = {}; |
||||||
|
data.tmp_id = ''; |
||||||
|
let imgs = uni.getStorageSync('ai_face_success'); |
||||||
|
if(imgs.length < 5){ |
||||||
|
this.$com.showError('请上传至少5张照片!') |
||||||
|
return false; |
||||||
|
} |
||||||
|
|
||||||
|
data.imgs = imgs; |
||||||
|
|
||||||
|
this.show_1 = true; |
||||||
|
|
||||||
|
}, |
||||||
|
|
||||||
|
//判断 |
||||||
|
checkAuth() { |
||||||
|
var _this = this; |
||||||
|
console.log('已授权---'); |
||||||
|
uni.authorize({ |
||||||
|
scope: 'scope.camera', |
||||||
|
success(res) { |
||||||
|
console.log('已授权', res); |
||||||
|
|
||||||
|
}, |
||||||
|
fail(err) { |
||||||
|
|
||||||
|
uni.showModal({ |
||||||
|
title: '授权失败', |
||||||
|
content: '请在设置界面打开相摄像头关权限', |
||||||
|
success: (res) => { |
||||||
|
if (res.confirm) { |
||||||
|
uni.openSetting() |
||||||
|
} |
||||||
|
} |
||||||
|
}) |
||||||
|
}, |
||||||
|
}) |
||||||
|
}, |
||||||
|
|
||||||
|
async afterRead(event) { |
||||||
|
var _this = this; |
||||||
|
let lists = [].concat(event.file); |
||||||
|
|
||||||
|
|
||||||
|
uni.showLoading({ |
||||||
|
title: '图片上传中', |
||||||
|
}); |
||||||
|
|
||||||
|
for (let i = 0; i < lists.length; i++) { |
||||||
|
var edetail = lists[i].url; |
||||||
|
let filePath = edetail; |
||||||
|
let _date = new Date(); |
||||||
|
let ext_name = filePath.substr(filePath.lastIndexOf('.')); |
||||||
|
let address = _date.getFullYear() + '' + (_date.getMonth() + 1) + '' + _date.getDate(); |
||||||
|
let fileName = address + _date.getTime() + ext_name; |
||||||
|
const img_info = await unit.getImgInfo(filePath); |
||||||
|
|
||||||
|
let { |
||||||
|
width, |
||||||
|
height |
||||||
|
} = img_info; |
||||||
|
let maxWidth = 2480; |
||||||
|
if (width > maxWidth) { |
||||||
|
let scale = Math.ceil(width / maxWidth); |
||||||
|
height = Math.ceil(height / scale); |
||||||
|
width = Math.ceil(maxWidth); |
||||||
|
} |
||||||
|
let compress_path = ''; |
||||||
|
compress_path = await unit.compressImg(filePath, { |
||||||
|
compressedWidth: width |
||||||
|
}).catch((res) => { |
||||||
|
console.log('上传压缩失败', err); |
||||||
|
return false; |
||||||
|
}); |
||||||
|
compress_path = compress_path ? compress_path : filePath; |
||||||
|
|
||||||
|
//_this.upload_img(compress_path, fileName); |
||||||
|
//上传 |
||||||
|
var upData = { |
||||||
|
filePath: compress_path, |
||||||
|
fileType: 'image', |
||||||
|
scene: 'user_max' |
||||||
|
}; |
||||||
|
_this.$api.ossUpload(upData, function(res) { |
||||||
|
|
||||||
|
if (res.code == 200) { |
||||||
|
let url = res.data.file_url; |
||||||
|
url = _this.$api.ossurl(url); |
||||||
|
//开始验证图片 |
||||||
|
let checkData = { |
||||||
|
'url': url |
||||||
|
} |
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
// _this.$api.post('',checkData,function(rs){ |
||||||
|
|
||||||
|
// },function(err){ |
||||||
|
// console.log(err); |
||||||
|
// }); |
||||||
|
|
||||||
|
//验证成功 |
||||||
|
_this.uploadFiles = uni.getStorageSync('ai_face_success'); |
||||||
|
if (!_this.uploadFiles) { |
||||||
|
_this.uploadFiles = []; |
||||||
|
} |
||||||
|
if (_this.uploadFiles.length < 10) { |
||||||
|
|
||||||
|
_this.uploadFiles.push(url); |
||||||
|
|
||||||
|
uni.setStorageSync('ai_face_success', _this.uploadFiles); |
||||||
|
_this.setSuccessFiles(); |
||||||
|
} |
||||||
|
|
||||||
|
// _this.uploadFiles.push(url); |
||||||
|
|
||||||
|
|
||||||
|
//验证失败 |
||||||
|
//_this.errorFiles.push(url); |
||||||
|
|
||||||
|
|
||||||
|
} |
||||||
|
|
||||||
|
}, function(err) { |
||||||
|
console.log('ossUpload fail', err); |
||||||
|
_this.$com.showError('上传图片错误!!') |
||||||
|
|
||||||
|
}); |
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
} |
||||||
|
uni.hideLoading(); |
||||||
|
|
||||||
|
} |
||||||
|
|
||||||
} |
} |
||||||
} |
} |
||||||
</script> |
</script> |
||||||
|
|
||||||
<style> |
<style lang="scss" scoped> |
||||||
|
@import './this.scss'; |
||||||
|
|
||||||
|
.this_class_0 { |
||||||
|
border-top-left-radius: 20rpx; |
||||||
|
|
||||||
|
image { |
||||||
|
border-top-left-radius: 20rpx; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
.this_class_4 { |
||||||
|
border-top-right-radius: 20rpx; |
||||||
|
|
||||||
|
image { |
||||||
|
border-top-right-radius: 20rpx; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
.this_class_5 { |
||||||
|
border-bottom-left-radius: 20rpx; |
||||||
|
|
||||||
|
image { |
||||||
|
border-bottom-left-radius: 20rpx; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
.this_class_9 { |
||||||
|
border-bottom-right-radius: 20rpx; |
||||||
|
|
||||||
|
image { |
||||||
|
border-bottom-right-radius: 20rpx; |
||||||
|
} |
||||||
|
} |
||||||
</style> |
</style> |
||||||
@ -0,0 +1,233 @@ |
|||||||
|
.photo_main{ |
||||||
|
//background-color: #E3E8FE; |
||||||
|
|
||||||
|
width: 702rpx; |
||||||
|
margin-left: 24rpx; |
||||||
|
top: 0; |
||||||
|
left: 0; |
||||||
|
color: #000; |
||||||
|
overflow: hidden; |
||||||
|
} |
||||||
|
|
||||||
|
.photo_full_blue_btn{ |
||||||
|
background: linear-gradient(to right, #4F93FF, #9976FF); |
||||||
|
border-radius: 80rpx; |
||||||
|
color: #fff; |
||||||
|
font-size: 30rpx; |
||||||
|
font-weight: 500; |
||||||
|
display: flex; |
||||||
|
align-items: center; |
||||||
|
justify-content: center; |
||||||
|
overflow: hidden; |
||||||
|
} |
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
.photo_back { |
||||||
|
background-color: #E3E8FE; |
||||||
|
min-height: 100vh; |
||||||
|
width: 100%; |
||||||
|
top: 0; |
||||||
|
left: 0; |
||||||
|
height: 100%; |
||||||
|
overflow: hidden; |
||||||
|
} |
||||||
|
|
||||||
|
image{ |
||||||
|
width: 100%; |
||||||
|
height: 100%; |
||||||
|
} |
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
// ----------------face |
||||||
|
.photo_main_face{ |
||||||
|
margin-top: -40px; |
||||||
|
background-color: #fff; |
||||||
|
min-height: 100vh; |
||||||
|
width: 100%; |
||||||
|
top: 0; |
||||||
|
left: 0; |
||||||
|
height: 100%; |
||||||
|
overflow: hidden; |
||||||
|
|
||||||
|
.photo_main_face_head{ |
||||||
|
height: 400rpx; |
||||||
|
width: 100%; |
||||||
|
background: linear-gradient( 180deg, #D1DAFF 0%, rgba(209,218,255,0.6) 46%, rgba(254,254,255,0) 100%); |
||||||
|
} |
||||||
|
|
||||||
|
.photo_main_face_1{ |
||||||
|
width: 554rpx; |
||||||
|
height: 82rpx; |
||||||
|
margin: 40rpx auto; |
||||||
|
margin-top: -180rpx; |
||||||
|
} |
||||||
|
|
||||||
|
.photo_main_face_2{ |
||||||
|
width: 510rpx; |
||||||
|
margin: 20rpx auto; |
||||||
|
display: flex; |
||||||
|
justify-content: space-around; |
||||||
|
align-items: center; |
||||||
|
.photo_main_face_2_1{ |
||||||
|
color: #999999; |
||||||
|
font-size: 24rpx; |
||||||
|
} |
||||||
|
|
||||||
|
.photo_main_face_2_2{ |
||||||
|
width: 26rpx; |
||||||
|
height: 26rpx; |
||||||
|
margin-top: -13rpx; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
.photo_main_face_3{ |
||||||
|
width: 702rpx; |
||||||
|
margin: 30rpx auto; |
||||||
|
display: flex; |
||||||
|
flex-wrap: wrap; |
||||||
|
// justify-content: space-around; |
||||||
|
|
||||||
|
|
||||||
|
.photo_main_face_3_one{ |
||||||
|
width: 136rpx; |
||||||
|
height: 136rpx; |
||||||
|
// border-radius: 18rpx; |
||||||
|
border: solid 2rpx #EAE7F9; |
||||||
|
background-color: #F5F6FB; |
||||||
|
.photo_main_face_3_one_icon{ |
||||||
|
width: 26rpx; |
||||||
|
height: 26rpx; |
||||||
|
margin-top: -140rpx; |
||||||
|
margin-left: 100rpx; |
||||||
|
image{ |
||||||
|
border-radius: 0; |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
|
||||||
|
} |
||||||
|
|
||||||
|
.photo_main_face_4{ |
||||||
|
width:702rpx; |
||||||
|
height: 80rpx; |
||||||
|
margin: 40rpx auto; |
||||||
|
|
||||||
|
} |
||||||
|
|
||||||
|
.photo_main_face_5{ |
||||||
|
width: 702rpx; |
||||||
|
font-size: 28rpx; |
||||||
|
color: #333333; |
||||||
|
margin: 0rpx auto; |
||||||
|
font-weight: 400; |
||||||
|
} |
||||||
|
|
||||||
|
.photo_main_face_6{ |
||||||
|
width: 702rpx; |
||||||
|
height: 514rpx; |
||||||
|
margin: 80rpx auto; |
||||||
|
} |
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
} |
||||||
|
|
||||||
|
.show_readme_div{ |
||||||
|
width: 600rpx; |
||||||
|
height: 560rpx; |
||||||
|
border-radius: 24rpx; |
||||||
|
background: linear-gradient(to bottom, #D2DCFF 0%, #fff 20%); |
||||||
|
overflow: hidden; |
||||||
|
.show_readme_div_1{ |
||||||
|
color: #333333; |
||||||
|
font-size: 30rpx; |
||||||
|
font-weight: bold; |
||||||
|
width: 100%; |
||||||
|
display: flex; |
||||||
|
justify-content: center; |
||||||
|
margin-top: 48rpx; |
||||||
|
} |
||||||
|
.show_readme_div_2{ |
||||||
|
margin-top: 30rpx; |
||||||
|
color: #555555; |
||||||
|
font-size: 24rpx; |
||||||
|
width: 480rpx; |
||||||
|
overflow: hidden; |
||||||
|
margin-left:60rpx; |
||||||
|
line-height: 50rpx; |
||||||
|
} |
||||||
|
|
||||||
|
.show_readme_div_2_1{ |
||||||
|
display: flex; |
||||||
|
justify-content: space-between; |
||||||
|
width: 100%; |
||||||
|
|
||||||
|
} |
||||||
|
|
||||||
|
.show_readme_div_2_1_one{ |
||||||
|
width: 170rpx; |
||||||
|
display: flex; |
||||||
|
align-items: flex-end; |
||||||
|
.show_readme_div_2_1_one_1{ |
||||||
|
width: 150rpx; |
||||||
|
height: 150rpx; |
||||||
|
border-radius: 24rpx; |
||||||
|
flex-shrink: 0; |
||||||
|
image{ |
||||||
|
border-radius: 24rpx; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
.show_readme_div_2_1_one_2{ |
||||||
|
width: 40rpx; |
||||||
|
height: 34rpx; |
||||||
|
flex-shrink: 0; |
||||||
|
position: relative; |
||||||
|
right: 32rpx ; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
.show_readme_div_line{ |
||||||
|
width: 480rpx; |
||||||
|
|
||||||
|
margin-left:60rpx; |
||||||
|
|
||||||
|
display: flex; |
||||||
|
justify-content: space-between; |
||||||
|
align-items: center; |
||||||
|
|
||||||
|
} |
||||||
|
|
||||||
|
.show_readme_div_3{ |
||||||
|
width: 478rpx; |
||||||
|
height: 80rpx; |
||||||
|
margin-top: 44rpx; |
||||||
|
margin-left: 60rpx; |
||||||
|
border-radius: 48rpx; |
||||||
|
display: flex; |
||||||
|
justify-content: center; |
||||||
|
align-items: center; |
||||||
|
color:#fff; |
||||||
|
background: linear-gradient(to right, #4F93FF 0%, #9877FF 80%); |
||||||
|
} |
||||||
|
|
||||||
|
.show_readme_div_4{ |
||||||
|
width: 478rpx; |
||||||
|
height: 80rpx; |
||||||
|
margin-top: 44rpx; |
||||||
|
border: 2rpx solid #5093FF; |
||||||
|
color: #5093FF; |
||||||
|
border-radius: 48rpx; |
||||||
|
display: flex; |
||||||
|
justify-content: center; |
||||||
|
align-items: center; |
||||||
|
background-color: #fff; |
||||||
|
} |
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
} |
||||||
Loading…
Reference in new issue