web-zk-h5/components/invest/circulation.vue

<template>
	<view class="content">
		<view class="seach">
			<view class="seach_i">
				<u--input 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="listShow=true">
				<view>{{thegrade?thegrade:'注册等级'}}</view>
				<u-icon name="arrow-down-fill" color="#000000" size="14"></u-icon>
			</view>

		</view>
		<!-- 日期区间 -->
		<view class="timeSlide">
			<view class="timeA">{{'日期区间'}}</view>
			<view class="timeB" @click="openDate(0)">
				{{ queryParams.startCreationTime?queryParams.startCreationTime:'开始时间' }}
			</view>
			<view class="timeA">{{'至'}}</view>
			<view class="timeB" @click="openDate(1)">
				{{ queryParams.endCreationTime?queryParams.endCreationTime:'结束时间' }}
			</view>
			<view class="seatch_r" @click="clickTap()">
				<u-icon name="search" size="22" color="#fff"></u-icon>
			</view>
		</view>
    <!-- 轮次 -->
    <!-- <view class="thecontent" v-for='(item,index) in roundObj' :key="index" >
      <view class="line_box">
				<view class='line1'>{{'轮数'}}</view>
				<view class='line2' v-if="item.round!='暂无'">{{item.round}}轮</view>
				<view class='line2' v-else>{{item.round}}</view>
			</view>
      <view class="line_box">
				<view class='line1'>{{'次数'}}</view>
				<view class='line2' v-if="item.second!='暂无'">{{item.second}}次</view>
				<view class='line2' v-else>{{item.second}}</view>
			</view>
      <view class="line_box">
				<view class='line1'>{{'业绩' +'(PV)'}}</view>
				<view class='line2' v-if="item.calAchieve!='暂无'">{{item.calAchieve|toThousandthAndKeepDecimal}}</view>
				<view class='line2' v-else>{{item.calAchieve}}</view>
			</view>
    </view> -->
		<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'>{{'注册金额'}}({{ isLocaled() }})</view>
				<view class='line2'>{{item.orderAmount |toThousandthAndKeepDecimal}}</view>
			</view>
			<view class="line_box">
				<view class='line1'>{{'注册业绩'}}(PV)</view>
				<view class='line2'>{{item.orderAchieve|toThousandthAndKeepDecimal}}</view>
			</view>
			<view class="line_box">
				<view class='line1'>{{'注册等级'}}</view>
				<view class='line2'>{{item.pkRegisterGradeStr}}</view>
			</view>
			<view class="line_box">
				<view class='line1'>{{'订单类型'}}</view>
				<view class='line2'>{{item.orderTypeStr}}</view>
			</view>
			<view class="line_box">
				<view class='line1'>{{'轮数'}}</view>
				<view class='line2'>{{item.round}}</view>
			</view>
			<view class="line_box">
				<view class='line1'>{{'次数'}}</view>
				<view class='line2'>{{item.second}}</view>
			</view>
			<view class="line_box">
				<view class='line1'>
          {{'注册时间'}}</view>
				<view class='line2'>{{item.creationTime}}</view>
			</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>
		<u-picker @cancel='listShow=false' :show="listShow" ref="uPicker" :columns="gradeList" @confirm="confirm"
			keyName='gradeName'></u-picker>
	</view>
</template>

<script>
	import * as mar from "@/config/market.js"
	import {
    nextRound
  } from "@/config/bonus.js"
  import { isLocaled } from '@/util/numberToCurrency'
	import {
		formatMsToDate
	} from '@/util/index'
	export default {
		data() {
			return {
				minDate:Number(new Date()),
				navIndex:0,
				  navList: [
		                { name: '直推列表',path:"0",menuKey:'' },
		                { name: '三单循环',path:"0",menuKey:''},
		                { name: '免费注册' ,path:"0",menuKey:'' },
		            ],
				queryParams: {
					pageNum: 1,
					pageSize: 50,
					memberInfo: "",
					startCreationTime: "",
					endCreationTime: "",
					pkRegisterGrade: ""
				},
				dataShow: false,
				timeIndex: 0,
				listShow: false,
				thegrade: "",
				value1: '',
				gradeList: [],
				dataList: [],
        roundObj:[]
			}
		},
		onLoad() {
			// this.getOthers()
			
		},
		created() {
			this.getDataList()
			this.value1 = Number(new Date())
			this.getOthers()
      // this.getTime()
		},
		methods: {
      isLocaled,
      getTime(){
				nextRound().then((res) => {
					if(res.rows.length == 0){
						res.rows=[
							{
								round:'暂无',
								second:'暂无',
								calAchieve:'暂无',
							}
						]
					}
					this.roundObj = res.rows
				})
			},
			getOthers() {
				mar.getGradeList().then((res) => {
					this.gradeList = [res.data];
				});
			},
			clickTap(){
				this.dataList =[]
				this.getDataList()
			},
				clickHref(index){
					this.navIndex = index
				},
			   getMenuLists(){
					mar.menuList().then((res) => {
						console.error(res)
						res.data.forEach((item)=>{
							if(item.menuKey == 'directList'){
								this.navList[0].menuKey = 'directList'
							}
							if(item.menuKey == 'attractDetailList'){
								this.navList[1].menuKey = 'attractDetailList'
							}
							if(item.menuKey == 'haiList'){
								this.navList[2].menuKey = 'haiList'
							}
						})
					})
			},
			getOthers() {
				mar.getGradeList().then((res) => {
					this.gradeList = [res.data];
				});
			},
			getDataList(num) {
				 this.queryParams.pageNum = num || 1
					mar.tripleCycleList(this.queryParams).then(res => {
						this.dataList = [...this.dataList,...res.rows]

				})
			},
			openDate(index) {
				this.timeIndex = index
				this.dataShow = true
			},
			confirm(e) {
				this.queryParams.pkRegisterGrade = e.value[0].pkId
				this.thegrade = e.value[0].gradeName
				this.listShow = false
				this.dataList = []
				this.getDataList()
			},
			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>
	/*左侧分类视图*/
	.left_scrol_style{
	    white-space: nowrap;
	      width: 100%;
	}
	.styles {
	   border: none !important;
	   color: #fff !important;
	   background: #d61820;
	 }
	 .top-lists{
			  width: fit-content;
	   display: flex;
				padding: 30rpx 30rpx 0 0;
			background-color: #fff;
			height: 80rpx;
			line-height: 80rpx;
	   .nav-view{
				width: 200rpx;
	     cursor: pointer;
	     padding: 0 26rpx;
	     height: 44rpx;
	     border-radius: 10rpx;
	     border: 1rpx solid #999999;
	     font-size: 14rpx;
	     text-align: center;
	     line-height: 44rpx;
	     margin-left: 20rpx;
	     color: #999;
	   }
	 }
	.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;
			}


		}

		.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>