282 lines
7.2 KiB
Vue
282 lines
7.2 KiB
Vue
<template>
|
|
<view class="spec-panel-mask" @click.self="$emit('close')">
|
|
<view class="spec-panel">
|
|
<view class="spec-panel__header">
|
|
<text class="spec-panel__title">详细参数</text>
|
|
<text class="spec-panel__close" @click="$emit('close')">✕</text>
|
|
</view>
|
|
|
|
<!-- 加载中 -->
|
|
<view v-if="loadingConfig" class="spec-panel__loading">加载中...</view>
|
|
|
|
<template v-else-if="config">
|
|
<!-- 成色选择 -->
|
|
<view class="spec-group" v-if="config.fineness.length">
|
|
<text class="spec-group__label">成色</text>
|
|
<view class="spec-group__options">
|
|
<view
|
|
v-for="item in config.fineness"
|
|
:key="item"
|
|
class="spec-option"
|
|
:class="{ 'spec-option--active': selected.fineness === item }"
|
|
@click="selected.fineness = item"
|
|
>
|
|
{{ item }}
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 主石选择 -->
|
|
<view class="spec-group" v-if="config.mainStone.length">
|
|
<text class="spec-group__label">主石</text>
|
|
<view class="spec-group__options">
|
|
<view
|
|
v-for="item in config.mainStone"
|
|
:key="item"
|
|
class="spec-option"
|
|
:class="{ 'spec-option--active': selected.mainStone === item }"
|
|
@click="selected.mainStone = item"
|
|
>
|
|
{{ item }}
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 手寸选择 -->
|
|
<view class="spec-group" v-if="config.ringSize.length">
|
|
<text class="spec-group__label">手寸</text>
|
|
<view class="spec-group__options">
|
|
<view
|
|
v-for="item in config.ringSize"
|
|
:key="item"
|
|
class="spec-option"
|
|
:class="{ 'spec-option--active': selected.ringSize === item }"
|
|
@click="selected.ringSize = item"
|
|
>
|
|
{{ item }}
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 查询按钮 -->
|
|
<view class="spec-panel__action">
|
|
<view
|
|
class="spec-panel__btn"
|
|
:class="{ 'spec-panel__btn--disabled': !canQuery }"
|
|
@click="querySpecData"
|
|
>
|
|
查询规格数据
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 规格数据列表 -->
|
|
<view v-if="loadingData" class="spec-panel__loading">查询中...</view>
|
|
<view v-else-if="specDataList.length" class="spec-data-list">
|
|
<view v-for="spec in specDataList" :key="spec.id" class="spec-data-item">
|
|
<view class="spec-data-row">
|
|
<text class="spec-data-label">型号</text>
|
|
<text class="spec-data-value">{{ spec.modelName }}</text>
|
|
</view>
|
|
<view class="spec-data-row">
|
|
<text class="spec-data-label">金料总重</text>
|
|
<text class="spec-data-value">{{ spec.goldTotalWeight }}g</text>
|
|
</view>
|
|
<view class="spec-data-row">
|
|
<text class="spec-data-label">金值</text>
|
|
<text class="spec-data-value">¥{{ spec.goldValue }}</text>
|
|
</view>
|
|
<view class="spec-data-row">
|
|
<text class="spec-data-label">主石金额</text>
|
|
<text class="spec-data-value">¥{{ spec.mainStoneAmount }}</text>
|
|
</view>
|
|
<view class="spec-data-row">
|
|
<text class="spec-data-label">副石金额</text>
|
|
<text class="spec-data-value">¥{{ spec.sideStoneAmount }}</text>
|
|
</view>
|
|
<view class="spec-data-row">
|
|
<text class="spec-data-label">总工费</text>
|
|
<text class="spec-data-value">¥{{ spec.totalLaborCost }}</text>
|
|
</view>
|
|
<view class="spec-data-row spec-data-row--total">
|
|
<text class="spec-data-label">总价</text>
|
|
<text class="spec-data-value spec-data-value--price">¥{{ spec.totalPrice }}</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { ref, reactive, computed, onMounted } from 'vue'
|
|
import type { DetailParameterConfig, SpecData } from '../types'
|
|
import { getProductSpecs, getSpecDataList } from '../api/product'
|
|
|
|
const props = defineProps<{
|
|
productId: number
|
|
}>()
|
|
|
|
defineEmits<{
|
|
close: []
|
|
}>()
|
|
|
|
const config = ref<DetailParameterConfig | null>(null)
|
|
const loadingConfig = ref(false)
|
|
const loadingData = ref(false)
|
|
const specDataList = ref<SpecData[]>([])
|
|
|
|
const selected = reactive({
|
|
fineness: '',
|
|
mainStone: '',
|
|
ringSize: '',
|
|
})
|
|
|
|
const canQuery = computed(() =>
|
|
selected.fineness && selected.mainStone && selected.ringSize
|
|
)
|
|
|
|
onMounted(async () => {
|
|
loadingConfig.value = true
|
|
try {
|
|
config.value = await getProductSpecs(props.productId)
|
|
} catch {
|
|
// 错误已在 request 中统一处理
|
|
} finally {
|
|
loadingConfig.value = false
|
|
}
|
|
})
|
|
|
|
async function querySpecData() {
|
|
if (!canQuery.value) return
|
|
loadingData.value = true
|
|
try {
|
|
specDataList.value = await getSpecDataList(props.productId, {
|
|
fineness: selected.fineness,
|
|
mainStone: selected.mainStone,
|
|
ringSize: selected.ringSize,
|
|
})
|
|
} catch {
|
|
// 错误已在 request 中统一处理
|
|
} finally {
|
|
loadingData.value = false
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style scoped>
|
|
.spec-panel-mask {
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
background: rgba(0, 0, 0, 0.5);
|
|
z-index: 999;
|
|
display: flex;
|
|
align-items: flex-end;
|
|
}
|
|
.spec-panel {
|
|
background: #fff;
|
|
width: 100%;
|
|
max-height: 80vh;
|
|
border-radius: 24rpx 24rpx 0 0;
|
|
padding: 32rpx 24rpx;
|
|
overflow-y: auto;
|
|
}
|
|
.spec-panel__header {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
margin-bottom: 24rpx;
|
|
}
|
|
.spec-panel__title {
|
|
font-size: 32rpx;
|
|
font-weight: bold;
|
|
color: #333;
|
|
}
|
|
.spec-panel__close {
|
|
font-size: 36rpx;
|
|
color: #999;
|
|
padding: 8rpx;
|
|
}
|
|
.spec-panel__loading {
|
|
text-align: center;
|
|
padding: 40rpx 0;
|
|
color: #999;
|
|
font-size: 28rpx;
|
|
}
|
|
.spec-group {
|
|
margin-bottom: 24rpx;
|
|
}
|
|
.spec-group__label {
|
|
font-size: 28rpx;
|
|
color: #333;
|
|
margin-bottom: 16rpx;
|
|
display: block;
|
|
}
|
|
.spec-group__options {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: 16rpx;
|
|
}
|
|
.spec-option {
|
|
padding: 12rpx 28rpx;
|
|
font-size: 26rpx;
|
|
color: #666;
|
|
background: #f5f5f5;
|
|
border-radius: 8rpx;
|
|
border: 2rpx solid transparent;
|
|
}
|
|
.spec-option--active {
|
|
color: #e4393c;
|
|
background: #fff1f0;
|
|
border-color: #e4393c;
|
|
}
|
|
.spec-panel__action {
|
|
margin: 24rpx 0;
|
|
}
|
|
.spec-panel__btn {
|
|
background: #e4393c;
|
|
color: #fff;
|
|
text-align: center;
|
|
padding: 20rpx 0;
|
|
border-radius: 44rpx;
|
|
font-size: 28rpx;
|
|
}
|
|
.spec-panel__btn--disabled {
|
|
background: #ccc;
|
|
}
|
|
.spec-data-list {
|
|
margin-top: 16rpx;
|
|
}
|
|
.spec-data-item {
|
|
background: #fafafa;
|
|
border-radius: 12rpx;
|
|
padding: 20rpx;
|
|
margin-bottom: 16rpx;
|
|
}
|
|
.spec-data-row {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
padding: 6rpx 0;
|
|
}
|
|
.spec-data-row--total {
|
|
border-top: 1rpx solid #eee;
|
|
margin-top: 8rpx;
|
|
padding-top: 12rpx;
|
|
}
|
|
.spec-data-label {
|
|
font-size: 26rpx;
|
|
color: #999;
|
|
}
|
|
.spec-data-value {
|
|
font-size: 26rpx;
|
|
color: #333;
|
|
}
|
|
.spec-data-value--price {
|
|
color: #e4393c;
|
|
font-weight: bold;
|
|
}
|
|
</style>
|