web-base-h5/pages/bonusSource/index.vue

<template>
  <view class="main">
    <view v-if="userInfo.pkCountry != 1" class="top">
      <view class="search-tops">
        <view class="search-bg">
          <view class="search-icon">
            <image
              class="search-icon"
              src="../../static/images/serach_999.png"
            ></image>
          </view>
          <u-input
            v-model="query.sourceMemberName"
            class="border-colors"
            placeholder="请输入来源编号或姓名查询"
            placeholder-class="place"
          ></u-input>
        </view>

        <picker
          :range="getBonusTypeList"
          :value="index"
          range-key="bonusName"
          @change="bindPickerChange"
        >
          <view v-if="index == null" class="select-text">
            <view class="text-s">{{ '收益类型' }}</view>
            <view class="">
              <image
                class="selIcon"
                src="../../static/images/select-icon.png"
              ></image>
            </view>
          </view>
          <view v-else class="select-text">
            <view class="texts">{{ getBonusTypeList[index].bonusName }}</view>
            <view class="">
              <image
                class="selIcon"
                src="../../static/images/select-icon.png"
              ></image>
            </view>
          </view>
        </picker>
      </view>
      <view v-if="userInfo.pkCountry != 1" 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">
              {{ item.sourceMemberCode }}
            </view>
          </view>
          <view class="flex_s">
            <view class="data-left">
              {{ '来源姓名' }}
            </view>
            <view class="data-right">
              {{ item.sourceMemberName }}
            </view>
          </view>
          <view class="flex_s">
            <view class="data-left"> {{ '注册金额' }}(￥) </view>
            <view class="data-right">
              {{ item.orderAmount }}
            </view>
          </view>
          <view class="flex_s">
            <view class="data-left">
              {{ '注册业绩' }}
            </view>
            <view class="data-right">
              {{ item.orderAchieve }}
            </view>
          </view>
          <view class="flex_s">
            <view class="data-left">
              {{ '收益类型' }}
            </view>
            <view class="data-right type">
              {{ item.bonusName }}
            </view>
          </view>
          <view class="flex_s">
            <view class="data-left">
              {{ '轮次' }}
            </view>
            <view class="data-right">
              {{ item.round }}
            </view>
          </view>
          <view class="flex_s">
            <view class="data-left">
              {{ '次数' }}
            </view>
            <view class="data-right">
              {{ item.second }}
            </view>
          </view>
          <view class="flex_s">
            <view class="data-left">
              {{ '预估收益' }}
            </view>
            <view class="data-right">
              {{ item.realIncome }}
            </view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import * as api from '@/config/login.js'
import { setToken } from '@/config/auth.js'
import store from '@/store'
export default {
  data() {
    return {
      getBonusTypeList: [],
      index: null,
      dataList: [],
      userInfo: [],
      query: {
        startDate: '',
        endDate: '',
        sourceMemberCode: '',
        sourceMemberName: '',
        pkBonusItems: '',
      },
      page: {
        pageNum: 1,
        pageSize: 50,
      },
    }
  },
  onLoad() {
    this.getType()
    this.userInfo = uni.getStorageSync('User')
    this.getDataList()
  },
  methods: {
    getInfo() {
      api
        .getInfo()
        .then(res => {
          if (res) {
            this.userInfo = res.data
          }
        })
        .catch(error => {
          reject(error)
        })
    },
    onReachBottom() {
      if (this.userInfo.pkCountry != 1) {
        setTimeout(() => {
          this.page.pageNum++
          this.getDataList()
        }, 500)
      }
    },
    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() {
      api
        .queryBonusDetail(
          this.query,
          `?pageNum=${this.page.pageNum}&pageSize=${this.page.pageSize}`
        )
        .then(res => {
          if (res) {
            this.dataList.push(...res.rows)
          }
        })
        .catch(error => {
          reject(error)
        })
    },
    submit() {},
  },
}
</script>
<style>
.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;
  border-bottom: 20rpx solid #eee;
}
.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;
  margin-left: 20rpx;
  display: flex;
}
.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;
  image {
  }
}
.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;
}
</style>