<!--
|
* @Author: 小明丶
|
* @Date: 2020-05-21 17:31:49
|
* @LastEditors: zxq
|
* @LastEditTime: 2022-07-08 16:12:18
|
* @Description: 订单详情
|
-->
|
<template>
|
<div class="order-detail-page">
|
<v-navbar
|
title="订单详情"
|
titleColor="#fff"
|
background="linear-gradient(60deg,rgba(75,137,250,1),rgba(105,167,255,1))"
|
>
|
<template slot="left-back">
|
<div>
|
<i
|
class="iconfont iconzuojiantou"
|
style="font-size:22px;font-weight:blod;color:#fff"
|
@click="$router.push('/order/my-order')"
|
></i>
|
</div>
|
</template>
|
</v-navbar>
|
<div class="business-info-box">
|
<div class="business-top">
|
<div class="box">
|
<img src="../../../static/img/pic.png" alt />
|
<span>商品信息</span>
|
</div>
|
</div>
|
<div class="business-mation">
|
<h-cell label="商品名称" v-model="orderInfo.goodsName" readonly></h-cell>
|
<h-cell label="规格" v-model="orderInfo.goodsModel" readonly></h-cell>
|
<h-cell label="成交价格" v-model="orderInfo.goodsAmt" readonly></h-cell>
|
</div>
|
</div>
|
<div class="fenqi-info-box">
|
<div class="fenqi-top">
|
<div class="box">
|
<img src="../../../static/img/pic.png" alt />
|
<span>分期信息</span>
|
</div>
|
</div>
|
<div class="fenqi-mation">
|
<h-cell label="分期金额" v-model="orderInfo.insAmt" readonly></h-cell>
|
<h-cell label="期数" v-model="insTerm" readonly></h-cell>
|
<h-cell label="应还总额" v-model="orderInfo.repayTotalAmt" readonly></h-cell>
|
<h-cell label="交易日期" v-model="orderInfo.payTime" readonly></h-cell>
|
<h-cell label="订单状态" v-model="orderInfo.statusName" readonly></h-cell>
|
<h-cell label="还款状态" v-model="orderInfo.overStatusName" readonly></h-cell>
|
<h-cell v-if="orderInfo.repayPlans" label="还款计划表" isLink readonly @click="goRepaymentPlan"></h-cell>
|
</div>
|
</div>
|
<div style="margin-top:10px;padding:0 26px;background:#fff" v-if="orderInfo.contract2Urls || orderInfo.contract3Urls || orderInfo.contract4Urls || orderInfo.contract5Urls || orderInfo.contract6Urls || orderInfo.contract7Urls">
|
<!-- <div style="margin-top:10px;padding:0 26px;background:#fff" v-if="orderInfo.contract2Urls || orderInfo.contract3Urls || orderInfo.contract4Urls"> -->
|
<!-- orderInfo.contract1Urls || 合同一保理合同暂时不要 -->
|
<h-cell label="相关合同" @click="goContract" isLink readonly></h-cell>
|
</div>
|
<div class="btn-box">
|
<button class="btn-jxsq" v-if="orderInfo.applyBtn==1" @click="doItNext">继续申请</button>
|
<button class="btn-qx" v-if="orderInfo.cancelBtn==1" @click="show=!show">取消订单</button>
|
<button class="btn-jq" v-if="orderInfo.preCloseBtn==1" @click="goSettle">提前结清</button>
|
<button class="btn-hk" v-if="orderInfo.repayBtn==1" @click="goRepayment">主动还款</button>
|
</div>
|
<van-dialog
|
@confirm="onConfirm"
|
v-model="show"
|
show-cancel-button
|
confirmButtonColor="#333333"
|
cancelButtonColor="#666666"
|
>
|
<div class="title-box">
|
<p>确定取消此订单吗？</p>
|
</div>
|
</van-dialog>
|
</div>
|
</template>
|
<script>
|
import Vue from "vue";
|
import { Dialog } from "vant";
|
|
Vue.use(Dialog);
|
export default {
|
data() {
|
return {
|
show: false,
|
orderInfo: {},
|
step:'',//步骤
|
insTerm:'',//期数
|
};
|
},
|
created() {
|
this.init();
|
},
|
methods: {
|
/**初始化**/
|
init() {
|
this.$api.orderUserDetail({orderId: this.$route.query.id }).then(res => {
|
this.orderInfo = res.body;
|
this.insTerm = res.body.insTerm+'期'
|
});
|
},
|
/**订单取消**/
|
onConfirm() {
|
this.$api
|
.orderUserCancel({
|
orderId: this.orderInfo.orderId
|
})
|
.then(res => {
|
this.$tool.toast("订单取消成功");
|
this.init()
|
});
|
},
|
/**跳转还款计划表**/
|
goRepaymentPlan() {
|
this.$router.push({
|
path: "/order/repayment-plan",
|
query: {
|
id: this.orderInfo.orderId
|
}
|
});
|
},
|
/**跳转提前结清**/
|
goSettle() {
|
this.$api.initPreClose({ orderId: this.$route.query.id }).then(({ body }) => {
|
this.$router.push({
|
path: "/order/settlementEarly",
|
query: {
|
id: this.orderInfo.orderId
|
}
|
});
|
})
|
},
|
/**跳转主动还款**/
|
goRepayment() {
|
this.$router.push({
|
path: "/order/active-repayment",
|
query: {
|
id: this.orderInfo.orderId
|
}
|
});
|
},
|
/**继续申请**/
|
doItNext(){
|
this.$api.orderCreateStep().then(res=>{
|
let createStep = res.body.createStep;
|
localStorage.setItem('projId',res.body.projId);
|
this.step = createStep
|
if (res.body.createStep == 0) {
|
this.$router.push('/home/index')
|
}
|
if (res.body.createStep == 1) {
|
this.$router.push("/order-handling/upload-IDcard");
|
}
|
if (res.body.createStep == 2) {
|
//重新人脸识别，先去协议页面;
|
this.$router.push({
|
path: "/order-handling/face-recognition",
|
query: {isFaceBack:'1'}
|
});
|
// let str = location.host
|
// this.$api.getFaceUrl({callbackUrl:`https://${str}/aic_cus/#/order-handling/face-recognition`}).then(res => {
|
// window.location.href = res.body.faceUrl;
|
// });
|
}
|
if (res.body.createStep == 3) {
|
this.$router.push("/order-handling/upload-userInfo");
|
}
|
if (res.body.createStep == 4) {
|
this.$router.push("/order-handling/contract-signing");
|
}
|
if (res.body.createStep == 5) {
|
this.$router.push(res.body.projId=='100000'?"/order-handling/approval-results":"/order-handling/image-upload");
|
}
|
if (res.body.createStep == 6) {
|
this.$router.push("/order-handling/approval-results");
|
}
|
})
|
},
|
/**跳转相关合同页**/
|
goContract(){
|
sessionStorage.contract1Urls = JSON.stringify(this.orderInfo.contract1Urls)
|
sessionStorage.contract2Urls = JSON.stringify(this.orderInfo.contract2Urls)
|
sessionStorage.contract3Urls = JSON.stringify(this.orderInfo.contract3Urls)
|
sessionStorage.contract4Urls = JSON.stringify(this.orderInfo.contract4Urls)
|
sessionStorage.contract5Urls = JSON.stringify(this.orderInfo.contract5Urls)
|
sessionStorage.contract6Urls = JSON.stringify(this.orderInfo.contract6Urls)
|
sessionStorage.contract7Urls = JSON.stringify(this.orderInfo.contract7Urls)
|
this.$router.push({
|
path:'/order/contract',
|
query:{
|
orderId: this.$route.query.id
|
}
|
})
|
},
|
goToSettle(){
|
|
}
|
}
|
};
|
</script>
|
<style lang="less" scoped>
|
.order-detail-page {
|
& {
|
min-height: 100vh;
|
background: @c-back;
|
padding-bottom: 29px;
|
}
|
/deep/.v-cell-box .input[disabled] {
|
opacity: 1;
|
-webkit-opacity: 1;
|
color: #333;
|
-webkit-text-fill-color: #333;
|
}
|
.business-info-box {
|
& {
|
width: 100%;
|
background: #fff;
|
}
|
.business-top {
|
font-size: 15px;
|
font-family: PingFang SC;
|
font-weight: bold;
|
color: rgba(51, 51, 51, 1);
|
padding: 0 10px;
|
.box {
|
border-bottom: 1px solid #e6e6e6;
|
padding: 17px 6px;
|
}
|
img {
|
width: 6px;
|
height: 13px;
|
}
|
}
|
.business-mation {
|
padding: 0 26px;
|
}
|
div:last-of-type {
|
border: 0;
|
}
|
}
|
.fenqi-info-box {
|
& {
|
width: 100%;
|
background: #fff;
|
margin-top: 10px;
|
}
|
.fenqi-top {
|
font-size: 15px;
|
font-family: PingFang SC;
|
font-weight: bold;
|
color: rgba(51, 51, 51, 1);
|
padding: 0 10px;
|
.box {
|
border-bottom: 1px solid #e6e6e6;
|
padding: 17px 6px;
|
}
|
img {
|
width: 6px;
|
height: 13px;
|
}
|
}
|
.fenqi-mation {
|
padding: 0 26px;
|
}
|
div:last-of-type {
|
border: 0;
|
}
|
}
|
.btn-box {
|
& {
|
text-align: center;
|
margin-top: 32px;
|
}
|
.btn-jxsq {
|
width: 155px;
|
height: 44px;
|
background: rgba(231, 240, 255, 1);
|
border: 1px solid rgba(81, 148, 254, 1);
|
border-radius: 22px;
|
outline: none;
|
color: #5194fe;
|
margin-right: 13px;
|
}
|
.btn-jq {
|
width: 155px;
|
height: 44px;
|
background: rgba(231, 240, 255, 1);
|
border: 1px solid rgba(81, 148, 254, 1);
|
border-radius: 22px;
|
outline: none;
|
color: #5194fe;
|
margin-right: 13px;
|
}
|
.btn-hk {
|
outline: none;
|
border: 0;
|
color: #fff;
|
width: 155px;
|
height: 44px;
|
background: rgba(81, 148, 254, 1);
|
border-radius: 22px;
|
}
|
.btn-qx {
|
outline: none;
|
border: 0;
|
color: #fff;
|
width: 155px;
|
height: 44px;
|
background: rgba(81, 148, 254, 1);
|
border-radius: 22px;
|
}
|
}
|
.title-box {
|
& {
|
height: 100px;
|
line-height: 100px;
|
text-align: center;
|
}
|
p {
|
font-size: 16px;
|
font-family: PingFang SC;
|
font-weight: 500;
|
color: rgba(51, 51, 51, 1);
|
}
|
}
|
}
|
</style>
|
