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

<template>
    <view class="order-card">
     
     <view  v-for="(item,index) in list" :key="item.name +'Card2'">
         <view class="flex_c_s order-item hr-solid" v-if="hanlerIF(index)" >
         <view class="font-30-333">{{item.name}}</view>
         <view class="font-30-333">{{item.value}}</view>
     </view>
     </view>
    
     <view  class="flex_c_c order-item" @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'
     },
     {
         name: '订单编号：',
         value: '123456'
     },
     {
         name: '支付方式：',
         value: '微信'
     },
     {
         name: '支付时间：',
         value: '2025-06-04 9:12'
     },
     {
         name: '下单时间：',
         value: '2025-06-04 9:12'
     },
     {
         name: '完成时间：',
         value: '服务中'
     },
     {
         name: '服务类别：',
         value: '老人生活-老人生活'
     },
     {
         name: '被服务人员：',
         value: '原女士'
     },
 ]
 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 {
     border-radius: 20rpx;
     background: #FFFFFF;
     margin-bottom: 20rpx;
  .order-item {
  
 
 padding: 23rpx 26rpx;
  }
 }
 
 
 </style>