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

单图徽章代码提交

lzm_web
Linzm 8 months ago
parent
ad93fb5fa0
commit
d95c0fbf2e
9 changed files with 523 additions and 184 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 1
      components.d.ts
  2. 47
      src/api/badge.ts
  3. 4
      src/router/index.ts
  4. 7
      src/utils/request.ts
  5. 326
      src/views/badge/index.vue
  6. 22
      src/views/badge/myOrder.vue
  7. 37
      src/views/badge/orderDetail.vue
  8. 201
      src/views/badge/preview.vue
  9. 62
      src/views/badge/record.vue

1
components.d.ts vendored
Unescape View File

@ -27,6 +27,7 @@ declare module '@vue/runtime-core' { @@ -27,6 +27,7 @@ declare module '@vue/runtime-core' {
VanGridItem: typeof import('vant/es')['GridItem']
VanIcon: typeof import('vant/es')['Icon']
VanImage: typeof import('vant/es')['Image']
VanLoading: typeof import('vant/es')['Loading']
VanStepper: typeof import('vant/es')['Stepper']
VanSwipe: typeof import('vant/es')['Swipe']
VanSwipeItem: typeof import('vant/es')['SwipeItem']

47
src/api/badge.ts
Unescape View File

@ -16,14 +16,22 @@ export const getKindList = (params: any) => { @@ -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) => { @@ -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,
})
}

4
src/router/index.ts
Unescape View File

@ -34,6 +34,10 @@ router.beforeEach((_to, _from, next) => { @@ -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()

7
src/utils/request.ts
Unescape View File

@ -49,11 +49,12 @@ const errorHandler = (error: RequestError): Promise<any> => { @@ -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
}

326
src/views/badge/index.vue
Unescape View File

@ -2,6 +2,7 @@ @@ -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({}) @@ -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) {
pictureBg.value = data;
}
function getBlobBg(data) {
console.log('getBlobBg', data)
if (data.size > 1024 * 1024 * 10) {
showToast('照片大小不能超过10M')
return
}
imgBgUrl.value = data;
console.log('背景图片地址', 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 = () => { @@ -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 = () => { @@ -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 = () => { @@ -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(() => { @@ -74,6 +277,8 @@ onMounted(() => {
getKindList()
getSundryList()
getList()
getOrderStat()
getSizeList()
})
</script>
@ -84,22 +289,22 @@ onMounted(() => { @@ -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(() => { @@ -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(() => { @@ -116,7 +321,7 @@ onMounted(() => {
我的订单
</div>
<div class="badge-count">
3笔
{{ orderStat.order_count }}笔
</div>
</div>
</div>
@ -150,7 +355,7 @@ onMounted(() => { @@ -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(() => { @@ -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">
<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" />
</div>
<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" />
</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" />
<span class="style-selected" v-if="checkId == 0" />
</div>
<div class="style-item">
<img class="style-img" src="@/assets/badge/suiji.png" alt="芭比风">
<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">
芭比风
{{ item.name }}
</div>
<span class="style-selected" />
<span class="style-selected" v-if="item.id == checkId" />
</div>
</div>
</div>
@ -278,9 +442,9 @@ onMounted(() => { @@ -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(() => { @@ -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(() => { @@ -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(() => { @@ -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(() => { @@ -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(() => { @@ -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 {

22
src/views/badge/myOrder.vue
Unescape View File

@ -5,12 +5,8 @@ @@ -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() { @@ -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) { @@ -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 {

37
src/views/badge/orderDetail.vue
Unescape View File

@ -5,11 +5,11 @@ @@ -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 @@ @@ -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 @@ @@ -47,7 +47,7 @@
<div class="address-detail">
详细地址详细地址详细地址详细地址详细地址详细地址
</div>
</div>
</div> -->
<div style="padding: 0 16px;">
<van-divider />
</div>
@ -56,11 +56,11 @@ @@ -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() { @@ -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>

201
src/views/badge/preview.vue
Unescape View File

@ -3,7 +3,7 @@ @@ -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 @@ @@ -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 @@ @@ -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 @@ @@ -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'">
<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'">
<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 == '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 @@ @@ -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 @@ @@ -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 @@ @@ -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 @@ @@ -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() { @@ -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 = () => { @@ -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 = () => { @@ -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 = () => { @@ -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)

62
src/views/badge/record.vue
Unescape View File

@ -6,17 +6,14 @@ @@ -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() { @@ -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() { @@ -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,16 +104,42 @@ function goBack() { @@ -98,16 +104,42 @@ 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;
top: 0;
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>
Write Preview
Loading…
Cancel
Save