<!--
|
* @Author: 小明丶
|
* @Date: 2019-08-19 16:20:48
|
* @LastEditors: 小明丶
|
* @LastEditTime: 2020-12-09 20:32:32
|
* @Description: 花呗分期——订单详情
|
-->
|
<template>
|
<div class="hb-detail-box h-100-g">
|
<v-navbar title="订单详情" fixed></v-navbar>
|
<div class="content">
|
<div class="cell-group">
|
<van-cell :value="form.chanNo" title='渠道编码' readonly></van-cell>
|
<van-cell :value="form.orderStatusName" title='订单状态' readonly></van-cell>
|
</div>
|
|
<div class="cell-group">
|
<van-cell :value="form.contCode" title='活动代码' readonly></van-cell>
|
<van-cell :value="form.contName" title='活动名称' readonly></van-cell>
|
<van-cell :value="form.term" title='合约期' readonly></van-cell>
|
<van-cell :value="form.guaranteedAmt" title='担保金额' readonly></van-cell>
|
</div>
|
<div class="cell-group" >
|
<van-cell :value="form.userName" title='用户姓名' readonly></van-cell>
|
<van-cell :value="form.regionName" title='归属地' readonly></van-cell>
|
<van-cell :value="form.cardNo" title='身份证号码' readonly></van-cell>
|
<van-cell :value="form.mblNo" title='手机号码' readonly></van-cell>
|
<van-cell :value="form.merName" title='商户名称' readonly></van-cell>
|
</div>
|
|
<!-- <div class="cell-group">
|
<van-cell :value="form.rate + '%'" title='费率' readonly></van-cell>
|
</div> -->
|
</div>
|
<footer class="footer flex-center-g">
|
<van-button class="btn" :color="$store.state.backColor" v-if="form.refundBtnStatus==1" @click="refund">返销</van-button>
|
<van-button class="btn" :color="$store.state.backColor" v-if="form.status==0" @click="showCode">显示支付二维码</van-button>
|
</footer>
|
|
</div>
|
</template>
|
|
<script>
|
import {
|
mapState
|
} from 'vuex';
|
import Vue from 'vue';
|
import { Notify } from 'vant';
|
|
Vue.use(Notify);
|
export default {
|
data() {
|
return {
|
form: {},
|
}
|
},
|
computed: {
|
|
},
|
created() {
|
this.$api.wxScoreDetail({
|
id:this.$route.query.orderId
|
}).then(res => {
|
this.form = res.body || {};
|
}, err => err);
|
},
|
methods: {
|
//退款
|
refund() {
|
this.$dialog.confirm({
|
message: '是否确认返销'
|
}).then(() => {
|
this.$api.wxScoreRefund({
|
id:this.form.id
|
}).then(res => {
|
this.$tool.toast('返销中');
|
}, err => err);
|
}).catch(() => {
|
// on cancel
|
});
|
// this
|
|
},
|
//展示二维码
|
showCode() {
|
if (this.form.payCode) {
|
let queryObj = {
|
payQrCodeUrl:this.form.payCode
|
}
|
this.$router.push({
|
path: "/wx-getWxQRCode",
|
query: queryObj
|
})
|
}
|
}
|
},
|
}
|
</script>
|
<style lang="less" scoped>
|
.showbtn{
|
width: 60%;
|
background: @c-default;
|
color: #fff;
|
position: absolute;
|
bottom: 15px;
|
}
|
.yzmbox{
|
box-sizing: border-box;
|
width: 280px;
|
height: 225px;
|
position: relative;
|
overflow: hidden;
|
// background: #f5f5f5;
|
.flex('', center, center, column);
|
text-align: center;
|
border-radius: 6px;
|
background: #fff;
|
padding-top: 34px;
|
&-close{
|
color: #999;
|
font-size: 16px;
|
position: absolute;
|
right: 8px;
|
top: 8px;
|
}
|
&-contnet{
|
margin-top: 11px;
|
color: #999;
|
font-size: 14px;
|
&-yzm{
|
.flex(center, center);
|
// font-size: 14px;
|
span{
|
font-size: 14px;
|
// color: #999;
|
}
|
|
}
|
&-get{
|
width: 80%;
|
margin: 0 10%;
|
margin-top: 30px;
|
.flex(space-between, center);
|
input{
|
border: none;
|
width: 45%;
|
background: #fff;
|
height: 30px;
|
}
|
&-yzm{
|
color: @c-default;
|
}
|
}
|
}
|
}
|
.yzmOkbox{
|
box-sizing: border-box;
|
width: 280px;
|
height: 225px;
|
position: relative;
|
overflow: hidden;
|
.flex(center, center,'',column);
|
&-img{
|
width: 90px;
|
height: 90px;
|
img{
|
width: 100%;
|
height: 100%;
|
}
|
}
|
p{
|
font-size: 16px;
|
color: #000;
|
margin-top: 16px;
|
}
|
}
|
.status-val-done {
|
color:#19BE6B;
|
}
|
.status-val-refund {
|
color:#FF9900;
|
}
|
.status-val-wait {
|
color:#FF9900;
|
}
|
.status-val-error {
|
color:#ED4014;
|
}
|
.hb-detail-box {
|
padding-top: 44px;
|
background-color: @c-bg-f5;
|
|
.content {
|
padding: 10px 8px;
|
}
|
|
.cell-group {
|
margin-bottom: 10px;
|
}
|
}
|
|
.footer {
|
padding-bottom: 30px;
|
margin: 0 8px;
|
background-color: @c-bg-f5;
|
|
.btn {
|
width: 50%;
|
color: @c-text-fff;
|
background-color: @c-bg-default;
|
}
|
}
|
</style>
|
