forked from natuka/web.puabadge.com
单图徽章代码提交
This commit is contained in:
Linzm committed
1 parent
754b6f3834
commit
96f5bcec51
20 files changed
+1186
-672
No files matched your search
+278
-17
@@ -20,13 +20,16 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="progress-section">
|
||||
<div v-if="!imageUrl" class="progress-section">
|
||||
<div class="progress-bar-bg">
|
||||
<div class="progress-bar-fg" :style="{ width: '12%' }"></div>
|
||||
<div class="progress-bar-fg" :style="{ width: progress + '%' }"></div>
|
||||
</div>
|
||||
<div class="progress-text">照片数据分析中 12%</div>
|
||||
<div class="progress-text">照片数据分析中 {{progress}}%</div>
|
||||
<div class="progress-desc">总计大约需要60秒，请耐心等待...</div>
|
||||
</div>
|
||||
<div v-else class="progress-section">
|
||||
<img class="progress-section-img" :src="imageUrl" alt="">
|
||||
</div>
|
||||
<div class="info-section">
|
||||
<div class="info-item">
|
||||
<div class="info-title">芯比风格</div>
|
||||
@@ -54,40 +57,230 @@
|
||||
<span class="order-size">4cm</span>
|
||||
<span class="order-free">(剩余兑换：1)</span>
|
||||
<div class="order-ctrl">
|
||||
<button class="order-btn" disabled>-</button>
|
||||
<span class="order-count">1</span>
|
||||
<button class="order-btn">+</button>
|
||||
<van-stepper v-model="value" @change="changeValue" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="order-item">
|
||||
<span class="order-size">5cm</span>
|
||||
<span class="order-free">(剩余兑换：2)</span>
|
||||
<div class="order-ctrl">
|
||||
<button class="order-btn" disabled>-</button>
|
||||
<span class="order-count">1</span>
|
||||
<button class="order-btn">+</button>
|
||||
<van-stepper v-model="value" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="confirm-box">
|
||||
<div class="action-section">
|
||||
<button class="action-btn"><img class="action-img" src="@/assets/badge/reload.png" alt=""> 再次生成</button>
|
||||
<button class="action-btn"><img class="action-img" src="@/assets/badge/duibi.png" alt=""> 前后对比</button>
|
||||
<button class="action-btn"><img class="action-img" src="@/assets/badge/down.png" alt=""> 保存图片</button>
|
||||
<button @click="showReload = true" class="action-btn"><img class="action-img" src="@/assets/badge/reload.png" alt=""> 再次生成</button>
|
||||
<button @click="compare" :disabled="flag < 2" class="action-btn"><img class="action-img" src="@/assets/badge/duibi.png" alt=""> 前后对比</button>
|
||||
<button @click="save" :disabled="flag < 2" class="action-btn"><img class="action-img" src="@/assets/badge/down.png" alt=""> 保存图片</button>
|
||||
</div>
|
||||
<div class="btn-box">
|
||||
<button class="confirm-btn">确认选择</button>
|
||||
<button @click="confirm" :disabled="flag < 2" class="confirm-btn">确认选择</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<van-action-sheet v-model:show="showReload" title="风格样式选择" :close-on-click-overlay="true" closeable>
|
||||
<div class="style-selection">
|
||||
<div class="style-grid">
|
||||
<div class="style-item" :class="{'active': style == 'suiji'}" @click="changeStyle('suiji')">
|
||||
<img src="@/assets/badge/suiji.png" alt="随机风格盲盒" class="style-img">
|
||||
<div class="style-label">随机风格盲盒</div>
|
||||
<span class="style-selected" v-if="style == 'suiji'" style="display: inline-block;">
|
||||
<van-icon name="checked" color="#50cf54" size="21px" />
|
||||
</span>
|
||||
</div>
|
||||
<div class="style-item" :class="{'active': style == 'qban'}" @click="changeStyle('qban')">
|
||||
<img src="@/assets/badge/suiji.png" alt="Q版国风动漫" class="style-img">
|
||||
<div class="style-label">Q版国风动漫</div>
|
||||
<span class="style-selected" v-if="style == 'qban'">
|
||||
<van-icon name="checked" color="#50cf54" size="21px" />
|
||||
</span>
|
||||
</div>
|
||||
<div class="style-item" :class="{'active': style == 'qkant'}" @click="changeStyle('qkant')">
|
||||
<img src="@/assets/badge/suiji.png" alt="Q版卡通" class="style-img">
|
||||
<div class="style-label">Q版卡通</div>
|
||||
<span class="style-selected" v-if="style == 'qkant'">
|
||||
<van-icon name="checked" color="#50cf54" size="21px" />
|
||||
</span>
|
||||
</div>
|
||||
<div class="style-item" :class="{'active': style == 'babifeng'}" @click="changeStyle('babifeng')">
|
||||
<img src="@/assets/badge/suiji.png" alt="芭比风" class="style-img">
|
||||
<div class="style-label">芭比风</div>
|
||||
<span class="style-selected" v-if="style == 'babifeng'">
|
||||
<van-icon name="checked" color="#50cf54" size="21px" />
|
||||
</span>
|
||||
</div>
|
||||
<div class="style-item">
|
||||
<img src="@/assets/badge/suiji.png" alt="迪士尼皮克斯" class="style-img">
|
||||
<div class="style-label">迪士尼皮克斯</div>
|
||||
</div>
|
||||
<div class="style-item">
|
||||
<img src="@/assets/badge/suiji.png" alt="写实肖像" class="style-img">
|
||||
<div class="style-label">写实肖像</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="confirm-wrapper">
|
||||
<button class="confirm-button">
|
||||
确认再次生成
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</van-action-sheet>
|
||||
|
||||
<van-action-sheet v-model:show="showCompare" title="前后对比" :close-on-click-overlay="true" closeable>
|
||||
<div style="padding: 16px;">
|
||||
<div style="display: flex; align-items: center; justify-content: center; gap: 20px;">
|
||||
<div style="text-align: center;">
|
||||
<img src="@/assets/badge/suiji.png" alt="随机风格盲盒" style="width: 120px; height: 120px; border-radius: 8px;">
|
||||
</div>
|
||||
<div style="font-size: 24px; color: #333;">
|
||||
<van-icon name="arrow" size="20px" />
|
||||
</div>
|
||||
<div style="text-align: center;">
|
||||
<img src="@/assets/badge/suiji.png" alt="随机风格盲盒" style="width: 120px; height: 120px; border-radius: 8px;">
|
||||
</div>
|
||||
</div>
|
||||
<div style="text-align: center; margin-top: 16px; color: #999; font-size: 12px;">
|
||||
温馨提示：<br/>
|
||||
AI设计的徽章效果图是根据用户提供的照片机器学习生成的，<br/>
|
||||
多试几次就能找到你满意的徽章~
|
||||
</div>
|
||||
</div>
|
||||
</van-action-sheet>
|
||||
|
||||
<van-action-sheet v-model:show="showBgCompare" title="前后对比" :close-on-click-overlay="true" closeable>
|
||||
<div style="padding: 16px;">
|
||||
<div style="display: flex; align-items: center; justify-content: center; gap: 20px;">
|
||||
<div style="text-align: center;">
|
||||
<img src="@/assets/badge/suiji.png" alt="背景对比图" style="width: 120px; height: 120px; border-radius: 8px;">
|
||||
</div>
|
||||
<div style="font-size: 24px; color: #333;">
|
||||
<van-icon name="plus" size="20px" />
|
||||
</div>
|
||||
<div style="text-align: center;">
|
||||
<img src="@/assets/badge/suiji.png" alt="背景对比图" style="width: 120px; height: 120px; border-radius: 8px;">
|
||||
</div>
|
||||
</div>
|
||||
<div style="font-size: 24px; color: #333;display: flex; align-items: center; justify-content: center; margin: 16px 0;">
|
||||
<van-icon name="arrow-down" size="20px" />
|
||||
</div>
|
||||
<div style="display: flex; align-items: center; justify-content: center; gap: 20px;">
|
||||
<div style="text-align: center;">
|
||||
<img src="@/assets/badge/suiji.png" alt="背景对比图" style="width: 120px; height: 120px; border-radius: 8px;">
|
||||
</div>
|
||||
</div>
|
||||
<div style="text-align: center; margin-top: 16px; color: #999; font-size: 12px;">
|
||||
温馨提示：<br/>
|
||||
AI设计的图案效果图是根据用户提供的照片机器学习生成的，<br/>
|
||||
多试几次就能找到你满意的效果~
|
||||
</div>
|
||||
</div>
|
||||
</van-action-sheet>
|
||||
</template>
|
||||
<script setup lang="ts">
|
||||
import { ref } from 'vue';
|
||||
import { onMounted, ref } from 'vue';
|
||||
import { useRouter } from 'vue-router';
|
||||
import * as badgeApi from '@/api/badge'
|
||||
const router = useRouter();
|
||||
const value = ref(0);
|
||||
const showReload = ref(false)
|
||||
const showCompare = ref(false)
|
||||
const showBgCompare = ref(false)
|
||||
function compare() {
|
||||
// showCompare.value = true
|
||||
showBgCompare.value = true
|
||||
}
|
||||
function save() {
|
||||
// 下载图片到本地
|
||||
const downloadImage = (url: string) => {
|
||||
const link = document.createElement('a')
|
||||
link.href = url
|
||||
link.download = '徽章效果图.png'
|
||||
document.body.appendChild(link)
|
||||
link.click()
|
||||
document.body.removeChild(link)
|
||||
}
|
||||
|
||||
if (imageUrl.value) {
|
||||
downloadImage(imageUrl.value)
|
||||
} else {
|
||||
showReload.value = true
|
||||
}
|
||||
}
|
||||
const style = ref('suiji')
|
||||
function changeStyle(style: string) {
|
||||
console.log(style)
|
||||
style.value = style
|
||||
}
|
||||
function confirm() {
|
||||
console.log('confirm')
|
||||
}
|
||||
function goBack() {
|
||||
router.push('/badge');
|
||||
}
|
||||
|
||||
const changeValue = (value: number) => {
|
||||
console.log(value)
|
||||
}
|
||||
|
||||
const imageUrl = ref('')
|
||||
const group = ref(1);
|
||||
// 轮询获取图片
|
||||
const flag = ref(1)
|
||||
const timer = ref()
|
||||
const progress = ref(0)
|
||||
const progressTimer = ref()
|
||||
const progressList = () => {
|
||||
// 启动进度条计时器
|
||||
progress.value = 0
|
||||
if (!progressTimer.value) {
|
||||
progressTimer.value = setInterval(() => {
|
||||
if (progress.value < 90) {
|
||||
progress.value += 1
|
||||
}
|
||||
}, 500)
|
||||
}
|
||||
}
|
||||
|
||||
const getImageList = () => {
|
||||
badgeApi.getKindList({
|
||||
pid: 0,
|
||||
group: group.value
|
||||
}).then((res: any) => {
|
||||
const data = res || []
|
||||
flag.value = data.flag || 1
|
||||
|
||||
if (flag.value === 2) {
|
||||
// 清除轮询和进度条计时器
|
||||
clearInterval(timer.value)
|
||||
clearInterval(progressTimer.value)
|
||||
|
||||
// 进度条到100%
|
||||
progress.value = 100
|
||||
|
||||
// 显示图片
|
||||
imageUrl.value = data.url
|
||||
}
|
||||
}).catch((err) => {
|
||||
clearInterval(progressTimer.value)
|
||||
progress.value = 0
|
||||
}).finally((err) => {
|
||||
|
||||
})
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
getImageList()
|
||||
progressList()
|
||||
timer.value = setInterval(() => {
|
||||
getImageList()
|
||||
}, 10000)
|
||||
})
|
||||
|
||||
onUnmounted(() => {
|
||||
clearInterval(timer.value)
|
||||
clearInterval(progressTimer.value)
|
||||
})
|
||||
</script>
|
||||
<style scoped>
|
||||
.preview-container {
|
||||
@@ -214,6 +407,11 @@ function goBack() {
|
||||
align-items: center;
|
||||
flex-direction: column;
|
||||
}
|
||||
.progress-section-img {
|
||||
width: 80vw;
|
||||
height: 80vw;
|
||||
border-radius: 12px;
|
||||
}
|
||||
.progress-bar-bg {
|
||||
width: 70%;
|
||||
height: 10px;
|
||||
@@ -354,9 +552,6 @@ function goBack() {
|
||||
height: 20px;
|
||||
margin-right: 5px;
|
||||
}
|
||||
.action-btn:hover {
|
||||
background: #e6f7ea;
|
||||
}
|
||||
.btn-box {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
@@ -378,4 +573,70 @@ function goBack() {
|
||||
.confirm-btn:active {
|
||||
background: linear-gradient(90deg, #5ccf7a 0%, #8fdca0 100%);
|
||||
}
|
||||
.style-selection {
|
||||
padding: 16px;
|
||||
}
|
||||
.style-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
gap: 8px;
|
||||
}
|
||||
.style-item {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
cursor: pointer;
|
||||
position: relative;
|
||||
width: 28vw;
|
||||
}
|
||||
.style-img {
|
||||
width: 28vw;
|
||||
height: 28vw;
|
||||
border-radius: 8px;
|
||||
object-fit: cover;
|
||||
background: #f5f5f5;
|
||||
border: 2px solid transparent;
|
||||
transition: border 0.2s;
|
||||
}
|
||||
.style-item .style-selected {
|
||||
position: absolute;
|
||||
right: 4px;
|
||||
bottom: 30px;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
border-radius: 50%;
|
||||
background-color: #fff;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
.style-label {
|
||||
font-size: 13px;
|
||||
color: #333;
|
||||
margin-top: 4px;
|
||||
}
|
||||
.confirm-wrapper {
|
||||
margin-top: 24px;
|
||||
}
|
||||
.confirm-button {
|
||||
width: 100%;
|
||||
background: linear-gradient(90deg, #D1ED8E 0%, #55E668 100%);
|
||||
color: #000;
|
||||
font-size: 17px;
|
||||
font-weight: 600;
|
||||
border: none;
|
||||
border-radius: 24px;
|
||||
padding: 12px 0;
|
||||
cursor: pointer;
|
||||
}
|
||||
.confirm-button:active {
|
||||
background: linear-gradient(90deg, #5ccf7a 0%, #8fdca0 100%);
|
||||
}
|
||||
.style-item.active .style-img {
|
||||
border: 2px solid #50cf54;
|
||||
}
|
||||
.style-item.active .style-label {
|
||||
color: #50cf54;
|
||||
}
|
||||
|
||||
</style>
|
||||
Reference in new issue
Block a user