<template> <view> <view class="backcorf06 height220 width100 fotct"> <image src="../static/unioncard.png" v-if="types == 1" mode="widthFix" style="width: 120rpx;"></image> <image src="../static/oilcard.png" v-if="types == 2" mode="widthFix" style="width: 120rpx;"></image> <view class="mart10 font18 fontwig6 fcorfff" v-if="types == 1">工会卡</view> <view class="mart10 font18 fontwig6 fcorfff" v-if="types == 2">油卡 <text class="fcor41c font14 margle" v-if="cardList.status == 1">(正常)</text> <text class="fcorred font14 margle" v-if="cardList.status == 2">(禁用)</text> </view> <view class="mart5 font18 fontwig6 fcorfff fontspec">余额: {{tongCardPrice}}</view> <view class="mart5 font18 fontwig6 fcorfff fontspec">{{cardNo}}</view> <view class="width40w height30 font16 fontlet fcorfff mart10 fotct border-r" style="background-color: #b2b2b2;" @click="delUserCard()">解绑</view> </view> <!-- <view class="width90 mart20 fcor666 font12"> 支付限额 </view> <view class="width90 mart20 fcor666 font14 height25"> <view class="width50 font14 fcor333 flleft">单笔限额</view> <view class="width50 font14 fcor666 flright fotrt">¥20000</view> </view> <view class="width90 mart20 fcor666 font14 mart5 height25"> <view class="width50 font14 fcor333 flleft">每日限额</view> <view class="width50 font14 fcor666 flright fotrt">¥50000</view> </view> --> <view class="leave_cont"> <view class="ul"> <view class="li" v-if="types == 1"> <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> <view class="width90 mart30 fcor666 font12"> 订单列表 </view> <view class="width90 mart20 alijusstart fcor666 font12"> <view class="width40">订单号</view> <view class="width10 fotct">类型</view> <view class="width20 fotct">金额</view> <view class="width30">时间</view> </view> <view class="width100" v-if="types == 1"> <view class="width90 mart5 alijusstart fcor666 font12" v-for="(item,index) in orderList" :key="index" @click="popupOrderNo(item.orderNo)"> <view class="width40 fcor333 text1">{{item.orderNo}}</view> <view class="width10 fotct">支出</view> <view class="width20 fotct">¥{{item.tranAmount}}</view> <view class="width30">{{item.tranTime}}</view> <!-- {{phoneorderdes.createTimed | timeFormat('yyyy-mm-dd')}} {{phoneorderdes.createTimed | timeFormat('hh:mm')}} --> </view> </view> <view class="width100" v-if="types == 2"> <view class="width90 mart5 alijusstart fcor666 font12" v-for="(item,index) in orderList" :key="index" @click="popupOrderNo(item.sourceOrderNo)"> <view class="width40 fcor333 text1">{{item.sourceOrderNo}}</view> <view class="width10 fotct fcor41c" v-if="item.type == 1">收入</view> <view class="width10 fotct fcoreb5" v-if="item.type == 2">支出</view> <view class="width20 fotct fcor41c" v-if="item.type == 1">+{{item.amount}}</view> <view class="width20 fotct fcoreb5" v-if="item.type == 2">-{{item.amount}}</view> <view class="width30"> <view class="width100">{{item.createTime | timeFormat('yyyy-mm-dd')}}</view> <view class="width100">{{item.createTime | timeFormat('hh:mm')}}</view> </view> </view> </view> </view> </template> <script> import { delUserCard, getDetailByCardNo, getHuiLianTongCardBalance, getOilCardRecordList, getHuiLianTongCardConsume } from '../../Utils/Api.js'; export default { data() { const currentDate = this.getDate({ format: true }) return { types: '', //卡类型 orderList: [], //消费列表 cardNo: '', //卡号 tongCardPrice: 0, //账户余额 start_date: currentDate, //开始时间 end_date: currentDate, //结束时间 pageNum: 1, pageSize: 10, titleValue: 'sinopec_oil_code', //工会卡 titleName: '中石化加油券', title_list: [{ name: '中石化加油券', value: 'sinopec_oil_code' }, { name: '其他商品或服务', value: 'hisen_consume' } ], isNoMoreData: false, cardList: '' } }, onLoad(options) { let that = this; that.cardNo = options.cardNo; that.types = options.des; if (options.des == 1) { that.getHuiLianTongCardBalance(); that.getHuiLianTongCardConsume(); } if (options.des == 2) { that.getDetailByCardNo(); that.getOilCardRecordList(); } }, //上滑刷新 onReachBottom() { if (this.types == 1) { this.getHuiLianTongCardConsume(); } if (this.types == 2) { this.getOilCardRecordList(); } }, computed: { startDate() { return this.getDate('start'); }, endDate() { return this.getDate('end'); } }, methods: { // 获取当前时间 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}`; }, //弹出二维码 popupOrderNo(item) { uni.showToast({ title: item, icon: 'none', duration: 2000 }) }, // 选择日期 bindDateChange: function(e) { this.start_date = e.target.value; this.pageNum = 1; this.isNoMoreData = false; this.orderList = []; if (this.types == 1) { this.getHuiLianTongCardConsume(); } if (this.types == 2) { this.getOilCardRecordList(); } }, bindDateChange2: function(e) { this.end_date = e.target.value; this.pageNum = 1; this.isNoMoreData = false; this.orderList = []; if (this.types == 1) { this.getHuiLianTongCardConsume(); } if (this.types == 2) { this.getOilCardRecordList(); } }, //选择类型 bindtitleList(e) { this.titleName = this.title_list[e.target.value].name; this.titleValue = this.title_list[e.target.value].value; this.pageNum = 1; this.isNoMoreData = false; this.orderList = []; this.getHuiLianTongCardConsume(); }, //解除绑定我的卡号列表 delUserCard() { let that = this; uni.showModal({ content: '是否确定解除当前绑定卡号?', success: (res) => { if (res.confirm) { let params = { cardNo: that.cardNo } delUserCard(params).then(res => { if (res.return_code == '000000') { uni.showToast({ title: '解除成功', duration: 2000, icon: 'success', success() { setTimeout(() => { uni.navigateBack({}) }, 1000) } }) } else { uni.showToast({ title: res.return_msg, duration: 2000, icon: 'none' }) } }); } else if (res.cancel) { console.log('用户点击取消'); } } }); }, //查询油卡 getDetailByCardNo() { uni.showLoading({ title: '查询中...' }) let params = { cardNo: this.cardNo } getDetailByCardNo(params).then(res => { uni.hideLoading(); if (res.return_code == '000000') { this.tongCardPrice = res.return_data.amount; this.cardList = res.return_data; } else { uni.showToast({ title: res.return_msg, icon: "none" }); } }) }, //查询详情 getHuiLianTongCardBalance() { uni.showLoading({ title: '查询中...' }) let params = { cardNo: this.cardNo } getHuiLianTongCardBalance(params).then(res => { uni.hideLoading(); if (res.return_code == '000000') { this.tongCardPrice = res.return_data.balance; } else { uni.showToast({ title: res.return_msg, icon: "none" }); } }); }, //查询油卡列表 getOilCardRecordList() { uni.showLoading({ title: '加载中...' }) if (this.isNoMoreData) { uni.hideLoading() return; } let pagenum = this.pageNum; let Time1 = new Date(this.start_date.split('-').join('/')); let timestemp1 = Time1.getTime(); let Time2 = new Date(this.end_date.split('-').join('/')); let timestemp2 = Time2.getTime() + 86399000; let params = { pageNum: pagenum, createTimeS: timestemp1, createTimeE: timestemp2, cardNo: this.cardNo, pageSize: this.pageSize } getOilCardRecordList(params).then(res => { if (res.return_code == '000000' && res.return_data.list != '') { uni.hideLoading(); this.isNoMoreData = res.return_data.list.length == this.pageSize ? false : true; this.orderList = this.orderList.concat(res.return_data.list); if (res.return_data.total == (this.pageNum * this.pageSize)) { this.isNoMoreData = true; } this.pageNum = res.return_data.list.length == this.pageSize ? ++pagenum : pagenum; } else { this.orderList = []; uni.hideLoading() } }) }, //查询消费记录 getHuiLianTongCardConsume() { uni.showLoading({ title: '加载中...' }) if (this.isNoMoreData) { return false; } let pagenum = this.pageNum; let Time1 = new Date(this.start_date.split('-').join('/')); let timestemp1 = Time1.getTime(); let Time2 = new Date(this.end_date.split('-').join('/')); let timestemp2 = Time2.getTime() + 86399000; let params = { businessType: this.titleValue, sdate: timestemp1, edate: timestemp2, cardNo: this.cardNo, 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.orderList = this.orderList.concat(res.return_data.records); this.pageNum = res.return_data.records.length == this.pageSize ? ++pagenum : pagenum; } else { this.orderList = []; uni.hideLoading(); uni.showToast({ title: res.return_msg, icon: 'none', duration: 2000 }) this.isNoMoreData = true; } }); }, } } </script> <style lang="scss"> .leave_cont { background: #FFFFFF; } .leave_cont .ul { width: 90%; margin-left: 5%; } .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; } </style>