You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
367 lines
9.1 KiB
367 lines
9.1 KiB
<template>
|
|
<view>
|
|
<view class="content photo_back">
|
|
<custom_navbar :title="navbar_title" @getNavHeight="getNavHeight" :theme="theme" />
|
|
<view class="photo_main" :style="'margin-top:'+margin_top+'px'">
|
|
<view class="photo_tem_1">
|
|
<view class="photo_tem_1_head">
|
|
<view class="photo_tem_1_head_1">
|
|
<image mode="aspectFill" :src="album.face"></image>
|
|
</view>
|
|
<view class="photo_tem_1_head_2">
|
|
<view class="photo_tem_1_head_2_1">{{album.title}}</view>
|
|
<view class="photo_tem_1_head_2_2">{{album.describe}}</view>
|
|
</view>
|
|
<view class="photo_tem_1_head_3">
|
|
<view class="y_btn">
|
|
免费
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<view class="photo_tem_1_2">
|
|
<u-swiper :list="album.back_image"
|
|
indicator indicatorMode="line"
|
|
circular
|
|
radius="24rpx"
|
|
height="880rpx"
|
|
|
|
></u-swiper>
|
|
</view>
|
|
|
|
</view>
|
|
|
|
<view class="photo_tem_2" v-if="show_btn" @click="checkHave">
|
|
使用模板生成
|
|
</view>
|
|
</view>
|
|
|
|
</view>
|
|
|
|
<u-popup :show="select_show" :round="10" mode="center" bgColor="transparent" @close="close('select_show')" @open="open('select_show')">
|
|
<view class="popupBox">
|
|
<view class="popupTop">
|
|
请选择需要生成写真的面部档案
|
|
</view>
|
|
<view class="popupDesc">
|
|
<scroll-view class="scrollBox" scroll-x="true" @scroll="scroll" scroll-left="0">
|
|
|
|
<view class="imgBox" v-for="(item,index) in selectList" :key="index" @click="selectPortrait(index,item)">
|
|
<image class="imgBg" :src="item.model_image_thumbnail" mode="widthFix"></image>
|
|
<image class="imgLoadingImg" src="/static/img/index/loading.gif" mode="widthFix" v-if="item.status != 3"></image>
|
|
<view class="imgLoadingTxt" v-if="item.status != 3">
|
|
<text v-if="item.status == 1">排队中</text>
|
|
<text v-if="item.status == 2">训练中</text>
|
|
<text v-if="item.status == 4">失败</text>
|
|
</view>
|
|
<image class="imgSelect" v-if="index == selectIndex" src="/static/img/index/select.png" mode="widthFix"></image>
|
|
</view>
|
|
|
|
|
|
</scroll-view>
|
|
</view>
|
|
<view class="popupBtn">
|
|
<view class="sbtnBox1 a1" @click="close('select_show')">取消</view>
|
|
<view class="sbtnBox1 a2" @click="submit('select_show')">确认</view>
|
|
</view>
|
|
</view>
|
|
</u-popup>
|
|
|
|
|
|
<u-popup :show="tips_show" :round="10" mode="center" bgColor="transparent" @close="close('tips_show')" @open="open('tips_show')">
|
|
<view class="popupBox">
|
|
<view class="popupTop">
|
|
提醒
|
|
</view>
|
|
<view class="popupDesc1">
|
|
<u-parse :content="content" :tagStyle="style"></u-parse>
|
|
|
|
</view>
|
|
<view class="popupBtn">
|
|
<view class="sbtnBox1 a1" @click="close('tips_show')">暂不生成</view>
|
|
<view class="sbtnBox1 a2" @click="submit('tips_show')">前往创建</view>
|
|
</view>
|
|
</view>
|
|
</u-popup>
|
|
|
|
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import custom_navbar from "./components/photo_header.vue";
|
|
export default {
|
|
components: {
|
|
custom_navbar
|
|
|
|
},
|
|
data() {
|
|
return {
|
|
navbar_title: 'AI写真',
|
|
theme: "white",
|
|
margin_top: 10,
|
|
album_id:0, //写真模版id
|
|
album:'',
|
|
portrait_id:0,
|
|
|
|
|
|
//选面部档案 弹窗
|
|
select_show:false,
|
|
//弹窗
|
|
tips_show: false,
|
|
content: `<p>目前系统还未存入您的面部档案信息，</p>
|
|
<p>请先前往创建需要生成写真的面部档案</p>
|
|
<p>创建成功后再次生成</p>`,
|
|
style: {
|
|
// 字符串的形式
|
|
|
|
p: 'font-weight: 400;font-size: 28rpx;color: #555555;line-height: 60rpx;',
|
|
|
|
},
|
|
|
|
//选择面部档案
|
|
selectList:[],
|
|
selectIndex:0,//默认选第一个
|
|
show_btn:false,
|
|
|
|
|
|
|
|
|
|
}
|
|
},
|
|
onLoad(option) {
|
|
//数据
|
|
var _this =this;
|
|
var id = option.id;
|
|
if(_this.$com.isNull(id))
|
|
{
|
|
uni.navigateBack({
|
|
delta:1,
|
|
})
|
|
}
|
|
_this.album_id = id;
|
|
_this.geAlbumtDetail();
|
|
//_this.getFace()
|
|
},
|
|
onShow() {
|
|
|
|
},
|
|
|
|
|
|
methods: {
|
|
|
|
getNavHeight(e) {
|
|
this.margin_top += e;
|
|
}
|
|
,
|
|
|
|
selectThis(index,id){
|
|
this.select_id = id;
|
|
this.select_index = index;
|
|
},
|
|
geAlbumtDetail()
|
|
{
|
|
var _this =this;
|
|
var post = {
|
|
id:_this.album_id,
|
|
};
|
|
_this.$api.get('api/album/details',post,function(rs){
|
|
console.log(rs);
|
|
var Data = rs;
|
|
Data.face = _this.$api.ossurl(Data.face);
|
|
var back_image = Data.back_image;
|
|
back_image.forEach((item, index) => {
|
|
back_image[index] = _this.$api.ossurl(item);
|
|
});
|
|
Data.back_image = back_image;
|
|
_this.album = Data;
|
|
_this.show_btn = true;
|
|
});
|
|
},
|
|
checkHave()
|
|
{
|
|
var _this =this;
|
|
_this.getPortraitList();
|
|
},
|
|
//获取面部档案
|
|
getPortraitList(){
|
|
var _this =this;
|
|
var post = {};
|
|
_this.$api.get('api/portrait/list', post, function(res) {
|
|
|
|
var d = res;
|
|
console.log(d);
|
|
if(d.length == 0)
|
|
{
|
|
_this.tips_show = true;
|
|
}
|
|
else
|
|
{
|
|
var selectList = d;
|
|
selectList.forEach((item, index) => {
|
|
selectList[index].model_image = item.model_image ? _this.$api.ossurl(item.model_image): '/static/img/index/p_bg.png';
|
|
selectList[index].model_image_thumbnail = item.model_image_thumbnail ? _this.$api.ossurl(item.model_image_thumbnail) : '/static/img/index/p_bg.png';
|
|
});
|
|
_this.selectList = selectList;
|
|
_this.selectIndex = 0;
|
|
_this.select_show = true;
|
|
}
|
|
});
|
|
},
|
|
//选择面部档案
|
|
selectPortrait(index,item)
|
|
{
|
|
var _this =this;
|
|
if(item.status == 3)
|
|
{
|
|
_this.selectIndex = index;
|
|
}
|
|
|
|
},
|
|
open(key) {
|
|
console.log('open',key);
|
|
},
|
|
close(key) {
|
|
var _this = this;
|
|
_this[key] = false;
|
|
|
|
},
|
|
//自定义 确认
|
|
submit(key){
|
|
var _this =this;
|
|
|
|
switch(key)
|
|
{
|
|
//显示提示信息 跳转到创建面部档案
|
|
case 'tips_show':
|
|
_this.close(key);
|
|
uni.navigateTo({
|
|
url:'/pagesA/merge/face_1'
|
|
});
|
|
break;
|
|
//选择面部档案 跳转到选择模板信息
|
|
case 'select_show':
|
|
_this.portrait_id = _this.selectList[_this.selectIndex].id;
|
|
_this.close(key);
|
|
var album_id = _this.album_id;
|
|
var portrait_id = _this.portrait_id;
|
|
var post = {
|
|
album_id:album_id,
|
|
portrait_id:portrait_id,
|
|
};
|
|
_this.$com.showLoading('保存图片中');
|
|
_this.$api.post('api/album/append', post,function(rs){
|
|
console.log(rs);
|
|
_this.$com.hideLoading();
|
|
uni.navigateTo({
|
|
url:"/pagesA/merge/success"
|
|
});
|
|
|
|
});
|
|
break;
|
|
|
|
}
|
|
|
|
|
|
|
|
},
|
|
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
@import './this.scss';
|
|
|
|
.popupBox{
|
|
width: 600rpx;
|
|
height: auto;
|
|
border-radius: 24rpx;
|
|
background-color: #FFFFFF;
|
|
}
|
|
.popupTop{
|
|
width: 600rpx;
|
|
height: 140rpx;
|
|
background: linear-gradient(to bottom, #D3D5FF 20%, #FFFFFF 50%);
|
|
border-radius: 24rpx 24rpx 0rpx 0rpx;
|
|
line-height: 140rpx;
|
|
text-align: center;
|
|
font-weight: 700;
|
|
font-size: 30rpx;
|
|
color: #333333;
|
|
}
|
|
|
|
.popupBtn{ width: 100%; height: auto;
|
|
display: flex; flex-wrap: wrap;
|
|
justify-content: space-around; /* 使子元素在容器中均匀分布 */
|
|
align-items: center; /* 如果需要垂直居中子元素 */
|
|
}
|
|
.sbtnBox{
|
|
margin: 30rpx auto;
|
|
width: 478rpx;
|
|
height: 80rpx;
|
|
font-weight: 700;
|
|
font-size: 30rpx;
|
|
line-height: 80rpx;
|
|
border: 2rpx solid #4D94FF;
|
|
text-align: center;
|
|
border-radius: 44rpx;
|
|
|
|
|
|
}
|
|
|
|
.popupDesc{
|
|
width:560rpx;
|
|
font-weight: 400;
|
|
font-size: 28rpx;
|
|
color: #555555;
|
|
height: auto;
|
|
padding: 0rpx 20rpx;
|
|
}
|
|
|
|
.popupDesc1{
|
|
width:480rpx;
|
|
font-weight: 400;
|
|
font-size: 28rpx;
|
|
color: #555555;
|
|
height: auto;
|
|
padding: 0rpx 60rpx;
|
|
}
|
|
|
|
.sbtnBox1{
|
|
margin: 30rpx auto;
|
|
width: 226rpx;
|
|
height: 80rpx;
|
|
font-weight: 700;
|
|
font-size: 30rpx;
|
|
line-height: 80rpx;
|
|
border: 2rpx solid #4D94FF;
|
|
text-align: center;
|
|
border-radius: 44rpx;
|
|
|
|
}
|
|
.scrollBox {
|
|
width: 100%;
|
|
height: 160rpx;
|
|
white-space: nowrap;
|
|
|
|
}
|
|
.imgBox{width: 160rpx; height: 160rpx; position: relative; margin: 0rpx 0rpx 0rpx 20rpx; display: inline-block; overflow: hidden;}
|
|
.imgBox .imgBg{width: 160rpx; height: 160rpx; border-radius: 20rpx; position: absolute; left: 0; top: 0;}
|
|
.imgBox .imgLoadingImg{ width: 60rpx; height: 60rpx;position: absolute; left: 50rpx; top: 40rpx;}
|
|
.imgBox .imgLoadingTxt{ width: 100%; height: 40rpx; text-align: center; color:#FFFFFF; font-size: 24rpx;position: absolute; top: 100rpx;}
|
|
.imgBox .imgSelect{width: 40rpx; height: 34rpx;position: absolute; bottom: 0; right: 0; z-index: 5;}
|
|
.a1{
|
|
background: linear-gradient( 270deg, rgba(46,87,241,0.15) 0%, rgba(131,88,246,0.15) 100%);
|
|
color:#7A74F0;
|
|
}
|
|
.a2{
|
|
background: linear-gradient( 270deg, #2E57F1 0%, #8358F6 100%);
|
|
color:#FFFFFF;
|
|
}
|
|
.a3{
|
|
background: linear-gradient( 270deg, #2E57F1 0%, #8358F6 100%);
|
|
color:#FFFFFF;
|
|
}
|
|
|
|
</style> |