hospital-accompaniment-wechat/pages/mine/detail.vue

<template>
  <view class="container">
    <u-navbar title="明细" leftIconColor="#ffffff" titleStyle="color:#fff" :autoBack="true" placeholder></u-navbar>
    <view class="head">
      <view class="head_money">
        <view class="head_money_lab">可提现金额</view>
        <view class="head_money_val">￥ <text>{{promotionInfo.moneyAble.split('.')[0]}}</text>.{{promotionInfo.moneyAble.split('.')[1]}} </view>
      </view>
    </view>
    <view class="box">
      <view>
        <view class="tabs" v-if="type==0">
          <view class="tabs_l active" style="background-image:url('https://guess-shop.oss-cn-beijing.aliyuncs.com/static/online/img3.png')">提现记录</view>
          <view class="tabs_r" @click="switchType(1)">获得分佣明细</view>
        </view>
        <view class="tabs1" v-if="type==1">
          <view class="tabs_l " @click="switchType(0)">提现记录</view>
          <view class="tabs_r r active" style="background-image:url('https://guess-shop.oss-cn-beijing.aliyuncs.com/static/online/img8.png')">获得分佣明细</view>
        </view>
        <view class="list" v-if="type==0">
          <view class="list_item" v-for="(v,i) in list" :key="i">
            <view class="list_item_l">{{v.taskStatus==1?'提现成功':v.taskStatus==2?'提现失败':'等待提现'}}</view>
            <view class="list_item_c">{{v.createTime.substr(0,10)}}</view>
            <view class="list_item_r">￥{{v.amount}}</view>
          </view>
          <empty marginTop="50" v-if="(!list||list.length<=0)&&status!='loading'"></empty>
          <u-loadmore v-else :status="status" />
        </view>
        <view class="list1" v-if="type==1">
          <view class="list1_item" v-for="(v,i) in list" :key="i">
            <view class="list1_item_l">
              <image v-if="v.headPhoto" :src="v.headPhoto" mode="" />
              <image v-else src="@/static/default-head-photo.png" mode="" />
              <view>
                <view class="list1_item_l_name">{{v.orderUserName}}</view>
                <view class="list1_item_l_time">{{v.createTime?v.createTime.substr(0,10):''}}</view>
              </view>
            </view>
            <view class="list1_item_r">
              <view class="list1_item_r_t">￥{{v.actualAmount}}</view>
              <view class="list1_item_r_b">{{v.distributionStatus==1?'已入账':'待入账'}}</view>
            </view>
          </view>
          <empty marginTop="50" v-if="(!list||list.length<=0)&&status!='loading'"></empty>
          <u-loadmore v-else :status="status" />
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import { promotionInfo, withdrawalPage, orderPage } from "@/api/user.js"
export default {
  data () {
    return {
      type: 0,
      list: [],
      status: 'loadmore',//加载前值为loadmore，加载中为loading，没有数据为nomore
      params: {
        pageNum: 1,
        pageSize: 10,
        distributionStatus: 1
      },
      promotionInfo: {
        moneyAble: 0.00
      }
    }
  },
  onLoad () {
    this.getList();
    this.getPromotionInfo();
  },
  onPullDownRefresh () {
    this.params.pageNum = 1;
    this.getList()
  },
  onReachBottom () {
    if (this.status == "loadmore") {
      this.params.pageNum++;
      this.getList()
    }
  },
  methods: {
    getList () {
      let apiFun = withdrawalPage
      if (this.type == 1) apiFun = orderPage
      this.status = 'loading';
      apiFun(this.params).then(res => {
        if (this.params.pageNum == 1) {
          this.list = res.rows
        } else {
          this.list.push(...res.rows);
        }
        if (this.list.length < res.total) {
          this.status = 'loadmore';
        } else {
          this.status = 'nomore';
        }
      }).finally(()=>{
		  uni.stopPullDownRefresh();
	  })
    },
    switchType (index) {
      this.type = index;
      this.params.pageNum = 1;
      this.getList()
    },
    getPromotionInfo () {
      promotionInfo().then(res => {
        this.promotionInfo = res.data
      })
    },
  },
}
</script>

<style lang='scss' scoped>
::v-deep .u-navbar__content,
::v-deep .u-status-bar {
  background-color: #c90700 !important;
}
.container {
  background: #c90700;
  .head {
    padding: 0 30rpx;
    .head_money {
      background: linear-gradient(180deg, #ff6056, #fe8e66);
      border-radius: 40rpx 40rpx 0rpx 0rpx;
      background-size: 100% 490rpx;
      padding: 40rpx 0 50rpx;
      .head_money_lab {
        font-size: 28rpx;
        color: #ffffff;
        text-align: center;
      }
      .head_money_val {
        font-size: 30rpx;
        color: #ffffff;
        font-family: FZCuYuan-M03;
        text-align: center;
        margin-top: 15rpx;
        > text {
          font-size: 60rpx;
          font-family: FZCuYuan-M03;
        }
      }
    }
  }
  .box {
    background: #f6f6f6;
    border-radius: 40rpx 40rpx 0rpx 0rpx;
    overflow: hidden;
    > view {
      background: #ffffff;
      min-height: 70vh;
      .tabs {
        display: flex;
        background: #fff5f3;
        > view {
          height: 85rpx;
          line-height: 85rpx;
          text-align: center;
          font-size: 30rpx;
          color: #333333;
        }
        .tabs_l {
          width: 445rpx;
          background-size: 100% 99rpx;
          position: relative;
          z-index: 10;
          background-position-y: -7rpx;
          padding-right: 45rpx;
          box-sizing: border-box;
        }
        .tabs_r {
          flex-grow: 1;
          background-size: 100% 85rpx;
          position: relative;
          z-index: 9;
          left: -20rpx;
          text-align: left;
          padding-left: 40rpx;
        }
        > .active {
          font-size: 30rpx;
          color: #ff0000;
          font-family: FZCuYuan-M03;
        }
      }
      .tabs1 {
        display: flex;
        // background: #ffffff;
        background: #fff5f3;
        > view {
          height: 85rpx;
          line-height: 85rpx;
          text-align: center;
          font-size: 30rpx;
          color: #333333;
        }
        .tabs_r {
          width: 445rpx;
          background-size: 100% 99rpx;
          position: relative;
          z-index: 10;
          background-position-y: -7rpx;
          padding-left: 45rpx;
          box-sizing: border-box;
        }
        .tabs_l {
          flex-grow: 1;
          background-size: 100% 85rpx;
          position: relative;
          z-index: 9;
          text-align: right;
          padding-right: 40rpx;
        }
        > .active {
          font-size: 30rpx;
          color: #ff0000;
          font-family: FZCuYuan-M03;
        }
        .r {
          background-position-y: 0rpx;
        }
      }
      .list {
        padding: 40rpx 0;
        .list_item {
          display: flex;
          justify-content: space-between;
          padding: 0 50rpx;
          margin-bottom: 36rpx;
          .list_item_l {
            font-size: 28rpx;
            color: #1a1a1a;
          }
          .list_item_c {
            font-size: 24rpx;
            color: #808080;
          }
          .list_item_r {
            font-size: 32rpx;
            color: #fb0b03;
            font-family: FZCuYuan-M03;
          }
        }
      }
      .list1 {
        padding: 40rpx 0;
        .list1_item {
          display: flex;
          justify-content: space-between;
          padding: 0 50rpx;
          margin-bottom: 30rpx;
          .list1_item_l {
            display: flex;
            align-items: center;
            image {
              width: 100rpx;
              height: 100rpx;
              border-radius: 50%;
            }
            view {
              font-size: 28rpx;
              color: #1a1a1a;
              margin-left: 26rpx;
            }
            .list1_item_l_time {
              font-size: 24rpx;
              margin-top: 10rpx;
              color: #808080;
            }
          }
          .list1_item_r {
            .list1_item_r_t {
              font-size: 32rpx;
              color: #fb0b03;
              font-family: FZCuYuan-M03;
              text-align: center;
            }
            .list1_item_r_b {
              font-size: 26rpx;
              color: #808080;
              text-align: center;
            }
          }
        }
      }
    }
  }
}
</style>