<!doctype html> <html> <head> <meta charset="UTF-8"> <title>账户信息</title> <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" /> <link href="../../css/mui.min.css" rel="stylesheet" /> <link href="../../css/animate.min.css" rel="stylesheet" /> <link href="../../css/cropper.min.css" rel="stylesheet" /> <style> .mui-bar-nav~.mui-content{padding-top: 60px;} .r{float: right;margin-right: 20px;color: darkgray;font-size: 14px;} .head{line-height: 45px;} .mui-table-view-cell{padding: 12px;font-size: 14px;} .mui-table-view:before{background-color: rgba(200, 199, 204, 0);} .mui-table-view:after{background-color: rgba(200, 199, 204, 0);} .mui-table-view-cell:after{background-color: #dedbdb;} .img{width: 40px;height: 40px;border-radius: 50%;} .m_box {padding: 0px 10px 0px 10px;margin: 10px 15px 0px 15px;overflow: hidden;} #clipp{position:fixed;width:100%;height:100%;top:0;background-color:black;display:none;z-index:9999999} #clipp img{max-width:100%;height:auto;vertical-align:middle;} #clipp .op{position:fixed;width:100%;bottom:0;} #clipp .mui-icon{color:white;font-size:50px;font-weight:bold} .bbv{padding: 15px 18px 0px 18px;color: #7a7a7a;font-size: 14px;} .bor{border-left: 5px solid #00a0ea;padding-right: 5px;} .row .sm3{padding: 10px;width: 33.33%;text-align: center;font-size: 13px;color: #727171;} .row .sm3 .img{width: 60px;height: 60px; border-radius: 3px;} [v-cloak] {display: none;} </style> </head> <body> <div id="app" v-cloak> <header class="mui-bar mui-bar-nav"> <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a> <h1 class="mui-title">账户信息</h1> </header> <div class="mui-content animated fadeInUp"> <div class="bbv"> <span class="bor"></span> <span>个人信息</span> </div> <div class="m_box"> <ul class="mui-table-view"> <li class="mui-table-view-cell"> <a href="#picture" class="mui-navigate-right"> <span class="r"> <img :src="item.header" class="img"> </span> <span class="head">头像</span> </a> </li> <li class="mui-table-view-cell" @click="op(' 昵称',item.nickName,'nickName')"> <a class="mui-navigate-right"><span class="r">{{item.nickName}}</span>姓名</a> </li> <li class="mui-table-view-cell" @click="pwd()"> <a class="mui-navigate-right"><span class="r">修改密码</span>密码</a> </li> <li class="mui-table-view-cell" @click="op(' 邮箱',item.email=='null'?'':item.email,'email')"> <a class="mui-navigate-right"><span class="r">{{item.email=='null'?'未填':item.email}}</span>邮箱</a> </li> </ul> </div> <div class="bbv"> <span class="bor"></span> <span>收款方式</span> </div> <div class="m_box" style="margin-bottom: 15px;padding-bottom: 15px;"> <div class="img_list"> <div class="row"> <div class="sm3" v-for="(item,index) in list"> <img :src="item.pic" class="img" @click.stop="view(item.pic)" /> <div class="sa">{{item.name}}</div> </div> <div class="clear"></div> </div> </div> <div class="divider" style="margin-top: 15px;"> <div class="line" style="width: 30%;"></div> <div class="text" style="width: 40%;">银行卡信息</div> <div class="line" style="width: 30%;"></div> <div class="clear"></div> </div> <ul class="mui-table-view" style="margin-top: 15px;"> <li class="mui-table-view-cell" @click="op('卡号',item.kh,'kh')"> <a class="mui-navigate-right"><span class="r">{{item.kh}}</span>卡号</a> </li> <li class="mui-table-view-cell" @click="op('持卡人姓名',item.kName,'kName')"> <a class="mui-navigate-right"><span class="r">{{item.kName=='null'?'未填':item.kName}}</span>持卡人姓名</a> </li> </ul> </div> </div> <!--选择照片--> <div id="picture" class="mui-popover mui-popover-action mui-popover-bottom"> <ul class="mui-table-view"> <li class="mui-table-view-cell" @click="takePhoto()"><a>拍照</a></li> <li class="mui-table-view-cell" @click="pickImg()"><a>选取现有</a></li> </ul> <ul class="mui-table-view"> <li class="mui-table-view-cell" style="color: red;"><a href="#picture"><b>取消</b></a></li> </ul> </div> <!--图片剪裁--> <div id="clipp"> <img id="image" alt="Picture" src="../../images/APP-banner2.jpg"> <div class="op"> <span class="mui-icon mui-icon mui-icon-closeempty mui-pull-left" @click="cancel()"></span> <span class="mui-icon mui-icon-checkmarkempty mui-pull-right" @click="save()"></span> </div> </div> </div> <script src="../../js/mui.min.js"></script> <script src="../../js/app.js"></script> <script src="../../js/vue.min.js"></script> <script src="../../js/cropper.min.js"></script> <script type="text/javascript"> var cropper = null; var vm = new Vue({ el: "#app", data: { item: {}, list: [{ name: '微信收款码', pic: '../../images/wx.jpg' }, { name: '支付宝收款码', pic: '../../images/zfb.jpg' }, { name: '银行卡转账', pic: '../../images/yhk.jpg' }], }, mounted: function() { mui.plusReady(function() { vm.getData(); }) }, methods: { getData: function() { request(urls().userInfo, { id: getUser().id }, function(res) { vm.item = res; localStorage.setItem("user", JSON.stringify(res)); vm.item.header = urls().path + vm.item.header; setTimeout(function() { plus.webview.getWebviewById('tab/mine.html').reload(true); }, 500); plus.nativeUI.closeWaiting(); }) }, //拍照 takePhoto: function() { plus.nativeUI.showWaiting("准备剪裁..."); takePhoto(function(path) { plus.io.resolveLocalFileSystemURL(path, function(entry) { plus.nativeUI.closeWaiting(); if (cropper != null) { cropper.destroy(); } cropper = getClipper(1, entry.toLocalURL()); }); }) }, //选择现有 pickImg: function() { pickImg(function(p) { if (cropper != null) { cropper.destroy(); } cropper = getClipper(1, p.files[0]); }, 1); }, //裁剪结束并上传 save: function() { plus.nativeUI.showWaiting("正在上传..."); //获得裁剪对象 var croppedCanvas = cropper.getCroppedCanvas({ width: 100, height: 100 }) var dataUrl = croppedCanvas.toDataURL(); request(urls().user_upload, { id: getUser().id, dataImage: dataUrl }, function(res) { vm.item.header = urls().path + res.url; mui.toast("上传成功"); vm.getData(); plus.nativeUI.closeWaiting(); }) document.getElementById("clipp").style.display = 'none'; }, //取消裁剪 cancel: function() { document.getElementById("clipp").style.display = 'none'; }, //修改密码 pwd: function() { open('find_pass', 'find_pass.html', null, 'slide-in-bottom'); }, view: function(img) { plus.nativeUI.previewImage([img], { current: 0, loop: true, indicator: 'number' }); }, //编辑其它 op: function(msg, val, op) { open('edit_info', 'edit_info.html', { msg: msg, value: val, op: op }, 'slide-in-bottom'); } } }) </script> </body> </html>