@@ -2,6 +2,7 @@ | |||
"appid": "wx75cf14e3a0d45821", | |||
git commit -m "feat: " | |||
git commit --no-verify -m "提交时的注释" 跳过检验 |
@@ -5,7 +5,7 @@ | |||
<script setup> | |||
import { onLaunch, onShow, onHide } from "@dcloudio/uni-app"; | |||
import { userInfoModules } from "@/store/modules/userInfo"; | |||
import { loginApi } from "./api/login"; | |||
const userInfoModulesPinia = userInfoModules(); | |||
onLaunch(() => { | |||
console.log("App Launch!"); | |||
@@ -14,7 +14,6 @@ onLaunch(() => { | |||
success: function (res) { | |||
let uniPlatform = ""; | |||
let osName = ""; | |||
if (res.uniPlatform == "web") { | |||
uniPlatform = 1; | |||
} else if (res.uniPlatform == "mp-weixin") { | |||
@@ -22,7 +21,6 @@ onLaunch(() => { | |||
} else if (res.uniPlatform == "mp-toutiao") { | |||
uniPlatform = 3; | |||
} | |||
if (res.osName == "windows") { | |||
osName = 1; | |||
} else if (res.osName == "ios") { | |||
@@ -41,6 +39,67 @@ onLaunch(() => { | |||
console.log(res.osName, osName, "System"); | |||
}, | |||
}); | |||
// 微信登录授权 | |||
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.openId; | |||
uni.hideLoading(); | |||
if (res2.code == 200) { | |||
uni.redirectTo({ | |||
url: "pages/home/index", | |||
}); | |||
} else { | |||
// uni.redirectTo({ | |||
// url: "pages/index/index", | |||
// }); | |||
uni.showToast({ | |||
title: "登录失败,请重试", | |||
icon: "none", | |||
}); | |||
} | |||
} catch (error) { | |||
// uni.redirectTo({ | |||
// url: "pages/index/index", | |||
// }); | |||
uni.showToast({ | |||
title: "登录失败,请重试", | |||
icon: "none", | |||
}); | |||
} | |||
} else { | |||
// uni.redirectTo({ | |||
// url: "pages/index/index", | |||
// }); | |||
uni.showToast({ | |||
title: "登录失败,请重试", | |||
icon: "none", | |||
}); | |||
} | |||
}, | |||
fail: (err) => { | |||
// uni.redirectTo({ | |||
// url: "pages/index/index", | |||
// }); | |||
uni.showToast({ | |||
title: "登录失败,请重试", | |||
icon: "none", | |||
}); | |||
}, | |||
}); | |||
}); | |||
onShow(() => { | |||
console.log("App Show!"); | |||
@@ -5,4 +5,21 @@ export function voiceTotalApi() { | |||
url: `api/voiceMould/voiceTotal`, | |||
method: 'GET', | |||
}) | |||
} | |||
// 微信登录 | |||
export function loginApi(data) { | |||
return request({ | |||
url: `api/miniApp/login`, | |||
method: 'POST', | |||
data | |||
}) | |||
} | |||
// 授权手机号登陆 | |||
export function loginPhoneApi(data) { | |||
return request({ | |||
url: `api/miniApp/loginPhone`, | |||
method: 'POST', | |||
data | |||
}) | |||
} |
@@ -1,9 +1,5 @@ | |||
<template> | |||
<div class="page"> | |||
<view class="title imgContenBox" | |||
><image src="../../assets/text/closeStyleText.png" mode="aspectFit" | |||
/></view> | |||
<u-list class="styleListBox" @scrolltolower="scrolltolower"> | |||
<u-list-item class="glodYBox"> | |||
<u-list-item | |||
@@ -12,8 +8,9 @@ | |||
class="styleListBoxItme" | |||
> | |||
<view class="styleInfo" @click="createPhoto"> | |||
<image src="../../assets/icon/uploadImg.png" /> | |||
<text>样式风格</text> | |||
<image src="../../assets/img/homeImg.png" mode="aspectFit" /> | |||
<text class="name">样式风格</text> | |||
<text class="single">单人</text> | |||
</view> | |||
</u-list-item> | |||
</u-list-item> | |||
@@ -48,41 +45,33 @@ function createPhoto() { | |||
</script> | |||
<style lang="scss"> | |||
.title { | |||
width: 100%; | |||
height: 80rpx; | |||
image { | |||
width: 40%; | |||
height: 80rpx; | |||
} | |||
} | |||
scroll-view { | |||
width: 750rpx; | |||
} | |||
.uni-scroll-view-content { | |||
width: 750rpx; | |||
display: flex !important; | |||
flex-direction: row !important; | |||
flex-wrap: wrap !important; | |||
justify-content: space-between !important; | |||
.styleInfo { | |||
width: 350rpx; | |||
height: 400rpx; | |||
margin-bottom: 50rpx; | |||
image { | |||
width: 350rpx; | |||
height: 350rpx; | |||
} | |||
text { | |||
width: 100%; | |||
height: 50rpx; | |||
text-align: center; | |||
line-height: 50rpx; | |||
} | |||
} | |||
} | |||
// scroll-view { | |||
// width: 750rpx; | |||
// } | |||
// .uni-scroll-view-content { | |||
// width: 750rpx; | |||
// display: flex !important; | |||
// flex-direction: row !important; | |||
// flex-wrap: wrap !important; | |||
// justify-content: space-between !important; | |||
// .styleInfo { | |||
// width: 350rpx; | |||
// height: 400rpx; | |||
// margin-bottom: 50rpx; | |||
// image { | |||
// width: 350rpx; | |||
// height: 350rpx; | |||
// } | |||
// text { | |||
// width: 100%; | |||
// height: 50rpx; | |||
// text-align: center; | |||
// line-height: 50rpx; | |||
// } | |||
// } | |||
// } | |||
.u-list { | |||
width: 100%; | |||
width: 650rpx; | |||
.glodYBox { | |||
display: flex !important; | |||
flex-direction: row !important; | |||
@@ -96,20 +85,38 @@ scroll-view { | |||
justify-content: space-between !important; | |||
} | |||
.styleInfo { | |||
position: relative; | |||
display: flex !important; | |||
flex-wrap: wrap !important; | |||
width: 350rpx; | |||
height: 400rpx; | |||
width: 300rpx; | |||
height: 480rpx; | |||
margin-bottom: 50rpx; | |||
border-radius: 24rpx; | |||
overflow: hidden; | |||
image { | |||
width: 350rpx; | |||
height: 350rpx; | |||
width: 300rpx; | |||
height: 400rpx; | |||
} | |||
text { | |||
.name { | |||
background-color: red; | |||
width: 100%; | |||
height: 50rpx; | |||
height: 80rpx; | |||
text-align: center; | |||
line-height: 80rpx; | |||
font-size: 30rpx; | |||
font-weight: bold; | |||
} | |||
.single { | |||
position: absolute; | |||
top: 11rpx; | |||
right: 13rpx; | |||
width: 72rpx; | |||
height: 41rpx; | |||
text-align: center; | |||
line-height: 50rpx; | |||
line-height: 41rpx; | |||
background: #000000; | |||
opacity: 0.4; | |||
border-radius: 12rpx; | |||
} | |||
} | |||
} | |||
@@ -4,15 +4,17 @@ | |||
><image src="../../assets/img/img1.png" mode="aspectFit" | |||
/></view> | |||
<text class="name">风格名称</text> | |||
<view class="buttonBox"> | |||
<up-button | |||
type="primary" | |||
text="开始制作写真" | |||
color="linear-gradient(to right, rgb(66, 83, 216), rgb(213, 51, 186))" | |||
@click="createing" | |||
></up-button> | |||
<view class="orangeBtn" @click="createing" | |||
>开始制作写真 | |||
<view class="free"> | |||
<image src="../../assets/icon/blackBG.png" mode="aspectFit" /> | |||
<text>耗金币2枚</text> | |||
</view> | |||
</view> | |||
<view class="balance" | |||
>金币余额: 30 | |||
<image src="../../assets/icon/coin.png" mode="aspectFit" /> | |||
</view> | |||
<text class="balance">金币余额: 30</text> | |||
</view> | |||
</template> | |||
@@ -37,9 +39,10 @@ function createing() { | |||
<style lang="scss"> | |||
.showImgBox { | |||
width: 710rpx; | |||
height: 800rpx; | |||
background-color: #ccc; | |||
margin-top: 30rpx; | |||
width: 540rpx; | |||
height: 720rpx; | |||
// background-color: #ccc; | |||
border-radius: 30rpx; | |||
image { | |||
max-width: 100%; | |||
@@ -47,15 +50,51 @@ function createing() { | |||
} | |||
} | |||
.name { | |||
margin-top: 30rpx; | |||
margin-bottom: 50rpx; | |||
margin-top: 80rpx; | |||
margin-bottom: 110rpx; | |||
font-size: 44rpx; | |||
font-weight: 800; | |||
} | |||
.buttonBox { | |||
width: 60%; | |||
.orangeBtn { | |||
position: relative; | |||
.free { | |||
position: absolute; | |||
top: -18rpx; | |||
right: -70rpx; | |||
width: 142rpx; | |||
height: 50rpx; | |||
image { | |||
position: absolute; | |||
top: 0; | |||
left: 0; | |||
width: 100%; | |||
height: 100%; | |||
z-index: 1; | |||
} | |||
text { | |||
position: absolute; | |||
top: 0rpx; | |||
left: 0; | |||
line-height: 49rpx; | |||
width: 100%; | |||
height: 100%; | |||
font-size: 22rpx; | |||
font-weight: 900; | |||
z-index: 2; | |||
} | |||
} | |||
} | |||
.balance { | |||
margin-top: 30rpx; | |||
font-size: 40rpx; | |||
display: inline-block; | |||
margin-top: 70rpx; | |||
font-size: 30rpx; | |||
font-weight: bold; | |||
line-height: 33rpx; | |||
image { | |||
display: inline-block; | |||
width: 33rpx; | |||
height: 33rpx; | |||
vertical-align: middle; | |||
} | |||
} | |||
</style> |
@@ -4,47 +4,30 @@ | |||
<view class="imgContenBox"> | |||
<image src="../../assets/img/img2.png" 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" | |||
@click="goLookPhoto" | |||
> | |||
<image src="../../assets/img/img2.png" mode="aspectFit" /> | |||
</view> | |||
<view class="changeStyle" @click="changeStyle">更换风格</view> | |||
</view> | |||
<!-- 轮播图 --> | |||
<u-swiper | |||
:list="swiperList" | |||
previousMargin="60" | |||
nextMargin="60" | |||
circular | |||
indicator | |||
indicatorMode="line" | |||
:autoplay="false" | |||
radius="5" | |||
bgColor="#333" | |||
@click="goLookPhoto" | |||
></u-swiper> | |||
<!-- 生成中的底部栏 --> | |||
<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 class="orangeBtn" @click="changeStyle">继续制作写真</view> | |||
</view> | |||
<!-- 生成成功的底部栏 --> | |||
<view class="createEd"> | |||
<text class="look">点击查看高清写真</text> | |||
<view class="buttonBox"> | |||
<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="orangeBtn anew" @click="changeStyle">重新生成</view> | |||
</view> | |||
</view> | |||
</template> | |||
@@ -56,7 +39,11 @@ import { voiceTotalApi } from "../../api/login.js"; | |||
//#endregion | |||
//#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", | |||
]; | |||
//#endregion --------------------- | |||
//#region 页面跳转 | |||
@@ -79,23 +66,30 @@ function goLookPhoto() { | |||
<style lang="scss"> | |||
.topBox { | |||
margin-top: 20rpx; | |||
display: flex; | |||
align-items: flex-end; | |||
justify-content: flex-start; | |||
align-items: center; | |||
justify-content: space-between; | |||
width: 100%; | |||
height: 200rpx; | |||
.imgContenBox { | |||
width: 200rpx; | |||
width: 150rpx; | |||
height: 100%; | |||
background-color: #ccc; | |||
border-radius: 30rpx; | |||
image { | |||
width: 200rpx; | |||
width: 150rpx; | |||
max-height: 200rpx; | |||
} | |||
} | |||
button { | |||
width: 200rpx !important; | |||
margin: 0 50rpx; | |||
.changeStyle { | |||
margin-right: 70rpx; | |||
width: 220rpx; | |||
height: 72rpx; | |||
border: 1px solid #ff4f00; | |||
border-radius: 36rpx; | |||
text-align: center; | |||
line-height: 72rpx; | |||
color: #ff4f00; | |||
} | |||
} | |||
.imgListBox { | |||
@@ -117,7 +111,10 @@ function goLookPhoto() { | |||
} | |||
} | |||
} | |||
.u-swiper { | |||
width: 100%; | |||
height: 695rpx !important; | |||
} | |||
.createIng, | |||
.createEd { | |||
width: 100%; | |||
@@ -126,12 +123,15 @@ function goLookPhoto() { | |||
align-items: center; | |||
justify-content: center; | |||
.time { | |||
font-size: 40rpx; | |||
font-size: 26rpx; | |||
font-weight: 900; | |||
margin-top: 20rpx; | |||
margin-bottom: 10rpx; | |||
margin-bottom: 20rpx; | |||
} | |||
.inform { | |||
font-size: 22rpx; | |||
color: #ffffff; | |||
opacity: 0.5; | |||
margin-bottom: 30rpx; | |||
} | |||
.look { | |||
@@ -140,8 +140,8 @@ function goLookPhoto() { | |||
margin-top: 20rpx; | |||
margin-bottom: 30rpx; | |||
} | |||
.buttonBox { | |||
width: 50%; | |||
.anew { | |||
margin-top: 120rpx; | |||
} | |||
} | |||
</style> |
@@ -37,7 +37,8 @@ | |||
<script setup> | |||
//#region 导入 | |||
import { ref, reactive } from "vue"; | |||
import { voiceTotalApi } from "../../api/login.js"; | |||
import { voiceTotalApi, loginPhoneApi } from "../../api/login.js"; | |||
//#endregion | |||
//#region 勾选 | |||
@@ -48,12 +49,9 @@ const checkboxList1 = reactive([ | |||
disabled: false, | |||
}, | |||
]); | |||
function toCreate() { | |||
async function toCreate() { | |||
if (checkboxValue1.value[0]) { | |||
handleLogin(); | |||
uni.redirectTo({ | |||
url: "/pages/uploadPhoto/uploadPhoto", | |||
}); | |||
await handleLogin(); | |||
} else { | |||
uni.showModal({ | |||
title: "提示", | |||
@@ -61,29 +59,31 @@ function toCreate() { | |||
success: function (res) { | |||
if (res.confirm) { | |||
handleLogin(); | |||
uni.redirectTo({ | |||
url: "/pages/uploadPhoto/uploadPhoto", | |||
}); | |||
} else if (res.cancel) { | |||
} | |||
}, | |||
}); | |||
} | |||
} | |||
function handleLogin() { | |||
uni.login({ | |||
provider: "weixin", // 使用微信登录授权 | |||
success: (res) => { | |||
console.log(res); | |||
if (res.code) { | |||
// 获取到微信授权登录的code,将code发送给后端 | |||
// this.loginWithCode(res.code); | |||
} else { | |||
console.log("登录失败:", res.errMsg); | |||
} | |||
const userInfo = ref(null); | |||
async function handleLogin() { | |||
// uni.getUserInfo({}); | |||
uni.getUserProfile({ | |||
desc: "用于完善用户信息", | |||
success: (res1) => { | |||
userInfo.value = res1.userInfo; | |||
console.log(res1); | |||
uni.showToast({ | |||
icon: "none", | |||
title: "获取成功", | |||
}); | |||
}, | |||
fail: (err) => { | |||
console.log("登录失败:", err.errMsg); | |||
console.log(err); | |||
uni.showToast({ | |||
icon: "none", | |||
title: "用户拒绝获取", | |||
}); | |||
}, | |||
}); | |||
} | |||
@@ -14,7 +14,7 @@ | |||
<text>我要让照片说话</text> | |||
<view class="free"> | |||
<image src="../../assets/icon/blackBG.png" mode="aspectFit" /> | |||
<text>消耗金币2枚</text> | |||
<text>耗金币2枚</text> | |||
</view> | |||
</view> | |||
<view @click="downloadImg" class="uploadBtn"> | |||
@@ -203,9 +203,9 @@ function bueCoin() { | |||
font-weight: 900; | |||
.free { | |||
position: absolute; | |||
top: -25rpx; | |||
right: -80rpx; | |||
width: 185rpx; | |||
top: -18rpx; | |||
right: -70rpx; | |||
width: 142rpx; | |||
height: 50rpx; | |||
image { | |||
position: absolute; | |||
@@ -217,9 +217,9 @@ function bueCoin() { | |||
} | |||
text { | |||
position: absolute; | |||
top: -25rpx; | |||
left: 50%; | |||
transform: translate(-50%, 0); | |||
top: 0rpx; | |||
left: 0; | |||
line-height: 49rpx; | |||
width: 100%; | |||
height: 100%; | |||
font-size: 22rpx; | |||
@@ -3,7 +3,7 @@ import { ref, reactive } from "vue"; | |||
export const userInfoModules = defineStore("userInfoStore", () => { | |||
// state | |||
const userInfo = ref(null) | |||
const openId = ref(null) | |||
/** | |||
* @description:依托平台:(web、mp-weixin、mp-toutiao) | |||
* @example 平台名:"web-H5",枚举值:1 | |||
@@ -63,6 +63,17 @@ view { | |||
width: 50%; | |||
} | |||
.orangeBtn { | |||
background-color: #FF4F00; | |||
width: 520rpx; | |||
height: 100rpx; | |||
line-height: 100rpx; | |||
font-size: 30rpx; | |||
font-weight: bold; | |||
text-align: center; | |||
border-radius: 100rpx; | |||
} | |||
// 主要文字颜色和图片颜色 | |||
// .imgggg { | |||
// color: #4452d7; | |||
@@ -1,4 +1,5 @@ | |||
const BASE_URL = 'https://test.metavatar.cc/C/'; | |||
// const BASE_URL = 'https://test.metavatar.cc/'; | |||
// 通用的网络请求函数,接收请求的URL和请求参数,返回一个Promise | |||
const request = (requestObj) => { | |||
@@ -6,7 +7,7 @@ const request = (requestObj) => { | |||
uni.request({ | |||
url: BASE_URL + requestObj.url, | |||
method: requestObj.method, // 这里可以根据需要更改请求方法 | |||
data: requestObj.params, | |||
data: requestObj.data, | |||
success: (res) => { | |||
if (res.statusCode === 200) { | |||
resolve(res.data) | |||