396 lines
8.5 KiB
Vue
396 lines
8.5 KiB
Vue
<template>
|
||
<view class="repaymentbox">
|
||
<view class="topbox">
|
||
<image src="https://api.yruibao.com/crmebimage/public/store/2024/03/16/ad166479de254390ac5a423f6d18ba4bn0iscpvty1.png" mode=""></image>
|
||
<view class="price">
|
||
待还账单：￥{{orderData.sumPrice ? Number(orderData.sumPrice).toFixed(2) : 0}}
|
||
</view>
|
||
</view>
|
||
<view class="rebox">
|
||
<!-- <view class="repaymenttext">
|
||
<a href="javascript:;" :class="index == 0 ? 'active' : ''" v-model="index" @click="btnhk">待还款</a>
|
||
<a href="javascript:;" :class="index == 1 ? 'active' : ''" v-model="index" @click="btnjq">已结清</a>
|
||
</view> -->
|
||
<view class="tabbox">
|
||
<view class="tans" @click="changeindx(0)">
|
||
<view class="txt" :class="index==0?'act1':''">
|
||
全部
|
||
</view>
|
||
|
||
<div class="line" v-if="index==0">
|
||
</div>
|
||
</view>
|
||
<view class="tans" @click="changeindx(1)">
|
||
<view class="txt" :class="index==1?'act1':''">
|
||
待还款
|
||
</view>
|
||
|
||
<div class="line" v-if="index==1">
|
||
|
||
</div>
|
||
</view>
|
||
<view class="tans" @click="changeindx(2)">
|
||
<view class="txt" :class="index==2?'act1':''">
|
||
已结清
|
||
</view>
|
||
|
||
<div class="line" v-if="index==2">
|
||
|
||
</div>
|
||
</view>
|
||
</view>
|
||
<view class="repaymentlist" v-for="(item,index) in binglist" :key="index">
|
||
<view class="lt">
|
||
<view class="bh">
|
||
<text>订单编号：</text><text>{{item.orderId}}</text>
|
||
</view>
|
||
<view class="rq">
|
||
<text>还款日期：</text><text>{{item.repaymentDeadline}}</text>
|
||
</view>
|
||
<view class="xuhuan">
|
||
<text>须还金额：</text><text>￥{{item.repaymentAmount}}</text>
|
||
<view class="yuqi" v-if="item.repaymentStatus=='Pending'">
|
||
待还款
|
||
</view>
|
||
<view class="yuqi" v-if="item.repaymentStatus=='Partial'">
|
||
部分还款
|
||
</view>
|
||
<view class="yuqi" v-if="item.repaymentStatus=='Paid'">
|
||
已还款
|
||
</view>
|
||
<view class="yuqi" v-if="item.repaymentStatus=='Late'">
|
||
逾期
|
||
</view>
|
||
<!-- 'Pending'? '待还款' : 'Partial' ? '部分还款' : 'Paid' ? '已还款' : '逾期' -->
|
||
</view>
|
||
|
||
</view>
|
||
<view class="rt">
|
||
<a href="javascript:;" v-if="item.repaymentStatus!='Paid'" @click='goPay(item.repaymentAmount,item.id,item.repaymentStatus)'>{{title}}</a>
|
||
<!-- <view class='bnt bg_color' v-if="!item.paid" @click='goPay(item.payPrice,item.orderId)'>立即付款</view> -->
|
||
</view>
|
||
<payment :pay_close="pay_close" @onChangeFun='onChangeFun' :order_id="pay_order_id" :totalPrice='totalPrice'>
|
||
</payment>
|
||
</view>
|
||
</view>
|
||
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
import {
|
||
orderData,
|
||
|
||
} from '@/api/order.js';
|
||
import {
|
||
getreceivable
|
||
} from '@/api/api.js'
|
||
import payment from '@/components/payments';
|
||
export default {
|
||
data() {
|
||
return {
|
||
index: 0,
|
||
binglist: [],
|
||
title: '还款',
|
||
pay_close: false,
|
||
pay_order_id: '',
|
||
totalPrice: '0',
|
||
orderData: {}, //订单详细统计
|
||
}
|
||
},
|
||
components: {
|
||
payment,
|
||
|
||
},
|
||
onLoad() {
|
||
|
||
my.postMessage({
|
||
data: {
|
||
action: 'authorize'
|
||
}
|
||
})
|
||
//#ifdef MP-ALIPAY
|
||
|
||
// this.aliPay(that.order_id)
|
||
//#endif
|
||
|
||
// console.log(this.$Cache.get('orderno'))
|
||
// window.my.postMessage({ action: 'authorize' });
|
||
|
||
// step 4. 接受小程序发过来的用户信息
|
||
|
||
},
|
||
onShow() {
|
||
// 轮询查询函数
|
||
const pollingFunction = () => {
|
||
this.getData(); // 调用getData()方法
|
||
};
|
||
this.getOrderData();
|
||
// 初始调用一次
|
||
pollingFunction();
|
||
|
||
// 每五秒执行一次轮询查询
|
||
const intervalId = setInterval(pollingFunction, 5000);
|
||
|
||
// 在页面销毁时清除轮询
|
||
// 如果onShow()方法会在页面销毁时被自动销毁，那么下面的代码可以忽略
|
||
this.$once('hook:beforeDestroy', () => {
|
||
clearInterval(intervalId);
|
||
});
|
||
},
|
||
methods: {
|
||
changeindx(num){
|
||
this.index=num
|
||
this.getData()
|
||
},
|
||
toreturn(){
|
||
console.log('点击了');
|
||
|
||
// uni.navigateTo({
|
||
// url: '/pages/users/alipay_return/alipay_return'
|
||
// })
|
||
},
|
||
ispayok(num){
|
||
uni.navigateTo({
|
||
url: '/pages/users/alipay_return/alipay_return'
|
||
})
|
||
},
|
||
btnhk() {
|
||
this.index = 0
|
||
this.title = '还款'
|
||
this.getData()
|
||
},
|
||
btnjq() {
|
||
this.index = 1
|
||
this.title = '已结清'
|
||
this.getData()
|
||
},
|
||
// 请求分期还款
|
||
getData: function() {
|
||
let type=0
|
||
if(this.index==0){
|
||
type=null
|
||
}else if(this.index==1){
|
||
type=0
|
||
}else if(this.index==2){
|
||
type=1
|
||
}
|
||
let data = {
|
||
uid:this.$store.getters.uid,
|
||
// orderId:this.$Cache.get('ordernobh'),
|
||
type: type
|
||
}
|
||
getreceivable(data).then(res => {
|
||
this.binglist = res.data
|
||
// this.binglist[0].repaymentStatus='Paid'
|
||
})
|
||
},
|
||
getOrderData: function() {
|
||
let that = this;
|
||
orderData().then(res => {
|
||
that.$set(that, 'orderData', res.data);
|
||
|
||
})
|
||
},
|
||
/**
|
||
* 事件回调
|
||
*
|
||
*/
|
||
onChangeFun: function(e) {
|
||
|
||
let opt = e;
|
||
let action = opt.action || null;
|
||
let value = opt.value != undefined ? opt.value : null;
|
||
(action && this[action]) && this[action](value);
|
||
},
|
||
/**
|
||
* 关闭支付组件
|
||
*
|
||
*/
|
||
payClose: function() {
|
||
this.pay_close = false;
|
||
},
|
||
/**
|
||
* 打开支付组件
|
||
*
|
||
*/
|
||
goPay(pay_price, order_id,repaymentStatus) {
|
||
if(repaymentStatus!='Paid'){
|
||
this.$set(this, 'pay_close', true);
|
||
this.$set(this, 'pay_order_id', order_id);
|
||
this.$set(this, 'totalPrice', pay_price);
|
||
}
|
||
|
||
},
|
||
/**
|
||
* 支付成功回调
|
||
*
|
||
*/
|
||
pay_complete: function() {
|
||
this.loadend = false;
|
||
this.page = 1;
|
||
this.$set(this, 'orderList', []);
|
||
this.$set(this, 'pay_close', false);
|
||
this.getOrderData();
|
||
this.getOrderList();
|
||
},
|
||
/**
|
||
* 支付失败回调
|
||
*
|
||
*/
|
||
pay_fail: function() {
|
||
this.pay_close = false;
|
||
},
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style lang="less">
|
||
page{
|
||
background-color:#fff !important;
|
||
}
|
||
.active {
|
||
font-weight: 700;
|
||
font-size: 13px;
|
||
color: #000 !important;
|
||
}
|
||
|
||
.repaymentbox {
|
||
width: 100%;
|
||
height: 100%;
|
||
padding-bottom: 30rpx;
|
||
// box-sizing: border-box;
|
||
background-color:#fff;
|
||
font-size: 11px !important;
|
||
|
||
.topbox{
|
||
position: relative;
|
||
width: 750rpx;
|
||
height: 200rpx;
|
||
background: #FF5733;
|
||
image{
|
||
position: absolute;
|
||
right: 44rpx;
|
||
bottom: 64rpx;
|
||
width: 96rpx;
|
||
height:110rpx ;
|
||
}
|
||
.price{
|
||
|
||
position: absolute;
|
||
left: 46rpx;
|
||
bottom: 46rpx;
|
||
font-weight: 500;
|
||
font-size: 32rpx;
|
||
color: #FFFFFF;
|
||
}
|
||
}
|
||
.rebox{
|
||
padding-top: 40rpx;
|
||
position: relative;
|
||
width: 100%;
|
||
margin-top: -60rpx;
|
||
// box-shadow: 0rpx 6rpx 16rpx 0rpx rgba(0,0,0,0.16);
|
||
border-radius: 20rpx;
|
||
// background: #000;
|
||
|
||
.tabbox{
|
||
padding-top: 40rpx;
|
||
display: flex;
|
||
flex-wrap: nowrap;
|
||
|
||
background: #fff;
|
||
border-radius: 20rpx;
|
||
.tans{
|
||
width: 33%;
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
|
||
justify-content: center;
|
||
|
||
.txt{
|
||
width: 100%;
|
||
text-align: center;
|
||
font-weight: 600;
|
||
font-size: 32rpx;
|
||
color: #3D3D3D;
|
||
}
|
||
.act1{
|
||
color: #FF5733;
|
||
}
|
||
.line{
|
||
margin-top: 4rpx;
|
||
width: 46rpx;
|
||
height: 0rpx;
|
||
border-radius: 6rpx;
|
||
border: 4rpx solid #FF5733;
|
||
}
|
||
}
|
||
|
||
}
|
||
.repaymentlist {
|
||
background-color: #fff;
|
||
display: flex;
|
||
margin: 26rpx 20rpx;
|
||
box-sizing: border-box;
|
||
border-radius: 20rpx;
|
||
padding: 34rpx 38rpx;
|
||
box-shadow: 0rpx 6rpx 16rpx 0rpx rgba(0,0,0,0.16);
|
||
.lt {
|
||
width: 80%;
|
||
|
||
.xuhuan {
|
||
display: flex;
|
||
line-height: 50rpx;
|
||
color: rgba(33, 37, 41, 0.6);
|
||
|
||
.yuqi {
|
||
padding: 0 10rpx;
|
||
box-sizing: border-box;
|
||
height: 40rpx;
|
||
text-align: center;
|
||
line-height: 40rpx;
|
||
border-radius: 5px;
|
||
background: rgba(204, 204, 204, 0);
|
||
border: 1px solid rgba(179, 0, 0, 1);
|
||
margin-left: 20rpx;
|
||
color: rgba(179, 0, 0, 1);
|
||
}
|
||
}
|
||
|
||
.bh {
|
||
line-height: 50rpx;
|
||
color: rgba(33, 37, 41, 0.6);
|
||
}
|
||
|
||
.rq {
|
||
line-height: 50rpx;
|
||
color: rgba(33, 37, 41, 0.6);
|
||
}
|
||
|
||
|
||
}
|
||
|
||
.rt {
|
||
padding-top: 50rpx;
|
||
box-sizing: border-box;
|
||
a {
|
||
text-decoration: none;
|
||
display: block;
|
||
width: 128rpx;
|
||
height: 60rpx;
|
||
line-height: 60rpx;
|
||
text-align: center;
|
||
opacity: 1;
|
||
border-radius: 20rpx;
|
||
background: rgba(212, 48, 48, 1);
|
||
color: #fff;
|
||
}
|
||
}
|
||
}
|
||
|
||
|
||
}
|
||
|
||
}
|
||
</style> |