szugift-fe/sourcecode/h5app/vue/src/components/schoolidCard.vue

<template>
    <div class="card" style="margin-bottom: 20px">
        <van-row style="border-bottom: solid 1px #e4e4e4;">
            <van-col span="14">
                <h3><strong>个人资料</strong></h3>
            </van-col>
            <van-col span="6" style="">
                <p @click="toggleReadOnly()">{{isReadonly ? "编辑" : "保存"}}</p>
            </van-col>
        </van-row>
        <p>昵称</p>
        <van-cell-group>
            <van-field
                    placeholder="请输入昵称"
                    v-model="personName"
                    :error="personError"
                    @click="personError=false"
                    required
                    maxlength="10"
                    :readonly="isReadonly"
            />
        </van-cell-group>
        <p>性别</p>
        <van-radio-group v-model="gender">
            <van-radio name="0" checked-color="#fd6740" style="float: left; margin-right: 20px" :disabled="isReadonly">男</van-radio>
            <van-radio name="1" checked-color="#fd6740" :disabled="isReadonly">女</van-radio>
        </van-radio-group>
        <p>微信号</p>
        <van-cell-group>
            <van-field
                    placeholder=" "
                    v-model="weixinName"
                    :error="weixinError"
                    @click="weixinError=false"
                    required
                    maxlength="20"
                    :readonly="isReadonly"
            />
        </van-cell-group>
        <p>宿舍区</p>
            <van-radio-group v-model="dormDistrict">
            <van-radio name="0" checked-color="#fd6740" style="float: left; margin-right: 20px" :disabled="isReadonly">南区</van-radio>
            <van-radio name="1" checked-color="#fd6740" style="float: left; margin-right: 20px" :disabled="isReadonly">西南</van-radio>
            <van-radio name="2" checked-color="#fd6740" style="float: left; margin-right: 20px" :disabled="isReadonly">斋区</van-radio>
            <van-radio name="3" checked-color="#fd6740" style="float: left; margin-right: 20px" :disabled="isReadonly">桂庙</van-radio>
            <van-radio name="4" checked-color="#fd6740" :disabled="isReadonly">西丽</van-radio>
        </van-radio-group>
    </div>
</template>

<script>
    import { Row, Col,
        CellGroup, Field,
        RadioGroup, Radio,
        Toast
    } from 'vant';
    import {BasicFunction} from "../connector/basic-service";

    export default {
        name: "schoolidCard",
        components: {

            [CellGroup.name]: CellGroup, [Field.name]: Field,
            [RadioGroup.name]: RadioGroup, [Radio.name]: Radio,
            [Row.name]: Row, [Col.name]: Col,

        },
        data() {
            return {
                gender: '0',
                dormDistrict: '1',
                personName: '',
                personError: false,
                weixinName: '',
                weixinError: false,
                isReadonly: true,
                userDo: {},
                reviewDo: {},
            }
        },
        methods: {
            uploadNameChange: function () {
                let that = this;
                BasicFunction.get_data("smartUsers/updateBatch", function (response) {
                    console.log("------ Data Rcvd in uploadNameChange --------");
                    console.log(response);
                    if (response.ret === "10000") {
                        that.isReadonly = true;
                        Toast.success("上传成功")
                    } else {
                        Toast.fail("上传失败，请检查网络");
                    }
                }, [this.userDo]);
            },
            uploadReviewChange: function () {
                let that = this;
                BasicFunction.get_data("smartIdentity/updateBatch", function (response) {
                    console.log("------ Data Rcvd in uploadReviewChange --------");
                    console.log(response);
                    if (response.ret === "10000") {
                        //history.go(0);
                        that.isReadonly = true;
                        Toast.success("上传成功")
                    } else {
                        Toast.fail("上传失败，请检查网络");
                    }
                }, [this.reviewDo]);
            },
            toggleReadOnly: function () {
                if (!this.isReadonly){
                    this.savePage()
                }
                this.isReadonly =  !this.isReadonly;
            },
            savePage() {
                // 检验输入
                // var userId = localStorage.getItem(....
                if (this.personName.length === 0) {
                    this.personError = true;
                    return;
                } else if (this.weixinName.length >= 20) {
                    this.weixinError = true;
                    Toast.fail('最多输入20个字符');
                    return;
                }
                // post_present()
                this.userDo.name = this.personName;  // changed to personName instead.
                this.uploadNameChange();
                this.reviewDo.userSex = parseInt(this.gender); // TODO: 请注意 int <-> string 转换
                this.reviewDo.dormDistrict = parseInt(this.dormDistrict);
                this.uploadReviewChange();

            },
            getIdentityInfo: function (obj) {
                //this;
                if (!localStorage.getItem('frontend-userid')) {
                    this.$router.push('login');
                    return;
                }
                let userId = localStorage.getItem("frontend-userid");
                let that = this;
                BasicFunction.get_data("smartUsers/list?uid=" + userId, function (response) {
                    console.log("------ Data Rcvd in getIdentityInfo --------");
                    console.log(response);
                    if (response.ret === "10000") {
                        var t = response.model.list;
                        that.personName = t[0].name; // 左侧是vue页面内的变量名字， 右侧是后台数据里的变量名称
                        that.userDo = t[0];
                    } else {
                        // 注册失败的处理
                        Toast.fail("获取失败，请检查网络");
                    }
                }, [{}]);
            },
            getReviewInfo:function (obj) {
                if (!localStorage.getItem('frontend-userid')) {
                    this.$router.push('login');
                    return;
                }
                let userId = localStorage.getItem("frontend-userid");
                let that = this;
                BasicFunction.get_data("smartIdentity/list?userId=" + userId, function (response) {
                    console.log("------ Data Rcvd in getReviewInfo --------");
                    console.log(response);
                    if (response.ret === "10000") {
                        var t = response.model.list;
                        that.gender = ""+t[0].userSex; // 左侧是vue页面内的变量名字， 右侧是后台数据里的变量名称
                        that.dormDistrict = ""+t[0].dormDistrict; //TODO: 请注意文本数字转换
                        that.reviewDo = t[0];
                    } else {
                        Toast.fail("获取失败，请检查网络");
                    }
                }, [{}]);
            }
        },

        created: function () {
            if (!localStorage.getItem('frontend-userid')) {
                this.$router.push('login');
                return;
            }
            let that = this;
            this.getIdentityInfo(that);
            this.getReviewInfo(that);
        }
    }
</script>

<style scoped>
    p, h3 {
        color: #fd6740;
    }

    p, h3 {
        padding: 5px;
    }

    p {
        padding-top: 3px;
    }

    .card {
        background-color: white;
        margin: 20px 20px;
        border: solid 1px #e4e4e4;
        padding: 15px;
        text-align: left;
    }
</style>