选择框样式

zhaoxiaoqiang

2021-09-16 a0c773f75686eb2ef195836873bfe27a3684c1fa

 src/views/old/store/wx-pay-score.vue

@@ -1,412 +1,574 @@
<!--
 * @Date: 2019-08-30 13:38:35
 * @LastEditors: 小明丶
 * @LastEditTime: 2020-12-09 15:17:58
 * @LastEditors: Please set LastEditors
 * @LastEditTime: 2021-09-16 10:51:24
 * @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='身份证号码' 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.checkPhone(this.mblNo)) {
                    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-ellipsis{
    font-size:12px ;
}
</style>