diff --git a/components.d.ts b/components.d.ts index 2c6f112..1214e4c 100644 --- a/components.d.ts +++ b/components.d.ts @@ -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'] diff --git a/src/api/badge.ts b/src/api/badge.ts index ea33ff4..1a4d7f5 100644 --- a/src/api/badge.ts +++ b/src/api/badge.ts @@ -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, + }) } \ No newline at end of file diff --git a/src/router/index.ts b/src/router/index.ts index cc59311..e560eb7 100644 --- a/src/router/index.ts +++ b/src/router/index.ts @@ -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() diff --git a/src/utils/request.ts b/src/utils/request.ts index 162fa52..f15a0c3 100644 --- a/src/utils/request.ts +++ b/src/utils/request.ts @@ -49,11 +49,12 @@ const errorHandler = (error: RequestError): Promise => { // 请求拦截器 const requestHandler = (config: InternalAxiosRequestConfig): InternalAxiosRequestConfig | Promise => { - 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 } diff --git a/src/views/badge/index.vue b/src/views/badge/index.vue index 5ddd5f7..3fbf8f6 100644 --- a/src/views/badge/index.vue +++ b/src/views/badge/index.vue @@ -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) { + 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 = () => { 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() }) @@ -84,22 +289,22 @@ onMounted(() => { 剩余兑换数量
-
+
- 4cm + {{ item.size }}
- （剩余兑换：1） + （剩余兑换：{{ item.count }}）
-
+
@@ -108,7 +313,7 @@ onMounted(() => { 设计图集
- 8张 + {{ orderStat.create_count }}张
@@ -116,7 +321,7 @@ onMounted(() => { 我的订单
- 3笔 + {{ orderStat.order_count }}笔
@@ -150,7 +355,7 @@ onMounted(() => {
-
+
图片上传指南 @@ -170,71 +375,30 @@ onMounted(() => { 请确定您对上传的照片拥有合法使用权利或已取得他人合法授权，且同意本平台分析图片信息以提供生成服务
- +
- +
+
温馨提示：请上传1-2人的照片
风格样式
-
- 随机风格盲盒 -
- 随机风格盲盒 -
- -
-
- Q版国风动漫 -
- Q版国风动漫 -
- -
-
- Q版卡通 -
- Q版卡通 -
- -
-
- 芭比风 -
- 芭比风 -
- -
-
+
随机风格盲盒
随机风格盲盒
- -
-
- Q版国风动漫 -
- Q版国风动漫 -
- -
-
- Q版卡通 -
- Q版卡通 -
- +
-
- 芭比风 +
+
- 芭比风 + {{ item.name }}
- +
@@ -278,9 +442,9 @@ onMounted(() => {
上传照片
- +
- +
@@ -288,7 +452,7 @@ onMounted(() => {
- 剩余12次 + 剩余{{ orderStat.remain_count }}次
- + - +
补充背景照片 @@ -318,17 +482,17 @@ onMounted(() => { 选择该选项需要额外上传一张照片作为背景
- + - +
- +