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

Merge branch 'main' of https://git.tsl3060.com/jgl/photo_uniapp

Browse Source
main
JING 8 months ago
parent 77603386fe ef95523691
commit 8245fd6423
3 changed files with 588 additions and 8 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. 352
      pagesA/merge/face_1.vue
  2. 233
      pagesA/merge/this.scss
  3. 11
      pagesA/photo/photo_1.vue

352
pagesA/merge/face_1.vue
Unescape View File

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

233
pagesA/merge/this.scss
Unescape View File

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

11
pagesA/photo/photo_1.vue
Unescape View File

@ -91,8 +91,13 @@
mounted() {
//this.getScreenSize();
//initListHeight();
//initListHeight(), ;
},
onLoad(){
this.getList();
},
methods: {
lower(){
console.log('this is lower')
@ -128,9 +133,7 @@
},1000)
},
onLoad(){
this.getList();
},
getListData(){
let list = [];

Write Preview
Loading…
Cancel
Save