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 7 months ago
parent
e330ba2ce8
commit
d857c775ca
3 changed files with 302 additions and 278 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 4
      .env.development
  2. 464
      src/views/badge/index.vue
  3. 112
      src/views/badge/preview.vue

4
.env.development
Unescape View File

@ -1,7 +1,7 @@
VITE_APP_PREVIEW=true VITE_APP_PREVIEW=true
# VITE_APP_API_BASE_URL=http://172.16.0.47:8166/web/ # 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-test.api.puabadge.com/web/
# VITE_APP_API_BASE_URL=https://wechat.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/ # VITE_APP_API_WX_URL=https://wechat.api.puabadge.com/web/
# http://web.suwa3d.dev:28499/ # http://web.suwa3d.dev:28499/
VITE_HTTP_MOCK=true VITE_HTTP_MOCK=true

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

@ -1,3 +1,224 @@
<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>
<script setup lang="ts"> <script setup lang="ts">
import { useRouter } from 'vue-router' import { useRouter } from 'vue-router'
import H5Cropper from 'vue-cropper-h5' import H5Cropper from 'vue-cropper-h5'
@ -60,6 +281,12 @@ const sizeList = ref([])
const getSizeList = () => { const getSizeList = () => {
badgeApi.getOrderPrice({}).then((res: any) => { badgeApi.getOrderPrice({}).then((res: any) => {
sizeList.value = res sizeList.value = res
sizeList.value.forEach((item: any) => {
if (item.shape_item == null || item.shape_item == undefined || item.shape_item == '' || !item.shape_item) {
showToast('该链接异常，请联系客服')
return
}
})
}) })
} }
@ -140,8 +367,8 @@ function getbase64Data(data) {
img.onload = () => { img.onload = () => {
imageWidth.value = img.naturalWidth; imageWidth.value = img.naturalWidth;
imageHeight.value = img.naturalHeight; imageHeight.value = img.naturalHeight;
if (imageWidth.value < 500 || imageHeight.value < 500) { if (imageWidth.value < 300 || imageHeight.value < 300) {
showToast('请上传尺寸大于500*500像素的照片') showToast('请上传尺寸大于300*300像素的照片')
imgurl.value = null imgurl.value = null
picture.value = null picture.value = null
return false; return false;
@ -181,8 +408,8 @@ function imgorigoinf(data) {
img.onload = () => { img.onload = () => {
imageWidth.value = img.naturalWidth; imageWidth.value = img.naturalWidth;
imageHeight.value = img.naturalHeight; imageHeight.value = img.naturalHeight;
if (imageWidth.value < 500 || imageHeight.value < 500) { if (imageWidth.value < 300 || imageHeight.value < 300) {
showToast('请上传尺寸大于500*500像素的照片') showToast('请上传尺寸大于300*300像素的照片')
setTimeout(() => { setTimeout(() => {
const btn = document.querySelector('.btn') const btn = document.querySelector('.btn')
if (btn) { if (btn) {
@ -455,227 +682,6 @@ onMounted(() => {
}) })
</script> </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> <style scoped>
.photo-upload-page { .photo-upload-page {
height: auto; height: auto;
@ -688,15 +694,11 @@ onMounted(() => {
color: #000; color: #000;
} }
.size-options { .size-options {
.size-item {
margin-top: 8px;
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
margin-top: 8px;
.size-item:last-child {
margin-left: 5px;
}
.size-item {
flex: 1;
.size-text { .size-text {
font-size: 14px; font-size: 14px;
color: #333; color: #333;

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

@ -31,8 +31,8 @@
<div class="progress-section-img" style="width: 320px;height: 320px;"> <div class="progress-section-img" style="width: 320px;height: 320px;">
<img v-if="shapeImage" class="box1-back-image" :src="shapeImage" style="width: 320px;height: 320px;" alt=""> <img v-if="shapeImage" class="box1-back-image" :src="shapeImage" style="width: 320px;height: 320px;" alt="">
<div class="box1-front-box" :style="getStyle"> <div class="box1-front-box" :style="getStyle">
<img class="box1-front-image" :class="{ 'box1-round-image': shapeId == 1 && shapeImage == '' }" :src="imageUrl" alt=""> <img class="box1-front-image" :src="imageUrl" alt="">
<div class="box1-round-shadow" v-if="shapeId == 1 && shapeImage == ''" style="width: 320px;height: 320px;"></div> <!-- <div class="box1-round-shadow" v-if="shapeId == 1 && shapeImage == ''" style="width: 320px;height: 320px;"></div> -->
</div> </div>
<div class="shape-text" :style="shapeTextStyle" v-if="shapeText">{{shapeText}}</div> <div class="shape-text" :style="shapeTextStyle" v-if="shapeText">{{shapeText}}</div>
</div> </div>
@ -63,19 +63,21 @@
</div> </div>
</div> </div>
<div class="shape-body"> <div class="shape-body">
<div class="shape-type"> <!-- <div class="shape-type">
<div class="shape-type-item" :class="{ 'shape-active': item.id == typeId }" v-for="item in typesList" :key="item.id" @click="typeChange(item.id)">{{item.name}}</div> <div class="shape-type-item" :class="{ 'shape-active': item.id == typeId }" v-for="item in typesList" :key="item.id" @click="typeChange(item.id)">{{item.name}}</div>
</div> </div> -->
<div class="shape-box"> <div class="shape-box" v-if="imageUrl">
<div class="shape-item" v-for="item in shapeList" :key="item.id" @click="shapeChange(item)"> <block v-for="item in shapeList" :key="item.id">
<div class="shape-item-list"> <div class="shape-item" @click="shapeChange(item)">
<img class="shape-item-image" :src="item.cover_path || imageUrl"/> <div class="shape-item-list">
<van-icon v-if="item.id == shapeId" class="shape-icon" color="#15CF5F" name="checked" size="18px" /> <img class="shape-item-image" :src="item.cover_path || imageUrl"/>
<van-icon v-if="item.id == shapeId" class="shape-icon" color="#15CF5F" name="checked" size="18px" />
</div>
<div class="shape-item-text">{{item.name}}</div>
</div> </div>
<div class="shape-item-text">{{item.name}}</div> </block>
</div>
</div> </div>
<div class="shape-box-input" v-if="custom_switch == 1"> <div class="shape-box-input" v-if="imageUrl && custom_switch == 1">
<input class="shape-box-input-text" type="text" placeholder="请输入文字" v-model="shapeText" @change="changeShapeText" @input="changeShapeText" @onBlur="changeShapeText" /> <input class="shape-box-input-text" type="text" placeholder="请输入文字" v-model="shapeText" @change="changeShapeText" @input="changeShapeText" @onBlur="changeShapeText" />
</div> </div>
</div> </div>
@ -86,15 +88,17 @@
<div style="padding: 0 16px;"> <div style="padding: 0 16px;">
<van-divider /> <van-divider />
</div> </div>
<div class="order-section" v-if="trialCode == false"> <div class="order-section" v-if="trialCode == false && imageUrl">
<div class="order-title">订购数量</div> <div class="order-title">订购数量</div>
<div class="order-item" v-for="item in sizeList" :key="item.id"> <block v-for="item in sizeList" :key="item.id">
<span class="order-size">{{ item.size }}</span> <div class="order-item" v-show="item.shape_id == shapeId">
<span class="order-free">(剩余兑换：{{ item.remaining }})</span> <span class="order-size">{{ item.size }}</span>
<div class="order-ctrl"> <span class="order-free">(剩余兑换：{{ item.remaining }})</span>
<van-stepper v-model="item.count" :min="0" :max="item.remaining" @change="changeValue" /> <div class="order-ctrl">
<van-stepper v-model="item.count" :min="0" :max="item.remaining" @change="changeValue" />
</div>
</div> </div>
</div> </block>
</div> </div>
<div style="height: 110px;"></div> <div style="height: 110px;"></div>
<div class="confirm-box"> <div class="confirm-box">
@ -250,9 +254,22 @@ function goBack() {
} }
const sizeList = ref([]) const sizeList = ref([])
const shapeItem = ref({})
const getSizeList = () => { const getSizeList = () => {
badgeApi.getOrderPrice({}).then((res: any) => { badgeApi.getOrderPrice({}).then((res: any) => {
console.log('getSizeList', res);
sizeList.value = res sizeList.value = res
sizeList.value.forEach((item: any) => {
if (item.shape_item) {
shapeList.value.push(item.shape_item)
} else {
showToast('该链接异常，请联系客服')
return
}
})
if (shapeList.value.length > 0) {
shapeChange(shapeList.value[0])
}
}) })
} }
@ -276,7 +293,7 @@ const confirm = () => {
showConfirmDialog({ showConfirmDialog({
title: '确认下单', title: '确认下单',
message: message:
'请再次确认是否选择这个模型下单,一个链接只能下单一次。', '请再次确认是否选择这个模型下单，下单后预计需要10天完成生产发货。如对产品有疑问，可以联系客服咨询。',
}) })
.then(() => { .then(() => {
const parms = { const parms = {
@ -461,20 +478,20 @@ const getImageList = () => {
}) })
} }
const typeId = ref(1) // const typeId = ref(1)
const typesList = ref([]) // const typesList = ref([])
const getTypesList = () => { // const getTypesList = () => {
badgeApi.getTypesList({}).then((res: any) => { // badgeApi.getTypesList({}).then((res: any) => {
console.log('getTypesList', res) // console.log('getTypesList', res)
typesList.value = res.list // typesList.value = res.list
typeId.value = res.list[0].id // typeId.value = res.list[0].id
getShapeList() // getShapeList()
}).catch((err) => { // }).catch((err) => {
console.log('getTypesList', err) // console.log('getTypesList', err)
}).finally((err) => { // }).finally((err) => {
}) // })
} // }
const shapeId = ref(1) const shapeId = ref(1)
const shapeImage = ref('') const shapeImage = ref('')
@ -483,7 +500,6 @@ const custom_switch = ref(0)
const limitCount = ref(10) const limitCount = ref(10)
const getShapeList = () => { const getShapeList = () => {
badgeApi.getShapeList({ badgeApi.getShapeList({
type_id: typeId.value,
prod_id: prodId.value prod_id: prodId.value
}).then((res: any) => { }).then((res: any) => {
console.log('getShapeList', res) console.log('getShapeList', res)
@ -579,16 +595,21 @@ const calculateByteLength = (str: string) => {
return len; return len;
} }
const typeChange = (id: number) => { // const typeChange = (id: number) => {
console.log('typeChange', id) // console.log('typeChange', id)
typeId.value = id; // typeId.value = id;
shapeList.value = []; // shapeList.value = [];
shapeImage.value = ''; // shapeImage.value = '';
getStyle.value = ''; // getStyle.value = '';
getShapeList() // getShapeList()
} // }
const shapeChange = (item: any) => { const shapeChange = (item: any) => {
sizeList.value.map((item: any) => {
if (item.shape_id !== item.id) {
item.count = 0
}
})
shapeText.value = ''; shapeText.value = '';
shapeId.value = item.id shapeId.value = item.id
shapeImage.value = item.frame_path shapeImage.value = item.frame_path
@ -644,7 +665,7 @@ onMounted(() => {
// pid.value = 281505; // pid.value = 281505;
// group.value = 1; // group.value = 1;
// prodId.value = 7; // prodId.value = 7;
getTypesList() // getTypesList()
getImageList() getImageList()
progressList() progressList()
getCompareImage() getCompareImage()
@ -1130,7 +1151,7 @@ onUnmounted(() => {
display: flex; display: flex;
align-items: center; align-items: center;
flex-wrap: wrap; flex-wrap: wrap;
justify-content: space-between; justify-content: flex-start;
} }
.shape-title { .shape-title {
padding-bottom: 12px; padding-bottom: 12px;
@ -1140,8 +1161,9 @@ onUnmounted(() => {
.shape-item { .shape-item {
position: relative; position: relative;
flex: 0 0 24%; flex: 0 0 24%;
margin-right: calc(4% / 3); /* margin-right: calc(4% / 3); */
margin-bottom: calc(4% / 2); margin-bottom: calc(4% / 2);
margin-right: 8px!important;
} }
.shape-item:nth-child(4n){ .shape-item:nth-child(4n){
margin-right: 0; margin-right: 0;

Write Preview
Loading…
Cancel
Save