pad_spa/src/pages/home/index.vue

<template>
  <div class="home">
    <div class="tab">
      <div class="make-order"
           v-for="item,index in tabList"
           :key="index">
        <div class="make-icon">
          <img :src="item.image">
        </div>
        <div class="make-tips">
          <div class="make-num">{{ item.num }}</div>
          <div class="make-name">{{ item.name }}</div>
        </div>
      </div>
    </div>
    <div class="order-list">
      <div class="title">预约订单列表</div>
      <div v-if="orderList.length>0"
           class="list-info"
           @click="toOrderDetails(item)">
        <div class="user-info"
             v-for="(item,index) in orderList"
             :key="index"
             :style="index==orderList.length-1?'border-bottom:0px':''">
          <div class="head-img">
            <div class="new">新</div><img :src="item.avatar_url"
                 alt="">
          </div>
          <div class="user-information">
            <div class="name">客户昵称：<span>{{ item.nickname }}</span></div>
            <div class="name">预约项目时间：<span>{{ item.order_time }}</span></div>
            <div class="name">预约项目数量：<span>{{ item.project_num }}</span></div>
          </div>
          <ul class="product-list">
            <li class="product-image"
                v-for="value,i in item.project_list"
                :key="i"><img :src="value.cover_url"
                   alt=""></li>
          </ul>
          <div class="status"
               :style="item.status==0?'color: #FC3019':item.status==5?'color: #A999EA':'color: #61D09D;'">
            {{ item.status==0?'未支付':item.status==5?'已取消':'待使用' }}
          </div>
        </div>
      </div>
      <div v-else
           class="empty">
        暂无数据
      </div>
    </div>
  </div>
</template>

<script>
import api from '@/server/home'

export default {
  name: 'home',
  data () {
    return {
      tabList: [
        {
          image: 'https://we-spa.oss-cn-shenzhen.aliyuncs.com/pad_clerk/home/make.png',
          num: 3,
          name: '预约订单'
        },
        {
          image: 'https://we-spa.oss-cn-shenzhen.aliyuncs.com/pad_clerk/home/unpaid.png',
          num: 4,
          name: '未支付订单'
        },
        {
          image: 'https://we-spa.oss-cn-shenzhen.aliyuncs.com/pad_clerk/home/cancelOrder.png',
          num: 9,
          name: '取消订单'
        },
      ],
      orderList: [
      ],

    }
  },
  mounted: function () {

  },
  created: function () {
    this.getTotal()
    this.getToday()
    console.log(this.$store.state.comVal.token, 'this.$store.state.comVal.token');
  },
  methods: {
    getTotal () {
      api.getTotal().then(res => {
        if (res.code == 200) {
          this.tabList[0].num = res.data.order_num
          this.tabList[1].num = res.data.wait_pay_num
          this.tabList[2].num = res.data.cancel_num
        }
        console.log(res, 'res====');
      })
    },
    getToday () {
      api.getToday().then(res => {
        if (res.code = 200) {
          this.orderList = res.data.list
        }
        console.log(res, 'res');
      })
    },
    toOrderDetails (e) {
      if (e.status != 0) return
      this.$router.push({
        path: '/confirmOrder/details',
        query: {
          id: e.id
        }
      })
    },
    initData () {

    },
  },
  computed: {},
  watch: {}
}
</script>
<style lang='less' scoped>
@import url(../../style/root.less);

.home {
  text-align: center;

  .tab {
    display: flex;
    justify-content: space-between;
    align-items: center;

    .make-order {
      width: 274px;
      padding: 14px 30px;
      background: #ffffff;
      box-shadow: 0px 2px 4px 0px rgba(184, 191, 198, 0.2);
      border-radius: 8px;
      display: flex;
      align-items: center;

      .make-icon {
        img {
          width: 68px;
        }
      }

      .make-tips {
        margin-left: 20px;

        .make-num {
          font-size: 34px;
          font-family: OPPOSans-B, OPPOSans;
          font-weight: normal;
          color: #333333;
          line-height: 40px;
          text-align: left;
        }

        .make-name {
          font-size: 14px;
          font-family: PingFangSC-Regular, PingFang SC;
          font-weight: 400;
          color: #333333;
          line-height: 20px;
        }
      }
    }
  }

  .order-list {
    margin-top: 18px;
    width: 100%;
    background: #ffffff;
    box-shadow: 0px 2px 4px 0px rgba(184, 191, 198, 0.2);
    border-radius: 8px;
    padding: 14px 12px;

    .title {
      font-size: 14px;
      font-family: PingFangSC-Medium, PingFang SC;
      font-weight: 500;
      color: #333333;
      line-height: 20px;
      text-align: left;
      padding-bottom: 5px;
    }

    .list-info {
      height: 300px;
      overflow: auto;

      .user-info {
        padding: 14px 0;
        border-bottom: 1px solid #e6e6e6;
        display: flex;
        align-items: center;

        .head-img {
          position: relative;
          width: 72px;
          .new {
            position: absolute;
            top: -2px;
            right: -2px;
            width: 21px;
            height: 21px;
            line-height: 21px;
            text-align: center;
            font-size: 12px;
            font-family: PingFangSC-Regular, PingFang SC;
            font-weight: 400;
            color: #ffffff;
            line-height: 17px;
            background: #ff6945;
            border-radius: 50%;
          }

          img {
            width: 100%;
            border-radius: 50%;
          }
        }

        .user-information {
          margin-left: 16px;
          text-align: left;
          font-size: 14px;
          font-family: SourceHanSansCN-Regular, SourceHanSansCN;
          font-weight: 400;
          color: #999999;
          line-height: 21px;

          .name {
            span {
              color: #333333;
            }
          }
        }

        .product-list {
          width: 322px;
          margin-left: 22px;
          white-space: nowrap;
          overflow-x: scroll;
          overflow-y: hidden;
          padding-left: 8px;

          .product-image {
            display: inline-block;
            margin-left: 16px;
            width: 72px;
            img {
              border-radius: 8px;
              width: 100%;
              display: block;
            }
          }
        }
        .status {
          margin-left: 56px;
          font-size: 16px;
          font-family: SourceHanSansCN-Regular, SourceHanSansCN;
          font-weight: 400;
          color: #fc3019;
          line-height: 24px;
        }
      }
    }
    .empty {
      height: 300px;
      line-height: 300px;
      width: 100%;
      font-size: 28px;
      color: slategrey;
    }
  }
}
</style>