From 6e7a788dd0814a93d2690991e7df8c0c6bbfd2c2 Mon Sep 17 00:00:00 2001 From: zhaoxiaoqiang <287285524@qq.com> Date: Thu, 16 Sep 2021 10:54:20 +0800 Subject: [PATCH] wenzidaxiao --- src/views/old/store/wx-pay-score.vue | 863 ++++++++++++++++++++++++++++++++++----------------------- 1 files changed, 512 insertions(+), 351 deletions(-) diff --git a/src/views/old/store/wx-pay-score.vue b/src/views/old/store/wx-pay-score.vue index d93a16d..f46927e 100644 --- a/src/views/old/store/wx-pay-score.vue +++ b/src/views/old/store/wx-pay-score.vue @@ -1,416 +1,577 @@ <!-- * @Date: 2019-08-30 13:38:35 - * @LastEditors: 小明丶 - * @LastEditTime: 2020-12-09 15:17:58 + * @LastEditors: Please set LastEditors + * @LastEditTime: 2021-09-16 10:53:54 * @Description: --> <template> <div class="hb-credit-installment h-100-g"> - <!-- <x-header title="办理分期" :left-options="{backText:''}"></x-header> --> - <!-- <tab :line-width=1 active-color='#bfa073'> - <tab-item v-for="(item, index) in tabList" :key="index" :selected="activeTab === index" - @on-item-click="handleTabChange(index)">{{ item }}</tab-item> - </tab> --> - <van-nav-bar title="和微分" left-text="返回" left-arrow @click-left="onClickLeft" style="line-height: 43px;"> - <i class="iconfont iconzuojiantou" slot="left" style="font-size: 25px;"></i> - </van-nav-bar> + <van-nav-bar + title="和微分" + left-text="返回" + left-arrow + fixed + @click-left="onClickLeft" + style="line-height: 43px;" + > + <i + v-if='hnOrnxtype==410000' + class="iconfont iconzuojiantou" + slot="left" + style="font-size: 25px;" + ></i> + <span v-else slot="left" > + + </span> + </van-nav-bar> <div class="search"> - <selector title='活动编码' placeholder='请选择' @on-change='handleContIdChange' v-model="contSendCode" - :options='form.cmccWxpayContList' :value-map="['contCode','contName']" direction='rtl'></selector> + <van-field + rows="1" + input-align='right' + readonly + autosize + type="textarea" + :label="hnOrnxtype==410000?'活动编码':'活动名称'" + :value="contName" + placeholder="请选择" + @click="showPicker = true" + /> + <!-- <selector + :title="hnOrnxtype==410000?'活动编码':'活动名称'" + placeholder="请选择" + @on-change="handleContIdChange" + v-model="contSendCode" + :options="form.cmccWxpayContList" + :value-map="['contCode', 'contName']" + direction="rtl" + ></selector> --> + </div> - <group class="group-content"> + <group class="group-content"> <div class="title"> - <span class="line" :style="{background:$store.state.defaultBgColor}"></span> + <span + class="line" + :style="{ background: $store.state.defaultBgColor }" + ></span> 活动信息 </div> - <div class="form-content"> - <x-input title='活动ID' v-model.trim="contSendCode" readonly text-align='right'></x-input> - <x-input title='活动名称' v-model.trim="contName" readonly text-align='right'></x-input> - <x-input title='合约期' v-model.trim="term" readonly text-align='right'></x-input> - <x-input title='担保金额' v-model.trim="guaranteedAmt" readonly text-align='right'></x-input> + <div class="form-content"> + <van-field + label="活动ID" + v-model.trim="contSendCode" + readonly + input-align="right" + ></van-field> + <van-field + v-model="contName" + rows="1" + input-align='right' + readonly + autosize + label="活动名称" + type="textarea" + /> + <van-field + label="合约期" + v-model.trim="term" + readonly + input-align="right" + ></van-field> + <van-field + label="担保金额" + v-model.trim="guaranteedAmt" + readonly + input-align="right" + ></van-field> </div> - <div style="height: 10px; background: #f5f5f5;"></div> + <div style="height: 10px; background: #f5f5f5;"></div> <div class="title" style="border-radius:6px;"> - <span class="line" :style="{background:$store.state.defaultBgColor}"></span> + <span + class="line" + :style="{ background: $store.state.defaultBgColor }" + ></span> 用户信息 </div> <div class="form-content"> - <selector title='手机号类型' placeholder='请选择' @on-change='handleMblTypeChange' v-model="mblNoType" - :options='form.mblNoTypeList' :value-map="['code','name']" direction='rtl'></selector> - <x-input title='用户姓名' v-model.trim="userName" placeholder='请输入' text-align='right' /> - <selector title='归属地' placeholder='请选择' @on-change='handleRegionChange' v-model="regionCode" - :options='form.regionList' :value-map="['code','name']" direction='rtl'></selector> - <x-input title='身份证号码' maxlength='18' v-model.trim="idCardNo" placeholder='请输入' text-align='right' /> + <x-input + title="用户姓名" + v-model.trim="userName" + placeholder="请输入" + text-align="right" + /> + <selector + title="归属地" + placeholder="请选择" + @on-change="handleRegionChange" + v-model="regionCode" + :options="form.regionList" + :value-map="['code', 'name']" + direction="rtl" + ></selector> + <x-input + title="身份证号码" + :max="18" + v-model.trim="idCardNo" + placeholder="请输入" + text-align="right" + /> <van-field - v-model="mblNo" - clearable - maxlength='11' - type="number" - placeholder="手机号码" + v-model="mblNo" + clearable + maxlength="11" + type="number" + placeholder="请输入手机号码" > - <van-button v-if="mblNoType==0||mblNoType==1" class="mgs-btn" slot="button" size="small" @click="mblVertify" >可用查询</van-button> + <van-button + v-if="mblNoType == 0 || mblNoType == 1" + class="mgs-btn" + slot="button" + type="warning" + size="small" + @click="mblVertify" + >可用查询</van-button> </van-field> </div> </group> - <div class="btn-box"> - <van-button round :color="$store.state.backColor" class="btn2" @click="wxScoreOrderCreate">生成二维码</van-button> + <van-button + round + :color="$store.state.backColor" + class="btn2" + @click="wxScoreOrderCreate" + >生成二维码</van-button + > </div> <Vdialog @cancel="cancel" :show="showDia"></Vdialog> - </div> + <van-popup v-model="showPicker" round position="bottom"> + <van-picker + show-toolbar + :columns="form.cmccWxpayContList" + @cancel="showPicker = false" + @confirm="handleContIdChange" + /> + </van-popup> + </div> </template> <script> - import QRCode from 'qrcode'; - import FConfirmSimple from '@/components/old/FConfirmSimple.vue'; - import Vdialog from "@/components/common/v-dialog.vue"; - import { - mapState, - mapActions - } from 'vuex'; - import { - Datetime, - XAddress, - } from 'vux'; - export default { - name: 'wx-pay-score', - components: { - FConfirmSimple,Vdialog - }, - data() { - return { - creditId: '', - contId: '',//合约id - contSendCode: '',//合约code - mblType:'', - regionCode:'', - mblNoType:'', - vertifyStatus:'', - userName: '', - idCardNo: '', - mblNo: '', - term: '',//合约期数 - contName: '',//合约名称 - guaranteedAmt: '',//担保金额 - monGiftAmt: '',//月赠费金额 - qrCode:'', - form: { - cmccWxpayContList: { - type: Array, - default: () => { - return []; - } +import FConfirmSimple from '@/components/old/FConfirmSimple.vue'; +import Vdialog from '@/components/common/v-dialog.vue'; +import { mapState } from 'vuex'; +export default { + name: 'wx-pay-score', + components: {FConfirmSimple,Vdialog}, + computed:{ + ...mapState(['hnOrnxtype']), + }, + data() { + return { + showPicker:false, + creditId: '', + contType:'', + contId: '', //合约id + contSendCode: '', //合约code + mblType: '', + regionCode: '', + mblNoType: '', + vertifyStatus: '', + userName: '', + idCardNo: '', + mblNo: '', + term: '', //合约期数 + contName: '', //合约名称 + guaranteedAmt: '', //担保金额 + monGiftAmt: '', //月赠费金额 + qrCode: '', + form: { + cmccWxpayContList: { + type: Array, + default: () => { + return []; }, - mblNoTypeList: { - type: Array, - default: () => { - return []; - } + }, + mblNoTypeList: { + type: Array, + default: () => { + return []; }, - regionList: { - type: Array, - default: () => { - return []; + }, + regionList: { + type: Array, + default: () => { + return []; + }, + }, + }, + isClick:false + }; + }, + + created() { + let apiText =''; + let sendData ={}; + if(this.hnOrnxtype == 410000){ + // 河南移动 + this.contType = this.$route.query.code; + this.mblNoType = this.$route.query.mblNoType; + apiText ='wxScoreInit2'; + sendData ={type: this.contType} + }else{ + // 宁夏移动 + apiText ='nxInit'; + sendData= {}; + } + this.$api[apiText](sendData).then( + (res) => { + this.form = res.body || {}; + this.form.cmccWxpayContList = this.form.cmccWxpayContList.map(val=>{ + return{ + text:val.contName, + ...val } - } - } - }; + }) + }, + (err) => err + ); + }, + methods: { + //顶部tabbar返回按钮 + onClickLeft() { + this.$router.go(-1); }, - computed:{ - + // 套餐类型 + handleContIdChange(val) { + console.log(val) + let currentEle = JSON.parse( JSON.stringify(this.form.cmccWxpayContList) ).find((item) => item.contCode === val.contCode); + this.contId = currentEle.contId; + this.contSendCode = currentEle.contCode; + this.contName = currentEle.contName; + this.term = currentEle.term; + this.guaranteedAmt = currentEle.guaranteedAmt; + this.monGiftAmt = currentEle.monGiftAmt; + this.showPicker =false; }, - created(){ - this.$api.wxScoreInit().then(res => { - this.form = res.body || {}; - var arr = res.body.terms; - }, err => err); + // 市区 + handleRegionChange(val) { + let currentEle = JSON.parse( + JSON.stringify(this.form.regionList) + ).find((item) => { + return (item.code = val); + }); }, - methods: { - //顶部tabbar返回按钮 - onClickLeft() { - this.$router.go(-1); - }, - // 套餐类型 - handleContIdChange(val) { - let currentEle=JSON.parse(JSON.stringify(this.form.cmccWxpayContList)).find(item=>item.contCode===val) - this.contId = currentEle.contId; - this.contSendCode = currentEle.contCode; - this.contName = currentEle.contName; - this.term = currentEle.term; - this.guaranteedAmt = currentEle.guaranteedAmt; - this.monGiftAmt = currentEle.monGiftAmt; - }, - // 账号类型 - handleMblTypeChange(val) { - let currentEle = JSON.parse(JSON.stringify(this.form.mblNoTypeList)).find((item) => { - return item.code = val; - }); - }, - // 市区 - handleRegionChange(val) { - let currentEle = JSON.parse(JSON.stringify(this.form.regionList)).find((item) => { - return item.code = val; - }); - }, - // 账号类型 - mblVertify(val) { - let v = this.$tool; - if (v.checkValEmpty(this.mblNoType)) { - v.toast('请选择手机号类型'); - return false; - } - if (v.checkValEmpty(this.contSendCode)) { - v.toast('请选择活动套餐'); - return false; - } - if (v.checkValEmpty(this.userName)) { - v.toast('请输入用户姓名'); - return false; - } - if (v.checkValEmpty(this.regionCode)) { - v.toast('请选择归属地'); - return false; - } - if (v.checkValEmpty(this.idCardNo)) { - v.toast('请输入用户身份证号'); - return false; - } - if (v.checkValEmpty(this.mblNo)) { - v.toast('请输入用户手机号'); - return false; - } - if (this.mblNo.length!=11) { - v.toast('请输入正确的用户手机号'); - return false; - } - this.$api.wxScoreVertify({ + // 账号类型 + mblVertify(val) { + let v = this.$tool; + if (v.checkValEmpty(this.contSendCode)) { + v.toast('请选择活动套餐'); + return false; + } + if (v.checkValEmpty(this.userName)) { + v.toast('请输入用户姓名'); + return false; + } + if (v.checkValEmpty(this.regionCode)) { + v.toast('请选择归属地'); + return false; + } + if (v.checkValEmpty(this.idCardNo)) { + v.toast('请输入用户身份证号'); + return false; + } + if(!v.checkIDCard(this.idCardNo)){ + v.toast('身份证号格式不正确'); + return false; + } + if (v.checkValEmpty(this.mblNo)) { + v.toast('请输入用户手机号'); + return false; + } + if (this.mblNo.length != 11) { + v.toast('请输入正确的用户手机号'); + return false; + } + let httpText = ''; + if(this.hnOrnxtype == 410000){ + httpText ='wxScoreVertify'; + }else{ + httpText ='nxVerifyMblNo'; + } + this.$api[httpText]({ cardNo: this.idCardNo, - contCode:this.contSendCode, + contCode: this.contSendCode, mblNo: this.mblNo, mblNoType: this.mblNoType, - regionCode: this.regionCode - }).then(res => { - this.creditId = res.body.creditId - this.vertifyStatus = res.body.status - if(this.vertifyStatus == 0){ - v.toast('号码不可用'); - return false; - }else if(this.vertifyStatus == 1){ - v.toast('号码可用'); - return false; - } - }, err => err); - }, - // 提交订单 - wxScoreOrderCreate(val) { - let v = this.$tool; - if (v.checkValEmpty(this.contSendCode)) { - v.toast('请选择活动套餐'); + regionCode: this.regionCode, + }).then( (res) => { + this.isClick =true; + this.creditId = res.body.creditId; + this.vertifyStatus = res.body.status; + if (this.vertifyStatus == 0) { + v.toast('号码不可用'); + return false; + } else if (this.vertifyStatus == 1) { + v.toast('号码可用'); + return false; + } + + }, + (err) => err + ); + }, + // 提交订单 + wxScoreOrderCreate(val) { + let v = this.$tool; + if (v.checkValEmpty(this.contSendCode)) { + v.toast('请选择活动套餐'); + return false; + } + if (v.checkValEmpty(this.userName)) { + v.toast('请输入用户姓名'); + return false; + } + if (v.checkValEmpty(this.regionCode)) { + v.toast('请选择归属地'); + return false; + } + if (v.checkValEmpty(this.idCardNo)) { + v.toast('请输入用户身份证号'); + return false; + } + if(!v.checkIDCard(this.idCardNo)){ + v.toast('身份证号格式不正确'); + return false; + } + if (v.checkValEmpty(this.mblNo)) { + v.toast('请输入用户手机号'); + return false; + } + if (this.mblNo.length != 11) { + v.toast('请输入正确的用户手机号'); + return false; + } + if (this.mblNoType == 2) { + this.vertifyStatus = 1; + }else{ + if(!this.isClick){ + v.toast('请先点击可用查询再生成二维码'); return false; - } - if (v.checkValEmpty(this.mblNoType)) { - v.toast('请选择手机号类型'); - return false; - } - if (v.checkValEmpty(this.userName)) { - v.toast('请输入用户姓名'); - return false; - } - if (v.checkValEmpty(this.regionCode)) { - v.toast('请选择归属地'); - return false; - } - if (v.checkValEmpty(this.idCardNo)) { - v.toast('请输入用户身份证号'); - return false; - } - if (!v.checkPhone(this.mblNo)) { - v.toast('请输入正确的用户手机号'); - return false; - } - if(this.mblNoType == 2){ - this.vertifyStatus = 1; - } - if(this.vertifyStatus == 0){ - v.toast('号码不可用'); - return false; - } - this.$api.wxScoreCreate({ - mblNoType:this.mblNoType, + } + } + if (this.vertifyStatus == 0) { + v.toast('号码不可用'); + return false; + } + let httpText = ''; + if(this.hnOrnxtype == 410000){ + httpText ='wxScoreCreate'; + }else{ + httpText ='nxCreate'; + } + this.$api[httpText]({ + contType: this.contType, creditId: this.creditId, contId: this.contId, cardNo: this.idCardNo, mblNo: this.mblNo, contCode: this.contSendCode, regionCode: this.regionCode, - userName: this.userName - }).then(res => { - this.qrCode = res.body.qrCode - this.orderId = res.body.orderId - if (this.qrCode) { - this.createdQRCode(); - } - }, err => err); - }, - // 生成二维码 - createdQRCode() { - let queryObj = { - qrCode:this.qrCode, - orderId: this.orderId, - contName: this.contName, - term: this.term, - guaranteedAmt: this.guaranteedAmt, - monGiftAmt: this.monGiftAmt, - } - this.$router.push({ - path: "/wx-getWxQRCode", - query: queryObj + userName: this.userName, }) - }, + .then( + (res) => { + this.qrCode = res.body.qrCode; + this.orderId = res.body.orderId; + if (this.qrCode) { + this.createdQRCode(); + } + }, + (err) => err + ); }, - }; - + // 生成二维码 + createdQRCode() { + let queryObj = { + qrCode: this.qrCode, + orderId: this.orderId, + contName: this.contName, + term: this.term, + guaranteedAmt: this.guaranteedAmt, + monGiftAmt: this.monGiftAmt, + }; + this.$router.push({ + path: '/wx-getWxQRCode', + query: queryObj, + }); + }, + }, +}; </script> -<style lang='less' scoped > - // /deep/.myDisableIpt{ - // color: #999999; - // } - /deep/.van-field__control:disabled { - color: #666; - -webkit-text-fill-color: #666; - background-color: transparent; - opacity: 1; - } +<style lang="less" scoped> +// /deep/.myDisableIpt{ +// color: #999999; +// } +/deep/.van-field__control:disabled { + color: #666; + -webkit-text-fill-color: #666; + background-color: transparent; + opacity: 1; +} - .ipt, - .fenqi { - & { - border-bottom: 1px solid rgba(238,238,238,1); +.ipt, +.fenqi { + & { + border-bottom: 1px solid rgba(238, 238, 238, 1); color: #333; font-size: 16px; height: 50px; - } } - //搜索框 - .search { - margin-bottom: 20px; - padding: 5px 10px; - } - .mer{ - width: 100%; - height: 150px; - background: linear-gradient(-45deg,rgba(104,98,133,1),rgba(76,69,113,1)); - overflow: hidden; - &-head{ - width: 96%; - margin: 28px 2% 0 2%; - height: 72px; - background:rgba(255,255,255,0.1); - // background: (0,0,0, 0.1); - border-radius: 36px; - .flex(); - &-item{ - width: 33%; - color: #fff; - text-align: center; - :first-child{ - margin-bottom: 11px; - font-size: 20px; - font-weight: bold; - } - :last-child{ - font-size: 12px; - } - } - &-line{ - width: 1px; - height: 20px; - background: #fff; - } - } - } - .group-content{ - transform: translateY(-25px); +} +//搜索框 +.search { + padding: 5px 10px; + box-sizing: border-box; +} + +.mer { + width: 100%; + height: 150px; + background: linear-gradient( + -45deg, + rgba(104, 98, 133, 1), + rgba(76, 69, 113, 1) + ); + overflow: hidden; + &-head { width: 96%; - margin: 0 2%; + margin: 28px 2% 0 2%; + height: 72px; + background: rgba(255, 255, 255, 0.1); + // background: (0,0,0, 0.1); + border-radius: 36px; + .flex(); + &-item { + width: 33%; + color: #fff; + text-align: center; + :first-child { + margin-bottom: 11px; + font-size: 20px; + font-weight: bold; + } + :last-child { + font-size: 12px; + } + } + &-line { + width: 1px; + height: 20px; + background: #fff; + } } - /deep/.weui-cells{ - border-radius: 6px; +} +.group-content { + padding: 10px; + box-sizing: border-box; + // transform: translateY(-25px); + // width: 96%; + // margin: 0 2%; +} +/deep/.weui-cells { + border-radius: 6px; + font-size: 16px; + input { + font-size: 14px; + } +} +.hb-order-confirm { + .trial-list { + padding-left: 20px; + } + + .f-button-component .f-button { + margin-top: 12px; + } +} + +.hb-credit-installment { + background-color: #f5f5f7; + padding:50px 0; + min-height: 100%; + box-sizing: border-box; + .title { + padding: 14px 0px 14px 12px; font-size: 16px; - input{ - font-size: 14px; - } - } - .hb-order-confirm { - .trial-list { - padding-left: 20px; - } - - .f-button-component .f-button { - margin-top: 12px; + font-weight: bold; + color: #333; + border-bottom: 1px solid rgba(238, 238, 238, 1); + .line { + display: inline-block; + width: 3px; + height: 16px; + // margin-right: 8px; + background: rgba(137, 110, 219, 1); + border-radius: 0px 6px 0px 6px; + vertical-align: middle; + margin-top: -1px; } } - .hb-credit-installment { - background-color: #F5F5F7; - // padding-top: 54px; - min-height: 100%; - .title { - padding: 14px 0px 14px 12px; - font-size: 16px; - font-weight: bold; - color: #333; - border-bottom: 1px solid rgba(238,238,238,1); - .line { - display: inline-block; - width: 3px; - height: 16px; - // margin-right: 8px; - background:rgba(137,110,219,1); - border-radius:0px 6px 0px 6px; + .qrCode-box { + padding-top: 0; + .flexLayout(center, center, row); + + .qrCode { + width: 200px; + height: 200px; + box-sizing: border-box; + background-color: #fff; + border: 5px solid @color-border-theme; + padding: 5px; + + img { + width: 100%; + height: 100%; vertical-align: middle; - margin-top: -1px; - } - } - - .qrCode-box { - padding-top: 0; - .flexLayout(center, center, row); - - .qrCode { - width: 200px; - height: 200px; - box-sizing: border-box; - background-color: #fff; - border: 5px solid @color-border-theme; - padding: 5px; - - img { - width: 100%; - height: 100%; - vertical-align: middle; - display: block; - } + display: block; } } } - .btn-box{ - margin-top: 40px; - margin-bottom: 22px; - display: flex; - justify-content: space-around; - align-items: center; - .btn2{ - width: 40%; - height: 44px; - background:rgba(137,110,219,1); - color: white; - } - .active { - width: 80%; - } +} +.btn-box { + margin-bottom: 22px; + display: flex; + justify-content: space-around; + align-items: center; + .btn2 { + width: 40%; + height: 44px; + background: rgba(137, 110, 219, 1); + color: white; } - + .active { + width: 80%; + } +} </style> +<style lang="less"> +.van-nav-bar{ + z-index: 10; +} +.weui-select{ + font-size: 14px; +} +.weui-label{ + font-size: 14px; +} +.van-cell .van-cell__title{ + font-size: 14px !important; +} +.van-field__body{ + font-size: 14px !important; +} +.van-ellipsis{ + font-size:12px ; +} +</style> \ No newline at end of file -- Gitblit v1.8.0