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

优化页面

Browse Source
main
JING 11 months ago
parent 63cbe2c2bb
commit 7f9adbb7a0
9 changed files with 286 additions and 74 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. 20
      pages.json
  2. 41
      pages/user/account/index.vue
  3. 14
      pages/user/index.vue
  4. 34
      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. 38
      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", "path": "pages/user/account/index",
"style": { "style": {
"navigationBarTitleText": "账户设置", "navigationBarTitleText": "账户设置",
"enablePullDownRefresh": false "navigationStyle": "custom"
} }
}, },
{ {
@ -39,13 +40,15 @@
{ {
"path": "pages/user/portrait/detail", "path": "pages/user/portrait/detail",
"style": { "style": {
"navigationBarTitleText": "面部档案" "navigationBarTitleText": "面部档案",
"navigationStyle": "custom"
} }
}, },
{ {
"path": "pages/user/photo/merge", "path": "pages/user/photo/merge",
"style": { "style": {
"navigationBarTitleText": "照片详情" "navigationBarTitleText": "合照详情",
"navigationStyle": "custom"
} }
}, },
{ {
@ -59,21 +62,24 @@
"path" : "pages/user/photo/color", "path" : "pages/user/photo/color",
"style" : "style" :
{ {
"navigationBarTitleText" : "照片换底色详情" "navigationBarTitleText" : "照片换底色详情",
"navigationStyle": "custom"
} }
}, },
{ {
"path" : "pages/user/photo/ai", "path" : "pages/user/photo/ai",
"style" : "style" :
{ {
"navigationBarTitleText" : "AI写真" "navigationBarTitleText" : "AI写真",
"navigationStyle": "custom"
} }
}, },
{ {
"path" : "pages/user/photo/cartoon", "path" : "pages/user/photo/cartoon",
"style" : "style" :
{ {
"navigationBarTitleText" : "卡通画风" "navigationBarTitleText" : "卡通画风",
"navigationStyle": "custom"
} }
} }
@ -190,6 +196,8 @@
"selectedIconPath": "static/img/common/user_HL.png", "selectedIconPath": "static/img/common/user_HL.png",
"text": "%tabbar.user%" "text": "%tabbar.user%"
} }
] ]
}, },
"uniIdRouter": {} "uniIdRouter": {}

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

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

14
pages/user/index.vue
Unescape View File

@ -325,14 +325,14 @@ export default {
//面部档案 //面部档案
_this.getPortraitList(); _this.getPortraitList();
},
onLoad() {
var _this =this; var _this =this;
setTimeout(function(res){ setTimeout(function(res){
_this.tabChange({index:0}); _this.tabChange({index:_this.current});
},1000); },1000);
},
onLoad() {
}, },
onReachBottom () { onReachBottom () {
@ -592,7 +592,7 @@ export default {
} }
uni.navigateTo({ 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; break;
case 2: case 2:
@ -610,7 +610,7 @@ export default {
} }
uni.navigateTo({ 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; break;
case 3: case 3:

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

@ -1,5 +1,7 @@
<template> <template>
<view class="container"> <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"> <view class="imgList">
<!--如果是多个就用imgBox--> <!--如果是多个就用imgBox-->
<view class="imgBox" v-for="(item,index) in info.album_series" :key="index"> <view class="imgBox" v-for="(item,index) in info.album_series" :key="index">
@ -25,17 +27,31 @@
<view class="btnTxt" @click="savePic">保存到相册</view> <view class="btnTxt" @click="savePic">保存到相册</view>
</view> </view>
</view> </view>
</view>
</view> </view>
</template> </template>
<script> <script>
import custom_navbar from "../../index/components/header.vue";
export default { export default {
components: {
custom_navbar
},
data() { data() {
return { return {
id:0, id:0,
info:'', //详情 info:'', //详情
navbar_title: 'AI合影',
theme: "blue",
margin_top: 0,
} }
}, },
@ -56,7 +72,20 @@
var _this = this; var _this = this;
_this.checkAuth(); _this.checkAuth();
}, },
onPageScroll(e) {
if (e.scrollTop > 50) {
this.theme = 'white';
} else {
this.theme = 'blue';
}
},
methods: { methods: {
getNavHeight(e) {
this.margin_top += e;
},
//判断 //判断
checkAuth() { checkAuth() {
var _this = this; var _this = this;
@ -85,7 +114,7 @@
{ {
var _this = this; var _this = this;
var id = _this.id; var id = _this.id;
//api/photo_album/del
_this.$com.confirm('确认删除此次写真集吗?',function(res){ _this.$com.confirm('确认删除此次写真集吗?',function(res){
var post = { var post = {
@ -185,7 +214,8 @@
</script> </script>
<style lang="scss"> <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; .imgList{width: 100%; height: auto;
display: flex; flex-wrap: wrap; display: flex; flex-wrap: wrap;
justify-content: space-between; justify-content: space-between;

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

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

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

@ -1,5 +1,7 @@
<template> <template>
<view class="container"> <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"> <view class="imgList">
<!--如果是多个就用imgBox--> <!--如果是多个就用imgBox-->
<!-- <view class="imgBox"> <!-- <view class="imgBox">
@ -38,28 +40,40 @@
<view class="btnTxt" @click="savePic">保存到相册</view> <view class="btnTxt" @click="savePic">保存到相册</view>
</view> </view>
</view> </view>
</view>
</view> </view>
</template> </template>
<script> <script>
import custom_navbar from "../../index/components/header.vue";
export default { export default {
components: {
custom_navbar
},
data() { data() {
return { return {
id:0,
old_url:'', old_url:'',
xurl:'', xurl:'',
navbar_title: '换底色',
theme: "blue",
margin_top: 0,
} }
}, },
onLoad(option) { onLoad(option) {
//数据 //数据
var _this =this; var _this =this;
var id = option.id;
var url = option.url; var url = option.url;
if(_this.$com.isNull(url)) if(_this.$com.isNull(url) || _this.$com.isNull(id))
{ {
uni.navigateBack({ uni.navigateBack({
delta:1, delta:1,
}) })
} }
_this.id = id;
_this.old_url = url; _this.old_url = url;
_this.xurl = decodeURIComponent(url); _this.xurl = decodeURIComponent(url);
}, },
@ -67,7 +81,21 @@
var _this = this; var _this = this;
_this.checkAuth(); _this.checkAuth();
}, },
onPageScroll(e) {
if (e.scrollTop > 50) {
this.theme = 'white';
} else {
this.theme = 'blue';
}
},
methods: { methods: {
getNavHeight(e) {
this.margin_top += e;
},
//判断 //判断
checkAuth() { checkAuth() {
var _this = this; var _this = this;
@ -95,7 +123,24 @@
deletePic() deletePic()
{ {
var _this = this; 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(){ savePic(){
@ -150,7 +195,8 @@
</script> </script>
<style lang="scss"> <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; .imgList{width: 100%; height: auto;
display: flex; flex-wrap: wrap; display: flex; flex-wrap: wrap;
justify-content: space-around; /* 使子元素在容器中均匀分布 */ justify-content: space-around; /* 使子元素在容器中均匀分布 */

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

@ -1,5 +1,7 @@
<template> <template>
<view class="container"> <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"> <view class="imgList">
<!--如果是多个就用imgBox--> <!--如果是多个就用imgBox-->
<!-- <view class="imgBox"> <!-- <view class="imgBox">
@ -38,28 +40,40 @@
<view class="btnTxt" @click="savePic">保存到相册</view> <view class="btnTxt" @click="savePic">保存到相册</view>
</view> </view>
</view> </view>
</view>
</view> </view>
</template> </template>
<script> <script>
import custom_navbar from "../../index/components/header.vue";
export default { export default {
components: {
custom_navbar
},
data() { data() {
return { return {
id:0,
old_url:'', old_url:'',
xurl:'', xurl:'',
navbar_title: '证件照合成',
theme: "blue",
margin_top: 0,
} }
}, },
onLoad(option) { onLoad(option) {
//数据 //数据
var _this =this; var _this =this;
var id = option.id;
var url = option.url; var url = option.url;
if(_this.$com.isNull(url)) if(_this.$com.isNull(url) || _this.$com.isNull(id))
{ {
uni.navigateBack({ uni.navigateBack({
delta:1, delta:1,
}) })
} }
_this.id = id;
_this.old_url = url; _this.old_url = url;
_this.xurl = decodeURIComponent(url); _this.xurl = decodeURIComponent(url);
}, },
@ -67,7 +81,20 @@
var _this = this; var _this = this;
_this.checkAuth(); _this.checkAuth();
}, },
onPageScroll(e) {
if (e.scrollTop > 50) {
this.theme = 'white';
} else {
this.theme = 'blue';
}
},
methods: { methods: {
getNavHeight(e) {
this.margin_top += e;
},
//判断 //判断
checkAuth() { checkAuth() {
var _this = this; var _this = this;
@ -95,7 +122,24 @@
deletePic() deletePic()
{ {
var _this = this; 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(){ savePic(){
@ -150,7 +194,8 @@
</script> </script>
<style lang="scss"> <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; .imgList{width: 100%; height: auto;
display: flex; flex-wrap: wrap; display: flex; flex-wrap: wrap;
justify-content: space-around; /* 使子元素在容器中均匀分布 */ justify-content: space-around; /* 使子元素在容器中均匀分布 */

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

@ -1,5 +1,8 @@
<template> <template>
<view class="container"> <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" v-if="imgList.length > 0"> <view class="imgList" v-if="imgList.length > 0">
<view class="imgBox" v-for="(item,index) in imgList" :key="index"> <view class="imgBox" v-for="(item,index) in imgList" :key="index">
<image :src="item" mode="aspectFill"></image> <image :src="item" mode="aspectFill"></image>
@ -8,17 +11,29 @@
</view> </view>
<u-empty icon="/static/img/user/nodata.png" mode="list" text="你还没有面部档案" width="180rpx" marginTop="120px" v-if="imgList.length == 0"></u-empty> <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 class="newBtn" v-if="imgList.length == 0" @click="newInfo">去创建</view>
</view> </view>
</view>
</template> </template>
<script> <script>
import custom_navbar from "../../index/components/header.vue";
export default { export default {
components: {
custom_navbar
},
data() { data() {
return { return {
id:0, id:0,
imgList:[], imgList:[],
navbar_title: '面部档案',
theme: "blue",
margin_top: 0,
} }
}, },
onLoad(options){ onLoad(options){
@ -27,7 +42,20 @@
_this.id = options.id; _this.id = options.id;
_this.getDetail(); _this.getDetail();
}, },
onPageScroll(e) {
if (e.scrollTop > 50) {
this.theme = 'white';
} else {
this.theme = 'blue';
}
},
methods: { methods: {
getNavHeight(e) {
this.margin_top += e;
},
getDetail() getDetail()
{ {
var _this =this; var _this =this;
@ -62,10 +90,14 @@
</script> </script>
<style lang="scss"> <style lang="scss">
.container{padding: 20rpx 26rpx;} .container{width: 100%; padding-top: 20rpx;}
.imgList{width: 100%; height: auto; display: flex; flex-wrap: wrap; gap:12rpx;} .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{width: 130rpx; height: 130rpx; margin-top: 10rpx;}
.imgBox image{width: 140rpx; height: 140rpx;} .imgBox image{width: 130rpx; height: 130rpx;}
.newBtn{ .newBtn{
width: 400rpx; 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" :style="'margin-top:-'+margin_top+'px'">
<view class="photo_main_cartoon_head"> <view class="photo_main_cartoon_head">
</view> </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_1">{{item.title}}</view>
<view class="photo_main_cartoon_one_2" @click="goTo('/pagesA/photo/cartoon_2?id='+item.id)"> <view class="photo_main_cartoon_one_2" @click="goTo('/pagesA/photo/cartoon_2?id='+item.id)">
开始制作 开始制作
@ -36,7 +36,6 @@
cartoonList:[], cartoonList:[],
page: 1, page: 1,
} }
}, },
onLoad() { onLoad() {

Write Preview
Loading…
Cancel
Save