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

<!-- 商品详情 -->
<template>
    <teleport :to="teleportTo">
        <div class="goods-details" v-if="details">
            <div class="goods-details__wrapper">
                <div class="goods-details__aside">
                    <div class="sku-gallery">
                        <app-image :width="300" :height="300" :src="getImageUrl(details.imagepath)" />
                    </div>
                    <div class="sku-address">
                        <ul>
                            <li>
                                <span>卖家名称</span>
                                <span>{{ details.sellusername }}</span>
                            </li>
                            <li>
                                <span>联系电话</span>
                                <span>{{ details.mobile }}</span>
                            </li>
                            <li>
                                <span>仓库地址</span>
                                <span>{{
                                    [details.provincename, details.cityname, details.districtname,
                                        details.address].join(' ')
                                }}</span>
                            </li>
                        </ul>
                    </div>
                </div>
                <div class="goods-details__main">
                    <div class="sku-title">
                        <el-button @click="emit('closed')">返回</el-button>
                        <h1>【{{ details.zscategorydisplay }}】 商品编号 {{ details.goodsno }}</h1>
                    </div>
                    <div class="sku-info" v-if="details.remark">
                        <p>{{ details.remark }}</p>
                    </div>
                    <div class="sku-spec">
                        <ul>
                            <li>
                                <span>克拉重量:</span>
                                <span>{{ details.weight }}克拉</span>
                            </li>
                            <li>
                                <span>价格:</span>
                                <span>{{ details.zscurrencytypedisplayunit + formatDecimal(details.price) }}</span>
                            </li>
                            <li>
                                <span>克拉单价:</span>
                                <span>{{ details.zscurrencytypedisplayunit + formatDecimal(details.priceper) }}</span>
                            </li>
                            <li>
                                <span>市场价:</span>
                                <span>{{
                                    details.zscurrencytypedisplayunit + formatDecimal(details.marketprice)
                                }}</span>
                            </li>
                        </ul>
                    </div>
                    <div class="sku-price">
                        <span>{{ exchangeRate(details.zscurrencytype, details.price) }}</span>
                        <span v-if="details.zscurrencytype !== CurrencyType.CNY">汇率: {{
                            getExrate(details.zscurrencytype)
                        }}</span>
                    </div>
                    <div class="sku-button" v-if="showButton && details.wrtradeorderid">
                        <el-button type="primary" size="large" @click="openComponent('buy')">立即购买</el-button>
                        <el-button type="success" size="large" @click="openComponent('bargain')">询价申请</el-button>
                        <el-button @click="openComponent('favorite')" size="large" icon="StarFilled" link
                            v-if="!hasFavorite(details.goodsno)">收藏</el-button>
                    </div>
                    <div class="sku-parameter" v-if="details.performancetemplateid">
                        <h4>履约规则</h4>
                        <app-performance-rule :item="getPerformanceTemplateById(details.performancetemplateid)" />
                    </div>
                    <div class="sku-parameter">
                        <h4>钻石属性</h4>
                        <ul>
                            <li>
                                <span>形状</span>
                                <span>{{ handleNoneValue(details.zsshapetypedisplay) }}</span>
                            </li>
                            <li>
                                <span>颜色</span>
                                <span>{{ handleNoneValue(details.zscolortype1display) }}</span>
                            </li>
                            <li>
                                <span>净度</span>
                                <span>{{ handleNoneValue(details.zsclaritytype1display) }}</span>
                            </li>
                            <li>
                                <span>切工</span>
                                <span>{{ handleNoneValue(details.zscuttype1display) }}</span>
                            </li>
                            <li>
                                <span>对称度</span>
                                <span>{{ handleNoneValue(details.zssymmetrytype1display) }}</span>
                            </li>
                            <li>
                                <span>抛光度</span>
                                <span>{{ handleNoneValue(details.zspolishtype1display) }}</span>
                            </li>
                            <li>
                                <span>荧光</span>
                                <span>{{ handleNoneValue(details.zsfluorescencetype1display) }}</span>
                            </li>
                            <li>
                                <span>尺寸</span>
                                <span>{{ handleNoneValue(details.sizedisplay) }}</span>
                            </li>
                            <li>
                                <span>证书类型</span>
                                <span>{{ handleNoneValue(details.zscerttypedisplay) }}</span>
                            </li>
                            <li>
                                <span>证书编号</span>
                                <span>{{ handleNoneValue(details.cerno) }}</span>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
        <component :is="componentMap.get(componentId)" v-bind="{ selectedRow: details }" @closed="closeComponent"
            v-if="componentId" />
    </teleport>
</template>

<script lang="ts">
import { defineComponent } from 'vue'
export default defineComponent({
    inheritAttrs: false,
})
</script>

<script lang="ts" setup>
import { computed, PropType, defineAsyncComponent } from 'vue'
import { getImageUrl, formatDecimal, handleNoneValue } from '@/filters'
import { CurrencyType } from '@/constants/diamond'
import { loginStore, favoriteStore, exrateStore, performanceStore } from '@/stores'
import { useComponent } from '@/hooks/component'
import { useDiamondDetails } from '@/business/goods'
import AppPerformanceRule from '@pc/components/modules/performance-rule/index.vue'
import AppImage from '@pc/components/base/image/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 { getExrate, exchangeRate } = exrateStore.actions
const { hasFavorite } = favoriteStore.actions
const { getPerformanceTemplateById } = performanceStore.actions
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 !== loginStore.getters.userId
    }
    return false
})

getDiamondDetails()
</script>

<style lang="less">
@import './index.less';
</style>