diff --git a/src/views/cartoon/index.vue b/src/views/cartoon/index.vue index dace3ff..0524dd9 100644 --- a/src/views/cartoon/index.vue +++ b/src/views/cartoon/index.vue @@ -159,6 +159,30 @@ upload-icon="plus" /> +
+
+ {{ toValueWithout("坐骑类型") }} +
+
+
+
+ + +
+
{{ toValueWithout(item.name) }}
+
+
+
@@ -246,16 +270,27 @@ const orderStat = ref({}) const prodId = ref(0) const prop = ref('') const typeId = ref(0) +const subjectId = ref(0) 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 + subjectId.value = res.subject_id if (res.type_id === 4) { getKindList() + } else { + // 非类型4的产品需要获取形状列表 + // 如果产品ID或类型ID发生变化,重置选中的形状 + if (oldProdId !== res.prod_id || oldTypeId !== res.type_id) { + mountsId.value = 0 + } + getmountsList() } - prop.value = res.prop - typeId.value = res.type_id }) } @@ -306,6 +341,42 @@ const kindChange = (id: number) => { kindId.value = id } +// 形状列表相关 +const mountsList = ref([]) +const mountsId = ref(0) + +// 获取图片URL +const getImageUrl = (path: string) => { + if (!path) return '' + return 'https://suwa3d-3dview.oss-cn-shanghai.aliyuncs.com/' + path +} + +// 获取形状列表 +const getmountsList = () => { + if (!prodId.value || !typeId.value) { + return + } + badgeApi.getShapeList({ + prod_id: prodId.value, + type_id: typeId.value + }).then((res: any) => { + if (res && res.list && res.list.length > 0) { + mountsList.value = res.list + // 默认选中第一个 + if (!mountsId.value) { + mountsId.value = res.list[0].id + } + } + }).catch((err: any) => { + console.error('getShapeList', err) + }) +} + +// 切换形状 +const rideChange = (item: any) => { + mountsId.value = item.id +} + const isLoading = ref(false) // 生成图片 @@ -472,7 +543,7 @@ const getPid = async () => { prod_id: prodId.value, extend_value: -1, type_id: typeId.value, - subject_id: getSupportSubject() + subject_id: subjectId.value } try { const res = await badgeApi.getPid(params) as any @@ -570,7 +641,8 @@ const createLog = () => { group: 1, prod_id: prodId.value, type_id: typeId.value, - kind_id: kindId.value + kind_id: kindId.value, + subject_id: subjectId.value } badgeApi.createLog(params).then(() => { closeToast() @@ -587,7 +659,9 @@ const createLog = () => { group: 1, prod_id: prodId.value, type_id: typeId.value, - kind_id: kindId.value + kind_id: kindId.value, + mounts_id: mountsId.value || undefined, + subject_id: subjectId.value }, }) }, 1000); @@ -916,5 +990,63 @@ onMounted(() => { .photo-upload-box-refer { margin: 16px; } +.mounts-list-container { + display: flex; + flex-wrap: wrap; + justify-content: flex-start; + margin-top: 12px; +} +.mounts-item { + position: relative; + flex: 0 0 calc(25% - 6px); + margin-right: 8px; + margin-bottom: 16px; + cursor: pointer; +} +.mounts-item:nth-child(4n) { + margin-right: 0; +} +.mounts-item-list { + position: relative; + width: 100%; + padding-bottom: 100%; + border-radius: 8px; + overflow: hidden; + background: #f5f5f5; +} +.mounts-item-image { + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + object-fit: cover; + border-radius: 8px; + transition: transform 0.2s; +} +.mounts-item-image-round { + border-radius: 50%; +} +.mounts-item:hover .mounts-item-image { + transform: scale(1.05); +} +.mounts-icon { + position: absolute; + right: 6px; + bottom: 6px; + z-index: 2; + background: rgba(255, 255, 255, 0.9); + border-radius: 50%; + padding: 2px; +} +.mounts-item-text { + font-size: 12px; + text-align: center; + margin-top: 8px; + color: v-bind('config.styles.colors.textSecondary'); + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; +} diff --git a/src/views/cartoon/previewOrder.vue b/src/views/cartoon/previewOrder.vue index e9ec086..d7f5365 100644 --- a/src/views/cartoon/previewOrder.vue +++ b/src/views/cartoon/previewOrder.vue @@ -439,6 +439,7 @@ const confirm = () => { type_id: typeId.value, up_text: topText.value ? topText.value : '', down_text: bottomText.value ? bottomText.value : '', + subject_id: subjectId.value, } if (orderStat.value.use_type == 2) { parms.province_id = province_id.value @@ -1035,11 +1036,13 @@ const shapeChange = (item: any) => { const orderStat = ref({}) const typeId = ref(0) +const subjectId = ref(0) const getOrderStat = () => { badgeApi.getOrderStat({}).then((res: any) => { console.log('getOrderStat', res) orderStat.value = res typeId.value = res.type_id + subjectId.value = res.subject_id badgeTypeId.value = res.type_id getSizeList() })