@@ -40,85 +40,6 @@ onLaunch(() => { | |||||
console.log(res.osName, osName, "System"); | console.log(res.osName, osName, "System"); | ||||
}, | }, | ||||
}); | }); | ||||
// 微信登录授权 | |||||
if (userInfoModulesPinia.platForm != 1) { | |||||
uni.login({ | |||||
provider: "weixin", // 使用微信登录授权 | |||||
success: async (res) => { | |||||
console.log(res); | |||||
if (res.code) { | |||||
console.log(res.code); | |||||
try { | |||||
uni.showLoading({ | |||||
title: "加载中...", | |||||
mask: true, | |||||
}); | |||||
const data = { | |||||
appId: "wx75cf14e3a0d45821", | |||||
code: res.code, | |||||
}; | |||||
const res2 = await loginApi(data); | |||||
userInfoModulesPinia.openId = res2.data.openId; | |||||
userInfoModulesPinia.token = res2.data.token; | |||||
console.log(userInfoModulesPinia.openId, "获取openid"); | |||||
// 获取头像和金币 | |||||
const res3 = await findImageApi(); | |||||
userInfoModulesPinia.myAvatar = | |||||
res3.data && res3.data.image ? res3.data.image : ""; | |||||
const res4 = await findGlodApi(); | |||||
if (!res4.data) { | |||||
userInfoModulesPinia.myGlod = 0; | |||||
} else { | |||||
userInfoModulesPinia.myGlod = res4.data.coin; | |||||
} | |||||
uni.hideLoading(); | |||||
if (res2.data.token) { | |||||
// uni.redirectTo({ | |||||
// url: "/pages/index/index", | |||||
// }); | |||||
} else { | |||||
uni.redirectTo({ | |||||
url: "/pages/login/index", | |||||
}); | |||||
console.log("error1"); | |||||
uni.showToast({ | |||||
title: "登录失败,请重试", | |||||
icon: "none", | |||||
}); | |||||
} | |||||
} catch (error) { | |||||
// uni.redirectTo({ | |||||
// url: "pages/index/index", | |||||
// }); | |||||
console.log(error, "error2"); | |||||
uni.showToast({ | |||||
title: "登录失败,请重试", | |||||
icon: "none", | |||||
}); | |||||
} | |||||
} else { | |||||
// uni.redirectTo({ | |||||
// url: "pages/index/index", | |||||
// }); | |||||
console.log("error3"); | |||||
uni.showToast({ | |||||
title: "登录失败,请重试", | |||||
icon: "none", | |||||
}); | |||||
} | |||||
}, | |||||
fail: (err) => { | |||||
// uni.redirectTo({ | |||||
// url: "pages/index/index", | |||||
// }); | |||||
console.log("error4"); | |||||
uni.showToast({ | |||||
title: "登录失败,请重试", | |||||
icon: "none", | |||||
}); | |||||
}, | |||||
}); | |||||
} | |||||
}); | }); | ||||
onShow(() => { | onShow(() => { | ||||
console.log("App Show!"); | console.log("App Show!"); | ||||
@@ -57,6 +57,10 @@ async function getInfo() { | |||||
//#region 生成写真照片 | //#region 生成写真照片 | ||||
async function createing(id) { | async function createing(id) { | ||||
try { | try { | ||||
uni.showLoading({ | |||||
title: "加载中...", | |||||
mask: true, | |||||
}); | |||||
const res = await findImageApi(); | const res = await findImageApi(); | ||||
console.log(res); | console.log(res); | ||||
let myImg = res.data.image; | let myImg = res.data.image; | ||||
@@ -69,8 +73,10 @@ async function createing(id) { | |||||
uni.navigateTo({ | uni.navigateTo({ | ||||
url: `/pages/createing/index?id=${res2.data.id}`, | url: `/pages/createing/index?id=${res2.data.id}`, | ||||
}); | }); | ||||
uni.hideLoading(); | |||||
} catch (error) { | } catch (error) { | ||||
console.log(error); | console.log(error); | ||||
uni.hideLoading(); | |||||
uni.showToast({ | uni.showToast({ | ||||
title: "生成失败,请重试", | title: "生成失败,请重试", | ||||
icon: "none", | icon: "none", | ||||
@@ -7,8 +7,22 @@ | |||||
<view class="changeStyle" @click="changeStyle">更换风格</view> | <view class="changeStyle" @click="changeStyle">更换风格</view> | ||||
</view> | </view> | ||||
<!-- 轮播图 --> | <!-- 轮播图 --> | ||||
<!-- <u-swiper | |||||
v-if="createState == 2" | |||||
indicator | |||||
indicatorMode="dot" | |||||
:radius="30" | |||||
:autoplay="false" | |||||
:list="swiperList" | |||||
keyName="image" | |||||
@change="" | |||||
@click="" | |||||
></u-swiper> --> | |||||
<u-swiper | <u-swiper | ||||
v-if="createState == 2" | |||||
height="350" | |||||
:list="swiperList" | :list="swiperList" | ||||
keyName="image" | |||||
previousMargin="60" | previousMargin="60" | ||||
nextMargin="60" | nextMargin="60" | ||||
circular | circular | ||||
@@ -19,17 +33,22 @@ | |||||
bgColor="#1f2123" | bgColor="#1f2123" | ||||
@click="goLookPhoto" | @click="goLookPhoto" | ||||
></u-swiper> | ></u-swiper> | ||||
<!-- 生成中的底部栏 --> | |||||
<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> | |||||
<image | |||||
v-if="createState != 2" | |||||
class="logo" | |||||
src="../../assets/img/logo-4.png" | |||||
mode="scaleToFill" | |||||
/> | |||||
<!-- 生成中或者生成失败的底部栏 --> | |||||
<view v-show="createState != 2" class="createIng"> | |||||
<text class="time">写真生成中,预计用时X分X秒</text> | |||||
<text class="inform">做好后通知我</text> | |||||
<view class="orangeBtn" @click="changeStyle">继续制作写真</view> | <view class="orangeBtn" @click="changeStyle">继续制作写真</view> | ||||
</view> | </view> | ||||
<!-- 生成成功的底部栏 --> | <!-- 生成成功的底部栏 --> | ||||
<view v-show="createState == 2" class="createEd"> | <view v-show="createState == 2" class="createEd"> | ||||
<view class="orangeBtn anew" @click="changeStyle">重新生成</view> | <view class="orangeBtn anew" @click="changeStyle">重新生成</view> | ||||
<view class="orangeBtn grayBtn" @click="goHome">回到首页</view> | |||||
</view> | </view> | ||||
</view> | </view> | ||||
</template> | </template> | ||||
@@ -40,36 +59,45 @@ import { ref, reactive } from "vue"; | |||||
import { onLoad } from "@dcloudio/uni-app"; | import { onLoad } from "@dcloudio/uni-app"; | ||||
import { findWorkByIdApi } from "../../api/createing.js"; | import { findWorkByIdApi } from "../../api/createing.js"; | ||||
import { findByIdApi } from "../../api/closeStyle.js"; | import { findByIdApi } from "../../api/closeStyle.js"; | ||||
//#endregion | //#endregion | ||||
//#region 生成写真照片 | //#region 生成写真照片 | ||||
const swiperList = [ | |||||
"https://cdn.uviewui.com/uview/swiper/swiper3.png", | |||||
"https://cdn.uviewui.com/uview/swiper/swiper2.png", | |||||
"https://cdn.uviewui.com/uview/swiper/swiper1.png", | |||||
]; | |||||
const swiperList = ref([]); | |||||
//#endregion --------------------- | //#endregion --------------------- | ||||
//#region 查询页面状态 | //#region 查询页面状态 | ||||
const workId = ref(null); //作品id | const workId = ref(null); //作品id | ||||
const createState = ref(null); //制作状态:1生成中,2完成,3失败 | const createState = ref(null); //制作状态:1生成中,2完成,3失败 | ||||
const styleId = ref(null); //风格id | const styleId = ref(null); //风格id | ||||
const styleData = ref(null); | |||||
const styleData = ref(""); //风格信息 | |||||
onLoad((options) => { | onLoad((options) => { | ||||
workId.value = options.id; | workId.value = options.id; | ||||
// getInfo(); | |||||
// workId.value = "856433830235262976"; | |||||
getWorkInfo(); | getWorkInfo(); | ||||
}); | }); | ||||
async function getWorkInfo() { | async function getWorkInfo() { | ||||
try { | try { | ||||
uni.showLoading({ | |||||
title: "加载中...", | |||||
mask: true, | |||||
}); | |||||
// const res = await findWorkByIdApi("854592119583068160"); | // const res = await findWorkByIdApi("854592119583068160"); | ||||
const res = await findWorkByIdApi(workId.value); | const res = await findWorkByIdApi(workId.value); | ||||
console.log(res); | |||||
if (res.data.photoList) { | |||||
swiperList.value = res.data.photoList; | |||||
} | |||||
createState.value = res.data.status; | createState.value = res.data.status; | ||||
styleId.value = res.data.digitalAvatarId; | styleId.value = res.data.digitalAvatarId; | ||||
const res2 = await findByIdApi(styleId.value); | const res2 = await findByIdApi(styleId.value); | ||||
styleData.value = res2.data; | styleData.value = res2.data; | ||||
uni.hideLoading(); | |||||
} catch (error) { | } catch (error) { | ||||
uni.hideLoading(); | |||||
uni.showToast({ | |||||
title: "加载失败,请重试", | |||||
icon: "none", | |||||
}); | |||||
console.log(error); | console.log(error); | ||||
} | } | ||||
} | } | ||||
@@ -81,6 +109,11 @@ function changeStyle() { | |||||
url: "/pages/closeStyle/closeStyle", | url: "/pages/closeStyle/closeStyle", | ||||
}); | }); | ||||
} | } | ||||
function goHome() { | |||||
uni.switchTab({ | |||||
url: "/pages/index/index", | |||||
}); | |||||
} | |||||
function goLookPhoto() { | function goLookPhoto() { | ||||
uni.redirectTo({ | uni.redirectTo({ | ||||
url: "/pages/lookPhoto/index", | url: "/pages/lookPhoto/index", | ||||
@@ -88,6 +121,10 @@ function goLookPhoto() { | |||||
} | } | ||||
//#endregion --------------------- | //#endregion --------------------- | ||||
//#region 轮播图 | |||||
//#endregion --------------------- | |||||
//#region | //#region | ||||
//#endregion --------------------- | //#endregion --------------------- | ||||
@@ -148,6 +185,10 @@ function goLookPhoto() { | |||||
width: 100%; | width: 100%; | ||||
height: 695rpx !important; | height: 695rpx !important; | ||||
} | } | ||||
.logo { | |||||
width: 520rpx; | |||||
margin: 90rpx; | |||||
} | |||||
.createIng, | .createIng, | ||||
.createEd { | .createEd { | ||||
width: 100%; | width: 100%; | ||||
@@ -10,20 +10,33 @@ | |||||
<!-- 头像 --> | <!-- 头像 --> | ||||
<view class="avatarBox"> | <view class="avatarBox"> | ||||
<image | <image | ||||
v-if="userInfoModulesPinia.myAvatar" | |||||
class="avatar" | class="avatar" | ||||
:src="userInfoModulesPinia.myAvatar" | :src="userInfoModulesPinia.myAvatar" | ||||
mode="aspectFill" | mode="aspectFill" | ||||
/> | /> | ||||
<image | |||||
v-if="!userInfoModulesPinia.myAvatar" | |||||
class="avatar" | |||||
src="../../assets/img/logo-5.png" | |||||
mode="aspectFill" | |||||
/> | |||||
<view @click="chooseAvatar" class="changeAvatar"> | <view @click="chooseAvatar" class="changeAvatar"> | ||||
<image src="../../assets/img/reset.png" mode="aspectFit" /> | <image src="../../assets/img/reset.png" mode="aspectFit" /> | ||||
</view> | </view> | ||||
</view> | </view> | ||||
<!-- 金币 --> | <!-- 金币 --> | ||||
<view class="coinBox"> | |||||
<view class="coinBox" v-if="userInfoModulesPinia.token"> | |||||
我的金币: {{ userInfoModulesPinia.myGlod }} | 我的金币: {{ userInfoModulesPinia.myGlod }} | ||||
<image src="../../assets/icon/icon.png" mode="scaleToFill" /> | <image src="../../assets/icon/icon.png" mode="scaleToFill" /> | ||||
<text @click="goOtherPage('buyCoin')">购买金币</text></view | |||||
<text class="buyCoinText" @click="goOtherPage('buyCoin', 2)" | |||||
>购买金币</text | |||||
></view | |||||
> | |||||
<view class="coinBox" v-if="!userInfoModulesPinia.token" | |||||
>还未登录 , | |||||
<text class="goLogin" @click="goLoginHandel">去登录!</text></view | |||||
> | > | ||||
<!-- tab栏 --> | <!-- tab栏 --> | ||||
<view class="tabsBox"> | <view class="tabsBox"> | ||||
@@ -37,18 +50,29 @@ | |||||
{{ item.name }}</view | {{ item.name }}</view | ||||
> | > | ||||
</view> | </view> | ||||
<!-- 未登录 --> | |||||
<view | |||||
v-if="!userInfoModulesPinia.token" | |||||
class="goLogin" | |||||
style="margin-top: 30rpx" | |||||
@click="goLoginHandel" | |||||
> | |||||
登录体验更多功能 | |||||
</view> | |||||
<!-- 显示写真列表内容 --> | <!-- 显示写真列表内容 --> | ||||
<scroll-view | <scroll-view | ||||
@scrolltolower="getMorePhotoList" | @scrolltolower="getMorePhotoList" | ||||
:scroll-y="true" | :scroll-y="true" | ||||
v-show="showListActive == 1" | |||||
v-show="showListActive == 1 && userInfoModulesPinia.token" | |||||
class="showStyleList" | class="showStyleList" | ||||
> | > | ||||
<view | <view | ||||
v-for="item in PhotoList" | v-for="item in PhotoList" | ||||
:key="item.id" | :key="item.id" | ||||
class="showListItem" | class="showListItem" | ||||
@click="goOtherPage(`/pages/lookPhoto/index?id=${item.id}`)" | |||||
@click=" | |||||
goOtherPage(`/pages/lookPhoto/index?id=${item.id}`, item.status) | |||||
" | |||||
> | > | ||||
<view class="top"> | <view class="top"> | ||||
<text class="name">风格名称</text> | <text class="name">风格名称</text> | ||||
@@ -93,7 +117,7 @@ | |||||
<view v-show="PhotoList.length == 0" class="noData" | <view v-show="PhotoList.length == 0" class="noData" | ||||
>暂无数据 , | >暂无数据 , | ||||
<text | <text | ||||
@click="goOtherPage('/pages/closeStyle/closeStyle')" | |||||
@click="goOtherPage('/pages/closeStyle/closeStyle', 2)" | |||||
class="goCreate" | class="goCreate" | ||||
>去生成!</text | >去生成!</text | ||||
> | > | ||||
@@ -102,7 +126,7 @@ | |||||
<!-- 显示视频列表内容 --> | <!-- 显示视频列表内容 --> | ||||
<scroll-view | <scroll-view | ||||
:scroll-y="true" | :scroll-y="true" | ||||
v-show="showListActive == 2" | |||||
v-show="showListActive == 2 && userInfoModulesPinia.token" | |||||
class="showVideoList" | class="showVideoList" | ||||
> | > | ||||
<view v-for="item in 7" :key="item" class="showListItem"> | <view v-for="item in 7" :key="item" class="showListItem"> | ||||
@@ -127,7 +151,10 @@ | |||||
</view> | </view> | ||||
</scroll-view> | </scroll-view> | ||||
<!-- 显示邀请列表内容 --> | <!-- 显示邀请列表内容 --> | ||||
<view class="InviteBox" v-show="showListActive == 3"> | |||||
<view | |||||
class="InviteBox" | |||||
v-show="showListActive == 3 && userInfoModulesPinia.token" | |||||
> | |||||
<scroll-view :scroll-y="true" class="showInviteList"> | <scroll-view :scroll-y="true" class="showInviteList"> | ||||
<view v-for="item in 9" :key="item" class="InviteList"> | <view v-for="item in 9" :key="item" class="InviteList"> | ||||
<up-avatar :src="avatarUrl" size="50"></up-avatar> | <up-avatar :src="avatarUrl" size="50"></up-avatar> | ||||
@@ -141,7 +168,10 @@ | |||||
<view class="inviteBtn">继续邀请好友</view> | <view class="inviteBtn">继续邀请好友</view> | ||||
</view> | </view> | ||||
<!-- 显示消费列表内容 --> | <!-- 显示消费列表内容 --> | ||||
<view v-show="showListActive == 4" class="showOrderList"> | |||||
<view | |||||
v-show="showListActive == 4 && userInfoModulesPinia.token" | |||||
class="showOrderList" | |||||
> | |||||
<view class="top"> | <view class="top"> | ||||
<text>名称</text> | <text>名称</text> | ||||
<text>时间</text> | <text>时间</text> | ||||
@@ -251,7 +281,14 @@ function chooseAvatar() { | |||||
}); | }); | ||||
} | } | ||||
function goOtherPage(url) { | |||||
function goOtherPage(url, status) { | |||||
if (status != 2) { | |||||
uni.showToast({ | |||||
title: "正在生成,请稍后", | |||||
icon: "none", | |||||
}); | |||||
return; | |||||
} | |||||
uni.navigateTo({ | uni.navigateTo({ | ||||
url: url, | url: url, | ||||
}); | }); | ||||
@@ -261,7 +298,7 @@ function goOtherPage(url) { | |||||
//#region tab | //#region tab | ||||
const tabList = ref([ | const tabList = ref([ | ||||
{ name: "我的写真", id: 1 }, | { name: "我的写真", id: 1 }, | ||||
{ name: "我的视频", id: 2 }, | |||||
// { name: "我的视频", id: 2 }, | |||||
{ name: "我的邀请", id: 3 }, | { name: "我的邀请", id: 3 }, | ||||
{ name: "消费记录", id: 4 }, | { name: "消费记录", id: 4 }, | ||||
]); | ]); | ||||
@@ -369,7 +406,12 @@ async function findGlod() { | |||||
} | } | ||||
} catch (error) {} | } catch (error) {} | ||||
} | } | ||||
//#region 跳转 | |||||
function goLoginHandel() { | |||||
uni.navigateTo({ | |||||
url: "/pages/login/index", | |||||
}); | |||||
} | |||||
//#endregion --------------------------- | //#endregion --------------------------- | ||||
//#region 删除弹出框 | //#region 删除弹出框 | ||||
@@ -412,13 +454,15 @@ function init() { | |||||
} | } | ||||
} | } | ||||
onLoad(async () => { | onLoad(async () => { | ||||
setTimeout(() => { | |||||
if (userInfoModulesPinia.token) { | |||||
getPhotoList(pageSize1.value, pageNum1.value); | getPhotoList(pageSize1.value, pageNum1.value); | ||||
getConsumeList(pageSize2.value, pageNum2.value); | getConsumeList(pageSize2.value, pageNum2.value); | ||||
// findImage(); | |||||
// findGlod(); | |||||
// getPhotoList(); | |||||
}, 2000); | |||||
} | |||||
// setTimeout(() => { | |||||
// findImage(); | |||||
// findGlod(); | |||||
// getPhotoList(); | |||||
// }, 2000); | |||||
}); | }); | ||||
//#endregion --------------------------- | //#endregion --------------------------- | ||||
@@ -479,7 +523,7 @@ onLoad(async () => { | |||||
height: 33rpx; | height: 33rpx; | ||||
vertical-align: middle; | vertical-align: middle; | ||||
} | } | ||||
text { | |||||
.buyCoinText { | |||||
margin-left: 28rpx; | margin-left: 28rpx; | ||||
display: inline-block; | display: inline-block; | ||||
width: 160rpx; | width: 160rpx; | ||||
@@ -491,6 +535,10 @@ onLoad(async () => { | |||||
background-color: rgba(255, 255, 255, 0.1); | background-color: rgba(255, 255, 255, 0.1); | ||||
} | } | ||||
} | } | ||||
.goLogin { | |||||
color: #ff4f00; | |||||
text-decoration: underline; | |||||
} | |||||
// tab栏样式 | // tab栏样式 | ||||
.tabsBox { | .tabsBox { | ||||
display: flex; | display: flex; | ||||
@@ -597,7 +645,7 @@ onLoad(async () => { | |||||
text-align: center; | text-align: center; | ||||
.goCreate { | .goCreate { | ||||
color: #ff4f00; | color: #ff4f00; | ||||
text-decoration: dashed; | |||||
text-decoration: underline; | |||||
} | } | ||||
} | } | ||||
} | } | ||||
@@ -55,6 +55,7 @@ | |||||
<script setup> | <script setup> | ||||
//#region 导入 | //#region 导入 | ||||
import { ref, reactive, computed } from "vue"; | import { ref, reactive, computed } from "vue"; | ||||
import { onLoad } from "@dcloudio/uni-app"; | |||||
import { voiceTotalApi, loginPhoneApi } from "../../api/login.js"; | import { voiceTotalApi, loginPhoneApi } from "../../api/login.js"; | ||||
import { userInfoModules } from "@/store/modules/userInfo"; | import { userInfoModules } from "@/store/modules/userInfo"; | ||||
//#endregion | //#endregion | ||||
@@ -93,7 +94,7 @@ async function getphonenumber(e) { | |||||
}); | }); | ||||
userInfoModulesPinia.token = res2.data.token; | userInfoModulesPinia.token = res2.data.token; | ||||
uni.switchTab({ | uni.switchTab({ | ||||
url: "/pages/index/index", | |||||
url: "/pages/uploadPhoto/uploadPhoto", | |||||
}); | }); | ||||
} catch (error) { | } catch (error) { | ||||
uni.showToast({ | uni.showToast({ | ||||
@@ -179,7 +180,23 @@ const goPro = () => { | |||||
}; | }; | ||||
//#endregion --------------------- | //#endregion --------------------- | ||||
voiceTotalApi(); | |||||
//#region | |||||
onLoad((options) => { | |||||
uni.hideHomeButton(); | |||||
// workId.value = options.id; | |||||
if (options.type == "tokenFfalse") { | |||||
uni.showToast({ | |||||
title: "登录失效,请重新登录", | |||||
icon: "none", | |||||
}); | |||||
} | |||||
}); | |||||
//#endregion --------------------------------- | |||||
//#region | |||||
//#endregion --------------------------------- | |||||
// voiceTotalApi(); | |||||
</script> | </script> | ||||
<style lang="scss"> | <style lang="scss"> | ||||
@@ -8,8 +8,8 @@ | |||||
<view class="uploadBox"> | <view class="uploadBox"> | ||||
<image | <image | ||||
class="showImg" | class="showImg" | ||||
src="../../assets/img/photo1.png" | |||||
mode="scaleToFill" | |||||
:src="userInfoModulesPinia.myAvatar" | |||||
mode="aspectFit" | |||||
/> | /> | ||||
<image | <image | ||||
class="SmiliFace" | class="SmiliFace" | ||||
@@ -27,7 +27,7 @@ | |||||
> | > | ||||
<text>重新上传照片</text> | <text>重新上传照片</text> | ||||
</view> | </view> | ||||
<view @click="router('/pages/closeStyle/closeStyle')" class="uploadBtn"> | |||||
<view @click="router2('/pages/closeStyle/closeStyle')" class="uploadBtn"> | |||||
<text>制作我的写真</text> | <text>制作我的写真</text> | ||||
</view> | </view> | ||||
</view> | </view> | ||||
@@ -48,6 +48,11 @@ const uploadState = ref(3); //上传状态 | |||||
const showImgUrl = ref(null); | const showImgUrl = ref(null); | ||||
function router(url) { | function router(url) { | ||||
uni.switchTab({ | |||||
url: url, | |||||
}); | |||||
} | |||||
function router2(url) { | |||||
uni.redirectTo({ | uni.redirectTo({ | ||||
url: url, | url: url, | ||||
}); | }); | ||||
@@ -26,17 +26,23 @@ | |||||
src="../../assets/icon/add.png" | src="../../assets/icon/add.png" | ||||
alt="" | alt="" | ||||
/> | /> | ||||
<!-- @click.prevent="chooseImage" --> | |||||
<image | <image | ||||
class="showImg" | class="showImg" | ||||
v-show="showImgUrl" | v-show="showImgUrl" | ||||
:src="showImgUrl" | :src="showImgUrl" | ||||
alt="" | alt="" | ||||
@click.prevent="chooseImage" | |||||
mode="aspectFit" | mode="aspectFit" | ||||
/> | /> | ||||
</view> | </view> | ||||
<view @click="toCloseStyle" class="uploadBtn"> | |||||
<text>上传我的照片</text> | |||||
<view class="uploadBtn"> | |||||
<view @click="toCloseStyle" class="orangeBtn">上传新头像</view> | |||||
<view | |||||
class="grayBtn" | |||||
v-if="userInfoModulesPinia.myAvatar" | |||||
@click="goOtherPage('/pages/closeStyle/closeStyle')" | |||||
>已有形象,直接创作</view | |||||
> | |||||
<view class="free"> | <view class="free"> | ||||
<image src="../../assets/icon/blackBG.png" mode="aspectFit" /> | <image src="../../assets/icon/blackBG.png" mode="aspectFit" /> | ||||
<text>新用户免费制作</text> | <text>新用户免费制作</text> | ||||
@@ -76,52 +82,76 @@ | |||||
<script setup> | <script setup> | ||||
//#region 导入 | //#region 导入 | ||||
import { ref, reactive } from "vue"; | import { ref, reactive } from "vue"; | ||||
import { onLoad } from "@dcloudio/uni-app"; | |||||
import { loginApi } from "../../api/login"; | |||||
import { addImageApi } from "../../api/uploadphoto.js"; | import { addImageApi } from "../../api/uploadphoto.js"; | ||||
import { userInfoModules } from "@/store/modules/userInfo"; | import { userInfoModules } from "@/store/modules/userInfo"; | ||||
import imageCompression from "browser-image-compression"; //压缩图片插件 | import imageCompression from "browser-image-compression"; //压缩图片插件 | ||||
import { findImageApi, findGlodApi } from "../../api/home"; | |||||
//#endregion | //#endregion | ||||
const userInfoModulesPinia = userInfoModules(); | const userInfoModulesPinia = userInfoModules(); | ||||
//#region 选择图片 | //#region 选择图片 | ||||
const uploadState = ref(1); //上传状态 | const uploadState = ref(1); //上传状态 | ||||
const showImgUrl = ref(userInfoModulesPinia.myAvatar); //回显路径 压缩 | |||||
const showImgUrl = ref(""); //回显路径 压缩 | |||||
const showImgUrl2 = ref(null); //回显路径 未压缩 | const showImgUrl2 = ref(null); //回显路径 未压缩 | ||||
const showImgData = ref(null); //上传数据 | const showImgData = ref(null); //上传数据 | ||||
// 点击上传图片 | |||||
function chooseImage() { | 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: 40, | |||||
success: (res2) => { | |||||
showImgUrl.value = 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); | |||||
showImgData.value = compressedFile; | |||||
} | |||||
}, | |||||
fail: (err) => { | |||||
console.error("选择图片失败", err); | |||||
}, | |||||
}); | |||||
// 检查token | |||||
if (!userInfoModulesPinia.token) { | |||||
uni.showModal({ | |||||
title: "提示", | |||||
content: "登录以体验完整功能", | |||||
success: function (res) { | |||||
if (res.confirm) { | |||||
uni.navigateTo({ | |||||
url: "/pages/login/index", | |||||
}); | |||||
return; | |||||
} else if (res.cancel) { | |||||
console.log("用户点击取消"); | |||||
return; | |||||
} | |||||
}, | |||||
}); | |||||
} else { | |||||
// 调用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: 40, | |||||
success: (res2) => { | |||||
showImgUrl.value = 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); | |||||
showImgData.value = compressedFile; | |||||
} | |||||
}, | |||||
fail: (err) => { | |||||
console.error("选择图片失败", err); | |||||
}, | |||||
}); | |||||
} | |||||
} | } | ||||
//#endregion --------------------- | //#endregion --------------------- | ||||
@@ -130,87 +160,203 @@ function chooseImage() { | |||||
// console.log(userInfoModulesPinia.token, "token"); | // console.log(userInfoModulesPinia.token, "token"); | ||||
async function toCloseStyle() { | async function toCloseStyle() { | ||||
if (!showImgUrl.value) { | |||||
uni.showToast({ | |||||
title: "请先上传图片", | |||||
icon: "none", | |||||
// 检查token | |||||
if (!userInfoModulesPinia.token) { | |||||
uni.showModal({ | |||||
title: "提示", | |||||
content: "登录以体验完整功能", | |||||
success: function (res) { | |||||
if (res.confirm) { | |||||
uni.navigateTo({ | |||||
url: "/pages/login/index", | |||||
}); | |||||
return; | |||||
} else if (res.cancel) { | |||||
console.log("用户点击取消"); | |||||
return; | |||||
} | |||||
}, | |||||
}); | }); | ||||
return; | |||||
} | |||||
uploadState.value = 3; | |||||
} else { | |||||
if (!showImgUrl.value) { | |||||
uni.showToast({ | |||||
title: "请先上传图片", | |||||
icon: "none", | |||||
}); | |||||
return; | |||||
} | |||||
uploadState.value = 3; | |||||
console.log(showImgUrl.value); | |||||
console.log(showImgUrl2.value.path); | |||||
// 人脸识别接口 | |||||
uni.uploadFile({ | |||||
url: "https://test.metavatar.cc/C/api/userDigital/checkPhoto", //上传图片api | |||||
filePath: showImgUrl2.value.path, | |||||
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: showImgUrl2.value.path, | |||||
name: "file", | |||||
formData: { | |||||
user: "test", | |||||
}, | |||||
header: { | |||||
"Content-Type": "multipart/form-data", | |||||
token: userInfoModulesPinia.token, | |||||
}, | |||||
success: async (res2) => { | |||||
let moment = res2; | |||||
if (JSON.parse(res2.data).code != 200) { | |||||
uploadState.value = 5; | |||||
uni.showToast({ | |||||
title: "网络被数字人偷走了, 请稍后重试", | |||||
icon: "none", | |||||
}); | |||||
return; | |||||
} | |||||
// 保存接口 | |||||
console.log(showImgUrl.value); | |||||
console.log(showImgUrl2.value.path); | |||||
// 人脸识别接口 | |||||
uni.uploadFile({ | |||||
url: "https://test.metavatar.cc/C/api/userDigital/checkPhoto", //上传图片api | |||||
filePath: showImgUrl2.value.path, | |||||
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: showImgUrl2.value.path, | |||||
name: "file", | |||||
formData: { | |||||
user: "test", | |||||
}, | |||||
header: { | |||||
"Content-Type": "multipart/form-data", | |||||
token: userInfoModulesPinia.token, | |||||
}, | |||||
success: async (res2) => { | |||||
let moment = res2; | |||||
if (JSON.parse(res2.data).code != 200) { | |||||
uploadState.value = 5; | |||||
uni.showToast({ | |||||
title: "网络被数字人偷走了, 请稍后重试", | |||||
icon: "none", | |||||
const res3 = await addImageApi({ | |||||
image: JSON.parse(res2.data).data.url, | |||||
}); | }); | ||||
return; | |||||
} | |||||
// 保存接口 | |||||
const res3 = await addImageApi({ | |||||
image: JSON.parse(res2.data).data.url, | |||||
}); | |||||
if (res3.code == 200) { | |||||
// 改变全局的头像 | |||||
userInfoModulesPinia.myAvatar = JSON.parse(moment.data).data.url; | |||||
uni.redirectTo({ | |||||
url: "/pages/uploadPhoto/success", | |||||
}); | |||||
} else { | |||||
uni.showToast({ | |||||
title: "网络被数字人偷走了, 请稍后重试", | |||||
icon: "none", | |||||
}); | |||||
} | |||||
}, | |||||
fail: () => { | |||||
uploadState.value = 5; | |||||
}, | |||||
}); | |||||
}, | |||||
fail: () => { | |||||
uploadState.value = 1; | |||||
uni.showToast({ | |||||
title: "网络被数字人偷走了, 请稍后重试", | |||||
icon: "none", | |||||
}); | |||||
}, | |||||
}); | |||||
} | |||||
} | |||||
//#endregion --------------------- | |||||
if (res3.code == 200) { | |||||
// 改变全局的头像 | |||||
userInfoModulesPinia.myAvatar = JSON.parse(moment.data).data.url; | |||||
uni.redirectTo({ | |||||
url: "/pages/uploadPhoto/success", | |||||
//#region 页面传参 | |||||
onLoad((options) => { | |||||
// showImgUrl.value = userInfoModulesPinia.myAvatar; | |||||
// 微信登录授权 | |||||
if (userInfoModulesPinia.platForm != 1) { | |||||
uni.login({ | |||||
provider: "weixin", // 使用微信登录授权 | |||||
success: async (res) => { | |||||
console.log(res); | |||||
if (res.code) { | |||||
console.log(res.code); | |||||
try { | |||||
uni.showLoading({ | |||||
title: "加载中...", | |||||
mask: true, | |||||
}); | }); | ||||
} else { | |||||
const data = { | |||||
appId: "wx75cf14e3a0d45821", | |||||
code: res.code, | |||||
}; | |||||
const res2 = await loginApi(data); | |||||
userInfoModulesPinia.openId = res2.data.openId; | |||||
if (res2.data.token) { | |||||
userInfoModulesPinia.token = res2.data.token; | |||||
console.log(userInfoModulesPinia.openId, "获取openid"); | |||||
// 获取头像和金币 | |||||
const res3 = await findImageApi(); | |||||
userInfoModulesPinia.myAvatar = | |||||
res3.data && res3.data.image ? res3.data.image : ""; | |||||
const res4 = await findGlodApi(); | |||||
if (!res4.data) { | |||||
userInfoModulesPinia.myGlod = 0; | |||||
} else { | |||||
userInfoModulesPinia.myGlod = res4.data.coin | |||||
? res4.data.coin | |||||
: 0; | |||||
} | |||||
uni.hideLoading(); | |||||
if (res2.data.token) { | |||||
// uni.redirectTo({ | |||||
// url: "/pages/index/index", | |||||
// }); | |||||
} else { | |||||
uni.redirectTo({ | |||||
url: "/pages/login/index", | |||||
}); | |||||
console.log("error1"); | |||||
uni.showToast({ | |||||
title: "登录失败,请重试", | |||||
icon: "none", | |||||
}); | |||||
} | |||||
} | |||||
uni.hideLoading(); | |||||
} catch (error) { | |||||
// uni.redirectTo({ | |||||
// url: "pages/index/index", | |||||
// }); | |||||
console.log(error, "error2"); | |||||
uni.showToast({ | uni.showToast({ | ||||
title: "网络被数字人偷走了, 请稍后重试", | |||||
title: "登录失败,请重试", | |||||
icon: "none", | icon: "none", | ||||
}); | }); | ||||
} | } | ||||
}, | |||||
fail: () => { | |||||
uploadState.value = 5; | |||||
}, | |||||
}); | |||||
}, | |||||
fail: () => { | |||||
uploadState.value = 1; | |||||
uni.showToast({ | |||||
title: "网络被数字人偷走了, 请稍后重试", | |||||
icon: "none", | |||||
}); | |||||
}, | |||||
} else { | |||||
// uni.redirectTo({ | |||||
// url: "pages/index/index", | |||||
// }); | |||||
console.log("error3"); | |||||
uni.showToast({ | |||||
title: "登录失败,请重试", | |||||
icon: "none", | |||||
}); | |||||
} | |||||
}, | |||||
fail: (err) => { | |||||
// uni.redirectTo({ | |||||
// url: "pages/index/index", | |||||
// }); | |||||
console.log("error4"); | |||||
uni.showToast({ | |||||
title: "登录失败,请重试", | |||||
icon: "none", | |||||
}); | |||||
}, | |||||
}); | |||||
} | |||||
}); | |||||
//#endregion --------------------- | |||||
//#region | |||||
function goOtherPage(url) { | |||||
uni.navigateTo({ | |||||
url: url, | |||||
}); | }); | ||||
} | } | ||||
//#endregion --------------------- | //#endregion --------------------- | ||||
@@ -307,10 +453,10 @@ async function toCloseStyle() { | |||||
position: relative; | position: relative; | ||||
margin-top: 75rpx; | margin-top: 75rpx; | ||||
width: 520rpx; | width: 520rpx; | ||||
height: 100rpx; | |||||
// height: 100rpx; | |||||
line-height: 100rpx; | line-height: 100rpx; | ||||
text-align: center; | text-align: center; | ||||
background: #ff4f00; | |||||
// background: #ff4f00; | |||||
border-radius: 50rpx; | border-radius: 50rpx; | ||||
font-size: 30rpx; | font-size: 30rpx; | ||||
color: #fff; | color: #fff; | ||||
@@ -95,6 +95,20 @@ view { | |||||
border-radius: 100rpx; | border-radius: 100rpx; | ||||
} | } | ||||
.grayBtn { | |||||
margin-top: 30rpx; | |||||
background-color: transparent; | |||||
width: 520rpx; | |||||
height: 100rpx; | |||||
line-height: 100rpx; | |||||
font-size: 30rpx; | |||||
font-weight: bold; | |||||
text-align: center; | |||||
border-radius: 100rpx; | |||||
color: #FF4F00; | |||||
border: 2rpx solid #FF4F00; | |||||
} | |||||
// 主要文字颜色和图片颜色 | // 主要文字颜色和图片颜色 | ||||
// .imgggg { | // .imgggg { | ||||
// color: #4452d7; | // color: #4452d7; | ||||
@@ -18,7 +18,15 @@ const request = (requestObj) => { | |||||
token: userInfoModulesPinia.token, | token: userInfoModulesPinia.token, | ||||
}, | }, | ||||
success: (res) => { | success: (res) => { | ||||
if (res.statusCode === 200) { | |||||
if (res.data.code == 1052) { | |||||
uni.reLaunch({ | |||||
url: "/pages/login/index?type=tokenFfalse", | |||||
}); | |||||
return | |||||
} | |||||
if (res.statusCode == 200) { | |||||
// if (res.data.code == 200) { | |||||
resolve(res.data) | resolve(res.data) | ||||
} else { | } else { | ||||
reject(new Error('请求失败')); | reject(new Error('请求失败')); | ||||
@@ -29,7 +37,7 @@ const request = (requestObj) => { | |||||
} | } | ||||
}, | }, | ||||
fail: (err) => { | fail: (err) => { | ||||
reject(err); | |||||
reject(err, "拦截器返回错误"); | |||||
uni.showToast({ | uni.showToast({ | ||||
title: '请求失败,请稍后再试', | title: '请求失败,请稍后再试', | ||||
icon: 'none', | icon: 'none', | ||||