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.
597 lines
15 KiB
597 lines
15 KiB
<template>
|
|
<view>
|
|
<custom_navbar :title="navbar_title" @getNavHeight="getNavHeight" :theme="theme" left="false" />
|
|
<view class="header" :style="'margin-top:-'+margin_top+'px'">
|
|
<image class='background' src="/static/img/user/topbg.png" mode="aspectFill"></image>
|
|
<view class="userInfo">
|
|
<view class="uleft">
|
|
<u-image :src="info.avatar" width="48px" height="48px" radius="50%" @error="imgErr"></u-image>
|
|
</view>
|
|
<view class="ucenter">
|
|
<view class="name"><text class="username">{{info.nick_name}}</text><!-- <text class="level">等级</text> --></view>
|
|
</view>
|
|
<view class="uright">
|
|
<view class="change" @click="goTo('/pages/user/account/index')">
|
|
<image src="/static/img/user/setting.png" mode="widthFix"></image>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
|
|
<view class="boxBg">
|
|
<image class='box_bg' src="/static/img/user/boxbg.png" mode="aspectFill"></image>
|
|
<view class="mbBox">
|
|
<view class="mleft">
|
|
<view class="mb_title">面部档案</view>
|
|
<view class="mb_desc">分享可解锁新面部档案</view>
|
|
</view>
|
|
<view class="mright">
|
|
<view class="mbItem" v-for="(item,index) in portraitList" :key="index">
|
|
<image v-if="item.can == true" :src="item.image" mode="widthFix" @click="goTo('/pages/user/archives/detail?id='+item.id)"></image>
|
|
<image v-if="item.can == false" :src="item.image" mode="widthFix"></image>
|
|
</view>
|
|
<!-- <view class="mbItem">
|
|
<image src="/static/img/user/have_no.png" mode="widthFix"></image>
|
|
</view>
|
|
<view class="mbItem">
|
|
<image src="/static/img/user/have_no.png" mode="widthFix"></image>
|
|
</view> -->
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
</view>
|
|
|
|
<view class="tabList">
|
|
<u-tabs :list="tabList"
|
|
lineWidth="30"
|
|
lineColor="#9B75FF"
|
|
:current="current"
|
|
:activeStyle="{
|
|
color: '#000000',
|
|
fontWeight: 'bold',
|
|
transform: 'scale(1.05)'
|
|
}"
|
|
:inactiveStyle="{
|
|
color: '#000000',
|
|
transform: 'scale(1)'
|
|
}"
|
|
itemStyle="padding-left: 15rpx; padding-right: 15rpx; width:157rpx; height: 68rpx;"
|
|
@click="tabChange"></u-tabs>
|
|
|
|
<view class="datalist">
|
|
|
|
<!-- <view class="picBox" @click="goTo('/pages/user/photo/detail')">
|
|
<view class="p_left">
|
|
<image class="p_bg" src="/static/img/user/pic_bg.png" mode="aspectFill"></image>
|
|
<image class="p_pic" src="/static/img/user/ing.png" mode="widthFix"></image>
|
|
</view>
|
|
<view class="p_center">
|
|
<view class="p_title">港风复古</view>
|
|
</view>
|
|
<view class="p_right">
|
|
<view class="distance">
|
|
<view class="ing">生成中...</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
|
|
<view class="picBox">
|
|
<view class="p_left">
|
|
<image class="p_bg" src="/static/img/user/pic_bg.png" mode="aspectFill"></image>
|
|
</view>
|
|
<view class="p_center">
|
|
<view class="p_title">港风复古</view>
|
|
</view>
|
|
<view class="p_right">
|
|
<view class="distance">
|
|
<image src="/static/img/index/right.png" mode="widthFix"></image>
|
|
</view>
|
|
</view>
|
|
</view> -->
|
|
|
|
|
|
<!-- <view class="imgBox">
|
|
<view class="p_left">
|
|
<image class="p_bg" src="/static/img/index/zj_icon.png" mode="aspectFill"></image>
|
|
<image class="p_pic" src="/static/img/user/ing.png" mode="widthFix"></image>
|
|
</view>
|
|
<view class="p_center">
|
|
<view class="p_title">一寸照</view>
|
|
<view class="p_desc">25×35mm | 295×413px</view>
|
|
</view>
|
|
<view class="p_right">
|
|
<view class="distance">
|
|
<view class="ing">生成中...</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
|
|
<view class="imgBox">
|
|
<view class="p_left">
|
|
<image class="p_bg" src="/static/img/index/zj_icon.png" mode="aspectFill"></image>
|
|
</view>
|
|
<view class="p_center">
|
|
<view class="p_title">一寸照</view>
|
|
<view class="p_desc">25×35mm | 295×413px</view>
|
|
</view>
|
|
<view class="p_right">
|
|
<view class="distance">
|
|
<image src="/static/img/index/right.png" mode="widthFix"></image>
|
|
</view>
|
|
</view>
|
|
</view> -->
|
|
|
|
<view class="imgBox" v-for="(item,index) in dataList" :key="index">
|
|
<view class="p_left">
|
|
<image class="p_bg" src="/static/img/index/zj_icon.png" mode="aspectFill"></image>
|
|
</view>
|
|
<view class="p_center">
|
|
<view class="p_title">一寸照</view>
|
|
<view class="p_desc">25×35mm | 295×413px</view>
|
|
</view>
|
|
<view class="p_right">
|
|
<view class="distance">
|
|
<image src="/static/img/index/right.png" mode="widthFix"></image>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
|
|
</view>
|
|
<u-empty icon="/static/img/user/nodata.png" mode="list" text="暂无数据，快去添加吧！" width="180rpx" marginTop="120px" v-if="dataList.length == 0"></u-empty>
|
|
<view class="newBtn" @click="createNew" v-if="dataList.length == 0">去创建</view>
|
|
</view>
|
|
|
|
|
|
|
|
|
|
<view class="nowENV" v-if="this.$api.env() == 'development' || this.$api.env() == 'local'">
|
|
<u-tag v-if="this.$api.env() == 'development'" text="线上测试环境" type="warning" plain plainFill></u-tag>
|
|
<u-tag v-if="this.$api.env() == 'local'" text="本地开发环境" type="error" plain plainFill></u-tag>
|
|
</view>
|
|
|
|
<view class="empty">
|
|
</view>
|
|
|
|
|
|
|
|
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import custom_navbar from "../index/components/header.vue";
|
|
|
|
export default {
|
|
components: {
|
|
custom_navbar
|
|
|
|
},
|
|
data() {
|
|
return {
|
|
navbar_title: '',
|
|
theme: "blue",
|
|
margin_top: 0,
|
|
|
|
|
|
isLogin:false, //登录
|
|
info:{
|
|
avatar:'/static/img/user/avatar.png',
|
|
nick_name:'点击登录',
|
|
},
|
|
sceneList:[], //场景
|
|
tabList: [
|
|
{
|
|
type:1,
|
|
name: '证件照合成',
|
|
}, {
|
|
type:2,
|
|
name: '证件照换色',
|
|
}, {
|
|
type:3,
|
|
name: 'AI写真'
|
|
}, {
|
|
type:4,
|
|
name: '卡通风格'
|
|
}
|
|
],
|
|
current:0,
|
|
//档案
|
|
portraitList:[],
|
|
|
|
//分页
|
|
page: 1,
|
|
dataList:[],
|
|
};
|
|
},
|
|
onPageScroll(e) {
|
|
if (e.scrollTop > 50) {
|
|
this.theme = 'white';
|
|
this.navbar_title='个人中心';
|
|
} else {
|
|
|
|
this.theme = 'blue';
|
|
this.navbar_title='';
|
|
}
|
|
},
|
|
onReady: function (res) {
|
|
|
|
},
|
|
onShow() {
|
|
var _this =this;
|
|
_this.getUserInfo();
|
|
//场景信息
|
|
//_this.getSceneMenu();
|
|
//面部档案
|
|
_this.getPortraitList();
|
|
|
|
},
|
|
onReachBottom () {
|
|
|
|
this.page++;
|
|
this.loadDataList();
|
|
|
|
},
|
|
onShareAppMessage() {
|
|
return {
|
|
title: '智能拍照合成-我的',
|
|
path: uni.$u.page(),
|
|
}
|
|
},
|
|
onShareTimeline() {
|
|
return {
|
|
title: '智能拍照合成-我的',
|
|
path: uni.$u.page(),
|
|
}
|
|
},
|
|
methods:{
|
|
getNavHeight(e) {
|
|
this.margin_top += e;
|
|
},
|
|
//头像加载失败
|
|
imgErr(){
|
|
this.info.avatar = '/static/img/user/avatar.png';
|
|
},
|
|
//获取用户信息
|
|
getUserInfo()
|
|
{
|
|
var _this =this;
|
|
var post ={};
|
|
_this.$api.get('api/userInfo',post,function(rs){
|
|
//console.log('用户信息',rs);
|
|
var oldToken = _this.$user.session('token');
|
|
//先缓存
|
|
_this.$user.session('userInfo',rs);
|
|
if(!_this.$com.isNull(rs.token) && oldToken != rs.token)
|
|
{
|
|
_this.$user.session('token',rs.token);
|
|
}
|
|
//显示
|
|
var userInfo = rs;
|
|
if(_this.$com.isNull(userInfo.nick_name) )
|
|
{
|
|
userInfo.nick_name = '微信用户';
|
|
}
|
|
if(_this.$com.isNull(userInfo.avatar))
|
|
{
|
|
|
|
userInfo.avatar = '/static/img/user/avatar.png';
|
|
}
|
|
else
|
|
{
|
|
userInfo.avatar = _this.$api.ossurl(userInfo.avatar);
|
|
}
|
|
_this.info = userInfo;
|
|
},function(err){
|
|
console.log(err);
|
|
});
|
|
|
|
|
|
|
|
|
|
|
|
|
|
},
|
|
goTo(url)
|
|
{
|
|
uni.$u.route({
|
|
type:'navigateTo',
|
|
url: url,
|
|
});
|
|
},
|
|
//选项卡选择
|
|
tabChange(e)
|
|
{
|
|
var _this =this;
|
|
console.log(e);
|
|
_this.current = e.index;
|
|
var type = _this.tabList[_this.current].type;
|
|
switch(type)
|
|
{
|
|
case 1:
|
|
_this.loadDataList('api/photo_synthesis/list');
|
|
break;
|
|
case 2:
|
|
_this.loadDataList('/api/photo_back_color/list');
|
|
break;
|
|
case 3:
|
|
|
|
break;
|
|
case 4:
|
|
|
|
break;
|
|
}
|
|
},
|
|
loadDataList(url)
|
|
{
|
|
var _this = this;
|
|
var post = {page:_this.page,limit:10};
|
|
_this.$api.get(url, post, function(res) {
|
|
//console.log(res);
|
|
var d = res;
|
|
_this.dataList = _this.dataList.concat(d.data);
|
|
|
|
});
|
|
},
|
|
//合照场景
|
|
getSceneMenu(){
|
|
var _this =this;
|
|
_this.$api.get('api/photo/scene_list', {},function(res){
|
|
console.log('场景',res);
|
|
var sceneList = res;
|
|
sceneList.forEach((item, index) => {
|
|
sceneList[index].name = item.title;
|
|
});
|
|
_this.tabList = sceneList;
|
|
|
|
});
|
|
},
|
|
//档案
|
|
getPortraitList(){
|
|
var _this =this;
|
|
var config = _this.$user.session('app_config');
|
|
var all = config.photo.photo_model_number; //系统总数
|
|
var user = _this.$user.session('userInfo');
|
|
var can_num = user.attach.user_face.available_number; //可使用数量
|
|
var use_num = user.attach.user_face.used_already_number;//已使用数量
|
|
var baseList = [];
|
|
for (var i=1; i<= all; i++)
|
|
{
|
|
//console.log(i,can_num);
|
|
if(i <= can_num)
|
|
{
|
|
baseList.push({id:0,image:'/static/img/user/have.png',can:true});
|
|
}
|
|
else
|
|
{
|
|
baseList.push({id:0,image:'/static/img/user/have_no.png',can:false});
|
|
}
|
|
}
|
|
var post ={};
|
|
_this.$api.get('api/portrait/list',post,function(rs){
|
|
console.log('档案信息',rs);
|
|
if(rs.length > 0)
|
|
{
|
|
rs.forEach((item, index) => {
|
|
baseList[index].id = item.id;
|
|
})
|
|
}
|
|
_this.portraitList = baseList;
|
|
});
|
|
|
|
},
|
|
createNew(){
|
|
var _this =this;
|
|
console.log(e);
|
|
_this.current = e.index;
|
|
var type = _this.tabList[_this.current].type;
|
|
switch(type)
|
|
{
|
|
case 1:
|
|
uni.navigateTo({
|
|
url:'/pagesA/merge/index',
|
|
})
|
|
break;
|
|
case 2:
|
|
uni.navigateTo({
|
|
url:'/pagesA/color/index',
|
|
})
|
|
break;
|
|
case 3:
|
|
uni.navigateTo({
|
|
url:'/pagesA/photo/photo_1',
|
|
})
|
|
break;
|
|
case 4:
|
|
uni.navigateTo({
|
|
url:'/pagesA/photo/cartoon_1',
|
|
})
|
|
break;
|
|
}
|
|
|
|
},
|
|
|
|
},
|
|
};
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
page{ height:100%; width: 100%;}
|
|
.container{padding:10rpx 20rpx;}
|
|
.header{ width: 100%; height: 580rpx; overflow: hidden; position: relative;}
|
|
.background {
|
|
width: 100%;
|
|
height: 100%;
|
|
position:absolute;
|
|
background-size:100% 100%;
|
|
z-index: -1;
|
|
}
|
|
.userInfo{ width: 670rpx; height: auto; display: flex; margin: 244rpx auto 50rpx auto;}
|
|
.userInfo .uleft{ width: 100rpx; height: 120rpx;}
|
|
.userInfo .uleft .u-image{margin-top: 20rpx;}
|
|
.userInfo .ucenter{ width: 450rpx; height: 120rpx; line-height: 120rpx;}
|
|
.userInfo .ucenter .name{ width: 100%; height: 120rpx;}
|
|
.userInfo .ucenter .name .username{font-size: 32rpx; color:#333333; font-weight: 700; margin-left:20rpx;}
|
|
.userInfo .ucenter .name .level{width: auto; padding: 2rpx 10rpx;
|
|
height: 44rpx;
|
|
background: #095E59; text-align: center; font-size: 24rpx;color: #333333;
|
|
border-radius: 42rpx 42rpx 42rpx 42rpx;
|
|
border: 1rpx solid #00F0E2; margin-left: 20rpx;}
|
|
.userInfo .uright{ width: 120rpx; height: 120rpx;}
|
|
.userInfo .uright .change{width: 104rpx;
|
|
height: 50rpx;
|
|
color: #333333; font-size: 28rpx; line-height: 50rpx; text-align: center;}
|
|
.userInfo .uright .change image{ width: 42rpx; height: 42rpx; margin-top: 40rpx;}
|
|
|
|
.boxBg{
|
|
width: 702rpx;
|
|
height: 160rpx;
|
|
border-radius: 0rpx 0rpx 0rpx 0rpx;
|
|
position: relative;
|
|
margin: 0rpx auto 20rpx auto;
|
|
}
|
|
.box_bg{
|
|
width: 100%;
|
|
height: 100%;
|
|
position:absolute;
|
|
background-size:100% 100%;
|
|
z-index: -1;
|
|
}
|
|
.mbBox{width: 100%; height: 160rpx; display: flex;}
|
|
.mleft{width: 50%;}
|
|
.mleft .mb_title{
|
|
font-weight: 700;
|
|
font-size: 30rpx;
|
|
color: #333333;
|
|
line-height: 90rpx;
|
|
padding-left: 20rpx;
|
|
}
|
|
.mleft .mb_desc{
|
|
font-weight: 400;
|
|
font-size: 24rpx;
|
|
color: #555555;
|
|
line-height: 40rpx;
|
|
padding-left: 20rpx;
|
|
}
|
|
.mright{width: 50%; height: 160rpx; display: flex;}
|
|
.mbItem{ width: 80rpx; height: 80rpx; margin: 40rpx auto;}
|
|
.mbItem image{width: 80rpx; height: 80rpx; }
|
|
|
|
.nowENV{ width: 200rpx; height: 60rpx; margin: 10rpx auto; text-align: center;}
|
|
.empty{width: 100%; height: 20rpx;}
|
|
|
|
.newBtn{
|
|
width: 400rpx;
|
|
height: 88rpx;
|
|
line-height: 88rpx;
|
|
border-radius: 48rpx;
|
|
border: 2rpx solid #9B75FF;
|
|
text-align: center;
|
|
margin: 20rpx auto;
|
|
color: #9B75FF;
|
|
font-size: 30rpx;
|
|
font-weight: bold;
|
|
}
|
|
|
|
.datalist{ width: 100%; height: auto;}
|
|
.picBox{
|
|
width: 702rpx;
|
|
height: 160rpx;
|
|
background: #FFFFFF;
|
|
border-radius: 24rpx 24rpx 24rpx 24rpx;
|
|
margin: 20rpx auto;
|
|
display: flex;
|
|
}
|
|
.picBox .p_left{ width: 112rpx; height: 112rpx; margin: 24rpx 24rpx; position: relative;}
|
|
.picBox .p_left .p_bg{
|
|
width: 100%;
|
|
height: 100%;
|
|
position:absolute;
|
|
background-size:100% 100%;
|
|
border-radius:20rpx;
|
|
}
|
|
.picBox .p_left .p_pic{
|
|
width: 100%;
|
|
height: 100%;
|
|
position:absolute;
|
|
z-index: 2;
|
|
opacity: 0.8;
|
|
border-radius:20rpx;
|
|
}
|
|
.picBox .p_center{ width: 342rpx; height: 160rpx; line-height: 160rpx; }
|
|
.picBox .p_center .p_title{
|
|
font-weight: 400;
|
|
font-size: 28rpx;
|
|
color: #333333;
|
|
}
|
|
.picBox .p_right{width: 200rpx;height: 160rpx;}
|
|
.picBox .p_right .distance{ width: 100%; height: 160rpx; text-align: right;}
|
|
.picBox .p_right .distance image{ width: 32rpx; height: 32rpx; margin: 65rpx 24rpx auto auto;}
|
|
.picBox .p_right .distance .ing{
|
|
height: auto;
|
|
font-weight: 400;
|
|
font-size: 24rpx;
|
|
color: #FF4F34;
|
|
line-height: 34rpx;
|
|
margin: 65rpx 24rpx auto auto;
|
|
}
|
|
|
|
|
|
.imgBox{
|
|
width: 702rpx;
|
|
height: 160rpx;
|
|
background: #FFFFFF;
|
|
border-radius: 24rpx 24rpx 24rpx 24rpx;
|
|
margin: 20rpx auto;
|
|
display: flex;
|
|
}
|
|
.imgBox .p_left{ width: 72rpx; height: 72rpx; margin: 44rpx 24rpx 44rpx 24rpx; position: relative;}
|
|
.imgBox .p_left .p_bg{
|
|
width: 100%;
|
|
height: 100%;
|
|
position:absolute;
|
|
background-size:100% 100%;
|
|
border-radius:20rpx;
|
|
}
|
|
.imgBox .p_left .p_pic{
|
|
width: 100%;
|
|
height: 100%;
|
|
position:absolute;
|
|
z-index: 2;
|
|
opacity: 0.8;
|
|
border-radius:20rpx;
|
|
}
|
|
.imgBox .p_center{ width: 362rpx; height: 160rpx; }
|
|
.imgBox .p_center .p_title{
|
|
font-weight: 400;
|
|
font-size: 28rpx;
|
|
color: #333333;
|
|
line-height: 80rpx;
|
|
margin-top: 20rpx;
|
|
}
|
|
.imgBox .p_center .p_desc{
|
|
font-weight: 400;
|
|
font-size: 24rpx;
|
|
color: #999999;
|
|
line-height: 40rpx;
|
|
}
|
|
.imgBox .p_right{width: 200rpx;height: 160rpx;}
|
|
.imgBox .p_right .distance{ width: 100%; height: 160rpx; text-align: right;}
|
|
.imgBox .p_right .distance image{ width: 32rpx; height: 32rpx; margin: 65rpx 24rpx auto auto;}
|
|
.imgBox .p_right .distance .ing{
|
|
height: auto;
|
|
font-weight: 400;
|
|
font-size: 24rpx;
|
|
color: #FF4F34;
|
|
line-height: 34rpx;
|
|
margin: 65rpx 24rpx auto auto;
|
|
}
|
|
</style>
|
|
|