forked from natuka/web.puabadge.com
形状修改
This commit is contained in:
Linzm committed
1 parent
e330ba2ce8
commit
d857c775ca
3 files changed
+302
-278
No files matched your search
+233
-231
@@ -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([])
|
||||
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) {
|
||||
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) {
|
||||
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(() => {
|
||||
})
|
||||
</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(() => {
|
||||
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;
|
||||
|
||||
+67
-45
@@ -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 @@
|
||||
</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 @@
|
||||
<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() {
|
||||
}
|
||||
|
||||
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 = () => {
|
||||
showConfirmDialog({
|
||||
title: '确认下单',
|
||||
message:
|
||||
'请再次确认是否选择这个模型下单,一个链接只能下单一次。',
|
||||
'请再次确认是否选择这个模型下单，下单后预计需要10天完成生产发货。如对产品有疑问，可以联系客服咨询。',
|
||||
})
|
||||
.then(() => {
|
||||
const parms = {
|
||||
@@ -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)
|
||||
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) => {
|
||||
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(() => {
|
||||
// pid.value = 281505;
|
||||
// group.value = 1;
|
||||
// prodId.value = 7;
|
||||
getTypesList()
|
||||
// getTypesList()
|
||||
getImageList()
|
||||
progressList()
|
||||
getCompareImage()
|
||||
@@ -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(() => {
|
||||
.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;
|
||||
|
||||
Reference in new issue
Block a user