mall_client/zyhs3_uniapp/pages/licai/mine/recharge/lsjf.vue

<template>
  <view>
    <u-tabs
      class="bg-w"
      :list="list"
      @click="handlerTabsClick"
      lineColor="#4BB22E"
    ></u-tabs>
    <view>
      <mescroll-body
        ref="mescrollRef"
        @init="mescrollInit"
        @down="downCallback"
        @up="upCallback"
      >
        <view class="listBox">
          <view
            v-for="(order, index) in dataList"
            class="listBoxCard"
            @click="handlerDetail(order)"
          >
            <view class="content">
              <view>
                <text
                  >{{
                    tabsIndex == 1 ? "收益人用户编号" : "贡献人用户编号"
                  }}:</text
                >
                <text>{{
                  tabsIndex == 1
                    ? order.beneficiaryUserName
                    : order.contributoryUserName
                }}</text>
              </view>
              <view v-if="tabsIndex == 1">
                <text>贡献人变更前资产金额:</text>
                <text>{{ order.contributoryBeforeMoney }}</text>
              </view>
              <view v-if="tabsIndex == 2">
                <text>收益人变更前资产金额:</text>
                <text>{{ order.beneficiaryBeforeMoney }}</text>
              </view>
              <view>
                <text
                  >{{
                    tabsIndex == 1
                      ? "贡献人变更后资产金额"
                      : "收益人变更后资产金额"
                  }}:</text
                >
                <text>{{
                  tabsIndex == 1
                    ? order.contributoryAfterMoney
                    : order.beneficiaryAfterMoney
                }}</text>
              </view>
              <view>
                <text
                  >{{ tabsIndex == 1 ? "资产变更金额" : "资产变更金额" }}:</text
                >
                <text>{{ order.changeMoney }}</text>
              </view>
              <view>
                <text>{{ tabsIndex == 1 ? "变更原因" : "变更原因" }}:</text>
                <text>{{ order.changeReason }}</text>
              </view>
              <view>
                <text>{{ tabsIndex == 1 ? "交易单号" : "交易单号" }}:</text>
                <text>{{ order.tranNo }}</text>
              </view>
              <view>
                <text>创建时间:</text>
                <text>{{ order.createTime }}</text>
              </view>
            </view>
            <view class="flex1">
              <button
                class="button"
                style="
                  margin-top: 20upx;
                  background-color: #3c9cff;
                  color: #fff;
                "
              >
                详情
              </button>
            </view>
          </view>
        </view>
      </mescroll-body>
      <u-modal
        :show="show"
        title="详情"
        :closeOnClickOverlay="true"
        @confirm="show = false"
        @cancel="show = false"
        @close="show = false"
      >
        <view class="listBoxCard" style="width: 100%">
          <view class="content">
            <view class="flex4">
              <text>用户:</text>
              <text>{{ orderDetail.investmentMemberId }}</text>
            </view>
            <view class="flex4">
              <text>类型:</text>
              <text>{{ orderDetail.investmentTypeName }}</text>
            </view>
            <view class="flex4">
              <text>购买数量:</text>
              <text>{{ orderDetail.investmentCount }}</text>
            </view>
            <view class="flex4">
              <text>开始月数:</text>
              <text>{{ orderDetail.investmentEarningsMonths }}</text>
            </view>
            <view class="flex4">
              <text>购买现金支付金额:</text>
              <text>{{ orderDetail.investmentMoneyPay }}</text>
            </view>
          <!--  <view class="flex4">
              <text>绿色积分支付数量:</text>
              <text>{{ orderDetail.investmentLsjfPay }}</text>
            </view>
            <view class="flex4">
              <text>打赏比例:</text>
              <text>{{ orderDetail.investmentRewardRatio }}</text>
            </view> -->
          </view>
        </view>
      </u-modal>
    </view>
  </view>
</template>

<script>
import { getMyLsjfInfo, getRewardDetail } from "@/api/system/user.js";
import MescrollMixin from "@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js";
export default {
  mixins: [MescrollMixin], // 使用mixin
  data() {
    return {
      dataList: [],
      list: [
        {
          name: "支出记录",
        },
        {
          name: "收入记录",
        },
      ],
      query: {
        type: 1,
      },
      tabsIndex: 1,
      show: false,
      orderDetail: {},
    };
  },
  methods: {
    // 切换tab
    handlerTabsClick(e) {
      this.tabsIndex = this.query.type = e.index + 1;
      this.mescroll.resetUpScroll();
    },
    /*上拉加载的回调*/
    upCallback(page) {
      let params = {};
      params.pageNum = page.num; // 页码, 默认从1开始
      params.pageSize = page.size; // 页长, 默认每页10条
      params.type = this.query.type; // 类型
      getMyLsjfInfo(params).then((res) => {
        let curPageData = res.rows;
        let curPageLen = curPageData.length;
        let totalPage = res.total;
        let totalSize = res.total;
        if (page.num == 1) this.dataList = []; //如果是第一页需手动置空列表
        this.dataList = this.dataList.concat(curPageData); //追加新数据
        this.mescroll.endByPage(curPageLen, totalPage);
      });
    },
    async handlerDetail(item) {
      let res = await getRewardDetail({
        recordCode: item.tranNo,
      });
      if (res.code == 200) {
        this.orderDetail = res.data;
        this.show = true;
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.listBox {
  box-sizing: border-box;
  padding: 20upx;
  padding-top: 0;

  .listBoxCard {
    margin-top: 20upx;
    background-color: #fff;
    border-radius: 10upx;
    box-sizing: border-box;
    padding: 20upx;

    .content {
      view {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 20rpx;
        text:nth-child(1) {
          color: #666;
          font-size: 28rpx;
          min-width: 200rpx;
        }
        text:nth-last-child(1) {
          color: #000;
          font-weight: 500;
          word-break: break-all;
          text-align: right;
        }
      }
    }
  }
}
.button {
  flex: 1;
  margin-left: 10rpx;
}
/deep/.u-tabs__wrapper__nav__item {
  flex: 1;
}
</style>