mgrading/src/views/signup/SignUpLevel.vue

<template>
    <div class="signupLevel">
        <m-header />
        <m-step :number="3" />

        <van-form ref="form" :show-error="false" validate-first @submit="onSubmit" @failed="onFailed">
            <div class="title">基本信息</div>
            <van-field readonly clickable name="nation" label="报考专业" placeholder="请选择" is-link />
            <van-field readonly clickable name="nation" label="报考级别" placeholder="请选择" is-link />
            <van-field name="phone" label="报考曲目" placeholder="请输入报考曲目" />
            <van-field clearable name="code" label="练习曲目名称及作者" placeholder="自定义曲目" >
                <template #button>
                    <span class="codeText" @click="songStatus = true">曲目上传</span>
                </template>
            </van-field>
            <van-field name="phone" label="乐曲一名称及作者" placeholder="请输入曲目名称及作者" />
            <van-field name="phone" label="乐曲二名称及作者" placeholder="请输入曲目名称及作者" />
            <van-field readonly clickable name="nation" label="考点" placeholder="请选择" is-link />
            <van-field readonly clickable name="nation" label="考试时间" placeholder="请选择" is-link />
            <van-field readonly clickable name="nation" label="上一次考级" placeholder="发证机构" is-link />
            <van-field readonly clearable name="code" label="证书" >
                <template #button>
                    <span class="codeText">上传证书</span>
                </template>
            </van-field>
            <div class="title">音乐基础知识</div>
            <van-field readonly clickable name="nation" label="音乐基础知识" placeholder="请选择" is-link />
            <van-field readonly clickable name="nation" label="报考级别" placeholder="请选择" is-link />
            <div class="title">指导老师</div>
            <van-field name="phone" label="老师姓名" placeholder="请输入老师姓名" />
            <van-field name="phone" label="联系方式" placeholder="请输入联系方式" />
            <!-- <m-button class="stepBtn" text="下一步" native-type="submit" /> -->
            <div class="m-btn-group">
                <van-button round color="#2DC7AA" style="background-color: transparent" plain>上一步</van-button>
                <van-button round color="#2DC7AA">确认报名</van-button>
            </div>
        </van-form>

        <van-popup v-model="birthdayStatus" position="bottom">
            <van-datetime-picker
                type="date"
                @cancel="birthdayStatus = false"/>
                <!-- @confirm="onConfirm" -->
        </van-popup>

        <van-popup class="van-popup-song" v-model="songStatus">
            <div class="song-popup">
                <div class="title">自定义曲目</div>
                <div class="song-upload">
                    <van-uploader multiple :max-count="1" :max-size="3 * 1024 * 1024" >
                        <div class="upload-container">
                            <van-icon name="plus" />
                            <p>点击上传</p>
                        </div>
                    </van-uploader>
                </div>
                <p class="song-popup-tips">支持格式：pdf，png，jpg，bmp</p>

                <div class="popup-group">
                    <span @click="songStatus = false">取消</span>
                    <span class="popup-sure" @click="songStatus = false">确定</span>
                </div>
            </div>
        </van-popup>
    </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: 'signupLevel',
	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");

.signupLevel {
    height: 100vh;
    overflow-y: auto;
    overflow-x: hidden;
    background-color: #F3F4F8;
    .title {
        font-size: .16rem;
        color: #999999;
        padding: .12rem .16rem;
    }
    /deep/.van-cell {
        padding: .13rem .16rem;
    }
    /deep/.van-field__label {
        font-size: .17rem;
        color: #333;
        width: 1.15rem;
    }
    /deep/.van-field__body {
        font-size: .16rem
    }

    .codeText {
        font-size: .16rem;
        color: #2DC7AA;
    }
}

.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;
        border: 1px dashed transparent;
        // background: linear-gradient(wihte, wihte);
        background: linear-gradient(0deg, transparent 6px, #777777 6px) repeat-y,
            linear-gradient(0deg, transparent 50%, #777777 0) repeat-y,
            linear-gradient(90deg, transparent 50%, #777777 0) repeat-x,
            linear-gradient(90deg, transparent 50%, #777777 0) repeat-x;
        background-size: 1px 12px, 1px 12px, 12px 1px, 12px 1px;
        background-position: 0 0, 100% 0, 0 0, 0 100%;
        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;
        }
    }
}


.m-btn-group {
    margin-top: .35rem;
    margin-bottom: .25rem;
    padding: 0 .2rem;
    display: flex;
    justify-content: space-between;
    .van-button {
        font-size: .18rem;
        height: .5rem;
        width: 48%;
    }
}
</style>