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.
1187 lines
29 KiB
1187 lines
29 KiB
<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 * as badgeApi from '@/api/badge' |
|
|
|
import { localStorage } from '@/utils/local-storage' |
|
import CryptoJS from 'crypto-js' |
|
|
|
const show = ref(false) |
|
const imgShow = ref(false) |
|
const router = useRouter() |
|
const option = ref({ |
|
canScale: true, |
|
autoCropWidth: 1024, |
|
autoCropHeight: 1024, |
|
ceilbutton: false, |
|
infoTrue: true, |
|
fixed: false, |
|
fixedNumber: [3, 4], |
|
fixedBox: false, |
|
canMoveBox: true, |
|
enlarge: 6 |
|
}) |
|
const options = ref({ |
|
autoCropWidth: 1000, |
|
autoCropHeight: 1000, |
|
ceilbutton: false, |
|
info: true |
|
}) |
|
|
|
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 = false |
|
options.value.ceilbutton = false |
|
} |
|
} |
|
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 getOrderStat = () => { |
|
badgeApi.getOrderStat({}).then((res: any) => { |
|
orderStat.value = res |
|
prodId.value = res.prod_id |
|
prop.value = res.prop |
|
getSundryList() |
|
}) |
|
} |
|
|
|
const isLoading = ref(false) |
|
|
|
function goToPreview() { |
|
if (isLoading.value) { |
|
return |
|
} |
|
console.log('goToPreview') |
|
if (!imgurl.value) { |
|
showToast('请先上传照片') |
|
return |
|
} |
|
if (orderStat.value.remain_count <= 0) { |
|
showToast('剩余次数不足') |
|
return |
|
} |
|
isLoading.value = true |
|
if (trialCode.value) { |
|
trialPhone() |
|
} else { |
|
getPid() |
|
} |
|
} |
|
const trialPhone = async () => { |
|
if (!mobile.value) { |
|
showToast('请输入手机号'); |
|
return; |
|
} |
|
const mobileReg = /^1[3-9]\d{9}$/; |
|
if (!mobileReg.test(mobile.value)) { |
|
showToast('请输入正确的手机号'); |
|
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 < 500 || imageHeight.value < 500) { |
|
showToast('请上传尺寸大于500*500像素的照片') |
|
imgurl.value = null |
|
picture.value = null |
|
return false; |
|
} |
|
const blob = base64ToBlob(data); |
|
if (blob.size > 1024 * 1024 * 10) { |
|
showToast('照片大小不能超过10M') |
|
imgurl.value = null |
|
picture.value = null |
|
return false; |
|
} |
|
imgurl.value = blob; |
|
if (prodId.value == 7) { |
|
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 < 500 || imageHeight.value < 500) { |
|
showToast('请上传尺寸大于500*500像素的照片') |
|
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: 7 |
|
}).then((res: any) => { |
|
console.log('faceCheck', res) |
|
showSuccessToast({ |
|
message: '人脸检测成功', |
|
duration: 2000, |
|
}) |
|
}).catch((err) => { |
|
console.log('faceCheck', err) |
|
showFailToast({ |
|
message: err.message || '人脸检测失败', |
|
icon: 'none', |
|
duration: 2000, |
|
}) |
|
imgurl.value = null |
|
picture.value = null |
|
}).finally(() => { |
|
setTimeout(() => { |
|
closeToast() |
|
}, 2000); |
|
}) |
|
} |
|
} catch (err) { |
|
closeToast() |
|
showFailToast({ |
|
message: err.message || '上传失败', |
|
icon: 'none', |
|
duration: 2000, |
|
}) |
|
} |
|
} |
|
|
|
|
|
|
|
// 获取Pid |
|
const pid = ref('') |
|
const getPid = async () => { |
|
showLoadingToast({ |
|
message: '上传中...', |
|
forbidClick: true, |
|
loadingType: 'spinner', |
|
duration: 0, |
|
}) |
|
const params = { |
|
prod_id: prodId.value, |
|
extend_value: -1, |
|
} |
|
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) |
|
} catch (err) { |
|
closeToast() |
|
console.error('上传失败:', err) |
|
showFailToast({ |
|
message: '上传失败', |
|
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, 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 |
|
} |
|
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 |
|
} |
|
badgeApi.createLog(params).then((res: any) => { |
|
console.log('createLog', res) |
|
closeToast() |
|
showSuccessToast({ |
|
message: '照片上传成功', |
|
duration: 2000, |
|
}) |
|
setTimeout(() => { |
|
closeToast() |
|
router.push({ |
|
path: '/badge/preview', |
|
query: { |
|
pid: pid.value, |
|
group: 1, |
|
prod_id: prodId.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 ? '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('请输入手机号'); |
|
return; |
|
} |
|
const mobileReg = /^1[3-9]\d{9}$/; |
|
if (!mobileReg.test(mobile.value)) { |
|
showToast('请输入正确的手机号'); |
|
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> |
|
|
|
<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"> |
|
订单编号 |
|
</div> |
|
<div class="order-type-item-title"> |
|
{{ orderStat.order_no }} |
|
</div> |
|
</div> |
|
<div class="order-type-item" v-if="orderStat.prod_id"> |
|
<div class="order-type-item-title"> |
|
产品类型 |
|
</div> |
|
<div class="order-type-item-title"> |
|
{{ orderStat.prod_id == 7 ? '人物立体徽章' : '宠物立体徽章'}} |
|
</div> |
|
</div> |
|
</div> |
|
<div class="size-title"> |
|
剩余兑换数量 |
|
</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"> |
|
（剩余兑换：{{ item.remaining }}） |
|
</div> |
|
</div> |
|
</div> |
|
</div> |
|
<div class="badge-info" v-if="trialCode == false"> |
|
<div class="badge-item" @click="goToRecord"> |
|
<div class="badge-title"> |
|
设计图集 |
|
</div> |
|
<div class="badge-count"> |
|
{{ orderStat.create_count || 0 }}张 |
|
</div> |
|
</div> |
|
<div class="badge-item" @click="goToMyOrder"> |
|
<div class="badge-title"> |
|
我的订单 |
|
</div> |
|
<div class="badge-count"> |
|
{{ orderStat.order_count || 0 }}笔 |
|
</div> |
|
</div> |
|
</div> |
|
<div class="badge-phone" v-if="trialCode == true"> |
|
<van-field |
|
label="手机号码" |
|
type="number" |
|
v-model="mobile" |
|
placeholder="请输入手机号" |
|
required |
|
maxlength="11" |
|
:rules="[{ required: true, message: '请输入手机号' }]" |
|
@blur="onBlur" |
|
@confirm="onBlur" |
|
/> |
|
<p style="font-size: 12px; color: #000; margin-left: 16px;">注：需要先输入手机号才可体验徽章设计</p> |
|
<div class="style-box"> |
|
<div class="style-box-item"> |
|
<div class="style-item-title" :class="{ styleActive: prodId == 7 }" @click="styleChange(7)"> |
|
{{ prop == '3D真人肖像' ? '3D真人肖像' : '人物立体徽章' }} |
|
</div> |
|
<div class="style-item-title" :class="{ styleActive: prodId == 8 }" @click="styleChange(8)"> |
|
宠物立体徽章 |
|
</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"> |
|
上传正面照片 |
|
</div> |
|
<div class="step-desc"> |
|
1张五官清晰的正面照片 |
|
</div> |
|
</div> |
|
</div> |
|
<div class="step-item"> |
|
<div class="step-num"> |
|
2 |
|
</div> |
|
<div class="step-content"> |
|
<div class="step-title"> |
|
确认下单 |
|
</div> |
|
<div class="step-desc"> |
|
选择一个你喜欢的设计 |
|
</div> |
|
</div> |
|
</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;">照片示例</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">图片上传指南</span> |
|
</div> |
|
<div class="photo-upload-area"> |
|
<div class="photo-upload-plus"> |
|
+ |
|
</div> |
|
<div class="photo-upload-text"> |
|
点击上传照片 |
|
</div> |
|
<div class="photo-upload-tip"> |
|
*上传照片时建议勾选[原图] |
|
</div> |
|
</div> |
|
<div class="photo-upload-footer"> |
|
请确定您对上传的照片拥有合法使用权利或已取得他人合法授权，且同意本平台分析图片信息以提供生成服务 |
|
</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 style="font-size: 12px; color: red; margin-top: 16px; text-align: center;" v-if="prodId == 7">温馨提示：请上传只有{{ prop == '3D真人肖像' ? '1' : '1-3' }}人的照片</div> |
|
<div style="font-size: 12px; color: red; margin-top: 16px; text-align: center;" v-if="prodId == 8">温馨提示：请上传只有1-3只宠物的照片</div> |
|
<div style="height: 90px;"></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">剩余{{ orderStat.remain_count || 0 }}次</span> |
|
<span v-if="trialCode == true" class="design-remaining">体验1次</span> |
|
</div> |
|
<button class="design-btn" @click="goToPreview"> |
|
<span>开始设计</span> |
|
<img class="design-arrow" src="@/assets/badge/arrow.png" alt=""> |
|
</button> |
|
</div> |
|
</div> |
|
|
|
<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="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;"> |
|
多主体 |
|
</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;"> |
|
光线昏暗 |
|
</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;"> |
|
后侧面及背影 |
|
</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;"> |
|
照片模糊 |
|
</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;"> |
|
照片留白过少 |
|
</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"> |
|
我已了解 |
|
</button> |
|
</div> |
|
</div> |
|
</van-action-sheet> |
|
</template> |
|
|
|
<style scoped> |
|
.photo-upload-page { |
|
height: auto; |
|
overflow-y: scroll!important; |
|
} |
|
.badge-size { |
|
padding: 16px; |
|
.size-title { |
|
font-size: 14px; |
|
color: #000; |
|
} |
|
.size-options { |
|
display: flex; |
|
justify-content: space-between; |
|
align-items: center; |
|
margin-top: 8px; |
|
.size-item:last-child { |
|
margin-left: 5px; |
|
} |
|
.size-item { |
|
flex: 1; |
|
.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: 8px; |
|
} |
|
.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: 10px; |
|
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; |
|
} |
|
</style>
|
|
|