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:
DEV_DSW
2026-05-28 17:08:58 +08:00
parent b273fdd23b
commit 958bc96eb0
2 changed files with 20 additions and 51 deletions

View File

@@ -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>

View File

@@ -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;
}