web-base-h5/pages/market/activeArea/seaPublick.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>