代码提交

src/views/cartoon/index.vue

@@ -159,6 +159,30 @@
           upload-icon="plus" />
       </div>
     </div>
+      <div v-if="typeId == 8 && mountsList.length > 0">
+        <div :style="`font-size: 16px; color: ${config.styles.colors.textPrimary}; font-weight: bold; margin-top: ${config.styles.spacing.sectionMargin};padding: 0 ${config.styles.spacing.pagePadding};`">
+          {{ toValueWithout("坐骑类型") }}
+        </div>
+        <div class="mounts-list-container" :style="`padding: 0 ${config.styles.spacing.pagePadding};`">
+          <div v-for="item in mountsList" :key="item.id" class="mounts-item" @click="rideChange(item)">
+            <div class="mounts-item-list">
+              <img 
+                class="mounts-item-image" 
+                :src="getImageUrl(item.cover_path)" 
+                :alt="toValueWithout(item.name)"
+              />
+              <van-icon 
+                v-if="item.id == mountsId" 
+                class="mounts-icon" 
+                :color="config.styles.colors.success" 
+                name="checked" 
+                size="18px" 
+              />
+            </div>
+            <div class="mounts-item-text">{{ toValueWithout(item.name) }}</div>
+          </div>
+        </div>
+      </div>
     <div :style="`height: 120px;`"></div>
     <div class="design-action-bar">
       <div class="design-left">
@@ -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
-    if (res.type_id === 4) {
-      getKindList()
-    }
     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()
+    }
   })
 }
 
@@ -306,6 +341,42 @@ const kindChange = (id: number) => {
   kindId.value = id
 }
 
+// 形状列表相关
+const mountsList = ref<any[]>([])
+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;
+}
 </style>
 

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()
   })