feat(mini): add fragment synthesis page and cabinet fragment UX
This commit is contained in:
parent
3e20dd845a
commit
bdd329eb15
13
api/synthesis.js
Normal file
13
api/synthesis.js
Normal file
@ -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 } })
|
||||
}
|
||||
274
pages-user/synthesis/index.vue
Normal file
274
pages-user/synthesis/index.vue
Normal file
@ -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>
|
||||
@ -164,6 +164,12 @@
|
||||
"navigationStyle": "default"
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "synthesis/index",
|
||||
"style": {
|
||||
"navigationBarTitleText": "碎片合成"
|
||||
}
|
||||
}
|
||||
]
|
||||
},
|
||||
|
||||
@ -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>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user