<!--
|
* @Author: 小明丶
|
* @Date: 2020-06-08 10:25:54
|
* @LastEditors: 小明丶
|
* @LastEditTime: 2020-06-13 19:04:28
|
* @Description: 花呗间联办单
|
-->
|
<template>
|
<div class="creat-hbjl-page">
|
<v-navbar title="创建订单"></v-navbar>
|
<div class="order-info-box">
|
<van-field center clearable label="还款期数">
|
<template #button>
|
<div>
|
<button
|
v-for="(item,index) in btnList"
|
:key="index"
|
style="margin:0 5px"
|
:class="isAct==index?'act':'noAct'"
|
@click="getTerm(item,index)"
|
>{{item.name}}期</button>
|
</div>
|
</template>
|
</van-field>
|
<van-field v-model="form.userAmt" label="到账金额" placeholder="请输入到账金额" @input="getTrial(1)" input-align="right" />
|
<van-field v-model="form.insAmt" label="还款金额" placeholder="请输入还款金额" @input="getTrial(2)" input-align="right" />
|
</div>
|
<div class="btn-box">
|
<button class="btn" @click="goNext">生成二维码</button>
|
<p>
|
<span>推广码：{{inviteCode}}</span>
|
<button class="small-btn" @click="copy">复制</button>
|
</p>
|
</div>
|
<van-dialog v-model="show" title="提示" confirmButtonColor="#423D5D" @confirm="onConfirm" show-cancel-button>
|
<div class="tip-box">
|
<p>由于相关政策及对应计算</p>
|
<p>还款金额发送变动</p>
|
<p>当前还款金额为：{{form.insAmt}}元</p>
|
</div>
|
</van-dialog>
|
</div>
|
</template>
|
<script>
|
import {_copyToClipboard} from '@/utils/index';
|
import Vue from "vue";
|
import { Field } from "vant";
|
import { Dialog } from "vant";
|
|
Vue.use(Dialog);
|
Vue.use(Field);
|
export default {
|
data() {
|
return {
|
form: {
|
insAmt: "",
|
userAmt: "",
|
term: ''
|
},
|
show:false,
|
isAct: 0,
|
btnList: [],
|
inviteCode:'',
|
mgrId:''
|
};
|
},
|
created() {
|
this.$api.hbjlOrderInit().then(res => {
|
this.btnList = res.body.terms;
|
this.inviteCode = res.body.inviteCode
|
this.mgrId = res.body.mgrId
|
this.form.term = res.body.terms[0].code
|
});
|
},
|
methods: {
|
getTrial(i) {
|
if(i==1){
|
this.$api.hbjlOrderTrial({
|
insAmt:'',
|
userAmt:this.form.userAmt,
|
term:this.form.term
|
}).then(res=>{
|
this.form.insAmt = res.body.insAmt
|
this.form.userAmt = res.body.userAmt
|
})
|
}
|
if(i==2){
|
this.$api.hbjlOrderTrial({
|
insAmt:this.form.insAmt,
|
userAmt:'',
|
term:this.form.term
|
}).then(res=>{
|
this.form.insAmt = res.body.insAmt
|
this.form.userAmt = res.body.userAmt
|
})
|
}
|
},
|
// 期数选择
|
getTerm(item, index) {
|
this.isAct = index;
|
this.form.term = item.code;
|
},
|
goNext() {
|
this.show = true
|
|
},
|
onConfirm(){
|
this.$router.push({
|
path:'/hbjl-qr',
|
query:{
|
...this.form,
|
inviteCode:this.inviteCode,
|
mgrId:this.mgrId,
|
}
|
})
|
},
|
copy() {
|
_copyToClipboard(this.inviteCode);
|
this.$notify_success('复制成功');
|
},
|
}
|
};
|
</script>
|
<style lang="less" scoped>
|
.creat-hbjl-page {
|
& {
|
min-height: 100vh;
|
background: #efefef;
|
}
|
.order-info-box {
|
& {
|
background: #fff;
|
border-radius: 3px;
|
width: 359px;
|
min-height: 150px;
|
margin: 10px auto;
|
}
|
button {
|
width: 50px;
|
height: 28px;
|
outline: none;
|
border-radius: 3px;
|
}
|
.act {
|
background: rgba(244, 241, 255, 1);
|
border: 1px solid rgba(137, 110, 219, 1);
|
color: #896edb;
|
}
|
.noAct {
|
background: rgba(255, 255, 255, 1);
|
border: 1px solid rgba(230, 230, 230, 1);
|
}
|
}
|
.btn-box {
|
& {
|
text-align: center;
|
margin-top: 60px;
|
}
|
.btn {
|
width: 320px;
|
height: 44px;
|
background: rgba(137, 110, 219, 1);
|
border-radius: 22px;
|
border: 0;
|
outline: none;
|
color: #fff;
|
}
|
p{
|
margin-top: 24px;
|
.small-btn{
|
width:60px;
|
height:20px;
|
background:rgba(244,241,255,1);
|
border:1px solid rgba(137,110,219,1);
|
border-radius:3px;
|
font-size: 12px;
|
color: #896EDB;
|
}
|
}
|
}
|
.tip-box{
|
font-size:14px;
|
font-family:PingFang SC;
|
font-weight:500;
|
color:rgba(102,102,102,1);
|
line-height:20px;
|
text-align: center;
|
padding: 24px 0;
|
}
|
}
|
</style>
|
