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

<template>
    <div>
        <div class='card'>
            <h3><strong>个人资料</strong></h3>
            <van-cell-group :border="false">
                <van-field
                        v-model="phone"
                        required
                        clearable
                        label="手机号"
                        placeholder="请输入手机号"
                        :error="phoneError"
                        @click="phoneError=false"
                />
                <van-field
                        v-model="sms"
                        center
                        clearable
                        label="短信验证码"
                        placeholder="请输入短信验证码"
                        required
                        disabled
                >
                    <van-button slot="button" size="small" type="primary">发送验证码</van-button>
                </van-field>
                <van-field
                        v-model="wechat"
                        required
                        clearable
                        label="微信"
                        placeholder="请输入微信号"
                        maxlength="20"
                        :error="wechatError"
                        @click="wechatError=false"
                />
                <van-field
                        v-model="password"
                        required
                        clearable
                        type="password"
                        label="密码"
                        placeholder="请输入密码"
                        maxlength="16"
                        :error="passError"
                        @click="passError=false"
                />
                    <van-field
                            v-model="passverify"
                            required
                            clearable
                            type="password"
                            label="确认密码"
                            placeholder="请再次输入密码"
                            maxlength="16"
                            :error="passVerifyError"
                            @click="passVerifyError=false"
                    />
                <van-field
                        v-model="username"
                        required
                        clearable
                        label="昵称"
                        placeholder="请输入昵称"
                        maxlength="12"
                        :error="usernameError"
                        @click="usernameError=false"
                />
            </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"
            />

        </div>

        <div class="card" style="margin-bottom: 70px">
            <p>上传校卡照片</p>
            <div style="margin-bottom: 10px">
                <form method="POST" enctype="multipart/form-data"
                      action="http://gift-server.niimei.com:8866/fileserver/upload?sign=abcdefg">
                    <add-photo/>
                    <button type="submit" value="Upload"
                            class="van-button van-button--primary van-button--large submit_button"
                            @click="next">下一步
                    </button>
                </form>
            </div>
            <p>活动仅允许深大学生参与，请上传正面校卡照片审核~</p>
        </div>
    </div>
</template>

<script>
    import {BasicFunction} from "../connector/basic-service";
    import {
        Uploader, Icon,
        CellGroup, Field,
        RadioGroup, Radio,
        Picker,
        Button,
        Actionsheet,
        Toast
    } 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: '',
                phoneError: false,
                sms: '',
                wechat: '',
                wechatError: false,
                password: '',
                passError: false,
                passverify: '',
                passVerifyError: false,
                username: '',
                usernameError: false,
                radio: '0',
                show: false,
                dormitory: '点击选择宿舍区',
                dorId: -1,
                actions: [
                    {id: 0, name: '斋区'},
                    {id: 1, name: '西南'},
                    {id: 2, name: '南区'},
                    {id: 3, name: '西丽'}
                ],
                photo: null
            };
        },
        methods: {
            next() {
                // 检查输入
                if (this.phone.length !== 11) {
                    this.phoneError = true;
                    return;
                } else if (this.wechat.length < 6) {
                    this.wechatError = true;
                    Toast.fail('请输入最少6位微信号');
                    return;
                } else if (this.password.length < 8) {
                    this.passError = true;
                    return;
                } else if (this.password !== this.passverify) {
                    this.passVerifyError = true;
                    return;
                } else if (this.username.length < 1) {
                    this.usernameError = true;
                    return;
                } else if (this.dorId === -1) {
                    Toast.fail('请选择宿舍区');
                    return;
                } else if (this.photo === null) {
                    Toast.fail('请上传校卡正面照片');
                    return;
                }

                let success = true;
                BasicFunction.get_data("ajaxregister?u=" + this.phone + '&p=' + this.password, function (response) {
                    console.log("------ Data Rcvd in Reg --------");
                    console.log(response);
                    if (response.ret !== "10000") {
                        // 不需要 设置 SessionID， 已经自动保存在jSessionID中
                        Toast.fail("注册失败，请检查网络");
                        success = false;
                    } else {
                        localStorage.setItem("frontend-userid", response.model.userId);
                    }
                }, {});
                if (!success) return;

                let userId = localStorage.getItem('frontend-userid');
                let useridentity = [{
                    reviewId: "",
                    userId: userId,
                    dormDistrict: this.dorId,
                    userSex: parseInt(this.radio),
                    userSchoolCard: 201233222,
                    userReviewStatus: 0,
                    reviewerId: 1,
                    reviewerNote: "nmo",
                    reviewerNoteToUser: "noo"
                }];
                console.log(useridentity);
                let that = this;
                BasicFunction.get_data("smartIdentity/saveBatch", function (response) {
                    console.log(response);
                    if (response.ret === "10000") {
                        Toast.success("注册成功");
                        that.$router.push('presentRegister');
                    } else {
                        Toast.fail("注册失败，请检查网络");
                    }
                }, useridentity);
            },
            onSelect(item) {
                // 点击选项时默认不会关闭菜单，可以手动关闭
                this.show = false;
                this.dormitory = item.name;
                this.dorId = item.id;
            }
        }
    }
</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;
    }

    .submit_button {
        margin-bottom: 10px;
        margin-left: auto;
        margin-right: auto;
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        background-color: #fd6740;
        border-color: #fd6740;
        width: 85%;
    }
</style>