<template>
  <view class="container">
    <view class="appoint" v-for="item of 3">
      <view class="appoint-list">
        <view class="appoint-title">【养车】标题标题标题标题标题标题标题标题标题标题……</view>
        <view class="appoint-address">贵州省贵阳市榕江县栽麻乡小利村三组</view>
        <view class="appoint-flex">
          <!-- <Image src="https://cdn.uviewui.com/uview/album/1.jpg" /> -->
          <img class="img" src="@/static/logo.png" alt="">
          <view class="appoint-text">
            <view>业务：洗车……</view>
            <view>时间：2023年06月18日</view>
            <view>联系方式：18285564342</view>
          </view>
        </view>
        <view class="appoint-goto">
          <u-button class="detail" text="详情" @tap="$Router.push('/pages/business/service/detail')"></u-button>
          <u-button class="cancel" text="取消" @click="handlerClearItem(item,index)"></u-button>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
  import { maintainReservations } from "@/api/mine.js"
  export default {
    data() {
      return {
        queryParams:{
          size:10
        },

        init_list:[]//初始化列表
      };
    },
    mounted() {
      this.handlerInitList()
    },
    methods: {
      // 初始化列表
      handlerInitList(){
        maintainReservations(this.queryParams).then(res=>{
          console.log('res',res);
        })
      },
      // 点击取消商品
      handlerClearItem(){
        uni.showToast({
          title:'么有',
          icon:'none'
        })
      },
    },
  };
</script>

<style lang="scss" scoped>
  page{
    background-color: #efefef;
  }
  .container{
    padding: 20rpx;
  }
  .appoint {
    .history {
      font-size: 38rpx;
      margin: 20rpx 10rpx;
      font-weight: bold;
    }
  }

  .appoint-list {
    padding: 20rpx;
    background-color: #fff;
    margin-bottom: 20rpx;
    box-sizing: border-box;
    border-radius: 20rpx;
    .appoint-title {
      font-size: 38rpx;
      font-weight: bold;
      margin-bottom: 10rpx;
      color: #090909;
    }

    .appoint-address {
      font-size: 32rpx;
      margin: 20rpx;
      padding-bottom: 20rpx;
      color: #000000;
      border-bottom: 2rpx solid #E5E5E5;
    }


    .appoint-flex {
      display: flex;
      .img {
        width: 210rpx;
        height: 160rpx;
        display: block;
        margin-right: 15rpx;
      }
      .appoint-text {
        font-size: 28rpx;
        >view {
          margin-bottom: 26rpx;
        }
      }
    }
    .appoint-goto {
      display: flex;
      .detail,.cancel{
        width: 45%;
        border-radius: 20rpx;
      }
      .detail{
        background-color: #6C9FC3;
        color: #fff;
      }
    }
  }
</style>
