286 lines
		
	
	
		
			6.5 KiB
		
	
	
	
		
			Vue
		
	
	
	
			
		
		
	
	
			286 lines
		
	
	
		
			6.5 KiB
		
	
	
	
		
			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 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.phone}}</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 {
 | |
| 		formatMsToDate
 | |
| 	} from '@/util/index'
 | |
| 	export default {
 | |
| 		data() {
 | |
| 			return {
 | |
| 				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: []
 | |
| 			}
 | |
| 		},
 | |
| 		created() {
 | |
| 			this.getDataList()
 | |
| 			this.value1 = Number(new Date())
 | |
| 		},
 | |
| 		onLoad() {
 | |
| 			// this.getOthers()
 | |
| 			
 | |
| 		},
 | |
| 		methods: {
 | |
| 			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.seaFlourList(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
 | |
| 			},
 | |
| 			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> |