mgrading/src/views/signup/SignUpPayment.vue

<template>
    <div class="signupPayment">
        <m-header />
        <m-step :number="4" style="margin-top: .12rem" />

        <van-cell-group>
            <van-cell title="准考证号：" :border="false">
                <template #default>支付完成后系统生成</template>
            </van-cell>
            <van-cell title="考生名字：" :border="false">
                <template #default>白鸽</template>
            </van-cell>
            <van-cell title="报考专业：" :border="false">
                <template #default>钢琴</template>
            </van-cell>
            <van-cell title="报考曲目：" :border="false">
                <template #default>
                    <p>钢琴音阶：B大调</p>
                    <p>钢琴练习曲：音画练习曲 OP.33 No.2</p>
                    <p>钢琴乐曲一：奏鸣曲第一乐章</p>
                    <p>钢琴乐曲二：奏鸣曲第二乐章</p>
                </template>
            </van-cell>
            <van-cell title="考试时间：" :border="false">
                <template #default>2020-04-23</template>
            </van-cell>
            <van-cell title="考试地点：" :border="false">
                <template #default>姜杰城航天桥分部</template>
            </van-cell>
            <van-cell title="报名费用：" :border="false">
                <template #default>¥480.00</template>
            </van-cell>
        </van-cell-group>

        <div class="notice">
            请考生于考试两周前严格按照系统要求进行报名及缴费，确保所填信息准确无误，确认之后所有信息无法更改，如因填写内容有误而造成损失，责任由报考者本人承担；请考生在报名缴费前确认可在考试时间内参加考试，最终以准考证上的考试信息为准，请务必按照要求参加考试，否则视为弃考。考生如无法保证按照准考证信息参加考试请慎重报考，报名费用一旦支付后均不允许更改报考级别或退款。
        </div>

        <div class="pay-group">
            <div class="pay-amount">
                <span>￥</span>480.00
            </div>
            <div class="pay-btn">
                <van-button color="#2DC7AA" round>确认并支付</van-button>
            </div>
        </div>
    </div>
</template>
<script>
import MHeader from '@/components/MHeader'
import MStep from '@/components/MStep'
// import MButton from '@/components/MButton'
// import { browser } from '@/common/common'
export default {
    name: 'signupPayment',
	components: { MHeader, MStep },
    data () {
        return {
            patternPhone: /^1(3|4|5|6|7|8|9)\d{9}$/,
            patternPwd: /^[0-9A-Za-z]{6,16}$/,
            birthdayStatus: false,
            songStatus: false, // 曲目状态
            form: {
                phone: null,
                sex: 1,
                birthday: null,
                nation: null
            },
            fileList: [],
        }
    },
    mounted() {
        // 插入token
        // let params = this.$route.query
        // if(params.Authorization) {
        //     localStorage.setItem('Authorization', decodeURI(params.Authorization))
        //     localStorage.setItem('userInfo', decodeURI(params.Authorization))
        // }
    },
    methods: {
        onSubmit() {
            // console.log('submit', values)
        },
        onFailed() {
            // console.log('failed', errorInfo);
            // console.log(this.$refs['form'].scrollToField(errorInfo.errors[0].name))
            // this.$refs['form'].scrollToField(errorInfo.errors[0].name,  false)
        }
    }
}
</script>
<style lang="less" scoped>
@import url("../../assets/commonLess/variable.less");

.signupPayment {
    height: 100vh;
    overflow-y: auto;
    overflow-x: hidden;
    background-color: #F3F4F8;
    .title {
        font-size: .16rem;
        color: #999999;
        padding: .12rem .16rem;
    }
    /deep/.van-cell {
        padding: .1rem .16rem;
        font-size: .15rem;
        color: #333333;
    }
    /deep/.van-cell__title {
        color: #1A1A1A;
        width: .9rem;
        flex: none;
    }
    /deep/.van-cell__value {
        text-align: left;
        p {
            padding-bottom: .15rem;
            &:last-child{
                padding-bottom: 0;
            }
        }
    }

    /deep/.van-cell-group {
        padding: .1rem 0 .15rem;
        margin-top: .15rem;
        border-radius: .1rem;
        overflow: hidden;
    }

    .notice {
        font-size: .13rem;
        color: #999999;
        padding: .2rem .16rem;
        line-height: .18rem;
        margin-bottom: .55rem;
    }

    .pay-group {
        position: fixed;
        bottom: 0;
        width: calc(100% - .32rem);
        height: .55rem;
        line-height: .53rem;
        padding: 0 .16rem;
        display: flex;
        justify-content: space-between;
        align-content: center;
        background-color: #ffffff;
    }
    .pay-amount {
        color: #FF1818;
        font-size: .26rem;
        span {
            font-size: .16rem;
        }
    }
    /deep/.van-button {
        font-size: .16rem;
        padding: 0 .2rem;
    }
}

.van-popup-song {
    width: 80%;
    border-radius: .08rem;
}
.song-popup {
    text-align: center;
    .title {
        font-size: 18px;
        font-weight: 500;
        color: #333333;
        padding: .2rem 0 .24rem;
    }
    .song-upload {
        margin: 0 .5rem;
        padding: .18rem 0 .1rem;
        border-radius: .05rem;
        border: 1px dashed #777777;
        font-size: .16rem;
        color: #777;
    }
    .song-popup-tips {
        font-size: .14rem;
        color: #808080;
        padding-top: .1rem;
        padding-bottom: .25rem;
    }
    .popup-group {
        width: 100%;
        display: flex;
        color: #2DC7AA;
        background-color: #F0F0F0;
        font-size: .18rem;
        span {
            padding: .12rem 0;
            flex: 1;
        }
        .popup-sure {
            color: #ffffff;
            background-color: #2DC7AA;
        }
    }
}
</style>