|
<template>
|
<div class="lthyj">
|
<v-navbar title="办理合约"></v-navbar>
|
<div class="info">
|
<div class="hyInfo">
|
<div class="title">合约信息</div>
|
<van-field readonly clickable
|
label="合约套餐"
|
:value="selectConInfo.contName"
|
placeholder="选择合约套餐"
|
@click="showPicker = true"
|
/>
|
<van-cell title="月缴话费" :value="selectConInfo.monthConsAmt | dealMoney" />
|
<van-cell title="期数" :value="selectConInfo.term | dealTerm" />
|
<van-cell title="电子券金额" :value="selectConInfo.eleBondAmt | dealMoney" />
|
<van-cell title="直降金额" :value="selectConInfo.strDownAmt | dealMoney" />
|
</div>
|
<div class="spInfo">
|
<div class="title">商品信息</div>
|
<van-cell-group>
|
<van-field v-model.trim="goodsInfo.goodsBrand" label="品牌" placeholder="请输入品牌" />
|
<van-field v-model.trim="goodsInfo.goodsModel" label="规格" placeholder="请输入规格" />
|
<van-field v-model.trim="goodsInfo.goodsPrice" label="价格" placeholder="请输入价格" />
|
</van-cell-group>
|
</div>
|
</div>
|
<van-button round type="info" color="#896EDB" class="btn" @click='createdQRCode'>生成二维码</van-button>
|
<van-popup v-model="showPicker" round position="bottom">
|
<van-picker
|
show-toolbar
|
:columns="columns"
|
@cancel="showPicker = false"
|
@confirm="onConfirm"
|
/>
|
</van-popup>
|
</div>
|
</template>
|
|
<script>
|
import QRCode from 'qrcode';
|
export default {
|
name: 'lthyj',
|
data() {
|
return {
|
columns: [],
|
tcInfoList: [],
|
showPicker: false,
|
// 合约信息
|
selectConInfo: {
|
contId: '',
|
eleBondAmt: '',
|
monthConsAmt: '',
|
strDownAmt: '',
|
contName: '',
|
term: ''
|
},
|
// 商品信息
|
goodsInfo: {
|
goodsBrand: '', //商品品牌
|
goodsModel: '', // 商品型号
|
goodsPrice: '' // 价格
|
},
|
};
|
},
|
filters: {
|
dealMoney(val) {
|
return val ? `${val}元` : ''
|
},
|
dealTerm(val) {
|
return val ? `${val}期` : ''
|
}
|
},
|
created() {
|
this.init()
|
},
|
methods: {
|
init() {
|
this.$api.cuccOrderInit().then(res => {
|
this.tcInfoList = res.body
|
this.columns = res.body.map(it => {
|
return it.contName
|
})
|
});
|
},
|
onConfirm(picker, value) {
|
console.log(picker, value)
|
this.selectConInfo.contId = this.tcInfoList[value].contId
|
this.selectConInfo.eleBondAmt = this.tcInfoList[value].eleBondAmt
|
this.selectConInfo.monthConsAmt = this.tcInfoList[value].monthConsAmt
|
this.selectConInfo.strDownAmt = this.tcInfoList[value].strDownAmt
|
this.selectConInfo.contName = this.tcInfoList[value].contName
|
this.selectConInfo.term = this.tcInfoList[value].term
|
|
this.showPicker = false;
|
},
|
// 生成二维码
|
createdQRCode() {
|
let v = this.$tool;
|
if (v.checkValEmpty(this.selectConInfo.contName)) {
|
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.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.goodsInfo,
|
contId: this.selectConInfo.contId, // 合约id
|
};
|
this.$api.cuccOrderPreCreate(queryObj).then(res => {
|
console.log(res)
|
this.$router.push({
|
path: "/lthyj-qrcode",
|
query: {
|
str: res.body
|
}
|
})
|
});
|
|
},
|
}
|
};
|
|
</script>
|
|
|
<style lang='less' scoped>
|
.lthyj {
|
width: 100%;
|
height: 100%;
|
background: #F3F4F5;
|
.van-cell {
|
height: 50px;
|
}
|
.info {
|
padding: 0 16px;
|
.hyInfo, .spInfo {
|
width: 100%;
|
background: #fff;
|
border-radius: 6px;
|
// padding: 0 12px;
|
margin-top: 10px;
|
box-sizing: border-box;
|
.title {
|
padding-left: 12px;
|
height: 50px;
|
line-height: 50px;
|
font-size: 16px;
|
font-family: PingFang SC;
|
font-weight: bold;
|
color: #423D5D;
|
border-bottom: 1px solid #E9E9E9;
|
}
|
}
|
}
|
.btn {
|
margin: 40px 0 20px 10% ;
|
width: 80%;
|
}
|
}
|
|
</style>
|
<style scoped>
|
.spInfo >>> .van-field__control {
|
text-align: right;
|
}
|
.hyInfo >>> .van-field__control {
|
text-align: right;
|
}
|
</style>
|
