feat:添加原图上传，明星选择
This commit is contained in:
zerosaturation
parent
3cd68acf6d
commit
3006726679
@ -177,7 +177,7 @@
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "pages/castlove/create",
|
||||
"path": "pages/castlove/self-created/create",
|
||||
"style": {
|
||||
"navigationStyle": "custom",
|
||||
"app-plus": {
|
||||
|
||||
@ -1,117 +0,0 @@
|
||||
/**
|
||||
* 铸爱 create 页 — 镭射卡上传区样式（独立 CSS，由 create.vue import，确保各端构建必进包）
|
||||
* 根类 castlove-laser-upload-root 全局唯一，避免 scoped / 第二 style 块在部分端未生效
|
||||
*/
|
||||
.castlove-laser-upload-root {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
/* 略偏竖版小卡比例，接近设计稿「大卡 + 内虚线」观感 */
|
||||
height: 520rpx;
|
||||
box-sizing: border-box;
|
||||
border-radius: 32rpx;
|
||||
border: 1rpx solid rgba(255, 255, 255, 0.38);
|
||||
background: rgba(255, 255, 255, 0.18);
|
||||
backdrop-filter: blur(22rpx);
|
||||
-webkit-backdrop-filter: blur(22rpx);
|
||||
overflow: hidden;
|
||||
box-shadow:
|
||||
0 22rpx 56rpx rgba(40, 22, 80, 0.36),
|
||||
inset 0 0 0 1rpx rgba(255, 255, 255, 0.22);
|
||||
}
|
||||
|
||||
.castlove-laser-upload-root .uploaded-image {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border-radius: 24rpx;
|
||||
box-shadow: inset 0 0 0 1rpx rgba(255, 255, 255, 0.22);
|
||||
}
|
||||
|
||||
.castlove-laser-upload-root .upload-laser-stack {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
/* 与设计稿一致：卡内淡色「卡面 / 人像」底图（与工艺选择同款素材） */
|
||||
.castlove-laser-upload-root .upload-laser-photo-bg {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
z-index: 0;
|
||||
opacity: 0.22;
|
||||
pointer-events: none;
|
||||
filter: saturate(1.15) contrast(0.92);
|
||||
}
|
||||
|
||||
.castlove-laser-upload-root .upload-laser-watermark {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
z-index: 1;
|
||||
opacity: 1;
|
||||
pointer-events: none;
|
||||
/* 叠在底图上：压暗边缘 + 轻微幻彩，避免只剩「灰蒙一块」 */
|
||||
background:
|
||||
linear-gradient(
|
||||
118deg,
|
||||
rgba(255, 170, 220, 0.12) 0%,
|
||||
transparent 40%,
|
||||
rgba(170, 210, 255, 0.1) 62%,
|
||||
transparent 82%,
|
||||
rgba(255, 210, 190, 0.08) 100%
|
||||
),
|
||||
radial-gradient(ellipse 55% 75% at 50% 100%, rgba(35, 22, 70, 0.45), transparent 58%),
|
||||
radial-gradient(ellipse 40% 48% at 50% 32%, rgba(100, 75, 150, 0.28), transparent 55%),
|
||||
linear-gradient(185deg, rgba(255, 220, 245, 0.08) 0%, rgba(55, 35, 95, 0.25) 100%);
|
||||
}
|
||||
|
||||
.castlove-laser-upload-root .upload-laser-inset {
|
||||
position: absolute;
|
||||
/* 收紧留白：虚线框更贴外框，接近设计稿「整卡即相框」 */
|
||||
left: 14rpx;
|
||||
right: 14rpx;
|
||||
top: 14rpx;
|
||||
bottom: 14rpx;
|
||||
z-index: 2;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.castlove-laser-upload-root .upload-laser-dashed-inner {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
box-sizing: border-box;
|
||||
border: 2rpx dashed rgba(255, 255, 255, 0.95);
|
||||
border-radius: 26rpx;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 20rpx;
|
||||
padding: 24rpx 16rpx;
|
||||
background: rgba(255, 255, 255, 0.02);
|
||||
}
|
||||
|
||||
.castlove-laser-upload-root .upload-plus--laser {
|
||||
font-size: 96rpx;
|
||||
line-height: 0.88;
|
||||
color: #ffffff;
|
||||
font-weight: 100;
|
||||
text-shadow: 0 2rpx 18rpx rgba(60, 30, 100, 0.35);
|
||||
}
|
||||
|
||||
.castlove-laser-upload-root .upload-text--laser {
|
||||
font-size: 28rpx;
|
||||
color: rgba(255, 255, 255, 0.96);
|
||||
font-weight: 500;
|
||||
letter-spacing: 1rpx;
|
||||
text-shadow: 0 2rpx 12rpx rgba(40, 20, 80, 0.4);
|
||||
}
|
||||
File diff suppressed because it is too large
Load Diff
@ -2,80 +2,56 @@
|
||||
<view class="success-container">
|
||||
<!-- 背景图片 -->
|
||||
<image class="background-image" src="/static/background/exhibitionSuccess.png" mode="aspectFill"></image>
|
||||
|
||||
|
||||
<!-- 蒙层 -->
|
||||
<view class="background-overlay"></view>
|
||||
|
||||
|
||||
<!-- Header组件 -->
|
||||
<!-- <Header :showBack="true" :showGuideIcon="false" :showTaskIcon="false" :showStarActivityIcon="false" backIconColor="#e6e6e6" /> -->
|
||||
|
||||
|
||||
<!-- 内容区域 -->
|
||||
<view class="content-wrapper">
|
||||
<!-- 成功提示文字 -->
|
||||
<view class="success-title">
|
||||
<text class="title-text">铸造成功</text>
|
||||
</view>
|
||||
|
||||
|
||||
<!-- 藏品展示区域 -->
|
||||
<view class="nft-display-section">
|
||||
<!-- 光栅卡：单张工作台预览（陀螺仪） -->
|
||||
<view v-if="isLenticular" class="lenticular-result-wrap">
|
||||
<view class="lenticular-result-card">
|
||||
<view class="card-wrapper craft-card-wrapper">
|
||||
<image
|
||||
class="card-frame"
|
||||
src="/static/square/gerenzhongxincangpinkuang.png"
|
||||
mode="aspectFit"
|
||||
/>
|
||||
<image class="card-frame" src="/static/square/gerenzhongxincangpinkuang.png"
|
||||
mode="aspectFit" />
|
||||
<view class="craft-lenticular-slot">
|
||||
<LenticularCard
|
||||
v-if="lenticularLayers.length > 0"
|
||||
class="craft-lenticular-card"
|
||||
:layers="lenticularLayers"
|
||||
:transforms="layerTransforms"
|
||||
:gyro-source="gyroSourceLabel"
|
||||
:skip-built-in-touch="true"
|
||||
tilt-hint-text="晃动查看"
|
||||
:shimmer-mid-opacity="0.16"
|
||||
@simulate="simulate"
|
||||
/>
|
||||
<LenticularCard v-if="lenticularLayers.length > 0" class="craft-lenticular-card"
|
||||
:layers="lenticularLayers" :transforms="layerTransforms"
|
||||
:gyro-source="gyroSourceLabel" :skip-built-in-touch="true" tilt-hint-text="晃动查看"
|
||||
:shimmer-mid-opacity="0.16" @simulate="simulate" />
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<!-- 镭射卡：WebGL 动态预览（效果直接渲染在图片上） -->
|
||||
<view v-else-if="isLaser && showCoverCard" class="cover-card-wrap">
|
||||
<view class="laser-result-card-preview">
|
||||
<LaserPreviewCanvas
|
||||
:variant-path="nftData.image"
|
||||
:cutout-path="laserCutoutPath"
|
||||
:fallback-path="nftData.image"
|
||||
:preset="laserPreset"
|
||||
:variant-index="laserPresetIndex"
|
||||
:paused="false"
|
||||
/>
|
||||
<!-- 镭射卡：WebGL 动态预览（效果直接渲染在图片上） -->
|
||||
<view v-else-if="isLaser && showCoverCard" class="cover-card-wrap">
|
||||
<view class="laser-result-card-preview">
|
||||
<LaserPreviewCanvas :variant-path="nftData.image" :cutout-path="laserCutoutPath"
|
||||
:fallback-path="nftData.image" :preset="laserPreset" :variant-index="laserPresetIndex"
|
||||
:paused="false" />
|
||||
</view>
|
||||
</view>
|
||||
<!-- 普通单图：封面展示 -->
|
||||
<view v-else-if="showCoverCard" class="cover-card-wrap">
|
||||
<NftCard :cover-image="nftData.image" :width="280" :height="280" :custom-style="nftCardStyle" />
|
||||
</view>
|
||||
</view>
|
||||
<!-- 普通单图：封面展示 -->
|
||||
<view v-else-if="showCoverCard" class="cover-card-wrap">
|
||||
<NftCard
|
||||
:cover-image="nftData.image"
|
||||
:width="280"
|
||||
:height="280"
|
||||
:custom-style="nftCardStyle"
|
||||
/>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
|
||||
<!-- 铸造成功角色图片 -->
|
||||
<view class="character-section">
|
||||
<image
|
||||
class="character-image"
|
||||
src="/static/nft/mint-success-char.png"
|
||||
mode="aspectFit"
|
||||
></image>
|
||||
<image class="character-image" src="/static/nft/mint-success-char.png" mode="aspectFit"></image>
|
||||
</view>
|
||||
|
||||
|
||||
<!-- 查看详情按钮 -->
|
||||
<view class="button-section">
|
||||
<button class="btn-primary" @click="handleViewDetails">查看详情</button>
|
||||
@ -190,32 +166,32 @@ onMounted(async () => {
|
||||
assetTags.includes('craft:laser') ||
|
||||
dataTags.includes('craft:laser')
|
||||
|
||||
nftData.value = {
|
||||
image: imageUrl,
|
||||
name: asset.name || data.name || '未命名藏品',
|
||||
event: asset.event || data.event || '',
|
||||
remark: asset.remark || data.remark || '',
|
||||
materialType: asset.material_type || data.materialType || '',
|
||||
is_lenticular: asset.is_lenticular || data.is_lenticular || false,
|
||||
is_laser: isLaser,
|
||||
bg_image: bgImageUrl,
|
||||
};
|
||||
console.log('[success] nftData 设置后:', nftData.value);
|
||||
// 镭射卡：读取预设索引和抠图
|
||||
if (isLaser && typeof data.laser_preset_index === 'number') {
|
||||
laserPresetIndex.value = data.laser_preset_index
|
||||
}
|
||||
if (isLaser && data.laser_cutout_path) {
|
||||
laserCutoutPath.value = data.laser_cutout_path
|
||||
}
|
||||
isLaser.value = isLaser
|
||||
// 如果是光栅卡，构建图层
|
||||
if ((asset.is_lenticular || data.is_lenticular) && bgImageUrl && imageUrl) {
|
||||
isLenticular.value = true
|
||||
lenticularLayers.value = buildLenticularLayersTwo(bgImageUrl, imageUrl)
|
||||
scheduleTiltStart()
|
||||
}
|
||||
} else {
|
||||
nftData.value = {
|
||||
image: imageUrl,
|
||||
name: asset.name || data.name || '未命名藏品',
|
||||
event: asset.event || data.event || '',
|
||||
remark: asset.remark || data.remark || '',
|
||||
materialType: asset.material_type || data.materialType || '',
|
||||
is_lenticular: asset.is_lenticular || data.is_lenticular || false,
|
||||
is_laser: isLaser,
|
||||
bg_image: bgImageUrl,
|
||||
};
|
||||
console.log('[success] nftData 设置后:', nftData.value);
|
||||
// 镭射卡：读取预设索引和抠图
|
||||
if (isLaser && typeof data.laser_preset_index === 'number') {
|
||||
laserPresetIndex.value = data.laser_preset_index
|
||||
}
|
||||
if (isLaser && data.laser_cutout_path) {
|
||||
laserCutoutPath.value = data.laser_cutout_path
|
||||
}
|
||||
isLaser.value = isLaser
|
||||
// 如果是光栅卡，构建图层
|
||||
if ((asset.is_lenticular || data.is_lenticular) && bgImageUrl && imageUrl) {
|
||||
isLenticular.value = true
|
||||
lenticularLayers.value = buildLenticularLayersTwo(bgImageUrl, imageUrl)
|
||||
scheduleTiltStart()
|
||||
}
|
||||
} else {
|
||||
// API 返回异常，使用本地数据
|
||||
applyLocalNftData(data);
|
||||
}
|
||||
@ -305,7 +281,6 @@ onUnload(() => {
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
.success-container {
|
||||
position: relative;
|
||||
width: 100vw;
|
||||
@ -364,6 +339,7 @@ onUnload(() => {
|
||||
opacity: 0;
|
||||
transform: translateY(-30rpx);
|
||||
}
|
||||
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
@ -375,7 +351,7 @@ onUnload(() => {
|
||||
font-weight: bold;
|
||||
font-family: 'yt', sans-serif;
|
||||
color: #e6e6e6;
|
||||
text-shadow:
|
||||
text-shadow:
|
||||
0 4rpx 20rpx rgba(255, 107, 157, 0.8),
|
||||
0 2rpx 10rpx rgba(0, 0, 0, 0.5);
|
||||
}
|
||||
@ -424,6 +400,7 @@ onUnload(() => {
|
||||
opacity: 0;
|
||||
transform: scale(0.5);
|
||||
}
|
||||
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: scale(1);
|
||||
@ -445,6 +422,7 @@ onUnload(() => {
|
||||
opacity: 0;
|
||||
transform: translateY(30rpx);
|
||||
}
|
||||
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
@ -472,6 +450,7 @@ onUnload(() => {
|
||||
from {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
to {
|
||||
opacity: 1;
|
||||
}
|
||||
@ -488,7 +467,7 @@ onUnload(() => {
|
||||
border: none;
|
||||
background: linear-gradient(165deg, #F0E4B1 0%, #F08399 50%, #B94E73 90%, #834B9E 100%);
|
||||
color: #e6e6e6;
|
||||
box-shadow:
|
||||
box-shadow:
|
||||
0 0 20rpx rgba(255, 107, 157, 0.6),
|
||||
0 0 40rpx rgba(255, 140, 66, 0.4),
|
||||
0 4rpx 20rpx rgba(0, 0, 0, 0.3);
|
||||
|
||||
@ -326,7 +326,7 @@ const handleNext = async () => {
|
||||
|
||||
// 跳转到主页
|
||||
uni.reLaunch({
|
||||
url: '/pages/square/square'
|
||||
url: '/pages/profile/selectRole'
|
||||
});
|
||||
|
||||
} catch (error) {
|
||||
|
||||
Loading…
Reference in New Issue
Block a user