<!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" id="broDate"> <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 type="text/javascript" src="../../assets/js/datePicker.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; var calendar = new datePicker(); calendar.init({ 'trigger': '#broDate', /*按钮选择器,用于触发弹出插件*/ 'type': 'date', /*模式:date日期;datetime日期时间;time时间;ym年月;*/ // 'minDate':getTimeDetil(3), /*最小日期*/ 'minDate': '', /*最小日期*/ 'maxDate': formatDate(new Date(), 1), /*最大日期*/ 'onSubmit': function () {/*确认时触发事件*/ console.log(calendar.value); if (calendar.value) { app.broth_info = calendar.value; calendar.onClose() }else { toastMsg('出生日期不能比今天晚'); return app.broth_info = app.default_bro } }, 'onClose': function () {/*取消时触发事件*/ // api.closeWin(); } }) // 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>