<!--
 * @Author: micky 1254597151@qq.com
 * @Date: 2023-12-24 21:29:25
 * @LastEditors: micky 1254597151@qq.com
 * @LastEditTime: 2023-12-25 20:11:18
 * @FilePath: \housekeeping-uniapp\src\pages\goods\components\recommend-goods.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
    <view class="service__center">
        <view class="service__center-title">商品推荐</view>
        <view class="goods">
            <block v-for="item in list" :key="item.id">
                <view class="goods-item" @click="goPage(`/pages/goods/index?id=${item.id}`)">
                    <view class="info-img">
                        <u-image
                            :src="item.image"
                            class="goods-image"
                            width="100%"
                            height="260"
                            mode="aspectFill"
                            border-radius="15"
                        ></u-image>
                    </view>

                    <view class="info-column">
                        <view style="text-align: left">
                            <view class="goods-title overflow-ellipsis-line ellipsis-line1">
                                {{ item.name }}
                            </view>
                        </view>
                        <view class="flex justify-between items-center mt-[20rpx]">
                            <view class="price-wrap text-lg">
                                ¥
                                <span class="price">{{ numFilter(item.price) }}</span>
                            </view>
                            <view class="text-sm normal" style="color: #b0aeae">
                                <text class="font-bold">{{ item.orderNum }}</text>
                                人预约过
                            </view>
                        </view>
                    </view>
                </view>
            </block>
        </view>
    </view>
</template>

<script lang="ts" setup>

const props = withDefaults(
    defineProps<{
        list: any[]
    }>(),
    {
        list: [] as any
    }
)

const goPage = (url: string) => {
    uni.navigateTo({ url: url })
}
//截取当前数据到小数点后两位
const numFilter = (value: string) => {
    const realVal = parseFloat(value).toFixed(2)
    return realVal
}
</script>

<style lang="scss" scoped>
.service__center {
    padding: 0 20rpx;
    &-title {
        line-height: 80rpx;
        text-align: center;
        color: #f56c6c;
        font-size: 32rpx;
        position: relative;
        &::before {
            content: '—';
            color: #f56c6c;
            padding-right: 10rpx;
        }
        &::after {
            content: '—';
            color: #f56c6c;
            padding-left: 10rpx;
        }
    }
    .goods {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        grid-column-gap: 20rpx;
        grid-row-gap: 20rpx;
        height: 100%;
    }
    .goods-item {
        display: inline-block;
        padding: 15rpx;
        border-radius: 10rpx;
        background-color: #fff;

        .info-img {
            width: 100%;

            .goods-image {
                //图片质量选择器，选择最适合你的游戏图片质量的选择器
                width: 100%; //让图片可以整体显示在页面上
            }
        }

        .info-column {
            text-align: left;
            padding-top: 20rpx;
            padding-left: 5rpx;

            .goods-title {
                font-size: 0.95rem;
                margin-bottom: 10rpx;
            }

            .goods-scribingPrice {
                font-size: 0.775rem;
                color: #808695;
                text-decoration: line-through;
            }

            .price-wrap {
                color: red;
            }
        }
    }
}
</style>
