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-06-06 17:00:51 +08:00
1 parent ad93fb5fa0
commit d95c0fbf2e
9 files changed
+524 -185
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

src/api/badge.ts
+44 -3
View File
@@ -16,14 +16,22 @@ export const getKindList = (params: any) => {
})
}
// 获取上传图片地址
export const getImageUrl = (params: any) => {
return request('images/uploadUrl', {
// 获取上传pid
export const getPid = (params: any) => {
return request('images/pid', {
method: 'GET',
params,
})
}
// 生成的图片记录
export const createLog = (data: any) => {
return request('images/createLog', {
method: 'POST',
data,
})
}
// 获取图片
export const getImageList = (params: any) => {
return request('images/getList', {
@@ -56,9 +64,42 @@ export const getOrderDetail = (params: any) => {
})
}
// 推送生成效果图
export const putMOdeling = (data: any) => {
return request('images/putModeling', {
method: 'POST',
data,
})
}
// 获取尺寸剩余次数
export const getOrderPrice = (params: any) => {
return request('orders/price', {
method: 'GET',
params,
})
}
// 获取对比原图
export const getCompareImage = (params: any) => {
return request('images/getImagesLogDetail', {
method: 'GET',
params,
})
}
// 获取统计数量
export const getOrderStat = (params: any) => {
return request('orders/stat', {
method: 'GET',
params,
})
}
// 确认下单
export const creatOrder = (data: any) => {
return request('orders/create', {
method: 'POST',
data,
})
}
src/router/index.ts
+4
View File
@@ -34,6 +34,10 @@ router.beforeEach((_to, _from, next) => {
// const tokenStore = useTokenStore()
const store = useStore()
const code = _to.query.code
if (code) {
localStorage.setItem('code', code as string);
}
console.log('code===>', code);
if (code) {
let url = store.redirectUrl()
src/utils/request.ts
+4 -3
View File
@@ -49,11 +49,12 @@ const errorHandler = (error: RequestError): Promise<any> => {
// 请求拦截器
const requestHandler = (config: InternalAxiosRequestConfig): InternalAxiosRequestConfig | Promise<InternalAxiosRequestConfig> => {
const savedToken = localStorage.get(STORAGE_TOKEN_KEY)
// const savedToken = localStorage.get(STORAGE_TOKEN_KEY)
// 如果 token 存在
const code = localStorage.get('code')
// 让每个请求携带自定义 token, 请根据实际情况修改
if (savedToken)
config.headers[REQUEST_TOKEN_KEY] = savedToken
if (code)
config.headers['Authorization'] = code
return config
}
src/views/badge/index.vue
+242 -86
View File
@@ -2,6 +2,7 @@
import { useRouter } from 'vue-router'
import H5Cropper from 'vue-cropper-h5'
import "vue-cropper-h5/dist/style.css"
import { showLoadingToast, showToast, closeToast, showFailToast, showSuccessToast } from 'vant';
import * as badgeApi from '@/api/badge'
import { onMounted, ref } from 'vue';
@@ -13,23 +14,220 @@ const options = ref({})
const imgurl = ref('')
const imgBgUrl = ref('')
const isBgShow = ref(true)
const remaining = ref(0)
function goToRecord() {
router.push('/badge/record')
}
function goToMyOrder() {
router.push('/badge/myOrder')
}
const sizeList = ref([])
const getSizeList = () => {
badgeApi.getOrderPrice({}).then((res: any) => {
sizeList.value = res
})
}
const orderStat = ref({})
const getOrderStat = () => {
badgeApi.getOrderStat({}).then((res: any) => {
orderStat.value = res
})
}
const isLoading = ref(false)
function goToPreview() {
router.push('/badge/preview')
if (isLoading.value) {
return
}
console.log('goToPreview')
if (!imgurl.value) {
showToast('请先上传照片')
return
}
if (isBgShow.value == false && !imgBgUrl.value) {
showToast('请先上传背景照片')
return
}
if (orderStat.remain_count <= 0) {
showToast('剩余次数不足')
return
}
isLoading.value = true
getPid()
}
const picture = ref(null)
function getbase64Data(data) {
picture.value = data;
}
function getBlob(data) {
console.log('getBlob', data)
if (data.size > 1024 * 1024 * 10) {
showToast('照片大小不能超过10M')
return
}
imgurl.value = data;
console.log('图片地址', data)
}
const pictureBg = ref(null)
function getBgbase64Data(data) {
imgBgUrl.value = data;
console.log('背景图片地址', data)
pictureBg.value = data;
}
function getBlobBg(data) {
console.log('getBlobBg', data)
if (data.size > 1024 * 1024 * 10) {
showToast('照片大小不能超过10M')
return
}
imgBgUrl.value = data;
}
const getRandomNumber = (min: number, max: number) => {
return Math.floor(Math.random() * (max - min + 1) + min);
}
// 获取Pid
const pid = ref('')
const kindId = ref(0)
const getPid = async () => {
showLoadingToast({
message: '上传中...',
forbidClick: true,
})
kindId.value = checkId.value == 0 ? getRandomNumber(kindList.value[0].id, kindList.value[kindList.value.length - 1].id) : checkId.value
const params = {
extend_value: isBgShow.value ? -1 : 0,
kind_id: kindId.value,
}
try {
const res = await badgeApi.getPid(params)
console.log('getPid', res)
isLoading.value = false
pid.value = res.pid
if (isBgShow.value) {
try {
const uploadTasks = [
sendToOss(imgurl.value, res.url),
sendToOss(imgurl.value, res.oss_url)
]
await Promise.all(uploadTasks)
} catch (err) {
closeToast()
console.error('上传失败:', err)
showFailToast({
message: '上传失败',
duration: 2000,
})
}
} else {
try {
const uploadTasks = [
sendToOss(imgurl.value, res.url),
sendToOss(imgurl.value, res.oss_url),
sendToOss(imgBgUrl.value, res.extend_url),
sendToOss(imgBgUrl.value, res.extend_bg_url)
]
await Promise.all(uploadTasks)
} catch (err) {
closeToast()
console.error('上传失败:', err)
showFailToast({
message: '上传失败',
duration: 2000,
})
}
}
} catch (err) {
isLoading.value = false
console.log(err)
} finally {
isLoading.value = false
closeToast()
}
}
// 上传到OSS
const pendingUploads = ref(0)
const isAnotherAPICalled = ref(false)
const sendToOss = async (src: string, url: string) => {
try {
pendingUploads.value++
const response = await fetch(url, {
method: 'PUT',
headers: {
'Content-Type': 'image/jpeg'
},
body: src
})
if (!response.ok) {
throw new Error('Upload failed')
}
console.log('图片上传成功--------', response)
if (--pendingUploads.value === 0 && !isAnotherAPICalled.value) {
const params = {
pid: pid.value,
kind_id: kindId.value,
extend_value: isBgShow.value ? -1 : 0,
group: 1,
}
badgeApi.putMOdeling(params).then((res: any) => {
console.log('putModeling', res)
createLog()
}).catch((err) => {
console.log('putModeling', err)
}).finally(() => {
closeToast()
})
}
} catch (err) {
closeToast()
pendingUploads.value--
showFailToast({
message: '照片上传失败',
duration: 2000,
})
console.log("uploadImage----err", err)
}
}
const createLog = () => {
const params = {
pid: pid.value,
group: 1,
kind_id: kindId.value,
}
badgeApi.createLog(params).then((res: any) => {
console.log('createLog', res)
closeToast()
showSuccessToast({
message: '照片上传成功',
duration: 2000,
})
setTimeout(() => {
router.push({
path: '/badge/preview',
query: {
pid: pid.value,
group: 1,
},
})
}, 1000);
}).catch((err) => {
console.log('getGenImages', err)
showFailToast({
message: '照片上传失败',
duration: 2000,
})
}).finally(() => {
closeToast()
})
}
const kindList = ref([])
const checkId = ref(0)
const getKindList = () => {
badgeApi.getKindList({
page: 1,
@@ -37,12 +235,14 @@ const getKindList = () => {
scale: 20,
}).then((res: any) => {
const data = res || []
kindList.value = data.list
}).catch((err) => {
}).finally((err) => {
})
}
const sundryList = ref([])
const getSundryList = () => {
badgeApi.getSundryList({
page: 1,
@@ -50,12 +250,14 @@ const getSundryList = () => {
group: 'gp',
}).then((res: any) => {
const data = res || []
sundryList.value = data.list
}).catch((err) => {
}).finally((err) => {
})
}
const caseList = ref([])
const getList = () => {
badgeApi.getSundryList({
page: 1,
@@ -64,6 +266,7 @@ const getList = () => {
ids: '6,7,8,9,19'
}).then((res: any) => {
const data = res || []
caseList.value = data.list
}).catch((err) => {
}).finally((err) => {
@@ -74,6 +277,8 @@ onMounted(() => {
getKindList()
getSundryList()
getList()
getOrderStat()
getSizeList()
})
</script>
@@ -84,22 +289,22 @@ onMounted(() => {
剩余兑换数量
</div>
<div class="size-options">
<div class="size-item">
<div class="size-item" v-for="item in sizeList" :key="item.id">
<div class="size-text">
4cm
{{ item.size }}
</div>
<div class="size-count">
（剩余兑换：1）
（剩余兑换：{{ item.count }}）
</div>
</div>
<div class="size-item">
<!-- <div class="size-item">
<div class="size-text">
5cm
</div>
<div class="size-count">
（剩余兑换：2）
</div>
</div>
</div> -->
</div>
</div>
<div class="badge-info">
@@ -108,7 +313,7 @@ onMounted(() => {
设计图集
</div>
<div class="badge-count">
8张
{{ orderStat.create_count }}张
</div>
</div>
<div class="badge-item" @click="goToMyOrder">
@@ -116,7 +321,7 @@ onMounted(() => {
我的订单
</div>
<div class="badge-count">
3笔
{{ orderStat.order_count }}笔
</div>
</div>
</div>
@@ -150,7 +355,7 @@ onMounted(() => {
</div>
</div>
<div class="photo-upload-body">
<div v-if="!imgurl" class="photo-upload-box">
<div v-if="!picture" class="photo-upload-box">
<div class="photo-upload-header" @click="imgShow = true">
<van-icon name="question-o" size="16px" class="photo-upload-guide-icon" />
<span class="photo-upload-guide-text">图片上传指南</span>
@@ -170,71 +375,30 @@ onMounted(() => {
请确定您对上传的照片拥有合法使用权利或已取得他人合法授权，且同意本平台分析图片信息以提供生成服务
</div>
</div>
<img class="photo-upload-img" v-if="imgurl" :src="imgurl" alt="" srcset="">
<img class="photo-upload-img" v-if="picture" :src="picture" alt="" srcset="">
<div class="photo-upload-box-1">
<h5-cropper :option="option" @getbase64Data="getbase64Data"></h5-cropper>
<h5-cropper :option="option" @getbase64Data="getbase64Data" @getFile="getFile" @getblob='getBlob'></h5-cropper>
</div>
</div>
<div style="font-size: 12px; color: red; margin-top: 16px; text-align: center;">温馨提示：请上传1-2人的照片</div>
<div class="style-section">
<div class="style-title">
风格样式
</div>
<div class="style-list">
<div class="style-item">
<div class="style-item" @click="checkId = 0">
<img class="style-img" src="@/assets/badge/suiji.png" alt="随机风格盲盒">
<div class="style-label">
随机风格盲盒
</div>
<span class="style-selected" />
<span class="style-selected" v-if="checkId == 0" />
</div>
<div class="style-item">
<img class="style-img" src="@/assets/badge/suiji.png" alt="Q版国风动漫">
<div class="style-item" v-for="item in kindList" :key="item.id" @click="checkId = item.id">
<img class="style-img" :src="item.path" :alt="item.name">
<div class="style-label">
Q版国风动漫
{{ item.name }}
</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" />
</div>
<div class="style-item">
<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" />
</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" />
</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" />
</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 class="style-selected" v-if="item.id == checkId" />
</div>
</div>
</div>
@@ -278,9 +442,9 @@ onMounted(() => {
<div class="bg-photo-upload-text">上传照片</div>
</div>
</div>
<img v-if="imgBgUrl" class="bg-photo-upload-img" :src="imgBgUrl" alt="">
<img v-if="pictureBg" class="bg-photo-upload-img" :src="pictureBg" alt="">
<div class="bg-photo-upload-label-1">
<h5-cropper :option="options" @getbase64Data="getBgbase64Data"></h5-cropper>
<h5-cropper :option="options" @getbase64Data="getBgbase64Data" @getFile="getFile" @getblob='getBlobBg'></h5-cropper>
</div>
</div>
</div>
@@ -288,7 +452,7 @@ onMounted(() => {
<div class="design-action-bar">
<div class="design-left">
<img class="design-leaf-icon" width="18" height="18" src="@/assets/badge/leaf.png" alt="">
<span class="design-remaining">剩余12次</span>
<span class="design-remaining">剩余{{ orderStat.remain_count }}次</span>
</div>
<button class="design-btn" @click="goToPreview">
<span>开始设计</span>
@@ -305,11 +469,11 @@ onMounted(() => {
选择该选项设计的徽章会根据上传的人像照片背景进行生成效果
</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="caseList[2].path" 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="caseList[3].path" style="width: 90px; height: 90px; border-radius: 12px; object-fit: cover;">
</div>
<div style="font-weight: bold; font-size: 15px; margin-bottom: 4px;">
补充背景照片
@@ -318,17 +482,17 @@ onMounted(() => {
选择该选项需要额外上传一张照片作为背景
</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="caseList[0].path" 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="caseList[1].path" style="width: 90px; height: 90px; border-radius: 12px; object-fit: cover;">
</div>
<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="caseList[4].path" 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">
@@ -341,44 +505,37 @@ onMounted(() => {
<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;">
</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>
<span style="background: #e6f7e6; color: #22c55e; border-radius: 8px; padding: 2px 10px; font-size: 13px;">照片清晰</span>
<span style="background: #e6f7e6; color: #22c55e; border-radius: 8px; padding: 2px 10px; font-size: 13px;">主体明确</span>
<span style="background: #e6f7e6; color: #22c55e; border-radius: 8px; padding: 2px 10px; font-size: 13px;">面部特征明显</span>
<span style="background: #e6f7e6; color: #22c55e; border-radius: 8px; padding: 2px 10px; font-size: 13px;">预留充足留白</span>
<img :src="sundryList[0].path" alt="照片上传指南" style="width: 90vw; border-radius: 16px; margin-bottom: 16px;">
</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;">
<img :src="sundryList[1].path" 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;">
<img :src="sundryList[2].path" 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;">
<img :src="sundryList[3].path" 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="display: flex; justify-content: space-around; 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;">
<img :src="sundryList[4].path" 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;">
<img :src="sundryList[5].path" alt="照片留白过少" style="width: 25vw; height: 25vw; border-radius: 8px; object-fit: cover;">
<div style="font-size: 13px; color: #888; margin-top: 4px;">
照片留白过少
</div>
@@ -647,9 +804,8 @@ onMounted(() => {
width: 23vw;
height: 23vw;
border-radius: 8px;
object-fit: cover;
background: #f5f5f5;
border: 2px solid transparent;
object-fit: cover;
transition: border 0.2s;
}
.style-item .style-selected {
src/views/badge/myOrder.vue
+16 -6
View File
@@ -5,12 +5,8 @@
</div>
<div class="order-list">
<div class="order-item" @click="OrderDetail(item.id)" v-for="item in orders" :key="item.id">
<img class="order-img" src="@/assets/badge/suiji.png" alt="order1" />
<span class="order-status status-processing">生产中</span>
</div>
<div class="order-item">
<img class="order-img" src="@/assets/badge/suiji.png" alt="order2" />
<span class="order-status status-finished">已完成</span>
<img class="order-img" :src="item.path" alt="order1" />
<span class="order-status status-processing">{{ getStatus(item.status) }}</span>
</div>
</div>
</div>
@@ -32,6 +28,7 @@ function getOrder() {
badgeApi.getMyOrder({
page: page.value,
pageSize: 10,
status: 0,
}).then(res => {
if(page.value === 1) {
orders.value = res.data.list
@@ -59,6 +56,19 @@ function OrderDetail(id: number) {
},
})
}
function getStatus(status: number) {
if(status == 1) {
return '待支付'
} else if(status == 2) {
return '已取消'
} else if(status == 100) {
return '生产中'
} else if(status == 200) {
return '待收货'
} else if(status == 300) {
return '已完成'
}
}
</script>
<style scoped>
.header {
src/views/badge/orderDetail.vue
+25 -12
View File
@@ -5,11 +5,11 @@
</div>
<div class="order-status">
<div class="avatar-wrapper">
<img class="avatar-img" src="@/assets/badge/suiji.png" alt="生产中" />
<img class="avatar-img" :src="order.path" :alt="order.kind_name" />
</div>
</div>
<div class="status-info">
<div class="status-title">生产中</div>
<div class="status-title">{{ getStatus(order.status) }}</div>
<div class="status-desc">
下单后预计需要7天完成生产发货。如对产品有疑问，可以联系客服咨询。
</div>
@@ -26,18 +26,18 @@
</div>
<div class="product-row">
<span class="product-label">尺寸</span>
<span class="product-value">5cm</span>
<span class="product-value">{{order.model_size}}</span>
</div>
<div class="product-row">
<span class="product-label">购买数量</span>
<span class="product-value">1</span>
<span class="product-value">{{order.count}}</span>
</div>
</div>
</div>
<div style="padding: 0 16px;">
<!-- <div style="padding: 0 16px;">
<van-divider />
</div>
<div class="address-info" style="padding: 0 16px;">
</div> -->
<!-- <div class="address-info" style="padding: 0 16px;">
<div class="address-title">收货信息</div>
<div class="address-row">
<img class="address-img" src="@/assets/badge/location.png" alt="" >
@@ -47,7 +47,7 @@
<div class="address-detail">
详细地址详细地址详细地址详细地址详细地址详细地址
</div>
</div>
</div> -->
<div style="padding: 0 16px;">
<van-divider />
</div>
@@ -56,11 +56,11 @@
<div class="product-details">
<div class="product-row">
<span class="product-label">购买订单id</span>
<span class="product-value">O98462</span>
<span class="product-value">{{order.sw_oid}}</span>
</div>
<div class="product-row">
<span class="product-label">购买时间</span>
<span class="product-value">2025-03-24 16:12:46</span>
<span class="product-value">{{order.pay_at || '未支付'}}</span>
</div>
</div>
</div>
@@ -83,12 +83,25 @@ function getOrderDetail() {
badgeApi.getOrderDetail({
id: id.value,
}).then(res => {
order.value = res.data
order.value = res
})
}
const router = useRouter();
function goBack() {
router.push('/badge/myOrder');
router.back()
}
function getStatus(status: number) {
if(status == 1) {
return '待支付'
} else if(status == 2) {
return '已取消'
} else if(status == 100) {
return '生产中'
} else if(status == 200) {
return '待收货'
} else if(status == 300) {
return '已完成'
}
}
</script>
<style scoped>
src/views/badge/preview.vue
+141 -60
View File
@@ -3,7 +3,7 @@
<view class="backstyle_1"></view>
<view class="backstyle_2"></view>
<div class="header" @click="goBack">
<span class="back-icon"><van-icon name="arrow-left" size="16px" /> 返回</span>
<span class="back-icon"><van-icon name="arrow-left" size="16px" /> 效果预览</span>
</div>
<div class="step-container">
<div class="step-item">
@@ -28,7 +28,11 @@
<div class="progress-desc">总计大约需要60秒，请耐心等待...</div>
</div>
<div v-else class="progress-section">
<img class="progress-section-img" :src="imageUrl" alt="">
<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="">
</van-swipe-item>
</van-swipe>
</div>
<div class="info-section">
<div class="info-item">
@@ -53,24 +57,24 @@
</div>
<div class="order-section">
<div class="order-title">订购数量</div>
<div class="order-item">
<span class="order-size">4cm</span>
<span class="order-free">(剩余兑换：1)</span>
<div class="order-item" v-for="item in sizeList" :key="item.id">
<span class="order-size">{{ item.size }}</span>
<span class="order-free">(剩余兑换：{{ item.count }})</span>
<div class="order-ctrl">
<van-stepper v-model="value" @change="changeValue" />
<van-stepper v-model="value" :min="0" :max="item.count" @change="changeValue" />
</div>
</div>
<div class="order-item">
<!-- <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>
<div class="confirm-box">
<div class="action-section">
<button @click="showReload = true" class="action-btn"><img class="action-img" src="@/assets/badge/reload.png" alt=""> 再次生成</button>
<button @click="reload" :disabled="flag < 2" 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>
@@ -82,45 +86,23 @@
<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')">
<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="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'">
<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 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 class="confirm-button" @click="sureReload">
确认再次生成
</button>
</div>
@@ -131,13 +113,13 @@
<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;">
<img :src="compareList.origin_path" :alt="compareList.kind_name" 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;">
<img :src="imageUrl" :alt="compareList.kind_name" style="width: 120px; height: 120px; border-radius: 8px;">
</div>
</div>
<div style="text-align: center; margin-top: 16px; color: #999; font-size: 12px;">
@@ -152,13 +134,13 @@
<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;">
<img :src="compareList.origin_path" :alt="compareList.kind_name" 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;">
<img :src="compareList.extend_path" :alt="compareList.kind_name" 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;">
@@ -166,7 +148,7 @@
</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;">
<img :src="imageUrl" :alt="compareList.kind_name" style="width: 120px; height: 120px; border-radius: 8px;">
</div>
</div>
<div style="text-align: center; margin-top: 16px; color: #999; font-size: 12px;">
@@ -179,16 +161,58 @@
</template>
<script setup lang="ts">
import { onMounted, ref } from 'vue';
import { useRouter } from 'vue-router';
import { useRoutimporter } from 'vue-router';
import { showSuccessToast } from 'vant';
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)
const currentIndex = ref(0)
const imageList = ref([])
function compare() {
// showCompare.value = true
showBgCompare.value = true
getCompareImage()
}
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) => {
}).finally((err) => {
})
showReload.value = true
}
function sureReload() {
console.log('sureReload')
imageUrl.value = '';
group.value = newGroup.value
badgeApi.createLog({
pid: pid.value,
kind_id: checkId.value,
group: group.value,
}).then((res: any) => {
console.log('createLog', res)
showReload.value = false
progressTimer.value = null
getImageList()
progressList()
timer.value = setInterval(() => {
getImageList()
}, 10000)
}).catch((err) => {
console.log('createLog', err)
}).finally((err) => {
showReload.value = false
})
}
function save() {
// 下载图片到本地
@@ -207,20 +231,66 @@ function save() {
showReload.value = true
}
}
const style = ref('suiji')
function changeStyle(style: string) {
console.log(style)
style.value = style
}
function confirm() {
console.log('confirm')
const compareList = ref({})
function getCompareImage() {
badgeApi.getCompareImage({
pid: pid.value,
group: group.value,
}).then((res: any) => {
console.log('getCompareImage', res)
if (res.extend_value == -1) {
showCompare.value = true
compareList.value = res
} else {
showBgCompare.value = true
compareList.value = res
}
}).catch((err) => {
console.log('getCompareImage', err)
}).finally((err) => {
})
}
function goBack() {
router.push('/badge');
router.back()
}
const sizeList = ref([])
const getSizeList = () => {
badgeApi.getOrderPrice({}).then((res: any) => {
sizeList.value = res
})
}
const payAmount = ref(0)
const changeValue = (value: number) => {
console.log(value)
payAmount.value = value
}
const key = ref(0)
const confirm = () => {
console.log('confirm')
const parms = {
pid: pid.value,
key: key.value,
pay_amount: payAmount.value,
products: sizeList.value
}
badgeApi.creatOrder(parms).then((res: any) => {
console.log('creatOrder', res)
showSuccessToast({
message: '下单成功',
duration: 2000,
})
router.push({
path: '/badge/myOrder'
})
}).catch((err) => {
console.log('creatOrder', err)
}).finally((err) => {
})
}
const imageUrl = ref('')
@@ -238,19 +308,21 @@ const progressList = () => {
if (progress.value < 90) {
progress.value += 1
}
}, 500)
}, 300)
}
}
const newGroup = ref(0)
const getImageList = () => {
badgeApi.getKindList({
pid: 0,
badgeApi.getImageList({
pid: pid.value,
group: group.value
}).then((res: any) => {
console.log('getImageList', res)
const data = res || []
flag.value = data.flag || 1
if (flag.value === 2) {
flag.value = data.flag
if (data.flag === 2) {
newGroup.value = data.next_group
// 清除轮询和进度条计时器
clearInterval(timer.value)
clearInterval(progressTimer.value)
@@ -259,7 +331,9 @@ const getImageList = () => {
progress.value = 100
// 显示图片
imageUrl.value = data.url
imageUrl.value = data.list[0].origin_url
imageList.value = data.list
key.value = data.list[0].key
}
}).catch((err) => {
clearInterval(progressTimer.value)
@@ -269,9 +343,16 @@ const getImageList = () => {
})
}
const pid = ref(0)
const route = useRoute()
onMounted(() => {
pid.value = route.query.pid
group.value = route.query.group
// pid.value = 281505;
// group.value = 1;
getImageList()
progressList()
getSizeList()
timer.value = setInterval(() => {
getImageList()
}, 10000)
src/views/badge/record.vue
+47 -15
View File
@@ -6,17 +6,14 @@
<div class="record-container">
<div class="record-note">注：可点击效果图进行下单打印</div>
<div class="record-images">
<div class="record-image-item">
<img src="@/assets/badge/suiji.png" alt="效果图" style="width: 100%; height: 100%; object-fit: cover; border-radius: 50%;">
</div>
<div class="record-image-item">
<img src="@/assets/badge/suiji.png" alt="效果图" style="width: 100%; height: 100%; object-fit: cover; border-radius: 50%;">
</div>
<div class="record-image-item">
<img src="@/assets/badge/suiji.png" alt="效果图" style="width: 100%; height: 100%; object-fit: cover; border-radius: 50%;">
</div>
<div class="record-image-item">
<img src="@/assets/badge/suiji.png" alt="效果图" style="width: 100%; height: 100%; object-fit: cover; border-radius: 50%;">
<div class="record-image-item" v-for="item in images" :key="item.id">
<block v-if="item.status == 1" @click="goPreview(item)">
<img :src="item.path" :alt="item.name" style="width: 100%; height: 100%; object-fit: cover; border-radius: 50%;">
<div class="record-image-item-shadow"></div>
</block>
<div v-else class="record-image-item-loading" stop-click>
设计失败
</div>
</div>
</div>
</div>
@@ -43,12 +40,12 @@ function getList() {
pageSize: 10,
}).then(res => {
if(page.value === 1) {
images.value = res.data.list
images.value = res.list
} else {
images.value.push(...res.data.list)
images.value.push(...res.list)
}
if(res.data.list.length < 10) {
if(res.list.length < 10) {
finished.value = true
} else {
page.value++
@@ -58,6 +55,15 @@ function getList() {
})
}
function goPreview(item) {
router.push({
path: '/badge/preview',
query: {
pid: item.sw_pid,
group: item.group_count,
},
})
}
function onLoad() {
getList()
}
@@ -98,9 +104,10 @@ function goBack() {
width: 100%;
padding-bottom: 100%;
position: relative;
border-radius: 50%;
overflow: hidden;
cursor: pointer;
background: #f5f5f5;
border-radius: 12px;
}
.record-image-item img {
position: absolute;
@@ -108,6 +115,31 @@ function goBack() {
left: 0;
width: 100%;
height: 100%;
border-radius: 50%;
object-fit: cover;
}
.record-image-item-shadow {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
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%;
}
.record-image-item-loading {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
background: #f5f5f5;
border-radius: 50%;
font-size: 16px;
color: #999;
}
</style>