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.
558 lines
14 KiB
558 lines
14 KiB
<template>
|
|
<view>
|
|
<!-- <u-navbar
|
|
leftText="返回"
|
|
title="个人中心"
|
|
:placeholder="true"
|
|
:autoBack="true"
|
|
bgColor="transparent"
|
|
>
|
|
<view slot="left"> </view>
|
|
</u-navbar> -->
|
|
<view class="header">
|
|
<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" @click="goTo('/pages/user/archives/detail')">
|
|
<image src="/static/img/user/have.png" 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>
|
|
<u-empty icon="/static/img/user/nodata.png" mode="list" text="暂无数据，快去添加吧！" width="180rpx" marginTop="120px"></u-empty>
|
|
<view class="newBtn">去创建</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 user from '../../config/user';
|
|
|
|
export default {
|
|
data() {
|
|
return {
|
|
isLogin:false, //登录
|
|
info:{
|
|
avatar:'/static/img/user/avatar.png',
|
|
nick_name:'点击登录',
|
|
},
|
|
tabList: [
|
|
{
|
|
name: 'AI写真',
|
|
}, {
|
|
name: '证件照合成',
|
|
}, {
|
|
name: '证件照换色'
|
|
}, {
|
|
name: '卡通风格'
|
|
}
|
|
],
|
|
current:0,
|
|
|
|
};
|
|
},
|
|
onReady: function (res) {
|
|
|
|
},
|
|
onShow() {
|
|
var _this =this;
|
|
_this.getUserInfo();
|
|
|
|
|
|
},
|
|
onShareAppMessage() {
|
|
return {
|
|
title: '智能拍照合成-我的',
|
|
path: uni.$u.page(),
|
|
}
|
|
},
|
|
onShareTimeline() {
|
|
return {
|
|
title: '智能拍照合成-我的',
|
|
path: uni.$u.page(),
|
|
}
|
|
},
|
|
methods:{
|
|
//头像加载失败
|
|
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;
|
|
},
|
|
tools(item)
|
|
{
|
|
var _this =this;
|
|
if(item.type == 'service')
|
|
{
|
|
var phone = _this.$user.session('servicePhone');
|
|
uni.makePhoneCall({
|
|
phoneNumber: phone,
|
|
success(res) {
|
|
console.log(res);
|
|
},
|
|
fail(err) {
|
|
console.log(err);
|
|
},
|
|
});
|
|
}
|
|
else
|
|
{
|
|
uni.$u.route({
|
|
type:'navigateTo',
|
|
url: item.url,
|
|
});
|
|
}
|
|
|
|
},
|
|
//打开视频
|
|
openVideo(){
|
|
var _this =this;
|
|
_this.video_show = true;
|
|
},
|
|
videoErrorCallback(e)
|
|
{
|
|
console.log(e);
|
|
},
|
|
closeVideo(){
|
|
var _this =this;
|
|
_this.video_show = false;
|
|
_this.videoContext.pause = true;
|
|
},
|
|
|
|
getPhoneNumber(e){
|
|
var _this =this;
|
|
var detail = e.detail;
|
|
console.log(detail);
|
|
if (detail.errMsg === 'getPhoneNumber:ok') {
|
|
|
|
_this.getPhoneApi(detail);
|
|
} else {
|
|
_this.$com.alert('授权失败')
|
|
}
|
|
},
|
|
getPhoneApi(detail){
|
|
var _this = this;
|
|
var openid = _this.$user.session('openid');
|
|
var post ={
|
|
|
|
code: detail.code,
|
|
};
|
|
_this.$api.post('ycl/user/wx-phone',post,function(rs){
|
|
console.log(rs);
|
|
var phoneNumber = rs;
|
|
_this.userInfo.phoneNumber = phoneNumber;
|
|
if(_this.$com.isNull(openid))
|
|
{
|
|
_this.$com.alert('切换失败,请退出并重新进入小程序重试');
|
|
}
|
|
// #ifdef MP
|
|
//这里目前微信小程序和抖音功能基本一样
|
|
uni.getProvider({
|
|
service: 'oauth',
|
|
success: function (res) {
|
|
console.log(res.provider)
|
|
var provider = res.provider[0];
|
|
|
|
uni.login({
|
|
provider:provider,
|
|
scopes:'auth_base',
|
|
success: function (login) {
|
|
console.log(login);
|
|
//发起网络请求
|
|
var xpost = {
|
|
loginCode: login.code,
|
|
phoneNumber:phoneNumber,
|
|
};
|
|
_this.$api.post('ycl/user/wx-login', xpost,function(resx){
|
|
console.log(resx);
|
|
_this.$user.session('openid',resx.wxOpenid);
|
|
_this.$user.session('user_id',resx.id);
|
|
if(!_this.$com.isNull(resx.token))
|
|
{
|
|
_this.$user.session('token',resx.token);
|
|
}
|
|
_this.isLogin = true;
|
|
_this.getUserInfo();
|
|
});
|
|
},
|
|
fail:function(rs){
|
|
console.log('登录失败'+rs.errMsg);
|
|
}
|
|
});
|
|
|
|
|
|
|
|
|
|
}
|
|
});
|
|
|
|
|
|
// #endif
|
|
},function(err){
|
|
console.log(err);
|
|
});
|
|
|
|
},
|
|
|
|
},
|
|
};
|
|
</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>
|
|
|