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

211 lines
6.3 KiB
Vue
Raw Normal View History

2024-05-27 00:51:03 +08:00
<template>
2024-06-03 18:35:53 +08:00
<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>
2024-05-27 00:51:03 +08:00
</view>
</view>
2024-06-03 18:35:53 +08:00
<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>
2024-05-27 00:51:03 +08:00
</view>
</template>
<script setup>
2024-06-03 18:35:53 +08:00
import peach from '@/peach'
2024-05-27 00:51:03 +08:00
import { ref, computed } from 'vue'
2024-06-03 18:35:53 +08:00
import { isArray } from 'lodash'
import { fen2yuan, formatSales, formatStock } from '@/peach/hooks/useGoods'
2024-05-27 00:51:03 +08:00
const props = defineProps({
2024-06-03 18:35:53 +08:00
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: '',
},
2024-05-27 00:51:03 +08:00
})
const emits = defineEmits(['click'])
function onClick() {
2024-06-03 18:35:53 +08:00
emits('click')
2024-05-27 00:51:03 +08:00
}
const elStyles = computed(() => {
2024-06-03 18:35:53 +08:00
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',
}
2024-05-27 00:51:03 +08:00
})
// 格式化销量、库存信息
const salesAndStock = computed(() => {
2024-06-03 18:35:53 +08:00
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(' | ')
})
2024-05-27 00:51:03 +08:00
</script>
<style lang="scss" scoped>
2024-06-03 18:35:53 +08:00
.ss-goods-wrap {
.lg-goods-card {
overflow: hidden;
position: relative;
z-index: 1;
background-color: $white;
height: 280rpx;
2024-05-27 00:51:03 +08:00
2024-06-03 18:35:53 +08:00
.lg-img-box {
width: 280rpx;
height: 280rpx;
margin-right: 20rpx;
}
2024-05-27 00:51:03 +08:00
2024-06-03 18:35:53 +08:00
.lg-goods-title {
font-size: 28rpx;
font-weight: 500;
color: #333333;
// line-height: 36rpx;
// width: 410rpx;
}
2024-05-27 00:51:03 +08:00
2024-06-03 18:35:53 +08:00
.lg-goods-subtitle {
font-size: 24rpx;
font-weight: 400;
color: #999999;
// line-height: 30rpx;
// width: 410rpx;
}
2024-05-27 00:51:03 +08:00
2024-06-03 18:35:53 +08:00
.lg-goods-price {
font-size: 30rpx;
color: $red;
line-height: 36rpx;
}
2024-05-27 00:51:03 +08:00
2024-06-03 18:35:53 +08:00
.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);
}
2024-05-27 00:51:03 +08:00
}
2024-06-03 18:35:53 +08:00
</style>