diff --git a/.env.development b/.env.development index ff634ef..ba1388d 100644 --- a/.env.development +++ b/.env.development @@ -1,7 +1,7 @@ VITE_APP_PREVIEW=true # VITE_APP_API_BASE_URL=http://172.16.0.47:8166/web/ -# VITE_APP_API_BASE_URL=https://wechat-test.api.puabadge.com/web/ -VITE_APP_API_BASE_URL=https://wechat.api.puabadge.com/web/ +VITE_APP_API_BASE_URL=https://wechat-test.api.puabadge.com/web/ +# VITE_APP_API_BASE_URL=https://wechat.api.puabadge.com/web/ # VITE_APP_API_WX_URL=https://wechat.api.puabadge.com/web/ # http://web.suwa3d.dev:28499/ VITE_HTTP_MOCK=true diff --git a/components.d.ts b/components.d.ts index d819104..109a968 100644 --- a/components.d.ts +++ b/components.d.ts @@ -24,7 +24,6 @@ declare module '@vue/runtime-core' { VanDivider: typeof import('vant/es')['Divider'] VanField: typeof import('vant/es')['Field'] VanIcon: typeof import('vant/es')['Icon'] - VanImage: typeof import('vant/es')['Image'] VanList: typeof import('vant/es')['List'] VanPullRefresh: typeof import('vant/es')['PullRefresh'] VanStepper: typeof import('vant/es')['Stepper'] diff --git a/src/api/badge.ts b/src/api/badge.ts index 8b274e5..dd932ff 100644 --- a/src/api/badge.ts +++ b/src/api/badge.ts @@ -127,3 +127,27 @@ export const faceCheck = (params: any) => { params, }) } + +// 获取形状列表 +export const getShapeList = (params: any) => { + return request('products/shapeList', { + method: 'GET', + params, + }) +} + +// 获取形状类别列表 +export const getTypesList = (params: any) => { + return request('products/typesList', { + method: 'GET', + params, + }) +} + +// 上传合成图 +export const composite = (data: any) => { + return request('uploads/composite', { + method: 'POST', + data, + }) +} diff --git a/src/assets/font/font.css b/src/assets/font/font.css new file mode 100644 index 0000000..26b4a00 --- /dev/null +++ b/src/assets/font/font.css @@ -0,0 +1,4 @@ +@font-face { + font-family: "chinese"; + src: url('jingnan-Nunito.ttf'); +} \ No newline at end of file diff --git a/src/assets/font/jingnan-Nunito.ttf b/src/assets/font/jingnan-Nunito.ttf new file mode 100644 index 0000000..6651ab3 Binary files /dev/null and b/src/assets/font/jingnan-Nunito.ttf differ diff --git a/src/main.ts b/src/main.ts index 26de12f..d766720 100644 --- a/src/main.ts +++ b/src/main.ts @@ -7,6 +7,7 @@ import router from './router' import './app.less' import './assets/icon/iconfont.css' +import "./assets/font/font.css"; // import I18n from "@/lang/i18n" import I18NextVue from 'i18next-vue' diff --git a/src/views/badge/index.vue b/src/views/badge/index.vue index a8ab011..145337a 100644 --- a/src/views/badge/index.vue +++ b/src/views/badge/index.vue @@ -12,10 +12,15 @@ 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({ @@ -135,19 +140,23 @@ function getbase64Data(data) { img.onload = () => { imageWidth.value = img.naturalWidth; imageHeight.value = img.naturalHeight; - if (imageWidth.value < 800 || imageHeight.value < 800) { - showToast('请上传尺寸大于800*800像素的照片') - return + 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() } - } - const blob = base64ToBlob(data); - if (blob.size > 1024 * 1024 * 10) { - showToast('照片大小不能超过10M') - return - } - imgurl.value = blob; - if (prodId.value == 7) { - getUploadUrl() } } @@ -172,8 +181,8 @@ function imgorigoinf(data) { img.onload = () => { imageWidth.value = img.naturalWidth; imageHeight.value = img.naturalHeight; - if (imageWidth.value < 800 || imageHeight.value < 800) { - showToast('请上传尺寸大于800*800像素的照片') + if (imageWidth.value < 500 || imageHeight.value < 500) { + showToast('请上传尺寸大于500*500像素的照片') setTimeout(() => { const btn = document.querySelector('.btn') if (btn) { @@ -795,7 +804,7 @@ onMounted(() => { } .step-title { font-size: 16px; - color: #808080;; + color: #808080; } .step-desc { font-size: 12px; @@ -808,6 +817,7 @@ onMounted(() => { width: 80vw; height: 80vw; margin: 16px auto 0 auto; + text-align: center; } .photo-upload-box { margin: 16px auto 0 auto; @@ -833,8 +843,8 @@ onMounted(() => { right: 0; } .photo-upload-img { - width: 80vw; - height: 80vw; + max-width: 80vw; + max-height: 80vw; border-radius: 12px; } .photo-upload-header { diff --git a/src/views/badge/orderDetail.vue b/src/views/badge/orderDetail.vue index fdbd7a8..174e214 100644 --- a/src/views/badge/orderDetail.vue +++ b/src/views/badge/orderDetail.vue @@ -5,8 +5,10 @@
- -
+ +
+ +
@@ -22,16 +24,20 @@
产品信息
- 产品名称 - 立体徽章 + 产品名称 + 立体徽章
- 尺寸 - {{order.model_size}} + 尺寸 + {{order.model_size}} +
+
+ 形状 + {{shape_name}}
- 购买数量 - {{order.count}} + 购买数量 + {{order.count}}
@@ -80,13 +86,42 @@ onMounted(() => { id.value = route.query.id getOrderDetail() }) + +const shapeImage = ref('') +const imageUrl = ref('') +const getStyle = ref('') +const shape_name = ref('') + function getOrderDetail() { badgeApi.getOrderDetail({ id: id.value, }).then(res => { order.value = res + imageUrl.value = res.path + shapeImage.value = res.shape_details.frame_path + shape_name.value = res.shape_details.name + // if (res.shape_details) { + // ImageShow(res.shape_details) + // } }) } + +const ImageShow = (item: any) => { + const scale = 0.6 + const img = new Image() + img.src = item.frame_path + img.onload = () => { + console.log('img', img) + const ratioWidth = 320 / img.width; + const ratioHeight = 320 / img.height; + const x = item.axisx * ratioWidth * scale; + const y = item.axisy * ratioHeight * scale; + const path_width = item.width * ratioWidth * scale; + const path_height = item.height * ratioHeight * scale; + getStyle.value = `left: ${x}px;top: ${y}px;width: ${path_width}px;height: ${path_height}px;transform: rotate3D(1, 1, 0, 0deg)` + } +} + const router = useRouter(); function goBack() { router.back() @@ -121,23 +156,38 @@ function getStatus(status: number) { cursor: pointer; } .order-status { + margin: 0 auto; + width: 100vw; + height: 100vw; display: flex; - flex-direction: column; + justify-content: center; align-items: center; - margin-top: 32px; + flex-direction: column; } .avatar-wrapper { - width: 85vw; - height: 85vw; - border-radius: 50%; - margin-bottom: 24px; - background: #fff; - display: flex; - align-items: center; - justify-content: center; position: relative; + width: 320px; + height: 320px; + } + .avatar-back-img { + position: absolute; + width: 320px; + height: 320px; + top: 0; + left: 0; + z-index: 2; + } + .avatar-front-box { + width: 320px; + height: 320px; + position: absolute; + z-index: 1; + } + .avatar-font-img { + width: 100%; + height: auto; + border-radius: 10px; } - .progress-image-item-shadow { position: absolute; top: 0; diff --git a/src/views/badge/preview.vue b/src/views/badge/preview.vue index 11fc778..7682827 100644 --- a/src/views/badge/preview.vue +++ b/src/views/badge/preview.vue @@ -27,18 +27,16 @@
{{progressText}} {{progress}}%
总计大约需要90秒，请耐心等待...
-
- -
- -
+
+
+ +
+ +
+
+
{{shapeText}}
-
+
@@ -64,6 +62,23 @@
材料
+
+
+
{{item.name}}
+
+
+
+
+ + +
+
{{item.name}}
+
+
+
+ +
+