72 lines
2.3 KiB
Vue
72 lines
2.3 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 ellipsis-1">
|
|
{{ 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";
|
|
import { useSelectedDateStore } from "@/store";
|
|
|
|
// 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 selectedDateStore = useSelectedDateStore();
|
|
|
|
const navigateToPage = (commodityId, path) => {
|
|
const { startDate, endDate, totalDays } = props.selectedDate;
|
|
selectedDateStore.setData({ startDate, endDate, totalDays });
|
|
|
|
uni.navigateTo({ url: `${path}?commodityId=${commodityId}` });
|
|
};
|
|
|
|
const handleClick = ({ commodityId }) => navigateToPage(commodityId, "/pages/goods/index")
|
|
|
|
const handleBooking = ({ commodityId }) => navigateToPage(commodityId, "/pages-booking/index")
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
@import "./styles/index.scss";
|
|
</style>
|