388 lines
8.6 KiB
Vue
388 lines
8.6 KiB
Vue
<template>
|
||
<view class="user-account-limit">
|
||
<view class="block">
|
||
<view class="header">
|
||
<view class="hd-wrap bg-white">
|
||
<view class="user-info flex row-between">
|
||
<view class="repayment-info info flex">
|
||
<text>欠款</text> <text>￥{{xy_y_info.xy_y_price || 0}}</text>
|
||
</view>
|
||
</view>
|
||
<view class="repayment-line"></view>
|
||
<view class="ck flex row-between flex-wrap">
|
||
<view class="num-info flex-1">
|
||
<view class="info">信息备注: 如提前还无手续费，超出三个月将收取利息</view>
|
||
</view>
|
||
<view class="go-repayment" v-if="showPayment" @tap="goRepayment()">去还款</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="see" >
|
||
<router-link to="/bundle/pages/repayment-list/repayment-list">
|
||
<view>还款记录</view>
|
||
</router-link>
|
||
</view>
|
||
</view>
|
||
|
||
<view class="month-block" v-if="xy_y_info.xy_y_price > 1">
|
||
<view class="hd-wrap bg-white">
|
||
<u-tabs :list="tabsList" :is-scroll="false" :current="currentTab" :bold="true" height="100"
|
||
font-size="30rpx" active-color="#333333" inactive-color="#666666" :bar-style="styleTabsBarStyle"
|
||
@change="changeTab" />
|
||
|
||
<view v-if="currentTab == 0" style="height: 600rpx;overflow-y: auto;">
|
||
<scroll-view scroll-x="true" scroll-with-animation="true">
|
||
<view class="month-btn-group">
|
||
<view v-for="(item, index) in monthLis" :key="index" @tap="chooseMonth(index, item.dt_content)" :class="monthCurrent == index ? 'active' : ''">
|
||
{{item.dt_content}} 个月
|
||
</view>
|
||
</view>
|
||
</scroll-view>
|
||
|
||
<view class="month-timeline" style="margin-left: 12rpx;">
|
||
<u-time-line>
|
||
<u-time-line-item nodeTop="2" v-for="(item, index) in planList" :key="index">
|
||
<template v-slot:node>
|
||
<view class="u-node"></view>
|
||
</template>
|
||
<template v-slot:content>
|
||
<view>
|
||
<view class="u-order-title">第{{index + 1}}期</view>
|
||
<view class="u-order-desc bold">
|
||
共还:￥ {{item.xp_aprice}}
|
||
</view>
|
||
<view class="u-order-desc">
|
||
本金: ￥{{item.xp_price}} + 利息: ￥ {{item.xp_interest}}
|
||
</view>
|
||
<view class="u-order-time">还款日期: {{item.xp_price_time}}</view>
|
||
</view>
|
||
</template>
|
||
</u-time-line-item>
|
||
</u-time-line>
|
||
<view class="submit-btn">
|
||
<button v-if="xy_y_info.xy_ap_state == 0" :disabled="btnStatus" :class="btnStatus? 'disabled-style' : 'btn-style'" @click="submit()">提交</button>
|
||
<button v-if="xy_y_info.xy_ap_state == 1" :disabled="true" class="disabled-style" @click="submit()">已开启分期分款</button>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<u-modal v-model="planShow" :content="planContent" @confirm="confirmPlan" @cancel="canclePlan" :show-cancel-button="true"></u-modal>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
import { prepay, getPayway } from '@/api/app'
|
||
import { getRepayment, checkDt, byStages, byStagesSubmit} from '@/api/procurement'
|
||
import { wxpay } from '@/utils/pay'
|
||
import {mapGetters,mapActions} from 'vuex'
|
||
export default {
|
||
data() {
|
||
return {
|
||
planContent: '',
|
||
planShow: false,
|
||
repayment_price: 0,
|
||
monthLis:[],
|
||
planList:[],
|
||
monthCurrent:0,
|
||
btnStatus: false,
|
||
tabsList: [{
|
||
name: '分期还款',
|
||
value: 0,
|
||
}],
|
||
currentTab:0,
|
||
// Tabs滑块样式
|
||
styleTabsBarStyle: {
|
||
backgroundImage: 'linear-gradient(to right, \#F79C0C, \#FF2C3C)'
|
||
},
|
||
dt: 0,
|
||
xy_y_info: [],
|
||
showPayment: false
|
||
};
|
||
},
|
||
onLoad() {
|
||
this.getData();
|
||
this.checkPlanStages()
|
||
},
|
||
methods: {
|
||
...mapActions(['getUser']),
|
||
|
||
async checkPlanStages() {
|
||
const {
|
||
data,
|
||
code,
|
||
msg
|
||
} = await getRepayment()
|
||
if (code == 1) {
|
||
this.xy_y_info = data;
|
||
this.showPayment = true;
|
||
}
|
||
},
|
||
|
||
changeTab(index) {
|
||
this.currentTab = index;
|
||
if (index == 1) {
|
||
this.getSettleStages()
|
||
}
|
||
},
|
||
|
||
async getData() {
|
||
const res = await this.getDt();
|
||
if (res.code == 0) {
|
||
this.$toast({
|
||
title: '数据获取错误'
|
||
});
|
||
return false;
|
||
}
|
||
|
||
this.monthLis = res.data.data;
|
||
this.dt = res.data.data[0].dt_content;
|
||
await this.getFirstMonthRepayment(res.data.data[0].dt_content);
|
||
},
|
||
|
||
getDt(){
|
||
return checkDt().then(res => {
|
||
return Promise.resolve(res)
|
||
}).catch(() => {
|
||
return Promise.reject()
|
||
})
|
||
},
|
||
|
||
async getFirstMonthRepayment(dt) {
|
||
let res = await byStages({dt});
|
||
if (res.code == 1) {
|
||
this.$nextTick(() => {
|
||
this.planList = res.data.data;
|
||
});
|
||
}
|
||
},
|
||
|
||
chooseMonth(index, dt) {
|
||
this.monthCurrent = index;
|
||
this.dt = dt;
|
||
this.getFirstMonthRepayment(dt)
|
||
},
|
||
|
||
confirmPlan() {
|
||
this.submitPlan()
|
||
},
|
||
|
||
async submitPlan() {
|
||
let dt = this.dt;
|
||
let res = await byStagesSubmit({dt});
|
||
if (res.code == 1) {
|
||
this.btnStatus = true;
|
||
this.showPayment = true;
|
||
this.$toast({
|
||
title:'提交成功'
|
||
});
|
||
}
|
||
},
|
||
|
||
canclePlan() {
|
||
this.$toast({
|
||
title:'已取消分期还款'
|
||
})
|
||
},
|
||
|
||
submit() {
|
||
this.planContent = "是否确认分" + this.monthLis[this.monthCurrent].dt_content + "期付款"
|
||
this.planShow = true;
|
||
},
|
||
|
||
goRepayment() {
|
||
uni.navigateTo({
|
||
url: '/bundle/pages/repayment-info/repayment-info'
|
||
});
|
||
}
|
||
},
|
||
computed: {
|
||
...mapGetters(["userInfo"]),
|
||
}
|
||
};
|
||
</script>
|
||
<style lang="scss" scoped>
|
||
|
||
.user-account-limit {
|
||
background-image: url(../../../static/images/index_new_bg.png);
|
||
background-color: #fff;
|
||
min-height: 100vh;
|
||
background-repeat: no-repeat;
|
||
background-size: 100% auto;
|
||
overflow: hidden;
|
||
margin-top: -12rpx;
|
||
|
||
.block {
|
||
position: relative;
|
||
.header {
|
||
margin: 60rpx 20rpx;
|
||
padding-top: 20rpx;
|
||
|
||
.hd-wrap {
|
||
box-shadow: 1px 6px 16px 2px #dfdeea;
|
||
padding-bottom: 20rpx;
|
||
border-radius: 20rpx;
|
||
}
|
||
|
||
.user-info {
|
||
padding: 30rpx;
|
||
}
|
||
|
||
.repayment-info {
|
||
font-weight: bold;
|
||
margin: 0 20rpx;
|
||
|
||
text:first-child {
|
||
margin-top: 10rpx;
|
||
}
|
||
|
||
text:last-child {
|
||
font-size: 48rpx;
|
||
}
|
||
}
|
||
|
||
.repayment-line {
|
||
margin: 20rpx 0rpx 30rpx 50rpx;
|
||
border-bottom: 1px solid #f3f3f3;
|
||
}
|
||
|
||
.num-info {
|
||
margin: 0 50rpx;
|
||
.num {
|
||
font-size: 48rpx;
|
||
font-weight: bold;
|
||
}
|
||
|
||
.info {
|
||
font-size: 24rpx;
|
||
color: #b3b3b3;
|
||
}
|
||
}
|
||
|
||
.go-repayment {
|
||
margin-right: 50rpx;
|
||
font-size: 28rpx;
|
||
font-weight: bold;
|
||
color: #FF2C3C;
|
||
text-decoration: underline;
|
||
}
|
||
}
|
||
|
||
.see {
|
||
position: absolute;
|
||
top: 50%;
|
||
right: 8rpx;
|
||
transform: translateY(-50%);
|
||
background-color: #d2c3c3;
|
||
color: #fff;
|
||
padding: 12rpx;
|
||
font-size: 24rpx;
|
||
border-radius: 12rpx;
|
||
}
|
||
}
|
||
|
||
.repayment-tabs {
|
||
.hd-wrap{
|
||
padding-top: 0 !important;
|
||
}
|
||
}
|
||
|
||
.month-block {
|
||
margin: 0 20rpx;
|
||
padding-bottom: 20rpx;
|
||
|
||
.hd-wrap {
|
||
box-shadow: 1px 6px 16px 2px #dfdeea;
|
||
padding-bottom: 20rpx;
|
||
border-radius: 20rpx;
|
||
padding: 8rpx 50rpx 0 50rpx;
|
||
|
||
.month-text {
|
||
margin-top: 20rpx;
|
||
}
|
||
|
||
.month-btn-group {
|
||
display: inline-block;
|
||
white-space: nowrap;
|
||
margin: 20rpx 0 32rpx 0;
|
||
|
||
view {
|
||
display: inline-flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
background-color: #e0e0e0;
|
||
width: 200rpx;
|
||
height: 52rpx;
|
||
color: #fff;
|
||
margin-right: 10px;
|
||
border-radius: 8rpx;
|
||
}
|
||
view:last-child {
|
||
margin-right: 0;
|
||
}
|
||
|
||
.active {
|
||
background-color: #d2c3c3;
|
||
}
|
||
}
|
||
|
||
.month-timeline{
|
||
padding: 12rpx 0;
|
||
text-align: center;
|
||
.u-node {
|
||
width: 20rpx;
|
||
height: 20rpx;
|
||
border-radius: 50%;
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
background: #FF2C3C;
|
||
}
|
||
|
||
.u-order-title {
|
||
color: #000000;
|
||
font-weight: bold;
|
||
font-size: 32rpx;
|
||
}
|
||
.u-order-desc {
|
||
color: rgb(150, 150, 150);
|
||
font-size: 28rpx;
|
||
margin: 12rpx 0;
|
||
}
|
||
.u-order-time {
|
||
color: rgb(200, 200, 200);
|
||
font-size: 26rpx;
|
||
}
|
||
}
|
||
|
||
.submit-btn {
|
||
width: 100%;
|
||
padding: 36rpx 0;
|
||
.btn-style,
|
||
.repayment-btn {
|
||
width: 100%;
|
||
border: none;
|
||
background: #fb2d2d;
|
||
border-radius: 999rpx;
|
||
color: #fdf8f4;
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
}
|
||
.disabled-style {
|
||
background: #e0e0e0;
|
||
border-radius: 999rpx;
|
||
}
|
||
|
||
.repayment-btn {
|
||
background: #FF2C3C;
|
||
}
|
||
}
|
||
|
||
}
|
||
}
|
||
}
|
||
|
||
|
||
</style> |