forked from natuka/web.puabadge.com
You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
1445 lines
37 KiB
1445 lines
37 KiB
|
|
<template> |
|
<div class="photo-upload-page"> |
|
<div class="badge-size" v-if="trialCode == false"> |
|
<div class="order-type"> |
|
<div class="order-type-item"> |
|
<div class="order-type-item-title" v-if="orderStat.order_no"> |
|
{{ toValueWithout("订单编号") }} |
|
</div> |
|
<div class="order-type-item-title"> |
|
{{ orderStat.order_no }} |
|
</div> |
|
</div> |
|
<div class="order-type-item" v-if="prodId"> |
|
<div class="order-type-item-title"> |
|
{{ toValueWithout("产品类型") }} |
|
</div> |
|
<div class="order-type-item-title" v-if="typeId == 1"> |
|
{{ toValueWithout("立体徽章") }} |
|
</div> |
|
<div class="order-type-item-title" v-if="typeId == 2"> |
|
{{ toValueWithout("浮雕相框") }} |
|
</div> |
|
<div class="order-type-item-title" v-if="typeId == 3"> |
|
{{ toValueWithout("3D冰箱贴") }} |
|
</div> |
|
<div class="order-type-item-title" v-if="typeId == 4"> |
|
{{ toValueWithout("3D卡通手办") }} |
|
</div> |
|
</div> |
|
</div> |
|
<div class="size-title"> |
|
{{ toValueWithout("剩余兑换数量") }} |
|
</div> |
|
<div class="size-options"> |
|
<div class="size-item" v-for="item in sizeList" :key="item.id"> |
|
<div class="size-text"> |
|
{{ item.size }} |
|
</div> |
|
<div class="size-count"> |
|
（{{ toValueWithout("剩余兑换") }}：{{ item.remaining }}） |
|
</div> |
|
</div> |
|
</div> |
|
</div> |
|
<div class="badge-info" v-if="trialCode == false"> |
|
<div class="badge-item" @click="goToRecord"> |
|
<div class="badge-title"> |
|
{{ toValueWithout("设计图集") }} |
|
</div> |
|
<div class="badge-count"> |
|
{{ orderStat.create_count || 0 }}{{ toValueWithout("张") }} |
|
</div> |
|
</div> |
|
<div class="badge-item" @click="goToMyOrder"> |
|
<div class="badge-title"> |
|
{{ toValueWithout("我的订单") }} |
|
</div> |
|
<div class="badge-count"> |
|
{{ orderStat.order_count || 0 }}{{ toValueWithout("笔") }} |
|
</div> |
|
</div> |
|
</div> |
|
<div class="badge-phone" v-if="trialCode == true"> |
|
<van-field |
|
:label="toValueWithout('手机号码')" |
|
type="number" |
|
v-model="mobile" |
|
:placeholder="toValueWithout('请输入手机号')" |
|
required |
|
maxlength="11" |
|
:rules="[{ required: true, message: toValueWithout('请输入手机号') }]" |
|
@blur="onBlur" |
|
@confirm="onBlur" |
|
/> |
|
<p style="font-size: 12px; color: #000; margin-left: 16px;">{{ toValueWithout("注：需要先输入手机号才可体验徽章设计") }}</p> |
|
<div class="style-box"> |
|
<div class="style-box-item"> |
|
<div class="style-item-title" :class="{ styleActive: prodId == 7 || prodId == 1 }" @click="styleChange(7)"> |
|
{{ prop == '3D真人肖像' ? toValueWithout('3D真人肖像') : toValueWithout('人物立体徽章') }} |
|
</div> |
|
<div class="style-item-title" :class="{ styleActive: prodId == 8 || prodId == 2 }" @click="styleChange(8)"> |
|
{{ toValueWithout("宠物立体徽章") }} |
|
</div> |
|
</div> |
|
</div> |
|
</div> |
|
<div style="height: 8px;background: #F2F2F2;"></div> |
|
<div class="step-container" v-if="trialCode == false"> |
|
<div class="step-item active"> |
|
<div class="step-num"> |
|
1 |
|
</div> |
|
<div class="step-content"> |
|
<div class="step-title"> |
|
{{ toValueWithout("上传正面照片") }} |
|
</div> |
|
<div class="step-desc"> |
|
{{ toValueWithout("1张五官清晰的正面照片") }} |
|
</div> |
|
</div> |
|
</div> |
|
<div class="step-item"> |
|
<div class="step-num"> |
|
2 |
|
</div> |
|
<div class="step-content"> |
|
<div class="step-title"> |
|
{{ toValueWithout("确认下单") }} |
|
</div> |
|
<div class="step-desc"> |
|
{{ toValueWithout("选择一个你喜欢的设计") }} |
|
</div> |
|
</div> |
|
</div> |
|
</div> |
|
<div class="tag-change-box" v-if="trialCode == false"> |
|
<div class="tag-change-item"> |
|
<div class="tag-change-item-title" :class="{ tagActive: prodId == 7 || prodId == 1 }" @click="prodChange(7)"> |
|
{{ toValueWithout("人物主体") }} |
|
</div> |
|
<div class="tag-change-item-title" :class="{ tagActive: prodId == 8 || prodId == 19 }" @click="prodChange(8)"> |
|
{{ toValueWithout("宠物主体") }} |
|
</div> |
|
</div> |
|
<div style="font-size: 12px; color: #888; text-align: center;">{{ toValueWithout("不同主体的照片检测标准不同") }}</div> |
|
</div> |
|
<div class="step-line" v-if="prop == '3D真人肖像'"> |
|
<div class="step-line-item"> |
|
<div class="step-line-item-title"> |
|
<span style="display: flex; align-items: center;justify-content: center;"> |
|
<span style="height: 1px; background: #ccc;width: 50px;"></span> |
|
<span style="margin: 0 8px; color: #888;">{{ toValueWithout("照片示例") }}</span> |
|
<span style="height: 1px; background: #ccc;width: 50px;"></span> |
|
</span> |
|
</div> |
|
<div class="step-line-item-desc" style="display: flex; align-items: center;justify-content: space-around;padding: 16px 16px 0 16px;"> |
|
<div class="step-line-item-desc-item"> |
|
<img src="@/assets/badge/1.png" style="width: 20vw;height: 20vw;border-radius: 8px;" alt=""> |
|
</div> |
|
<div class="step-line-item-desc-item"> |
|
<img src="@/assets/badge/2.png" style="width: 20vw;height: 20vw;border-radius: 8px;" alt=""> |
|
</div> |
|
<div class="step-line-item-desc-item"> |
|
<img src="@/assets/badge/3.png" style="width: 20vw;height: 20vw;border-radius: 8px;" alt=""> |
|
</div> |
|
<div class="step-line-item-desc-item"> |
|
<img src="@/assets/badge/4.png" style="width: 20vw;height: 20vw;border-radius: 8px;" alt=""> |
|
</div> |
|
</div> |
|
</div> |
|
</div> |
|
<div class="photo-upload-body"> |
|
<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">{{ toValueWithout("图片上传指南") }}</span> |
|
</div> |
|
<div class="photo-upload-area"> |
|
<div class="photo-upload-plus"> |
|
+ |
|
</div> |
|
<div class="photo-upload-text"> |
|
{{ toValueWithout("点击上传照片") }} |
|
</div> |
|
<div class="photo-upload-tip"> |
|
*{{ toValueWithout("上传照片时建议勾选[原图]") }} |
|
</div> |
|
</div> |
|
<div class="photo-upload-footer"> |
|
{{ toValueWithout("请确定您对上传的照片拥有合法使用权利或已取得他人合法授权，且同意本平台分析图片信息以提供生成服务") }} |
|
</div> |
|
</div> |
|
<img class="photo-upload-img" v-if="picture" :src="picture" alt="" srcset=""> |
|
<div class="photo-upload-box-1"> |
|
<h5-cropper :option="option" @getbase64Data="getbase64Data" @imgorigoinf="imgorigoinf"></h5-cropper> |
|
</div> |
|
</div> |
|
<div v-if="typeId == 4 && kindList.length > 0"> |
|
<div style="font-size: 16px; color: #222; font-weight: bold; margin-top: 16px;padding: 0 16px;">{{ toValueWithout("风格类型") }}</div> |
|
<div class="kind-box"> |
|
<div class="kind-box-item" v-for="item in kindList" :key="item.id" :class="{ styleActive: kindId == item.id }"> |
|
<div class="kind-item-title" @click="kindChange(item.id)"> |
|
{{ toValueWithout(item.name) }} |
|
</div> |
|
</div> |
|
</div> |
|
</div> |
|
<div v-if="typeId == 4 && prodId == 19"> |
|
<div style="font-size: 16px; color: #222; font-weight: bold; margin-top: 16px;padding: 0 16px;">{{ toValueWithout("多视角参考图") }}</div> |
|
<div style="font-size: 12px; color: #aaa; margin-top: 8px;padding: 0 16px;">{{ toValueWithout("AI建模具有随机性，上传参考图有助于更好的还原主体特征") }}</div> |
|
<div class="photo-upload-box-refer"> |
|
<van-uploader v-model="referPicture" multiple :max-count="3" :max-size="10 * 1024 * 1024" @oversize="onOversize" :deletable="true" :show-preview="true" :before-read="beforeRead" upload-icon="plus" /> |
|
</div> |
|
</div> |
|
<div v-if="typeId != 4"> |
|
<div style="font-size: 12px; color: red; margin-top: 16px; text-align: center;" v-if="prodId == 7 || prodId == 1">{{ toValueWithout("温馨提示：请上传只有") }}{{ prop == '3D真人肖像' ? '1' : '1-3' }}{{ toValueWithout("人的照片") }}</div> |
|
<div style="font-size: 12px; color: red; margin-top: 16px; text-align: center;" v-if="prodId == 8 || prodId == 2">{{ toValueWithout("温馨提示：请上传只有") }}1-3{{ toValueWithout("只宠物的照片") }}</div> |
|
</div> |
|
<div style="height: 120px;"></div> |
|
<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 v-if="trialCode == false" class="design-remaining">{{ toValueWithout("剩余") }}{{ orderStat.remain_count || 0 }}{{ toValueWithout("次") }}</span> |
|
<span v-if="trialCode == true" class="design-remaining">{{ toValueWithout("体验1次") }}</span> |
|
</div> |
|
<button class="design-btn" @click="goToPreview"> |
|
<span>{{ toValueWithout("开始设计") }}</span> |
|
<img class="design-arrow" src="@/assets/badge/arrow.png" alt=""> |
|
</button> |
|
</div> |
|
</div> |
|
|
|
<van-action-sheet v-model:show="imgShow" :title="toValueWithout('图片上传指南')" :close-on-click-overlay="true" closeable> |
|
<div style="padding: 0 16px 24px 16px;"> |
|
<div style="text-align: center;"> |
|
<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="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;"> |
|
{{ toValueWithout("多主体") }} |
|
</div> |
|
</div> |
|
<div style="flex: 1; text-align: center;"> |
|
<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;"> |
|
{{ toValueWithout("光线昏暗") }} |
|
</div> |
|
</div> |
|
<div style="flex: 1; text-align: center;"> |
|
<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;"> |
|
{{ toValueWithout("后侧面及背影") }} |
|
</div> |
|
</div> |
|
</div> |
|
<div style="display: flex; justify-content: space-around; margin-bottom: 24px;"> |
|
<div style="flex: 1; text-align: center;"> |
|
<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;"> |
|
{{ toValueWithout("照片模糊") }} |
|
</div> |
|
</div> |
|
<div style="flex: 1; text-align: center;"> |
|
<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;"> |
|
{{ toValueWithout("照片留白过少") }} |
|
</div> |
|
</div> |
|
</div> |
|
<div style="margin-top: 24px; 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="imgShow = false"> |
|
{{ toValueWithout("我已了解") }} |
|
</button> |
|
</div> |
|
</div> |
|
</van-action-sheet> |
|
</template> |
|
<script setup lang="ts"> |
|
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 type { UploaderFileListItem } from 'vant' |
|
import * as badgeApi from '@/api/badge' |
|
import { useTranslation } from "i18next-vue"; |
|
import * as i18n from '@/lang/utils' |
|
import { toValueWithout } from '@/lang/utils' |
|
|
|
import { localStorage } from '@/utils/local-storage' |
|
import CryptoJS from 'crypto-js' |
|
|
|
// 初始化翻译功能 |
|
const { t } = useTranslation(); |
|
i18n.set(t); |
|
|
|
const show = ref(false) |
|
const imgShow = ref(false) |
|
|
|
const referPicture = ref<UploaderFileListItem[]>([]) |
|
|
|
const router = useRouter() |
|
const option = ref({ |
|
canScale: true, |
|
autoCropWidth: 1024, |
|
autoCropHeight: 1024, |
|
ceilbutton: true, |
|
infoTrue: true, |
|
fixed: false, |
|
fixedNumber: [3, 4], |
|
fixedBox: false, |
|
canMoveBox: true, |
|
enlarge: 2 |
|
}) |
|
const options = ref({ |
|
autoCropWidth: 1000, |
|
autoCropHeight: 1000, |
|
ceilbutton: false, |
|
info: true |
|
}) |
|
|
|
onMounted(() => { |
|
watch( |
|
() => prodId.value, |
|
() => { |
|
getSundryList() |
|
} |
|
) |
|
}) |
|
|
|
// 判断是否是APP |
|
const openApp = () => { |
|
const ua = navigator.userAgent; |
|
const isIOS = /iPhone|iPad|iPod/i.test(ua); |
|
const isAndroid = /Android/i.test(ua); |
|
|
|
if (isIOS) { |
|
option.value.ceilbutton = true |
|
options.value.ceilbutton = true |
|
} else if (isAndroid) { |
|
option.value.ceilbutton = false |
|
options.value.ceilbutton = false |
|
} else { |
|
option.value.ceilbutton = true |
|
options.value.ceilbutton = true |
|
} |
|
} |
|
const imgurl = ref('') |
|
const imgBgUrl = ref('') |
|
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 prodId = ref(7) |
|
const prop = ref('') |
|
const typeId = ref(0) |
|
const getOrderStat = () => { |
|
badgeApi.getOrderStat({}).then((res: any) => { |
|
orderStat.value = res |
|
if (res.type_id == 4) { |
|
prodId.value = res.prod_id == 1 ? 1 : 19 |
|
getKindList() |
|
} else { |
|
prodId.value = res.type_id == 3 ? 8 : res.prod_id |
|
} |
|
prop.value = res.prop |
|
typeId.value = res.type_id |
|
getSundryList() |
|
}) |
|
} |
|
|
|
const kindList = ref([]) |
|
const getKindList = () => { |
|
badgeApi.getKindList({ |
|
support_subject: prodId.value == 19 ? 2 : 1, |
|
type_id: 4 |
|
}).then((res: any) => { |
|
kindList.value = res.list |
|
kindId.value = res.list && res.list[0]?.id |
|
console.log('kindList', kindList.value) |
|
}) |
|
} |
|
|
|
const prodChange = (id: number) => { |
|
console.log('prodChange', id) |
|
if (typeId.value == 3 && id == 7) { |
|
showToast(toValueWithout('人物3D冰箱贴暂未开放')) |
|
return |
|
} |
|
if (typeId.value == 4) { |
|
if(prodId.value == 19) { |
|
showToast(toValueWithout('该订单属于宠物卡通手办')) |
|
return |
|
} |
|
if(prodId.value == 1) { |
|
showToast(toValueWithout('该订单属于人物卡通手办')) |
|
return |
|
} |
|
} |
|
prodId.value = typeId.value == 4 ? id == 8 ? 19 : 1 : id == 7 ? 7 : 8 |
|
picture.value = null |
|
kindId.value = 0 |
|
} |
|
|
|
const kindId = ref(0) |
|
const kindChange = (id: number) => { |
|
kindId.value = id |
|
console.log('kindChange', id) |
|
} |
|
|
|
const isLoading = ref(false) |
|
|
|
// 生成图片 |
|
function goToPreview() { |
|
if (isLoading.value) { |
|
return |
|
} |
|
console.log('goToPreview') |
|
if (!imgurl.value) { |
|
showToast(toValueWithout('请先上传照片')) |
|
return |
|
} |
|
if (orderStat.value.remain_count <= 0) { |
|
showToast(toValueWithout('剩余次数不足')) |
|
return |
|
} |
|
isLoading.value = true |
|
if (trialCode.value) { |
|
trialPhone() |
|
} else { |
|
getPid() |
|
} |
|
} |
|
|
|
// 一次性体验链接 |
|
const trialPhone = async () => { |
|
if (!mobile.value) { |
|
showToast(toValueWithout('请输入手机号')); |
|
return; |
|
} |
|
const mobileReg = /^1[3-9]\d{9}$/; |
|
if (!mobileReg.test(mobile.value)) { |
|
showToast(toValueWithout('请输入正确的手机号')); |
|
return; |
|
} |
|
await badgeApi.trialPhone({ |
|
phone: mobile.value |
|
}).then((res: any) => { |
|
const timestamp = Date.now() |
|
const payload = JSON.stringify({ userId: res, timestamp }) |
|
userId.value = Encrypt(payload) |
|
localStorage.set('userId', userId.value) |
|
getPid() |
|
}).catch((err) => { |
|
showToast({ |
|
message: err.message, |
|
duration: 2000, |
|
}) |
|
isLoading.value = false |
|
}).finally(() => { |
|
isLoading.value = false |
|
}) |
|
} |
|
const picture = ref(null) |
|
|
|
let imgPromise = null; |
|
|
|
const imageWidth = ref(0); |
|
const imageHeight = ref(0); |
|
function getbase64Data(data) { |
|
console.log('getbase64Data', data) |
|
picture.value = data; |
|
|
|
const img = new Image(); |
|
img.src = data; |
|
img.onload = () => { |
|
imageWidth.value = img.naturalWidth; |
|
imageHeight.value = img.naturalHeight; |
|
if (imageWidth.value < 300 || imageHeight.value < 300) { |
|
showToast(toValueWithout('请上传尺寸大于300*300像素的照片')) |
|
imgurl.value = null |
|
picture.value = null |
|
return false; |
|
} |
|
const blob = base64ToBlob(data); |
|
if (blob.size > 1024 * 1024 * 10) { |
|
showToast(toValueWithout('照片大小不能超过10M')) |
|
imgurl.value = null |
|
picture.value = null |
|
return false; |
|
} |
|
imgurl.value = blob; |
|
if (prodId.value == 7 || prodId.value == 1) { |
|
getUploadUrl() |
|
} |
|
} |
|
} |
|
|
|
function base64ToBlob(base64) { |
|
var arr = base64.split(','), |
|
mime = arr[0].match(/:(.*?);/)[1], |
|
bstr = atob(arr[1]), |
|
n = bstr.length, |
|
u8arr = new Uint8Array(n); |
|
while (n--) { |
|
u8arr[n] = bstr.charCodeAt(n); |
|
} |
|
return new Blob([u8arr], { |
|
type: mime |
|
}); |
|
} |
|
|
|
function imgorigoinf(data) { |
|
const img = new Image(); |
|
const objectUrl = URL.createObjectURL(data); // 创建文件对象的URL |
|
img.src = objectUrl; |
|
img.onload = () => { |
|
imageWidth.value = img.naturalWidth; |
|
imageHeight.value = img.naturalHeight; |
|
if (imageWidth.value < 300 || imageHeight.value < 300) { |
|
showToast(toValueWithout('请上传尺寸大于300*300像素的照片')) |
|
setTimeout(() => { |
|
const btn = document.querySelector('.btn') |
|
if (btn) { |
|
btn.click() |
|
} |
|
}, 1500); |
|
imgurl.value = null |
|
picture.value = null |
|
return |
|
} |
|
console.log('imageWidth', imageWidth.value, 'imageHeight', imageHeight.value) |
|
} |
|
} |
|
|
|
const getUploadUrl = () => { |
|
badgeApi.getUploadUrl({}).then((res: any) => { |
|
if (res) { |
|
sendFaceToOss(imgurl.value, res.upload_url, res.path) |
|
} |
|
}) |
|
} |
|
|
|
// 人脸识别上传 |
|
const sendFaceToOss = async (src: string, url: string, path: string) => { |
|
try { |
|
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 (response.status == 200) { |
|
badgeApi.faceCheck({ |
|
path: path, |
|
prop: prop.value, |
|
prod_id: prodId.value |
|
}).then((res: any) => { |
|
console.log('faceCheck', res) |
|
showSuccessToast({ |
|
message: toValueWithout('人脸检测成功'), |
|
duration: 2000, |
|
}) |
|
}).catch((err) => { |
|
console.log('faceCheck', err) |
|
showFailToast({ |
|
message: err.message || toValueWithout('人脸检测失败'), |
|
icon: 'none', |
|
duration: 2000, |
|
}) |
|
imgurl.value = null |
|
picture.value = null |
|
}).finally(() => { |
|
setTimeout(() => { |
|
closeToast() |
|
}, 2000); |
|
}) |
|
} |
|
} catch (err) { |
|
closeToast() |
|
showFailToast({ |
|
message: err.message || toValueWithout('上传失败'), |
|
icon: 'none', |
|
duration: 2000, |
|
}) |
|
} |
|
} |
|
|
|
const onOversize = (file: any) => { |
|
if (file.size > 10 * 1024 * 1024) { |
|
showToast(toValueWithout('照片大小不能超过10M')) |
|
return false |
|
} |
|
return true |
|
} |
|
|
|
const beforeRead = (file: any) => { |
|
const MIN_WIDTH = 300 |
|
const MIN_HEIGHT = 300 |
|
const MAX_SIZE = 10 * 1024 * 1024 |
|
|
|
const toPreviewAndCheck = (input: any): Promise<UploaderFileListItem> => { |
|
return new Promise((resolve, reject) => { |
|
const raw: File = input.file || input |
|
if (raw.size > MAX_SIZE) { |
|
showToast(toValueWithout('照片大小不能超过10M')) |
|
reject(false) |
|
return |
|
} |
|
const objectUrl = URL.createObjectURL(raw) |
|
const img = new Image() |
|
img.src = objectUrl |
|
img.onload = () => { |
|
const width = img.naturalWidth |
|
const height = img.naturalHeight |
|
imageWidth.value = width |
|
imageHeight.value = height |
|
URL.revokeObjectURL(objectUrl) |
|
if (width < MIN_WIDTH || height < MIN_HEIGHT) { |
|
showToast(toValueWithout(`请上传尺寸大于${MIN_WIDTH}×${MIN_HEIGHT}像素的照片`)) |
|
reject(false) |
|
return |
|
} |
|
const reader = new FileReader() |
|
reader.onload = (e) => { |
|
const url = e.target?.result as string |
|
// 设置回显，不手动 push，交由 v-model 维护 |
|
const out: any = input |
|
out.url = url |
|
resolve(out) |
|
} |
|
reader.onerror = () => { |
|
showToast(toValueWithout('图片读取失败')) |
|
reject(false) |
|
} |
|
reader.readAsDataURL(raw) |
|
} |
|
img.onerror = () => { |
|
showToast(toValueWithout('图片加载失败')) |
|
URL.revokeObjectURL(objectUrl) |
|
reject(false) |
|
} |
|
}) |
|
} |
|
|
|
if (Array.isArray(file)) { |
|
return Promise.allSettled(file.map(toPreviewAndCheck)).then((results) => { |
|
const passed = results |
|
.filter(r => r.status === 'fulfilled') |
|
.map((r: any) => r.value) |
|
if (passed.length === 0) return Promise.reject(false) |
|
return passed |
|
}) |
|
} |
|
return toPreviewAndCheck(file) |
|
} |
|
|
|
|
|
|
|
// 获取Pid |
|
const pid = ref('') |
|
const getPid = async () => { |
|
showLoadingToast({ |
|
message: toValueWithout('上传中...'), |
|
forbidClick: true, |
|
loadingType: 'spinner', |
|
duration: 0, |
|
}) |
|
const params = { |
|
prod_id: prodId.value, |
|
extend_value: -1, |
|
type_id: typeId.value |
|
} |
|
try { |
|
const res = await badgeApi.getPid(params) as any |
|
console.log('getPid', res) |
|
isLoading.value = false |
|
pid.value = res.pid |
|
try { |
|
const uploadTasks = [ |
|
sendToOss(imgurl.value, res.url), |
|
sendToOss(imgurl.value, res.oss_url) |
|
] |
|
await Promise.all(uploadTasks) |
|
if (typeId.value == 4 && prodId.value == 19 && referPicture.value.length > 0) { |
|
const multiUrlTasks = referPicture.value.map((item) => { |
|
return badgeApi.getMultiUrl({ |
|
pid: pid.value, |
|
}).then((res: any) => { |
|
console.log('multiUrl', res) |
|
return sendToOss(item.file, res.multi_url) |
|
}) |
|
}) |
|
await Promise.all(multiUrlTasks) |
|
} |
|
} catch (err) { |
|
closeToast() |
|
console.error('上传失败:', err) |
|
showFailToast({ |
|
message: toValueWithout('上传失败'), |
|
duration: 2000, |
|
}) |
|
isLoading.value = false |
|
return |
|
} |
|
} catch (err) { |
|
isLoading.value = false |
|
closeToast() |
|
showToast({ |
|
message: err.message, |
|
duration: 2000, |
|
}) |
|
console.log(err) |
|
} finally { |
|
isLoading.value = false |
|
} |
|
} |
|
// 上传到OSS |
|
const pendingUploads = ref(0) |
|
const isAnotherAPICalled = ref(false) |
|
const sendToOss = async (src: string | Blob | File, 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) { |
|
isAnotherAPICalled.value = true |
|
const params = { |
|
pid: pid.value, |
|
group: 1, |
|
prod_id: prodId.value, |
|
extend_value: -1, |
|
type_id: typeId.value, |
|
kind_id: kindId.value |
|
} |
|
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: err.message, |
|
duration: 2000, |
|
}) |
|
console.log("uploadImage----err", err) |
|
} |
|
} |
|
// 创建日志 |
|
const createLog = () => { |
|
const params = { |
|
pid: pid.value, |
|
group: 1, |
|
prod_id: prodId.value, |
|
type_id: typeId.value, |
|
kind_id: kindId.value |
|
} |
|
badgeApi.createLog(params).then((res: any) => { |
|
console.log('createLog', res) |
|
closeToast() |
|
showSuccessToast({ |
|
message: toValueWithout('照片上传成功'), |
|
duration: 2000, |
|
}) |
|
setTimeout(() => { |
|
closeToast() |
|
router.push({ |
|
path: '/badge/preview', |
|
query: { |
|
pid: pid.value, |
|
group: 1, |
|
prod_id: prodId.value, |
|
type_id: typeId.value, |
|
kind_id: kindId.value |
|
}, |
|
}) |
|
}, 1000); |
|
}).catch((err) => { |
|
console.log('getGenImages', err) |
|
showFailToast({ |
|
message: err.message, |
|
duration: 2000, |
|
}) |
|
}).finally(() => { |
|
closeToast() |
|
}) |
|
} |
|
|
|
// 获取首页图片上传指南图片 |
|
const sundryList = ref([]) |
|
const getSundryList = () => { |
|
badgeApi.getSundryList({ |
|
page: 1, |
|
size: 6, |
|
group: prodId.value == 7 || prodId.value == 1 ? 'gp' : 'pet', |
|
}).then((res: any) => { |
|
const data = res || [] |
|
sundryList.value = data.list |
|
}).catch((err) => { |
|
showToast({ |
|
message: err.message, |
|
duration: 2000, |
|
}) |
|
}).finally(() => { |
|
|
|
}) |
|
} |
|
|
|
// 判断是否是一次性体验链接 |
|
const trialCode = ref(false) |
|
const trialCodeValue = ref('') |
|
const getTrialCode = () => { |
|
const value = localStorage.get('trialCode') |
|
if (value) { |
|
trialCode.value = true |
|
trialCodeValue.value = value |
|
} else { |
|
getOrderStat() |
|
getSizeList() |
|
} |
|
} |
|
|
|
// 手机号输入框 |
|
const mobile = ref('') |
|
const userId = ref('') |
|
const onBlur = async () => { |
|
console.log(mobile.value); |
|
if (!mobile.value) { |
|
showToast(toValueWithout('请输入手机号')); |
|
return; |
|
} |
|
const mobileReg = /^1[3-9]\d{9}$/; |
|
if (!mobileReg.test(mobile.value)) { |
|
showToast(toValueWithout('请输入正确的手机号')); |
|
return; |
|
} |
|
} |
|
const styleChange = (id: number) => { |
|
prodId.value = id |
|
getSundryList() |
|
} |
|
const key = CryptoJS.enc.Utf8.parse("123abcdefpua2025"); |
|
const iv = CryptoJS.enc.Utf8.parse('DYgjCEIMVrj2W9xN'); |
|
function Encrypt(word: string): string { |
|
let srcs = CryptoJS.enc.Utf8.parse(word); |
|
let encrypted = CryptoJS.AES.encrypt(srcs, key, { |
|
iv: iv, mode: CryptoJS.mode.CBC, padding: CryptoJS.pad.Pkcs7 }); |
|
return encrypted.ciphertext.toString(); |
|
} |
|
function handleBeforeUnload(_event: BeforeUnloadEvent) { |
|
localStorage.remove('code') |
|
localStorage.remove('trialCode') |
|
localStorage.remove('userId') |
|
} |
|
onMounted(() => { |
|
getSundryList() |
|
openApp() |
|
getTrialCode() |
|
window.addEventListener('beforeunload', handleBeforeUnload); |
|
}) |
|
</script> |
|
|
|
<style lang="scss" scoped> |
|
.photo-upload-page { |
|
height: auto; |
|
overflow-y: scroll!important; |
|
} |
|
.badge-size { |
|
padding: 16px; |
|
.size-title { |
|
font-size: 14px; |
|
color: #000; |
|
} |
|
.size-options { |
|
.size-item { |
|
margin-top: 8px; |
|
display: flex; |
|
justify-content: space-between; |
|
align-items: center; |
|
.size-text { |
|
font-size: 14px; |
|
color: #333; |
|
text-align: center; |
|
padding: 4px 10px; |
|
background: #F0F2F5; |
|
border-radius: 4px; |
|
margin-right: 5px; |
|
display: inline-block; |
|
} |
|
.size-count { |
|
font-size: 12px; |
|
color: #999; |
|
display: inline-block; |
|
} |
|
} |
|
} |
|
} |
|
.badge-info { |
|
display: flex; |
|
justify-content: space-between; |
|
padding: 0 16px 16px 16px; |
|
.badge-item:first-child { |
|
background-image: url('@/assets/badge/sheji.png'); |
|
background-size: cover; |
|
background-position: center; |
|
margin-right: 5px; |
|
} |
|
.badge-item:last-child { |
|
background-image: url('@/assets/badge/order.png'); |
|
background-size: cover; |
|
background-position: center; |
|
margin-left: 5px; |
|
} |
|
.badge-item { |
|
padding: 18px 12px; |
|
flex: 1; |
|
text-align: left; |
|
cursor: pointer; |
|
height: 88px; |
|
.badge-title { |
|
font-size: 16px; |
|
color: #000; |
|
font-weight: bold; |
|
} |
|
.badge-count { |
|
font-size: 15px; |
|
color: #333; |
|
font-weight: bold; |
|
margin-top: 8px; |
|
} |
|
} |
|
} |
|
.step-container { |
|
display: flex; |
|
align-items: flex-start; |
|
padding: 16px 0 16px 16px; |
|
} |
|
.step-item { |
|
display: flex; |
|
align-items: center; |
|
flex: 1; |
|
overflow: hidden; |
|
white-space: nowrap; |
|
text-overflow: ellipsis; |
|
} |
|
.step-item.active { |
|
flex: 2; |
|
margin-left: 50px; |
|
} |
|
.step-num { |
|
font-size: 48px; |
|
line-height: 1; |
|
position: relative; |
|
margin-right: 8px; |
|
text-shadow: 0 2px 8px #e6f7e6; |
|
color: #CCCCCC; |
|
} |
|
.step-item.active .step-num { |
|
color: #fff; |
|
text-shadow: |
|
1px 1px 0 #000, |
|
-1px -1px 0 #000, |
|
-1px 1px 0 #000, |
|
1px -1px 0 #000, |
|
0 1px 0 #000, |
|
1px 0 0 #000, |
|
0 -1px 0 #000, |
|
-1px 0 0 #000; |
|
} |
|
.step-item.active .step-num::after { |
|
content: ''; |
|
position: absolute; |
|
top: 20px; |
|
right: 0; |
|
width: 15px; |
|
height: 15px; |
|
background-color: #50cf54; |
|
opacity: 0.5; |
|
border-radius: 50%; |
|
} |
|
.step-content { |
|
display: flex; |
|
flex-direction: column; |
|
} |
|
.step-title { |
|
font-size: 16px; |
|
color: #808080; |
|
} |
|
.step-desc { |
|
font-size: 12px; |
|
color: #808080; |
|
margin-top: 2px; |
|
} |
|
|
|
.photo-upload-body { |
|
position: relative; |
|
width: 80vw; |
|
height: 80vw; |
|
margin: 16px auto 0 auto; |
|
text-align: center; |
|
} |
|
.photo-upload-box { |
|
margin: 16px auto 0 auto; |
|
width: 80vw; |
|
height: 80vw; |
|
border-radius: 12px; |
|
background: #F0F2F5; |
|
position: relative; |
|
display: flex; |
|
flex-direction: column; |
|
align-items: center; |
|
box-sizing: border-box; |
|
} |
|
.photo-upload-box-1 { |
|
width: 80vw; |
|
height: 70vw; |
|
border-radius: 12px; |
|
/* background: #F0F2F5; */ |
|
background: rgba(0, 0, 0, 0); |
|
position: absolute; |
|
bottom: 0; |
|
left: 0; |
|
right: 0; |
|
} |
|
.photo-upload-img { |
|
max-width: 80vw; |
|
max-height: 80vw; |
|
border-radius: 12px; |
|
} |
|
.photo-upload-header { |
|
width: 100%; |
|
display: flex; |
|
align-items: center; |
|
padding: 12px 16px 0 12px; |
|
font-size: 14px; |
|
color: #888; |
|
justify-content: flex-end; |
|
} |
|
.photo-upload-guide-icon { |
|
font-size: 16px; |
|
margin-right: 4px; |
|
} |
|
.photo-upload-guide-text { |
|
font-size: 13px; |
|
} |
|
.photo-upload-area { |
|
flex: 1; |
|
display: flex; |
|
flex-direction: column; |
|
align-items: center; |
|
justify-content: center; |
|
user-select: none; |
|
} |
|
.photo-upload-plus { |
|
font-size: 48px; |
|
color: #c2c2c2; |
|
margin-bottom: 0; |
|
} |
|
.photo-upload-text { |
|
font-size: 16px; |
|
color: #888; |
|
margin-bottom: 4px; |
|
} |
|
.photo-upload-tip { |
|
font-size: 12px; |
|
color: #b0b0b0; |
|
} |
|
.photo-upload-footer { |
|
position: absolute; |
|
bottom: 0px; |
|
left: 0; |
|
width: 100%; |
|
text-align: center; |
|
font-size: 12px; |
|
color: #b0b0b0; |
|
padding: 0 12px; |
|
line-height: 1.5; |
|
} |
|
|
|
.style-section { |
|
margin: 16px 0 0 0; |
|
padding: 0 16px; |
|
} |
|
.style-title { |
|
font-size: 16px; |
|
color: #222; |
|
font-weight: bold; |
|
margin-bottom: 12px; |
|
} |
|
.style-list { |
|
display: flex; |
|
gap: 10px; |
|
justify-content: flex-start; |
|
align-items: flex-start; |
|
overflow-x: scroll; |
|
scrollbar-width: none; /* Firefox */ |
|
-ms-overflow-style: none; /* IE and Edge */ |
|
} |
|
.style-list::-webkit-scrollbar { |
|
display: none; /* Chrome, Safari, Opera */ |
|
} |
|
.style-item { |
|
display: flex; |
|
flex-direction: column; |
|
align-items: center; |
|
cursor: pointer; |
|
position: relative; |
|
width: 25vw; |
|
} |
|
.style-img { |
|
width: 23vw; |
|
height: 23vw; |
|
border-radius: 8px; |
|
border: 2px solid transparent; |
|
object-fit: cover; |
|
transition: border 0.2s; |
|
} |
|
.style-item .style-selected { |
|
position: absolute; |
|
right: 4px; |
|
bottom: 30px; |
|
width: 20px; |
|
height: 20px; |
|
background: #50cf54; |
|
border-radius: 50%; |
|
border: 2px solid #fff; |
|
display: inline-block; |
|
box-shadow: 0 2px 8px rgba(80, 207, 84, 0.2); |
|
} |
|
.style-item .style-selected::after { |
|
content: ''; |
|
display: block; |
|
width: 10px; |
|
height: 6px; |
|
border-left: 2px solid #fff; |
|
border-bottom: 2px solid #fff; |
|
position: absolute; |
|
left: 4px; |
|
top: 5px; |
|
transform: rotate(-45deg); |
|
} |
|
.style-item .style-label { |
|
margin-top: 8px; |
|
font-size: 14px; |
|
color: #333; |
|
text-align: center; |
|
white-space: nowrap; |
|
} |
|
.style-item:hover .style-img, |
|
.style-item .style-selected ~ .style-img { |
|
border: 2px solid #50cf54; |
|
} |
|
|
|
.bg-style-section { |
|
margin: 24px 0 0 0; |
|
padding: 0 16px; |
|
} |
|
.bg-style-header { |
|
display: flex; |
|
align-items: center; |
|
justify-content: space-between; |
|
margin-bottom: 12px; |
|
} |
|
.bg-style-title { |
|
font-size: 16px; |
|
color: #000; |
|
font-weight: bold; |
|
margin-right: 8px; |
|
} |
|
.bg-style-desc { |
|
font-size: 13px; |
|
color: #808080; |
|
display: flex; |
|
align-items: center; |
|
cursor: not-allowed; |
|
} |
|
.bg-style-desc.disabled { |
|
opacity: 0.6; |
|
} |
|
.bg-style-tabs { |
|
display: flex; |
|
gap: 10px; |
|
margin-bottom: 8px; |
|
} |
|
.bg-style-tab { |
|
padding: 6px 18px; |
|
border: none; |
|
border-radius: 18px; |
|
background: #f0f2f5; |
|
color: #333; |
|
font-size: 12px; |
|
cursor: pointer; |
|
outline: none; |
|
transition: background 0.2s, color 0.2s; |
|
} |
|
.bg-style-tab.active { |
|
background: #e6f7e6; |
|
color: #22c55e; |
|
font-weight: bold; |
|
} |
|
.bg-style-tab:disabled { |
|
background: #f0f2f5; |
|
color: #b0b0b0; |
|
cursor: not-allowed; |
|
} |
|
.bg-style-tip { |
|
font-size: 13px; |
|
color: #888; |
|
margin-top: 4px; |
|
} |
|
.bg-photo-upload-section { |
|
margin: 24px 0 0 0; |
|
padding: 0 16px; |
|
} |
|
.bg-photo-upload-header { |
|
display: flex; |
|
align-items: center; |
|
justify-content: space-between; |
|
font-size: 16px; |
|
font-weight: bold; |
|
color: #222; |
|
margin-bottom: 12px; |
|
} |
|
.bg-photo-upload-area { |
|
display: flex; |
|
align-items: center; |
|
position: relative; |
|
} |
|
.bg-photo-upload-label { |
|
display: inline-block; |
|
} |
|
.bg-photo-upload-label-1 { |
|
position: absolute; |
|
top: 0; |
|
left: 0; |
|
right: 0; |
|
width: 120px; |
|
height: 120px; |
|
background: none; |
|
} |
|
.bg-photo-upload-box { |
|
width: 120px; |
|
height: 120px; |
|
border: 2px dashed #b0b0b0; |
|
border-radius: 12px; |
|
display: flex; |
|
flex-direction: column; |
|
align-items: center; |
|
justify-content: center; |
|
cursor: pointer; |
|
background: #fafafa; |
|
transition: border 0.2s; |
|
} |
|
.bg-photo-upload-img { |
|
width: 120px; |
|
height: 120px; |
|
border-radius: 12px; |
|
} |
|
.bg-photo-upload-plus { |
|
font-size: 32px; |
|
color: #b0b0b0; |
|
margin-bottom: 8px; |
|
} |
|
.bg-photo-upload-text { |
|
font-size: 16px; |
|
color: #888; |
|
} |
|
|
|
.design-action-bar { |
|
display: flex; |
|
align-items: center; |
|
justify-content: space-between; |
|
padding: 16px; |
|
background: #fff; |
|
position: fixed; |
|
left: 0; |
|
right: 0; |
|
bottom: 0; |
|
z-index: 10; |
|
} |
|
.design-left { |
|
display: flex; |
|
align-items: center; |
|
} |
|
.design-leaf-icon { |
|
margin-right: 4px; |
|
vertical-align: middle; |
|
} |
|
.design-remaining { |
|
color: #222; |
|
font-size: 16px; |
|
font-weight: 500; |
|
} |
|
.design-btn { |
|
display: flex; |
|
align-items: center; |
|
justify-content: center; |
|
border: none; |
|
outline: none; |
|
cursor: pointer; |
|
width: 50vw; |
|
height: 56px; |
|
border-radius: 28px; |
|
font-size: 20px; |
|
font-weight: bold; |
|
background: linear-gradient(90deg, #D1ED8E 0%, #55E668 100%); |
|
color: #222; |
|
box-shadow: 0 2px 8px rgba(80, 207, 84, 0.10); |
|
transition: background 0.2s; |
|
} |
|
.design-btn .design-arrow { |
|
margin-left: 20px; |
|
vertical-align: middle; |
|
position: absolute; |
|
right: 30px; |
|
transition: transform 0.2s; |
|
width: 18px; |
|
height: 12px; |
|
} |
|
.btndiv { |
|
position: fixed; |
|
bottom: 120px; |
|
width: 80%; |
|
left: 50%; |
|
transform: translateX(-50%); |
|
} |
|
@media screen and (max-width: 767px) { |
|
_::-webkit-full-page-media, |
|
_:future, |
|
:root .btndiv { |
|
padding-bottom: 120px; |
|
} |
|
} |
|
.order-type-item { |
|
display: flex; |
|
align-items: center; |
|
justify-content: space-between; |
|
background: #fff; |
|
border-radius: 12px; |
|
margin-bottom: 12px; |
|
font-size: 14px; |
|
} |
|
.style-box { |
|
padding: 0 16px; |
|
} |
|
.style-box-item { |
|
display: flex; |
|
justify-content: space-between; |
|
align-items: center; |
|
border-radius: 12px; |
|
font-size: 14px; |
|
margin-bottom: 12px; |
|
} |
|
.style-item-title { |
|
width: 48%; |
|
text-align: center; |
|
padding: 10px 0; |
|
border-radius: 12px; |
|
color: #333; |
|
font-size: 14px; |
|
background: #f5f5f5; |
|
} |
|
.style-item-title.styleActive { |
|
background: #50cf54; |
|
color: #fff; |
|
} |
|
.tag-change-box { |
|
margin: 0 auto; |
|
} |
|
.tag-change-item { |
|
display: flex; |
|
align-items: center; |
|
justify-content: center; |
|
border-radius: 12px; |
|
padding: 10px 0; |
|
} |
|
.tag-change-item-title { |
|
font-size: 14px; |
|
color: #333; |
|
background: #E5E5E5; |
|
width: 120px; |
|
height: 32px; |
|
text-align: center; |
|
line-height: 32px; |
|
} |
|
.tag-change-item-title:first-child { |
|
border-top-left-radius: 16px; |
|
border-bottom-left-radius: 16px; |
|
} |
|
.tag-change-item-title:last-child { |
|
border-top-right-radius: 16px; |
|
border-bottom-right-radius: 16px; |
|
} |
|
.tag-change-item-title.tagActive { |
|
background: #50CF54; |
|
color: #fff; |
|
} |
|
.kind-box { |
|
display: flex; |
|
align-items: center; |
|
justify-content: flex-start; |
|
flex-wrap: wrap; |
|
padding: 16px 36px; |
|
} |
|
.kind-box-item { |
|
margin-right: 10px; |
|
padding: 6px 10px; |
|
background: #f5f5f5; |
|
border-radius: 8px; |
|
color: #333; |
|
} |
|
.kind-item-title { |
|
font-size: 14px; |
|
} |
|
.kind-box-item.styleActive { |
|
background: #50CF54; |
|
color: #fff; |
|
} |
|
.photo-upload-box-refer { |
|
margin: 16px; |
|
} |
|
</style>
|
|
|