web-retail-h5/components/bonus/sgsy.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 style="height: 20rpx"></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"> {{ '直推收益' }}({{ isLocaled() }}) </view>
            <view class="data-right">
              {{ item.directIncome | toThousandthAndKeepDecimal }}
            </view>
          </view>
          <view class="flex_s">
            <view class="data-left"> {{ '拓展收益' }}({{ isLocaled() }}) </view>
            <view class="data-right">
              {{ item.expandIncome | toThousandthAndKeepDecimal }}
            </view>
          </view>
          <view class="flex_s">
            <view class="data-left"> {{ '辅导收益' }}({{ isLocaled() }}) </view>
            <view class="data-right">
              {{ item.coachIncome | toThousandthAndKeepDecimal }}
            </view>
          </view>
          <!-- <view class="flex_s">
					<view class="data-left">
						{{'分红收益'}}({{ isLocaled() }})
					</view>
					<view class="data-right">
						{{item.shareIncome| toThousandthAndKeepDecimal}}
					</view>
				</view> -->
          <view class="flex_s" v-if="userInfo.pkCountry == 1">
            <view class="data-left"> {{ '服务补贴' }}({{ isLocaled() }}) </view>
            <view class="data-right">
              {{ item.serviceIncome | toThousandthAndKeepDecimal }}
            </view>
          </view>
          <view v-if="item.repurRangeIncome" class="flex_s">
            <view class="data-left"> 复购级差收益({{ isLocaled() }}) </view>
            <view class="data-right">
              {{ item.repurRangeIncome | toThousandthAndKeepDecimal }}
            </view>
          </view>
          <!-- <view class="flex_s">
						<view class="data-left">
							{{$t('直推级差')}}({{ isLocaled() }})
						</view>
						<view class="data-right">
							{{item.globalPoints| toThousandthAndKeepDecimal}}
						</view>
					</view> -->
          <view class="flex_s" v-if="userInfo.pkCountry == 1">
            <view class="data-left"> {{ '重复消费' }}({{ isLocaled() }}) </view>
            <view class="data-right">
              {{ item.backPoints | toThousandthAndKeepDecimal }}
            </view>
          </view>
          <view class="flex_s" v-if="userInfo.pkCountry == 1">
            <view class="data-left">
              {{ '平台服务费' }}({{ isLocaled() }})
            </view>
            <view class="data-right">
              {{ item.serviceSpend | toThousandthAndKeepDecimal }}
            </view>
          </view>
          <view class="flex_s">
            <view class="data-left"> {{ '实发小计' }}({{ isLocaled() }}) </view>
            <view class="data-right">
              {{ item.purRealSubtotal | 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>
  </view>
</template>

<script>
import * as api from '@/config/login.js'
import { setToken } from '@/config/auth.js'
import store from '@/store'
import { isLocaled } from '@/util/numberToCurrency'

export default {
  data() {
    return {
      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: {
    isLocaled,
    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
        .queryBonusFirst(
          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;

  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>