You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
408 lines
12 KiB
408 lines
12 KiB
3 years ago
|
<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>
|