422 lines
10 KiB
Vue
422 lines
10 KiB
Vue
<template>
|
|
<view class="content">
|
|
<view class="seach">
|
|
<view class="seach_i" @tap="getDataList">
|
|
<u--input
|
|
@keyup.enter="getDataList"
|
|
prefixIcon="search"
|
|
v-model="queryParams.memberInfo"
|
|
prefixIconStyle="font-size: 22px;color: #909399;height:32px"
|
|
border="none"
|
|
:placeholder="'请输入会员编号或姓名查询'"
|
|
suffixIconStyle="color: #909399"
|
|
></u--input>
|
|
</view>
|
|
<view class="neibox" @click="popShow = true"> 筛选 </view>
|
|
</view>
|
|
<u-popup
|
|
:show="popShow"
|
|
mode="right"
|
|
@close="popShow = false"
|
|
:closeOnClickOverlay="false"
|
|
>
|
|
<view class="rightPopup">
|
|
<view class="popup_top">
|
|
<view
|
|
@click="
|
|
() => {
|
|
getDataList(), (popShow = false)
|
|
}
|
|
"
|
|
>筛选</view
|
|
>
|
|
<view class="top_red" @click="popShow = false">{{ '返回' }}</view>
|
|
</view>
|
|
<view class="typesBox">
|
|
<view class="typeTitle">
|
|
{{ '注册等级' }}
|
|
</view>
|
|
<view class="choiceBox">
|
|
<view
|
|
class="flex_btn"
|
|
@click="clickGrade(item)"
|
|
v-for="(item, index) in gradeList"
|
|
:key="index"
|
|
:class="
|
|
queryParams.pkRegisterGrade == item.pkId ? 'selectbtn' : ''
|
|
"
|
|
>
|
|
{{ item.gradeName }}
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class="popup_bottom">
|
|
<view class="bottom_btn thebtn1" @click="clearAll">清空筛选条件</view>
|
|
<view
|
|
class="bottom_btn thebtn2"
|
|
@click="
|
|
() => {
|
|
getDataList(), (popShow = false)
|
|
}
|
|
"
|
|
>{{ '确定' }}
|
|
</view>
|
|
</view>
|
|
<u-datetime-picker
|
|
:closeOnClickOverlay="true"
|
|
@close="dataShow = false"
|
|
@cancel="dataShow = false"
|
|
@confirm="getDate"
|
|
:show="dataShow"
|
|
v-model="value1"
|
|
mode="date"
|
|
></u-datetime-picker>
|
|
</view>
|
|
</u-popup>
|
|
|
|
<template v-if="dataList.length > 0">
|
|
<view class="thecontent" v-for="(item, index) in dataList" :key="index">
|
|
<view class="line_box">
|
|
<view class="line1">{{ '会员编号' }}</view>
|
|
<view class="line2">{{ item.memberCode }}</view>
|
|
</view>
|
|
<view class="line_box">
|
|
<view class="line1">{{ '会员姓名' }}</view>
|
|
<view class="line2">{{ item.memberName }}</view>
|
|
</view>
|
|
<view class="line_box">
|
|
<view class="line1">推荐编号</view>
|
|
<view class="line2">{{ item.parentCode }}</view>
|
|
</view>
|
|
<view class="line_box">
|
|
<view class="line1">推荐姓名</view>
|
|
<view class="line2">{{ item.parentName }}</view>
|
|
</view>
|
|
<view class="line_box">
|
|
<view class="line1">安置编号</view>
|
|
<view class="line2">{{ item.placeParentCode }}</view>
|
|
</view>
|
|
<view class="line_box">
|
|
<view class="line1">安置姓名</view>
|
|
<view class="line2">{{ item.placeParentName }}</view>
|
|
</view>
|
|
<view class="line_box">
|
|
<view class="line1">安置部门</view>
|
|
<view class="line2">{{ item.placeDeptVal }}</view>
|
|
</view>
|
|
<view class="line_box">
|
|
<view class="line1">{{ '注册金额' }}(￥)</view>
|
|
<view class="line2">{{
|
|
item.regMoney | toThousandthAndKeepDecimal
|
|
}}</view>
|
|
</view>
|
|
<view class="line_box">
|
|
<view class="line1">{{ '注册业绩' }}</view>
|
|
<view class="line2">{{
|
|
item.regPv | toThousandthAndKeepDecimal
|
|
}}</view>
|
|
</view>
|
|
<view class="line_box">
|
|
<view class="line1">{{ '注册等级' }}</view>
|
|
<view class="line2">{{ item.registerGradeVal }}</view>
|
|
</view>
|
|
|
|
<view class="line_box">
|
|
<view class="line1">{{ '创建日期' }}</view>
|
|
<view class="line2">{{ item.creationTime }}</view>
|
|
</view>
|
|
<view class="line_box">
|
|
<view class="line1">支付时间</view>
|
|
<view class="line2">{{ item.payTime }}</view>
|
|
</view>
|
|
</view>
|
|
<u-loadmore :status="loadStatus" />
|
|
</template>
|
|
<template v-else>
|
|
<u-empty mode="list"> </u-empty>
|
|
</template>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import * as mar from '@/config/market.js'
|
|
import { formatMsToDate } from '@/util/index'
|
|
export default {
|
|
data() {
|
|
return {
|
|
queryParams: {
|
|
pageNum: 1,
|
|
pageSize: 50,
|
|
memberInfo: '',
|
|
startCreationTime: '',
|
|
endCreationTime: '',
|
|
pkRegisterGrade: '',
|
|
},
|
|
dataShow: false,
|
|
timeIndex: 0,
|
|
listShow: false,
|
|
value1: '',
|
|
gradeList: [],
|
|
dataList: [],
|
|
popShow: false,
|
|
loadStatus: 'loadmore',
|
|
total: 0,
|
|
}
|
|
},
|
|
onLoad() {
|
|
this.getOthers()
|
|
this.getDataList()
|
|
this.value1 = Number(new Date())
|
|
},
|
|
methods: {
|
|
onReachBottom() {
|
|
if (this.queryParams.pageSize * this.queryParams.pageNum < this.total) {
|
|
this.loadStatus = 'loading'
|
|
this.queryParams.pageSize = this.queryParams.pageSize + 50
|
|
setTimeout(() => {
|
|
this.getDataList()
|
|
this.loadStatus = 'loadmore'
|
|
}, 500)
|
|
} else {
|
|
this.loadStatus = 'nomore'
|
|
}
|
|
},
|
|
clearAll() {
|
|
this.popShow = false
|
|
this.queryParams = {
|
|
pageNum: 1,
|
|
pageSize: 50,
|
|
memberInfo: '',
|
|
startCreationTime: '',
|
|
endCreationTime: '',
|
|
pkRegisterGrade: '',
|
|
}
|
|
this.value1 = ''
|
|
this.getDataList()
|
|
},
|
|
getOthers() {
|
|
mar.getGradeList().then(res => {
|
|
this.gradeList = res.data
|
|
})
|
|
},
|
|
getDataList() {
|
|
mar.getRegList(this.queryParams).then(res => {
|
|
this.dataList = res.rows
|
|
this.total = res.total
|
|
})
|
|
if (typeof callback === 'function') {
|
|
callback()
|
|
}
|
|
},
|
|
openDate(index) {
|
|
this.timeIndex = index
|
|
this.dataShow = true
|
|
},
|
|
clickGrade(item) {
|
|
this.queryParams.pkRegisterGrade = item.pkId
|
|
},
|
|
getDate(e) {
|
|
if (this.timeIndex == 1) {
|
|
this.queryParams.endCreationTime = formatMsToDate(e.value)
|
|
} else {
|
|
this.queryParams.startCreationTime = formatMsToDate(e.value)
|
|
}
|
|
this.dataShow = false
|
|
},
|
|
},
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.content {
|
|
background: #f2f2f2;
|
|
|
|
.seach {
|
|
background: #fff;
|
|
overflow: hidden;
|
|
padding: 20rpx 23rpx;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
position: relative;
|
|
border-bottom: 2rpx solid #eee;
|
|
|
|
.seach_i {
|
|
padding: 0 20rpx;
|
|
border-radius: 34rpx;
|
|
background: #fff;
|
|
flex: 1;
|
|
background: #f5f6f8;
|
|
// margin-right: 40rpx;
|
|
}
|
|
|
|
.neibox {
|
|
display: flex;
|
|
align-items: center;
|
|
font-size: 26rpx;
|
|
font-family: PingFang SC;
|
|
font-weight: 400;
|
|
color: #999999;
|
|
margin-left: 20rpx;
|
|
}
|
|
}
|
|
|
|
.rightPopup {
|
|
width: 645rpx;
|
|
height: 100%;
|
|
overflow: auto;
|
|
|
|
.popup_top {
|
|
padding: 25rpx;
|
|
background-color: rgba(176, 196, 222, 0.45);
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
font-size: 28rpx;
|
|
font-family: Source Han Sans CN;
|
|
font-weight: 400;
|
|
color: #333333;
|
|
|
|
.top_red {
|
|
color: #005bac;
|
|
}
|
|
}
|
|
|
|
.popup_bottom {
|
|
display: flex;
|
|
align-items: center;
|
|
position: absolute;
|
|
left: 0;
|
|
bottom: 0;
|
|
width: 100%;
|
|
|
|
.bottom_btn {
|
|
flex: 1;
|
|
padding: 20rpx 0;
|
|
text-align: center;
|
|
font-size: 28rpx;
|
|
}
|
|
|
|
.thebtn1 {
|
|
background-color: rgba(176, 196, 222, 0.45);
|
|
color: #333333;
|
|
}
|
|
|
|
.thebtn2 {
|
|
background-color: #005bac;
|
|
color: #ffffff;
|
|
}
|
|
}
|
|
|
|
.typesBox {
|
|
margin-top: 40rpx;
|
|
|
|
.typeTitle {
|
|
padding: 0 24rpx;
|
|
font-size: 30rpx;
|
|
font-family: Source Han Sans CN;
|
|
font-weight: bold;
|
|
color: #333333;
|
|
}
|
|
|
|
.choiceBox {
|
|
padding: 0 12rpx;
|
|
display: flex;
|
|
margin-top: 17rpx;
|
|
align-items: center;
|
|
flex-wrap: wrap;
|
|
|
|
.flex_btn {
|
|
background-color: rgba(176, 196, 222, 0.45);
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
padding: 14rpx 48rpx;
|
|
border-radius: 26rpx;
|
|
font-size: 24rpx;
|
|
font-family: Source Han Sans CN;
|
|
font-weight: 400;
|
|
color: #333333;
|
|
margin: 17rpx 5rpx;
|
|
}
|
|
|
|
.timesbtn {
|
|
flex: 1;
|
|
}
|
|
|
|
.selectbtn {
|
|
background-color: #005bac;
|
|
color: #ffffff;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.timeSlide {
|
|
display: flex;
|
|
align-items: center;
|
|
padding: 38rpx 26rpx;
|
|
justify-content: space-between;
|
|
background-color: #ffffff;
|
|
|
|
.timeA {
|
|
font-size: 26rpx;
|
|
font-family: Source Han Sans CN;
|
|
font-weight: 400;
|
|
color: #333;
|
|
margin-right: 46rpx;
|
|
}
|
|
|
|
.timeB {
|
|
font-size: 24rpx;
|
|
font-family: Arial;
|
|
font-weight: 400;
|
|
color: #999999;
|
|
text-align: center;
|
|
}
|
|
|
|
.seatch_r {
|
|
background: #005bac;
|
|
border-radius: 50%;
|
|
padding: 8rpx;
|
|
margin-left: 24rpx;
|
|
}
|
|
}
|
|
|
|
.thecontent {
|
|
background-color: #ffffff;
|
|
margin-top: 25rpx;
|
|
margin-bottom: 21rpx;
|
|
padding: 10rpx 23rpx 30rpx 23rpx;
|
|
|
|
.line_box {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
margin-top: 25rpx;
|
|
|
|
.line1 {
|
|
font-size: 26rpx;
|
|
font-family: Source Han Sans CN;
|
|
font-weight: 400;
|
|
color: #999999;
|
|
}
|
|
|
|
.line2 {
|
|
font-size: 26rpx;
|
|
font-family: Source Han Sans CN;
|
|
font-weight: 400;
|
|
color: #333333;
|
|
}
|
|
|
|
.line3 {
|
|
font-size: 26rpx;
|
|
font-family: Source Han Sans CN;
|
|
font-weight: 400;
|
|
color: rgba(251, 48, 36, 1);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</style>
|