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

优化页面

Browse Source
main
JING 8 months ago
parent 63cbe2c2bb
commit 7f9adbb7a0
9 changed files with 286 additions and 74 deletions
  1. 20
      pages.json
  2. 41
      pages/user/account/index.vue
  3. 14
      pages/user/index.vue
  4. 86
      pages/user/photo/ai.vue
  5. 33
      pages/user/photo/cartoon.vue
  6. 54
      pages/user/photo/color.vue
  7. 53
      pages/user/photo/merge.vue
  8. 56
      pages/user/portrait/detail.vue
  9. 3
      pagesA/photo/cartoon_1.vue

20
pages.json
Unescape View File

@ -26,7 +26,8 @@
"path": "pages/user/account/index",
"style": {
"navigationBarTitleText": "账户设置",
"enablePullDownRefresh": false
"navigationStyle": "custom"
}
},
{
@ -39,13 +40,15 @@
{
"path": "pages/user/portrait/detail",
"style": {
"navigationBarTitleText": "面部档案"
"navigationBarTitleText": "面部档案",
"navigationStyle": "custom"
}
},
{
"path": "pages/user/photo/merge",
"style": {
"navigationBarTitleText": "照片详情"
"navigationBarTitleText": "合照详情",
"navigationStyle": "custom"
}
},
{
@ -59,21 +62,24 @@
"path" : "pages/user/photo/color",
"style" :
{
"navigationBarTitleText" : "照片换底色详情"
"navigationBarTitleText" : "照片换底色详情",
"navigationStyle": "custom"
}
},
{
"path" : "pages/user/photo/ai",
"style" :
{
"navigationBarTitleText" : "AI写真"
"navigationBarTitleText" : "AI写真",
"navigationStyle": "custom"
}
},
{
"path" : "pages/user/photo/cartoon",
"style" :
{
"navigationBarTitleText" : "卡通画风"
"navigationBarTitleText" : "卡通画风",
"navigationStyle": "custom"
}
}
@ -190,6 +196,8 @@
"selectedIconPath": "static/img/common/user_HL.png",
"text": "%tabbar.user%"
}
]
},
"uniIdRouter": {}

41
pages/user/account/index.vue
Unescape View File

@ -1,8 +1,8 @@
<template>
<view class="container">
<custom_navbar :title="navbar_title" @getNavHeight="getNavHeight" :theme="theme" left="true" />
<view class="form">
<view class="form" :style="'margin-top:'+margin_top+'px'">
<!--input box start-->
<view class='input_box'>
<view class='i_box_1'>头像</view>
@ -169,10 +169,20 @@
</template>
<script>
import custom_navbar from "../../index/components/header.vue";
export default {
components: {
custom_navbar
},
data() {
return {
navbar_title: '账户设置',
theme: "blue",
margin_top: 0,
//form框
info: {
nick_name:'',
@ -199,8 +209,20 @@
_this.getUserInfo();
},
onPageScroll(e) {
if (e.scrollTop > 50) {
this.theme = 'white';
} else {
this.theme = 'blue';
}
},
methods: {
getNavHeight(e) {
this.margin_top += e;
},
//获取用户信息
getUserInfo()
{
@ -342,10 +364,13 @@
</script>
<style lang="scss">
.container{padding:10rpx 20rpx;}
.form{ padding:0rpx 20rpx;
background: #FFFFFF;
border-radius: 24rpx 24rpx 24rpx 24rpx;
.container{width: 100%; padding-top: 20rpx;}
.form{
width: 670rpx;
margin: 0rpx auto;
padding:0rpx 20rpx;
background: #FFFFFF;
border-radius: 24rpx 24rpx 24rpx 24rpx;
}
/*form基本元素*/
/*input_box*/

14
pages/user/index.vue
Unescape View File

@ -325,14 +325,14 @@ export default {
//面部档案
_this.getPortraitList();
},
onLoad() {
var _this =this;
setTimeout(function(res){
_this.tabChange({index:0});
_this.tabChange({index:_this.current});
},1000);
},
onLoad() {
},
onReachBottom () {
@ -592,7 +592,7 @@ export default {
}
uni.navigateTo({
url:'/pages/user/photo/merge?url='+encodeURIComponent(_this.$api.ossurl(item.merge_image)),
url:'/pages/user/photo/merge?id='+item.id+'&url='+encodeURIComponent(_this.$api.ossurl(item.download_image)),
})
break;
case 2:
@ -610,7 +610,7 @@ export default {
}
uni.navigateTo({
url:'/pages/user/photo/color?url='+encodeURIComponent(_this.$api.ossurl(item.merge_image)),
url:'/pages/user/photo/color?id='+item.id+'&url='+encodeURIComponent(_this.$api.ossurl(item.merge_image)),
})
break;
case 3:

86
pages/user/photo/ai.vue
Unescape View File

@ -1,41 +1,57 @@
<template>
<view class="container">
<view class="imgList">
<!--如果是多个就用imgBox-->
<view class="imgBox" v-for="(item,index) in info.album_series" :key="index">
<image :src="item.merge_image" mode="aspectFill"></image>
</view>
<view class="container">
<custom_navbar :title="navbar_title" @getNavHeight="getNavHeight" :theme="theme" left="true" />
<view class="xcontent" :style="'margin-top:'+margin_top+'px'">
<view class="imgList">
<!--如果是多个就用imgBox-->
<view class="imgBox" v-for="(item,index) in info.album_series" :key="index">
<image :src="item.merge_image" mode="aspectFill"></image>
</view>
</view>
<view class="btnList">
<view class="btnBox a1">
<view class="btnImg">
<image src="/static/img/user/delete.png" mode="widthFix"></image>
</view>
<view class="btnTxt" @click="deletePic">删除照片</view>
</view>
<view class="btnBox a2">
<view class="btnImg">
<image src="/static/img/user/download.png" mode="widthFix"></image>
</view>
<view class="btnTxt" @click="savePic">保存到相册</view>
</view>
</view>
</view>
<view class="btnList">
<view class="btnBox a1">
<view class="btnImg">
<image src="/static/img/user/delete.png" mode="widthFix"></image>
</view>
<view class="btnTxt" @click="deletePic">删除照片</view>
</view>
<view class="btnBox a2">
<view class="btnImg">
<image src="/static/img/user/download.png" mode="widthFix"></image>
</view>
<view class="btnTxt" @click="savePic">保存到相册</view>
</view>
</view>
</view>
</view>
</template>
<script>
import custom_navbar from "../../index/components/header.vue";
export default {
components: {
custom_navbar
},
data() {
return {
id:0,
info:'', //详情
navbar_title: 'AI合影',
theme: "blue",
margin_top: 0,
}
},
@ -56,7 +72,20 @@
var _this = this;
_this.checkAuth();
},
onPageScroll(e) {
if (e.scrollTop > 50) {
this.theme = 'white';
} else {
this.theme = 'blue';
}
},
methods: {
getNavHeight(e) {
this.margin_top += e;
},
//判断
checkAuth() {
var _this = this;
@ -85,7 +114,7 @@
{
var _this = this;
var id = _this.id;
//api/photo_album/del
_this.$com.confirm('确认删除此次写真集吗?',function(res){
var post = {
@ -185,7 +214,8 @@
</script>
<style lang="scss">
.container{padding: 20rpx 26rpx;}
.container{width: 100%; padding-top: 20rpx;}
.xcontent{ width: 710rpx; height: auto; margin: 0rpx auto;}
.imgList{width: 100%; height: auto;
display: flex; flex-wrap: wrap;
justify-content: space-between;

33
pages/user/photo/cartoon.vue
Unescape View File

@ -1,5 +1,7 @@
<template>
<view class="container">
<custom_navbar :title="navbar_title" @getNavHeight="getNavHeight" :theme="theme" left="true" />
<view class="xcontent" :style="'margin-top:'+margin_top+'px'">
<view class="imgList">
<!--如果是多个就用imgBox-->
<!-- <view class="imgBox">
@ -36,17 +38,27 @@
<view class="btnTxt" @click="savePic">保存到相册</view>
</view>
</view>
</view>
</view>
</template>
<script>
import custom_navbar from "../../index/components/header.vue";
export default {
components: {
custom_navbar
},
data() {
return {
id:0,
info:'', //详情
xurl:'',
navbar_title: '卡通画风',
theme: "blue",
margin_top: 0,
}
},
onLoad(option) {
@ -66,7 +78,21 @@
var _this = this;
_this.checkAuth();
},
onPageScroll(e) {
if (e.scrollTop > 50) {
this.theme = 'white';
} else {
this.theme = 'blue';
}
},
methods: {
getNavHeight(e) {
this.margin_top += e;
},
//判断
checkAuth() {
var _this = this;
@ -95,7 +121,7 @@
{
var _this = this;
var id = _this.id;
//api/photo_album/del
_this.$com.confirm('确认删除此张卡通风吗?',function(res){
var post = {
@ -199,7 +225,8 @@
</script>
<style lang="scss">
.container{padding: 20rpx 26rpx;}
.container{width: 100%; padding-top: 20rpx;}
.xcontent{ width: 710rpx; height: auto; margin: 0rpx auto;}
.imgList{width: 100%; height: auto;
display: flex; flex-wrap: wrap;
justify-content: space-around;

54
pages/user/photo/color.vue
Unescape View File

@ -1,5 +1,7 @@
<template>
<view class="container">
<custom_navbar :title="navbar_title" @getNavHeight="getNavHeight" :theme="theme" left="true" />
<view class="xcontent" :style="'margin-top:'+margin_top+'px'">
<view class="imgList">
<!--如果是多个就用imgBox-->
<!-- <view class="imgBox">
@ -38,28 +40,40 @@
<view class="btnTxt" @click="savePic">保存到相册</view>
</view>
</view>
</view>
</view>
</template>
<script>
import custom_navbar from "../../index/components/header.vue";
export default {
components: {
custom_navbar
},
data() {
return {
id:0,
old_url:'',
xurl:'',
navbar_title: '换底色',
theme: "blue",
margin_top: 0,
}
},
onLoad(option) {
//数据
var _this =this;
var id = option.id;
var url = option.url;
if(_this.$com.isNull(url))
if(_this.$com.isNull(url) || _this.$com.isNull(id))
{
uni.navigateBack({
delta:1,
})
}
_this.id = id;
_this.old_url = url;
_this.xurl = decodeURIComponent(url);
},
@ -67,7 +81,21 @@
var _this = this;
_this.checkAuth();
},
onPageScroll(e) {
if (e.scrollTop > 50) {
this.theme = 'white';
} else {
this.theme = 'blue';
}
},
methods: {
getNavHeight(e) {
this.margin_top += e;
},
//判断
checkAuth() {
var _this = this;
@ -95,7 +123,24 @@
deletePic()
{
var _this = this;
_this.$com.showError('暂不支持删除');
var id = _this.id;
_this.$com.confirm('确认删除此张换底色照吗?',function(res){
var post = {
id:id,
};
_this.$api.post('api/photo_back_color/del', post,function(rs){
console.log(rs);
uni.navigateBack({
delta:1,
})
});
},'提示');
},
//保存道相册
savePic(){
@ -150,7 +195,8 @@
</script>
<style lang="scss">
.container{padding: 20rpx 26rpx;}
.container{width: 100%; padding-top: 20rpx;}
.xcontent{ width: 710rpx; height: auto; margin: 0rpx auto;}
.imgList{width: 100%; height: auto;
display: flex; flex-wrap: wrap;
justify-content: space-around; /* 使子元素在容器中均匀分布 */

53
pages/user/photo/merge.vue
Unescape View File

@ -1,5 +1,7 @@
<template>
<view class="container">
<custom_navbar :title="navbar_title" @getNavHeight="getNavHeight" :theme="theme" left="true" />
<view class="xcontent" :style="'margin-top:'+margin_top+'px'">
<view class="imgList">
<!--如果是多个就用imgBox-->
<!-- <view class="imgBox">
@ -38,28 +40,40 @@
<view class="btnTxt" @click="savePic">保存到相册</view>
</view>
</view>
</view>
</view>
</template>
<script>
import custom_navbar from "../../index/components/header.vue";
export default {
components: {
custom_navbar
},
data() {
return {
id:0,
old_url:'',
xurl:'',
navbar_title: '证件照合成',
theme: "blue",
margin_top: 0,
}
},
onLoad(option) {
//数据
var _this =this;
var id = option.id;
var url = option.url;
if(_this.$com.isNull(url))
if(_this.$com.isNull(url) || _this.$com.isNull(id))
{
uni.navigateBack({
delta:1,
})
}
_this.id = id;
_this.old_url = url;
_this.xurl = decodeURIComponent(url);
},
@ -67,7 +81,20 @@
var _this = this;
_this.checkAuth();
},
onPageScroll(e) {
if (e.scrollTop > 50) {
this.theme = 'white';
} else {
this.theme = 'blue';
}
},
methods: {
getNavHeight(e) {
this.margin_top += e;
},
//判断
checkAuth() {
var _this = this;
@ -95,7 +122,24 @@
deletePic()
{
var _this = this;
_this.$com.showError('暂不支持删除');
var id = _this.id;
_this.$com.confirm('确认删除此张合成照吗?',function(res){
var post = {
id:id,
};
_this.$api.post('api/photo_synthesis/del', post,function(rs){
console.log(rs);
uni.navigateBack({
delta:1,
})
});
},'提示');
},
//保存道相册
savePic(){
@ -150,7 +194,8 @@
</script>
<style lang="scss">
.container{padding: 20rpx 26rpx;}
.container{width: 100%; padding-top: 20rpx;}
.xcontent{ width: 710rpx; height: auto; margin: 0rpx auto;}
.imgList{width: 100%; height: auto;
display: flex; flex-wrap: wrap;
justify-content: space-around; /* 使子元素在容器中均匀分布 */

56
pages/user/portrait/detail.vue
Unescape View File

@ -1,24 +1,39 @@
<template>
<view class="container">
<view class="imgList" v-if="imgList.length > 0">
<view class="imgBox" v-for="(item,index) in imgList" :key="index">
<image :src="item" mode="aspectFill"></image>
<custom_navbar :title="navbar_title" @getNavHeight="getNavHeight" :theme="theme" left="true" />
<view class="xcontent" :style="'margin-top:'+margin_top+'px'">
<view class="imgList" v-if="imgList.length > 0">
<view class="imgBox" v-for="(item,index) in imgList" :key="index">
<image :src="item" mode="aspectFill"></image>
</view>
</view>
</view>
<u-empty icon="/static/img/user/nodata.png" mode="list" text="你还没有面部档案" width="180rpx" marginTop="120px" v-if="imgList.length == 0"></u-empty>
<view class="newBtn" v-if="imgList.length == 0" @click="newInfo">去创建</view>
<u-empty icon="/static/img/user/nodata.png" mode="list" text="你还没有面部档案" width="180rpx" marginTop="120px" v-if="imgList.length == 0"></u-empty>
<view class="newBtn" v-if="imgList.length == 0" @click="newInfo">去创建</view>
</view>
</view>
</template>
<script>
import custom_navbar from "../../index/components/header.vue";
export default {
components: {
custom_navbar
},
data() {
return {
id:0,
imgList:[],
navbar_title: '面部档案',
theme: "blue",
margin_top: 0,
}
},
onLoad(options){
@ -27,7 +42,20 @@
_this.id = options.id;
_this.getDetail();
},
onPageScroll(e) {
if (e.scrollTop > 50) {
this.theme = 'white';
} else {
this.theme = 'blue';
}
},
methods: {
getNavHeight(e) {
this.margin_top += e;
},
getDetail()
{
var _this =this;
@ -62,10 +90,14 @@
</script>
<style lang="scss">
.container{padding: 20rpx 26rpx;}
.imgList{width: 100%; height: auto; display: flex; flex-wrap: wrap; gap:12rpx;}
.container{width: 100%; padding-top: 20rpx;}
.xcontent{ width: 710rpx; height: auto; margin: 0rpx auto;}
.imgList{width: 100%; height: auto; display: flex; flex-wrap: wrap;
justify-content: space-between;
align-items: center; /* 如果需要垂直居中子元素 */
}
.imgBox{width: 130rpx; height: 130rpx; margin-top: 10rpx;}
.imgBox image{width: 140rpx; height: 140rpx;}
.imgBox image{width: 130rpx; height: 130rpx;}
.newBtn{
width: 400rpx;

3
pagesA/photo/cartoon_1.vue
Unescape View File

@ -5,7 +5,7 @@
<view class="photo_main_cartoon" :style="'margin-top:-'+margin_top+'px'">
<view class="photo_main_cartoon_head">
</view>
<view class="photo_main_cartoon_one" v-for="(item, index) in cartoonList" :key="index" :style="(index == 0? 'margin-top: -180rpx;':'')+'background: url('+item.face+') ;background-size: 100% 100%;'">
<view class="photo_main_cartoon_one" v-for="(item, index) in cartoonList" :key="index" :style="(index == 0? 'margin-top: -180rpx;':'')+'background: url('+item.face+') center center no-repeat; background-size: 100% auto; '">
<view class="photo_main_cartoon_one_1">{{item.title}}</view>
<view class="photo_main_cartoon_one_2" @click="goTo('/pagesA/photo/cartoon_2?id='+item.id)">
开始制作
@ -35,7 +35,6 @@
margin_top: 0,
cartoonList:[],
page: 1,
}
},

Write Preview
Loading…
Cancel
Save