<template> <view> <view class="leave_cont"> <view class="ul"> <view class="li"> <text class="font15 fcor333">选择卡号</text> <view class="flex1"> <picker mode="selector" :range="UserCard" range-key="cardNo" @change="bindUserCard"> <view class="date text1 margle10">{{carNo}}</view> </picker> </view> </view> <view class="li"> <text class="font15 fcor333">业务类型</text> <view class="flex1"> <picker mode="selector" :range="title_list" range-key="name" @change="bindtitleList"> <view class="date text1 margle10">{{titleName}}</view> </picker> </view> </view> <view class="li"> <text class="font15 fcor333">开始时间</text> <view class="flex1"> <picker mode="date" :value="start_date" :start="startDate" :end="endDate" @change="bindDateChange"> <view class="date">{{start_date}}</view> </picker> </view> </view> <view class="li"> <text class="font15 fcor333">结束时间</text> <view class="flex1"> <picker mode="date" :value="end_date" :start="startDate" :end="endDate" @change="bindDateChange2"> <view class="date">{{end_date}}</view> </picker> </view> </view> </view> <view class="btnw94" @click="getHuiLianTongCardConsumeOpen()">立即查询</view> <view class="font14 fcor666 mart15 fotct" v-if="user.hltCardNo" @click="delUserCard()">解除绑定</view> <view class="height22 backcorfff width100"></view> </view> <view class="width100 backcorfff mart10"> <view class="font13 fotct fcor666 paddtop15">账号余额(元)</view> <view class="mart15 font16 fcor089 fotct paddbotm10"><text class="font28">¥{{tongCardPrice}}</text></view> </view> <view class="width100 backcorfff mart10"> <view class="width100 height70 bor-botm1 paddleft5 paddtright5" v-for="(cardInfp,i) in cardConsumeList" :key="i"> <view class="width100 paddtop10 height30"> <view class="width70 flleft fcor333 font15 fontwig6 text1">订单编号:{{cardInfp.orderNo}}</view> <view class="width30 flright fcoreb5 font15 fontwig6 fotct">-{{cardInfp.tranAmount}}</view> </view> <view class="width100 height30"> <view class="flleft fcor333 font14 fontwig6 text1">{{cardInfp.tranTime}}</view> </view> </view> </view> <view class="height25 width100"></view> </view> </template> <script> import { getUserCardList, getHuiLianTongCardBalance, getHuiLianTongCardConsume, delUserCard } from '../../../Utils/Api.js'; let app = getApp(); export default { data() { const currentDate = this.getDate({ format: true }) return { start_date: currentDate, end_date: currentDate, other: '请输入', UserCard: '', carNo: '', title_list: [{ name: '中石化加油券', value: 'sinopec_oil_code' }, { name: '其他商品或服务', value: 'hisen_consume' } ], titleValue:'sinopec_oil_code', titleName:'中石化加油券', tongCardPrice:0, cardConsumeList : [], pageNum: 1, pageSize: 10, isNoMoreData: false, user: '' } }, onLoad() { }, onShow() { this.getUserCardList(); }, //上滑刷新 onReachBottom() { this.getHuiLianTongCardConsume(); }, computed: { startDate() { return this.getDate('start'); }, endDate() { return this.getDate('end'); } }, methods: { // 选择日期 bindDateChange: function(e) { this.start_date = e.target.value }, bindDateChange2: function(e) { this.end_date = e.target.value; }, //选择卡号 bindUserCard(e) { this.carNo = this.UserCard[e.target.value].cardNo; }, //选择类型 bindtitleList(e){ this.titleName = this.title_list[e.target.value].name; this.titleValue = this.title_list[e.target.value].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}`; }, //查询我的卡号列表 getUserCardList() { uni.showLoading(); getUserCardList().then(res => { uni.hideLoading(); if (res.return_code == '000000') { this.UserCard = res.return_data; this.carNo = res.return_data[0].cardNo; this.getHuiLianTongCardBalance(); this.getHuiLianTongCardConsume(); return; } this.UserCard = ''; }); }, //查询详情 getHuiLianTongCardBalance() { let params = { cardNo: this.carNo } getHuiLianTongCardBalance(params).then(res => { if (res.return_code == '000000') { this.tongCardPrice = res.return_data.balance; } }); }, // 重新打开查询 getHuiLianTongCardConsumeOpen(){ this.pageNum = 1; this.isNoMoreData = false; this.cardConsumeList = []; this.getHuiLianTongCardConsume(); this.getHuiLianTongCardBalance(); }, //查询消费记录 getHuiLianTongCardConsume() { if (this.isNoMoreData) { return false; } uni.showLoading({ title: '加载中...' }) let pagenum = this.pageNum; let Time1 = new Date(this.start_date); let timestemp1 = Time1.getTime(); let Time2 = new Date(this.end_date); let timestemp2 = Time2.getTime(); let params = { businessType :this.titleValue, cardNo : this.carNo, sdate : timestemp1, edate: timestemp2, pageNum: pagenum, pageSize: this.pageSize } getHuiLianTongCardConsume(params).then(res => { uni.hideLoading(); if (res.return_code == '000000' && res.return_data.records != '') { this.isNoMoreData = res.return_data.records.length == this.pageSize ? false : true; this.cardConsumeList = this.cardConsumeList.concat(res.return_data.records); this.pageNum = res.return_data.records.length == this.pageSize ? ++pagenum : pagenum; } else { this.cardConsumeList = []; uni.hideLoading(); uni.showToast({ title:res.return_msg, icon:'none', duration: 2000 }) this.isNoMoreData = true; } }); }, } } </script> <style lang="scss"> page { background-color: #F5F5F5; } .leave_cont { background: #FFFFFF; } .leave_cont .ul { padding-left: 30rpx; } .leave_cont .ul .li { display: flex; align-items: center; border-bottom: 1px solid #efefef; } .leave_cont .ul .li text { padding: 40rpx 0; } .leave_cont .ul .li .flex1 { flex: 1; text-align: right; width: 70%; padding-right: 25rpx; color: #999999; font-size: 32rpx; } .date { height: 42rpx; } .btnw94 { width: 94%; margin-left: 3%; height: 45px; line-height: 45px; color: white; text-align: center; margin-top: 30px; background-color: #0083f5; border-radius: 25px; } </style>