web-zk-h5/components/bonus/ckkj.vue

<template>
  <view class="main">
    <view v-if="userInfo.pkCountry != 1" class="top">
      <view class="search-bottom">
        <view class="time-text">{{ '查询时间' }}</view>
        <view class="time1">
          <picker :value="query.startDate" mode="date" @change="bindDateChange">
            <view v-if="query.startDate != ''" class="uni-input">{{
              query.startDate
            }}</view>
            <view v-else class="uni-input">{{ '开始日期' }}</view>
          </picker>
        </view>
        <view class="text_s">{{ '至' }}</view>
        <view class="time1">
          <picker :value="query.endDate" mode="date" @change="bindDateChange1">
            <view v-if="query.endDate != ''" class="uni-input">{{
              query.endDate
            }}</view>
            <view v-else class="uni-input">{{ '结束日期' }}</view>
          </picker>
        </view>
        <view class="search-icons" @click="submit">
          <image
            class="search-icon-s"
            src="../../static/images/search.png"
          ></image>
        </view>
      </view>
    </view>
    <view class="search-content">
      <view class="search-list">
        <view v-for="item in dataList" class="search-view">
          <view class="flex_s">
            <view class="data-left">
              {{ '奖金日期' }}
            </view>
            <view class="data-right">
              {{ item.settleDate }}
            </view>
          </view>
          <view class="flex_s">
            <view class="data-left"> {{ '创客直推收益' }}(¥) </view>
            <view class="data-right style1" @click="getDetails(item, 20)">
              {{ item.makerDirectIncome | toThousandthAndKeepDecimal }}
            </view>
          </view>
          <view class="flex_s">
            <view class="data-left"> {{ '创客共享收益' }}(¥) </view>
            <view class="data-right style1" @click="getDetails(item, 21)">
              {{ item.makerShareIncome | toThousandthAndKeepDecimal }}
            </view>
          </view>
          <view class="flex_s">
            <view class="data-left"> {{ '平台服务费' }}(¥) </view>
            <view class="data-right">
              {{ item.serviceSpend | toThousandthAndKeepDecimal }}
            </view>
          </view>
          <view class="flex_s">
            <view class="data-left"> {{ '实发小计' }}(¥) </view>
            <view class="data-right">
              {{ item.makerRealSubtotal | toThousandthAndKeepDecimal }}
            </view>
          </view>
          <!-- <view class="border_s">
            <view class="button" v-if="checkRule == true" @click="urlTap">
              {{ '查看详情' }}
            </view>
          </view> -->
          <view style="clear: both"></view>
          <view style="height: 20rpx; background-color: #fff"></view>
        </view>
      </view>
    </view>
    <u-popup
      :show="show"
      mode="center"
      closeOnClickOverlay
      closeable
      round="10"
      @close="close"
    >
      <view class="kuang">
        <view
          v-for="item in tableDetails"
          v-show="tableDetails.length > 0"
          class="kuang_i"
        >
          <view class="kuang_ii">
            <view>来源会员编号</view>
            <view>{{ item.sourceMemberCode }}</view>
          </view>
          <view class="kuang_ii">
            <view>来源会员名称</view>
            <view>{{ item.sourceMemberName }}</view>
          </view>
          <view class="kuang_ii">
            <view>奖金金额</view>
            <view>{{ item.realIncome | toThousandthAndKeepDecimal}}</view>
          </view>
        </view>
        <view v-show="tableDetails.length == 0" class="kong"> 暂无数据 </view>
      </view>
    </u-popup>
  </view>
</template>

<script>
import * as api from "@/config/login.js";
import { setToken } from "@/config/auth.js";
import store from "@/store";
export default {
  data() {
    return {
      tableDetails: [],
      show: false,
      getBonusTypeList: [],
      index: null,
      dataList: [],
      userInfo: [],
      query: {
        startDate: "",
        endDate: "",
        sourceMemberCode: "",
        sourceMemberName: "",
        pkBonusItems: "",
      },
      page: {
        pageNum: 1,
        pageSize: 50,
      },
    };
  },
  props: ["num", "checkRule"],
  onLoad() {},
  created() {
    // this.getType()
    this.userInfo = uni.getStorageSync("User");
    this.getDataList();
  },
  methods: {
    getDetails(row, bonusValue) {
      api
        .markBonus({
          startDate: row.settleDate,
          bonusValue: bonusValue,
        })
        .then((res) => {
          console.log(
            "%c [ res ]-151",
            "font-size:13px; background:#fb0ce4; color:#ff50ff;",
            res
          );
          this.tableDetails = res.rows;
          this.show = true;
        });
    },
    close() {
      this.show = false;
    },
    urlTap() {
      uni.navigateTo({ url: "/pages/bonusSource/index" });
    },
    getInfo() {
      api
        .getInfo()
        .then((res) => {
          if (res) {
            this.userInfo = res.data;
          }
        })
        .catch((error) => {
          reject(error);
        });
    },
    submit() {
      this.getDataList();
    },
    getType() {
      api
        .getBonusType()
        .then((res) => {
          if (res) {
            this.getBonusTypeList = res.rows;
          }
        })
        .catch((error) => {
          reject(error);
        });
    },
    bindPickerChange(e) {
      this.index = e.detail.value;
    },
    bindDateChange(e) {
      this.query.startDate = e.detail.value;
    },
    bindDateChange1(e) {
      this.query.endDate = e.detail.value;
    },
    getDataList(num) {
      api
        .queryBonusMaker(
          this.query,
          `?pageNum=${num || 1}&pageSize=${this.page.pageSize}`
        )
        .then((res) => {
          if (res) {
            this.dataList.push(...res.rows);
          }
        })
        .catch((error) => {
          reject(error);
        });
    },
    submit() {},
  },
};
</script>
<style>
.border_s {
  border-bottom: 1rpx solid #eee;
  height: 10rpx;
}
.button {
  padding: 0 30rpx;
  /* width: 150rpx; */
  height: 52rpx;
  line-height: 52rpx;
  color: #fff;
  font-size: 28rpx;
  text-align: center;
  background: #005BAC;
  margin: 30rpx 0 0 0;
  float: right;
  border-radius: 24rpx;
}
.type {
  color: #005BAC !important;
}
.flex_s {
  width: 100%;
  display: flex;
  justify-content: space-between;
  padding-bottom: 15rpx;
}
.data-left {
  color: #999;
  font-size: 26rpx;
}
.data-right {
  color: #333;
  font-size: 26rpx;
}
.search-view {
  /* display: flex; */
  /* justify-content: space-between; */
  padding: 30rpx 20rpx 0 20rpx;
  border-bottom: 20rpx solid #eee;
  /* border-bottom: 1px solid #eee; */
  margin: 0;
}
.search-list {
  margin-bottom: 25rpx;
  background-color: #fff;
}
.search-content {
  margin-top: 25rpx;
}
.text_s {
  color: #333;
  font-size: 26rpx;
}
.search-icon-s {
  width: 22rpx;
  height: 22rpx;
}
.search-icons {
  width: 47rpx;
  height: 47rpx;
  background: #005BAC;
  border-radius: 50%;
  margin-left: 20rpx;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 30rpx 20rpx 0 0;
}
.time1 {
  width: 158rpx;
  height: 75rpx;
  border-bottom: 1rpx solid #eee;
  margin: 0 50rpx 30rpx 50rpx;
  color: #999;
  text-align: center;
  font-size: 24rpx;
  /* margin-bottom: 30rpx; */
}
.time-text {
  color: #999;
  font-size: 26rpx;
}
.search-bottom {
  height: 100rpx;
  line-height: 100rpx;
  display: flex;
  margin-left: 20rpx;
}
.texts {
  color: #333;
  font-size: 26rpx;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  /* width:200rpx; */
  text-align: right;
}
.select-text {
  display: flex;
  margin-right: 20rpx;
  font-size: 26rpx;
  color: #333;
  position: relative;
}
.selIcon {
  width: 20rpx;
  height: 20rpx;
  margin-top: 10rpx;
  margin-left: 5rpx;
}
.text-s {
  font-size: 26rpx;
  color: #999;
  margin-right: 10rpx;
}
.place {
  font-size: 26rpx;
  color: #999;
}
.border-colors {
  border: none;
  font-size: 26rpx;
  color: #333;
  margin-left: 30rpx;
}
page {
  background-color: #f2f2f2;
}
.search-icon {
  width: 25rpx;
  height: 25rpx;
  position: absolute;
  left: 30rpx;
  top: 12rpx;
}
.search-bg {
}
.top {
  /* height: 200rpx; */
  background-color: #fff;
  padding: 20rpx 0 20rpx 0;
}
.search-tops {
  display: flex;
  justify-content: space-between;
  height: 65rpx;
  line-height: 65rpx;
  padding-bottom: 40rpx;
  border-bottom: 1px solid #eee;
}
.search-bg {
  width: 432rpx;
  height: 35rpx;
  background: #f5f6f8;
  border-radius: 33rpx;
  display: flex;
  position: relative;
  padding: 20rpx 50rpx;
  margin-left: 20rpx;
}
.style1 {
  cursor: pointer;
  text-decoration: underline;
  color: #d61820;
}
.kuang {
  height: 800rpx;
  background: #eee;
  padding: 60rpx 20rpx;
  overflow-y: auto;
}
.kuang_i {
  padding: 20rpx 20rpx;
  border-radius: 8px;
  background: #fff;
  font-size: 14px;
  color: #999;
  margin-bottom: 20rpx;
}
.kuang_ii {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
::v-deep .u-popup__content {
  width: 80%;
}
.kong {
  text-align: center;
  line-height: 250px;
}
</style>