leromro-mini/pages/myCenter/addBankCard.vue

<template>
    <view class="bankCard-main">
        <view class="card-box ">
            <view class="font-title">*请填写您名下有效的储蓄卡</view>
            <CustForm :column="column" ref="cust_form_ref" />
            <up-button type="primary" text="确定" @click="onSubmit"></up-button>
        </view>
       
    </view>
</template>

<script setup>
import { ref } from 'vue';
import CustForm from "@/components/cust-form/index.vue";

const cust_form_ref = ref(null);
const rules = {
    name: [
        {
            type: 'string',
            required: true,
            message: '请填写姓名',
            trigger: ['blur', 'change']
        },
    ],
}
const column = [
    {
        label: "户名",
        key: "name",
        type: "input",
        rules: rules.name,
        required:true
    },
    {
        label: "银行",
        key: "name",
        type: "input",
        rules: rules.name,
        required:true
    },
    {
        label: "卡号",
        key: "name",
        type: "input",
        rules: rules.name,
        required:true
    },
     {
        label: "预留手机号",
        key: "phonenumber",
        type: "phone-code",
    },
]

function onSubmit() {
	try {
		// 校验表单并获取数据
		cust_form_ref.value.onSubmit().then(async (res) => {			
			console.log('提交',res);

			// return;
			// 提交接口，注册人员
			// const submit_res = await add(parmas);
			// if(submit_res.code == 200){
			// 	uni.showToast({
			// 		title: '注册成功',
			// 		icon: 'none'
			// 	})
			// 	uni.navigateBack();
			// 	return;
			// }
			// uni.showToast({
			// 	title: res.msg,
			// 	icon: 'none'
			// })
			// console.log('==submit_res====>', submit_res);
		})


	} catch (error) {
		console.log('error', error);

	} finally {

	}

}



</script>

<style lang="scss" scoped>
.card-box {
    border-radius: 8px;
    background: rgba(255, 255, 255, 1);
    padding: 20px;
    margin-bottom: 12px;
}
.bank-box {
    border-radius: 8px;
    margin-bottom: 12px;
}

.bankCard-main {
    position: fixed;
    top: 0px;
    left: 0px;
    right: 0px;
    bottom: 0px;
    background: rgba(245, 245, 245, 1);
    padding: 12px;
    overflow: auto;

    .bankCard-hi-title {
        font-size: 20px;
        font-weight: 700;
        line-height: 28.96px;
        color: rgba(51, 51, 51, 1);
    }

    .bankCard-hi-text {
        font-size: 14px;
        font-weight: 500;
        line-height: 20.27px;
        color: rgba(153, 153, 153, 1);
    }

    .bankCard-active {
        font-size: 14px;
        font-weight: 500;
        line-height: 20.27px;
        color: rgba(255, 87, 4, 1);
    }

    .bankCard-hi {
        margin-bottom: 20px;
    }

    .bankCard-box-title {
        font-size: 12px;
        font-weight: 500;
        line-height: 17.38px;
        color: rgba(199, 199, 199, 1);
        margin-bottom: 8px;
    }

    .bankCard-box-price {
        font-size: 30px;
        font-weight: 500;
        line-height: 35.16px;
        color: rgba(252, 228, 187, 1);
    }
    .bankCard-box-price2 {
        font-size: 24px;
        font-weight: 400;
        line-height: 28.13px;
        color: rgba(252, 228, 187, 1);
    }

    .bankCard-box {
        border-radius: 12px;
        background: linear-gradient(131.81deg, rgba(65, 65, 95, 1) 0%, rgba(45, 48, 74, 1) 100%);
        margin-bottom: 14px;
        .bankCard-box-top {
            display: flex;
            align-content: center;
            justify-content: space-between;

            .bankCard-box-btn1 {
                width: 78px;
                height: 30px;
                opacity: 1;
                border-radius: 4px;
                background: linear-gradient(222.81deg, rgba(255, 227, 194, 1) 0%, rgba(255, 226, 192, 1) 0%, rgba(255, 225, 189, 1) 0%, rgba(251, 204, 147, 1) 100%);
                margin-bottom: 14px;
                font-size: 16px;
                font-weight: 700;
                line-height: 23.17px;
                color: rgba(50, 52, 80, 1);
            }

            .bankCard-box-btn2 {
                width: 78px;
                height: 30px;
                opacity: 1;
                border-radius: 4px;
                border: 1px solid rgba(255, 218, 172, 1);
                font-size: 16px;
                font-weight: 500;
                letter-spacing: 0px;
                line-height: 23.17px;
                color: rgba(255, 218, 172, 1);
            }
        }
        .bankCard-box-bottom{
            display: flex;
            align-items: center;
            justify-content: space-around;
        }


    }

}
</style>