szugift-fe/sourcecode/h5app/vue/src/views/SecurityVerify.vue

<template>
    <div>
        <div class='card'>
            <h3><strong>个人资料</strong></h3>
            <van-cell-group>
                <van-field
                        v-model="phone"
                        required
                        clearable
                        label="手机号"
                        placeholder="请输入手机号"
                />
                <van-field
                        v-model="sms"
                        center
                        clearable
                        label="短信验证码"
                        placeholder="请输入短信验证码"
                        required
                >
                    <van-button slot="button" size="small" type="primary">发送验证码</van-button>
                </van-field>
                <van-field
                        v-model="username"
                        required
                        clearable
                        label="昵称"
                        placeholder="请输入昵称"
                />
                <van-field
                        v-model="password"
                        type="password"
                        label="密码"
                        placeholder="请输入密码"
                        required
                />
                    <van-field
                            v-model="passverify"
                            type="password"
                            label="密码"
                            placeholder="请再次输入密码"
                            required
                    />
            </van-cell-group>

            <p>性别</p>
            <van-radio-group v-model="radio">
                <van-radio name="0" checked-color="#fd6740" style="float: left; margin-right: 20px">男</van-radio>
                <van-radio name="1" checked-color="#fd6740">女</van-radio>
            </van-radio-group>

            <p>宿舍区</p>
            <van-button size="large" @click="show = true">{{dormitory}}</van-button>
            <van-actionsheet
                    v-model="show"
                    :actions="actions"
                    cancel-text="取消"
                    @select="onSelect"
                    @cancel="onCancel"
            />

        </div>

        <div class="card">
            <p>上传礼物照片</p>
            <add-photo @upload-photo="onRead"/>
        </div>
        <van-button size="large" type="primary" @click="next" class="next">下一步</van-button>
    </div>
</template>

<script>
    import {
        Uploader, Icon,
        CellGroup, Field,
        RadioGroup, Radio,
        Picker,
        Button,
        Actionsheet
    } from 'vant'
    import AddPhoto from "../components/addPhoto";
    export default {
        name: "SecurityVerify",
        components: {
            AddPhoto,
            [Uploader.name]: Uploader, [Icon.name]: Icon,
            [CellGroup.name]: CellGroup, [Field.name]: Field,
            [RadioGroup.name]: RadioGroup, [Radio.name]: Radio,
            [Picker.name]: Picker,
            [Button.name]: Button,
            [Actionsheet.name]: Actionsheet
        },
        data() {
            return {
                phone: '',
                sms: '',
                password: '',
                passverify: '',
                radio: '1',
                show: false,
                dormitory: '点击选择宿舍区',
                actions: [
                    {name: '斋区'},
                    {name: '西南'},
                    {name: '南区'},
                    {name: '西丽'}
                ]
            };
        },
        props: {
            photo: {
                type: Object,
                default: null
            }
        },
        methods: {
            next() {
                // 检查输入
                this.$router.push('presentRegister');
                // this.$router.push('index');
            },
            onRead(file) {
                this.photo = file;
            },
            onSelect(item) {
                // 点击选项时默认不会关闭菜单，可以手动关闭
                this.show = false;
                this.dormitory = item.name;
            }
        }
    }
</script>

<style scoped>
    p, h3 {
        color: #fd6740;
    }
    h3 {
        padding: 5px;
        border-bottom: solid 1px #e4e4e4;
    }
    .card {
        background-color: white;
        margin: 20px 20px;
        border: solid 1px #e4e4e4;
        padding: 15px;
        text-align: left;
    }
    .next {
        background-color: #fd6740;
        border-color: #fd6740;
        margin: 10px 0 10px;
        width: 85%;
    }
</style>