pages/rechargeDetail/rechargeDetail.vue

<template>
	<view>
		<view class="statistics yellow-bg uni-list-cell-pd" style="color: #fff">{{detailText | tranNull}}</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" :range-key="'kindName'">
						<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" :range-key="'typeName'">
						<view class="uni-input">{{arrayWay[indexWay].typeName}}</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">{{beginDate}}</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 {
				detailText:'',
				title: 'picker',
				kindArray: [],
				arrayWay: [],
				index: 0,
				indexWay: 0,
				beginDate: 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() {
		this.getDetailSummary();
		},
		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;
					that.kindArray = data;
					that.arrayWay = data[0].typeList;
					console.log(data)
				})
			},
			bindPickerChange: function(e) {
				let that = this;
				that.index = e.detail.value
				that.arrayWay = that.kindArray[that.index].typeList;
			},
			bindPickerChangeWay: function(e) {
				console.log('picker发送选择改变，携带值为', e.detail.value)
				this.indexWay = e.detail.value
			},
			bindStartDateChange: function(e) {
				this.beginDate = 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}`;
			},
			getDetailSummary(){
				let that=this;
				let data ={
					kind: '1',
					type: '1',
					beginDate:new Date(that.beginDate + " 00:00:00") ,
					endDate:new Date(that.overDate + " 23:59:59")
				};
				console.log(data)
				that.$myRequest({
					url: that.$common.detailSummary,
					method: 'POST',
					data: that.$common.requestSign(data)
				}).then(res => {
				
					let data = res.data;
					if(data.rechargeSummary){
						that.detailText = data.rechargeSummary
					}
					if(data.paySummary){
						that.detailText = data.paySummary
					}
				
				})
				
			}
			
			
			
		}
	}
</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>