<!--
|
* @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="selectContract" :options='contractList'
|
:value-map="['contId','contName']" @on-change='contractChange' 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.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>
|
<x-input title='IMEI' v-model.trim="goodsInfo.goodsImei" placeholder='请输入' :max='20' text-align='right'>
|
</x-input>
|
|
</group>
|
|
<van-button class="btn" round @click="submit">生成二维码</van-button>
|
</div>
|
</template>
|
|
<script>
|
import {
|
XAddress
|
} from 'vux';
|
import QRCode from 'qrcode';
|
import IDValidator from '@/utils/IDValidator';
|
|
export default {
|
name: 'heyd_createcode',
|
components: {
|
XAddress
|
},
|
data() {
|
return {
|
cityList: [],
|
selectContract: '', // 选中的合约
|
// 合约信息
|
selectConInfo: {
|
capitalAmt: '', // 结算金额
|
monthlyFees: '', // 月缴话费
|
term: '', // 期数
|
},
|
// 商品信息
|
goodsInfo: {
|
goodsBrand: '', //商品品牌
|
goodsName: '', //商品名称
|
goodsModel: '', // 商品型号
|
goodsPrice: '', // 价格
|
goodsImei: '', // IMEI
|
},
|
contractList: [], // 合约列表
|
}
|
},
|
created() {
|
this.initWXToken(location.origin + location.pathname);
|
this.$api.h_contractList({
|
typeId: this.$route.query.typeId
|
}).then(res => {
|
this.contractList = res.body;
|
}, err => err);
|
this.$api.getArea().then(res => {
|
this.cityList = res.body.provList;
|
});
|
},
|
watch: {
|
},
|
methods: {
|
initWXToken(parUrl) {
|
this.$api.getTokenInfo({
|
url: parUrl
|
}).then(
|
function (res) {
|
if (res.errorCode === 0) {
|
// 第二步骤 只需要首页地址分享 ,需要在每次变化时调用
|
wx.config({
|
debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
|
appId: res.body.appId,
|
timestamp: res.body.timestamp, // 必填，生成签名的时间戳
|
nonceStr: res.body.nonceStr, // 必填，生成签名的随机串
|
signature: res.body.signature, // 必填，签名，见附录1
|
jsApiList: [
|
'checkJsApi',
|
'scanQRCode',
|
'getLocation'
|
] // 必填，需要使用的JS接口列表，所有JS接口列表见附录2
|
});
|
}
|
},
|
function (error) {
|
if (error.response) {
|
console.log(error.response);
|
}
|
}
|
);
|
},
|
getLocation(){
|
console.log('getLocation');
|
let _this = this;
|
wx.getLocation({
|
type: 'wgs84',
|
success: function (res) {
|
console.log(JSON.stringify(res));
|
let longitude = res.longitude
|
let latitude = res.latitude
|
_this.$api.gpsAddr({
|
gpsAddrLongitude: longitude,
|
gpsAddrLatitude: latitude
|
}).then(res => {
|
console.log('gpsSucess');
|
}, err => err);
|
},
|
cancel: function (res) {
|
console.log('用户拒绝授权获取地理位置');
|
_this.$api.gpsAddr({
|
gpsAddrLongitude: '',
|
gpsAddrLatitude: ''
|
}).then(res => {
|
console.log('gpsfail');
|
}, err => err);
|
}
|
})
|
},
|
// 处理合约的修改
|
contractChange(val) {
|
if (!val) {
|
return;
|
}
|
this.selectConInfo = this.contractList.find((item) => {
|
return item.contId === val;
|
})
|
},
|
// 生成二维码
|
submit() {
|
this.getLocation();
|
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;
|
}
|
if (v.checkValEmpty(this.goodsInfo.goodsImei)) {
|
v.toast('请输入商品IMEI');
|
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
|
})
|
},
|
// 根据城市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>
|
