forked from natuka/web.puabadge.com
代码提交
This commit is contained in:
Linzm committed
1 parent
84061c9a18
commit
ac240bc142
92 files changed
+1182
-9505
No files matched your search
+165
-104
@@ -1,42 +1,100 @@
|
||||
<script setup lang="ts">
|
||||
import { ref } from 'vue'
|
||||
import { useRouter } from 'vue-router'
|
||||
const show = ref(false)
|
||||
const imgShow = ref(false)
|
||||
const router = useRouter()
|
||||
const imgurl = ref('') // 头像地址
|
||||
const fileInput = ref<HTMLInputElement | null>(null)
|
||||
function onUploadClick() {
|
||||
if (fileInput.value)
|
||||
fileInput.value.click()
|
||||
}
|
||||
function myUpload(rsp) {
|
||||
const self = this
|
||||
self.imgurl = rsp.path // 更新头像方式一
|
||||
}
|
||||
function goToRecord() {
|
||||
router.push('/badge/record')
|
||||
}
|
||||
function goToMyOrder() {
|
||||
router.push('/badge/myOrder')
|
||||
}
|
||||
function goToPreview() {
|
||||
router.push('/badge/preview')
|
||||
}
|
||||
function onFileChange
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="photo-upload-page">
|
||||
<div class="badge-size">
|
||||
<div class="size-title">剩余兑换数量</div>
|
||||
<div class="size-title">
|
||||
剩余兑换数量
|
||||
</div>
|
||||
<div class="size-options">
|
||||
<div class="size-item">
|
||||
<div class="size-text">4cm</div>
|
||||
<div class="size-count">（剩余兑换：1）</div>
|
||||
<div class="size-text">
|
||||
4cm
|
||||
</div>
|
||||
<div class="size-count">
|
||||
（剩余兑换：1）
|
||||
</div>
|
||||
</div>
|
||||
<div class="size-item">
|
||||
<div class="size-text">5cm</div>
|
||||
<div class="size-count">（剩余兑换：2）</div>
|
||||
<div class="size-text">
|
||||
5cm
|
||||
</div>
|
||||
<div class="size-count">
|
||||
（剩余兑换：2）
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="badge-info">
|
||||
<div class="badge-item" @click="goToRecord">
|
||||
<div class="badge-title">设计图集</div>
|
||||
<div class="badge-count">8张</div>
|
||||
<div class="badge-title">
|
||||
设计图集
|
||||
</div>
|
||||
<div class="badge-count">
|
||||
8张
|
||||
</div>
|
||||
</div>
|
||||
<div class="badge-item" @click="goToMyOrder">
|
||||
<div class="badge-title">我的订单</div>
|
||||
<div class="badge-count">3笔</div>
|
||||
<div class="badge-title">
|
||||
我的订单
|
||||
</div>
|
||||
<div class="badge-count">
|
||||
3笔
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div style="height: 8px;background: #F2F2F2;"></div>
|
||||
<div style="height: 8px;background: #F2F2F2;" />
|
||||
<div class="step-container">
|
||||
<div class="step-item active">
|
||||
<div class="step-num">1</div>
|
||||
<div class="step-num">
|
||||
1
|
||||
</div>
|
||||
<div class="step-content">
|
||||
<div class="step-title">上传正面照片</div>
|
||||
<div class="step-desc">1张五官清晰的正面照片</div>
|
||||
<div class="step-title">
|
||||
上传正面照片
|
||||
</div>
|
||||
<div class="step-desc">
|
||||
1张五官清晰的正面照片
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="step-item">
|
||||
<div class="step-num">2</div>
|
||||
<div class="step-num">
|
||||
2
|
||||
</div>
|
||||
<div class="step-content">
|
||||
<div class="step-title">确认下单</div>
|
||||
<div class="step-desc">选择一个你喜欢的设计</div>
|
||||
<div class="step-title">
|
||||
确认下单
|
||||
</div>
|
||||
<div class="step-desc">
|
||||
选择一个你喜欢的设计
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -46,70 +104,87 @@
|
||||
<span class="photo-upload-guide-text">图片上传指南</span>
|
||||
</div>
|
||||
<div class="photo-upload-area" @click="onUploadClick">
|
||||
<!-- <cropper selWidth="660rpx" selHeight="660rpx" @upload="myUpload" :avatarSrc="imgurl" avatarStyle="width:100vw;height:100vw;">
|
||||
<img v-if="imgurl" :src="imgurl" class="photo-upload-image" alt="上传的照片" />
|
||||
<div v-else class="photo-upload-placeholder">
|
||||
<span class="photo-upload-plus">+</span>
|
||||
<span class="photo-upload-text">点击上传照片</span>
|
||||
</div>
|
||||
</cropper> -->
|
||||
<input
|
||||
ref="fileInput"
|
||||
type="file"
|
||||
accept="image/*"
|
||||
style="display: none"
|
||||
@change="onFileChange"
|
||||
/>
|
||||
<div class="photo-upload-plus">+</div>
|
||||
<div class="photo-upload-text">点击上传照片</div>
|
||||
<div class="photo-upload-tip">*上传照片时建议勾选[原图]</div>
|
||||
>
|
||||
<div class="photo-upload-plus">
|
||||
+
|
||||
</div>
|
||||
<div class="photo-upload-text">
|
||||
点击上传照片
|
||||
</div>
|
||||
<div class="photo-upload-tip">
|
||||
*上传照片时建议勾选[原图]
|
||||
</div>
|
||||
</div>
|
||||
<div class="photo-upload-footer">
|
||||
请确定您对上传的照片拥有合法使用权利或已取得他人合法授权，且同意本平台分析图片信息以提供生成服务
|
||||
请确定您对上传的照片拥有合法使用权利或已取得他人合法授权，且同意本平台分析图片信息以提供生成服务
|
||||
</div>
|
||||
</div>
|
||||
<div class="style-section">
|
||||
<div class="style-title">风格样式</div>
|
||||
<div class="style-title">
|
||||
风格样式
|
||||
</div>
|
||||
<div class="style-list">
|
||||
<div class="style-item">
|
||||
<img class="style-img" src="@/assets/badge/suiji.png" alt="随机风格盲盒" />
|
||||
<div class="style-label">随机风格盲盒</div>
|
||||
<span class="style-selected"></span>
|
||||
<img class="style-img" src="@/assets/badge/suiji.png" alt="随机风格盲盒">
|
||||
<div class="style-label">
|
||||
随机风格盲盒
|
||||
</div>
|
||||
<span class="style-selected" />
|
||||
</div>
|
||||
<div class="style-item">
|
||||
<img class="style-img" src="@/assets/badge/suiji.png" alt="Q版国风动漫" />
|
||||
<div class="style-label">Q版国风动漫</div>
|
||||
<span class="style-selected"></span>
|
||||
<img class="style-img" src="@/assets/badge/suiji.png" alt="Q版国风动漫">
|
||||
<div class="style-label">
|
||||
Q版国风动漫
|
||||
</div>
|
||||
<span class="style-selected" />
|
||||
</div>
|
||||
<div class="style-item">
|
||||
<img class="style-img" src="@/assets/badge/suiji.png" alt="Q版卡通" />
|
||||
<div class="style-label">Q版卡通</div>
|
||||
<span class="style-selected"></span>
|
||||
<img class="style-img" src="@/assets/badge/suiji.png" alt="Q版卡通">
|
||||
<div class="style-label">
|
||||
Q版卡通
|
||||
</div>
|
||||
<span class="style-selected" />
|
||||
</div>
|
||||
<div class="style-item">
|
||||
<img class="style-img" src="@/assets/badge/suiji.png" alt="芭比风" />
|
||||
<div class="style-label">芭比风</div>
|
||||
<span class="style-selected"></span>
|
||||
<img class="style-img" src="@/assets/badge/suiji.png" alt="芭比风">
|
||||
<div class="style-label">
|
||||
芭比风
|
||||
</div>
|
||||
<span class="style-selected" />
|
||||
</div>
|
||||
<div class="style-item">
|
||||
<img class="style-img" src="@/assets/badge/suiji.png" alt="随机风格盲盒" />
|
||||
<div class="style-label">随机风格盲盒</div>
|
||||
<span class="style-selected"></span>
|
||||
<img class="style-img" src="@/assets/badge/suiji.png" alt="随机风格盲盒">
|
||||
<div class="style-label">
|
||||
随机风格盲盒
|
||||
</div>
|
||||
<span class="style-selected" />
|
||||
</div>
|
||||
<div class="style-item">
|
||||
<img class="style-img" src="@/assets/badge/suiji.png" alt="Q版国风动漫" />
|
||||
<div class="style-label">Q版国风动漫</div>
|
||||
<span class="style-selected"></span>
|
||||
<img class="style-img" src="@/assets/badge/suiji.png" alt="Q版国风动漫">
|
||||
<div class="style-label">
|
||||
Q版国风动漫
|
||||
</div>
|
||||
<span class="style-selected" />
|
||||
</div>
|
||||
<div class="style-item">
|
||||
<img class="style-img" src="@/assets/badge/suiji.png" alt="Q版卡通" />
|
||||
<div class="style-label">Q版卡通</div>
|
||||
<span class="style-selected"></span>
|
||||
<img class="style-img" src="@/assets/badge/suiji.png" alt="Q版卡通">
|
||||
<div class="style-label">
|
||||
Q版卡通
|
||||
</div>
|
||||
<span class="style-selected" />
|
||||
</div>
|
||||
<div class="style-item">
|
||||
<img class="style-img" src="@/assets/badge/suiji.png" alt="芭比风" />
|
||||
<div class="style-label">芭比风</div>
|
||||
<span class="style-selected"></span>
|
||||
<img class="style-img" src="@/assets/badge/suiji.png" alt="芭比风">
|
||||
<div class="style-label">
|
||||
芭比风
|
||||
</div>
|
||||
<span class="style-selected" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -149,7 +224,7 @@
|
||||
</div>
|
||||
<div class="bg-photo-upload-area">
|
||||
<label class="bg-photo-upload-label">
|
||||
<input type="file" accept="image/*" style="display:none" />
|
||||
<input type="file" accept="image/*" style="display:none">
|
||||
<div class="bg-photo-upload-box">
|
||||
<div class="bg-photo-upload-plus">+</div>
|
||||
<div class="bg-photo-upload-text">上传照片</div>
|
||||
@@ -157,7 +232,7 @@
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
<div style="height: 90px;"></div>
|
||||
<div style="height: 90px;" />
|
||||
<div class="design-action-bar">
|
||||
<div class="design-left">
|
||||
<img class="design-leaf-icon" width="18" height="18" src="@/assets/badge/leaf.png" alt="">
|
||||
@@ -171,33 +246,37 @@
|
||||
</div>
|
||||
<van-action-sheet v-model:show="show" title="背景样式说明" :close-on-click-overlay="true" closeable>
|
||||
<div style="padding: 24px 16px;">
|
||||
<div style="font-weight: bold; font-size: 15px; margin-bottom: 4px;">照片自有背景</div>
|
||||
<div style="font-weight: bold; font-size: 15px; margin-bottom: 4px;">
|
||||
照片自有背景
|
||||
</div>
|
||||
<div style="font-size: 12px; color: #888; margin-bottom: 12px;">
|
||||
选择该选项设计的徽章会根据上传的人像照片背景进行生成效果
|
||||
</div>
|
||||
<div style="display: flex; align-items: center; justify-content: center; margin-bottom: 24px;">
|
||||
<img src="@/assets/badge/suiji.png" style="width: 90px; height: 90px; border-radius: 12px; object-fit: cover; margin-right: 12px;" />
|
||||
<img src="@/assets/badge/suiji.png" style="width: 90px; height: 90px; border-radius: 12px; object-fit: cover; margin-right: 12px;">
|
||||
<span style="font-size: 24px; color: #bbb; margin-right: 12px;">
|
||||
<van-icon name="arrow" />
|
||||
</span>
|
||||
<img src="@/assets/badge/suiji.png" style="width: 90px; height: 90px; border-radius: 12px; object-fit: cover;" />
|
||||
<img src="@/assets/badge/suiji.png" style="width: 90px; height: 90px; border-radius: 12px; object-fit: cover;">
|
||||
</div>
|
||||
<div style="font-weight: bold; font-size: 15px; margin-bottom: 4px;">
|
||||
补充背景照片
|
||||
</div>
|
||||
<div style="font-weight: bold; font-size: 15px; margin-bottom: 4px;">补充背景照片</div>
|
||||
<div style="font-size: 12px; color: #888; margin-bottom: 12px;">
|
||||
选择该选项需要额外上传一张照片作为背景
|
||||
</div>
|
||||
<div style="display: flex; align-items: center; justify-content: center; margin-bottom: 12px;">
|
||||
<img src="@/assets/badge/suiji.png" style="width: 90px; height: 90px; border-radius: 12px; object-fit: cover; margin-right: 12px;" />
|
||||
<img src="@/assets/badge/suiji.png" style="width: 90px; height: 90px; border-radius: 12px; object-fit: cover; margin-right: 12px;">
|
||||
<span style="font-size: 24px; color: #bbb; margin-right: 12px;">
|
||||
<van-icon name="plus" />
|
||||
</span>
|
||||
<img src="@/assets/badge/suiji.png" style="width: 90px; height: 90px; border-radius: 12px; object-fit: cover;" />
|
||||
<img src="@/assets/badge/suiji.png" style="width: 90px; height: 90px; border-radius: 12px; object-fit: cover;">
|
||||
</div>
|
||||
<div style="font-size: 24px; color: #bbb;text-align: center;" >
|
||||
<div style="font-size: 24px; color: #bbb;text-align: center;">
|
||||
<van-icon name="arrow-down" />
|
||||
</div>
|
||||
<div style="display: flex; align-items: center; justify-content: center; margin-top: 12px;">
|
||||
<img src="@/assets/badge/suiji.png" style="width: 120px; height: 120px; border-radius: 16px; object-fit: cover;" />
|
||||
<img src="@/assets/badge/suiji.png" style="width: 120px; height: 120px; border-radius: 16px; object-fit: cover;">
|
||||
</div>
|
||||
<div style="margin-top: 32px; text-align: center;">
|
||||
<button style="width: 90%; height: 44px; background: linear-gradient(90deg, #d6f5b7 0%, #50cf54 100%); border: none; border-radius: 22px; color: #222; font-size: 18px; font-weight: bold; cursor: pointer;" @click="show = false">
|
||||
@@ -206,11 +285,11 @@
|
||||
</div>
|
||||
</div>
|
||||
</van-action-sheet>
|
||||
|
||||
|
||||
<van-action-sheet v-model:show="imgShow" title="图片上传指南" :close-on-click-overlay="true" closeable>
|
||||
<div style="padding: 0 16px 24px 16px;">
|
||||
<div style="text-align: center;">
|
||||
<img src="@/assets/badge/suiji.png" alt="照片上传指南" style="width: 220px; border-radius: 16px; margin-bottom: 16px;" />
|
||||
<img src="@/assets/badge/suiji.png" alt="照片上传指南" style="width: 220px; border-radius: 16px; margin-bottom: 16px;">
|
||||
</div>
|
||||
<div style="display: flex; flex-wrap: wrap; gap: 8px 12px; justify-content: center; margin-bottom: 16px;">
|
||||
<span style="background: #e6f7e6; color: #22c55e; border-radius: 8px; padding: 2px 10px; font-size: 13px;">光线均匀</span>
|
||||
@@ -221,26 +300,36 @@
|
||||
</div>
|
||||
<div style="display: flex; justify-content: space-between; margin-bottom: 16px;">
|
||||
<div style="flex: 1; text-align: center;">
|
||||
<img src="@/assets/badge/suiji.png" alt="多主体" style="width: 25vw; height: 25vw; border-radius: 8px; object-fit: cover;" />
|
||||
<div style="font-size: 13px; color: #888; margin-top: 4px;">多主体</div>
|
||||
<img src="@/assets/badge/suiji.png" alt="多主体" style="width: 25vw; height: 25vw; border-radius: 8px; object-fit: cover;">
|
||||
<div style="font-size: 13px; color: #888; margin-top: 4px;">
|
||||
多主体
|
||||
</div>
|
||||
</div>
|
||||
<div style="flex: 1; text-align: center;">
|
||||
<img src="@/assets/badge/suiji.png" alt="光线昏暗" style="width: 25vw; height: 25vw; border-radius: 8px; object-fit: cover;" />
|
||||
<div style="font-size: 13px; color: #888; margin-top: 4px;">光线昏暗</div>
|
||||
<img src="@/assets/badge/suiji.png" alt="光线昏暗" style="width: 25vw; height: 25vw; border-radius: 8px; object-fit: cover;">
|
||||
<div style="font-size: 13px; color: #888; margin-top: 4px;">
|
||||
光线昏暗
|
||||
</div>
|
||||
</div>
|
||||
<div style="flex: 1; text-align: center;">
|
||||
<img src="@/assets/badge/suiji.png" alt="后侧面及背影" style="width: 25vw; height: 25vw; border-radius: 8px; object-fit: cover;" />
|
||||
<div style="font-size: 13px; color: #888; margin-top: 4px;">后侧面及背影</div>
|
||||
<img src="@/assets/badge/suiji.png" alt="后侧面及背影" style="width: 25vw; height: 25vw; border-radius: 8px; object-fit: cover;">
|
||||
<div style="font-size: 13px; color: #888; margin-top: 4px;">
|
||||
后侧面及背影
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div style="display: flex; justify-content: space-between; margin-bottom: 24px;">
|
||||
<div style="flex: 1; text-align: center;">
|
||||
<img src="@/assets/badge/suiji.png" alt="照片模糊" style="width: 25vw; height: 25vw; border-radius: 8px; object-fit: cover;" />
|
||||
<div style="font-size: 13px; color: #888; margin-top: 4px;">照片模糊</div>
|
||||
<img src="@/assets/badge/suiji.png" alt="照片模糊" style="width: 25vw; height: 25vw; border-radius: 8px; object-fit: cover;">
|
||||
<div style="font-size: 13px; color: #888; margin-top: 4px;">
|
||||
照片模糊
|
||||
</div>
|
||||
</div>
|
||||
<div style="flex: 1; text-align: center;">
|
||||
<img src="@/assets/badge/suiji.png" alt="照片留白过少" style="width: 25vw; height: 25vw; border-radius: 8px; object-fit: cover;" />
|
||||
<div style="font-size: 13px; color: #888; margin-top: 4px;">照片留白过少</div>
|
||||
<img src="@/assets/badge/suiji.png" alt="照片留白过少" style="width: 25vw; height: 25vw; border-radius: 8px; object-fit: cover;">
|
||||
<div style="font-size: 13px; color: #888; margin-top: 4px;">
|
||||
照片留白过少
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div style="margin-top: 24px; text-align: center;">
|
||||
@@ -251,34 +340,6 @@
|
||||
</div>
|
||||
</van-action-sheet>
|
||||
</template>
|
||||
<script setup lang="ts">
|
||||
import { ref } from 'vue';
|
||||
import { useRouter } from 'vue-router';
|
||||
import cropper from "./cropper.vue";
|
||||
const show = ref(false);
|
||||
const imgShow = ref(false);
|
||||
const router = useRouter();
|
||||
const imgurl = ref(''); //头像地址
|
||||
const fileInput = ref<HTMLInputElement | null>(null);
|
||||
function onUploadClick() {
|
||||
if (fileInput.value) {
|
||||
fileInput.value.click();
|
||||
}
|
||||
}
|
||||
function myUpload(rsp) {
|
||||
const self = this;
|
||||
self.imgurl = rsp.path; //更新头像方式一
|
||||
}
|
||||
function goToRecord() {
|
||||
router.push('/badge/record');
|
||||
}
|
||||
function goToMyOrder() {
|
||||
router.push('/badge/myOrder');
|
||||
}
|
||||
function goToPreview() {
|
||||
router.push('/badge/preview');
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.photo-upload-page {
|
||||
@@ -704,4 +765,4 @@ function goToPreview() {
|
||||
width: 18px;
|
||||
height: 12px;
|
||||
}
|
||||
</style>
|
||||
</style>
|
||||
Reference in new issue
Block a user