@@ -18,6 +18,19 @@ | |||
"navigationBarTitleText": "慧拍" | |||
} | |||
}, | |||
{ | |||
"path": "pages/closeStyle/goCreatePhoto", | |||
"style": { | |||
"navigationBarTitleText": "慧拍" | |||
} | |||
}, | |||
{ | |||
"path": "pages/createing/index", | |||
"style": { | |||
"navigationBarTitleText": "慧拍" | |||
} | |||
}, | |||
{ | |||
"path": "pages/home/index", | |||
"style": { | |||
@@ -30,6 +43,7 @@ | |||
"navigationBarTitleText": "购买金币" | |||
} | |||
} | |||
], | |||
"easycom": { | |||
// 注意一定要放在custom里,否则无效,https://ask.dcloud.net.cn/question/131175 | |||
@@ -1,22 +0,0 @@ | |||
<template> | |||
<div class="page"> | |||
<view class="title">选择照片风格</view> | |||
</div> | |||
</template> | |||
<script setup> | |||
//#region 导入 | |||
import { ref, reactive } from "vue"; | |||
import { voiceTotalApi } from "../../api/login.js"; | |||
//#endregion | |||
//#region | |||
//#endregion --------------------- | |||
//#region | |||
//#endregion --------------------- | |||
</script> | |||
<style lang="scss"></style> |
@@ -1,7 +1,7 @@ | |||
<template> | |||
<div class="page"> | |||
<view class="title imgContenBox" | |||
><image src="../../assets/text/closeStyleText.png" mode="scaleToFill" | |||
><image src="../../assets/text/closeStyleText.png" mode="aspectFit" | |||
/></view> | |||
<u-list class="styleListBox" @scrolltolower="scrolltolower"> | |||
@@ -10,7 +10,7 @@ | |||
:key="index" | |||
class="styleListBoxItme" | |||
> | |||
<view class="styleInfo"> | |||
<view class="styleInfo" @click="createPhoto"> | |||
<image src="../../assets/icon/uploadImg.png" /> | |||
<text>样式风格</text> | |||
</view> | |||
@@ -25,7 +25,7 @@ import { ref, reactive } from "vue"; | |||
import { voiceTotalApi } from "../../api/login.js"; | |||
//#endregion | |||
//#region | |||
//#region 列表加载 | |||
const styleList = ref([0, 1, 2, 3, 4, 5, 6, 7]); | |||
const scrolltolower = () => { | |||
loadmore(); | |||
@@ -36,8 +36,12 @@ const loadmore = () => { | |||
}; | |||
//#endregion --------------------- | |||
//#region | |||
//#region 点击图片 | |||
function createPhoto() { | |||
uni.redirectTo({ | |||
url: "/pages/closeStyle/goCreatePhoto", | |||
}); | |||
} | |||
//#endregion --------------------- | |||
</script> | |||
@@ -0,0 +1,58 @@ | |||
<template> | |||
<view class="page"> | |||
<view class="showImgBox imgContenBox" | |||
><image src="../../assets/img/img1.jpg" mode="aspectFit" | |||
/></view> | |||
<text class="name">风格名称</text> | |||
<up-button | |||
type="primary" | |||
text="开始制作写真" | |||
color="linear-gradient(to right, rgb(66, 83, 216), rgb(213, 51, 186))" | |||
@click="createing" | |||
></up-button> | |||
<text class="balance">金币余额: 30</text> | |||
</view> | |||
</template> | |||
<script setup> | |||
//#region 导入 | |||
import { ref, reactive } from "vue"; | |||
import { voiceTotalApi } from "../../api/login.js"; | |||
//#endregion | |||
//#region 生成写真照片 | |||
function createing() { | |||
uni.redirectTo({ | |||
url: "/pages/createing/index", | |||
}); | |||
} | |||
//#endregion --------------------- | |||
//#region | |||
//#endregion --------------------- | |||
</script> | |||
<style lang="scss"> | |||
.showImgBox { | |||
width: 710rpx; | |||
height: 800rpx; | |||
background-color: #ccc; | |||
border-radius: 30rpx; | |||
image { | |||
max-width: 100%; | |||
max-height: 100%; | |||
} | |||
} | |||
.name { | |||
margin-top: 30rpx; | |||
margin-bottom: 50rpx; | |||
} | |||
button { | |||
width: 60% !important; | |||
} | |||
.balance { | |||
margin-top: 30rpx; | |||
font-size: 40rpx; | |||
} | |||
</style> |
@@ -0,0 +1,136 @@ | |||
<template> | |||
<view class="page"> | |||
<view class="topBox"> | |||
<view class="imgContenBox"> | |||
<image src="../../assets/img/img2.jpg" mode="aspectFit" /> | |||
</view> | |||
<up-button | |||
type="primary" | |||
text="更换风格" | |||
color="linear-gradient(to right, rgb(66, 83, 216), rgb(213, 51, 186))" | |||
@click="changeStyle" | |||
></up-button> | |||
</view> | |||
<view class="imgListBox"> | |||
<view class="imgContenBox" v-for="item in 4" :key="item"> | |||
<image src="../../assets/img/img2.jpg" mode="aspectFit" /> | |||
</view> | |||
</view> | |||
<!-- 生成中的底部栏 --> | |||
<view v-show="false" class="createIng"> | |||
<text class="time">写真生成中,预计用时X分X秒</text> | |||
<text class="inform">做好后通知我</text> | |||
<up-button | |||
class="goon" | |||
type="primary" | |||
text="继续制作写真" | |||
color="linear-gradient(to right, rgb(66, 83, 216), rgb(213, 51, 186))" | |||
@click="changeStyle" | |||
></up-button> | |||
</view> | |||
<!-- 生成成功的底部栏 --> | |||
<view class="createEd"> | |||
<text class="look">点击查看高清写真</text> | |||
<up-button | |||
class="goon" | |||
type="primary" | |||
text="重新生成" | |||
color="linear-gradient(to right, rgb(66, 83, 216), rgb(213, 51, 186))" | |||
@click="changeStyle" | |||
></up-button> | |||
</view> | |||
</view> | |||
</template> | |||
<script setup> | |||
//#region 导入 | |||
import { ref, reactive } from "vue"; | |||
import { voiceTotalApi } from "../../api/login.js"; | |||
//#endregion | |||
//#region 生成写真照片 | |||
//#endregion --------------------- | |||
//#region 页面跳转 | |||
function changeStyle() { | |||
uni.redirectTo({ | |||
url: "/pages/closeStyle/closeStyle", | |||
}); | |||
} | |||
//#endregion --------------------- | |||
//#region | |||
//#endregion --------------------- | |||
</script> | |||
<style lang="scss"> | |||
.topBox { | |||
display: flex; | |||
align-items: flex-end; | |||
justify-content: flex-start; | |||
width: 100%; | |||
height: 200rpx; | |||
.imgContenBox { | |||
width: 200rpx; | |||
height: 100%; | |||
background-color: #ccc; | |||
image { | |||
width: 200rpx; | |||
max-height: 200rpx; | |||
} | |||
} | |||
button { | |||
width: 200rpx !important; | |||
margin: 0 50rpx; | |||
} | |||
} | |||
.imgListBox { | |||
width: 100%; | |||
height: 900rpx; | |||
padding: 30rpx 60rpx; | |||
display: flex; | |||
justify-content: space-between; | |||
align-items: center; | |||
flex-wrap: wrap; | |||
view { | |||
width: 48%; | |||
height: 48%; | |||
background-color: #ccc; | |||
border-radius: 30rpx; | |||
image { | |||
max-width: 100%; | |||
max-height: 100%; | |||
} | |||
} | |||
} | |||
.createIng, | |||
.createEd { | |||
width: 100%; | |||
display: flex; | |||
flex-direction: column; | |||
align-items: center; | |||
justify-content: center; | |||
.time { | |||
font-size: 40rpx; | |||
font-weight: 900; | |||
margin-top: 20rpx; | |||
margin-bottom: 10rpx; | |||
} | |||
.inform { | |||
margin-bottom: 30rpx; | |||
} | |||
.look { | |||
font-size: 40rpx; | |||
font-weight: 900; | |||
margin-top: 20rpx; | |||
margin-bottom: 30rpx; | |||
} | |||
button { | |||
width: 70% !important; | |||
} | |||
} | |||
</style> |
@@ -4,7 +4,7 @@ | |||
<view class="avatarBox"> | |||
<up-avatar :src="avatarUrl" size="150"></up-avatar> | |||
<view class="changeAvatar"> | |||
<image src="../../assets/icon/reset.png" mode="scaleToFill" /> | |||
<image src="../../assets/icon/reset.png" mode="aspectFit" /> | |||
</view> | |||
</view> | |||
<!-- 金币 --> | |||
@@ -23,7 +23,7 @@ | |||
@click="clickTabHandle" | |||
></u-tabs> | |||
<!-- 显示风格列表内容 --> | |||
<view v-show="showListActive == 2" class="showStyleList"> | |||
<view v-show="showListActive == 1" class="showStyleList"> | |||
<view class="showListItem"> | |||
<view class="top"> | |||
<text>风格名称</text> | |||
@@ -41,7 +41,7 @@ | |||
</view> | |||
</view> | |||
<!-- 显示邀请列表内容 --> | |||
<view v-show="showListActive == 3" class="showInviteList"> | |||
<view v-show="showListActive == 2" class="showInviteList"> | |||
<view v-for="item in 3" class="InviteList"> | |||
<up-avatar :src="avatarUrl" size="50"></up-avatar> | |||
<view class="info"> | |||
@@ -52,7 +52,7 @@ | |||
</view> | |||
</view> | |||
<!-- 显示消费列表内容 --> | |||
<view v-show="showListActive == 1" class="showOrderList"> | |||
<view v-show="showListActive == 3" class="showOrderList"> | |||
<view class="top"> | |||
<text>名称</text> | |||
<text>时间</text> | |||
@@ -45,12 +45,12 @@ const checkboxList1 = reactive([ | |||
function toCreate() { | |||
if (checkboxValue1.value[0]) { | |||
handleLogin(); | |||
// uni.redirectTo({ | |||
// url: "/pages/uploadPhoto/uploadPhoto", | |||
// }); | |||
uni.redirectTo({ | |||
url: "/pages/uploadPhoto/uploadPhoto", | |||
}); | |||
} else { | |||
uni.showToast({ | |||
title: "请先勾选", | |||
title: "请先同意用户协议", | |||
icon: "none", | |||
}); | |||
} | |||
@@ -36,7 +36,7 @@ | |||
type="primary" | |||
text="上传我的照片" | |||
color="linear-gradient(to right, rgb(66, 83, 216), rgb(213, 51, 186))" | |||
@click="toCreate" | |||
@click="toCloseStyle" | |||
></up-button> | |||
<view class="tips">请按照样片上传您五官清晰的正面照片</view> | |||
<view class="demoImgBox"> | |||
@@ -75,6 +75,19 @@ function chooseImage() { | |||
}); | |||
} | |||
function toCloseStyle() { | |||
if (showImgUrl.value) { | |||
uni.redirectTo({ | |||
url: "/pages/closeStyle/closeStyle", | |||
}); | |||
} else { | |||
uni.showToast({ | |||
title: "请先上传图片", | |||
icon: "none", | |||
}); | |||
} | |||
} | |||
//#endregion --------------------- | |||
//#region | |||