@@ -1,20 +1,26 @@ | |||||
<!DOCTYPE html> | <!DOCTYPE html> | ||||
<html lang="en"> | <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": "智像相册", | "navigationBarTitleText": "智像相册", | ||||
"navigationBarBackgroundColor": "#F8F8F8", | "navigationBarBackgroundColor": "#F8F8F8", | ||||
"backgroundColor": "#F8F8F8", | "backgroundColor": "#F8F8F8", | ||||
"navigationStyle": "custom" | |||||
"navigationStyle": "custom", | |||||
"rpxCalcMaxDeviceWidth": 1080, | |||||
"rpxCalcBaseDeviceWidth": 1080, | |||||
"rpxCalcIncludeWidth": 1080 | |||||
} | } | ||||
} | } |
@@ -7,8 +7,8 @@ | |||||
lineWidth="50" | lineWidth="50" | ||||
lineColor="#ff4f00" | lineColor="#ff4f00" | ||||
:itemStyle="{ width: '150rpx', height: '90rpx', padding: '0' }" | :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" | @click="chooseTab" | ||||
></u-tabs> | ></u-tabs> | ||||
<view class="moreTabs"> | <view class="moreTabs"> | ||||
@@ -69,7 +69,11 @@ | |||||
<text class="single">{{ peopleNum(item.mouldType) }}</text> | <text class="single">{{ peopleNum(item.mouldType) }}</text> | ||||
</view> | </view> | ||||
</u-list-item> | </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-item> | ||||
</u-list> | </u-list> | ||||
</view> | </view> | ||||
@@ -186,15 +190,15 @@ function peopleNum(num) { | |||||
//#region 点击图片 | //#region 点击图片 | ||||
function createPhoto(item) { | 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 --------------------- | //#endregion --------------------- | ||||
@@ -208,7 +212,11 @@ function createPhoto(item) { | |||||
.tabBox { | .tabBox { | ||||
position: relative; | position: relative; | ||||
width: 100vw; | width: 100vw; | ||||
.u-tabs { | .u-tabs { | ||||
:deep(.u-tabs__wrapper__nav__item__text) { | |||||
font-size: 30rpx; | |||||
} | |||||
// width: calc(100% - 100rpx); | // width: calc(100% - 100rpx); | ||||
width: 100%; | width: 100%; | ||||
color: #fff !important; | color: #fff !important; | ||||
@@ -239,6 +247,15 @@ function createPhoto(item) { | |||||
} | } | ||||
} | } | ||||
// <!-- 更多tab弹出层 --> | // <!-- 更多tab弹出层 --> | ||||
.u-popup { | |||||
:deep(.u-popup__content__close--top-right) { | |||||
top: 35rpx; | |||||
right: 35rpx; | |||||
} | |||||
:deep(.uicon-close) { | |||||
font-size: 30rpx !important; | |||||
} | |||||
} | |||||
.popupBox { | .popupBox { | ||||
padding-bottom: 30rpx; | padding-bottom: 30rpx; | ||||
.type { | .type { | ||||
@@ -1,7 +1,126 @@ | |||||
<template> | <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> | </template> | ||||
<script setup> | <script setup> | ||||
//#region 导入 | |||||
import { ref } from "vue"; | 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> | </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> | </script> | ||||
<style lang="scss" scoped> | <style lang="scss" scoped> | ||||
.page { | .page { | ||||
padding: 0; | |||||
position: relative; | position: relative; | ||||
width: 100vw; | width: 100vw; | ||||
height: 100vh; | height: 100vh; | ||||
@@ -46,7 +46,6 @@ view { | |||||
} | } | ||||
} | } | ||||
.orangeBtn { | .orangeBtn { | ||||
background-color: #FF4F00; | background-color: #FF4F00; | ||||
width: 520rpx; | width: 520rpx; | ||||
@@ -71,4 +70,20 @@ view { | |||||
border-radius: 100rpx; | border-radius: 100rpx; | ||||
color: #FF4F00; | color: #FF4F00; | ||||
border: 2rpx solid #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; | |||||
} | } |