refactor(quick-card): inline styles and update routing
Remove the separate SCSS stylesheet and inline all utility classes in the template. Refactor the price display to use an inline ¥ span instead of the ::before pseudo-element. Switch from uni.navigateTo to vue router push, and clean up component code.
This commit is contained in:
@@ -1,36 +1,29 @@
|
||||
<template>
|
||||
<div
|
||||
class="card bg-white border-box p-8 rounded-12 flex flex-items-start m-12"
|
||||
@click.stop="handleClick(item)"
|
||||
>
|
||||
<img class="left rounded-10" :src="item.commodityPhoto" mode="aspectFill" />
|
||||
<div class="right border-box flex-full pl-12">
|
||||
<div class="font-size-16 line-height-24 color-171717 mb-4">
|
||||
<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-full pl-[12px]">
|
||||
<div class="text-[16px] leading-[24px] text-[#171717] mb-[4px]">
|
||||
{{ item.commodityName }}
|
||||
</div>
|
||||
<div
|
||||
v-if="item.commodityFacility"
|
||||
class="font-size-12 line-height-16 color-99A0AE mb-4 ellipsis-1"
|
||||
>
|
||||
<div v-if="item.commodityFacility" class="text-[12px] leading-[16px] text-[#99A0AE] mb-4 truncate">
|
||||
{{ item.commodityFacility.join(" ") }}
|
||||
</div>
|
||||
<div class="font-size-12 line-height-18 color-43669A">
|
||||
<div class="text-[12px] leading-[18px] text-[#43669A]">
|
||||
{{ item.commodityTradeRuleList.join(" / ") }}
|
||||
</div>
|
||||
|
||||
<div class="flex flex-items-center flex-justify-end">
|
||||
<span
|
||||
class="amt font-size-18 font-500 font-family-misans-vf line-height-24 color-FF3D60 mr-4"
|
||||
>
|
||||
{{ item.specificationPrice }}
|
||||
</span>
|
||||
<span
|
||||
v-if="item.stockUnitLabel"
|
||||
class="font-size-12 line-height-16 color-99A0AE"
|
||||
>
|
||||
<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-[#99A0AE]">
|
||||
/{{ item.stockUnitLabel }}
|
||||
</span>
|
||||
<span class="btn border-box rounded-10 color-white ml-16">订</span>
|
||||
<span
|
||||
class="p-[4px_8px] bg-linear-[90deg, #ff3d60_57%, #ff990c_100%] rounded-[10px] text-white ml-[16px]">订</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -38,6 +31,7 @@
|
||||
|
||||
<script setup>
|
||||
import { defineProps } from "vue";
|
||||
import { useRouter } from 'vue-router'
|
||||
import { useSelectedDateStore } from "@/store";
|
||||
|
||||
// Props
|
||||
@@ -59,23 +53,20 @@ const props = defineProps({
|
||||
},
|
||||
selectedDate: {
|
||||
type: Object,
|
||||
default: () => {},
|
||||
default: () => { },
|
||||
},
|
||||
});
|
||||
|
||||
const selectedDateStore = useSelectedDateStore();
|
||||
|
||||
const router = useRouter()
|
||||
const navigateToPage = (commodityId, path) => {
|
||||
const { startDate, endDate, totalDays } = props.selectedDate;
|
||||
selectedDateStore.setData({ startDate, endDate, totalDays });
|
||||
|
||||
uni.navigateTo({ url: `${path}?commodityId=${commodityId}` });
|
||||
router.push({ path, query: { commodityId } })
|
||||
};
|
||||
|
||||
const handleClick = ({ commodityId }) =>
|
||||
navigateToPage(commodityId, "/pages/goods/index");
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
@import "./styles/index.scss";
|
||||
</style>
|
||||
|
||||
@@ -1,22 +0,0 @@
|
||||
.left {
|
||||
height: 80px;
|
||||
width: 80px;
|
||||
}
|
||||
|
||||
.right {
|
||||
max-width: 259px;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.amt {
|
||||
&::before {
|
||||
content: "¥";
|
||||
font-size: 12px;
|
||||
margin-right: 4px;
|
||||
}
|
||||
}
|
||||
|
||||
.btn {
|
||||
background: linear-gradient(90deg, #ff3d60 57%, #ff990c 100%);
|
||||
padding: 4px 8px;
|
||||
}
|
||||
Reference in New Issue
Block a user