390 lines
		
	
	
		
			8.7 KiB
		
	
	
	
		
			Vue
		
	
	
	
			
		
		
	
	
			390 lines
		
	
	
		
			8.7 KiB
		
	
	
	
		
			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>
 |