182 lines
4.1 KiB
Vue
182 lines
4.1 KiB
Vue
<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>
|