qd_81fang/pages/Withdrawal/addbank.vue

<template>
    <block>
        <view class="tip1">添加银行卡</view>
        <view class="tip2">请绑定本人常用银行卡</view>

        <view :style="'width:' + widths + ';overflow-x:hidden;'">
            <view class="step1">
                <view class="info">
                    <view class="info-label info-content flex-row">
                        <!-- <view class="info-left flex-y-center required">收件人</view> -->
                        <view class="info-left flex-y-center">持卡人:</view>

                        <view class="info-right flex-row flex-y-center">
                            <input :value="name" class="name-input" @input="inputChange" data-name="name" placeholder="持卡人姓名" />
                        </view>
                    </view>

                    <view class="info-label info-content flex-row">
				<view class="info-left flex-y-center ">联系电话:</view>
				<view class="info-right flex-row flex-y-center">
					<input :value="mobile" class="mobile-input" data-name="mobile" @input="inputChange" placeholder="请输入您的手机号码" type="number"></input>
				</view>
			</view>

                    <view class="info-label info-content flex-row">
                        <view class="info-left flex-y-center">卡号:</view>
                        <view class="info-right flex-row flex-y-center">
							<input :value="card" class="name-input" @input="inputChange" data-name="card" placeholder="持卡人本人银行卡号" />
							
                            <!-- <textarea auto-height :value="addressDetail" class="name-input" @input="inputChange" data-name="card_no" placeholder="持卡人本人银行卡号"></textarea> -->
                        </view>
                    </view>

                    <view class="info-label info-content flex-row">
                        <view class="info-left flex-y-center">银行:</view>
                        <view class="info-right flex-row flex-y-center">
                            <input :value="bank" class="mobile-input" @input="inputChange" data-name="bank" placeholder="请输入开户行" />
                        </view>
                    </view>

                    <!-- <view class="info-label info-content flex-row">
				<view class="info-left flex-y-center">银行</view>
				<view class="info-right flex-row flex-y-center">
					<picker  bindchange="bindPickerChange" value="{{index}}"  range="{{array}}">
						<view class="mobile-input {{title?'':'c999'}}">
							{{title?title:"请选择开户行"}}
						</view>
					</picker>
				</view>
			</view> -->

            <!--        <view class="switch">
                        <view>设置默认银行卡:</view>
                        <switch :checked="switch1Checked" @change="switch1Change" color="#1479FF" />
                    </view> -->
                </view>
            </view>
        </view>

        <view class="addAddress" @tap="confirm">保存</view>
    </block>
</template>

<script>
var app = getApp(); // a = app.requirejs('core');

var loading = false; // var b = app.requirejs("api/index");

// import { request } from '../../../utils/request.js';
export default {
    data() {
        return {
			name: '',
            mobile: '',
            card: '',
            bank: '',

            // phone: "",
            // title: "",
            // array: ['农业银行', '赣州银行', '中国银行', '交通银行'],
            // index: 0,
            switch1Checked: false,

     
            widths: '',

        };
    },
    onLoad: function (e) {
        // this.setData(e);
    },
	
	
    onPullDownRefresh: function () {},
    onReachBottom: function () {},
    methods: {
        bindPickerChange(e) {
            console.log('picker发送选择改变，携带值为', e.detail.value);
            this.setData({
                index: e.detail.value,
                title: this.array[e.detail.value]
            });
        },

        switch1Change(e) {
            this.setData({
                switch1Checked: e.detail.value
            });
        },

        async confirm () {
            if (loading) {
                return;
            }

            var that = this;

            if (that.name == '') {
                uni.showToast({
                    title: '请填写持卡人姓名',
                    icon: 'none'
                });
                return false;
            }
			
			if (that.mobile  == '') {
			    uni.showToast({
			        title: '请填写手机号码',
			        icon: 'none'
			    });
			    return false;
			}
			
			

            if (that.card  == '') {
                uni.showToast({
                    title: '请填写银行卡号',
                    icon: 'none'
                });
                return false;
            }

            if (that.bank  == '') {
                uni.showToast({
                    title: '请填写银行卡姓名',
                    icon: 'none'
                });
                return false;
            }
			
			
			let result = await this.$api.request('/bank/add', 'POST', {name:that.name,mobile:that.mobile,card:that.card,bank:that.bank});
			if (result) {
					this.$api.msg('添加成功');
					        setTimeout(function () {
					           uni.navigateBack({
					           	delta:1
					           })
					        }, 1000);
			}
			
			
			
			
			

            // var r = this.type == 1 ? 'agent.cash.add_bank' : 'fenxiao.cash.add_bank';
            // loading = true;
            // request({
            //     method: 'get',
            //     data: {
            //         r,
            //         account: that.account,
            //         card_no: that.card_no,
            //         bank_name: that.bank_name,
            //         is_default: that.switch1Checked ? 1 : 0
            //     }
            // }).then((res) => {
            //     console.log(res);

            //     if (res.error == 0) {
            //         uni.showToast({
            //             title: '添加成功',
            //             icon: 'none'
            //         });
            //         setTimeout(function () {
            //             uni.navigateTo({
            //                 url: '/pages/backstage/bankList/bankList?type=' + that.type
            //             });
            //         }, 1000);
            //     } else {
            //         uni.showToast({
            //             title: res.message,
            //             icon: 'none'
            //         });
            //     }
            // });
        },

        inputChange(e) {
            var name = e.currentTarget.dataset.name;
            this[name] = e.detail.value;
        }
    }
};
</script>
<style>
.step1 .info {
    background-color: #ffffff;
    border-bottom: 1rpx #e4e5ee solid;
    padding: 0 30rpx;
}

.info .info-label {
    width: 100%;
    height: 100rpx;
    border-bottom: 1rpx #e3e3e3 solid;
    color: #353535;
}

.info .info-label:last-child {
    border-bottom: none;
}

.info .info-label .info-red {
    color: #ff5200;
}

.info .info-label .info-gray {
    color: #666666;
}

.info .info-label.info-content {
    height: 100rpx;
    padding-left: 10rpx;
}

.info-label .info-left {
    width: 176rpx;
    font-size: 28rpx;
}
.info-left {
    width: 176rpx;
}

.info-label .info-left.required::after {
    content: '*';
    color: #ff5200;
}

.info-label .info-agree {
    font-size: 10pt;
}

.info-btn {
    padding: 24rpx;
    background-color: #f7f7f7;
}

.info-btn .info-btn-content {
    background-color: #e94443;
    color: #ffffff;
    font-weight: bold;
    height: 100rpx;
    line-height: 100rpx;
    width: 100%;
}

.info-label .info-icon {
    width: 60rpx;
    height: 60rpx;
    margin-right: 24rpx;
}

.info .bold {
    font-weight: bold;
}

.info .info-label.info-height {
    height: auto;
}
.textarea {
    flex: 1;
    min-height: 200rpx;
}

.info .info-label .info-block {
    padding: 24rpx 0;
}

.info-block .info-top {
    margin-bottom: 16rpx;
}

.info-block .info-bottom {
    font-size: 9pt;
}

.step2 .info {
    padding: 48rpx 24rpx;
    text-align: center;
}

.step2 .info .info-title {
    width: 100%;
    padding: 40rpx 0;
}

.info-title .info-images {
    width: 80rpx;
    height: 80rpx;
}

.step2 .info-btn1 {
    margin-top: 88rpx;
    width: 100%;
}

.step2 .info-btn1 .btn {
    width: 100%;
    background-color: #820000;
    color: #ffffff;
    font-weight: bold;
    height: 100rpx;
    line-height: 100rpx;
    border-radius: 10rpx;
}
.name-input {
    /* padding: 12rpx 0; */
    width: 100%;
}

.flex {
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
}

.flex-row {
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-box-orient: horizontal;
    flex-direction: row;
}

.flex-col {
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-box-orient: vertical;
    flex-direction: column;
}

.flex-grow-0 {
    min-width: 0;
    -webkit-box-flex: 0;
    -ms-flex-positive: 0;
    flex-grow: 0;
    -ms-flex-negative: 0;
    flex-shrink: 0;
}

.flex-grow-1 {
    min-width: 0;
    -webkit-box-flex: 1;
    -ms-flex-positive: 1;
    flex-grow: 1;
    -ms-flex-negative: 1;
    flex-shrink: 1;
}

.flex-x-center {
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    flex: 1;
}

.flex-y-center {
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    -ms-grid-row-align: center;
    align-items: center;
}

.info-right {
    flex: 1;
}
.flex-y-bottom {
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-box-align: end;
    -ms-flex-align: end;
    -ms-grid-row-align: flex-end;
    align-items: flex-end;
}

.c999 {
    color: #777;
}

.addAddress {
    width: 670rpx;
    height: 80rpx;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #fff;
    background: linear-gradient(to right,#F8A52B,#F8C657);
    border-radius: 50rpx;
    font-size: 30rpx;
    position: fixed;
    bottom: 80rpx;
    left: 50%;
    transform: translate(-50%, 0);
    font-weight: 700;
}

.heng {
    height: 20rpx;
    background: #efefef;
}

textarea {
    width: 480rpx;
}

.tip1 {
    margin-top: 60rpx;
    font-weight: 700;
    font-size: 40rpx;
    text-align: center;
}

.tip2 {
    font-size: 28rpx;
    text-align: center;
    margin: 35rpx 0 100rpx;
}

.switch {
    height: 100rpx;
    padding: 0 10rpx;
    border-bottom: 1px solid #e3e3ee;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.switch > view {
    color: #353535;
    font-size: 28rpx;
}

</style>