mall-app-t/peach/components/p-goods-column/p-goods-column.vue

<template>
    <view class="ss-goods-wrap">
        <view v-if="size === 'lg'" class="lg-goods-card ss-flex ss-col-stretch" :style="[elStyles]" @click="onClick">
            <image class="lg-img-box" :src="peach.$url.cdn(data.image || data.picUrl)" mode="aspectFill"></image>
            <view class="lg-goods-content ss-flex-1 ss-flex-col ss-row-between ss-p-b-10 ss-p-t-20">
                <view>
                    <view
                        v-if="goodsFields.title?.show || goodsFields.name?.show"
                        class="lg-goods-title ss-line-2"
                        :style="[{ color: titleColor }]"
                    >
                        {{ data.title || data.name }}
                    </view>
                    <view
                        v-if="goodsFields.subtitle?.show || goodsFields.introduction?.show"
                        class="lg-goods-subtitle ss-m-t-10 ss-line-1"
                        :style="[{ color: subTitleColor, background: subTitleBackground }]"
                    >
                        {{ data.subtitle || data.introduction }}
                    </view>
                </view>
                <view>
                    <view class="ss-flex ss-col-bottom ss-m-t-10">
                        <view
                            v-if="goodsFields.price?.show"
                            class="lg-goods-price ss-m-r-12 ss-flex ss-col-bottom font-OPPOSANS"
                            :style="[{ color: goodsFields.price.color }]"
                        >
                            <text class="ss-font-24">{{ priceUnit }}</text>
                            {{ isArray(data.price) ? fen2yuan(data.price[0]) : fen2yuan(data.price) }}
                        </view>
                        <view
                            v-if="
                                (goodsFields.original_price?.show || goodsFields.marketPrice?.show) &&
                                (data.original_price > 0 || data.marketPrice > 0)
                            "
                            class="goods-origin-price ss-flex ss-col-bottom font-OPPOSANS"
                            :style="[{ color: originPriceColor }]"
                        >
                            <text class="price-unit ss-font-20">{{ priceUnit }}</text>
                            <view class="ss-m-l-8">{{ fen2yuan(data.marketPrice) }}</view>
                        </view>
                    </view>
                    <view class="ss-m-t-8 ss-flex ss-col-center ss-flex-wrap">
                        <view class="sales-text">{{ salesAndStock }}</view>
                    </view>
                </view>
            </view>
        </view>
        <view class="ss-flex ss-row-around" :style="btnStyles">
            <button class="ss-reset-button btn-group">详情</button>
            <button class="ss-reset-button btn-group">编辑</button>
            <button class="ss-reset-button btn-group btn-del">删除</button>
        </view>
    </view>
</template>

<script setup>
import peach from '@/peach'
import { ref, computed } from 'vue'
import { isArray } from 'lodash'
import { fen2yuan, formatSales, formatStock } from '@/peach/hooks/useGoods'

const props = defineProps({
    goodsFields: {
        type: [Array, Object],
        default() {
            return {
                price: { show: true },
                stock: { show: true },
                name: { show: true },
                introduction: { show: true },
                marketPrice: { show: true },
                salesCount: { show: true },
            }
        },
    },
    data: {
        type: Object,
        default: {},
    },
    size: {
        type: String,
        default: '',
    },
    originPriceColor: {
        type: String,
        default: '#C4C4C4',
    },
    topRadius: {
        type: Number,
        default: 0,
    },
    bottomRadius: {
        type: Number,
        default: 0,
    },
    priceUnit: {
        type: String,
        default: '￥',
    },
    titleColor: {
        type: String,
        default: '#333',
    },
    subTitleColor: {
        type: String,
        default: '#999999',
    },
    subTitleBackground: {
        type: String,
        default: '',
    },
})

const emits = defineEmits(['click'])

function onClick() {
    emits('click')
}

const elStyles = computed(() => {
    return {
        background: props.background,
        'border-top-left-radius': props.topRadius + 'px',
        'border-top-right-radius': props.topRadius + 'px',
    }
})

const btnStyles = computed(() => {
    return {
        background: '#fff',
        'border-bottom-left-radius': props.bottomRadius + 'px',
        'border-bottom-right-radius': props.bottomRadius + 'px',
        padding: '8px 0',
    }
})

// 格式化销量、库存信息
const salesAndStock = computed(() => {
    let text = []
    if (props.goodsFields.salesCount?.show) {
        text.push(formatSales(props.data.sales_show_type, props.data.salesCount))
    }
    if (props.goodsFields.stock?.show) {
        text.push(formatStock(props.data.stock_show_type, props.data.stock))
    }
    return text.join(' | ')
})
</script>

<style lang="scss" scoped>
.ss-goods-wrap {
    .lg-goods-card {
        overflow: hidden;
        position: relative;
        z-index: 1;
        background-color: $white;
        height: 280rpx;

        .lg-img-box {
            width: 280rpx;
            height: 280rpx;
            margin-right: 20rpx;
        }

        .lg-goods-title {
            font-size: 28rpx;
            font-weight: 500;
            color: #333333;
            // line-height: 36rpx;
            // width: 410rpx;
        }

        .lg-goods-subtitle {
            font-size: 24rpx;
            font-weight: 400;
            color: #999999;
            // line-height: 30rpx;
            // width: 410rpx;
        }

        .lg-goods-price {
            font-size: 30rpx;
            color: $red;
            line-height: 36rpx;
        }

        .sales-text {
            display: table;
            font-size: 24rpx;
            transform: scale(0.8);
            margin-left: 0rpx;
            color: #c4c4c4;
        }
    }
    .btn-group {
        width: 120rpx;
        height: 50rpx;
        background: var(--ui-BG-1);
        border-radius: 25rpx;
        font-size: 24rpx;
        color: #000;
    }
    .btn-del {
        color: var(--ui-BG-Main);
        background-color: var(--ui-BG-Main-opacity-1);
    }
}
</style>