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

1111

Browse Source
main
SD-20230427NBFT\Administrator 8 months ago
parent bb43554a4f
commit 2fc8b6dfff
1 changed files with 142 additions and 127 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. 269
      pagesA/photo/face.vue

269
pagesA/photo/face.vue
Unescape View File

@ -5,7 +5,8 @@
<view class="photo_main_face" :style="'margin-top:-'+margin_top+'px'"> <view class="photo_main_face" :style="'margin-top:-'+margin_top+'px'">
<view class="photo_main_face_head"></view> <view class="photo_main_face_head"></view>
<view class="photo_main_face_1"> <view class="photo_main_face_1">
<image src="/static/img/photo/face_1.png" /> <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>
<view class="photo_main_face_2"> <view class="photo_main_face_2">
<view class="photo_main_face_2_1">上传5-10张，有效照片越多，生成效果越好</view> <view class="photo_main_face_2_1">上传5-10张，有效照片越多，生成效果越好</view>
@ -15,40 +16,43 @@
</view> </view>
<view class="photo_main_face_3"> <view class="photo_main_face_3">
<view class="photo_main_face_3_one" v-for="n in 10" :class="{ <view class="photo_main_face_3_one" v-for="(item,key) in successFiles" :key="key" :class="{
this_class_0:n==0, this_class_0:key==0,
this_class_4:n==4, this_class_4:key==4,
this_class_5:n==5, this_class_5:key==5,
this_class_9:n==9 this_class_9:key==9
}"> }">
<image src="/static/img/index/banner.png" /> <image :src="item" v-if="item" />
<view class="photo_main_face_3_one_icon"> <view class="photo_main_face_3_one_icon" v-if="item" @tap="delPhoto(item)">
<image src="/static/img/common/common_22.png" /> <image src="/static/img/common/common_22.png" />
</view> </view>
</view> </view>
</view> </view>
<!-- <view class="photo_main_face_4" style="height: 88rpx;">
<image src="/static/img/photo/face_7.png" />
</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>
<u-upload :fileList="photoList" @afterRead="afterRead" @delete="deletePic" name="1" multiple <!-- :fileList="photoList" @afterRead="afterRead" @delete="deletePic" name="1" :maxCount="5" -->
:maxCount="10"> <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 class="photo_main_face_4 photo_full_blue_btn" style="margin-left: 24rpx;">
上传照片 上传照片
</view> </view>
</u-upload> </u-upload>
<!-- <view class="photo_main_face_4 photo_full_blue_btn"> <view class="photo_main_face_4 photo_full_blue_btn" v-if="uploadFiles.length >=5" @tap="subFace()">
提交制作 0/30 提交制作 0/30
</view> --> </view>
<view class="photo_main_face_5">以下照片不合格，请重新上传</view> <view class="photo_main_face_5" v-if="errorFiles.length > 0">以下照片不合格，请重新上传</view>
<view class="photo_main_face_3"> <view class="photo_main_face_3" v-if="errorFiles.length > 0">
<view class="photo_main_face_3_one" v-for="n in 3"> <view class="photo_main_face_3_one" v-for="n in 3" :key="n">
<image src="/static/img/index/banner.png" /> <image src="/static/img/index/banner.png" />
</view> </view>
</view> </view>
@ -72,7 +76,7 @@
<view>2.生成高峰期，可能会有排队情况，请耐心等候。</view> <view>2.生成高峰期，可能会有排队情况，请耐心等候。</view>
<view>3.如需更换写真人物, 请前往【我的】增加人物的面部档案。</view> <view>3.如需更换写真人物, 请前往【我的】增加人物的面部档案。</view>
</view> </view>
<view class="show_readme_div_3"> <view class="show_readme_div_3" @tap="subPhoto">
确认 确认
</view> </view>
</view> </view>
@ -166,9 +170,9 @@
show_2: false, show_2: false,
show_3: false, show_3: false,
photoList: [], photoList: [],
uploadFiles:[], uploadFiles: [],
successFiles:[], successFiles: [],
errorFiles:[] errorFiles: []
} }
}, },
@ -186,19 +190,84 @@
} }
}, },
onShow() { onShow() {
var _this = this; var _this = this;
_this.checkAuth(); _this.checkAuth();
this.setSuccessFiles();
}, },
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) { getNavHeight(e) {
this.margin_top += e; this.margin_top += e;
}, },
upPhoto() {
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() { checkAuth() {
var _this = this; var _this = this;
@ -227,11 +296,12 @@
async afterRead(event) { async afterRead(event) {
var _this = this; var _this = this;
let lists = [].concat(event.file); let lists = [].concat(event.file);
uni.showLoading({ uni.showLoading({
title: '图片上传中', title: '图片上传中',
}); });
_this.uploadFiles = [];
for (let i = 0; i < lists.length; i++) { for (let i = 0; i < lists.length; i++) {
var edetail = lists[i].url; var edetail = lists[i].url;
let filePath = edetail; let filePath = edetail;
@ -256,125 +326,70 @@
compressedWidth: width compressedWidth: width
}).catch((res) => { }).catch((res) => {
console.log('上传压缩失败', err); console.log('上传压缩失败', err);
return false;
}); });
compress_path = compress_path ? compress_path : filePath; compress_path = compress_path ? compress_path : filePath;
//_this.upload_img(compress_path, fileName); //_this.upload_img(compress_path, fileName);
//上传 //上传
var upData = {filePath:compress_path,fileType:'image',scene:'user_max'}; var upData = {
// _this.$api.ossUpload(upData, function(res) { filePath: compress_path,
// console.log('ossUpload success', res); fileType: 'image',
// if(res.code == 200){ scene: 'user_max'
// //_this.uploadFiles.push(res.data.file_url); };
// } _this.$api.ossUpload(upData, function(res) {
// // var d = res.data;
// // _this.info.avatar = d.file_url; if (res.code == 200) {
// // _this.uploadImg = [{ let url = res.data.file_url;
// // url: _this.$api.ossurl(d.file_url) url = _this.$api.ossurl(url);
// // }];; //开始验证图片
// }, function(err) { let checkData = {
// console.log('ossUpload fail', err); 'url': url
// }); }
// _this.$api.post('',checkData,function(rs){
} // },function(err){
uni.hideLoading(); // console.log(err);
console.log('***************',_this.uploadFiles) // });
},
uploadFilePromise(url) {
}, //验证成功
_this.uploadFiles = uni.getStorageSync('ai_face_success');
if (!_this.uploadFiles) {
_this.uploadFiles = [];
}
if (_this.uploadFiles.length < 10) {
_this.uploadFiles.push(url);
async upload_img(filePath, fileName) { uni.setStorageSync('ai_face_success', _this.uploadFiles);
var _this = this; _this.setSuccessFiles();
try { }
uni.showLoading({
title: '图片上传中',
});
const { // _this.uploadFiles.push(url);
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('上传照片失败~~');
} //验证失败
}, //_this.errorFiles.push(url);
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);
} }
}, function(err) {
console.log('ossUpload fail', err);
_this.$com.showError('上传图片错误!!')
}); });
} catch (err) {
console.log('图片上传失败', err);
uni.$u.toast('上传照片失败~~');
} }
}, uni.hideLoading();
}
} }
} }
</script> </script>

Write Preview
Loading…
Cancel
Save