schoolidCard.vue 7.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206
  1. <template>
  2. <div class="card" style="margin-bottom: 20px">
  3. <van-row>
  4. <van-col span="14">
  5. <h3><strong>个人资料</strong></h3>
  6. </van-col>
  7. <van-col span="6" style="">
  8. <p style="border-bottom: solid 1px #e4e4e4" @click="toggleReadOnly()">{{isReadonly ? "编辑" : "保存"}}</p>
  9. </van-col>
  10. </van-row>
  11. <p>昵称</p>
  12. <van-cell-group>
  13. <van-field
  14. placeholder="请输入昵称"
  15. v-model="personName"
  16. :error="personError"
  17. @click="personError=false"
  18. required
  19. maxlength="10"
  20. :readonly="isReadonly"
  21. />
  22. </van-cell-group>
  23. <p>性别</p>
  24. <van-radio-group v-model="gender">
  25. <van-radio name="0" checked-color="#fd6740" style="float: left; margin-right: 20px" :disabled="isReadonly">男</van-radio>
  26. <van-radio name="1" checked-color="#fd6740" :disabled="isReadonly">女</van-radio>
  27. </van-radio-group>
  28. <p>微信号</p>
  29. <van-cell-group>
  30. <van-field
  31. placeholder=" "
  32. v-model="weixinName"
  33. :error="weixinError"
  34. @click="weixinError=false"
  35. required
  36. maxlength="20"
  37. :readonly="isReadonly"
  38. />
  39. </van-cell-group>
  40. <p>宿舍区</p>
  41. <van-radio-group v-model="dormDistrict">
  42. <van-radio name="0" checked-color="#fd6740" style="float: left; margin-right: 20px" :disabled="isReadonly">南区</van-radio>
  43. <van-radio name="1" checked-color="#fd6740" style="float: left; margin-right: 20px" :disabled="isReadonly">西南</van-radio>
  44. <van-radio name="2" checked-color="#fd6740" style="float: left; margin-right: 20px" :disabled="isReadonly">斋区</van-radio>
  45. <van-radio name="3" checked-color="#fd6740" style="float: left; margin-right: 20px" :disabled="isReadonly">桂庙</van-radio>
  46. <van-radio name="4" checked-color="#fd6740" :disabled="isReadonly">西丽</van-radio>
  47. </van-radio-group>
  48. </div>
  49. </template>
  50. <script>
  51. import { Row, Col,
  52. CellGroup, Field,
  53. RadioGroup, Radio,
  54. Toast
  55. } from 'vant';
  56. import {BasicFunction} from "../connector/basic-service";
  57. export default {
  58. name: "schoolidCard",
  59. components: {
  60. [CellGroup.name]: CellGroup, [Field.name]: Field,
  61. [RadioGroup.name]: RadioGroup, [Radio.name]: Radio,
  62. [Row.name]: Row, [Col.name]: Col,
  63. },
  64. data() {
  65. return {
  66. gender: '0',
  67. dormDistrict: '1',
  68. personName: '',
  69. personError: false,
  70. weixinName: '',
  71. weixinError: false,
  72. isReadonly: true,
  73. userDo: {},
  74. reviewDo: {},
  75. }
  76. },
  77. methods: {
  78. uploadNameChange: function () {
  79. let that = this;
  80. BasicFunction.get_data("smartUsers/updateBatch", function (response) {
  81. console.log("------ Data Rcvd in uploadNameChange --------");
  82. console.log(response);
  83. if (response.ret === "10000") {
  84. that.isReadonly = true;
  85. Toast.success("上传成功")
  86. } else {
  87. Toast.fail("上传失败,请检查网络");
  88. }
  89. }, [this.userDo]);
  90. },
  91. uploadReviewChange: function () {
  92. let that = this;
  93. BasicFunction.get_data("smartIdentity/updateBatch", function (response) {
  94. console.log("------ Data Rcvd in uploadReviewChange --------");
  95. console.log(response);
  96. if (response.ret === "10000") {
  97. //history.go(0);
  98. that.isReadonly = true;
  99. Toast.success("上传成功")
  100. } else {
  101. Toast.fail("上传失败,请检查网络");
  102. }
  103. }, [this.reviewDo]);
  104. },
  105. toggleReadOnly: function () {
  106. if (!this.isReadonly){
  107. this.savePage()
  108. }
  109. this.isReadonly = !this.isReadonly;
  110. },
  111. savePage() {
  112. // 检验输入
  113. // var userId = localStorage.getItem(....
  114. if (this.personName.length === 0) {
  115. this.personError = true;
  116. return;
  117. } else if (this.weixinName.length >= 20) {
  118. this.weixinError = true;
  119. Toast.fail('最多输入20个字符');
  120. return;
  121. }
  122. // post_present()
  123. this.userDo.name = this.personName; // changed to personName instead.
  124. this.uploadNameChange();
  125. this.reviewDo.userSex = parseInt(this.gender); // TODO: 请注意 int <-> string 转换
  126. this.reviewDo.dormDistrict = parseInt(this.dormDistrict);
  127. this.uploadReviewChange();
  128. },
  129. getIdentityInfo: function (obj) {
  130. //this;
  131. var userId = localStorage.getItem("frontend-userid");
  132. window.schoolIdCard = this;
  133. BasicFunction.get_data("smartUsers/list?uid=" + userId, function (response) {
  134. console.log("------ Data Rcvd in getIdentityInfo --------");
  135. console.log(response);
  136. if (response.ret === "10000") {
  137. var t = response.model.list;
  138. window.schoolIdCard.personName = t[0].name; // 左侧是vue页面内的变量名字, 右侧是后台数据里的变量名称
  139. window.schoolIdCard.userDo = t[0];
  140. } else {
  141. // 注册失败的处理
  142. Toast.fail("获取失败,请检查网络");
  143. }
  144. }, [{}]);
  145. },
  146. getReviewInfo:function (obj) {
  147. if (!localStorage.getItem('frontend-userid')) {
  148. this.$router.push('login');
  149. return;
  150. }
  151. let userId = localStorage.getItem("frontend-userid");
  152. let that = this;
  153. BasicFunction.get_data("smartIdentity/list?userId=" + userId, function (response) {
  154. console.log("------ Data Rcvd in getReviewInfo --------");
  155. console.log(response);
  156. if (response.ret === "10000") {
  157. var t = response.model.list;
  158. that.gender = ""+t[0].userSex; // 左侧是vue页面内的变量名字, 右侧是后台数据里的变量名称
  159. that.dormDistrict = ""+t[0].dormDistrict; //TODO: 请注意文本数字转换
  160. that.reviewDo = t[0];
  161. } else {
  162. Toast.fail("获取失败,请检查网络");
  163. }
  164. }, [{}]);
  165. }
  166. },
  167. created: function () {
  168. if (!localStorage.getItem('frontend-userid')) {
  169. this.$router.push('login');
  170. return;
  171. }
  172. window.schoolIdCard = this;
  173. this.getIdentityInfo(window.schoolIdCard);
  174. this.getReviewInfo(window.schoolIdCard);
  175. }
  176. }
  177. </script>
  178. <style scoped>
  179. p, h3 {
  180. color: #fd6740;
  181. }
  182. h3 {
  183. padding: 5px;
  184. border-bottom: solid 1px #e4e4e4;
  185. }
  186. p {
  187. padding-top: 3px;
  188. }
  189. .card {
  190. background-color: white;
  191. margin: 20px 20px;
  192. border: solid 1px #e4e4e4;
  193. padding: 15px;
  194. text-align: left;
  195. }
  196. </style>