69 lines
1.2 KiB
Vue
69 lines
1.2 KiB
Vue
<template>
|
|
<view class="goods-item" @tap="toDetail">
|
|
<cl-image
|
|
mode="aspectFill"
|
|
background-color="#fff"
|
|
:size="[350, '100%']"
|
|
:radius="[16, 16, 0, 0]"
|
|
:src="resizeImage(item.mainPic!, 360)"
|
|
/>
|
|
|
|
<view class="goods-item__det">
|
|
<cl-text
|
|
:value="item.title"
|
|
block
|
|
:margin="[0, 0, 16, 0]"
|
|
:ellipsis="2"
|
|
:line-height="1.4"
|
|
/>
|
|
|
|
<cl-row>
|
|
<cl-text type="price" color="#333" :size="34" :value="item.price" bold />
|
|
<cl-text
|
|
color="info"
|
|
:size="22"
|
|
:margin="[0, 0, 0, 10]"
|
|
:value="`${item.sold || 0}件已售`"
|
|
/>
|
|
</cl-row>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script lang="ts" setup>
|
|
import type { PropType } from "vue";
|
|
import { useCool, useUpload } from "/@/cool";
|
|
|
|
const props = defineProps({
|
|
item: {
|
|
type: Object as PropType<Eps.GoodsInfoEntity>,
|
|
default: () => ({}),
|
|
},
|
|
});
|
|
|
|
const { router } = useCool();
|
|
const { resizeImage } = useUpload();
|
|
|
|
function toDetail() {
|
|
router.push({
|
|
path: "/pages/goods/detail",
|
|
query: {
|
|
id: props.item.id,
|
|
},
|
|
});
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.goods-item {
|
|
position: relative;
|
|
background-color: #ffffff;
|
|
border-radius: 16rpx;
|
|
margin-bottom: 20rpx;
|
|
|
|
.goods-item__det {
|
|
padding: 20rpx;
|
|
}
|
|
}
|
|
</style>
|