SD-20230427NBFT\Administrator
8 months ago
parent
b2214ee718
commit
ef95523691
@ -1,22 +1,366 @@ |
||||
<template> |
||||
<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> |
||||
</template> |
||||
|
||||
<script> |
||||
import custom_navbar from "../photo/components/photo_header.vue"; |
||||
import unit from "@/config/unit.js"; |
||||
export default { |
||||
components: { |
||||
custom_navbar |
||||
|
||||
}, |
||||
data() { |
||||
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: { |
||||
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> |
||||
|
||||
<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; |
||||
|
||||
</style> |
||||
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> |
||||
@ -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