@@ -63,7 +63,7 @@ onLaunch(() => { | |||
uni.hideLoading(); | |||
if (res2.data.token) { | |||
uni.redirectTo({ | |||
url: "/pages/index/index", | |||
url: "/pages/home/index", | |||
}); | |||
} else { | |||
uni.redirectTo({ | |||
@@ -0,0 +1,34 @@ | |||
import request from "../utils/request" | |||
// 获取风格列表 | |||
export function getListApi(pageNum, pageSize) { | |||
return request({ | |||
url: `api/digitalAvatarMould/list?pageNum=${pageNum}&pageSize=${pageSize}`, | |||
method: 'GET', | |||
}) | |||
} | |||
// 根据iD获取详情 | |||
export function findByIdApi(id) { | |||
return request({ | |||
url: `api/digitalAvatarMould/findById?id=${id}`, | |||
method: 'GET', | |||
}) | |||
} | |||
// 查询用户头像照片,生成写真时需要 | |||
export function findImageApi() { | |||
return request({ | |||
url: `api/userDigital/findImage`, | |||
method: 'GET', | |||
}) | |||
} | |||
// 生成写真 | |||
export function createPhotoApi(data) { | |||
return request({ | |||
url: `api/digitalAvatarPhoto/createPhoto`, | |||
method: 'POST', | |||
data | |||
}) | |||
} |
@@ -0,0 +1,9 @@ | |||
import request from "../utils/request" | |||
// 获取风格列表 | |||
export function findWorkByIdApi(id) { | |||
return request({ | |||
url: `api/digitalAvatarPhoto/findById?id=${id}`, | |||
method: 'GET', | |||
}) | |||
} |
@@ -0,0 +1,30 @@ | |||
import request from "../utils/request" | |||
// /api/baidu/checkPhoto | |||
// /api/userDigital/checkPhoto | |||
// /api/upload/awsImgUpload //上传,先上传后保存 | |||
// /api/userDigital/addImage //保存 | |||
// { | |||
// "image": | |||
// } | |||
// 百度人脸识别 | |||
export function baiduPhotoApi(data) { | |||
const formData = new FormData(); | |||
formData.append('file', data); | |||
return request({ | |||
url: 'api/baidu/checkPhoto', | |||
method: 'post', | |||
data: formData, | |||
headers: { | |||
'Content-Type': 'application/form-data' | |||
} | |||
}); | |||
} | |||
export function addImageApi(data) { | |||
return request({ | |||
url: 'api/userDigital/addImage', | |||
method: 'post', | |||
data | |||
}); | |||
} |
@@ -4,13 +4,13 @@ | |||
<u-list-item class="glodYBox"> | |||
<u-list-item | |||
v-for="item in styleList" | |||
:key="index" | |||
:key="item.id" | |||
class="styleListBoxItme" | |||
> | |||
<view class="styleInfo" @click="createPhoto"> | |||
<image src="../../assets/img/homeImg.png" mode="aspectFit" /> | |||
<text class="name">样式风格</text> | |||
<text class="single">单人</text> | |||
<view class="styleInfo" @click="createPhoto(item.id)"> | |||
<image :src="item.coverImg" mode="aspectFit" /> | |||
<text class="name">{{ item.title }}</text> | |||
<text class="single">{{ peopleNum(item.mouldType) }}</text> | |||
</view> | |||
</u-list-item> | |||
</u-list-item> | |||
@@ -22,23 +22,63 @@ | |||
//#region 导入 | |||
import { ref, reactive } from "vue"; | |||
import { voiceTotalApi } from "../../api/login.js"; | |||
import { getListApi } from "../../api/closeStyle"; | |||
//#endregion | |||
//#region 列表加载 | |||
const styleList = ref([0, 1, 2, 3, 4, 5, 6, 7]); | |||
const scrolltolower = () => { | |||
loadmore(); | |||
const pageNum = ref(1); | |||
const pageSize = ref(6); | |||
const styleList = ref([]); | |||
// 得到列表 | |||
async function getList() { | |||
try { | |||
const res = await getListApi(pageNum.value, pageSize.value); | |||
styleList.value = res.data.list; | |||
} catch (error) { | |||
uni.showToast({ | |||
title: "获取列表失败,请重试", | |||
icon: "none", | |||
}); | |||
} | |||
} | |||
getList(); | |||
// 触底加载更多 | |||
const scrolltolower = async () => { | |||
try { | |||
pageNum.value += 1; | |||
const res = await getListApi(pageNum.value, pageSize.value); | |||
if (res.data.list.length == 0) { | |||
pageNum.value -= 1; | |||
uni.showToast({ | |||
title: "已加载全部内容", | |||
icon: "none", | |||
}); | |||
} | |||
styleList.value.push(...res.data.list); | |||
} catch (error) { | |||
uni.showToast({ | |||
title: "获取数据失败,请重试", | |||
icon: "none", | |||
}); | |||
} | |||
}; | |||
const loadmore = () => { | |||
styleList.value.push(...[8, 9, 10, 11]); | |||
}; | |||
// 处理单人双人多人 | |||
function peopleNum(num) { | |||
if (num == 1) { | |||
return "单人"; | |||
} else if (num == 2) { | |||
return "双人"; | |||
} else if (num == 3) { | |||
return "三人"; | |||
} | |||
} | |||
//#endregion --------------------- | |||
//#region 点击图片 | |||
function createPhoto() { | |||
uni.redirectTo({ | |||
url: "/pages/closeStyle/goCreatePhoto", | |||
function createPhoto(id) { | |||
uni.navigateTo({ | |||
url: `/pages/closeStyle/goCreatePhoto?id=${id}`, | |||
}); | |||
} | |||
//#endregion --------------------- | |||
@@ -70,6 +110,9 @@ function createPhoto() { | |||
// } | |||
// } | |||
// } | |||
.page { | |||
background-color: #222527; | |||
} | |||
.u-list { | |||
width: 650rpx; | |||
.glodYBox { | |||
@@ -98,7 +141,7 @@ function createPhoto() { | |||
height: 400rpx; | |||
} | |||
.name { | |||
background-color: red; | |||
background-color: #393b3d; | |||
width: 100%; | |||
height: 80rpx; | |||
text-align: center; | |||
@@ -114,8 +157,9 @@ function createPhoto() { | |||
height: 41rpx; | |||
text-align: center; | |||
line-height: 41rpx; | |||
background: #000000; | |||
opacity: 0.4; | |||
background: rgba(0, 0, 0, 0.4); | |||
font-size: 22rpx; | |||
// opacity: 0.4; | |||
border-radius: 12rpx; | |||
} | |||
} | |||
@@ -1,10 +1,10 @@ | |||
<template> | |||
<view class="page"> | |||
<view class="showImgBox imgContenBox" | |||
><image src="../../assets/img/img1.png" mode="aspectFit" | |||
><image :src="styleData.coverImg" | |||
/></view> | |||
<text class="name">风格名称</text> | |||
<view class="orangeBtn" @click="createing" | |||
<text class="name">{{ styleData.title }}</text> | |||
<view class="orangeBtn" @click="createing(styleData.id)" | |||
>开始制作写真 | |||
<view class="free"> | |||
<image src="../../assets/icon/blackBG.png" mode="aspectFit" /> | |||
@@ -21,14 +21,57 @@ | |||
<script setup> | |||
//#region 导入 | |||
import { ref, reactive } from "vue"; | |||
import { voiceTotalApi } from "../../api/login.js"; | |||
import { onLoad } from "@dcloudio/uni-app"; | |||
import { | |||
findByIdApi, | |||
findImageApi, | |||
createPhotoApi, | |||
} from "../../api/closeStyle"; | |||
//#endregion | |||
//#region 初始化 | |||
const styleId = ref(null); | |||
const styleData = ref(null); | |||
onLoad((options) => { | |||
styleId.value = options.id; | |||
getInfo(); | |||
}); | |||
async function getInfo() { | |||
try { | |||
const res = await findByIdApi(styleId.value); | |||
console.log(res); | |||
styleData.value = res.data; | |||
} catch (error) { | |||
uni.showToast({ | |||
title: "获取数据失败,请重试", | |||
icon: "none", | |||
}); | |||
} | |||
} | |||
//#endregion --------------------- | |||
//#region 生成写真照片 | |||
function createing() { | |||
uni.redirectTo({ | |||
url: "/pages/createing/index", | |||
}); | |||
async function createing(id) { | |||
try { | |||
const res = await findImageApi(); | |||
console.log(res); | |||
let myImg = res.data.image; | |||
const data = { | |||
digitalAvatarId: id, | |||
userImages: JSON.stringify([myImg]), | |||
}; | |||
const res2 = await createPhotoApi(data); | |||
console.log(res2); | |||
uni.navigateTo({ | |||
url: `/pages/createing/index?id=${res2.data.id}`, | |||
}); | |||
} catch (error) { | |||
console.log(error); | |||
uni.showToast({ | |||
title: "生成失败,请重试", | |||
icon: "none", | |||
}); | |||
} | |||
} | |||
//#endregion --------------------- | |||
@@ -45,8 +88,9 @@ function createing() { | |||
// background-color: #ccc; | |||
border-radius: 30rpx; | |||
image { | |||
max-width: 100%; | |||
max-height: 100%; | |||
width: 100%; | |||
height: 100%; | |||
border-radius: 30rpx; | |||
} | |||
} | |||
.name { | |||
@@ -2,7 +2,7 @@ | |||
<view class="page"> | |||
<view class="topBox"> | |||
<view class="imgContenBox"> | |||
<image src="../../assets/img/img2.png" mode="aspectFit" /> | |||
<image :src="styleData.coverImg" mode="aspectFit" /> | |||
</view> | |||
<view class="changeStyle" @click="changeStyle">更换风格</view> | |||
</view> | |||
@@ -16,17 +16,19 @@ | |||
indicatorMode="line" | |||
:autoplay="false" | |||
radius="5" | |||
bgColor="#333" | |||
bgColor="#1f2123" | |||
@click="goLookPhoto" | |||
></u-swiper> | |||
<!-- 生成中的底部栏 --> | |||
<view v-show="false" class="createIng"> | |||
<text class="time">写真生成中,预计用时X分X秒</text> | |||
<text class="inform">做好后通知我</text> | |||
<view v-show="createState == 1" class="createIng"> | |||
<text v-show="createState == 1" class="time" | |||
>写真生成中,预计用时X分X秒</text | |||
> | |||
<text v-show="createState == 1" class="inform">做好后通知我</text> | |||
<view class="orangeBtn" @click="changeStyle">继续制作写真</view> | |||
</view> | |||
<!-- 生成成功的底部栏 --> | |||
<view class="createEd"> | |||
<view v-show="createState == 2" class="createEd"> | |||
<view class="orangeBtn anew" @click="changeStyle">重新生成</view> | |||
</view> | |||
</view> | |||
@@ -35,7 +37,9 @@ | |||
<script setup> | |||
//#region 导入 | |||
import { ref, reactive } from "vue"; | |||
import { voiceTotalApi } from "../../api/login.js"; | |||
import { onLoad } from "@dcloudio/uni-app"; | |||
import { findWorkByIdApi } from "../../api/createing.js"; | |||
import { findByIdApi } from "../../api/closeStyle.js"; | |||
//#endregion | |||
//#region 生成写真照片 | |||
@@ -46,6 +50,31 @@ const swiperList = [ | |||
]; | |||
//#endregion --------------------- | |||
//#region 查询页面状态 | |||
const workId = ref(null); //作品id | |||
const createState = ref(null); //制作状态:1生成中,2完成,3失败 | |||
const styleId = ref(null); //风格id | |||
const styleData = ref(null); | |||
onLoad((options) => { | |||
workId.value = options.id; | |||
// getInfo(); | |||
getWorkInfo(); | |||
}); | |||
async function getWorkInfo() { | |||
try { | |||
// const res = await findWorkByIdApi("854592119583068160"); | |||
const res = await findWorkByIdApi(workId.value); | |||
console.log(res); | |||
createState.value = res.data.status; | |||
styleId.value = res.data.digitalAvatarId; | |||
const res2 = await findByIdApi(styleId.value); | |||
styleData.value = res2.data; | |||
} catch (error) { | |||
console.log(error); | |||
} | |||
} | |||
//#endregion --------------------- | |||
//#region 页面跳转 | |||
function changeStyle() { | |||
uni.redirectTo({ | |||
@@ -65,6 +94,9 @@ function goLookPhoto() { | |||
</script> | |||
<style lang="scss"> | |||
.page { | |||
background-color: #1f2123; | |||
} | |||
.topBox { | |||
margin-top: 20rpx; | |||
display: flex; | |||
@@ -79,6 +111,7 @@ function goLookPhoto() { | |||
image { | |||
width: 150rpx; | |||
max-height: 200rpx; | |||
border-radius: 30rpx; | |||
} | |||
} | |||
.changeStyle { | |||
@@ -45,7 +45,7 @@ | |||
<script setup> | |||
//#region 导入 | |||
import { ref, reactive } from "vue"; | |||
import { ref, reactive, computed } from "vue"; | |||
import { voiceTotalApi, loginPhoneApi } from "../../api/login.js"; | |||
import { userInfoModules } from "@/store/modules/userInfo"; | |||
//#endregion | |||
@@ -21,10 +21,13 @@ | |||
<text class="extol">您的颜值打败了全国99%的用户</text> | |||
<!-- 底部盒子 --> | |||
<view class="bottomBox"> | |||
<view class="uploadBtn grayBtn"> | |||
<view | |||
@click="router('/pages/uploadPhoto/uploadPhoto')" | |||
class="uploadBtn grayBtn" | |||
> | |||
<text>重新上传照片</text> | |||
</view> | |||
<view @click="downloadImg" class="uploadBtn"> | |||
<view @click="router('/pages/closeStyle/closeStyle')" class="uploadBtn"> | |||
<text>制作我的写真</text> | |||
</view> | |||
</view> | |||
@@ -43,52 +46,11 @@ const userInfoModulesPinia = userInfoModules(); | |||
//#region 上传 | |||
const uploadState = ref(3); //上传状态 | |||
const showImgUrl = ref(null); | |||
function chooseImage() { | |||
// 调用uni.chooseImage方法选择图片 | |||
uni.chooseImage({ | |||
count: 1, // 最多可以选择的图片张数,这里设置为1,只选择一张图片 | |||
success: async (res) => { | |||
// 图片压缩 | |||
console.log(res.tempFiles[0].size); | |||
if (userInfoModulesPinia.platForm != 1) { | |||
uni.compressImage({ | |||
src: res.tempFilePaths[0], | |||
quality: 20, | |||
success: (res2) => { | |||
showImgUrl.value = res2.tempFilePath; | |||
console.log(res2.tempFilePath); | |||
}, | |||
}); | |||
} else { | |||
const options = { | |||
maxSizeMB: 2, // 最大压缩大小为 4MB | |||
useWebWorker: true, // 使用 Web Worker 进行压缩,提高性能 | |||
}; | |||
const compressedFile = await imageCompression( | |||
res.tempFiles[0], | |||
options | |||
); | |||
//compressedFile是一个blob对象 | |||
showImgUrl.value = URL.createObjectURL(compressedFile); | |||
} | |||
}, | |||
fail: (err) => { | |||
console.error("选择图片失败", err); | |||
}, | |||
}); | |||
} | |||
function toCloseStyle() { | |||
if (showImgUrl.value) { | |||
uni.redirectTo({ | |||
url: "/pages/closeStyle/closeStyle", | |||
}); | |||
} else { | |||
uni.showToast({ | |||
title: "请先上传图片", | |||
icon: "none", | |||
}); | |||
} | |||
function router(url) { | |||
uni.redirectTo({ | |||
url: url, | |||
}); | |||
} | |||
//#endregion --------------------- | |||
@@ -2,14 +2,18 @@ | |||
<view class="page"> | |||
<view class="title"> | |||
<!-- 提示文字 --> | |||
<text class="tips">照片不符合规范,请重新上传</text> | |||
<text v-show="false" class="tips">添加一张正面照片</text> | |||
<text v-show="false" class="tips">数字形象生成中</text> | |||
<text v-show="uploadState == 1" class="tips">请添加一张正面照片</text> | |||
<text v-show="uploadState == 2" class="tips">请点击上传</text> | |||
<text v-show="uploadState == 3" class="tips">数字形象生成中</text> | |||
<text v-show="uploadState == 4" class="tips" | |||
>照片不符合规范,请重新上传</text | |||
> | |||
<text v-show="uploadState == 5" class="tips">上传失败,请重新上传</text> | |||
</view> | |||
<!-- 上传图片和展示 --> | |||
<view class="uploadBox imgContenBox scan"> | |||
<!-- 扫描线 --> | |||
<view class="scan-line"></view> | |||
<view v-show="uploadState == 3" class="scan-line"></view> | |||
<image | |||
class="scan-border" | |||
src="../../assets/img/scanBorder.png" | |||
@@ -73,29 +77,32 @@ | |||
<script setup> | |||
//#region 导入 | |||
import { ref, reactive } from "vue"; | |||
import { voiceTotalApi } from "../../api/login.js"; | |||
import { addImageApi } from "../../api/uploadphoto.js"; | |||
import { userInfoModules } from "@/store/modules/userInfo"; | |||
import imageCompression from "browser-image-compression"; //压缩图片插件 | |||
//#endregion | |||
const userInfoModulesPinia = userInfoModules(); | |||
//#region 上传 | |||
const uploadState = ref(3); //上传状态 | |||
const showImgUrl = ref(null); | |||
//#region 选择图片 | |||
const uploadState = ref(1); //上传状态 | |||
const showImgUrl = ref(null); //回显路径 | |||
const showImgUrl2 = ref(null); //回显路径 | |||
const showImgData = ref(null); //上传数据 | |||
function chooseImage() { | |||
// 调用uni.chooseImage方法选择图片 | |||
uni.chooseImage({ | |||
count: 1, // 最多可以选择的图片张数,这里设置为1,只选择一张图片 | |||
success: async (res) => { | |||
uploadState.value = 2; | |||
// 图片压缩 | |||
console.log(res.tempFiles[0].size); | |||
showImgUrl2.value = res.tempFiles[0]; | |||
if (userInfoModulesPinia.platForm != 1) { | |||
uni.compressImage({ | |||
src: res.tempFilePaths[0], | |||
quality: 20, | |||
quality: 80, | |||
success: (res2) => { | |||
showImgUrl.value = res2.tempFilePath; | |||
console.log(res2.tempFilePath); | |||
}, | |||
}); | |||
} else { | |||
@@ -109,6 +116,7 @@ function chooseImage() { | |||
); | |||
//compressedFile是一个blob对象 | |||
showImgUrl.value = URL.createObjectURL(compressedFile); | |||
showImgData.value = compressedFile; | |||
} | |||
}, | |||
fail: (err) => { | |||
@@ -117,19 +125,87 @@ function chooseImage() { | |||
}); | |||
} | |||
function toCloseStyle() { | |||
if (showImgUrl.value) { | |||
uni.redirectTo({ | |||
url: "/pages/closeStyle/closeStyle", | |||
}); | |||
} else { | |||
//#endregion --------------------- | |||
//#region 上传图片 | |||
// console.log(userInfoModulesPinia.token, "token"); | |||
async function toCloseStyle() { | |||
if (!showImgUrl.value) { | |||
uni.showToast({ | |||
title: "请先上传图片", | |||
icon: "none", | |||
}); | |||
return; | |||
} | |||
} | |||
uploadState.value = 3; | |||
// 人脸识别接口 | |||
uni.uploadFile({ | |||
url: "https://test.metavatar.cc/C/api/userDigital/checkPhoto", //上传图片api | |||
filePath: showImgUrl.value, | |||
name: "file", | |||
formData: { | |||
user: "test", | |||
}, | |||
header: { | |||
// Authorization: userInfoModulesPinia.token, | |||
token: userInfoModulesPinia.token, | |||
}, | |||
success: (res) => { | |||
if (JSON.parse(res.data).code != 200) { | |||
uploadState.value = 4; | |||
return; | |||
} | |||
// 上传接口 | |||
uni.uploadFile({ | |||
url: "https://test.metavatar.cc/C/api/upload/awsImgUpload", //上传图片api | |||
filePath: showImgUrl.value, | |||
name: "file", | |||
formData: { | |||
user: "test", | |||
}, | |||
header: { | |||
"Content-Type": "multipart/form-data", | |||
token: userInfoModulesPinia.token, | |||
}, | |||
success: async (res2) => { | |||
if (JSON.parse(res2.data).code != 200) { | |||
uploadState.value = 5; | |||
uni.showToast({ | |||
title: "网络被数字人偷走了, 请稍后重试", | |||
icon: "none", | |||
}); | |||
return; | |||
} | |||
// 保存接口 | |||
const res3 = await addImageApi({ | |||
image: JSON.parse(res2.data).data.url, | |||
}); | |||
if (res3.code == 200) { | |||
uni.redirectTo({ | |||
url: "/pages/uploadPhoto/success", | |||
}); | |||
} else { | |||
uni.showToast({ | |||
title: "网络被数字人偷走了, 请稍后重试", | |||
icon: "none", | |||
}); | |||
} | |||
}, | |||
fail: () => { | |||
uploadState.value = 5; | |||
}, | |||
}); | |||
}, | |||
fail: () => { | |||
uploadState.value = 4; | |||
}, | |||
}); | |||
} | |||
//#endregion --------------------- | |||
//#region | |||
@@ -1,4 +1,9 @@ | |||
import { userInfoModules } from "@/store/modules/userInfo"; | |||
import { store } from '@/store/index'; | |||
const BASE_URL = 'https://test.metavatar.cc/C/'; | |||
const userInfoModulesPinia = userInfoModules(store); | |||
// const BASE_URL = 'https://test.metavatar.cc/'; | |||
// 通用的网络请求函数,接收请求的URL和请求参数,返回一个Promise | |||
@@ -8,6 +13,10 @@ const request = (requestObj) => { | |||
url: BASE_URL + requestObj.url, | |||
method: requestObj.method, // 这里可以根据需要更改请求方法 | |||
data: requestObj.data, | |||
header: { | |||
// Authorization: userInfoModulesPinia.token, | |||
token: userInfoModulesPinia.token, | |||
}, | |||
success: (res) => { | |||
if (res.statusCode === 200) { | |||
resolve(res.data) | |||
@@ -29,4 +38,4 @@ const request = (requestObj) => { | |||
}) | |||
}) | |||
}; | |||
export default request | |||
export default request |