<!--
|
* @Descripttion: 智享云生成二维码
|
* @Author:TM丶
|
* @LastEditors: 小明丶
|
* @Date: 2019-3-1 15:00:00
|
* @LastEditTime: 2019-09-02 11:13:02
|
-->
|
<template>
|
<div class="contract-installment-zxh">
|
<x-header title="公众租机" :left-options="{backText:''}"></x-header>
|
<group>
|
<div class="title">
|
<span class="line"></span>
|
合约信息
|
</div>
|
<selector title='合约套餐' placeholder='请选择' v-model="contId" :options='contList'
|
:value-map="['contCode','contName']" @on-change='contractChange' direction='rtl'></selector>
|
<x-input title='直降金额' v-model.trim="capitalAmt" readonly text-align='right'><span slot="right" style="font-size: 14px;"></span></x-input>
|
<x-input title='电子券金额' v-model.trim="ticketAmt" readonly text-align='right'><span slot="right" style="font-size: 14px;"></span></x-input>
|
<x-input title='月缴话费' v-model.trim="monthlyFees" readonly text-align='right'><span slot="right" style="font-size: 14px;"></span></x-input>
|
<x-input title='期数' v-model.trim="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>
|
<selector title='设备类型' placeholder='请选择' v-model="goodsType" :options='deviceTypeList'
|
:value-map="['code','name']" @on-change='goodsTypeChange' direction='rtl'></selector>
|
<selector v-if="goodsType==1" title='品牌' placeholder='请选择' v-model="goodsBrand" :options='goodsBrandList'
|
:value-map="['skuName','skuName']" @on-change='goodsBrandChange' direction='rtl'></selector>
|
<selector v-if="goodsType==1" title='名称' placeholder='请选择' v-model="goodsModel" :options='goodsModelList'
|
:value-map="['size','size']" @on-change='goodsModelChange' direction='rtl'></selector>
|
<x-input title='价格' v-model.trim="goodsPrice" readonly placeholder='请输入' :max='5' text-align='right'>
|
</x-input>
|
<x-input title='IMEI' v-model.trim="goodsImei" placeholder='请输入' :max='20' text-align='right' v-if="goodsType==1">
|
</x-input>
|
<x-input title='SN' v-model.trim="goodsSn" placeholder='请输入SN' :max='20' text-align='right' v-else>
|
</x-input>
|
|
</group>
|
|
<van-button class="btn" round @click="gzzjOrderCreate">生成二维码</van-button>
|
</div>
|
</template>
|
|
<script>
|
import {
|
XAddress
|
} from 'vux';
|
import QRCode from 'qrcode';
|
import IDValidator from '@/utils/IDValidator';
|
|
export default {
|
name: 'gzzj_createcode',
|
components: {
|
XAddress
|
},
|
data() {
|
return {
|
contList: [],
|
deviceTypeList: [{
|
code: 1,
|
name: "手机",
|
},
|
{
|
code: 2,
|
name: "电子商品",
|
},
|
{
|
code: 3,
|
name: "智能家电",
|
},
|
{
|
code: 4,
|
name: "其他",
|
}],
|
goodsBrandList: [],
|
goodsModelList: [],
|
goodsDescList: [],
|
sibSkuRespVoList: [],
|
contId: '', // 选中的合约
|
contName: '', // 选中的合约
|
capitalAmt:'', //直降金额
|
ticketAmt:'', //电子券金额
|
monthlyFees: '', // 月缴话费
|
term: '', // 期数
|
goodsType: '', // 选中的类型
|
goodsBrand: '', //商品品牌
|
goodsModel: '', //商品名称
|
goodsDesc: '', // 商品描述
|
goodsPrice: '', // 价格
|
goodsImei: '', // IMEI
|
goodsSn: '', //SN
|
}
|
},
|
created() {
|
this.$api.gzzjOrderInit().then(res => {
|
this.contList = res.body.contList;
|
this.sibSkuRespVoList =res.body.sibSkuRespVoList;
|
}, err => err);
|
},
|
watch: {
|
},
|
methods: {
|
// 处理合约的修改
|
contractChange(val) {
|
if (!val) {
|
return;
|
}
|
let currentEle=JSON.parse(JSON.stringify(this.contList)).find(item=>item.contCode===val)
|
this.contId = currentEle.contCode;
|
this.contName = currentEle.contName;
|
this.term = currentEle.term;
|
this.capitalAmt = currentEle.strDownAmt;
|
this.monthlyFees = currentEle.monthConsAmt;
|
this.ticketAmt = currentEle.eleBondAmt;
|
},
|
// 处理合约的修改
|
goodsTypeChange(val) {
|
if (!val) {
|
return;
|
}
|
let indexNum = -1;
|
let currentEle = JSON.parse(JSON.stringify(this.deviceTypeList)).find(item => {
|
//定义一个index,index接收我们找到的全部数据
|
indexNum++;
|
return item.code == val
|
//当我们里面循环的值和我们要找的值相等的时候返回
|
})
|
this.goodsType = currentEle.code;
|
if(this.goodsType== 1) {
|
this.goodsBrandList = this.sibSkuRespVoList[0].phoneSkuReqVoList;
|
}else{
|
this.goodsDescList = this.sibSkuRespVoList[indexNum].ortherSkuReqVoList;
|
}
|
},
|
// 处理合约的修改
|
goodsBrandChange(val) {
|
if (!val) {
|
return;
|
}
|
let indexNum = -1;
|
let currentEle = JSON.parse(JSON.stringify(this.goodsBrandList)).find(item => {
|
//定义一个index,index接收我们找到的全部数据
|
indexNum++;
|
return item.skuName == val
|
//当我们里面循环的值和我们要找的值相等的时候返回
|
})
|
this.goodsBrand = currentEle.skuName;
|
this.goodsModelList = this.goodsBrandList[indexNum].skuSize;
|
},
|
// 处理合约的修改
|
goodsModelChange(val) {
|
if (!val) {
|
return;
|
}
|
let indexNum = -1;
|
let currentEle = JSON.parse(JSON.stringify(this.goodsModelList)).find(item => {
|
//定义一个index,index接收我们找到的全部数据
|
indexNum++;
|
return item.size == val
|
//当我们里面循环的值和我们要找的值相等的时候返回
|
})
|
this.goodsModel = currentEle.size;
|
this.goodsPrice = currentEle.price;
|
},
|
// 处理合约的修改
|
goodsDescChange(val) {
|
if (!val) {
|
return;
|
}
|
let indexNum = -1;
|
let currentEle = JSON.parse(JSON.stringify(this.goodsDescList)).find(item => {
|
//定义一个index,index接收我们找到的全部数据
|
indexNum++;
|
return item.deviceDepict == val
|
//当我们里面循环的值和我们要找的值相等的时候返回
|
})
|
this.goodsDesc = currentEle.deviceDepict;
|
this.goodsPrice = currentEle.price;
|
},
|
// 生成二维码
|
gzzjOrderCreate() {
|
let v = this.$tool;
|
if (v.checkValEmpty(this.contId)) {
|
v.toast('请选择合约套餐');
|
return false;
|
}
|
if (this.goodsType == 1 && v.checkValEmpty(this.goodsType)) {
|
v.toast('请输入商品品牌');
|
return false;
|
}
|
if (this.goodsType == 1 && !/^[A-Za-z0-9\u4e00-\u9fa5]+$/.test(this.goodsBrand)) {
|
v.toast('请选择商品品牌');
|
return false;
|
}
|
if (this.goodsType == 1 && v.checkValEmpty(this.goodsModel)) {
|
v.toast('请选择商品名称');
|
return false;
|
}
|
if (this.goodsType == 1 && v.checkValEmpty(this.goodsImei)) {
|
v.toast('请输入商品IMEI');
|
return false;
|
}else if (this.goodsType != 1 && v.checkValEmpty(this.goodsSn)) {
|
v.toast('请输入商品SN');
|
return false;
|
}
|
this.$api.gzzjOrderPrecreate({
|
contId:Number(this.contId),
|
deviceDepict: this.goodsType,
|
deviceType: this.goodsType,
|
goodsBrand: this.goodsBrand,
|
goodsPrice: this.goodsPrice,
|
goodsModel: this.goodsModel,
|
imeicode: this.goodsImei,
|
sn: this.goodsSn,
|
}).then(res => {
|
this.qrCode = res.body
|
if (this.qrCode) {
|
this.createdQRCode();
|
}
|
}, err => err);
|
},
|
// 生成二维码
|
createdQRCode() {
|
let queryObj = {
|
qrCode:this.qrCode
|
}
|
this.$router.push({
|
path: "/gzzj/gzzjQrCode",
|
query: queryObj
|
})
|
},
|
// 根据城市code 获取拼接的字符串
|
getAddrText(arr) {
|
let str = '';
|
this.cityList.forEach(item => {
|
if (arr.indexOf(item.value) > -1) {
|
str += item.name
|
}
|
})
|
return str;
|
}
|
}
|
};
|
</script>
|
<style lang='less' >
|
.contract-installment-zxh {
|
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;
|
}
|
}
|
}
|
.btn {
|
width: 84%;
|
margin: 0 8%;
|
background: @c-default;
|
color: @c-text-fff;
|
display: block;
|
margin-top: 15px;
|
}
|
</style>
|
