78644e3b8a
- standardize margin spacing across components with explicit pixel values - replace legacy uni-popup and icons with van-ui equivalents in RefundPopup - update font weight class to use semantic name in date range selector
74 lines
2.3 KiB
Vue
74 lines
2.3 KiB
Vue
<template>
|
|
<div class="bg-white p-[8px] rounded-[12px] flex items-start m-[12px]" @click.stop="handleClick(item)">
|
|
<img class="w-[80px] h-[80px] rounded-[10px]" :src="item.commodityPhoto" />
|
|
<div class="max-w-[259px] flex-1 pl-[12px]">
|
|
<div class="text-[16px] leading-[24px] text-[#171717] mb-[4px]">
|
|
{{ item.commodityName }}
|
|
</div>
|
|
<div v-if="item.commodityFacility" class="text-[12px] leading-[16px] text-ink-400 mb-[4px] truncate">
|
|
{{ item.commodityFacility.join(" ") }}
|
|
</div>
|
|
<div class="text-[12px] leading-[18px] text-[#43669A]">
|
|
{{ item.commodityTradeRuleList.join(" / ") }}
|
|
</div>
|
|
|
|
<div class="flex items-center justify-end">
|
|
<div class="mr-[4px]">
|
|
<span class="text-[12px] mr-[4px]">¥</span>
|
|
<span class="text-[18px] font-semibold font-family-misans-vf leading-[24px] text-[#FF3D60]">
|
|
{{ item.specificationPrice }}
|
|
</span>
|
|
</div>
|
|
<span v-if="item.stockUnitLabel" class="text-[12px] leading-[16px] text-ink-400">
|
|
/{{ item.stockUnitLabel }}
|
|
</span>
|
|
<span
|
|
class="p-[4px_8px] bg-linear-[90deg, #ff3d60_57%, #ff990c_100%] rounded-[10px] text-white ml-[16px]">订</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { defineProps } from "vue";
|
|
import { useRouter } from 'vue-router'
|
|
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 router = useRouter()
|
|
const navigateToPage = (commodityId, path) => {
|
|
const { startDate, endDate, totalDays } = props.selectedDate;
|
|
selectedDateStore.setData({ startDate, endDate, totalDays });
|
|
|
|
router.push({ path, query: { commodityId } })
|
|
};
|
|
|
|
const handleClick = ({ commodityId }) => {
|
|
router.push({ name: "goods", query: { commodityId } })
|
|
}
|
|
</script>
|