leromro-mini/pages_classify/pages/details/CardList.vue

<template>
    <view class="order-card">
        <view v-for="(item, index) in list" :key="item.name + 'CardList'">
            <view class="order-item" v-if="hanlerIF(index)">
                <view class="dict-tags tag-posi">服务中</view>
                <view class="font-30-85 card-title">子订单编号: 123456789</view>
                <view class="hr-dashed"></view>
                <view class="card-content">
                    <view class="order-content flex_s_c">
                        <view class="content-img"></view>
                        <view class="content-rigth">
                            <view class="content-item flex_c_s">
                                <view class="font-30-333">金邻助家</view>
                                <view class="font-30-333" style="font-weight: bold;">140</view>
                            </view>
                            <view class="font-28-grey flex_c_s">
                                <view>(次)</view>
                                <view>x5</view>
                            </view>
                            <view class="font-26-333 card-text">
                                已选日期：6月30号
                            </view>
                        </view>
                    </view>
                    <view class="flex_c_s card-time-box">
                        <view class="font-28-14">服务时间：</view>
                        <view class="font-28-85 flex_c_r">上午9:30 <up-icon name="arrow-right" color="#7B7B7B" size="14"></up-icon></view>
                    </view>
                </view>


                <view v-if="item.status" class="card-btn-footer">
                    <view class="hr-dashed"></view>
                    <view class="flex_c_c card-btn-box">
                        <view class="cus-parmas-btn">去服务</view>
                    </view>

                </view>
            </view>
        </view>

        <view class="flex_c_c order-item order-footer" @click="handleClick">
            <text class="font-28-cb">{{ status ? '收起' : '展开' }}</text> <up-icon :name="icon_value" color="#CB9964"
                size="16"></up-icon>
        </view>

    </view>

</template>

<script setup>
import { computed, ref } from 'vue';
const list = [
    {
        name: '支付金额：',
        value: '￥100.00',
        status: true
    },
    {
        name: '订单编号：',
        value: '123456',
        status: false
    },

]
const status = ref(false);

const icon_value = computed(() => {
    return status.value ? 'arrow-up' : 'arrow-down'
})
const hanlerIF = (index) => {
    return status.value ? true : index < 1;
}

const handleClick = () => {
    status.value = !status.value;
}
</script>
<style lang="scss" scoped>
.order-card {
    padding-bottom: 112rpx;
}

.order-item {
    border-radius: 20rpx;
    background: #FFFFFF;
    padding: 26rpx;

    position: relative;

    .tag-posi {
        position: absolute;
        right: 0;
        top: 0;
    }

    margin-bottom: 16rpx;

}

.card-title {
    margin-bottom: 24rpx;
}

.card-content {
    padding: 38rpx 20rpx 0;
    width: 100%;

    .content-img {
        width: 144rpx;
        height: 144rpx;
        margin-right: 20rpx;
        background: red;
    }

    .content-rigth {
        flex: 1;
        padding-top: 38rpx 0 10rpx;
    }

    .card-text {
        margin-top: 20rpx;
    }

    .card-time-box {
        margin-top: 24rpx;
    }
}

.order-footer {
    padding: 26rpx 0;
}
.card-btn-footer {
    margin-top: 20rpx;
}
.card-btn-box {
    padding: 30rpx 0 8rpx;
}
</style>