@@ -1,20 +1,26 @@ | |||
<!DOCTYPE html> | |||
<html lang="en"> | |||
<head> | |||
<meta charset="UTF-8" /> | |||
<script> | |||
var coverSupport = 'CSS' in window && typeof CSS.supports === 'function' && (CSS.supports('top: env(a)') || | |||
CSS.supports('top: constant(a)')) | |||
document.write( | |||
'<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0' + | |||
(coverSupport ? ', viewport-fit=cover' : '') + '" />') | |||
</script> | |||
<title></title> | |||
<!--preload-links--> | |||
<!--app-context--> | |||
</head> | |||
<body> | |||
<div id="app"><!--app-html--></div> | |||
<script type="module" src="/src/main.js"></script> | |||
</body> | |||
</html> | |||
<head> | |||
<meta charset="UTF-8" /> | |||
<meta name="viewport" | |||
content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no"> | |||
<script> | |||
var coverSupport = 'CSS' in window && typeof CSS.supports === 'function' && (CSS.supports('top: env(a)') || | |||
CSS.supports('top: constant(a)')) | |||
document.write( | |||
'<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0' + | |||
(coverSupport ? ', viewport-fit=cover' : '') + '" />') | |||
</script> | |||
<title></title> | |||
<!--preload-links--> | |||
<!--app-context--> | |||
</head> | |||
<body> | |||
<div id="app"><!--app-html--></div> | |||
<script type="module" src="/src/main.js"></script> | |||
</body> | |||
</html> |
@@ -38,6 +38,9 @@ | |||
"navigationBarTitleText": "智像相册", | |||
"navigationBarBackgroundColor": "#F8F8F8", | |||
"backgroundColor": "#F8F8F8", | |||
"navigationStyle": "custom" | |||
"navigationStyle": "custom", | |||
"rpxCalcMaxDeviceWidth": 1080, | |||
"rpxCalcBaseDeviceWidth": 1080, | |||
"rpxCalcIncludeWidth": 1080 | |||
} | |||
} |
@@ -7,8 +7,8 @@ | |||
lineWidth="50" | |||
lineColor="#ff4f00" | |||
:itemStyle="{ width: '150rpx', height: '90rpx', padding: '0' }" | |||
:activeStyle="{ color: '#ff4f00' }" | |||
:inactiveStyle="{ color: '#fff' }" | |||
:activeStyle="{ color: '#ff4f00', fontsize: '30rpx' }" | |||
:inactiveStyle="{ color: '#fff', fontsize: '30rpx' }" | |||
@click="chooseTab" | |||
></u-tabs> | |||
<view class="moreTabs"> | |||
@@ -69,7 +69,11 @@ | |||
<text class="single">{{ peopleNum(item.mouldType) }}</text> | |||
</view> | |||
</u-list-item> | |||
<view v-if="styleList.length == 0">暂无数据</view> | |||
<view | |||
v-if="styleList.length == 0" | |||
style="width: 100%; text-align: center" | |||
>暂无数据</view | |||
> | |||
</u-list-item> | |||
</u-list> | |||
</view> | |||
@@ -186,15 +190,15 @@ function peopleNum(num) { | |||
//#region 点击图片 | |||
function createPhoto(item) { | |||
if (item.mouldType == 1) { | |||
uni.navigateTo({ | |||
url: `/pages/closeStyle/goCreatePhoto?id=${item.id}`, | |||
}); | |||
} else { | |||
uni.navigateTo({ | |||
url: `/pages/closeStyle/multiplayer?id=${item.id}`, | |||
}); | |||
} | |||
uni.navigateTo({ | |||
url: `/pages/createing/index?id=${item.id}`, | |||
}); | |||
// if (item.mouldType == 1) { | |||
// } else { | |||
// uni.navigateTo({ | |||
// url: `/pages/closeStyle/multiplayer?id=${item.id}`, | |||
// }); | |||
// } | |||
} | |||
//#endregion --------------------- | |||
@@ -208,7 +212,11 @@ function createPhoto(item) { | |||
.tabBox { | |||
position: relative; | |||
width: 100vw; | |||
.u-tabs { | |||
:deep(.u-tabs__wrapper__nav__item__text) { | |||
font-size: 30rpx; | |||
} | |||
// width: calc(100% - 100rpx); | |||
width: 100%; | |||
color: #fff !important; | |||
@@ -239,6 +247,15 @@ function createPhoto(item) { | |||
} | |||
} | |||
// <!-- 更多tab弹出层 --> | |||
.u-popup { | |||
:deep(.u-popup__content__close--top-right) { | |||
top: 35rpx; | |||
right: 35rpx; | |||
} | |||
:deep(.uicon-close) { | |||
font-size: 30rpx !important; | |||
} | |||
} | |||
.popupBox { | |||
padding-bottom: 30rpx; | |||
.type { | |||
@@ -1,7 +1,126 @@ | |||
<template> | |||
<view> 主页 </view> | |||
<view class="page"> | |||
<!-- 毛玻璃 --> | |||
<view class="glass"> | |||
<image src="../../assets/img/homeImg.jpg" mode="scaleToFill" /> | |||
</view> | |||
<view class="showImgBox imgContenBox" | |||
><image :src="styleData.coverImg" | |||
/></view> | |||
<text class="name">{{ styleData.title }}</text> | |||
<view class="orangeBtn" @click="createing(styleData.id)" | |||
>开始制作写真 | |||
</view> | |||
</view> | |||
</template> | |||
<script setup> | |||
//#region 导入 | |||
import { ref } from "vue"; | |||
import { onLoad, onShow } from "@dcloudio/uni-app"; | |||
import { | |||
findByIdApi, | |||
findImageApi, | |||
createPhotoApi, | |||
} from "../../api/closeStyle"; | |||
//#endregion | |||
//#region 初始化 | |||
const styleId = ref(null); | |||
const styleData = ref({}); | |||
onLoad((options) => { | |||
styleId.value = options.id; | |||
// getInfo(); | |||
}); | |||
onShow(() => { | |||
getInfo(); | |||
}); | |||
async function getInfo() { | |||
try { | |||
const res = await findByIdApi(styleId.value); | |||
styleData.value = res.data; | |||
} catch (error) { | |||
uni.showToast({ | |||
title: "获取数据失败,请重试", | |||
icon: "none", | |||
}); | |||
} | |||
} | |||
//#endregion --------------------- | |||
//#region 生成写真照片 | |||
async function createing(id) { | |||
return; | |||
try { | |||
uni.showLoading({ | |||
title: "生成中...", | |||
mask: true, | |||
}); | |||
const res = await findImageApi(); | |||
let myImg = res.data.image; | |||
const data = { | |||
plat: uni.getStorageSync("plat"), | |||
digitalAvatarId: id, | |||
userImages: JSON.stringify([myImg]), | |||
title: styleData.value.title, | |||
}; | |||
const res2 = await createPhotoApi(data); | |||
console.log(res2); | |||
uni.navigateTo({ | |||
url: `/pages/created/index?id=${res2.data.id}`, | |||
}); | |||
uni.hideLoading(); | |||
} catch (error) { | |||
console.log(error); | |||
uni.hideLoading(); | |||
uni.showToast({ | |||
title: "生成失败,请重试", | |||
icon: "none", | |||
}); | |||
} | |||
} | |||
//#endregion --------------------- | |||
//#region | |||
//#endregion --------------------- | |||
</script> | |||
<style lang="scss" scoped></style> | |||
<style lang="scss"> | |||
.showImgBox { | |||
margin-top: 30rpx; | |||
width: 540rpx; | |||
height: 720rpx; | |||
// background-color: #ccc; | |||
border-radius: 30rpx; | |||
image { | |||
width: 100%; | |||
height: 100%; | |||
border-radius: 30rpx; | |||
} | |||
} | |||
.name { | |||
margin-top: 80rpx; | |||
margin-bottom: 110rpx; | |||
font-size: 44rpx; | |||
font-weight: 800; | |||
} | |||
.orangeBtn { | |||
position: relative; | |||
.free { | |||
position: absolute; | |||
top: -18rpx; | |||
right: -70rpx; | |||
width: 142rpx; | |||
height: 50rpx; | |||
background-color: #000; | |||
border-radius: 25rpx 25rpx 25rpx 0; | |||
font-size: 22rpx; | |||
font-weight: 900; | |||
line-height: 50rpx; | |||
text-align: center; | |||
} | |||
} | |||
</style> |
@@ -29,6 +29,7 @@ function toChooseStyle() { | |||
</script> | |||
<style lang="scss" scoped> | |||
.page { | |||
padding: 0; | |||
position: relative; | |||
width: 100vw; | |||
height: 100vh; | |||
@@ -46,7 +46,6 @@ view { | |||
} | |||
} | |||
.orangeBtn { | |||
background-color: #FF4F00; | |||
width: 520rpx; | |||
@@ -71,4 +70,20 @@ view { | |||
border-radius: 100rpx; | |||
color: #FF4F00; | |||
border: 2rpx solid #FF4F00; | |||
} | |||
// 部分样式1080下适配 | |||
.uni-toast { | |||
width: 280rpx; | |||
font-size: 30rpx; | |||
.uni-toast__icon { | |||
width: 50rpx !important; | |||
height: 50rpx !important; | |||
} | |||
} | |||
.uni-simple-toast__text { | |||
padding: 10rpx 20rpx; | |||
font-size: 30rpx; | |||
} |