devops/ece.suwa3d.com
1
0 Fork 0
forked from natuka/web.puabadge.com
Code Issues Pull Requests Actions Projects Releases Wiki Activity

宠物徽章

Browse Source
This commit is contained in:
Linzm committed 2025-07-07 10:31:27 +08:00
1 parent aebf0a7293
commit 0943188106
6 files changed
+276 -346
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

src/views/badge/preview.vue
+174 -139
View File
@@ -25,20 +25,35 @@
<div class="progress-bar-fg" :style="{ width: progress + '%' }"></div>
</div>
<div class="progress-text">{{progressText}} {{progress}}%</div>
<div class="progress-desc">总计大约需要60秒，请耐心等待...</div>
<div class="progress-desc">总计大约需要90秒，请耐心等待...</div>
</div>
<div v-else class="progress-section">
<van-swipe v-model="currentIndex" class="progress-section-img" :autoplay="3000" :show-indicators="false">
<!-- <van-swipe v-model="currentIndex" class="progress-section-img" :autoplay="3000" :show-indicators="false">
<van-swipe-item v-for="item in imageList" :key="item.id">
<img class="progress-section-img" :src="item.origin_url" alt="">
<div class="progress-image-item-shadow"></div>
</van-swipe-item>
</van-swipe>
</van-swipe> -->
<div class="progress-section-img">
<img class="progress-section-img-item" :src="imageUrl" alt="">
<div class="progress-image-item-shadow"></div>
</div>
<div class="image-list-box">
<div class="image-list-item" v-for="item in imageList" :key="item.key">
<img v-if="item.status == 1" class="image-list-item-img" :class="{ imgActive: item.key == imgKey }" :src="item.origin_url" alt="" @click="changeImage(item)">
<div v-else-if="item.status == 0" class="image-list-item-loading">
设计中
</div>
<div v-else-if="item.status == 2" class="image-list-item-loading">
设计失败
</div>
</div>
</div>
</div>
<div class="info-section">
<div class="info-item">
<div class="info-title">{{ style_name }}</div>
<div class="info-content">风格</div>
<div class="info-title">{{ prodId == 7 ? '人物立体徽章' : '宠物立体徽章' }}</div>
<div class="info-content">产品类型</div>
</div>
<div class="info-item">
<div class="info-title">3D全彩打印</div>
@@ -49,10 +64,10 @@
<div class="info-content">材料</div>
</div>
</div>
<div class="info-desc">
<!-- <div class="info-desc">
下单后预计需要7天完成生产发货。<br>
实物3D打印色彩与图片有合理色差，如对产品有疑问，可以联系客服咨询。
</div>
</div> -->
<div style="padding: 0 16px;">
<van-divider />
</div>
@@ -65,51 +80,19 @@
<van-stepper v-model="item.count" :min="0" :max="item.remaining" @change="changeValue" />
</div>
</div>
<!-- <div class="order-item">
<span class="order-size">5cm</span>
<span class="order-free">(剩余兑换：2)</span>
<div class="order-ctrl">
<van-stepper v-model="value" />
</div>
</div> -->
</div>
<div style="height: 110px;"></div>
<div class="confirm-box">
<div class="action-section">
<button v-if="trialCode == false" @click="reload" :disabled="flag < 2" class="action-btn"><img class="action-img" src="@/assets/badge/reload.png" alt=""> 再次生成</button>
<button v-if="trialCode == true" @click="compare" :disabled="flag < 2" class="action-btn"><img class="action-img" src="@/assets/badge/duibi.png" alt=""> 前后对比</button>
<button v-if="trialCode == true" @click="save" :disabled="flag < 2" class="action-btn"><img class="action-img" src="@/assets/badge/down.png" alt=""> 保存图片</button>
<button v-if="trialCode == false" @click="sureReload" :disabled="flag < 1" class="action-btn"><img class="action-img" src="@/assets/badge/reload.png" alt=""> 再次生成</button>
<button @click="compare" :disabled="flag < 1" class="action-btn"><img class="action-img" src="@/assets/badge/duibi.png" alt=""> 前后对比</button>
<button @click="save" :disabled="flag < 1" class="action-btn"><img class="action-img" src="@/assets/badge/down.png" alt=""> 保存图片</button>
</div>
<div class="btn-box" v-if="trialCode == false">
<button @click="confirm" :disabled="flag < 2" class="confirm-btn">确认选择</button>
<button @click="confirm" :disabled="flag < 1" 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': checkId == 0}" @click="checkId = 0">
<img src="@/assets/badge/suiji.png" alt="随机风格盲盒" class="style-img">
<div class="style-label">随机风格盲盒</div>
<span class="style-selected" v-if="checkId == 0" style="display: inline-block;">
<van-icon name="checked" color="#50cf54" size="21px" />
</span>
</div> -->
<div class="style-item" :class="{'active': item.id == checkId}" v-for="item in kindList" :key="item.id" @click="checkId = item.id">
<img :src="item.path" :alt="item.name" class="style-img">
<div class="style-label">{{item.name}}</div>
<span class="style-selected" v-if="item.id == checkId">
<van-icon name="checked" color="#50cf54" size="21px" />
</span>
</div>
</div>
<div class="confirm-wrapper">
<button class="confirm-button" @click="sureReload">
确认再次生成
</button>
</div>
</div>
</van-action-sheet>
<van-action-sheet v-model:show="showCompare" title="前后对比" :close-on-click-overlay="true" closeable>
<div style="padding: 16px;">
@@ -132,38 +115,9 @@
</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="compareList.origin_path" 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="compareList.extend_path" 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="imageUrl" 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>
<div v-if="showPreview">
<div class="preview-mask" @click="showPreview = false">
<img :src="imageUrl" alt="徽章预览" />
<img :src="imageWater" alt="徽章预览" />
<p>长按图片 → 保存到相册</p>
</div>
</div>
@@ -181,52 +135,28 @@ const showCompare = ref(false)
const showBgCompare = ref(false)
const currentIndex = ref(0)
const imageList = ref([])
const imageWater = ref('')
function compare() {
if (extend_value.value == -1) {
showCompare.value = true
} else {
showBgCompare.value = true
}
showCompare.value = true
}
const kindList = ref([])
const checkId = ref(0)
function reload() {
badgeApi.getKindList({
page: 1,
size: 20,
scale: 20,
}).then((res: any) => {
const data = res || []
kindList.value = data.list
}).catch((err) => {
showToast({
message: err.message,
duration: 2000,
})
}).finally((err) => {
})
showReload.value = true
}
// const getKindID = () => {
// return kindList.value.map(obj => obj.id)[Math.floor(Math.random() * kindList.value.length)];
// }
function sureReload() {
console.log('sureReload')
if (checkId.value == 0) {
showToast('请选择风格样式')
if (payAmount.value <= 0) {
showToast('当前次数已用完,请重新购买')
return
}
imageUrl.value = '';
isPreview.value = false
group.value = newGroup.value
const params = {
pid: pid.value,
kind_id: checkId.value,
extend_value: extend_value.value,
group: group.value,
prod_id: prodId.value
}
badgeApi.putMOdeling(params).then((res: any) => {
badgeApi.putModeling(params).then((res: any) => {
console.log('putModeling', res)
imageUrl.value = '';
imageList.value = []
imgKey.value = '';
createLog()
}).catch((err) => {
console.log('putModeling', err)
@@ -241,11 +171,18 @@ function sureReload() {
}
const imgKey = ref(101)
const changeImage = (item: any) => {
imgKey.value = item.key
imageUrl.value = item.origin_url
imageWater.value = item.url
}
const createLog = () => {
badgeApi.createLog({
pid: pid.value,
kind_id: checkId.value,
group: group.value,
prod_id: prodId.value
}).then((res: any) => {
console.log('createLog', res)
showReload.value = false
@@ -269,35 +206,17 @@ const createLog = () => {
const showPreview = ref(false)
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) {
// try {
// downloadImage(imageUrl.value);
// } catch {
// showPreview.value = true; // 自动下载失败时显示预览
// }
// }
showPreview.value = true;
}
const compareList = ref({})
const extend_value = ref(0)
const style_name = ref('')
function getCompareImage() {
badgeApi.getCompareImage({
pid: pid.value,
group: group.value,
prod_id: prodId.value
}).then((res: any) => {
console.log('getCompareImage', res)
extend_value.value = res.extend_value
compareList.value = res
style_name.value = res.list[0].kind_name || res.kind_name
}).catch((err) => {
@@ -340,14 +259,15 @@ const confirm = () => {
showConfirmDialog({
title: '确认下单',
message:
'请再次确认是否选择这个模型下单。',
'请再次确认是否选择这个模型下单,一个链接只能下单一次。',
})
.then(() => {
const parms = {
pid: pid.value,
key: key.value,
key: imgKey.value,
pay_amount: payAmount.value,
products: sizeList.value
products: sizeList.value,
prod_id: prodId.value
}
badgeApi.creatOrder(parms).then((res: any) => {
console.log('creatOrder', res)
@@ -371,6 +291,7 @@ const confirm = () => {
})
})
.catch(() => {
loading.value = false
// on cancel
});
@@ -406,14 +327,71 @@ const progressList = () => {
}
const newGroup = ref(0)
const isPreview = ref(false)
const getImageList = () => {
badgeApi.getImageList({
pid: pid.value,
group: group.value
group: group.value,
prod_id: prodId.value
}).then((res: any) => {
console.log('getImageList', res)
const data = res || []
flag.value = data.flag
prodId.value = data.prod_id
if (data.flag === 1) {
newGroup.value = data.next_group
nextTick(() => {
// 更新图片列表
const newList = data.list.map(item => ({
...item,
isNew: true
}))
// 找到第一个状态为1(已生成)的图片
const firstGeneratedImage = newList.find(item => item.status === 1)
// 如果有已生成的图片且还未设置预览图,则显示第一个生成的图片
if (firstGeneratedImage && !isPreview.value) {
imageUrl.value = firstGeneratedImage.origin_url
imageWater.value = firstGeneratedImage.url
imgKey.value = firstGeneratedImage.key
isPreview.value = true
}
// 合并新旧列表,保持原有顺序
const mergedList = imageList.value.map(item => {
const newItem = newList.find(n => n.key === item.key)
return newItem || item
})
// 添加新图片
newList.forEach(newItem => {
if (!mergedList.find(item => item.key === newItem.key)) {
mergedList.push(newItem)
}
})
// 更新图片列表
imageList.value = mergedList
// 如果已有选中图片,保持显示当前选中的图片
console.log('imgKey.value', imgKey.value)
if (imgKey.value) {
const currentImage = mergedList.filter((item: any) => item.key === imgKey.value)[0]
console.log('currentImage', currentImage)
if (currentImage && currentImage.status === 1) {
imageUrl.value = currentImage.origin_url
imageWater.value = currentImage.url
isPreview.value = true
} else {
imageUrl.value = currentImage.origin_url
imageWater.value = currentImage.url
isPreview.value = true
}
}
})
}
if (data.flag === 2) {
newGroup.value = data.next_group
// 清除轮询和进度条计时器
@@ -424,14 +402,22 @@ const getImageList = () => {
progress.value = 100
// 显示图片
imageUrl.value = data.list[0].origin_url
imageList.value = data.list
key.value = data.list[0].key
if (imgKey.value) {
imageUrl.value = data.list.filter((item: any) => item.key == imgKey.value)[0].origin_url
imageWater.value = data.list.filter((item: any) => item.key == imgKey.value)[0].url
} else {
imageUrl.value = data.list[0].origin_url
imageWater.value = data.list[0].url
imgKey.value = data.list[0].key
}
localStorage.remove('userId')
}
}).catch((err) => {
clearInterval(progressTimer.value)
progress.value = 0
// 清除轮询和进度条计时器
// clearInterval(timer.value)
// clearInterval(progressTimer.value)
// progress.value = 0
showToast({
message: err.message,
duration: 2000,
@@ -453,15 +439,27 @@ function handleBeforeUnload(_event: BeforeUnloadEvent) {
localStorage.remove('code')
localStorage.remove('trialCode')
localStorage.remove('userId')
// 清除轮询和进度条计时器
clearInterval(timer.value)
clearInterval(progressTimer.value)
}
const pid = ref(0)
const route = useRoute()
const prodId = ref(0)
onMounted(() => {
pid.value = route.query.pid
group.value = route.query.group
if (route.query.key) {
imgKey.value = route.query.key
}
if (route.query.prod_id) {
prodId.value = route.query.prod_id
}
// pid.value = 281505;
// group.value = 1;
// prodId.value = 7;
getImageList()
progressList()
getCompareImage()
@@ -597,7 +595,7 @@ onUnmounted(() => {
margin: 0 auto;
text-align: center;
width: 80vw;
height: 80vw;
min-height: 80vw;
display: flex;
justify-content: center;
align-items: center;
@@ -607,6 +605,12 @@ onUnmounted(() => {
width: 80vw;
height: 80vw;
border-radius: 50%;
position: relative;
}
.progress-section-img-item {
width: 80vw;
height: 80vw;
border-radius: 50%;
}
.progress-bar-bg {
width: 70%;
@@ -863,10 +867,41 @@ onUnmounted(() => {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
width: 80vw;
height: 80vw;
object-fit: cover;
box-shadow: inset 2px 2px 4px rgba(255, 255, 255, 0.5),inset -2px -2px 4px rgba(0, 0, 0, 0.2);
border-radius: 50%;
}
.image-list-box {
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
padding: 16px 16px 0 16px;
}
.image-list-item {
width: 20vw;
height: 20vw;
}
.image-list-item-img {
width: 20vw;
height: 20vw;
border-radius: 12px;
border: 3px solid #fff;
}
.image-list-item-img.imgActive {
border: 3px solid #50cf54;
}
.image-list-item-loading {
width: 20vw;
height: 20vw;
border-radius: 12px;
background: #f0f0f0;
display: flex;
align-items: center;
justify-content: center;
font-size: 12px;
color: #999;
}
</style>