info.html 13 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368
  1. {extend name="public/layout" /}
  2. {block name="title"}信息资料{/block}
  3. {block name="body"}
  4. <style type="text/css">
  5. html,
  6. body {
  7. display: block;
  8. }
  9. .layui-fluid {
  10. display: block;
  11. box-shadow: 0 0 4px 0 #B6CADE;
  12. border-radius: 5px;
  13. margin: 15px;
  14. background-color: #ffffff;
  15. }
  16. .layui-table-view .layui-table th,
  17. .layui-table-view .layui-table td {
  18. text-align: center;
  19. border-color: #B6CADE;
  20. }
  21. .upload-img .area i {
  22. font-size: 50px;
  23. color: #009688;
  24. }
  25. /*///*/
  26. .text-right {
  27. text-align: right;
  28. }
  29. .text-detail>span {
  30. font-size: 40px;
  31. }
  32. html {
  33. background: #fff;
  34. }
  35. .imageDiv div {
  36. width: 100%;
  37. height: 100%;
  38. position: absolute;
  39. top: 0px;
  40. background-color: #e6e6e600;
  41. }
  42. .imageDiv div i {
  43. display: none;
  44. font-size: 31px;
  45. position: absolute;
  46. top: 37%;
  47. left: 40%;
  48. }
  49. .imageDiv div:hover {
  50. background-color: #e6e6e680;
  51. }
  52. .imageDiv div:hover i {
  53. display: block;
  54. cursor: pointer;
  55. }
  56. .rotate180 {
  57. -webkit-transform: rotate(180deg);
  58. transform: rotate(180deg);
  59. }
  60. .layui-form-label-content {
  61. float: left;
  62. display: block;
  63. width: 300px;
  64. font-weight: 400;
  65. line-height: 20px;
  66. text-align: left;
  67. }
  68. .layui-form-label-content span {
  69. padding: 9px;
  70. line-height: 20px;
  71. display: block;
  72. }
  73. .headimg {
  74. width: 60px;
  75. height: 60px;
  76. border-radius: 50%;
  77. }
  78. .editlink {
  79. float: right;
  80. width: 80px;
  81. }
  82. .editlink a {
  83. color: #3483d5;
  84. }
  85. .editlink a:hover {
  86. color: blue;
  87. }
  88. #wxlogin_container iframe {
  89. height: 225px;
  90. }
  91. </style>
  92. <body>
  93. <div class="layui-fluid">
  94. <div class="layui-card">
  95. <div class="layui-card-header ">
  96. <div class="layui-form-item">
  97. <div class="layui-inline">
  98. <label class="layui-form-label">信息资料</label>
  99. </div>
  100. </div>
  101. </div>
  102. <div class="layui-card-body">
  103. <div class="layui-form" lay-filter="layuiadmin-app-form-list" id="layuiadmin-grant-form-list"
  104. style="padding: 20px 30px 0 0;">
  105. <div class="layui-form-item">
  106. <label class="layui-form-label">头像</label>
  107. <div class="layui-form-label-content">
  108. {if condition="$data.headimgurl eq ''"}
  109. <img class="headimg" src="/static/img/default.png" />
  110. {else/}
  111. <img class="headimg" src="{$data->headimgurl}" />
  112. {/if}
  113. </div>
  114. </div>
  115. <div class="layui-form-item">
  116. <label class="layui-form-label">昵称</label>
  117. <div class="layui-form-label-content">
  118. <span>{:$data->nickname}</span>
  119. </div>
  120. </div>
  121. <div class="layui-form-item">
  122. <label class="layui-form-label">姓名</label>
  123. <div class="layui-form-label-content">
  124. <span id="currentname" style="float: left;">{:$data->opt_name}</span>
  125. <div id="nameinput" style="display: none;float: left;"><input id="newname" type="text"
  126. name="newname" value="" autocomplete="off" class="layui-input" /></div>
  127. <span class="editlink">
  128. <a id="changename" href="javascript:;">修改</a>
  129. <a class="namechangebtn confirm" href="javascript:;"
  130. style="display:none;margin-right: 10px;">确认</a>
  131. <a class="namechangebtn" href="javascript:;" style="display:none;color:#9d9d9d">取消</a>
  132. </span>
  133. </div>
  134. </div>
  135. <div class="layui-form-item">
  136. <label class="layui-form-label">电话</label>
  137. <div class="layui-form-label-content">
  138. <span id="currentphone" style="float: left;">{:$data->phone}</span>
  139. <div id="phoneinput" style="display: none;float: left;"><input id="newphone" type="text"
  140. name="newphone" value="" autocomplete="off" class="layui-input" /></div>
  141. <span class="editlink">
  142. <a id="changephone" href="javascript:;">修改</a>
  143. <a class="changebtn confirm" href="javascript:;"
  144. style="display:none;margin-right: 10px;">确认</a>
  145. <a class="changebtn" href="javascript:;" style="display:none;color:#9d9d9d">取消</a>
  146. </span>
  147. </div>
  148. </div>
  149. <div class="layui-form-item">
  150. <label class="layui-form-label">微信</label>
  151. <div class="layui-form-label-content">
  152. <span style="float: left;">{:$data->nickname}</span>
  153. <span class="editlink" style="width: 80px;">
  154. <a id="changewx" href="javascript:;">{notEmpty name="data.nickname"}换绑{else/}绑定{/notEmpty}</a>
  155. <div id="wxlogin_container" style="display: none">
  156. </span>
  157. </div>
  158. </div>
  159. </div>
  160. </div>
  161. </div>
  162. </div>
  163. </body>
  164. {/block} {block name="js"}
  165. <script type="text/javascript" src="https://res.wx.qq.com/connect/zh_CN/htmledition/js/wxLogin.js"></script>
  166. <script type="text/javascript" src="https://wwcdn.weixin.qq.com/node/wework/wwopen/js/wwLogin-1.2.4.js"></script>
  167. <script src="/static/js/jquery.min.js"></script>
  168. <script>
  169. //微信绑定
  170. var obj = new WxLogin({
  171. self_redirect: false,
  172. id: "wxlogin_container",
  173. appid: "{$appid}",
  174. scope: "snsapi_login",
  175. redirect_uri: "{$domain}{:url('index/wechat')}",
  176. self_redirect: true,
  177. state: "{$state}",
  178. style: "white",
  179. href: "{$domain}/static/css/wechat.css"
  180. });
  181. ////////////
  182. layui.config({
  183. base: '__LAYUI__/',
  184. urlbase: '/sys'
  185. }).extend({
  186. index: 'lib/index' //主入口模块
  187. }).use(['index', 'table', 'element', 'layer'], function () {
  188. var $ = layui.$
  189. , layer = layui.layer;
  190. $('#changewx').on('click', function () {
  191. layer.open({
  192. type: 1,
  193. title: false,
  194. shadeClose: true,
  195. closeBtn: false,
  196. area: ['300px', '230px'],
  197. content: $("#wxlogin_container")
  198. });
  199. });
  200. $('#changephone').on('click', function () {
  201. $('#currentphone').hide();
  202. $('#phoneinput').show();
  203. $(this).hide();
  204. $('.changebtn').show();
  205. });
  206. $('.changebtn').on('click', function () {
  207. var currentphone = $('#currentphone').html();
  208. if ($(this).hasClass('confirm')) {
  209. var newphone = $('#newphone').val();
  210. if (newphone == '') {
  211. layer.msg('请输入手机号', { anim: 6, time: 2000 });
  212. return false;
  213. }
  214. if (currentphone == newphone) {
  215. layer.msg('与当前手机号相同', { anim: 6, time: 2000 });
  216. return false;
  217. }
  218. layer.confirm('确认修改手机号为' + newphone + '?', function (index) {
  219. $.ajax({
  220. url: '{:url("index/changephone")}',
  221. type: 'post',
  222. data: { phone: newphone },
  223. dataType: 'json',
  224. success: function (res) {
  225. if (res.code === 0) {
  226. $('#currentphone').html(newphone);
  227. layer.close(index);
  228. $('#currentphone').show();
  229. $('#newphone').val('');
  230. $('#phoneinput').hide();
  231. $('.changebtn').hide();
  232. $('#changephone').show();
  233. layer.msg(res.msg, {
  234. anim: 0, time: 2000, icon: 6,
  235. });
  236. } else {
  237. layer.msg(res.msg, {
  238. anim: 6
  239. , time: 2000
  240. });
  241. }
  242. }
  243. });
  244. });
  245. } else {
  246. $('#currentphone').show();
  247. $('#newphone').val('');
  248. $('#phoneinput').hide();
  249. $('.changebtn').hide();
  250. $('#changephone').show();
  251. }
  252. });
  253. $('#changename').on('click', function () {
  254. $('#currentname').hide();
  255. $('#nameinput').show();
  256. $(this).hide();
  257. $('.namechangebtn').show();
  258. });
  259. $('.namechangebtn').on('click', function () {
  260. var currentname = $('#currentname').html();
  261. var newname = $('#newname').val();
  262. if ($(this).hasClass('confirm')) {
  263. if (newname == '') {
  264. layer.msg('请输入姓名', { anim: 6, time: 2000 });
  265. return false;
  266. }
  267. if (currentname == newname) {
  268. layer.msg('姓名未改变', { anim: 6, time: 2000 });
  269. return false;
  270. }
  271. layer.confirm('确认修改姓名为' + newname + '?', function (index) {
  272. $.ajax({
  273. url: '{:url("index/changename")}',
  274. type: 'post',
  275. data: { name: newname },
  276. dataType: 'json',
  277. success: function (res) {
  278. if (res.code === 0) {
  279. $('#currentname').html(newname);
  280. layer.close(index);
  281. $('#currentname').show();
  282. $('#newname').val('');
  283. $('#nameinput').hide();
  284. $('.namechangebtn').hide();
  285. $('#changename').show();
  286. parent.jQuery('#login_name').html(newname);
  287. layer.msg(res.msg, {
  288. anim: 0, time: 2000, icon: 6,
  289. });
  290. } else {
  291. layer.msg(res.msg, {
  292. anim: 6
  293. , time: 2000
  294. });
  295. }
  296. }
  297. });
  298. });
  299. } else {
  300. $('#currentname').show();
  301. $('#newname').val('');
  302. $('#nameinput').hide();
  303. $('.namechangebtn').hide();
  304. $('#changename').show();
  305. }
  306. });
  307. });
  308. function isPhoneNumber(tel) {
  309. var reg = /^0?1[3|4|5|6|7|8|9][0-9]\d{8}$/;
  310. return reg.test(tel);
  311. }
  312. var bind = function (code) {
  313. $.ajax({
  314. url: '{:url("index/wxBind")}',
  315. type: 'post',
  316. data: { code: code },
  317. success: function (res) {
  318. if (res.code == 0) {
  319. layer.msg(res.msg, { icon: 1, time: 2000 }, function () {
  320. layer.closeAll();
  321. });
  322. location.reload();
  323. } else {
  324. layer.msg(res.msg, { icon: 5, anim: 6, time: 2000 }, function () {
  325. layer.closeAll();
  326. });
  327. }
  328. }
  329. })
  330. }
  331. </script>
  332. {/block}