dvcp_v2_wxcp_app/library/project/pidu/AppPointsChange/myOrder.vue

<template>
  <div class="myOrder">

    <div class="tab-select">
      <div class="item" :class="tabIndex == index? 'active': ''" v-for="(item,index) in tabList" :key="index" @click="toCheck(index)">{{ item }}<span></span></div>
    </div>
    <div class="card-List" v-if="orderList.length">
      <div class="item" v-for="(item,index) in orderList" :key="index">
        <!--  @click="$linkTo(`./detail?id=${item.id}`)" -->
        <div>  
          <div class="title">
            <div>{{ item.createTime }}</div>
            <div><span class="status_all" :class="item.orderStatus==0?'status0':item.orderStatus==1?'status1':'status2'">{{ $dict.getLabel('merchandiseOrderStatus', item.orderStatus) }}</span></div>
          </div>
          <div class="list">
            <div class="list-item">
              <div class="picture">
                <img :src="item.imageUrl" alt="">
              </div>
              <div class="info">
                <div class="name">{{ item.merchandiseName }}</div>
                <div class="info-num">
                  <div class="num">数量：<span>{{ item.merchandiseNumber }}</span></div>
                  <div class="integral">共<span>{{ item.merchandiseNumber * item.merchandiseIntegral}}</span>积分</div>
                </div>
              </div>
            </div>
          </div>
          <div class="remark" v-if="item.remark.length">备注：{{ item.remark }}</div>
          <div class="btn" v-if="item.orderStatus==0">
            <div class="cancel" @click="cancelBtn(item.id)">取消订单</div>
            <div class="confirm">核销码：<span>{{ item.auditCode }}</span></div>
          </div>
        </div>
      </div>
    </div>
    <AiEmpty description="暂无数据" class="emptyWrap" v-else></AiEmpty>
  </div>
</template>

<script>
export default {
  name: "myOrder",
  data() {
    return {
      tabIndex: 0,
      tabList: ['全部','待收货','已完成','已取消'],
      orderList: [],
      current: 1,
    }
  },
  onLoad() {
    document.title = '我的订单'
    this.$dict.load('merchandiseOrderStatus').then(() => {
      this.getOrderList()
    })
    
  },
  methods: {
    toCheck(index) {
      this.orderList = []
      this.current = 1
      this.tabIndex = index
      this.getOrderList()
    },
    getOrderList() {
      this.$http.post('/app/appintegralmerchandiseorder/listByGirdMember',null,{
        params: {
          current: this.current,
          orderStatus: this.tabIndex == 0 ? '' : this.tabIndex == 1? 0 : this.tabIndex ==2? 1:2
        }
      }).then(res=>{
        if(res?.data) {
          this.orderList = this.current == 1? res.data.records : [...this.orderList,...res.data.records]
        }
      })
    },
    cancelBtn(id) {
      this.$confirm('确定要取消该订单吗？\n 取消订单后，积分将退回至剩余积分').then(() => {
        this.$http.post('/app/appintegralmerchandiseorder/cancelOrder',null,{
          params: {
            id: id
          }
        }).then(res=>{
          if(res.code==0) {
            this.$u.toast('取消成功')
            setTimeout(() => {
              this.getOrderList()
            },400)
          }
        })
      })
    },
  },
  onReachBottom() {
    this.current ++
    this.getOrderList() 
  }
}
</script>

<style scoped lang="scss">
.myOrder {
  .tab-select {
    width: 100%;
    height: 96px;
    line-height: 96px;
    position: fixed;
    top: 0;
    left: 0;
    background: #3975C6;
    display: flex;
    z-index: 999;
    .item {
      flex: 1;
      text-align: center;
      font-size: 30px;
      color: #FFFFFF;
    }
    .active {
      font-size: 32px;
      font-weight: 600;
      position: relative;
      span {
        width: 50px;
        height: 6px;
        background: #FFFFFF;
        position: absolute;
        left: 50%;
        bottom: 14px;
        margin-left: -24px;
      }
    }
  }
  .card-List {
    font-size: 28px;
    box-sizing: border-box;
    padding: 128px 32px 32px 32px;
    box-sizing: border-box;
    .item {
      width: 100%;
      background: #FFFFFF;
      box-shadow: 0px 0px 8px 0px rgba(0, 0, 0, 0.04);
      border-radius: 16px;
      margin-bottom: 16px;
      .title {
        display: flex;
        justify-content: space-between;
        height: 104px;
        line-height: 104px;
        padding: 0 32px;
        box-sizing: border-box;
        border-bottom: 1px solid #EEEEEE;

        .status_all {
          padding: 3px 10px;
          border-radius: 12px;
        }

        .status0 {
          background: #FFEDE2;
          color: #FF883C;
        }

        .status1 {
          background: #E2F6E1;
          color: #42D784;
        }

        .status2 {
          background: #EEEEEE;
          color: #999999;
        }
      }
      .list {
        padding: 0 32px;
        box-sizing: border-box;
        border-radius: 16px;
        height: 100%;
        .list-item {
          display: flex;
          padding: 32px 0;
          box-sizing: border-box;
          
          .picture {
            width: 176px;
            height: 176px;
            margin-right: 16px;
            img {
              width: 100%;
              height: 100%;
            }
          }
          .info {
            width: calc(100% - 192px);
            .name {
              overflow: hidden; 
              text-overflow: ellipsis;
              display: -webkit-box;
              -webkit-box-orient: vertical;
              -webkit-line-clamp: 2;
            }
            .info-num {
              margin-top: 24px;
              display: flex;
              justify-content: space-between;
              align-items: center;
              .num {
                color: #999999;
              }
              .integral {
                color: #FF6900;
                span {
                  font-size: 44px;
                  font-weight: 600;
                }
              }
            }
          }
        }
      }

      .remark {
        padding: 16px 32px;
        box-sizing: border-box;
        border-top: 1px solid #EEEEEE;
        
      }
      .btn {
        height: 100px;
        display: flex;
        justify-content: space-between;
        padding: 0 20px;
        box-sizing: border-box;
        border-top: 1px solid #EEEEEE;
        div {
          margin-top: 14px;
          width: 176px;
          height: 64px;
          line-height: 64px;
          text-align: center;
        }
        div:first-child {
          margin-right: 32px;
          color: #687DA6;
        }
        div:last-child {
          color: #999999;
          width: calc(100% - 200px);
          text-align: right;
        }
      }
    }
  }

  ::v-deep .emptyWrap .emptyImg {
    margin-top: 100px;
  }
}
</style>