zyejMAll-mobile/sheep/components/s-goods-item/s-goods-item.vue
2024-08-07 10:31:42 +08:00

182 lines
4.1 KiB
Vue
Raw Permalink Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<template>
<view>
<view>
<slot name="top"></slot>
</view>
<view
class="ss-order-card-warp ss-flex ss-col-stretch ss-row-between bg-white"
:style="[{ borderRadius: radius + 'rpx', marginBottom: marginBottom + 'rpx' }]"
>
<view class="img-box ss-m-r-24">
<image class="order-img" :src="sheep.$url.cdn(img)" mode="aspectFill"></image>
</view>
<view
class="box-right ss-flex-col ss-row-between"
:style="[{ width: titleWidth ? titleWidth + 'rpx' : '' }]"
>
<view class="title-text ss-line-2" v-if="title">{{ title }}</view>
<view v-if="skuString" class="spec-text ss-m-t-8 ss-m-b-12">{{ skuString }}</view>
<view class="groupon-box">
<slot name="groupon"></slot>
</view>
<view class="ss-flex">
<view class="ss-flex ss-col-center">
<view
class="price-text ss-flex ss-col-center"
:style="[{ color: priceColor }]"
v-if="price && Number(price) > 0"
>
¥{{ fen2yuan(price) }}
</view>
<view v-if="num" class="total-text ss-flex ss-col-center">x {{ num }}</view>
<slot name="priceSuffix"></slot>
</view>
</view>
<view class="tool-box">
<slot name="tool"></slot>
</view>
<view>
<slot name="rightBottom"></slot>
</view>
</view>
</view>
</view>
</template>
<script setup>
import sheep from '@/sheep';
import { computed } from 'vue';
import { fen2yuan } from '@/sheep/hooks/useGoods';
/**
* 订单卡片
*
* @property {String} img - 图片
* @property {String} title - 标题
* @property {Number} titleWidth = 0 - 标题宽度默认0单位rpx
* @property {String} skuText - 规格
* @property {String | Number} price - 价格
* @property {String} priceColor - 价格颜色
* @property {Number | String} num - 数量
*
*/
const props = defineProps({
img: {
type: String,
default: 'https://img1.baidu.com/it/u=1601695551,235775011&fm=26&fmt=auto',
},
title: {
type: String,
default: '',
},
titleWidth: {
type: Number,
default: 0,
},
skuText: {
type: [String, Array],
default: '',
},
price: {
type: [String, Number],
default: '',
},
priceColor: {
type: [String],
default: '',
},
num: {
type: [String, Number],
default: 0,
},
score: {
type: [String, Number],
default: '',
},
radius: {
type: [String],
default: '',
},
marginBottom: {
type: [String],
default: '',
},
});
const skuString = computed(() => {
if (!props.skuText) {
return '';
}
if (typeof props.skuText === 'object') {
return props.skuText.join(',');
}
return props.skuText;
});
</script>
<style lang="scss" scoped>
.score-img {
width: 36rpx;
height: 36rpx;
margin: 0 4rpx;
}
.ss-order-card-warp {
padding: 20rpx;
.img-box {
width: 164rpx;
height: 164rpx;
border-radius: 10rpx;
overflow: hidden;
.order-img {
width: 164rpx;
height: 164rpx;
}
}
.box-right {
flex: 1;
// width: 500rpx;
// height: 164rpx;
position: relative;
.tool-box {
position: absolute;
right: 0rpx;
bottom: -10rpx;
}
}
.title-text {
font-size: 28rpx;
font-weight: 500;
line-height: 40rpx;
}
.spec-text {
font-size: 24rpx;
font-weight: 400;
color: $dark-9;
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 1;
-webkit-box-orient: vertical;
}
.price-text {
font-size: 24rpx;
font-weight: 500;
font-family: OPPOSANS;
}
.total-text {
font-size: 24rpx;
font-weight: 400;
line-height: 24rpx;
color: $dark-9;
margin-left: 8rpx;
}
}
</style>