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
Split 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 @@ @@ -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

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

@ -1,3 +1,224 @@ @@ -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">
import { useRouter } from 'vue-router'
import H5Cropper from 'vue-cropper-h5'
@ -60,6 +281,12 @@ const sizeList = ref([]) @@ -60,6 +281,12 @@ const sizeList = ref([])
const getSizeList = () => {
badgeApi.getOrderPrice({}).then((res: any) => {
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) { @@ -140,8 +367,8 @@ function getbase64Data(data) {
img.onload = () => {
imageWidth.value = img.naturalWidth;
imageHeight.value = img.naturalHeight;
if (imageWidth.value < 500 || imageHeight.value < 500) {
showToast('请上传尺寸大于500*500像素的照片')
if (imageWidth.value < 300 || imageHeight.value < 300) {
showToast('请上传尺寸大于300*300像素的照片')
imgurl.value = null
picture.value = null
return false;
@ -181,8 +408,8 @@ function imgorigoinf(data) { @@ -181,8 +408,8 @@ function imgorigoinf(data) {
img.onload = () => {
imageWidth.value = img.naturalWidth;
imageHeight.value = img.naturalHeight;
if (imageWidth.value < 500 || imageHeight.value < 500) {
showToast('请上传尺寸大于500*500像素的照片')
if (imageWidth.value < 300 || imageHeight.value < 300) {
showToast('请上传尺寸大于300*300像素的照片')
setTimeout(() => {
const btn = document.querySelector('.btn')
if (btn) {
@ -455,227 +682,6 @@ onMounted(() => { @@ -455,227 +682,6 @@ onMounted(() => {
})
</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;
@ -688,15 +694,11 @@ onMounted(() => { @@ -688,15 +694,11 @@ onMounted(() => {
color: #000;
}
.size-options {
.size-item {
margin-top: 8px;
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;

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

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

Write Preview
Loading…
Cancel
Save