my_detail.html 29.4 KB

原文件审查历史永久链接

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <title></title>
    <script src="../../assets/js/fontsize.js"></script>
    <link rel="stylesheet" href="../../assets/css/weui.min.css">
    <link rel="stylesheet" href="../../assets/css/api.css"/>
    <link rel="stylesheet" href="../../assets/css/style.css">
    <link rel="stylesheet" href="../../assets/css/pay_form_f.css">
    <link rel="stylesheet" href="../../assets/icon/iconfont.css">
    <style>
        body {
            /*padding-bottom: 1rem;*/
        }

        .detail_top {
            margin: 0 0.46rem;
        }

        .detail_item {
            display: flex;
            align-items: center;
            justify-content: space-between;
            font-size: 14px;
            color: #999797;
            border-bottom: 1px solid #f2f2f2;
            padding: 0 0.25rem;
        }

        .detail_item_img {
            height: 0.45rem;
            width: 0.45rem;
            display: flex;
            justify-content: center;
            align-items: center;
            border-radius: 50%;
            overflow: hidden;
        }

        .detail_item img {
            width: 100%;
        }

        .detail_item_right {
            display: flex;
            align-items: center;
            position: relative;
        }

        .detail_item_right .iconfont {
            color: #C0C0C0;
            font-size: 12px;
        }

        .detail_item_right .detail_item_input {
            color: #999797;
        }

        .detail_item_right .detail_item_input input {
            text-align: right;
            color: #999797;
            padding: 0.3rem 0;
        }

        .detail_item_right .detail_item_input input::-webkit-input-placeholder {
            color: #999797;
            /*font-size: 10px;*/
            text-align: right;
        }

        .detail_item label, .detail_item span {
            color: #999797;
            padding: 0.3rem 0;
            margin: 0;
        }

        .detail_item ul li {
            font-size: 15px;
        }

        .detail_item:last-child {
            margin-bottom: 1rem;
        }

        .save_person {
            position: fixed;
            /*margin: 0.3rem 0 0 0;*/
        }
        .img_input{
            position: absolute;
            width: 100%;
            height: 100%;
            left: 0;
            top: 0;
            opacity: 0;
        }

    </style>
</head>
<body>
<div id="loadStart"></div>
<div id="app" v-cloak>
    <div class="detail_top">
        <div class="detail_item">
            <div>头像</div>
            <div class="detail_item_right" >
                <span class="detail_item_img padding0">
                    <img :src="head_img?head_img:'../../assets/image/default_img.png'" alt="">
                </span>
                <span class="iconfont icon-xiangyou"></span>
                <input type="file"  @change="takePhotos"  accept="image/jpeg,image/x-png,image/gif" id="" value=""  class="img_input">
            </div>
            <mt-popup v-model="popupVisible_head_img" position="bottom">
                <ul class="moreoul">
                    <li @click="takePhotos('camera')">拍照</li>
                    <li @click="takePhotos('album')">从相册中选择</li>
                    <li @click="popupVisible_head_img=false" style="border-top: 2px solid #f0f0f0">取消</li>
                </ul>
            </mt-popup>
        </div>
        <form action="">
            <div class="detail_item">
                <div>姓名</div>
                <div class="detail_item_right">
                    <div class="detail_item_input"><input type="text" placeholder="请输入姓名" v-model="name"></div>
                    <span class="iconfont icon-xiangyou"></span></div>
            </div>
            <div class="detail_item">
                <div>性别</div>
                <div class="detail_item_right">
                    <div class="service_input sex_box">
                        <div class="female">
                            <input type="radio" id="male" name="sex" :checked="checked_male"
                                   @click="checked_male=!checked_male"/>
                            <label for="male">男</label>
                        </div>
                        <div class="male">
                            <input type="radio" id="female" name="sex" :checked="!checked_male"
                                   @click="checked_male=!checked_male"/>
                            <label for="female">女</label>
                        </div>
                    </div>
                    <span class="iconfont icon-xiangyou"></span>
                </div>
            </div>
            <div class="detail_item">
                <div>手机号</div>
                <div class="detail_item_right">
                    <div class="detail_item_input"><input type="number" placeholder="请输入手机号" v-model.trim="phone"></div>
                    <span class="iconfont icon-xiangyou"></span>
                </div>
            </div>
            <div class="detail_item" @click="broSelect">
                <div>生日</div>
                <div class="detail_item_right">
                    <div class="detail_item_input">
                        <span>{{broth_info}}</span>
                    </div>
                    <span class="iconfont icon-xiangyou"></span></div>
            </div>
            <div class="detail_item">
                <div>身份证号</div>
                <div class="detail_item_right">
                    <div class="detail_item_input"><input type="text" placeholder="请输入身份证号" v-model="idcard"></div>
                    <span class="iconfont icon-xiangyou"></span>
                </div>
            </div>
            <div class="detail_item" @click="heightSelect">
                <div>身高</div>
                <div class="detail_item_right">
                    <div class="detail_item_input"><span>{{height}}</span></div>
                    <span class="iconfont icon-xiangyou"></span>
                </div>
            </div>
            <div class="detail_item" @click="weightSelect">
                <div>体重</div>
                <div class="detail_item_right">
                    <div class="detail_item_input"><span>{{weight}}</span>
                        <span class="iconfont icon-xiangyou"></span>
                    </div>
                </div>
            </div>
            <div class="detail_item" @click="getMarry">
                <div>婚姻状态</div>
                <div class="detail_item_right">
                    <span v-if="merry==1">已婚</span>
                    <span v-else-if="merry==0">未婚</span>
                    <span v-else></span>
                    <span class="iconfont icon-xiangyou"></span>
                </div>
            </div>
            <div class="detail_item" v-if="type!=0||user_type_name=='亲友资料'" @click="relation_fun">
                <div>亲友关系</div>
                <div class="detail_item_right">
                    <div class="detail_item_input"><span>{{relation}}</span></div>
                    <span class="iconfont icon-xiangyou"></span>
                </div>
            </div>
            <div class="detail_item" v-else @click="educations">
                <div>文化程度</div>
                <div class="detail_item_right">
                    <div class="detail_item_input"><span>{{education}}</span></div>
                    <span class="iconfont icon-xiangyou"></span>
                </div>
            </div>
            <div class="detail_item" @click="getPosition">
                <div>职业</div>
                <div class="detail_item_right">
                    <div class="detail_item_input"><span>{{pro}}</span></div>
                    <span class="iconfont icon-xiangyou"></span>
                </div>
            </div>
            <div class="detail_item" @click="doctors">
                <div>医保类型</div>
                <div class="detail_item_right">
                    <div class="detail_item_input"><span>{{doctor}}</span></div>
                    <span class="iconfont icon-xiangyou"></span>
                </div>
            </div>
        </form>
    </div>
    <div class="save_btn save_person" @click="setPersonal" v-if="type==0">保存</div>
    <div class="save_btn save_person" @click="newRecord" v-else>添加</div>
</div>
</body>
</html>
<script type="text/javascript" src="../../assets/js/api.js"></script>
<script type="text/javascript" src="../../assets/js/vue.min.js"></script>
<script type="text/javascript" src="../../assets/js/index.js"></script>
<script type="text/javascript" src="../../assets/js/weui.min.js"></script>
<script type="text/javascript" src="../../assets/js/public.js"></script>
<script type="text/javascript" src="../../assets/js/fastclick.js"></script>
<script>
    new FastClick(document.body);
</script>
<script type="text/javascript" src="../../assets/js/axios.min.js"></script>
<script type="text/javascript" src="../../assets/icon/iconfont.js"></script>
<script>
    var app = new Vue({
        el: '#app',
        data: {
            checked_male: true,
            broth_info: '',
            default_bro: '',
            education: '',
            education_value: '',
            pro: '',
            pro_value: '',
            doctor: '',
            doctor_value: '',
            popupVisible_head_img: false,
            weight_list: [],
            weight: '',
            head_img: '',
            name: '',
            phone: '',
            idcard: '',
            getCulture_data: [],//文化程度
            getMedical_data: [],//医保类型
            rid: '',
            user_info: [],
            height_list: [],
            height: '',
            position_list: [],
            type: '',
            merry_list: [
                {
                    "label": '未婚',
                    "value": 0,
                },
                {
                    "label": '已婚',
                    "value": 1,
                },
            ],
            merry: -1,
            merry_value: '',
            relationShip: [],
            relation: '',
            relation_value: '',
            user_type_name: ''
        },
        created: function () {
            var app = this;
            for (var i = 0; i < 300; i++) {
                app.weight_list.push({
                    "label": i + 'kg',
                    "value": i,
                })
            }
            for (var j = 50; j < 300; j++) {
                app.height_list.push(
                    {
                        "label": j + 'cm',
                        "value": j,
                    }
                )
            }
            app.user_type_name = localStorage.getItem('name');
            app.rid = localStorage.getItem('rid');
            // alert(app.rid)
            app.type = localStorage.getItem('type');
            if (app.type == 0) {
                app.getUserinfo();
            }
            app.getJob();
            app.getCulture();
            app.getMedical();
            app.getRelationship();
        },
        methods: {
            // 获取个人信息
            getUserinfo: function () {
                var app = this;
                var post = {
                    rid: app.rid
                };
                var header = {
                    "XX-Device-Type": getDevice(),
                    "XX-Token": getToken()
                };
                getRequest('post', 'user/index/getUserRecord', post, header).then(function (res) {
                    if (res.data.code == 1) {
                        // alert(JSON.stringify(res));
                        app.user_info = res.data.data;
                        app.head_img = 'http://wx.cijievip.com/'+app.user_info.avatar;
                        app.name = app.user_info.name ? app.user_info.name : '';
                        app.user_info.sex == 1 ? app.checked_male = true : app.checked_male = false;
                        app.phone = app.user_info.mobile;
                        app.broth_info = app.user_info.birthday ? timestampToTime(app.user_info.birthday, 1) : '';
                        app.idcard = app.user_info.idcard;
                        app.merry = app.user_info.marry;
                        app.pro = app.user_info.job_name ? app.user_info.job_name : '';
                        app.education_value = app.user_info.culture;
                        app.pro_value = app.user_info.job;
                        app.doctor_value = app.user_info.medical;
                        app.height = app.user_info.height ? app.user_info.height + 'cm' : '';
                        app.weight = app.user_info.weight ? app.user_info.weight + 'kg' : '';
                        app.doctor = app.user_info.medical_name ? app.user_info.medical_name : '';
                        app.education = app.user_info.culture_name ? app.user_info.culture_name : '';
                        app.relation_value = app.relation;
                        app.relation = app.user_info.relation_name ? app.user_info.relation_name : '';
                        loadEnd();
                    } else {
                        // toastMsg(res.data.msg)
                    }
                })
            },
            // 选择头像
            takePhotos: function () {
                var app = this;
                var file = e.target.files[0];e
                var imgSize=file.size/1024;
                if(imgSize>200){
                    alert('请上传大小不要超过200KB的图片')
                }else{
                    var reader = new FileReader();
                    reader.readAsDataURL(file); // 读出 base64
                    reader.onloadend = function () {
                        // 图片的 base64 格式, 可以直接当成 img 的 src 属性值
                        var dataURL = reader.result;
                        // 下面逻辑处理
                        $.ajax({
                            type:"post",
                            url:baseurl + "user/index/upAvatar",
                            headers: {
                                "XX-Device-Type": getDevice(),
                                "XX-Token": getToken()
                            },
                            async:true,
                            data:{
                                avatar:dataURL,
                                avatar_wx:1,
                                token:token,
                                uid:uid
                            },
                            success:function(e){
                                that.avatar=dataURL;
                                alert('修改成功');
                                $(".tsk").show().delay(1500).hide(0);
                            }
                        });
                    };
                }

            }
                if (ret) {
                    api.ajax({
                        url: baseurl + "user/index/upAvatar",
                        method: 'post',
                        data: {
                            files: {
                                file: ret.data
                            }
                        },
                        headers: {
                            "XX-Device-Type": getDevice(),
                            "XX-Token": getToken()
                        }
                    }, function (res, err) {
                        // alert(JSON.stringify(res));
                        if (res) {
                            app.head_img = res.data.url
                        } else {

                        }
                    });
                } else {
                    // alert(JSON.stringify(err));
                    toastMsg('取消')
                }
            },
            // 选择生日
            broSelect: function () {
                var app = this;
                api.openPicker({
                    type: 'date',
                    title: '选择出生日期'
                }, function (ret, err) {
                    if (ret) {
                        app.bro_year = ret.year;
                        app.bro_month = ret.month;
                        app.bro_day = ret.day;
                        app.broth_info = app.bro_year + '-' + add0(app.bro_month) + '-' + add0(app.bro_day);
                        if (checkDate(app.broth_info, 2)) {
                            return app.broth_info
                        } else {
                            toastMsg('出生日期不能比今天晚');
                            return app.broth_info = app.default_bro
                        }
                    } else {
                        console.log(JSON.stringify(err));
                    }
                });
            },
            // 选择身高
            heightSelect: function () {
                var app = this;
                weui.picker(app.height_list, {
                    defaultValue: [170],
                    onChange: function (result) {
                    },
                    onConfirm: function (result) {
                        app.height = result[0].label;
                    }
                });
            },
            // 选择体重
            weightSelect: function () {
                var app = this;
                weui.picker(app.weight_list,
                    {
                        defaultValue: [50],
                        onChange: function (result) {

                        },
                        onConfirm: function (result) {
                            app.weight = result[0].label;
                        }
                    });
            },
            // 选择婚姻状况
            getMarry: function () {
                var app = this;
                weui.picker(app.merry_list, {
                    onChange: function (result) {
                    },
                    onConfirm: function (result) {
                        app.merry = result[0].value;
                    }
                });
            },

            // 获取文化程度
            getCulture: function () {
                var app = this;
                var header = {
                    'XX-Device-Type': getDevice(),
                    'XX-Token': getToken()
                };
                getRequest('post', 'user/index/getCulture', null, header).then(function (res) {
                    // alert(JSON.stringify(res.data.data));
                    if (res.data.code == 1) {
                        for (var i in res.data.data) {
                            app.getCulture_data.push({
                                "label": res.data.data[i].culture_name,
                                "value": res.data.data[i].id,
                            })
                        }
                        // loadEnd();
                    } else {
                        toastMsg(res.data.msg)
                    }
                })
            },
            // 选择文化程度
            educations: function () {
                var app = this;
                weui.picker(app.getCulture_data, {
                    onChange: function (result) {
                    },
                    onConfirm: function (result) {
                        app.education = result[0].label;
                        app.education_value = result[0].value;
                    }
                });
            },
            // 获取职业
            getJob: function () {
                var app = this;
                var header = {
                    'XX-Device-Type': getDevice(),
                    'XX-Token': getToken()
                };
                getRequest('post', 'user/index/getJobs', null, header).then(function (res) {
                    // alert(JSON.stringify(res.data.data));
                    if (res.data.code == 1) {
                        for (var i in res.data.data) {
                            app.position_list.push({
                                "label": res.data.data[i].name,
                                "value": res.data.data[i].id,
                            })
                        }

                        // loadEnd();
                    } else {
                        toastMsg(res.data.msg)
                    }
                })
            },
            // 选择职业
            getPosition: function () {
                var app = this;
                weui.picker(app.position_list, {
                    onChange: function (result) {
                    },
                    onConfirm: function (result) {
                        app.pro = result[0].label;
                        app.pro_value = result[0].value;
                    }
                });
            },
            // 获取医保类型数据
            getMedical: function () {
                var app = this;
                var header = {
                    'XX-Device-Type': getDevice(),
                    'XX-Token': getToken()
                };
                getRequest('post', 'user/index/getMedical', null, header).then(function (res) {
                    // alert(JSON.stringify(res.data.data));
                    if (res.data.code == 1) {
                        for (var i in res.data.data) {
                            app.getMedical_data.push({
                                "label": res.data.data[i].medical_name,
                                "value": res.data.data[i].id,
                            })
                        }
                        // loadEnd();
                    } else {
                        toastMsg(res.data.msg)
                    }
                })
            },
            // 选择医保类型
            doctors: function () {
                var app = this;
                weui.picker(app.getMedical_data,
                    {
                        onChange: function (result) {
                        },
                        onConfirm: function (result) {
                            app.doctor = result[0].label;
                            app.doctor_value = result[0].value;
                        }
                    });
            },

            // 获取亲友关系
            getRelationship: function () {
                var app = this;
                var header = {
                    'XX-Device-Type': getDevice(),
                    'XX-Token': getToken()
                };
                getRequest('post', 'user/index/getRelationship ', null, header).then(function (res) {
                    if (res.data.code == 1) {
                        for (var i in res.data.data) {
                            app.relationShip.push({
                                "label": res.data.data[i].name,
                                "value": res.data.data[i].id,
                            })
                        }
                        loadEnd();
                    } else {
                        toastMsg(res.data.msg)
                    }
                })
            },
            // 选择亲友关系
            relation_fun: function () {
                var app = this;
                weui.picker(app.relationShip,
                    {
                        onChange: function (result) {
                        },
                        onConfirm: function (result) {
                            app.relation = result[0].label;
                            app.relation_value = result[0].value;
                        }
                    });
            },
            // 添加亲友
            newRecord: function () {
                var app = this;
                var post = {
                    rid: app.rid,
                    relation: app.relation_value,
                    avatar: app.head_img,
                    name: app.name,
                    sex: app.checked_male ? 1 : 0,
                    mobile: app.phone,
                    birthday: app.broth_info,
                    idcard: app.idcard,
                    height: app.height,
                    weight: app.weight,
                    marry: app.merry,
                    job: app.pro_value,
                    medical: app.doctor_value
                };
                var header = {
                    "XX-Device-Type": getDevice(),
                    "XX-Token": getToken(),
                };
                if (app.name == '') {
                    toastMsg('请输入姓名')
                } else if (!mobileReg.test(app.phone)) {
                    toastMsg('请输入正确的手机号')
                }
                else if (app.broth_info == '') {
                    toastMsg('请选择生日')
                } else if (!id_card.test(app.idcard)) {
                    toastMsg('身份证号码不正确')
                } else if (app.height == '') {
                    toastMsg('请选择身高')
                } else if (app.weight == '') {
                    toastMsg('请选择体重')
                }
                else if (app.merry == -1) {
                    toastMsg('请选择婚姻状况')
                } else if (app.relation_value == '') {
                    toastMsg('请选择亲友关系')
                } else if (app.pro_value == '') {
                    toastMsg('请选择职业')
                }
                else if (app.doctor_value == '') {
                    toastMsg('请选择医保类型')
                } else {
                    getRequest('post', 'user/index/newRecord', post, header).then(function (res) {
//                         alert(JSON.stringify(res))
                        if (res.data.code == 1) {
                            toastMsg(res.data.msg);
                            api.alert({
                                title: '添加成功',
                                msg: '继续完善信息',
                            }, function (ret, err) {
                                if (ret.buttonIndex == 1) {
                                    api.openFrame({
                                        name: 'my_health',
                                        url: './my_health.html',
                                        // bounces: true,
                                        rect: {
                                            x: 0,
                                            y: 0,
                                            w: 'auto',
                                            h: 'auto',
                                        },
                                        pageParam: {
                                            rid: res.data.data.rid
                                        }
                                    });
                                }
                            });

                        } else {
                            toastMsg(res.data.msg)
                        }
                    })
                }
            },
            // 设置信息
            setPersonal: function () {
                var post = {
                    rid: app.rid,
                    avatar: app.head_img,
                    name: app.name,
                    sex: app.checked_male ? 1 : 0,
                    mobile: app.phone,
                    birthday: app.broth_info,
                    idcard: app.idcard,
                    height: app.height,
                    weight: app.weight,
                    marry: app.merry,
                    culture: app.education_value,
                    job: app.pro_value,
                    medical: app.doctor_value
                };
                var header = {
                    "XX-Device-Type": getDevice(),
                    "XX-Token": getToken(),
                };
                if (app.name == '') {
                    toastMsg('请输入姓名')
                } else if (!mobileReg.test(app.phone)) {
                    toastMsg('请输入正确的手机号')
                }
                else if (app.broth_info == '') {
                    toastMsg('请选择生日')
                } else if (!id_card.test(app.idcard)) {
                    toastMsg('身份证号码不正确')
                } else if (app.height == '') {
                    toastMsg('请选择身高')
                } else if (app.weight == '') {
                    toastMsg('请选择体重')
                }
                else if (app.merry ==-1) {
                    toastMsg('请选择婚姻状况')
                } else if (app.education_value == '') {
                    toastMsg('请选择文化程度')
                } else if (app.pro_value == '') {
                    toastMsg('请选择职业')
                }
                else if (app.doctor_value == '') {
                    toastMsg('请选择医保类型')
                }
                else {
                    getRequest('post', 'user/index/setPersonal', post, header).then(function (res) {
                        // alert(JSON.stringify(res));
                        if (res.data.code == 1) {
                            app.user_info = res.data.data;
                            api.sendEvent({
                                name: 'changeInfo',
                            });
                            toastMsg(res.data.msg);
                            setTimeout(function () {
                                api.closeWin();
                            }, 1000)
                        } else {
                            toastMsg(res.data.msg)
                        }
                    })
                }
            },
        }
    })
</script>