<!--
 * @Author: micky 1254597151@qq.com
 * @Date: 2023-08-14 15:38:40
 * @LastEditors: micky 1254597151@qq.com
 * @LastEditTime: 2024-01-03 09:35:41
 * @FilePath: \housekeeping-uniapp\src\pages\goods\components\card.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
    <view class="card" @click="goPage">
        <!-- 卡片头部 -->
        <view
            class="card--header flex justify-between items-center"
            :class="{ bb: border_bottom }"
            v-if="title.length"
        >
            <view class="title font-bold flex-1">
                {{ title }}
                <slot name="sub-title"></slot>
            </view>
            <slot name="header-right"></slot>
        </view>

        <!-- 内容商品 -->
        <slot></slot>
    </view>
</template>

<script setup lang="ts">
import { ref, withDefaults } from 'vue'

/** Props Start **/
const props = withDefaults(
    defineProps<{
        title?: string // 标题
        url?: string //跳转页面
        border_bottom?: boolean // 下划线
    }>(),
    {
        title: '',
        url: '',
        border_bottom: true
    }
)
/** Props End **/

/** Methods Start **/
const goPage = () => {
    if (!props.url) return
    uni.navigateTo({
        url: props.url
    })
}
/** Methods End **/
</script>

<style lang="scss" scoped>
.card {
    padding: 24rpx 0;
    margin: 20rpx 20rpx 0 20rpx;
    background-color: #fff;
    border-radius: 10rpx;

    &--header {
        padding: 0 15rpx 20rpx 15rpx;
        .title {
            color: #222222;
            font-size: 32rpx;
        }
    }

    .bb {
        border-bottom: 1px solid #f3f3f3;
    }
}
</style>
