book-hi/pages/home/components/ServiceInfo.vue

<template>
    <view class="service-info">
        <view class="service-icons" @tap="showServiceGuarantee">
            <view class="icon-item" v-if="firstOrder == 1">
                <image src="/static/img/1.png" mode="widthFix" style="width: 30rpx; height: 30rpx"></image>
                <text style="margin-left: 6rpx">免费退回</text>
                <text style="margin-left: 4rpx"> > </text>
            </view>
            <view class="icon-item">
                <image src="/static/img/2.png" mode="widthFix" style="width: 30rpx; height: 30rpx"></image>
                <text style="margin-left: 6rpx">24小时验</text>
                <text style="margin-left: 4rpx"> > </text>
            </view>
            <view class="icon-item">
                <image src="/static/img/3.png" mode="widthFix" style="width: 30rpx; height: 30rpx"></image>
                <text style="margin-left: 6rpx">极速打款</text>
                <text style="margin-left: 4rpx"> > </text>
            </view>
            <view class="icon-item">
                <image src="/static/img/4.png" mode="widthFix" style="width: 30rpx; height: 30rpx"></image>
                <text style="margin-left: 6rpx">卖亏必赔</text>
                <text style="margin-left: 4rpx"> > </text>
            </view>
        </view>

        <!-- 服务保障弹窗 -->
        <ServiceGuarantee ref="serviceGuarantee" />
    </view>
</template>

<script>
import ServiceGuarantee from "./ServiceGuarantee.vue";

export default {
    components: {
        ServiceGuarantee,
    },
    props: {
        serviceList: {
            type: Array,
            default: () => [],
        },
        firstOrder: {
            type: [Number, String],
            default: 0,
        },
    },
    data() {
        return {
            serviceItems: [
                {
                    icon: "/static/img/1.png",
                    text: "免费退回",
                },
                {
                    icon: "/static/img/2.png",
                    text: "24小时验",
                },
                {
                    icon: "/static/img/3.png",
                    text: "极速打款",
                },
                {
                    icon: "/static/img/4.png",
                    text: "卖亏必赔",
                },
            ],
        };
    },
    methods: {
        showServiceGuarantee() {
            this.$refs.serviceGuarantee.openPopup();
        },
    },
};
</script>

<style lang="scss" scoped>
.service-icons {
    display: flex;
    justify-content: center;
    padding: 14rpx;
    background: #1f1303;
    box-sizing: border-box;
    gap: 14px;

    .icon-item {
        display: flex;
        align-items: center;
        font-family: Source Han Sans CN;
        font-weight: 400;
        font-size: 24rpx;
        color: #fff6ed;
    }
}
</style>