196 lines
		
	
	
		
			4.3 KiB
		
	
	
	
		
			Vue
		
	
	
	
			
		
		
	
	
			196 lines
		
	
	
		
			4.3 KiB
		
	
	
	
		
			Vue
		
	
	
	
| <template>
 | |
| 	<view class="content">
 | |
| 		<view class="timeSlide">
 | |
| 			<view class="timeA">{{'日期区间'}}</view>
 | |
| 			<view class="timeB" @click="openDate(0)">
 | |
| 				{{ queryParams.startPayDate?queryParams.startPayDate:'开始时间' }}
 | |
| 			</view>
 | |
| 			<view class="timeA">{{'至'}}</view>
 | |
| 			<view class="timeB" @click="openDate(1)">
 | |
| 				{{ queryParams.endPayDate?queryParams.endPayDate:'结束时间' }}
 | |
| 			</view>
 | |
| 			<view class="seatch_r" @click="getDataList()">
 | |
| 				<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.settleGradeStr}}</view>
 | |
| 			</view>
 | |
| 			<view class="line_box">
 | |
| 				<view class='line1'>
 | |
| 					{{'真实奖衔'}}
 | |
| 				</view>
 | |
| 				<view class='line2'>{{item.awardsStr}}</view>
 | |
| 			</view>
 | |
| 			<view class="line_box">
 | |
| 				<view class='line1'>
 | |
| 					{{'购买数量'}}
 | |
| 				</view>
 | |
| 				<view class='line2'>{{item.quantity}}</view>
 | |
| 			</view>
 | |
| 			<view class="line_box">
 | |
| 				<view class='line1'>
 | |
| 					{{'价格'}}({{ isLocaled() }})
 | |
| 				</view>
 | |
| 				<view class='line2'>{{item.price|numFilter}}</view>
 | |
| 			</view>
 | |
| 			<view class="line_box">
 | |
| 				<view class='line1'>
 | |
| 					{{'金额'}}({{ isLocaled() }})
 | |
| 				</view>
 | |
| 				<view class='line2'>{{item.orderAmount|numFilter}}</view>
 | |
| 			</view>
 | |
| 			<view class="line_box">
 | |
| 				<view class='line1'>
 | |
| 					{{'购买日期'}}
 | |
| 				</view>
 | |
| 				<view class='line2'>{{item.payTime}}</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>
 | |
| 	</view>
 | |
| </template>
 | |
| 
 | |
| <script>
 | |
| 	import { isLocaled } from '@/util/numberToCurrency'
 | |
| 	import {
 | |
| 		formatMsToDate
 | |
| 	} from '@/util/index'
 | |
| 	import {
 | |
| 		treeList
 | |
| 	} from '@/config/market.js'
 | |
| 	export default {
 | |
| 		filters: {
 | |
| 			numFilter(value) {
 | |
| 				// 截取当前数据到小数点后两位
 | |
| 				let realVal = parseFloat(value).toFixed(2)
 | |
| 				return realVal
 | |
| 			}
 | |
| 		},
 | |
| 		data() {
 | |
| 			return {
 | |
| 				queryParams: {
 | |
| 					startPayDate: "",
 | |
| 					endPayDate:""
 | |
| 				},
 | |
| 				dataShow: false,
 | |
| 				value1: Number(new Date()),
 | |
| 				timeIndex: 0,
 | |
| 				dataList: []
 | |
| 			}
 | |
| 		},
 | |
| 		mounted() {
 | |
| 			this.getDataList()
 | |
| 		},
 | |
| 		methods: {
 | |
| 			isLocaled,
 | |
| 			getDataList() {
 | |
| 				treeList(this.queryParams).then(res => {
 | |
| 					this.dataList = res.rows
 | |
| 				})
 | |
| 			},
 | |
| 			openDate(index) {
 | |
| 				this.timeIndex = index
 | |
| 				this.dataShow = true
 | |
| 			},
 | |
| 			getDate(e) {
 | |
| 				if (this.timeIndex == 1) {
 | |
| 					this.queryParams.endPayDate = formatMsToDate(e.value)
 | |
| 				} else {
 | |
| 					this.queryParams.startPayDate = formatMsToDate(e.value)
 | |
| 				}
 | |
| 				this.dataShow = false
 | |
| 			},
 | |
| 
 | |
| 		}
 | |
| 	}
 | |
| </script>
 | |
| 
 | |
| <style lang="scss" scoped>
 | |
| 	.content {
 | |
| 		.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> |