BJ_web_developers / jy_parkingOS

<template>
	<view>
		<view class="statistics yellow-bg uni-list-cell-pd" style="color: #fff">共18笔充值,充值总金额100.00元</view>
		<view class="uni-list">
			<view class="uni-list-cell">
				<view class="uni-list-cell-left">
					消费类型
				</view>
				<view class="uni-list-cell-db">
					<picker @change="bindPickerChange" :value="index" :range="kindArray">
						<view class="uni-input">{{kindArray[index].kindName}}</view>
					</picker>
				</view>
			</view>
		</view>

		<view class="uni-list">
			<view class="uni-list-cell">
				<view class="uni-list-cell-left">
					充值方式
				</view>
				<view class="uni-list-cell-db">
					<picker @change="bindPickerChangeWay" :value="indexWay" :range="arrayWay">
						<view class="uni-input">{{arrayWay[indexWay]}}</view>
					</picker>
				</view>
			</view>
		</view>


		<view class="uni-list">
			<view class="uni-list-cell">
				<view class="uni-list-cell-left">
					开始时间
				</view>
				<view class="uni-list-cell-db">
					<picker mode="date" :value="date" :start="startDate" :end="endDate" @change="bindStartDateChange">
						<view class="uni-input">{{benginDate}}</view>
					</picker>
				</view>
			</view>
		</view>

		<view class="uni-list">
			<view class="uni-list-cell">
				<view class="uni-list-cell-left">
					结束时间
				</view>
				<view class="uni-list-cell-db">
					<picker mode="date" :value="date" :start="startDate" :end="endDate" @change="bindEndDateChange">
						<view class="uni-input">{{overDate}}</view>
					</picker>
				</view>
			</view>
		</view>

		<view class="border-bg"></view>


		<uni-load-more class="load" :content-text="contentText" :status="status" :icon-size="24" :iconType="iconType"
			v-if="rows.length == 0">

			<uni-list class="rechargeWrap">
				<view class="recordCon uni-list-cell-pd">
					<text>+66</text>
					<text>充值成功</text>
				</view>
				<view class="recordCon uni-list-cell-pd">
					<text class="color-green">微信充值</text>
					<text>2020-10-01 01:01:01</text>
				</view>
			</uni-list>

			<uni-list class="rechargeWrap">
				<view class="recordCon uni-list-cell-pd">
					<text>+66</text>
					<text>充值成功</text>
				</view>
				<view class="recordCon uni-list-cell-pd">
					<text class="color-blue">支付宝充值</text>
					<text>2020-10-01 01:01:01</text>
				</view>
			</uni-list>

			<uni-list class="rechargeWrap">
				<view class="recordCon uni-list-cell-pd">
					<text>+66</text>
					<text>充值成功</text>
				</view>
				<view class="recordCon uni-list-cell-pd">
					<text class="color-red">线下公对公充值</text>
					<text>2020-10-01 01:01:01</text>
				</view>
			</uni-list>

			<uni-list class="rechargeWrap">
				<view class="recordCon uni-list-cell-pd">
					<text>-66</text>
					<text>支付成功</text>
				</view>
				<view class="recordCon uni-list-cell-pd">
					<text class="color-green">购买卡券</text>
					<text>2020-10-01 01:01:01</text>
				</view>
				<view class="rechargeArrow">
					>
				</view>
			</uni-list>



			<uni-list class="rechargeWrap">
				<view class="recordCon uni-list-cell-pd">
					<text>-66</text>
					<text>支付成功</text>
				</view>
				<view class="recordCon uni-list-cell-pd">
					<text class="">停车支付</text>
					<text>2020-10-01 01:01:01</text>
				</view>
				<view class="rechargeArrow">
					>
				</view>
			</uni-list>

		</uni-load-more>


	</view>
</template>

<script>
	export default {
		data() {
			const currentDate = this.getDate({
				format: true
			})
			return {
				title: 'picker',
				kindArray: [],
				arrayWay: [],
				index: 0,
				indexWay: 0,
				benginDate: currentDate,
				overDate: currentDate,
				rows: [],
				pageNum: 1, //当前页
				pageSize: 1, //每页条数
				reload: false,
				status: 'more',
				contentText: {
					contentdown: '上拉加载更多～',
					contentrefresh: '正在加载更多～',
					contentmore: '我是有底线的～'
				},
				iconType: 'auto', // 图标样式
			}
		},
		onLoad(params) {
			wx.showShareMenu({
				withShareTicket: true
			});
			this.getKindType()

		},
		onShow() {


		},
		computed: {
			startDate() {
				return this.getDate('start');
			},
			endDate() {
				return this.getDate('end');
			}
		},
		methods: {
			getKindType() {
				let that = this;
				that.$myRequest({
					url: that.$common.walletKindType,
					method: 'POST',
					data: that.$common.requestSign()
				}).then(res => {
				
					let data = res.data;
					// let list = [];
					// data.forEach((item, index) => {
					// 	list.push(item.kindName)
					// });
					console.log(data)
					that.kindArray = data;

				})
			},
			bindPickerChange: function(e) {
				let that = this;
				that.index = e.detail.value



			},
			bindPickerChangeWay: function(e) {
				console.log('picker发送选择改变，携带值为', e.detail.value)
				this.indexWay = e.detail.value
			},
			bindStartDateChange: function(e) {
				this.benginDate = e.detail.value
			},
			bindEndDateChange: function(e) {
				this.overDate = e.detail.value
			},
			getDate(type) {
				const date = new Date();
				let year = date.getFullYear();
				let month = date.getMonth() + 1;
				let day = date.getDate();
				if (type === 'start') {
					year = year - 60;
				} else if (type === 'end') {
					year = year + 2;
				}
				month = month > 9 ? month : '0' + month;
				day = day > 9 ? day : '0' + day;
				return `${year}-${month}-${day}`;
			},
		}
	}
</script>

<style lang="scss" scoped>
	.rechargeWrap {
		position: relative;

		.rechargeArrow {
			position: absolute;
			right: 10px;
			top: 30px;
			font-size: 20px;
			color: #999;
		}
	}

	.recordCon {
		padding-right: 35px;
		color: #999;
		display: flex;
		justify-content: space-between;
	}
</style>