BJ_web_developers / jy_parkingOS

  <template>

  	<view>

  		<!-- scrollable speed="50" 滚动 -->

  		<uni-notice-bar scrollable backgroundColor="#f0ad4e" color="#fff"  single :text="detailText | tranNull"></uni-notice-bar>

  		<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 class="marginRightArrow">
  					<uni-icons type="forward" size="14" color="#999"></uni-icons>
  				</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 class="marginRightArrow">
  					<uni-icons type="forward" size="14" color="#999"></uni-icons>
  				</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 class="marginRightArrow">
  					<uni-icons type="forward" size="14" color="#999"></uni-icons>
  				</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 class="marginRightArrow">
  					<uni-icons type="forward" size="14" color="#999"></uni-icons>
  				</view>

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

  		<view class="" v-if="orderList.length > 0">

  			<uni-list class="rechargeWrap pos-rel" clickable v-for="(item, index) in orderList" :key="index" >
  				<view class="" @click="toOutDetail(item)">
  					<view class="recordCon uni-list-cell-pd">

  						<text class="color-black">{{item.changeFeeDetail}}元 {{item.carNumber | tranStrNull}}</text>

  						<text>{{item.payStateDesc}}</text>
  					</view>
  					<view class="recordCon uni-list-cell-pd">

  						<text class="color-green">{{item.typeName}}</text>
  						<!-- <text v-if="item.type == '2'" class="color-green">{{item.typeName}}</text> -->
  						<!-- <text v-if="item.type == '3'" class="color-red">{{item.typeName}}</text> -->
  						<!-- <text v-if="item.type == '1'" class="color-blue">{{item.typeName}}</text> -->
  				

  						<text>{{item.opTime}}</text>
  					</view>
  					<view class="uni-icon pos-abs icon-arrowright uni-icon-arrowright">
  					</view>
  				</view>	
  				

  			</uni-list>

  			<uni-load-more :status="status" />

  		</view>

  		<view v-else class="margin-top-30">
  			<image class="marginAuto" src="../../static/vipcard/novipcard.png" mode="aspectFit"></image>
  			<view class="text-center">
  				暂无记录
  			</view>

  		</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: [],

  				// isLoadAll: false,

  				totalPages: 1, // 总页数

  				page: 1,

  				pageSize: 10,

  				status: 'no-more',

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

  			this.getKindType();

  		},
  		onShow() {

  		},
  		// 下拉刷新触发
  		onPullDownRefresh(val) {

  			this.page = 1

  			this.pageSize = this.pageSize

  			this.totalPages = 1

  			this.orderList = []

  			console.log('下拉刷新', val)

  			this.fetchData()

  		},
  		// 上拉加载触发
  		onReachBottom() {

            console.log(this.totalPages)
            console.log(this.orderList.length)
  

            if (this.totalPages == this.orderList.length) {
              this.status = 'no-more'
              console.log('111')
              return
            } else {
              this.page++;

              this.fetchData();

            }

  		},

  		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)

  					console.log(that.kind, that.type)
  					that.getDetailSummary();

  					that.fetchData()

  				})
  			},
  			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;

  				console.log(that.kind, that.type)
  				that.getDetailSummary();

  			
  				that.page = 1
  				that.pageSize = this.pageSize
  				that.totalPages = 1
  				that.orderList = []

  				that.fetchData()

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

  				this.indexWay = e.detail.value;

  				this.type = this.arrayWay[this.indexWay].type;
  				console.log(this.kind, this.type)
  				this.getDetailSummary();

  				this.page = 1
  				this.pageSize = this.pageSize
  				this.totalPages = 1
  				this.orderList = []

  				this.fetchData()

  			},
  			bindStartDateChange: function(e) {

  				this.beginDate = e.detail.value

  				this.getDetailSummary();

  				this.page = 1
  				this.pageSize = this.pageSize
  				this.totalPages = 1
  				this.orderList = []

  				this.fetchData()

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

  				this.getDetailSummary();

  				this.page = 1
  				this.pageSize = this.pageSize
  				this.totalPages = 1
  				this.orderList = []

  				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: that.beginDate + " 00:00:00",
  					endDate: 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() {

  				let that = this

  				that.status = 'loading'

  				let paramsData = {

  					pageNum: that.page.toString(),
  					pageSize: that.pageSize.toString(),

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

  					beginDate: that.beginDate + " 00:00:00",
  					endDate: that.overDate + " 23:59:59"

  				}

  				that.$myRequest({
  					url: that.$common.walletDetailsPage,
  					method: 'POST',
  					data: that.$common.requestSign(paramsData)
  				}).then(res => {

  					if (res.data.pageTotals < 10) {
  						this.status = 'no-more'

  					} else {

  						this.status = 'more'

  					}

  					that.totalPages = res.data.pageTotals;
  					that.orderList = that.orderList.concat(res.data.dataList)

  				})

  			},

  			toOutDetail(i){
  				console.log('详情')
  				uni.navigateTo({
  				  url: '../rechargeDetail/outDetail?optionData='+JSON.stringify(i)
  				});
  			}

  		}
  	}

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

  	.icon-arrowright {
  		color: #bbb;
  		font-size: 20px;
  		right: 2upx;
  		top: 60upx;
  	}

  </style>