tf-business/pages_module/components/waterContainer/index.vue

<template>
  <view class="water-container">
    <view class="water-date" @click="showDatePicker">
      <text>{{ defaultTime }}</text>
      <tui-icon name="turningdown" color="#C9CDD4" :size="24"></tui-icon>
    </view>
    <view class="water-all">
      <view class="all-item">
        <text>收入</text>
        <text>{{ todayWater[0].income || "0" }}</text>
      </view>
      <view class="all-item">
        <text>支出</text>
        <text>{{ todayWater[0].expenditure || "0" }}</text>
      </view>
    </view>
    <view class="water-order">
      <view class="order-title">订单明细</view>
      <template v-if="dayOrderList.length > 0">
        <view class="order-list">
          <view
            class="order-item"
            v-for="(item, index) in dayOrderList"
            :key="index"
          >
            <view class="item-text">
              <text>订单单号</text>
              <text>{{ item.orderFormid }}</text>
            </view>
            <view class="item-text">
              <text>订单金额</text>
              <text>{{ item.money }}</text>
            </view>
            <view class="item-text">
              <text>收支类型</text>
              <text>{{ item.incomeType }}</text>
            </view>
            <view class="item-text">
              <text>流水类型</text>
              <text>{{ item.waterType }}</text>
            </view>
            <view class="item-text">
              <text>到账时间</text>
              <text>{{ item.time }}</text>
            </view>
          </view>
        </view>
      </template>
      <template v-else>
        <view class="no-data">
          <image src="@/static/image/order/empty.png" />
          <text>暂无数据</text>
        </view>
      </template>
    </view>
    <tui-datetime
      ref="dateTime"
      :setDateTime="defaultTime"
      :type="defaultType"
      color="#EA5C1E"
      :radius="true"
      @confirm="dateConfirm"
    ></tui-datetime>
  </view>
</template>

<script>
import { getDayDetail } from "@/config/index";
import { getNowDate } from "@/utils/index";
export default {
  props: {
    type: {
      type: String,
      default: "",
    },
    financialData: {
      type: Object,
      default: () => {},
    },
  },
  created() {
    if (this.type == 1) {
      this.defaultType = 2;
      this.defaultTime = getNowDate(3);
    } else if (this.type == 2) {
      this.defaultType = 3;
      this.defaultTime = getNowDate(2);
    }
  },
  computed: {
    //  过滤当日流水
    todayWater() {
      //  判断当前有没有数据
      if (Object.keys(this.financialData).length <= 0) return "";
      let list = this.financialData.finances.filter((item) => {
        return item.time == this.defaultTime;
      });
      if (list.length > 0) {
        //  给获取当日订单数据参数赋值
        this.queryOrder.time = this.defaultTime;
        //  请求当日订单数据
        this.getDayOrder();
      } else {
        //  重置订单数据
        this.dayOrderList = [];
      }
      return list;
    },
  },
  data() {
    return {
      //  请求总流水的参数
      waterAll: {
        condition: "1",
        time: "",
      },
      //    默认时间
      defaultTime: "",
      //   控制年月
      defaultType: 2,
      //  请求 日 订单数据的参数
      queryOrder: {
        income: "",
        page: 1,
        pageSize: 10,
        state: "",
        time: "",
      },
      //  订单数据列表
      dayOrderList: [],
      //  订单总数
      dayOrderTotal: 0,
    };
  },
  methods: {
    //  获取当日订单数据
    async getDayOrder() {
      let res = await getDayDetail(this.queryOrder);
      this.dayOrderList = res.data.list;
      this.dayOrderTotal = res.data.total;
    },
    //  控制日期选择显示
    showDatePicker() {
      this.$refs.dateTime && this.$refs.dateTime.show();
    },
    //  日期确定点击
    dateConfirm(date) {
      // 对日期重新赋值
      this.defaultTime = date.result;
      
    },
  },
  watch: {
    type(val) {
      if (val == 1) {
        this.defaultType = 2;
        this.defaultTime = getNowDate(3);
      } else if (val == 2) {
        this.defaultType = 3;
        this.defaultTime = getNowDate(2);
      }
    },
  },
};
</script>
<style lang="scss" scoped>
.water-container {
  padding: 0 32rpx;
  box-sizing: border-box;
  .water-date {
    margin: 32rpx 0;
    font-size: 28rpx;
    color: #3d3d3d;
    font-weight: 400;
    @include flex(flex-start, null, 13rpx);
  }
  .water-all {
    @include flex(space-between, null);
    .all-item {
      width: 304rpx;
      height: 104rpx;
      border-radius: 8rpx;
      background-color: #fff3ee;
      padding: 16rpx;
      box-sizing: border-box;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      text {
        &:nth-of-type(1) {
          font-size: 24rpx;
          color: rgba(77, 51, 39, 0.41);
          font-weight: 500;
        }
        &:nth-of-type(2) {
          font-size: 28rpx;
          color: #ea5c1e;
          font-weight: 900;
        }
      }
    }
  }
  .water-order {
    width: 100%;
    margin-top: 32rpx;
    .order-title {
      position: relative;
      color: rgba(0, 0, 0, 0.9);
      font-size: 28rpx;
      font-weight: 600;
      &::after {
        content: "";
        position: absolute;
        left: -32rpx;
        top: 50%;
        transform: translateY(-50%);
        width: 8rpx;
        height: 24rpx;
        background-color: #ea5c1e;
      }
    }
    .order-list {
      width: 100%;
      margin-top: 32rpx;
      .order-item {
        margin-top: 16rpx;
        padding: 0 16rpx 16rpx;
        box-sizing: border-box;
        width: 100%;
        background-color: #f5f4f3;
        border-radius: 16rpx;
        .item-text {
          width: 100%;
          @include flex(flex-start);
          height: 44rpx;
          line-height: 44rpx;
          padding-top: 16rpx;
          text {
            font-size: 28rpx;
            &:nth-of-type(1) {
              width: 208rpx;
              color: rgba(0, 0, 0, 0.4);
            }
            &:nth-of-type(2) {
              color: #000000;
              overflow: hidden;
              text-overflow: ellipsis;
              white-space: nowrap;
            }
          }
        }
      }
    }
    .no-data {
      height: 736rpx;
      @include flex(center, column, 32rpx);
      image {
        width: 320rpx;
        height: 320rpx;
        display: block;
      }
      text {
        color: rgba(0, 0, 0, 0.4);
        font-size: 28rpx;
        font-weight: 600;
      }
    }
  }
}
</style>