webb2b/src/packages/pc/views/warehousing/goods/components/details/index.vue

<!-- 商品详情 -->
<template>
    <teleport :to="teleportTo">
        <app-view class="app-details" v-bind="$attrs">
            <template #header>
                <div v-if="details">
                    <el-button @click="emit('closed')">返回</el-button>
                    <template v-if="showButton && details.wrtradeorderid">
                        <el-button type="primary" @click="openComponent('favorite')"
                            v-if="!hasFavorite(details.goodsno)">收藏</el-button>
                        <el-button type="primary" @click="openComponent('buy')">立即购买</el-button>
                        <el-button type="primary" @click="openComponent('bargain')">询价申请</el-button>
                    </template>
                </div>
            </template>
            <template v-if="details">
                <div class="app-details__intro" style="line-height:normal;margin-bottom:48px">
                    <div class="gallery">

                    </div>
                    <div class="info">
                        <h1>【{{ details.zscategorydisplay }}】 商品编号 {{ details.goodsno }}</h1>
                        <table>
                            <tbody>
                                <tr>
                                    <td>商品备注</td>
                                    <td>{{ details.remark }}</td>
                                </tr>
                                <tr>
                                    <td>克拉重量</td>
                                    <td>{{ details.weight }}克拉</td>
                                </tr>
                                <tr>
                                    <td>价格</td>
                                    <td>{{ details.zscurrencytypedisplayunit + formatDecimal(details.price) }}</td>
                                </tr>
                                <tr>
                                    <td>克拉单价</td>
                                    <td>{{ details.zscurrencytypedisplayunit + formatDecimal(details.priceper) }}</td>
                                </tr>
                                <tr>
                                    <td>市场价</td>
                                    <td>{{ details.zscurrencytypedisplayunit + formatDecimal(details.marketprice) }}
                                    </td>
                                </tr>
                                <tr v-if="details.zscurrencytype !== CurrencyType.CNY">
                                    <td>{{ exchangeRate(details.zscurrencytype, details.price) }}</td>
                                    <td>汇率:{{ getExrate(details.zscurrencytype) }}</td>
                                </tr>
                                <tr>
                                    <td>卖家名称</td>
                                    <td>{{ details.sellusername }}</td>
                                </tr>
                                <tr>
                                    <td>联系电话</td>
                                    <td>{{ details.mobile }}</td>
                                </tr>
                                <tr>
                                    <td>仓库地址</td>
                                    <td>{{ [details.provincename, details.cityname, details.districtname,
                                        details.address].join(' ')
                                    }}</td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
                <div class="rule" style="margin-bottom:48px" v-if="details.performancetemplateid !== 0">
                    <h1>履约规则</h1>
                    <app-performance-rule :item="getPerformanceTemplateById(details.performancetemplateid)" />
                </div>
                <div class="property" style="line-height:normal">
                    <h1>钻石属性</h1>
                    <table>
                        <tbody>
                            <tr>
                                <td>形状</td>
                                <td>{{ details.zsshapetypedisplay }}</td>
                            </tr>
                            <tr>
                                <td>颜色</td>
                                <td>{{ details.zscolortype1display }}</td>
                            </tr>
                            <tr>
                                <td>净度</td>
                                <td>{{ details.zsclaritytype1display }}</td>
                            </tr>
                            <tr>
                                <td>切工</td>
                                <td>{{ details.zscuttype1display }}</td>
                            </tr>
                            <tr>
                                <td>对称度</td>
                                <td>{{ details.zssymmetrytype1display }}</td>
                            </tr>
                            <tr>
                                <td>抛光度</td>
                                <td>{{ details.zspolishtype1display }}</td>
                            </tr>
                            <tr>
                                <td>荧光</td>
                                <td>{{ details.zsfluorescencetype1display }}</td>
                            </tr>
                            <tr>
                                <td>尺寸</td>
                                <td>{{ details.sizedisplay }}</td>
                            </tr>
                            <tr>
                                <td>证书类型</td>
                                <td>{{ details.zscerttypedisplay }}</td>
                            </tr>
                            <tr>
                                <td>证书编号</td>
                                <td>{{ details.cerno }}</td>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </template>
        </app-view>
        <component :is="componentMap.get(componentId)" v-bind="{ selectedRow: details }" @closed="closeComponent"
            v-if="componentId" />
    </teleport>
</template>

<script lang="ts" setup>
import { computed, PropType, defineAsyncComponent } from 'vue'
import { formatDecimal } from '@/filters'
import { CurrencyType } from '@/constants/diamond'
import { useLoginStore, useFavoriteStore, useExrateStore, usePerformanceStore } from '@/stores'
import { useComponent } from '@/hooks/component'
import { useDiamondDetails } from '@/business/goods'
import AppPerformanceRule from '@pc/components/modules/performance-rule/index.vue'

const componentMap = new Map<string, unknown>([
    ['favorite', defineAsyncComponent(() => import('../favorite/index.vue'))], // 收藏
    ['buy', defineAsyncComponent(() => import('../buy/index.vue'))], // 立即购买
    ['bargain', defineAsyncComponent(() => import('../bargain/index.vue'))] // 询价申请
])

const props = defineProps({
    teleportTo: {
        type: String,
        default: '#appPageTeleport'
    },
    selectedRow: {
        type: Object as PropType<{ goodsno: string }>,
        required: true
    },
})

const emit = defineEmits(['closed'])
const { getUserId } = useLoginStore()
const { getExrate, exchangeRate } = useExrateStore()
const { hasFavorite } = useFavoriteStore()
const { getPerformanceTemplateById } = usePerformanceStore()
const { details, getDiamondDetails } = useDiamondDetails(props.selectedRow.goodsno)

const { componentId, openComponent, closeComponent } = useComponent((componentName) => {
    if (componentName === 'buy') {
        // 摘牌成功后关闭详情页同时刷新列表页
        emit('closed', true)
    } else {
        getDiamondDetails()
    }
})

// 不能购买自己上架的商品
const showButton = computed(() => {
    if (details.value) {
        return details.value.userid !== getUserId()
    }
    return false
})

getDiamondDetails()
</script>