feat(mini): add fragment synthesis page and cabinet fragment UX

api/synthesis.js

@@ -0,0 +1,13 @@
+import { authRequest } from '../utils/request'
+
+export function getSynthesisRecipes(userId) {
+  return authRequest({ url: `/api/app/users/${userId}/synthesis/recipes`, method: 'GET' })
+}
+
+export function doSynthesis(userId, recipeId) {
+  return authRequest({ url: `/api/app/users/${userId}/synthesis/do`, method: 'POST', data: { recipe_id: recipeId } })
+}
+
+export function getSynthesisLogs(userId, page = 1, pageSize = 20) {
+  return authRequest({ url: `/api/app/users/${userId}/synthesis/logs`, method: 'GET', data: { page, page_size: pageSize } })
+}

pages-user/synthesis/index.vue

@@ -0,0 +1,274 @@
+<template>
+  <view class="synthesis-wrap">
+    <view class="page-title">碎片合成</view>
+
+    <view v-if="loading" class="status-text">加载中...</view>
+    <view v-else-if="recipes.length === 0" class="status-text">暂无可用的合成配方</view>
+
+    <view v-for="recipe in recipes" :key="recipe.id" class="recipe-card">
+      <!-- 目标商品 -->
+      <view class="target-section">
+        <image v-if="recipe.target_product" :src="getFirstImage(recipe.target_product.images_json)" mode="aspectFill" class="target-image" />
+        <view class="target-info">
+          <text class="target-name">{{ recipe.target_product?.name || '目标商品' }}</text>
+          <text class="recipe-name">{{ recipe.name }}</text>
+          <text class="recipe-desc" v-if="recipe.description">{{ recipe.description }}</text>
+        </view>
+      </view>
+
+      <!-- 材料列表 -->
+      <view class="materials-section">
+        <text class="section-label">所需材料</text>
+        <view class="materials-grid">
+          <view v-for="(mat, idx) in recipe.materials" :key="idx" class="material-item">
+            <image :src="mat.image || '/static/placeholder.png'" mode="aspectFill" class="material-image" />
+            <text class="material-name">{{ mat.name }}</text>
+            <view class="material-count" :class="{ enough: mat.owned_count >= mat.required_count }">
+              <text>{{ mat.owned_count }}</text>
+              <text class="count-sep">/</text>
+              <text>{{ mat.required_count }}</text>
+            </view>
+          </view>
+        </view>
+      </view>
+
+      <!-- 合成按钮 -->
+      <button
+        class="synthesis-btn"
+        :class="{ disabled: !recipe.can_synthesize }"
+        :disabled="!recipe.can_synthesize || synthesizing"
+        @tap="onSynthesize(recipe)"
+      >
+        {{ recipe.can_synthesize ? '立即合成' : '材料不足' }}
+      </button>
+    </view>
+  </view>
+</template>
+
+<script setup>
+import { ref, onMounted } from 'vue'
+import { getSynthesisRecipes, doSynthesis } from '../../api/synthesis.js'
+
+const loading = ref(true)
+const synthesizing = ref(false)
+const recipes = ref([])
+
+function getFirstImage(imagesJson) {
+  if (!imagesJson) return '/static/placeholder.png'
+  try {
+    const imgs = JSON.parse(imagesJson)
+    return imgs && imgs.length > 0 ? imgs[0] : '/static/placeholder.png'
+  } catch {
+    return imagesJson
+  }
+}
+
+async function loadRecipes() {
+  loading.value = true
+  const userId = uni.getStorageSync('user_id')
+  if (!userId) {
+    loading.value = false
+    return
+  }
+  try {
+    const res = await getSynthesisRecipes(userId)
+    recipes.value = res?.list || []
+  } catch (e) {
+    console.error('loadRecipes error', e)
+  } finally {
+    loading.value = false
+  }
+}
+
+async function onSynthesize(recipe) {
+  if (synthesizing.value || !recipe.can_synthesize) return
+  try {
+    await new Promise((resolve, reject) => {
+      uni.showModal({
+        title: '确认合成',
+        content: `确定要合成「${recipe.target_product?.name || '目标商品'}」吗？合成后碎片将被消耗。`,
+        success: (res) => res.confirm ? resolve() : reject('cancel'),
+        fail: reject
+      })
+    })
+  } catch {
+    return
+  }
+
+  synthesizing.value = true
+  const userId = uni.getStorageSync('user_id')
+  try {
+    await doSynthesis(userId, recipe.id)
+    uni.showToast({ title: '合成成功！', icon: 'success' })
+    await loadRecipes()
+  } catch (e) {
+    uni.showToast({ title: e?.message || '合成失败', icon: 'none' })
+  } finally {
+    synthesizing.value = false
+  }
+}
+
+onMounted(() => {
+  loadRecipes()
+})
+
+// 支持从其他页面返回时刷新
+const onShow = () => {
+  if (!loading.value) loadRecipes()
+}
+defineExpose({ onShow })
+</script>
+
+<style lang="scss" scoped>
+.synthesis-wrap {
+  min-height: 100vh;
+  padding: 24rpx;
+  background: linear-gradient(180deg, #1a1a2e 0%, #16213e 100%);
+}
+
+.page-title {
+  font-size: 36rpx;
+  font-weight: bold;
+  color: #fff;
+  text-align: center;
+  padding: 20rpx 0 30rpx;
+}
+
+.status-text {
+  text-align: center;
+  color: rgba(255, 255, 255, 0.5);
+  padding: 100rpx 0;
+  font-size: 28rpx;
+}
+
+.recipe-card {
+  background: rgba(255, 255, 255, 0.08);
+  border-radius: 24rpx;
+  padding: 30rpx;
+  margin-bottom: 24rpx;
+  backdrop-filter: blur(10px);
+  border: 1px solid rgba(255, 255, 255, 0.1);
+}
+
+.target-section {
+  display: flex;
+  align-items: center;
+  gap: 20rpx;
+  margin-bottom: 24rpx;
+}
+
+.target-image {
+  width: 140rpx;
+  height: 140rpx;
+  border-radius: 16rpx;
+  background: rgba(255, 255, 255, 0.1);
+}
+
+.target-info {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  gap: 6rpx;
+}
+
+.target-name {
+  font-size: 32rpx;
+  font-weight: bold;
+  color: #fff;
+}
+
+.recipe-name {
+  font-size: 24rpx;
+  color: rgba(255, 255, 255, 0.7);
+}
+
+.recipe-desc {
+  font-size: 22rpx;
+  color: rgba(255, 255, 255, 0.5);
+}
+
+.materials-section {
+  margin-bottom: 24rpx;
+}
+
+.section-label {
+  font-size: 24rpx;
+  color: rgba(255, 255, 255, 0.6);
+  margin-bottom: 16rpx;
+  display: block;
+}
+
+.materials-grid {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 16rpx;
+}
+
+.material-item {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  width: 160rpx;
+  padding: 16rpx;
+  background: rgba(255, 255, 255, 0.05);
+  border-radius: 16rpx;
+  border: 1px solid rgba(255, 255, 255, 0.08);
+}
+
+.material-image {
+  width: 100rpx;
+  height: 100rpx;
+  border-radius: 12rpx;
+  margin-bottom: 8rpx;
+  background: rgba(255, 255, 255, 0.1);
+}
+
+.material-name {
+  font-size: 22rpx;
+  color: rgba(255, 255, 255, 0.8);
+  text-align: center;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  width: 100%;
+}
+
+.material-count {
+  font-size: 24rpx;
+  color: #ff5252;
+  font-weight: bold;
+  margin-top: 4rpx;
+
+  &.enough {
+    color: #4caf50;
+  }
+
+  .count-sep {
+    margin: 0 2rpx;
+    color: rgba(255, 255, 255, 0.4);
+  }
+}
+
+.synthesis-btn {
+  width: 100%;
+  height: 80rpx;
+  border-radius: 40rpx;
+  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+  color: #fff;
+  font-size: 30rpx;
+  font-weight: bold;
+  border: none;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+  &.disabled {
+    background: rgba(255, 255, 255, 0.15);
+    color: rgba(255, 255, 255, 0.4);
+  }
+
+  &:active:not(.disabled) {
+    opacity: 0.85;
+  }
+}
+</style>

pages.json

@@ -164,6 +164,12 @@
 							"navigationStyle": "default"
 						}
 					}
+				},
+				{
+					"path": "synthesis/index",
+					"style": {
+						"navigationBarTitleText": "碎片合成"
+					}
 				}
 			]
 		},

pages/cabinet/index.vue

@@ -21,6 +21,9 @@
         <text class="tab-text">已申请发货</text>
         <text class="tab-count" v-if="shippedList.length > 0">({{ shippedList.length }})</text>
       </view>
+      <view class="tab-item" @tap="goSynthesis">
+        <text class="tab-text">碎片合成</text>
+      </view>
     </view>
     
     <!-- Tab 0: 待处理商品 -->
@@ -38,15 +41,18 @@
       
       <view v-else class="inventory-grid">
         <view v-for="(item, index) in aggregatedList" :key="index" class="inventory-item">
-          <view class="checkbox-area" @tap.stop="toggleSelect(item)">
+          <view class="checkbox-area" @tap.stop="toggleSelect(item)" v-if="!item.is_fragment">
              <view class="checkbox" :class="{ checked: item.selected }"></view>
           </view>
+          <view class="checkbox-area fragment-placeholder" v-else></view>
           <image :src="item.image" mode="aspectFill" class="item-image" @error="onImageError(index, 'aggregated')" />
           <view class="item-info">
             <text class="item-name">{{ item.name || '未命名道具' }}</text>
+            <text class="item-tag-fragment" v-if="item.is_fragment">碎片</text>
             <text class="item-price" v-if="item.price">单价: ¥{{ item.price }}</text>
             <view class="item-actions">
-               <text class="invite-btn" v-if="!item.selected" @tap.stop="onInvite(item)">邀请填写</text>
+               <text class="invite-btn" v-if="!item.selected && !item.is_fragment" @tap.stop="onInvite(item)">邀请填写</text>
+               <text class="synthesis-link" v-if="!item.selected && item.is_fragment" @tap.stop="goSynthesis">去合成</text>
                <text class="item-count" v-if="!item.selected">x{{ item.count || 1 }}</text>
                <view class="stepper" v-else @tap.stop>
                   <text class="step-btn minus" @tap.stop="changeCount(item, -1)">-</text>
@@ -500,7 +506,8 @@ async function loadInventory(uid) {
         selected: false,
         selectedCount: item.count || 0,
         has_shipment: item.has_shipment,
-        updated_at: item.updated_at
+        updated_at: item.updated_at,
+        is_fragment: item.is_fragment || false
       }
       nextList.push(mappedItem)
     })
@@ -574,6 +581,10 @@ function changeCount(item, delta) {
   }
 }
 
+function goSynthesis() {
+  uni.navigateTo({ url: '/pages-user/synthesis/index' })
+}
+
 async function onRedeem() {
   vibrateShort()
   const user_id = uni.getStorageSync('user_id')
@@ -1437,4 +1448,25 @@ function onCopyShareLink() {
     }
   }
 }
+
+.item-tag-fragment {
+  display: inline-block;
+  font-size: 20rpx;
+  padding: 2rpx 10rpx;
+  border-radius: 6rpx;
+  background: linear-gradient(135deg, #ff9800, #ff5722);
+  color: #fff;
+  margin-left: 8rpx;
+  vertical-align: middle;
+}
+
+.synthesis-link {
+  font-size: 24rpx;
+  color: #667eea;
+  font-weight: bold;
+}
+
+.fragment-placeholder {
+  width: 40rpx;
+}
 </style>