<!--
|
* @Descripttion: 智享云生成二维码
|
* @Author:TM丶
|
* @LastEditors: 小明丶
|
* @Date: 2019-3-1 15:00:00
|
* @LastEditTime: 2020-11-13 17:25:14
|
-->
|
<template>
|
<div class="contract-installment-zxh">
|
<van-nav-bar title="信用购">
|
<i class="iconfont iconzuojiantou" slot="left" style="font-size:20px;color:#333;font-weight:blod" @click="goFrom"></i>
|
</van-nav-bar>
|
<div class="heyue-info">
|
<p class="tit">
|
<span>合约信息</span>
|
<span></span>
|
</p>
|
<!-- <div style="margin-bottom:16px">
|
<p style="margin-bottom:10px">
|
<span style="color:#999999;font-size:13px">合约套餐</span>
|
<span style="color:#FF6666;font-size:13px">*</span>
|
</p>
|
<el-select v-model="selectContract" placeholder="请选择">
|
<el-option
|
v-for="item in contractList"
|
:key="item.value"
|
:label="item.label"
|
:value="item.value">
|
</el-option>
|
</el-select>
|
</div> -->
|
<Ipt :type="'text'" :mustFill="true" :tit="'合约套餐'" :readonly="true" v-model="contName"></Ipt>
|
<Ipt :type="'text'" :mustFill="true" :tit="'结算金额'" :readonly="true" v-model="selectConInfo.capitalAmt"></Ipt>
|
<Ipt :type="'text'" :mustFill="true" :tit="'月缴话费'" :readonly="true" v-model="selectConInfo.monthlyFees"></Ipt>
|
<Ipt :type="'text'" :mustFill="true" :tit="'期数'" :readonly="true" v-model="selectConInfo.term"></Ipt>
|
</div>
|
<div class="sp-info">
|
<p class="tit">
|
<span>商品信息</span>
|
<span></span>
|
</p>
|
<div style="margin-bottom:16px">
|
<p style="margin-bottom:10px">
|
<span style="color:#999999;font-size:13px">商品类型</span>
|
</p>
|
<el-select v-model="goodsInfo.goodsType" placeholder="请选择">
|
<el-option
|
v-for="item in columns"
|
:key="item.code"
|
:label="item.name"
|
:value="item.code"
|
@change="onConfirm">
|
</el-option>
|
</el-select>
|
</div>
|
<Ipt :type="'text'" :tit="'品牌'" :placeholder="'请输入品牌'" :readonly="false" v-model="goodsInfo.goodsBrand"></Ipt>
|
<Ipt :type="'text'" :tit="'名称'" :placeholder="'请输入名称'" :readonly="false" v-model="goodsInfo.goodsName"></Ipt>
|
<Ipt :type="'text'" :tit="'型号'" :placeholder="'请输入型号'" :readonly="false" v-model="goodsInfo.goodsModel"></Ipt>
|
<Ipt :type="'text'" :tit="'价格'" :placeholder="'请输入价格'" :readonly="false" v-model="goodsInfo.goodsPrice"></Ipt>
|
<Ipt :type="'text'" :tit="'IMEI'" :placeholder="'请输入IMEI'" :readonly="false" v-model.trim="goodsInfo.goodsImei" v-if="goodsInfo.goodsType==1"></Ipt>
|
<Ipt :type="'text'" :tit="'SN'" v-model.trim="goodsInfo.goodsSn" placeholder='请输入SN' :max='20' v-else></Ipt>
|
</div>
|
<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';
|
import Vue from 'vue';
|
import { Picker } from 'vant';
|
import Ipt from '../../../../components/common/h-ipt'
|
Vue.use(Picker);
|
export default {
|
name: 'xyg_createcode',
|
components: {
|
XAddress,Ipt
|
},
|
data() {
|
return {
|
value:'',
|
showPicker: false,//弹出层
|
|
cityList: [],
|
selectContract: '', // 选中的合约
|
contName:'',//合约名称
|
// 合约信息
|
selectConInfo: {
|
capitalAmt: '', // 结算金额
|
monthlyFees: '', // 月缴话费
|
term: '', // 期数
|
},
|
// 商品信息
|
goodsInfo: {
|
//selectContract: '', // 选中的合约
|
goodsBrand: '', //商品品牌
|
goodsName: '', //商品名称
|
goodsModel: '', // 商品型号
|
goodsPrice: '', // 价格
|
goodsImei: '', // IMEI
|
goodsSn: '', // SN
|
goodsType:'',//设备类型，1-手机（IMEI）2-电子商品、3-智能家电、4-其他（SN）
|
},
|
contractList: [], // 合约列表
|
columns: [],//设备下拉表
|
}
|
},
|
created() {
|
if(sessionStorage.hb_session_info){
|
this.goodsInfo = JSON.parse(sessionStorage.hb_session_info)
|
}
|
this.contName = this.$route.query.prodName;
|
this.selectContract = this.$route.query.prodId
|
this.selectConInfo.capitalAmt = this.$route.query.prodAmt
|
this.selectConInfo.monthlyFees = this.$route.query.monthlyFees //月缴话费
|
this.selectConInfo.term = this.$route.query.term
|
|
this.initWXToken(location.origin + location.pathname);
|
this.$api.getGoodsTypeList().then(res=>{
|
this.columns = res.body.prodTypes
|
})
|
this.$api.getArea().then(res => {
|
this.cityList = res.body.provList;
|
});
|
},
|
watch: {
|
},
|
methods: {
|
// 返回上一页
|
goFrom(){
|
this.$router.go(-1)
|
},
|
onConfirm() {
|
console.log(this.goodsInfo.goodsType)
|
// this.value = value
|
// this.goodsInfo.goodsType = index+1;
|
//this.showPicker = false;
|
if(this.goodsInfo.goodsType==1||this.goodsInfo.goodsType==''){
|
this.goodsInfo.goodsSn = ''
|
}else{
|
this.goodsInfo.goodsImei = ''
|
}
|
},
|
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(this.goodsInfo.goodsType == 1){
|
if (v.checkValEmpty(this.goodsInfo.goodsImei)) {
|
v.toast('请输入商品IMEI');
|
return false;
|
}
|
}else{
|
if (v.checkValEmpty(this.goodsInfo.goodsSn)) {
|
v.toast('请输入商品SN');
|
return false;
|
}
|
}
|
if (v.checkValEmpty(this.goodsInfo.goodsType)) {
|
v.toast('请选择设备类型');
|
return false;
|
}
|
// 用来整体存储缓存数据
|
let hb_session_info = {
|
...this.goodsInfo
|
}
|
sessionStorage.hb_session_info = JSON.stringify(hb_session_info)
|
|
let queryObj = {
|
...this.selectConInfo,
|
...this.goodsInfo,
|
mgrId: sessionStorage.sid, // 办单员id
|
contId: this.selectContract, // 合约id
|
contName: this.contName,
|
typeId: this.$route.query.typeId,
|
seq:this.$route.query.seq
|
};
|
|
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 {
|
min-height: 100vh;
|
background-color: #f1f1f1;
|
padding-bottom: 80px;
|
//overflow-y: scroll;
|
input::-webkit-input-placeholder{color:#333333;}
|
.van-cell {
|
padding: 0.22rem 0.32rem 0.22rem 8px;
|
border: 1px solid #CDD3F6;
|
border-radius: 4px;
|
background-color: #F9FAFF;
|
margin-bottom: 16px;
|
}
|
.van-cell:after {
|
content: " ";
|
position: absolute;
|
left: 0.3rem;
|
top: 0;
|
right: 0;
|
height: 0.02rem;
|
width: 98%;
|
border-top: 0.02rem solid #D9D9D9;
|
color: #D9D9D9;
|
transform-origin: 0 100%;
|
transform: scaleY(0.5);
|
}
|
.van-nav-bar__title {
|
max-width: 60%;
|
margin: 0 auto;
|
color: #333;
|
font-weight: bold;
|
font-size: 16px;
|
}
|
.el-input__inner{
|
background-color: #F9FAFF;
|
padding-left: 8px;
|
}
|
.el-select{
|
width: 100%;
|
height: 40px;
|
}
|
.heyue-info{
|
width:100%;
|
height:385px;
|
background:rgba(255,255,255,1);
|
box-shadow:1px 5px 13px 0px rgba(0, 0, 0, 0.08);
|
margin-top: 12px;
|
box-sizing: border-box;
|
padding: 17px 20px 0 20px;
|
.tit{
|
margin-bottom: 19px;
|
color: #6C4AD5;
|
font-size: 16px;
|
position: relative;
|
span:nth-of-type(1){
|
display: inline-block;
|
font-weight: bold;
|
}
|
span:nth-of-type(2){
|
display: inline-block;
|
width:64px;
|
height:7px;
|
background:rgba(255,236,190,0.5);
|
position: absolute;
|
left: 0;
|
bottom: 0;
|
}
|
}
|
}
|
.sp-info{
|
width:375px;
|
height:560px;
|
background:rgba(255,255,255,1);
|
box-shadow:1px 5px 13px 0px rgba(0, 0, 0, 0.08);
|
border-radius:3px;
|
margin-top: 15px;
|
box-sizing: border-box;
|
padding: 17px 20px 0 20px;
|
.tit{
|
margin-bottom: 19px;
|
color: #6C4AD5;
|
font-size: 16px;
|
position: relative;
|
span:nth-of-type(1){
|
display: inline-block;
|
font-weight: bold;
|
}
|
span:nth-of-type(2){
|
display: inline-block;
|
width:64px;
|
height:7px;
|
background:rgba(255,236,190,0.5);
|
position: absolute;
|
left: 0;
|
bottom: 0;
|
}
|
}
|
}
|
.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: 24px;
|
}
|
</style>
|
