SecurityVerify.vue 16 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367
  1. <template>
  2. <div>
  3. <nav-bar path="index" title="身份验证"/>
  4. <div class='card'>
  5. <h3><strong>个人资料</strong></h3>
  6. <van-cell-group :border="false">
  7. <van-field
  8. v-model="phone"
  9. required
  10. clearable
  11. label="手机号"
  12. placeholder="请输入手机号"
  13. :error="phoneError"
  14. @click="phoneError=false"
  15. />
  16. <!--<van-field-->
  17. <!--v-model="sms"-->
  18. <!--center-->
  19. <!--clearable-->
  20. <!--label="短信验证码"-->
  21. <!--placeholder="请输入短信验证码"-->
  22. <!--required-->
  23. <!--disabled-->
  24. <!--&gt;-->
  25. <!--<van-button slot="button" size="small" type="primary">发送验证码</van-button>-->
  26. <!--</van-field>-->
  27. <van-field
  28. v-model="username"
  29. required
  30. clearable
  31. label="昵称"
  32. placeholder="请输入昵称"
  33. maxlength="12"
  34. :error="usernameError"
  35. @click="usernameError=false"
  36. />
  37. <van-field
  38. v-model="wechat"
  39. required
  40. clearable
  41. label="微信号"
  42. placeholder="请输入微信号"
  43. maxlength="20"
  44. :error="wechatError"
  45. @click="wechatError=false"
  46. />
  47. </van-cell-group>
  48. <p>性别</p>
  49. <van-radio-group v-model="radio">
  50. <van-radio name="1" checked-color="#fd6740" style="float: left; margin-right: 20px">男</van-radio>
  51. <van-radio name="2" checked-color="#fd6740">女</van-radio>
  52. </van-radio-group>
  53. <p>宿舍区</p>
  54. <van-button size="large" @click="show = true">{{dormitory}}</van-button>
  55. <van-actionsheet
  56. v-model="show"
  57. :actions="actions"
  58. cancel-text="取消"
  59. @select="onSelect"
  60. />
  61. </div>
  62. <div class="card" style="margin-bottom: 10px">
  63. <p>上传校卡照片</p>
  64. <div style="margin-bottom: 10px">
  65. <add-photo @onRead="onRead"/>
  66. </div>
  67. <p>活动仅允许深大学生参与,请上传正面校卡照片审核~</p>
  68. </div>
  69. <van-button
  70. class="submit_button"
  71. type="primary"
  72. @click="next"
  73. :loading="loading"
  74. >下一步
  75. </van-button>
  76. </div>
  77. </template>
  78. <script>
  79. import {BasicFunction} from "../connector/basic-service";
  80. import NavBar from '../components/navBar';
  81. import {
  82. Uploader, Icon,
  83. CellGroup, Field,
  84. RadioGroup, Radio,
  85. Picker,
  86. Button,
  87. Actionsheet,
  88. Toast
  89. } from 'vant';
  90. import AddPhoto from "../components/addPhoto";
  91. export default {
  92. name: "SecurityVerify",
  93. components: {
  94. AddPhoto,
  95. NavBar,
  96. [Uploader.name]: Uploader, [Icon.name]: Icon,
  97. [CellGroup.name]: CellGroup, [Field.name]: Field,
  98. [RadioGroup.name]: RadioGroup, [Radio.name]: Radio,
  99. [Picker.name]: Picker,
  100. [Button.name]: Button,
  101. [Actionsheet.name]: Actionsheet
  102. },
  103. data() {
  104. return {
  105. phone: '',
  106. phoneError: false,
  107. sms: '',
  108. username: '',
  109. usernameError: false,
  110. wechat: '',
  111. wechatError: false,
  112. radio: '1',
  113. show: false,
  114. dormitory: '点击选择宿舍区',
  115. dorId: -1,
  116. actions: [
  117. {id: 0, name: '斋区'},
  118. {id: 1, name: '西南'},
  119. {id: 2, name: '南区'},
  120. {id: 3, name: '桂庙'},
  121. {id: 4, name: '西丽'},
  122. ],
  123. photo: null,
  124. loading: false
  125. };
  126. },
  127. methods: {
  128. next() {
  129. Toast.loading({
  130. mask: true,
  131. message: '图片上传较慢,请耐心等待...',
  132. duration: 1000
  133. });
  134. this.loading = true;
  135. // 检查输入
  136. if (this.phone.length !== 11) {
  137. Toast.fail("请输入11位手机号");
  138. this.phoneError = true;
  139. this.loading = false;
  140. return;
  141. } else if (!isNumber(this.phone)) {
  142. Toast.fail("请输入正确格式的手机号");
  143. this.phoneError = true;
  144. this.loading = false;
  145. return;
  146. } else if (isEmojiCharacter(this.username)) {
  147. Toast.fail('不支持表情哦');
  148. this.usernameError = true;
  149. this.loading = false;
  150. return;
  151. } else if (this.username.length < 1) {
  152. Toast.fail('请输入昵称');
  153. this.usernameError = true;
  154. this.loading = false;
  155. return;
  156. } else if (isEmojiCharacter(this.wechat) || this.wechat.length < 6) {
  157. this.wechatError = true;
  158. Toast.fail('请输入正确格式的微信号');
  159. this.loading = false;
  160. return;
  161. } else if (this.dorId === -1) {
  162. Toast.fail('请选择宿舍区');
  163. this.loading = false;
  164. return;
  165. } else if (this.photo === null) {
  166. Toast.fail('请上传校卡正面照片');
  167. this.loading = false;
  168. return;
  169. }
  170. let that = this;
  171. // console.log('------- photo -------');
  172. // console.log(this.photo);
  173. let formData = new FormData();
  174. formData.append('file', this.photo);
  175. BasicFunction.get_data("fileserver/upload?sign=abcdefg", function (res) {
  176. // console.log('----- upload photo result -----');
  177. // console.log(res);
  178. // if (res.model === undefined || res.model.length === 0) {
  179. // Toast.fail('上传失败,请重试');
  180. // return;
  181. // }
  182. try {
  183. let imgURL = res.model;
  184. if (res.ret === '10000') {
  185. let userId = localStorage.getItem('frontend-userid');
  186. // console.log('----- User Identity -----');
  187. BasicFunction.get_data("smartIdentity/list?userId=" + userId, function (res) {
  188. try {
  189. let useridentity = res.model.list[0];
  190. if (res.ret === '10000' && res.model !== undefined && res.model.list !== undefined && res.model.list.length > 0) {
  191. useridentity.userWxAccount = that.wechat;
  192. useridentity.dormDistrict = that.dorId;
  193. useridentity.userSex = parseInt(that.radio);
  194. useridentity.userSchoolCardPic = imgURL;
  195. useridentity.userReviewStatus = 100;
  196. useridentity.reviewerNote = "未审核";
  197. useridentity.reviewerNoteToUser = "未审核";
  198. BasicFunction.get_data("smartIdentity/updateBatch", function (response) {
  199. // console.log(useridentity);
  200. // console.log(response);
  201. if (response.ret === "10000") {
  202. // console.log('----- User Info -----');
  203. BasicFunction.get_data('smartUsers/list?uid=' + userId, function (res) {
  204. // console.log(res);
  205. try {
  206. let user = res.model.list[0];
  207. if (res.ret === '10000' && res.model !== undefined && res.model.list !== undefined) {
  208. user.name = that.username;
  209. user.phone = that.phone;
  210. // console.log('----- Update User Info -----');
  211. // console.log(user);
  212. BasicFunction.get_data('smartUsers/updateBatch', function (res) {
  213. // console.log(res);
  214. if (res !== undefined && res.ret === '10000') {
  215. Toast.success("注册成功");
  216. that.$router.push('presentRegister');
  217. } else {
  218. Toast.fail('注册失败');
  219. that.loading = false;
  220. }
  221. }, [user]);
  222. } else {
  223. Toast.fail('获取用户信息失败');
  224. that.loading = false;
  225. }
  226. } catch (e) {
  227. console.warn(e);
  228. Toast.fail('获取用户信息失败');
  229. that.loading = false;
  230. }
  231. }, {});
  232. } else {
  233. Toast.fail("注册失败,请检查网络");
  234. that.loading = false;
  235. }
  236. }, [useridentity]);
  237. } else {
  238. Toast.fail('获取信息失败');
  239. that.loading = false;
  240. }
  241. } catch (e) {
  242. console.warn(e);
  243. Toast.fail('获取信息失败');
  244. that.loading = false;
  245. }
  246. }, {});
  247. } else {
  248. Toast.fail('上传图片失败,请检查网络');
  249. that.loading = false;
  250. }
  251. } catch (e) {
  252. console.warn(e);
  253. Toast.fail('上传图片失败,请检查网络');
  254. that.loading = false;
  255. }
  256. }, formData);
  257. },
  258. onSelect(item) {
  259. // 点击选项时默认不会关闭菜单,可以手动关闭
  260. this.show = false;
  261. this.dormitory = item.name;
  262. this.dorId = item.id;
  263. },
  264. onRead(e) {
  265. this.photo = e;
  266. }
  267. },
  268. created: function () {
  269. let userid = localStorage.getItem('frontend-userid');
  270. let that = this;
  271. if(userid == null || userid === undefined){
  272. this.$router.push('login');
  273. return;
  274. }
  275. BasicFunction.get_data('smartUsers/list?uid=' + userid, function (res) {
  276. // console.log('----- User Info ----- ' + userid);
  277. // console.log(res);
  278. if (res.ret === '10000') {
  279. if(res.model === undefined || res.model == null || res.model.list == undefined || res.model.list.length <= 0){
  280. this.$router.push('login');
  281. return;
  282. }
  283. if (res.model.list[0].phone != null && res.model.list[0].phone.length !== 0) {
  284. that.$router.push('presentRegister');
  285. return;
  286. }
  287. }
  288. }, {});
  289. }
  290. }
  291. // 判断是否有emoji
  292. function isEmojiCharacter(substring) {
  293. for (var i = 0; i < substring.length; i++) {
  294. var hs = substring.charCodeAt(i);
  295. if (0xd800 <= hs && hs <= 0xdbff) {
  296. if (substring.length > 1) {
  297. var ls = substring.charCodeAt(i + 1);
  298. var uc = ((hs - 0xd800) * 0x400) + (ls - 0xdc00) + 0x10000;
  299. if (0x1d000 <= uc && uc <= 0x1f77f) {
  300. return true;
  301. }
  302. }
  303. } else if (substring.length > 1) {
  304. var ls = substring.charCodeAt(i + 1);
  305. if (ls == 0x20e3) {
  306. return true;
  307. }
  308. } else {
  309. if (0x2100 <= hs && hs <= 0x27ff) {
  310. return true;
  311. } else if (0x2B05 <= hs && hs <= 0x2b07) {
  312. return true;
  313. } else if (0x2934 <= hs && hs <= 0x2935) {
  314. return true;
  315. } else if (0x3297 <= hs && hs <= 0x3299) {
  316. return true;
  317. } else if (hs == 0xa9 || hs == 0xae || hs == 0x303d || hs == 0x3030
  318. || hs == 0x2b55 || hs == 0x2b1c || hs == 0x2b1b
  319. || hs == 0x2b50) {
  320. return true;
  321. }
  322. }
  323. }
  324. }
  325. // 判断是否是数字
  326. function isNumber(str) {
  327. for (let i = 0; i < str.length; i++) {
  328. if (str[i] < '0' || str[i] > '9') return false;
  329. }
  330. return true;
  331. }
  332. </script>
  333. <style scoped>
  334. p, h3 {
  335. color: #fd6740;
  336. }
  337. h3 {
  338. padding: 5px;
  339. border-bottom: solid 1px #e4e4e4;
  340. }
  341. .card {
  342. background-color: white;
  343. margin: 20px 20px;
  344. border: solid 1px #e4e4e4;
  345. padding: 15px;
  346. text-align: left;
  347. }
  348. .submit_button {
  349. margin-bottom: 10px;
  350. margin-left: auto;
  351. margin-right: auto;
  352. background-color: #fd6740;
  353. border-color: #fd6740;
  354. width: 85%;
  355. }
  356. </style>