feat: add gift points toast and refactor useTemplate layout
Add a new gift points notification toast to the AIGC home page for new user signup rewards. Restructure the useTemplate page's layout and SCSS, split the content container and add dedicated popup host for modal steps. Remove the unused UploadTemplatePreview component and all related references from the codebase.
This commit is contained in:
duanshuwen
@@ -1,42 +0,0 @@
|
||||
<template>
|
||||
<view
|
||||
class="upload-template-preview"
|
||||
:style="{ '--upload-accent': template.accent || '#0a4d46' }"
|
||||
>
|
||||
<image class="upload-template-image" :src="template.cover" mode="aspectFill" />
|
||||
<view class="upload-template-shade" />
|
||||
|
||||
<view class="upload-template-copy">
|
||||
<text class="upload-template-badge">{{ version.label || "图片版" }}</text>
|
||||
<text class="upload-template-title">{{ template.title }}</text>
|
||||
<text class="upload-template-desc">{{ previewDesc }}</text>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { computed } from "vue";
|
||||
|
||||
const props = defineProps({
|
||||
template: {
|
||||
type: Object,
|
||||
default: () => ({}),
|
||||
},
|
||||
version: {
|
||||
type: Object,
|
||||
default: () => ({}),
|
||||
},
|
||||
});
|
||||
|
||||
const previewDesc = computed(() => {
|
||||
if (props.template.desc) {
|
||||
return props.template.desc;
|
||||
}
|
||||
|
||||
return "上传一张清晰半身照，生成旅行内容";
|
||||
});
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
@import "./styles/index.scss";
|
||||
</style>
|
||||
@@ -1,85 +0,0 @@
|
||||
.upload-template-preview {
|
||||
position: relative;
|
||||
height: 286px;
|
||||
overflow: hidden;
|
||||
border-radius: 0 0 26px 26px;
|
||||
background: var(--upload-accent, #0a4d46);
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
.upload-template-image {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.upload-template-shade {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
background: linear-gradient(
|
||||
180deg,
|
||||
rgba(8, 22, 28, 0.04) 0%,
|
||||
rgba(8, 22, 28, 0.16) 46%,
|
||||
rgba(8, 22, 28, 0.72) 100%
|
||||
);
|
||||
}
|
||||
|
||||
.upload-template-copy {
|
||||
position: absolute;
|
||||
z-index: 1;
|
||||
right: 16px;
|
||||
bottom: 92px;
|
||||
left: 16px;
|
||||
min-width: 0;
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
.upload-template-badge {
|
||||
height: 20px;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
max-width: 130px;
|
||||
overflow: hidden;
|
||||
padding: 0 8px;
|
||||
border-radius: 999px;
|
||||
background: rgba(255, 255, 255, 0.72);
|
||||
color: #172033;
|
||||
font-size: 9px;
|
||||
line-height: 20px;
|
||||
font-weight: 900;
|
||||
letter-spacing: 0.7px;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.upload-template-title,
|
||||
.upload-template-desc {
|
||||
display: block;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.upload-template-title {
|
||||
margin-top: 10px;
|
||||
color: #ffffff;
|
||||
font-size: 24px;
|
||||
line-height: 30px;
|
||||
font-weight: 900;
|
||||
}
|
||||
|
||||
.upload-template-desc {
|
||||
margin-top: 6px;
|
||||
color: rgba(255, 255, 255, 0.78);
|
||||
font-size: 12px;
|
||||
line-height: 18px;
|
||||
font-weight: 800;
|
||||
}
|
||||
@@ -17,16 +17,31 @@
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.aigc-use-template-content {
|
||||
.aigc-use-template-body {
|
||||
position: relative;
|
||||
flex: 1 1 auto;
|
||||
min-height: 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.aigc-use-template-content {
|
||||
height: 100%;
|
||||
min-height: 0;
|
||||
overflow: hidden;
|
||||
padding: 24px 18px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.aigc-use-template-content.is-upload-guide {
|
||||
padding: 0 12px;
|
||||
.aigc-use-template-popup-host {
|
||||
position: fixed;
|
||||
z-index: 30;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.aigc-use-template-note {
|
||||
|
||||
@@ -8,11 +8,8 @@
|
||||
@recharge="handleRecharge"
|
||||
/>
|
||||
|
||||
<view
|
||||
class="aigc-use-template-content"
|
||||
:class="{ 'is-upload-guide': currentStep !== 'version' }"
|
||||
>
|
||||
<template v-if="currentStep === 'version'">
|
||||
<view class="aigc-use-template-body">
|
||||
<view class="aigc-use-template-content">
|
||||
<TemplateVersionHero :template="currentTemplate" />
|
||||
|
||||
<VersionOptionList
|
||||
@@ -24,28 +21,24 @@
|
||||
<text class="aigc-use-template-note">
|
||||
动效视频版会先生成图片底图，再升级为 5秒内动效视频。
|
||||
</text>
|
||||
</template>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<template v-else>
|
||||
<UploadTemplatePreview
|
||||
:template="currentTemplate"
|
||||
:version="currentVersion"
|
||||
/>
|
||||
<PhotoGuidePanel
|
||||
v-if="currentStep === 'uploadGuide'"
|
||||
:avatar-src="guideAvatar"
|
||||
:positive-examples="positiveExamples"
|
||||
:negative-examples="negativeExamples"
|
||||
@close="handleCloseGuide"
|
||||
@confirm="handleConfirmGuide"
|
||||
/>
|
||||
<PhotoPickDrawer
|
||||
v-else
|
||||
@close="handleCloseGuide"
|
||||
@camera="handlePickCamera"
|
||||
@album="handlePickAlbum"
|
||||
/>
|
||||
</template>
|
||||
<view v-if="currentStep === 'uploadGuide'" class="aigc-use-template-popup-host">
|
||||
<PhotoGuidePanel
|
||||
:avatar-src="guideAvatar"
|
||||
:positive-examples="positiveExamples"
|
||||
:negative-examples="negativeExamples"
|
||||
@close="handleCloseGuide"
|
||||
@confirm="handleConfirmGuide"
|
||||
/>
|
||||
</view>
|
||||
<view v-if="currentStep === 'photoPick'" class="aigc-use-template-popup-host">
|
||||
<PhotoPickDrawer
|
||||
@close="handleCloseGuide"
|
||||
@camera="handlePickCamera"
|
||||
@album="handlePickAlbum"
|
||||
/>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
@@ -59,7 +52,6 @@ import guideAvatar from "./assets/xiaoqi-avatar.png";
|
||||
import PhotoGuidePanel from "./components/PhotoGuidePanel/index.vue";
|
||||
import PhotoPickDrawer from "./components/PhotoPickDrawer/index.vue";
|
||||
import TemplateVersionHero from "./components/TemplateVersionHero/index.vue";
|
||||
import UploadTemplatePreview from "./components/UploadTemplatePreview/index.vue";
|
||||
import VersionOptionList from "./components/VersionOptionList/index.vue";
|
||||
import { negativeExamples, positiveExamples } from "./data/photoGuideExamples.js";
|
||||
import { versionOptions } from "./data/versionOptions.js";
|
||||
@@ -73,10 +65,6 @@ const currentTemplate = computed(() => {
|
||||
return aigcTemplates.find((item) => item.id === templateId.value) || aigcTemplates[0] || {};
|
||||
});
|
||||
|
||||
const currentVersion = computed(() => {
|
||||
return versionOptions.find((item) => item.value === selectedVersion.value) || versionOptions[0] || {};
|
||||
});
|
||||
|
||||
onLoad((query = {}) => {
|
||||
templateId.value = query.templateId || "";
|
||||
});
|
||||
|
||||
Reference in New Issue
Block a user