BJ_web_developers / jy_parkingOS

  <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>
  

  		<view class="" v-if="orderList.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>

  		</view>
  		<!-- 底部文案 -->
  		<view class="">
  			<text>{{status === 'more' ? contentText.contentdown : (status === 'loading' ? contentText.contentrefresh : contentText.contentnomore)}}</text>
  		</view>
  

  
  
  	</view>

  </template>
  
  <script>

  	export default {
  		data() {
  			const currentDate = this.getDate({
  				format: true
  			})
  			return {

  
  				detailText: '',

  				title: 'picker',
  				kindArray: [],
  				arrayWay: [],
  				index: 0,
  				indexWay: 0,

  				kind:'',
  				type:'',

  				beginDate: currentDate,

  				overDate: currentDate,

  				orderList: [],
  				page: 1,
  				pageSize: 10,
  				status: 'more', // 默认展示上拉显示更多

  				contentText: {

  					contentdown: "上拉显示更多",
  					contentrefresh: "正在加载...",
  					contentnomore: "没有更多数据了"
  				}
  

  			}
  		},
  		onLoad(params) {
  			wx.showShareMenu({
  				withShareTicket: true
  			});

  			this.getKindType();

  			// 页码归为第1页
  			this.page = 1
  			// 初始化获取列表数据
  			this.fetchData()

  
  		},
  		onShow() {

  			this.getDetailSummary();
  			this.page = 1
  			this.pageSize = 10
  			this.orderList = []
  			this.fetchData()
  		},
  		// 下拉刷新触发
  		onPullDownRefresh(val) {
  			this.page = 1
  			this.pageSize = 10
  			console.log('下拉刷新', val)
  			this.fetchData().then(() => {
  				uni.stopPullDownRefresh();
  			}).catch(err => {
  				uni.stopPullDownRefresh();
  				// 弹窗提示
  				uni.showToast({
  					title: '请求出错了',
  					icon: 'none'
  				})
  			})
  		},
  		// 上拉加载触发
  		onReachBottom() {
  			// 改变状态为加载中
  			this.status = 'loading'
  				// 页码发生变化
  				++this.page
  			// 加载更多
  			this.fetchData('loadMore').then(resArray => {
  				// 此时判断当前有没有请求到数据
  				if (resArray.length) {
  					this.status = 'more'

  				} else {
  					this.status = 'noMore';
  					--this.page;
  				}
  			}).catch(err => {
  				console.log('网络请求失败')
  			})

  		},

  		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.kind = data[0].kind;

  					that.arrayWay = data[0].typeList;

  					that.type = data[0].typeList[0].type;

  					console.log(data)

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

  				that.kind = that.kindArray[that.index].kind;

  				that.arrayWay = that.kindArray[that.index].typeList;

  				that.type = that.kindArray[that.index].typeList[0].type;

  				that.fetchData()

  			},
  			bindPickerChangeWay: function(e) {
  				console.log('picker发送选择改变，携带值为', e.detail.value)

  				this.indexWay = e.detail.value;
  				this.type = that.arrayWay[this.indexWay].type;
  				this.fetchData()

  			},
  			bindStartDateChange: function(e) {

  				this.beginDate = e.detail.value

  				this.fetchData()

  			},
  			bindEndDateChange: function(e) {
  				this.overDate = e.detail.value

  				this.fetchData()

  			},
  			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: that.kind,
  					type: that.type,

  					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
  					}

  				})

  
  			},
  
  			fetchData(way) {
  				let that = this
  				let paramsData = {
  					pageNum: that.page,
  					pageSize: that.pageSize,

  					kind: that.kind,
  					type: that.type,

  					beginDate: new Date(that.beginDate + " 00:00:00"),
  					endDate: new Date(that.overDate + " 23:59:59")
  				}
  				// 首页信息获取 接口
  				that.$myRequest({
  					url: that.$common.walletDetailsPage,
  					method: 'POST',
  					data: that.$common.requestSign(paramsData)
  				}).then(res => {
  
  					// 当页的数据
  					const resDataArray = res.data
  					if (way === 'loadMore') {
  						that.orderList = that.orderList.concat(resDataArray)
  					} else {
  						that.orderList = resDataArray
  					}
  
  				})
  
  
  
  
  			},
  

  		}
  	}

  </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>