forked from natuka/web.puabadge.com
修改：新增抖音下单页面
This commit is contained in:
Linzm committed
1 parent
024c8a5155
commit
73971e4a08
38 files changed
+14447
-35505
No files matched your search
@@ -0,0 +1,372 @@
|
||||
<template>
|
||||
<div class="success-page">
|
||||
<DyNavBar
|
||||
theme="light"
|
||||
title="提交成功"
|
||||
right-text="生图记录"
|
||||
border
|
||||
@back="goHome"
|
||||
@right="goRecords"
|
||||
/>
|
||||
|
||||
<div class="body">
|
||||
<div class="hero">
|
||||
<div class="hero-rings" aria-hidden="true">
|
||||
<span class="ring r1" />
|
||||
<span class="ring r2" />
|
||||
<span class="ring r3" />
|
||||
</div>
|
||||
<div class="hero-icon">
|
||||
<span class="check">✓</span>
|
||||
</div>
|
||||
<h1 class="hero-title">提交制作成功</h1>
|
||||
<p class="hero-desc">效果图已确认并进入制作流程，可随时在生图记录中查看</p>
|
||||
</div>
|
||||
|
||||
<div v-if="resultUrl" class="thumb-card" @click="openZoom">
|
||||
<img :src="resultUrl" class="thumb-img" alt="已提交效果图">
|
||||
<div class="thumb-badge">已提交</div>
|
||||
</div>
|
||||
|
||||
<div class="steps-card">
|
||||
<div class="steps-title">接下来会怎样</div>
|
||||
<ul class="steps">
|
||||
<li class="step is-done">
|
||||
<span class="dot" />
|
||||
<div>
|
||||
<div class="step-name">确认效果并提交</div>
|
||||
<div class="step-desc">已完成</div>
|
||||
</div>
|
||||
</li>
|
||||
<li class="step is-active">
|
||||
<span class="dot" />
|
||||
<div>
|
||||
<div class="step-name">进入制作流程</div>
|
||||
<div class="step-desc">制作团队将按效果图开始生产</div>
|
||||
</div>
|
||||
</li>
|
||||
<li class="step">
|
||||
<span class="dot" />
|
||||
<div>
|
||||
<div class="step-name">完成后通知发货</div>
|
||||
<div class="step-desc">请留意订单物流与消息通知</div>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="tips-card">
|
||||
<div class="tips-title">温馨提示</div>
|
||||
<p>本订单提交后不可再次上传生图，如需查看效果请前往生图记录。</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="footer">
|
||||
<button class="btn-ghost" type="button" @click="goHome">返回首页</button>
|
||||
<button class="btn-primary" type="button" @click="goRecords">查看生成记录</button>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref } from 'vue'
|
||||
import { useRouter } from 'vue-router'
|
||||
import { showImagePreview } from 'vant'
|
||||
import { douyinConfig as config } from '@/config/douyin'
|
||||
import DyNavBar from './components/DyNavBar.vue'
|
||||
|
||||
const router = useRouter()
|
||||
const resultUrl = ref(sessionStorage.getItem('douyin_result_url') || '')
|
||||
|
||||
function goHome() {
|
||||
router.replace(config.routes.home)
|
||||
}
|
||||
|
||||
function goRecords() {
|
||||
router.replace(config.routes.records)
|
||||
}
|
||||
|
||||
function openZoom() {
|
||||
if (!resultUrl.value) return
|
||||
showImagePreview({
|
||||
images: [resultUrl.value],
|
||||
closeable: true,
|
||||
closeIconPosition: 'top-right',
|
||||
})
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.success-page {
|
||||
min-height: 100vh;
|
||||
min-height: 100dvh;
|
||||
background: #f7faf6;
|
||||
box-sizing: border-box;
|
||||
padding-bottom: calc(88px + env(safe-area-inset-bottom));
|
||||
}
|
||||
|
||||
.body {
|
||||
padding: 8px 16px 24px;
|
||||
animation: pageIn 0.55s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
}
|
||||
|
||||
@keyframes pageIn {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateY(10px);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
.hero {
|
||||
position: relative;
|
||||
text-align: center;
|
||||
padding: 28px 12px 20px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.hero-rings {
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
top: 42px;
|
||||
width: 120px;
|
||||
height: 120px;
|
||||
transform: translateX(-50%);
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.ring {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
border-radius: 50%;
|
||||
border: 1px solid rgba(95, 191, 69, 0.28);
|
||||
animation: pulse 2.4s ease-out infinite;
|
||||
}
|
||||
|
||||
.r2 {
|
||||
inset: -14px;
|
||||
animation-delay: 0.35s;
|
||||
opacity: 0.7;
|
||||
}
|
||||
|
||||
.r3 {
|
||||
inset: -28px;
|
||||
animation-delay: 0.7s;
|
||||
opacity: 0.4;
|
||||
}
|
||||
|
||||
@keyframes pulse {
|
||||
0% {
|
||||
transform: scale(0.86);
|
||||
opacity: 0.55;
|
||||
}
|
||||
70% {
|
||||
transform: scale(1.08);
|
||||
opacity: 0;
|
||||
}
|
||||
100% {
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.hero-icon {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
width: 72px;
|
||||
height: 72px;
|
||||
margin: 0 auto 16px;
|
||||
border-radius: 50%;
|
||||
background: linear-gradient(145deg, #8fd96f 0%, #5fbf45 100%);
|
||||
box-shadow: 0 10px 24px rgba(95, 191, 69, 0.35);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
animation: pop 0.5s cubic-bezier(0.34, 1.4, 0.64, 1);
|
||||
}
|
||||
|
||||
@keyframes pop {
|
||||
from {
|
||||
transform: scale(0.6);
|
||||
opacity: 0;
|
||||
}
|
||||
to {
|
||||
transform: scale(1);
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.check {
|
||||
color: #fff;
|
||||
font-size: 34px;
|
||||
font-weight: 700;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.hero-title {
|
||||
margin: 0;
|
||||
font-size: 24px;
|
||||
font-weight: 700;
|
||||
color: #152016;
|
||||
letter-spacing: 0.02em;
|
||||
}
|
||||
|
||||
.hero-desc {
|
||||
margin: 8px auto 0;
|
||||
max-width: 280px;
|
||||
font-size: 13px;
|
||||
line-height: 1.55;
|
||||
color: #7a8a76;
|
||||
}
|
||||
|
||||
.thumb-card {
|
||||
position: relative;
|
||||
margin: 8px auto 14px;
|
||||
width: min(100%, 220px);
|
||||
aspect-ratio: 1;
|
||||
border-radius: 18px;
|
||||
overflow: hidden;
|
||||
background: #fff;
|
||||
box-shadow: 0 8px 22px rgba(40, 70, 50, 0.1);
|
||||
}
|
||||
|
||||
.thumb-img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: contain;
|
||||
display: block;
|
||||
background: #fff;
|
||||
}
|
||||
|
||||
.thumb-badge {
|
||||
position: absolute;
|
||||
left: 10px;
|
||||
top: 10px;
|
||||
padding: 4px 10px;
|
||||
border-radius: 999px;
|
||||
background: rgba(95, 191, 69, 0.92);
|
||||
color: #fff;
|
||||
font-size: 11px;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.steps-card,
|
||||
.tips-card {
|
||||
background: #fff;
|
||||
border-radius: 16px;
|
||||
padding: 16px 16px 14px;
|
||||
margin-bottom: 12px;
|
||||
box-shadow: 0 4px 14px rgba(0, 0, 0, 0.04);
|
||||
}
|
||||
|
||||
.steps-title,
|
||||
.tips-title {
|
||||
font-size: 15px;
|
||||
font-weight: 700;
|
||||
color: #1a1a1a;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.steps {
|
||||
list-style: none;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.step {
|
||||
position: relative;
|
||||
display: flex;
|
||||
gap: 12px;
|
||||
padding: 0 0 16px;
|
||||
}
|
||||
|
||||
.step:last-child {
|
||||
padding-bottom: 0;
|
||||
}
|
||||
|
||||
.step:not(:last-child)::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
left: 7px;
|
||||
top: 18px;
|
||||
bottom: 0;
|
||||
width: 2px;
|
||||
background: #e6efe3;
|
||||
}
|
||||
|
||||
.step .dot {
|
||||
flex-shrink: 0;
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
margin-top: 2px;
|
||||
border-radius: 50%;
|
||||
background: #d7e4d3;
|
||||
box-sizing: border-box;
|
||||
border: 3px solid #eef5eb;
|
||||
}
|
||||
|
||||
.step.is-done .dot,
|
||||
.step.is-active .dot {
|
||||
background: #5fbf45;
|
||||
border-color: rgba(95, 191, 69, 0.22);
|
||||
box-shadow: 0 0 0 3px rgba(95, 191, 69, 0.16);
|
||||
}
|
||||
|
||||
.step-name {
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
color: #222;
|
||||
}
|
||||
|
||||
.step-desc {
|
||||
margin-top: 2px;
|
||||
font-size: 12px;
|
||||
color: #8a9586;
|
||||
line-height: 1.4;
|
||||
}
|
||||
|
||||
.tips-card p {
|
||||
margin: 0;
|
||||
font-size: 13px;
|
||||
line-height: 1.55;
|
||||
color: #6b7a66;
|
||||
}
|
||||
|
||||
.footer {
|
||||
position: fixed;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
z-index: 5;
|
||||
display: flex;
|
||||
gap: 10px;
|
||||
padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
|
||||
background: linear-gradient(180deg, rgba(247, 250, 246, 0) 0%, #f7faf6 26%);
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.btn-ghost {
|
||||
flex: 0 0 112px;
|
||||
height: 48px;
|
||||
border: none;
|
||||
border-radius: 24px;
|
||||
background: #e4efe0;
|
||||
color: #3f9e36;
|
||||
font-size: 15px;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.btn-primary {
|
||||
flex: 1;
|
||||
height: 48px;
|
||||
border: none;
|
||||
border-radius: 24px;
|
||||
background: linear-gradient(90deg, #7ed45a 0%, #5fbf45 100%);
|
||||
color: #fff;
|
||||
font-size: 16px;
|
||||
font-weight: 700;
|
||||
box-shadow: 0 6px 16px rgba(95, 191, 69, 0.32);
|
||||
}
|
||||
</style>
|
||||
Reference in new issue
Block a user