forked from natuka/web.puabadge.com
代码提交
This commit is contained in:
1 parent
fbb14eafe4
commit
9f472390d9
6 files changed
+64
-147
No files matched your search
@@ -159,3 +159,11 @@ export const getMultiUrl = (params: any) => {
|
||||
params,
|
||||
})
|
||||
}
|
||||
|
||||
// 获取坐骑列表
|
||||
export const getMountsList = (params: any) => {
|
||||
return request('products/mountsList', {
|
||||
method: 'GET',
|
||||
params,
|
||||
})
|
||||
}
|
||||
@@ -175,7 +175,7 @@ export const cartoonConfig = {
|
||||
},
|
||||
|
||||
// 图片缩放比例
|
||||
imageScale: 0.6,
|
||||
imageScale: 1,
|
||||
|
||||
// 默认值配置
|
||||
defaults: {
|
||||
|
||||
+29
-34
@@ -14,8 +14,16 @@
|
||||
<div class="order-type-item-title">
|
||||
{{ toValueWithout("产品类型") }}
|
||||
</div>
|
||||
<div class="order-type-item-title" v-if="productTypeConfig">
|
||||
{{ toValueWithout(productTypeConfig.name) }}
|
||||
<div class="order-type-item-title" v-if="typeName">
|
||||
{{ toValueWithout(typeName) }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="order-type-item" v-if="prodId">
|
||||
<div class="order-type-item-title">
|
||||
{{ toValueWithout("主体类型") }}
|
||||
</div>
|
||||
<div class="order-type-item-title" v-if="subjectName">
|
||||
{{ toValueWithout(subjectName) }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -322,39 +330,30 @@ const prodId = ref(0)
|
||||
const prop = ref('')
|
||||
const typeId = ref(0)
|
||||
const subjectId = ref(0)
|
||||
|
||||
const typeName = ref('')
|
||||
const subjectName = ref('')
|
||||
const getOrderStat = () => {
|
||||
badgeApi.getOrderStat({}).then((res: any) => {
|
||||
orderStat.value = res
|
||||
const oldProdId = prodId.value
|
||||
const oldTypeId = typeId.value
|
||||
prodId.value = res.prod_id
|
||||
prop.value = res.prop
|
||||
typeId.value = res.type_id
|
||||
typeName.value = res.type_name
|
||||
subjectId.value = res.subject_id
|
||||
subjectName.value = res.subject_name
|
||||
if (res.type_id === 4) {
|
||||
getKindList()
|
||||
} else {
|
||||
// 非类型4的产品需要获取形状列表
|
||||
// 如果产品ID或类型ID发生变化,重置选中的形状
|
||||
if (oldProdId !== res.prod_id || oldTypeId !== res.type_id) {
|
||||
mountsId.value = 0
|
||||
}
|
||||
} else if (res.type_id === 8) {
|
||||
mountsId.value = 0
|
||||
getmountsList()
|
||||
} else if (res.type_id === 9) {
|
||||
method.value = 1
|
||||
scenePropsInputs.value = ['']
|
||||
scene_prop.value = ''
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
// 计算属性:当前产品类型配置
|
||||
const productTypeConfig = computed(() => {
|
||||
return config.productTypes[typeId.value]
|
||||
})
|
||||
|
||||
// 计算属性:是否是宠物主体
|
||||
const isPetSubject = computed(() => {
|
||||
return config.subjectTypes.pet.prodIds.includes(prodId.value)
|
||||
})
|
||||
|
||||
// 计算属性:是否显示照片示例
|
||||
const shouldShowPhotoExample = computed(() => {
|
||||
return config.productLimits.photoExampleTypes.includes(prop.value)
|
||||
@@ -373,19 +372,14 @@ const shouldShowMultiView = computed(() => {
|
||||
const kindList = ref([])
|
||||
const getKindList = () => {
|
||||
badgeApi.getKindList({
|
||||
support_subject: getSupportSubject(),
|
||||
type_id: 4
|
||||
prod_id: prodId.value
|
||||
}).then((res: any) => {
|
||||
kindList.value = res.list
|
||||
kindId.value = res.list && res.list[0]?.id
|
||||
})
|
||||
}
|
||||
|
||||
const getSupportSubject = (): number => {
|
||||
return isPetSubject.value
|
||||
? config.subjectTypes.pet.supportSubject
|
||||
: config.subjectTypes.person.supportSubject
|
||||
}
|
||||
|
||||
|
||||
const kindId = ref(0)
|
||||
const kindChange = (id: number) => {
|
||||
@@ -407,7 +401,7 @@ const getmountsList = () => {
|
||||
if (!prodId.value || !typeId.value) {
|
||||
return
|
||||
}
|
||||
badgeApi.getShapeList({
|
||||
badgeApi.getMountsList({
|
||||
prod_id: prodId.value,
|
||||
type_id: typeId.value
|
||||
}).then((res: any) => {
|
||||
@@ -639,7 +633,6 @@ const getPid = async () => {
|
||||
})
|
||||
const params = {
|
||||
prod_id: prodId.value,
|
||||
extend_value: -1,
|
||||
type_id: typeId.value,
|
||||
subject_id: subjectId.value
|
||||
}
|
||||
@@ -740,7 +733,10 @@ const createLog = () => {
|
||||
prod_id: prodId.value,
|
||||
type_id: typeId.value,
|
||||
kind_id: kindId.value,
|
||||
subject_id: subjectId.value
|
||||
subject_id: subjectId.value,
|
||||
scene_prop: typeId.value === 9 && method.value === 2 && scene_prop.value ? scene_prop.value : undefined,
|
||||
mounts_id: mountsId.value || undefined,
|
||||
method: method.value
|
||||
}
|
||||
badgeApi.createLog(params).then(() => {
|
||||
closeToast()
|
||||
@@ -758,9 +754,7 @@ const createLog = () => {
|
||||
prod_id: prodId.value,
|
||||
type_id: typeId.value,
|
||||
kind_id: kindId.value,
|
||||
mounts_id: mountsId.value || undefined,
|
||||
subject_id: subjectId.value,
|
||||
scene_prop: typeId.value === 9 && method.value === 2 && scene_prop.value ? scene_prop.value : undefined
|
||||
subject_id: subjectId.value
|
||||
},
|
||||
})
|
||||
}, 1000);
|
||||
@@ -1074,6 +1068,7 @@ onMounted(() => {
|
||||
}
|
||||
.kind-box-item {
|
||||
margin-right: 10px;
|
||||
margin-bottom: 10px;
|
||||
padding: 6px 10px;
|
||||
background: #f5f5f5;
|
||||
border-radius: 8px;
|
||||
|
||||
@@ -40,7 +40,7 @@ function getOrder() {
|
||||
page: page.value,
|
||||
size: config.myOrder.pagination.pageSize,
|
||||
status: config.myOrder.pagination.defaultStatus,
|
||||
}).then(res => {
|
||||
}).then((res: any) => {
|
||||
if(page.value === config.myOrder.pagination.initialPage) {
|
||||
orders.value = res.list
|
||||
} else {
|
||||
|
||||
@@ -44,8 +44,8 @@
|
||||
<div class="product-details">
|
||||
<div class="product-row">
|
||||
<span class="product-label">{{ toValueWithout(config.orderDetail.messages.productName) }}</span>
|
||||
<span class="product-value" v-if="order.type_id && config.preview.productNames[order.type_id]">
|
||||
{{ toValueWithout(config.preview.productNames[order.type_id][order.prod_id] || '') }}
|
||||
<span class="product-value">
|
||||
{{ toValueWithout(order.prod_name) }}
|
||||
</span>
|
||||
</div>
|
||||
<div class="product-row">
|
||||
@@ -70,11 +70,11 @@
|
||||
<div class="product-details">
|
||||
<div class="product-row">
|
||||
<span class="product-label">{{ toValueWithout(config.orderDetail.messages.orderId) }}</span>
|
||||
<span class="product-value">{{order.sw_oid}}</span>
|
||||
<span class="product-value">{{order.id}}</span>
|
||||
</div>
|
||||
<div class="product-row">
|
||||
<span class="product-label">{{ toValueWithout(config.orderDetail.messages.orderTime) }}</span>
|
||||
<span class="product-value">{{order.pay_at}}</span>
|
||||
<span class="product-value">{{order.created_at}}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -109,35 +109,19 @@ const imageList = ref([])
|
||||
function getOrderDetail() {
|
||||
badgeApi.getOrderDetail({
|
||||
id: id.value,
|
||||
}).then(res => {
|
||||
}).then((res: any) => {
|
||||
order.value = res;
|
||||
imageUrl.value = res.path;
|
||||
backImageUrl.value = res.back_path;
|
||||
shapeImage.value = res.shape_details?.frame_path || '';
|
||||
shape_name.value = res.shape_details?.name || '';
|
||||
imageUrl.value = res?.path;
|
||||
backImageUrl.value = res?.back_path;
|
||||
shapeImage.value = res?.shape_details?.frame_path || '';
|
||||
shape_name.value = res?.shape_details?.name || '';
|
||||
imageList.value = [
|
||||
res.path,
|
||||
res.back_path,
|
||||
res?.path,
|
||||
res?.back_path,
|
||||
];
|
||||
})
|
||||
}
|
||||
|
||||
const ImageShow = (item: any) => {
|
||||
const scale = config.orderDetail.imageScale
|
||||
const img = new Image()
|
||||
img.src = item.frame_path
|
||||
img.onload = () => {
|
||||
console.log('img', img)
|
||||
const ratioWidth = config.orderDetail.imageSize.width / img.width;
|
||||
const ratioHeight = config.orderDetail.imageSize.height / 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)`
|
||||
}
|
||||
}
|
||||
|
||||
function goBack() {
|
||||
router.back()
|
||||
}
|
||||
|
||||
@@ -61,8 +61,8 @@
|
||||
</div>
|
||||
<div class="info-section">
|
||||
<div class="info-item">
|
||||
<div class="info-title" v-if="productName">{{ toValueWithout(productName) }}</div>
|
||||
<div class="info-content">{{ toValueWithout(config.preview.messages.productType) }}</div>
|
||||
<div class="info-title">{{ toValueWithout('产品类型') }}</div>
|
||||
<div class="info-content" v-if="typeName">{{ toValueWithout(typeName) }}</div>
|
||||
</div>
|
||||
<div class="info-item">
|
||||
<div class="info-title">{{ toValueWithout("3D全彩打印") }}</div>
|
||||
@@ -101,6 +101,10 @@
|
||||
<input class="shape-box-input-text" v-if="axisz == 1" type="text" :placeholder="toValueWithout('请输入正面文字')" v-model="frontText" @change="changeFrontText" @input="changeFrontText" @onBlur="changeFrontText" />
|
||||
<input class="shape-box-input-text" v-if="axisz == -1" type="text" :placeholder="toValueWithout('请输入背面文字')" v-model="backText" @change="changeBackText" @input="changeBackText" @onBlur="changeBackText" />
|
||||
</div>
|
||||
</div>
|
||||
<!-- 后视图 -->
|
||||
<div>
|
||||
|
||||
</div>
|
||||
<div style="padding: 0 16px;">
|
||||
<van-divider />
|
||||
@@ -139,7 +143,6 @@
|
||||
<div style="height: 130px;"></div>
|
||||
<div class="confirm-box">
|
||||
<div class="action-section">
|
||||
<!-- <button @click="sureReload" :disabled="flag < 1" class="action-btn"><img class="action-img" :src="reloadImage" alt=""> {{ toValueWithout(config.preview.messages.regenerate) }}</button> -->
|
||||
<button @click="compare" :disabled="flag < 1" class="action-btn"><img class="action-img" :src="compareImage" alt=""> {{ toValueWithout(config.preview.messages.compare) }}</button>
|
||||
<button @click="save" :disabled="flag < 1" class="action-btn"><img class="action-img" :src="downloadImage" alt=""> {{ toValueWithout(config.preview.messages.saveImage) }}</button>
|
||||
</div>
|
||||
@@ -153,13 +156,13 @@
|
||||
<div style="padding: 16px;">
|
||||
<div style="display: flex; align-items: center; justify-content: center; gap: 20px;">
|
||||
<div style="text-align: center;">
|
||||
<img :src="compareList.origin_path" :alt="toValueWithout(config.preview.messages.originalImage)" :style="`max-width: ${config.preview.imageSize.compareImageSize}px; max-height: ${config.preview.imageSize.compareImageSize}px; border-radius: 8px;`">
|
||||
<img :src="compareList.origin_path" :alt="toValueWithout(config.preview.messages.originalImage)" :style="`max-width: ${config.preview.imageSize.compareImageSize}px; max-height: ${config.preview.imageSize.compareImageSize}px; border-radius: 8px;object-fit: contain;`">
|
||||
</div>
|
||||
<div style="font-size: 24px; color: #333;">
|
||||
<van-icon name="arrow" size="20px" />
|
||||
</div>
|
||||
<div style="text-align: center;">
|
||||
<img :src="imageUrl" :alt="toValueWithout(config.preview.messages.previewImage)" :style="`width: ${config.preview.imageSize.compareImageSize}px; height: ${config.preview.imageSize.compareImageSize}px; border-radius: 8px;`">
|
||||
<img :src="imageUrl" :alt="toValueWithout(config.preview.messages.previewImage)" :style="`width: ${config.preview.imageSize.compareImageSize}px; height: ${config.preview.imageSize.compareImageSize}px; border-radius: 8px;object-fit: contain;`">
|
||||
</div>
|
||||
</div>
|
||||
<div style="text-align: center; margin-top: 16px; color: #999; font-size: 12px;">
|
||||
@@ -176,7 +179,7 @@
|
||||
</div>
|
||||
</template>
|
||||
<script setup lang="ts">
|
||||
import { onMounted, ref, onUnmounted, nextTick, computed } from 'vue';
|
||||
import { onMounted, ref, onUnmounted, nextTick } from 'vue';
|
||||
import { useRouter, useRoute } from 'vue-router';
|
||||
import { showSuccessToast, showToast, showConfirmDialog } from 'vant';
|
||||
import { localStorage } from '@/utils/local-storage'
|
||||
@@ -187,11 +190,9 @@ import { createTextPosition } from '@/utils/textHelper'
|
||||
import { cartoonConfig as config } from '@/config/cartoon'
|
||||
|
||||
// 导入图片资源
|
||||
import reloadImageSrc from '@/assets/badge/reload.png'
|
||||
import compareImageSrc from '@/assets/badge/duibi.png'
|
||||
import downloadImageSrc from '@/assets/badge/down.png'
|
||||
|
||||
const reloadImage = reloadImageSrc
|
||||
const compareImage = compareImageSrc
|
||||
const downloadImage = downloadImageSrc
|
||||
|
||||
@@ -229,59 +230,10 @@ const textHelper = createTextPosition({
|
||||
}
|
||||
})
|
||||
|
||||
// 计算产品名称
|
||||
const productName = computed(() => {
|
||||
if (!typeId.value || !prodId.value) return ''
|
||||
const typeConfig = config.preview.productNames[typeId.value]
|
||||
if (typeConfig && typeConfig[prodId.value]) {
|
||||
return typeConfig[prodId.value]
|
||||
}
|
||||
return ''
|
||||
})
|
||||
|
||||
function compare() {
|
||||
showCompare.value = true
|
||||
}
|
||||
|
||||
function sureReload() {
|
||||
console.log('orderStat', orderStat.value)
|
||||
if (orderStat.value.remain_count <= 0) {
|
||||
showToast(toValueWithout(config.preview.messages.noRemainingCount))
|
||||
return
|
||||
}
|
||||
isPreview.value = false
|
||||
showConfirmDialog({
|
||||
title: toValueWithout(config.preview.messages.regenerate),
|
||||
message: toValueWithout(config.preview.messages.confirmRegenerate),
|
||||
})
|
||||
.then(() => {
|
||||
group.value = newGroup.value
|
||||
const params = {
|
||||
pid: pid.value,
|
||||
group: config.preview.defaults.group,
|
||||
prod_id: prodId.value,
|
||||
type_id: typeId.value,
|
||||
kind_id: kindId.value
|
||||
}
|
||||
badgeApi.putModeling(params).then((res: any) => {
|
||||
console.log('putModeling', res)
|
||||
imageUrl.value = '';
|
||||
imageList.value = []
|
||||
imgKey.value = '';
|
||||
createLog()
|
||||
}).catch((err) => {
|
||||
console.log('putModeling', err)
|
||||
showToast({
|
||||
message: err.message,
|
||||
duration: 2000,
|
||||
})
|
||||
})
|
||||
})
|
||||
.catch(() => {
|
||||
// on cancel
|
||||
});
|
||||
}
|
||||
|
||||
const imgKey = ref(config.preview.defaults.imgKey)
|
||||
const frameUrl = ref('')
|
||||
const changeImage = (item: any) => {
|
||||
@@ -292,31 +244,6 @@ const changeImage = (item: any) => {
|
||||
imageWater.value = item.image_url
|
||||
}
|
||||
|
||||
const createLog = () => {
|
||||
badgeApi.createLog({
|
||||
pid: pid.value,
|
||||
group: config.preview.defaults.group,
|
||||
prod_id: prodId.value,
|
||||
type_id: typeId.value,
|
||||
kind_id: kindId.value
|
||||
}).then((res: any) => {
|
||||
console.log('createLog', res)
|
||||
progressTimer.value = null
|
||||
getImageList()
|
||||
progressList()
|
||||
getCompareImage()
|
||||
timer.value = setInterval(() => {
|
||||
getImageList()
|
||||
}, config.preview.polling.interval)
|
||||
}).catch((err) => {
|
||||
console.log('createLog', err)
|
||||
showToast({
|
||||
message: err.message,
|
||||
duration: 2000,
|
||||
})
|
||||
})
|
||||
}
|
||||
|
||||
const showPreview = ref(false)
|
||||
function save() {
|
||||
showPreview.value = true;
|
||||
@@ -426,7 +353,7 @@ const confirm = () => {
|
||||
message: toValueWithout(config.preview.messages.confirmOrder),
|
||||
})
|
||||
.then(() => {
|
||||
const parms = {
|
||||
const parms: any = {
|
||||
pid: pid.value,
|
||||
key: imgKey.value,
|
||||
pay_amount: payAmount.value,
|
||||
@@ -633,7 +560,8 @@ const limitCount = ref(0)
|
||||
const getShapeList = () => {
|
||||
badgeApi.getShapeList({
|
||||
prod_id: prodId.value,
|
||||
type_id: typeId.value
|
||||
type_id: typeId.value,
|
||||
subject_id: subjectId.value
|
||||
}).then((res: any) => {
|
||||
console.log('getShapeList', res)
|
||||
shapeList.value = res.list
|
||||
@@ -1037,12 +965,14 @@ const shapeChange = (item: any) => {
|
||||
const orderStat = ref({})
|
||||
const typeId = ref(0)
|
||||
const subjectId = ref(0)
|
||||
const typeName = ref('')
|
||||
const getOrderStat = () => {
|
||||
badgeApi.getOrderStat({}).then((res: any) => {
|
||||
console.log('getOrderStat', res)
|
||||
orderStat.value = res
|
||||
typeId.value = res.type_id
|
||||
subjectId.value = res.subject_id
|
||||
typeName.value = res.type_name
|
||||
badgeTypeId.value = res.type_id
|
||||
getSizeList()
|
||||
})
|
||||
|
||||
Reference in new issue
Block a user