web-retail-h5/pages/bonusSource/index.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>