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 58533716ed 24c826cc45
commit aa2b1e3727
2 changed files with 321 additions and 112 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. 37
      config/unit.js
  2. 396
      pagesA/photo/face.vue

37
config/unit.js
Unescape View File

@ -0,0 +1,37 @@
var unit ={
getImgInfo:function(filePath){
function getInfo(resolve, reject) {
uni.getImageInfo({
src: filePath,
success: function (image) {
resolve(image);
},
fail: (res) => {
reject(res);
},
});
}
return new Promise(getInfo);
},
compressImg:function(filePath, config = {}){
const { width = '', quality = 80 } = config;
return new Promise((resolve, reject) => {
uni.compressImage({
...config,
src: filePath,
success: (res) => {
resolve(res.tempFilePath);
},
fail: (res) => {
reject(res);
},
});
});
}
}
module.exports = unit

396
pagesA/photo/face.vue
Unescape View File

@ -21,131 +21,142 @@
this_class_5:n==5,
this_class_9:n==9
}">
<image src="/static/img/index/banner.png"/>
<image src="/static/img/index/banner.png" />
<view class="photo_main_face_3_one_icon">
<image src="/static/img/common/common_22.png"/>
<image src="/static/img/common/common_22.png" />
</view>
</view>
</view>
<view class="photo_main_face_4" style="height: 88rpx;">
<!-- <view class="photo_main_face_4" style="height: 88rpx;">
<image src="/static/img/photo/face_7.png" />
</view>
<view class="photo_main_face_4 photo_full_blue_btn">
上传照片
</view>
<view class="photo_main_face_4 photo_full_blue_btn">
-->
<u-upload
:fileList="photoList"
@afterRead="afterRead"
@delete="deletePic"
name="1"
multiple
:maxCount="10">
<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">
提交制作 0/30
</view>
</view> -->
<view class="photo_main_face_5">以下照片不合格，请重新上传</view>
<view class="photo_main_face_3">
<view class="photo_main_face_3_one" v-for="n in 3" >
<image src="/static/img/index/banner.png"/>
<view class="photo_main_face_3_one" v-for="n in 3">
<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">
确认
</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">
确认
</view>
</view>
</u-popup>
<u-popup :show="show_2" mode="center" bgColor="transparent" :round="12">
<view class="show_readme_div" style="height: 380rpx;">
<view class="show_readme_div_1">
提醒
<u-popup :show="show_2" mode="center" bgColor="transparent" :round="12">
<view class="show_readme_div" style="height: 380rpx;">
<view class="show_readme_div_1">
提醒
</view>
<view class="show_readme_div_2">
<view>目前系统还未存入您的面部档案信息，请先前往创建需要生成写真的面部档案</view>
</view>
<view class="show_readme_div_line">
<view class="show_readme_div_4" style="width: 220rpx;">
暂不生成
</view>
<view class="show_readme_div_2">
<view>目前系统还未存入您的面部档案信息，请先前往创建需要生成写真的面部档案</view>
<view class="show_readme_div_3" style="width: 220rpx;">
前往创建
</view>
<view class="show_readme_div_line">
<view class="show_readme_div_4" style="width: 220rpx;">
暂不生成
</view>
<view class="show_readme_div_3" style="width: 220rpx;">
前往创建
</view>
</view>
</u-popup>
<u-popup :show="show_3" mode="center" bgColor="transparent" :round="12">
<view class="show_readme_div" style="height: 440rpx;">
<view class="show_readme_div_1">
请选择需要生成写真的面部档案
</view>
<view class="show_readme_div_2" style="width: 520rpx;margin-left: 40rpx;">
<view class="show_readme_div_2_1">
<view class="show_readme_div_2_1_one">
<view class="show_readme_div_2_1_one_1">
<image src="../../static/img/index/banner.png" />
</view>
<view class="show_readme_div_2_1_one_2">
<image src="/static/img/common/photo_common_21.png" />
</view>
</view>
</view>
</view>
</u-popup>
<u-popup :show="show_3" mode="center" bgColor="transparent" :round="12">
<view class="show_readme_div" style="height: 440rpx;">
<view class="show_readme_div_1">
请选择需要生成写真的面部档案
</view>
<view class="show_readme_div_2" style="width: 520rpx;margin-left: 40rpx;">
<view class="show_readme_div_2_1">
<view class="show_readme_div_2_1_one">
<view class="show_readme_div_2_1_one_1">
<image src="../../static/img/index/banner.png"/>
</view>
<view class="show_readme_div_2_1_one_2">
<image src="/static/img/common/photo_common_21.png"/>
</view>
<view class="show_readme_div_2_1_one">
<view class="show_readme_div_2_1_one_1">
<image src="../../static/img/index/banner.png" />
</view>
<view class="show_readme_div_2_1_one_2">
<image src="/static/img/common/photo_common_21.png" />
</view>
<view class="show_readme_div_2_1_one">
<view class="show_readme_div_2_1_one_1">
<image src="../../static/img/index/banner.png"/>
</view>
<view class="show_readme_div_2_1_one_2">
<image src="/static/img/common/photo_common_21.png"/>
</view>
</view>
<view class="show_readme_div_2_1_one">
<view class="show_readme_div_2_1_one_1">
<image src="../../static/img/index/banner.png" />
</view>
<view class="show_readme_div_2_1_one">
<view class="show_readme_div_2_1_one_1">
<image src="../../static/img/index/banner.png"/>
</view>
<view class="show_readme_div_2_1_one_2">
<image src="/static/img/common/photo_common_21.png"/>
</view>
<view class="show_readme_div_2_1_one_2">
<image src="/static/img/common/photo_common_21.png" />
</view>
</view>
</view>
<view class="show_readme_div_line">
<view class="show_readme_div_4" style="width: 220rpx;">
暂不生成
</view>
<view class="show_readme_div_3" style="width: 220rpx;">
前往创建
</view>
</view>
<view class="show_readme_div_line">
<view class="show_readme_div_4" style="width: 220rpx;">
暂不生成
</view>
</view>
</u-popup>
<view class="show_readme_div_3" style="width: 220rpx;">
前往创建
</view>
</view>
</view>
</u-popup>
</view>
</template>
<script>
import custom_navbar from "./components/photo_header.vue";
import unit from "@/config/unit.js";
export default {
components: {
custom_navbar
@ -156,9 +167,10 @@
navbar_title: '上传图片',
theme: "blue",
margin_top: 0,
show_1:false,
show_2:false,
show_3:false
show_1: false,
show_2: false,
show_3: false,
photoList: [],
}
},
@ -167,22 +179,178 @@
},
onPageScroll(e) {
if (e.scrollTop > 50) {
this.theme = 'white';
} else {
this.theme = 'blue';
}
},
methods: {
if (e.scrollTop > 50) {
this.theme = 'white';
} else {
this.theme = 'blue';
}
},
onShow() {
var _this = this;
_this.checkAuth();
},
methods: {
getNavHeight(e) {
this.margin_top += e;
}
},
upPhoto() {
},
//判断
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);
console.log(lists);
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);
});
compress_path = compress_path ? compress_path : filePath;
console.log('&&&&&&&&&&',compress_path,fileName) ;
_this.upload_img(compress_path, fileName);
}
},
uploadFilePromise(url) {
},
async upload_img(filePath, fileName) {
var _this =this;
try {
uni.showLoading({
title: '图片上传中',
});
const { file_url = '' } = await photoUploadFile(filePath, fileName,'user_avatar')
.finally(() => {
uni.hideLoading();
})
.catch((res) => {
console.log('ossUploadFile==', res);
uni.$u.toast('图片上传失败!!');
});
if (!file_url) {
uni.$u.toast('图片上传失败!!!!!');
return;
}
console.log('success upload')
console.log(file_url);
_this.info.avatar = file_url;
_this.wxAvatar = [{url:ossurl(file_url, 'user_face')}];
updateUserInfo(_this.info).then(res => {
if (res.code != 200) {
uni.$u.toast(res.msg);
}
else
{
store.commit('userInfo/set_user_info', _this.info);
}
});
} catch (err) {
console.log('图片上传失败', err);
uni.$u.toast('上传照片失败~~');
}
},
loadData() {
},
async upload_img(filePath, fileName) {
var _this = this;
try {
uni.showLoading({
title: '图片上传中',
});
const {
file_url = ''
} = await photoUploadFile(filePath, fileName, 'user_avatar')
.finally(() => {
uni.hideLoading();
})
.catch((res) => {
console.log('ossUploadFile==', res);
uni.$u.toast('图片上传失败!!');
});
if (!file_url) {
uni.$u.toast('图片上传失败!!!!!');
return;
}
console.log('success upload')
console.log(file_url);
_this.info.avatar = file_url;
_this.wxAvatar = [{
url: ossurl(file_url, 'user_face')
}];
updateUserInfo(_this.info).then(res => {
if (res.code != 200) {
uni.$u.toast(res.msg);
} else {
store.commit('userInfo/set_user_info', _this.info);
}
});
} catch (err) {
console.log('图片上传失败', err);
uni.$u.toast('上传照片失败~~');
}
},
}
}
</script>
@ -192,28 +360,32 @@
.this_class_0 {
border-top-left-radius: 20rpx;
image{
image {
border-top-left-radius: 20rpx;
}
}
.this_class_4 {
border-top-right-radius: 20rpx;
image{
image {
border-top-right-radius: 20rpx;
}
}
.this_class_5 {
border-bottom-left-radius: 20rpx;
image{
image {
border-bottom-left-radius: 20rpx;
}
}
.this_class_9 {
border-bottom-right-radius:20rpx;
image{
border-bottom-right-radius: 20rpx;
image {
border-bottom-right-radius: 20rpx;
}
}

Write Preview
Loading…
Cancel
Save