<!--
|
* @Descripttion:
|
* @Author: CY
|
* @LastEditors: 小明丶
|
* @Date: 2019-3-1 15:00:00
|
* @LastEditTime: 2019-09-02 11:07:15
|
-->
|
<template>
|
<div class="contract-installment h-100-g">
|
<x-header title="购机直降" :left-options="{backText:''}"></x-header>
|
<group>
|
<div class="title">
|
<span class="line"></span>
|
合约信息
|
</div>
|
<selector title='合约套餐' placeholder='请选择' v-model="selectContract" :options='contractList'
|
:value-map="['contId','contName']" @on-change='handleChangeContract' direction='rtl'></selector>
|
<x-input title='结算金额' v-model.trim="selectConInfo.capitalAmt" readonly text-align='right'><span slot="right"
|
style="font-size: 14px;">元</span></x-input>
|
<x-input title='月缴话费' v-model.trim="selectConInfo.monthlyFees" readonly text-align='right'><span
|
slot="right" style="font-size: 14px;">元</span></x-input>
|
<x-input title='月还款额' v-model.trim="selectConInfo.monthlyPayments" readonly text-align='right'><span
|
slot="right" style="font-size: 14px;">元</span></x-input>
|
<x-input title='期数' v-model.trim="selectConInfo.term" readonly text-align='right'><span slot="right"
|
style="font-size: 14px;">期</span></x-input>
|
</group>
|
<f-space></f-space>
|
<group>
|
<div class="title">
|
<span class="line"></span>
|
商品信息
|
</div>
|
<x-input title='品牌' v-model.trim="goodsInfo.goodsBrand" placeholder='请输入' :max='10' text-align='right'>
|
</x-input>
|
<x-input title='名称' v-model.trim="goodsInfo.goodsName" placeholder='请输入' :max='10' text-align='right'>
|
</x-input>
|
<x-input title='型号' v-model.trim="goodsInfo.goodsModel" placeholder='请输入' :max='15' text-align='right'>
|
</x-input>
|
<x-input title='价格' v-model.trim="goodsInfo.goodsPrice" placeholder='请输入' :max='5' text-align='right'>
|
</x-input>
|
</group>
|
<f-button fixed @on-click='createdQRCode'>生成二维码</f-button>
|
</div>
|
</template>
|
|
<script>
|
import QRCode from 'qrcode';
|
|
export default {
|
name: 'contract-installment',
|
data() {
|
return {
|
selectContract: '', // 选中的合约
|
// 合约信息
|
selectConInfo: {
|
capitalAmt: '', // 结算金额
|
monthlyFees: '', // 月缴话费
|
monthlyPayments: '', // 月还款额
|
term: '', // 期数
|
},
|
// 商品信息
|
goodsInfo: {
|
goodsBrand: '', //商品品牌
|
goodsName: '', //商品名称
|
goodsModel: '', // 商品型号
|
goodsPrice: '', // 价格
|
// goodsImei: '', // IMEI
|
},
|
// 营业厅联系人信息
|
contactInfo: {
|
hallName: "", //营业厅名称
|
hallAddr: "", //营业厅地址
|
sellName: "", //联系人名称
|
sellNum: "", //联系人手机
|
sellCardNo: "", //联系人身份证
|
},
|
contractList: [], // 合约列表
|
};
|
},
|
methods: {
|
// 处理合约的修改
|
handleChangeContract(val) {
|
if (!val) {
|
return;
|
}
|
this.selectConInfo = this.contractList.find((item) => {
|
return item.contId === val;
|
})
|
},
|
// 生成二维码
|
createdQRCode() {
|
let v = this.$tool;
|
if (v.checkValEmpty(this.selectContract)) {
|
v.toast('请选择合约套餐');
|
return false;
|
}
|
if (v.checkValEmpty(this.goodsInfo.goodsBrand)) {
|
v.toast('请输入商品品牌');
|
return false;
|
}
|
if (!/^[A-Za-z0-9\u4e00-\u9fa5]+$/.test(this.goodsInfo.goodsBrand)) {
|
v.toast('请输入文字/字母/数字且不包含特殊字符的商品品牌');
|
return false;
|
}
|
if (v.checkValEmpty(this.goodsInfo.goodsName)) {
|
v.toast('请输入商品名称');
|
return false;
|
}
|
if (!/^[A-Za-z0-9\u4e00-\u9fa5]+$/.test(this.goodsInfo.goodsName)) {
|
v.toast('请输入文字/字母/数字且不包含特殊字符的商品名称');
|
return false;
|
}
|
if (v.checkValEmpty(this.goodsInfo.goodsModel)) {
|
v.toast('请输入商品型号');
|
return false;
|
}
|
if (v.checkValEmpty(this.goodsInfo.goodsPrice)) {
|
v.toast('请输入商品价格');
|
return false;
|
}
|
if (!/^[1-9]\d{0,4}/.test(this.goodsInfo.goodsPrice)) {
|
v.toast('请输入商品正确的价格');
|
return false;
|
}
|
|
let queryObj = {
|
...this.selectConInfo,
|
...this.goodsInfo,
|
mgrId: sessionStorage.sid, // 办单员id
|
contId: this.selectContract, // 合约id
|
typeId: this.$route.query.typeId
|
};
|
|
|
this.$router.push({
|
path: "/contract-qrcode",
|
query: queryObj
|
})
|
},
|
},
|
created() {
|
// 初始化合约列表
|
this.$api.contractList({
|
typeId:+this.$route.query.typeId
|
}).then(res => {
|
this.contractList = res.body;
|
}, err => err);
|
},
|
};
|
|
</script>
|
|
|
<style lang='less' scoped>
|
.contract-installment {
|
padding-top: 54px;
|
background-color: #f1f1f1;
|
padding-bottom: 80px;
|
overflow-y: scroll;
|
|
.title {
|
padding: 14px 12px;
|
font-size: 15px;
|
color: #333;
|
|
.line {
|
display: inline-block;
|
width: 2px;
|
height: 16px;
|
margin-right: 8px;
|
background: @color-text-three;
|
vertical-align: middle;
|
margin-top: -1px;
|
}
|
}
|
}
|
|
</style>
|
