85 lines
2.2 KiB
Vue
85 lines
2.2 KiB
Vue
<template>
|
|
<view
|
|
class="card bg-white border-box p-8 rounded-12 flex flex-items-start m-12"
|
|
@click.stop="handleClick(item)"
|
|
>
|
|
<image
|
|
class="left rounded-10"
|
|
:src="item.commodityPhoto"
|
|
mode="aspectFill"
|
|
/>
|
|
<view class="right border-box flex-full pl-12">
|
|
<view class="font-size-16 line-height-24 color-171717 mb-4">
|
|
{{ item.commodityName }}
|
|
</view>
|
|
<view
|
|
v-if="item.commodityFacility"
|
|
class="font-size-12 line-height-16 color-99A0AE mb-4"
|
|
>
|
|
{{ item.commodityFacility.join(" ") }}
|
|
</view>
|
|
<view class="font-size-12 line-height-18 color-43669A">
|
|
{{ item.commodityTradeRuleList.join(" / ") }}
|
|
</view>
|
|
|
|
<view class="flex flex-items-center flex-justify-end">
|
|
<text
|
|
class="amt font-size-18 font-500 font-family-misans-vf line-height-24 color-FF3D60 mr-4"
|
|
>
|
|
{{ item.specificationPrice }}
|
|
</text>
|
|
<text class="font-size-12 line-height-16 color-99A0AE">
|
|
/{{ item.stockUnitLabel }}
|
|
</text>
|
|
<text
|
|
class="btn border-box rounded-10 color-white ml-16"
|
|
@click.stop="handleBooking(item)"
|
|
>订</text
|
|
>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { defineProps } from "vue";
|
|
|
|
// Props
|
|
const props = defineProps({
|
|
item: {
|
|
type: Object,
|
|
required: true,
|
|
default: () => ({
|
|
commodityPhoto: "",
|
|
commodityId: "",
|
|
commodityName: "",
|
|
specificationPrice: "",
|
|
commodityServices: [],
|
|
commodityTags: [], // 商品标签
|
|
commodityTradeRuleList: [], // 交易规则列表
|
|
specificationId: "", // 规格ID
|
|
stockUnitLabel: "", // 库存单位
|
|
}),
|
|
},
|
|
selectedDate: {
|
|
type: Object,
|
|
default: () => {},
|
|
},
|
|
});
|
|
|
|
const handleClick = ({ commodityId }) => {
|
|
uni.navigateTo({ url: `/pages/goods/index?commodityId=${commodityId}` });
|
|
};
|
|
|
|
const handleBooking = ({ commodityId }) => {
|
|
const { startDate, endDate, totalDays } = props.selectedDate;
|
|
uni.navigateTo({
|
|
url: `/pages-booking/index?commodityId=${commodityId}&startDate=${startDate}&endDate=${endDate}&totalDays=${totalDays}`,
|
|
});
|
|
};
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
@import "./styles/index.scss";
|
|
</style>
|