userinfo.html 12 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>用户信息</title>
  6. <link rel="stylesheet" href="../mg/common.css">
  7. <style type="text/css">
  8. .container {
  9. margin: 0 10px 0 10px;
  10. font-size: 24px;
  11. justify-content: flex-start;
  12. }
  13. .main{
  14. margin: 15px;
  15. align-items: flex-start;
  16. }
  17. .main1{
  18. margin: 0 8px;
  19. }
  20. .Item{
  21. margin: 1px 0;
  22. }
  23. .Key{
  24. width:250px;
  25. background-color: #ddd;
  26. text-align: center;
  27. font-size:18px;
  28. }
  29. .Key2{
  30. width:250px;
  31. background-color: #ddd;
  32. text-align: center;
  33. height:132px;
  34. line-height: 40px;
  35. font-size:18px;
  36. }
  37. .Value{
  38. width:300px;
  39. padding: 0 20px;
  40. background-color: #eee;
  41. justify-content: flex-start;
  42. font-size:18px;
  43. }
  44. .Value3{
  45. color:red;
  46. font-weight: bolder;
  47. }
  48. .Value2{
  49. width:595px;
  50. background-color: #fff;
  51. margin-top:5px;
  52. font-size:20px;
  53. }
  54. .item0{
  55. width:100%;
  56. background-color: #fff;
  57. }
  58. .item1{
  59. flex:1;
  60. background-color: #ddd;
  61. text-align: center;
  62. margin: 1px;
  63. }
  64. .item2{
  65. flex:1;
  66. width:50%;
  67. background-color: #eee;
  68. text-align: center;
  69. margin: 1px;
  70. }
  71. .item3{
  72. width:20%;
  73. background-color: #ddd;
  74. text-align: center;
  75. margin: 1px;
  76. }
  77. .item4{
  78. width:80%;
  79. background-color: #eee;
  80. text-align: center;
  81. margin: 1px;
  82. }
  83. .input1{
  84. width:40px;
  85. margin: 0 5px 0 30px;
  86. }
  87. .input2{
  88. width:100px;
  89. margin: 0 5px 0 30px;
  90. }
  91. .a2{
  92. width:40px;
  93. margin: 0 5px 0 0;
  94. }
  95. .btn{
  96. margin-right: 5px;
  97. }
  98. .img2{
  99. width:30px;
  100. height:30px;
  101. margin:0 10px 0 5px;
  102. }
  103. .avatar{
  104. width:132px;
  105. height:132px;
  106. }
  107. </style>
  108. <script src="js/jquery-1.6.4.min.js"></script>
  109. <script src="js/vue.js"></script>
  110. <script>
  111. var vm;
  112. $(document).ready(function () {
  113. var id=[UserID];
  114. vm = new Vue({
  115. el: '#app',
  116. data: {
  117. UserID:id,
  118. IsGroupIDEdit:0,
  119. IsIntroducerEdit:0,
  120. IsNickNameRemarkEdit:0,
  121. UpdateUserID:"",
  122. UpdateNickNameRemark:"",
  123. Info:{},
  124. Info2:{},
  125. },
  126. methods: {
  127. getUserInfo: function (event) {
  128. $.get("/api/GetUserInfoWeb?UserID="+id, function (data) {
  129. vm.Info = data.result;
  130. });
  131. },
  132. showEditGroupID:function (event) {
  133. vm.IsGroupIDEdit=!vm.IsGroupIDEdit;
  134. },
  135. saveGroupID:function (event) {
  136. var groupid=$("input[name='GroupID']:checked").val();
  137. if (groupid) {
  138. $.get("/api/UpdateUserMemberInfo?UserID=" + id + "&GroupID=" + groupid, function (data) {
  139. vm.IsGroupIDEdit = !vm.IsGroupIDEdit;
  140. vm.getUserInfo();
  141. });
  142. }
  143. },
  144. showEditIntroducer:function (event) {
  145. vm.IsIntroducerEdit=!vm.IsIntroducerEdit;
  146. },
  147. saveIntroducer:function (event) {
  148. if (vm.UpdateUserID) {
  149. $(".img2").attr("src","/images/loading.gif");
  150. $.get("/api/UpdateIntroducer?UserID=" + id + "&Introducer=" + vm.UpdateUserID, function (data) {
  151. vm.getUserInfo();
  152. setTimeout(function () {
  153. vm.IsIntroducerEdit = !vm.IsIntroducerEdit;
  154. vm.Info2=null;
  155. },10000);
  156. });
  157. }
  158. },
  159. showUserInfo:function (event) {
  160. $.get("/api/GetUserInfoWeb?IsShortInfo=2&UserID="+vm.UpdateUserID, function (data) {
  161. vm.Info2 = data.result;
  162. });
  163. },
  164. showEditNickNameRemark:function (event) {
  165. vm.IsNickNameRemarkEdit=!vm.IsNickNameRemarkEdit;
  166. },
  167. saveNickNameRemark:function (event) {
  168. if (vm.UpdateNickNameRemark) {
  169. $(".img2").attr("src","/images/loading.gif");
  170. var url="/api/UpdateUserMemberInfoPost?UserID=" + id + "&FieldType=1";
  171. var param={};
  172. param.Content=vm.UpdateNickNameRemark;
  173. url=encodeURI(url);
  174. $.post(url,param, function (data) {
  175. vm.IsNickNameRemarkEdit=!vm.IsNickNameRemarkEdit;
  176. vm.getUserInfo();
  177. });
  178. }
  179. }
  180. }
  181. });
  182. vm.getUserInfo();
  183. });
  184. </script>
  185. </head>
  186. <body class="container FlexRow">
  187. <div id="app">
  188. <div class="main FlexRow">
  189. <div class="main1 FlexColumn">
  190. <div class="Item FlexRow" v-for="(value,name,index) in Info.Column0">
  191. <div class="Key" v-if="name!='小程序头像' && name.indexOf('类别')<0">{{name}}</div>
  192. <div class="Key2" v-if="name=='小程序头像'">{{name}}</div>
  193. <div class="Value FlexRow" v-if="name=='小程序头像'"><img :src="value" class="avatar" v-if="value!=''" /></div>
  194. <div class="Value2 FlexRow" v-if="name.indexOf('类别')>=0">{{value}}</div>
  195. <div class="Value FlexRow" v-if="name=='推荐人ID' || name=='大使ID' || name=='主绑用户ID' || name=='从绑定用户ID' || name=='从绑定用户ID2' || name=='家庭用户ID1' || name=='家庭用户ID2'">
  196. <a :href="'webuserinfo?UserID='+value " target="_blank" v-if="value>0">{{value}}</a>
  197. <span class="" v-if="name=='推荐人ID' && !IsIntroducerEdit">&nbsp;&nbsp;<a href="#" v-on:click="showEditIntroducer">[修改]</a></span>
  198. <span class="" v-if="name=='推荐人ID' && IsIntroducerEdit"><input type="text" class="input1" name="UserID" @keyup="showUserInfo" v-model="UpdateUserID" /> <button class="btn" v-on:click="saveIntroducer">修改</button></span>
  199. <span class="FlexRow" v-if="name=='推荐人ID' && Info2 && Info2.Column0"><span><img class="img2" :src="Info2.Column0.小程序头像" /></span><span>{{Info2.Column0.小程序昵称}}</span></span>
  200. </div>
  201. <div class="Value" v-if="name!='小程序头像' && name!='推荐人ID' && name!='大使ID' && name!='主绑用户ID' && name!='从绑定用户ID' && name!='从绑定用户ID2' && name!='家庭用户ID1' && name!='家庭用户ID2' && name.indexOf('类别')<0">
  202. {{value}}
  203. <span class="" v-if="name=='小程序昵称备注' && !IsNickNameRemarkEdit">&nbsp;&nbsp;<a href="#" v-on:click="showEditNickNameRemark">[修改]</a></span>
  204. <span class="" v-if="name=='小程序昵称备注' && IsNickNameRemarkEdit"><input type="text" class="input2" name="NickNameRemark" v-model="UpdateNickNameRemark" /> <button class="btn" v-on:click="saveNickNameRemark">修改</button></span>
  205. <span class="" v-if="name=='所在群' && !IsGroupIDEdit">&nbsp;&nbsp;<a href="#" v-on:click="showEditGroupID">[修改]</a></span>
  206. <span class="" v-if="name=='所在群' && IsGroupIDEdit">&nbsp;&nbsp;<input type="radio" name="GroupID" value="1" />彩虹<input name="GroupID" type="radio" value="2" />润雨<input name="GroupID" type="radio" value="3" />扬帆 <button v-on:click="saveGroupID">修改</button></span>
  207. </div>
  208. </div>
  209. </div>
  210. <div class="main1 FlexColumn">
  211. <div class="Item FlexRow" v-for="(value,name,index) in Info.Column1" >
  212. <div class="Key" v-if="name!='服务号头像' && name.indexOf('类别')<0">{{name}}</div>
  213. <div class="Key2" v-if="name=='服务号头像'">{{name}}</div>
  214. <div class="Value FlexRow" v-if="name=='服务号头像'"><img class="avatar" :src="value" v-if="value!=''" /></div>
  215. <div class="Value3 Value FlexRow" v-if="name=='报名时间'">{{value}}</div>
  216. <div class="Value2 FlexRow" v-if="name.indexOf('类别')>=0">{{value}}</div>
  217. <div class="Value FlexRow" v-if="name=='推荐人ID'"><a :href="'webuserinfo?UserID='+value " target="_blank">{{value}}</a></div>
  218. <div class="Value" v-if="name!='服务号头像' && name!='报名时间' && name!='推荐人ID' && name.indexOf('类别')<0">{{value}}</div>
  219. </div>
  220. </div>
  221. <div class="main1 FlexColumn">
  222. <div class="Item FlexRow" v-for="(value,name,index) in Info.Column2">
  223. <div class="Key" v-if="name.indexOf('类别')<0 && name.indexOf('列表')<0">{{name}}</div>
  224. <div class="Value FlexRow" v-if="name=='题卡管理平台'"><a :href="'miaoguologin?UserID='+UserID " target="_blank">{{value}}</a></div>
  225. <div class="Value2 FlexRow" v-if="name.indexOf('类别')>=0">{{value}}</div>
  226. <div class="Value" v-if="name.indexOf('类别')<0 && name.indexOf('列表')<0 && name!='题卡管理平台'">{{value}}</div>
  227. <div class="Value2" v-if="name=='创建题卡列表'">
  228. <div class="item0 FlexRow">
  229. <div class="item1">时间</div>
  230. <div class="item1">近期创建题卡数</div>
  231. </div>
  232. <div class="item0 FlexRow" v-for="(item, index) in value" v-if="index<7">
  233. <div class="item2">{{item.时间}}</div>
  234. <div class="item2">{{item.创建题卡数}}</div>
  235. </div>
  236. </div>
  237. <div class="Value2" v-if="name=='练习题卡列表'">
  238. <div class="item0 FlexRow">
  239. <div class="item1">时间</div>
  240. <div class="item1">练习题卡数</div>
  241. <div class="item1">练习时长(分钟)</div>
  242. </div>
  243. <div class="item0 FlexRow" v-for="(item, index) in value" v-if="index<10">
  244. <div class="item2">{{item.时间}}</div>
  245. <div class="item2">{{item.练习题卡数}}</div>
  246. <div class="item2">{{item.练习分钟}}</div>
  247. </div>
  248. </div>
  249. <div class="Value2" v-if="name=='教程学习列表'">
  250. <div class="item0 FlexRow">
  251. <div class="item3 ">课程</div>
  252. <div class="item4 ">课程编号</div>
  253. </div>
  254. <div class="item0 FlexRow" v-for="(item, index) in value">
  255. <div class="item3 ">{{item.Title}}</div>
  256. <div class="item4 ">{{item.Content}}</div>
  257. </div>
  258. </div>
  259. </div>
  260. </div>
  261. </div>
  262. </div>
  263. </body>
  264. </html>