|
|
@@ -1,459 +1,503 @@
|
|
|
-<template>
|
|
|
- <div>
|
|
|
- <nav-bar path="index" title="身份验证"/>
|
|
|
- <div class='card'>
|
|
|
- <h3><strong>个人资料</strong></h3>
|
|
|
- <van-cell-group :border="false">
|
|
|
- <van-field
|
|
|
- v-model="phone"
|
|
|
- required
|
|
|
- clearable
|
|
|
- label="手机号"
|
|
|
- placeholder="请输入手机号"
|
|
|
- :error="phoneError"
|
|
|
- @click="phoneError=false"
|
|
|
- />
|
|
|
- <!--<van-field-->
|
|
|
- <!--v-model="sms"-->
|
|
|
- <!--center-->
|
|
|
- <!--clearable-->
|
|
|
- <!--label="短信验证码"-->
|
|
|
- <!--placeholder="请输入短信验证码"-->
|
|
|
- <!--required-->
|
|
|
- <!--disabled-->
|
|
|
- <!-->-->
|
|
|
- <!--<van-button slot="button" size="small" type="primary">发送验证码</van-button>-->
|
|
|
- <!--</van-field>-->
|
|
|
-
|
|
|
- <van-field
|
|
|
- v-model="username"
|
|
|
- required
|
|
|
- clearable
|
|
|
- label="昵称"
|
|
|
- placeholder="请输入昵称"
|
|
|
- maxlength="12"
|
|
|
- :error="usernameError"
|
|
|
- @click="usernameError=false"
|
|
|
- />
|
|
|
- <van-field
|
|
|
- v-model="wechat"
|
|
|
- required
|
|
|
- clearable
|
|
|
- label="微信号"
|
|
|
- placeholder="请输入微信号"
|
|
|
- maxlength="20"
|
|
|
- :error="wechatError"
|
|
|
- @click="wechatError=false"
|
|
|
- />
|
|
|
- </van-cell-group>
|
|
|
-
|
|
|
- <p>性别</p>
|
|
|
- <van-radio-group v-model="radio">
|
|
|
- <van-radio name="1" checked-color="#fd6740" style="float: left; margin-right: 20px">男</van-radio>
|
|
|
- <van-radio name="2" checked-color="#fd6740">女</van-radio>
|
|
|
- </van-radio-group>
|
|
|
-
|
|
|
- <p>宿舍区</p>
|
|
|
- <van-button size="large" @click="show = true">{{dormitory}}</van-button>
|
|
|
- <van-actionsheet
|
|
|
- v-model="show"
|
|
|
- :actions="actions"
|
|
|
- cancel-text="取消"
|
|
|
- @select="onSelect"
|
|
|
- />
|
|
|
- </div>
|
|
|
-
|
|
|
- <div class="card" style="margin-bottom: 10px">
|
|
|
- <p>上传校卡照片</p>
|
|
|
- <div style="margin-bottom: 10px">
|
|
|
- <add-photo @onRead="onRead"/>
|
|
|
- </div>
|
|
|
- <p>活动仅允许深大学生参与，请上传正面校卡照片审核~</p>
|
|
|
- </div>
|
|
|
-
|
|
|
- <van-button
|
|
|
- class="submit_button"
|
|
|
- type="primary"
|
|
|
- @click="next"
|
|
|
- :loading="loading"
|
|
|
- >下一步
|
|
|
- </van-button>
|
|
|
- </div>
|
|
|
-</template>
|
|
|
-
|
|
|
-<script>
|
|
|
- import {BasicFunction} from "../connector/basic-service";
|
|
|
- import NavBar from '../components/navBar';
|
|
|
- import {
|
|
|
- Uploader, Icon,
|
|
|
- CellGroup, Field,
|
|
|
- RadioGroup, Radio,
|
|
|
- Picker,
|
|
|
- Button,
|
|
|
- Actionsheet,
|
|
|
- Toast
|
|
|
- } from 'vant';
|
|
|
- import AddPhoto from "../components/addPhoto";
|
|
|
- export default {
|
|
|
- name: "SecurityVerify",
|
|
|
- components: {
|
|
|
- AddPhoto,
|
|
|
- NavBar,
|
|
|
- [Uploader.name]: Uploader, [Icon.name]: Icon,
|
|
|
- [CellGroup.name]: CellGroup, [Field.name]: Field,
|
|
|
- [RadioGroup.name]: RadioGroup, [Radio.name]: Radio,
|
|
|
- [Picker.name]: Picker,
|
|
|
- [Button.name]: Button,
|
|
|
- [Actionsheet.name]: Actionsheet
|
|
|
- },
|
|
|
- data() {
|
|
|
- return {
|
|
|
- phone: '',
|
|
|
- phoneError: false,
|
|
|
- sms: '',
|
|
|
- username: '',
|
|
|
- usernameError: false,
|
|
|
- wechat: '',
|
|
|
- wechatError: false,
|
|
|
- radio: '1',
|
|
|
- show: false,
|
|
|
- dormitory: '点击选择宿舍区',
|
|
|
- dorId: -1,
|
|
|
- actions: [
|
|
|
- {id: 0, name: '斋区'},
|
|
|
- {id: 1, name: '西南'},
|
|
|
- {id: 2, name: '南区'},
|
|
|
- {id: 3, name: '桂庙'},
|
|
|
- {id: 4, name: '西丽'},
|
|
|
- ],
|
|
|
- photo: null,
|
|
|
- loading: false,
|
|
|
- userDo : {},
|
|
|
- identityDo : {},
|
|
|
- identityUpload : false,
|
|
|
- userUpload : false
|
|
|
- };
|
|
|
- },
|
|
|
- methods: {
|
|
|
- next() {
|
|
|
- Toast.loading({
|
|
|
- mask: true,
|
|
|
- message: '此过程大约需要15s，你的校卡正在拼命上传，请耐心等待...',
|
|
|
- duration: 20000
|
|
|
- });
|
|
|
- this.loading = true;
|
|
|
- // 检查输入
|
|
|
- if (this.phone.length !== 11) {
|
|
|
- Toast.fail("请输入11位手机号");
|
|
|
- this.phoneError = true;
|
|
|
- this.loading = false;
|
|
|
- return;
|
|
|
- } else if (!isNumber(this.phone)) {
|
|
|
- Toast.fail("请输入正确格式的手机号");
|
|
|
- this.phoneError = true;
|
|
|
- this.loading = false;
|
|
|
- return;
|
|
|
- } else if (isEmojiCharacter(this.username)) {
|
|
|
- Toast.fail('不支持表情哦');
|
|
|
- this.usernameError = true;
|
|
|
- this.loading = false;
|
|
|
- return;
|
|
|
- } else if (this.username.length < 1) {
|
|
|
- Toast.fail('请输入昵称');
|
|
|
- this.usernameError = true;
|
|
|
- this.loading = false;
|
|
|
- return;
|
|
|
- } else if (isEmojiCharacter(this.wechat) || this.wechat.length < 6) {
|
|
|
- this.wechatError = true;
|
|
|
- Toast.fail('请输入正确格式的微信号');
|
|
|
- this.loading = false;
|
|
|
- return;
|
|
|
- } else if (this.dorId === -1) {
|
|
|
- Toast.fail('请选择宿舍区');
|
|
|
- this.loading = false;
|
|
|
- return;
|
|
|
- } else if (this.photo === null) {
|
|
|
- Toast.fail('请上传校卡正面照片');
|
|
|
- this.loading = false;
|
|
|
- return;
|
|
|
- }
|
|
|
-
|
|
|
- let that = this;
|
|
|
- // console.log('------- photo -------');
|
|
|
- // console.log(this.photo);
|
|
|
- this.updateInfo(null);
|
|
|
- // let fileObj = this.photo;
|
|
|
- let formData = new FormData();
|
|
|
-
|
|
|
-
|
|
|
- // if(fileObj.size/1024 > 1025) { //大于1M，进行压缩上传
|
|
|
- // photoCompress(fileObj, {
|
|
|
- // quality: 0.2
|
|
|
- // }, function(base64Codes){
|
|
|
- // //console.log("压缩后：" + base.length / 1024 + " " + base);
|
|
|
- // var bl = convertBase64UrlToBlob(base64Codes);
|
|
|
- // formData.append('file', fileObj);
|
|
|
- // console.log(formData);
|
|
|
- // formData.append("file", bl, "file_"+Date.parse(new Date())+".jpg"); // 文件对象
|
|
|
- // console.log(formData);
|
|
|
- // });
|
|
|
- // }else { //小于等于1M 原图上传
|
|
|
- // formData.append('file', this.photo);
|
|
|
- // }
|
|
|
-
|
|
|
- BasicFunction.get_data("fileserver/upload?sign=abcdefg", function (res) {
|
|
|
- try {
|
|
|
- let imgURL = res.model;
|
|
|
- if (res.ret === '10000') {
|
|
|
- that.updateInfo(imgURL);
|
|
|
- } else {
|
|
|
- Toast.fail('上传图片失败，请检查网络');
|
|
|
- that.loading = false;
|
|
|
- }
|
|
|
- } catch (e) {
|
|
|
- console.warn(e);
|
|
|
- Toast.fail('上传图片失败，请检查网络');
|
|
|
- that.loading = false;
|
|
|
- }
|
|
|
- }, formData);
|
|
|
- },
|
|
|
- updateInfo(image){
|
|
|
- let userId = localStorage.getItem('frontend-userid');
|
|
|
- let that = this;
|
|
|
- let useridentity = that.identityDo;
|
|
|
- useridentity.userWxAccount = that.wechat;
|
|
|
- useridentity.dormDistrict = that.dorId;
|
|
|
- useridentity.userSex = parseInt(that.radio);
|
|
|
- if(image != null){
|
|
|
- useridentity.userSchoolCardPic = image;
|
|
|
- }
|
|
|
- let beforeImage = image;
|
|
|
- useridentity.userSchoolCardPic = image;
|
|
|
- useridentity.userReviewStatus = 100;
|
|
|
- useridentity.reviewerNote = "等待审核";
|
|
|
- useridentity.reviewerNoteToUser = "等待审核";
|
|
|
- BasicFunction.get_data("smartIdentity/updateBatch", function (response) {
|
|
|
- // console.log(useridentity);
|
|
|
- // console.log(response);
|
|
|
- if (response.ret === "10000") {
|
|
|
- // console.log('----- User Info -----');
|
|
|
- if(beforeImage != null) {
|
|
|
- that.identityUpload = true;
|
|
|
- if (that.userUpload == true) {
|
|
|
- Toast.success("注册成功");
|
|
|
- that.$router.push('presentRegister');
|
|
|
- return;
|
|
|
- }
|
|
|
- }
|
|
|
- } else {
|
|
|
- Toast.fail("注册失败，请检查网络");
|
|
|
- that.loading = false;
|
|
|
- }
|
|
|
- }, [useridentity]);
|
|
|
-
|
|
|
- let user = that.userDo;
|
|
|
- user.name = that.username;
|
|
|
- user.phone = that.phone;
|
|
|
- // console.log('----- Update User Info -----');
|
|
|
- // console.log(user);
|
|
|
- BasicFunction.get_data('smartUsers/updateBatch', function (res) {
|
|
|
- // console.log(res);
|
|
|
- if (res !== undefined && res.ret === '10000') {
|
|
|
- that.userUpload = true;
|
|
|
- if(that.identityUpload == true && beforeImage != null) {
|
|
|
- Toast.success("注册成功");
|
|
|
- that.$router.push('presentRegister');
|
|
|
- return;
|
|
|
- }
|
|
|
- } else {
|
|
|
- Toast.fail('注册失败，请稍后再试');
|
|
|
- that.loading = false;
|
|
|
- }
|
|
|
- }, [user]);
|
|
|
- },
|
|
|
- onSelect(item) {
|
|
|
- // 点击选项时默认不会关闭菜单，可以手动关闭
|
|
|
- this.show = false;
|
|
|
- this.dormitory = item.name;
|
|
|
- this.dorId = item.id;
|
|
|
- },
|
|
|
- onRead(e) {
|
|
|
- this.photo = e;
|
|
|
- }
|
|
|
- },
|
|
|
- created: function () {
|
|
|
- let userid = localStorage.getItem('frontend-userid');
|
|
|
- let that = this;
|
|
|
- if(userid == null || userid === undefined){
|
|
|
- this.$router.push('login');
|
|
|
- return;
|
|
|
- }
|
|
|
- BasicFunction.get_data('smartUsers/list?uid=' + userid, function (res) {
|
|
|
- if (res.ret === '10000') {
|
|
|
- if(res.model === undefined || res.model == null || res.model.list == undefined || res.model.list.length <= 0){
|
|
|
- localStorage.removeItem('frontend-userid');
|
|
|
- that.$router.push('login');
|
|
|
- return;
|
|
|
- }
|
|
|
- if (res.model.list[0].phone != null && res.model.list[0].phone.length !== 0) {
|
|
|
- that.$router.push('presentRegister');
|
|
|
- return;
|
|
|
- }
|
|
|
- that.userDo = res.model.list[0];
|
|
|
- }
|
|
|
- }, {});
|
|
|
- BasicFunction.get_data("smartIdentity/list?userId=" + userid, function (res) {
|
|
|
- try {
|
|
|
- if (res.ret === '10000' && res.model !== undefined && res.model.list !== undefined && res.model.list.length > 0) {
|
|
|
- that.identityDo = res.model.list[0];
|
|
|
- } else {
|
|
|
- localStorage.removeItem('frontend-userid');
|
|
|
- that.loading = false;
|
|
|
- that.$router.push('login');
|
|
|
- }
|
|
|
- } catch (e) {
|
|
|
- console.warn(e);
|
|
|
- Toast.fail('获取信息缓慢，请检查网络或等一会再试吧！');
|
|
|
- localStorage.removeItem('frontend-userid');
|
|
|
- that.loading = false;
|
|
|
- that.$router.push('login');
|
|
|
- }
|
|
|
- }, {});
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- // 判断是否有emoji
|
|
|
- function isEmojiCharacter(substring) {
|
|
|
- for (var i = 0; i < substring.length; i++) {
|
|
|
- var hs = substring.charCodeAt(i);
|
|
|
- if (0xd800 <= hs && hs <= 0xdbff) {
|
|
|
- if (substring.length > 1) {
|
|
|
- var ls = substring.charCodeAt(i + 1);
|
|
|
- var uc = ((hs - 0xd800) * 0x400) + (ls - 0xdc00) + 0x10000;
|
|
|
- if (0x1d000 <= uc && uc <= 0x1f77f) {
|
|
|
- return true;
|
|
|
- }
|
|
|
- }
|
|
|
- } else if (substring.length > 1) {
|
|
|
- var ls = substring.charCodeAt(i + 1);
|
|
|
- if (ls == 0x20e3) {
|
|
|
- return true;
|
|
|
- }
|
|
|
- } else {
|
|
|
- if (0x2100 <= hs && hs <= 0x27ff) {
|
|
|
- return true;
|
|
|
- } else if (0x2B05 <= hs && hs <= 0x2b07) {
|
|
|
- return true;
|
|
|
- } else if (0x2934 <= hs && hs <= 0x2935) {
|
|
|
- return true;
|
|
|
- } else if (0x3297 <= hs && hs <= 0x3299) {
|
|
|
- return true;
|
|
|
- } else if (hs == 0xa9 || hs == 0xae || hs == 0x303d || hs == 0x3030
|
|
|
- || hs == 0x2b55 || hs == 0x2b1c || hs == 0x2b1b
|
|
|
- || hs == 0x2b50) {
|
|
|
- return true;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- // 判断是否是数字
|
|
|
- function isNumber(str) {
|
|
|
- for (let i = 0; i < str.length; i++) {
|
|
|
- if (str[i] < '0' || str[i] > '9') return false;
|
|
|
- }
|
|
|
- return true;
|
|
|
- }
|
|
|
-
|
|
|
- /*
|
|
|
- 三个参数
|
|
|
- file：一个是文件(类型是图片格式)，
|
|
|
- w：一个是文件压缩的后宽度，宽度越小，字节越小
|
|
|
- objDiv：一个是容器或者回调函数
|
|
|
- photoCompress()
|
|
|
- */
|
|
|
- function photoCompress(file, w, objDiv) {
|
|
|
- var ready = new FileReader();
|
|
|
- /*开始读取指定的Blob对象或File对象中的内容. 当读取操作完成时,readyState属性的值会成为DONE,如果设置了onloadend事件处理程序,则调用之.同时,result属性中将包含一个data: URL格式的字符串以表示所读取文件的内容.*/
|
|
|
- ready.readAsDataURL(file);
|
|
|
- ready.onload = function () {
|
|
|
- var re = this.result;
|
|
|
- canvasDataURL(re, w, objDiv)
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- function canvasDataURL(path, obj, callback) {
|
|
|
- var img = new Image();
|
|
|
- img.src = path;
|
|
|
- img.onload = function () {
|
|
|
- var that = this;
|
|
|
- // 默认按比例压缩
|
|
|
- var w = that.width,
|
|
|
- h = that.height,
|
|
|
- scale = w / h;
|
|
|
- w = obj.width || w;
|
|
|
- h = obj.height || (w / scale);
|
|
|
- var quality = 0.7; // 默认图片质量为0.7
|
|
|
- //生成canvas
|
|
|
- var canvas = document.createElement('canvas');
|
|
|
- var ctx = canvas.getContext('2d');
|
|
|
- // 创建属性节点
|
|
|
- var anw = document.createAttribute("width");
|
|
|
- anw.nodeValue = w;
|
|
|
- var anh = document.createAttribute("height");
|
|
|
- anh.nodeValue = h;
|
|
|
- canvas.setAttributeNode(anw);
|
|
|
- canvas.setAttributeNode(anh);
|
|
|
- ctx.drawImage(that, 0, 0, w, h);
|
|
|
- // 图像质量
|
|
|
- if (obj.quality && obj.quality <= 1 && obj.quality > 0) {
|
|
|
- quality = obj.quality;
|
|
|
- }
|
|
|
- // quality值越小，所绘制出的图像越模糊
|
|
|
- var base64 = canvas.toDataURL('image/jpeg', quality);
|
|
|
- // 回调函数返回base64的值
|
|
|
- callback(base64);
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- /**
|
|
|
- * 将以base64的图片url数据转换为Blob
|
|
|
- * @param urlData
|
|
|
- * 用url方式表示的base64图片数据
|
|
|
- */
|
|
|
- function convertBase64UrlToBlob(urlData) {
|
|
|
- var arr = urlData.split(','), mime = arr[0].match(/:(.*?);/)[1],
|
|
|
- bstr = atob(arr[1]), n = bstr.length, u8arr = new Uint8Array(n);
|
|
|
- while (n--) {
|
|
|
- u8arr[n] = bstr.charCodeAt(n);
|
|
|
- }
|
|
|
- return new Blob([u8arr], {type: mime});
|
|
|
- }
|
|
|
-
|
|
|
-</script>
|
|
|
-
|
|
|
-<style scoped>
|
|
|
- p, h3 {
|
|
|
- color: #fd6740;
|
|
|
- }
|
|
|
- h3 {
|
|
|
- padding: 5px;
|
|
|
- border-bottom: solid 1px #e4e4e4;
|
|
|
- }
|
|
|
- .card {
|
|
|
- background-color: white;
|
|
|
- margin: 20px 20px;
|
|
|
- border: solid 1px #e4e4e4;
|
|
|
- padding: 15px;
|
|
|
- text-align: left;
|
|
|
- }
|
|
|
-
|
|
|
- .submit_button {
|
|
|
- margin-bottom: 10px;
|
|
|
- margin-left: auto;
|
|
|
- margin-right: auto;
|
|
|
- background-color: #fd6740;
|
|
|
- border-color: #fd6740;
|
|
|
- width: 85%;
|
|
|
- }
|
|
|
+<template>
|
|
|
+ <div>
|
|
|
+ <nav-bar path="index" title="身份验证"/>
|
|
|
+ <div class='card'>
|
|
|
+ <h3><strong>个人资料</strong></h3>
|
|
|
+ <van-cell-group :border="false">
|
|
|
+ <van-field
|
|
|
+ v-model="phone"
|
|
|
+ required
|
|
|
+ clearable
|
|
|
+ label="手机号"
|
|
|
+ placeholder="请输入手机号"
|
|
|
+ :error="phoneError"
|
|
|
+ @click="phoneError=false"
|
|
|
+ />
|
|
|
+ <!--<van-field-->
|
|
|
+ <!--v-model="sms"-->
|
|
|
+ <!--center-->
|
|
|
+ <!--clearable-->
|
|
|
+ <!--label="短信验证码"-->
|
|
|
+ <!--placeholder="请输入短信验证码"-->
|
|
|
+ <!--required-->
|
|
|
+ <!--disabled-->
|
|
|
+ <!-->-->
|
|
|
+ <!--<van-button slot="button" size="small" type="primary">发送验证码</van-button>-->
|
|
|
+ <!--</van-field>-->
|
|
|
+
|
|
|
+ <van-field
|
|
|
+ v-model="username"
|
|
|
+ required
|
|
|
+ clearable
|
|
|
+ label="昵称"
|
|
|
+ placeholder="请输入昵称"
|
|
|
+ maxlength="12"
|
|
|
+ :error="usernameError"
|
|
|
+ @click="usernameError=false"
|
|
|
+ />
|
|
|
+ <van-field
|
|
|
+ v-model="wechat"
|
|
|
+ required
|
|
|
+ clearable
|
|
|
+ label="微信号"
|
|
|
+ placeholder="请输入微信号"
|
|
|
+ maxlength="20"
|
|
|
+ :error="wechatError"
|
|
|
+ @click="wechatError=false"
|
|
|
+ />
|
|
|
+ </van-cell-group>
|
|
|
+
|
|
|
+ <p>性别</p>
|
|
|
+ <van-radio-group v-model="radio">
|
|
|
+ <van-radio name="1" checked-color="#fd6740" style="float: left; margin-right: 20px">男</van-radio>
|
|
|
+ <van-radio name="2" checked-color="#fd6740">女</van-radio>
|
|
|
+ </van-radio-group>
|
|
|
+
|
|
|
+ <p>宿舍区</p>
|
|
|
+ <van-button size="large" @click="show = true">{{dormitory}}</van-button>
|
|
|
+ <van-actionsheet
|
|
|
+ v-model="show"
|
|
|
+ :actions="actions"
|
|
|
+ cancel-text="取消"
|
|
|
+ @select="onSelect"
|
|
|
+ />
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="card" style="margin-bottom: 10px">
|
|
|
+ <p>上传校卡照片</p>
|
|
|
+ <div style="margin-bottom: 10px">
|
|
|
+ <add-photo @onRead="onRead"/>
|
|
|
+ </div>
|
|
|
+ <p>活动仅允许深大学生参与，请上传正面校卡照片审核~</p>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <van-button
|
|
|
+ class="submit_button"
|
|
|
+ type="primary"
|
|
|
+ @click="next"
|
|
|
+ :loading="loading"
|
|
|
+ >下一步
|
|
|
+ </van-button>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+ import {BasicFunction} from "../connector/basic-service";
|
|
|
+ import NavBar from '../components/navBar';
|
|
|
+ import {
|
|
|
+ Uploader, Icon,
|
|
|
+ CellGroup, Field,
|
|
|
+ RadioGroup, Radio,
|
|
|
+ Picker,
|
|
|
+ Button,
|
|
|
+ Actionsheet,
|
|
|
+ Toast
|
|
|
+ } from 'vant';
|
|
|
+ import AddPhoto from "../components/addPhoto";
|
|
|
+ export default {
|
|
|
+ name: "SecurityVerify",
|
|
|
+ components: {
|
|
|
+ AddPhoto,
|
|
|
+ NavBar,
|
|
|
+ [Uploader.name]: Uploader, [Icon.name]: Icon,
|
|
|
+ [CellGroup.name]: CellGroup, [Field.name]: Field,
|
|
|
+ [RadioGroup.name]: RadioGroup, [Radio.name]: Radio,
|
|
|
+ [Picker.name]: Picker,
|
|
|
+ [Button.name]: Button,
|
|
|
+ [Actionsheet.name]: Actionsheet
|
|
|
+ },
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ phone: '',
|
|
|
+ phoneError: false,
|
|
|
+ sms: '',
|
|
|
+ username: '',
|
|
|
+ usernameError: false,
|
|
|
+ wechat: '',
|
|
|
+ wechatError: false,
|
|
|
+ radio: '1',
|
|
|
+ show: false,
|
|
|
+ dormitory: '点击选择宿舍区',
|
|
|
+ dorId: -1,
|
|
|
+ actions: [
|
|
|
+ {id: 0, name: '斋区'},
|
|
|
+ {id: 1, name: '西南'},
|
|
|
+ {id: 2, name: '南区'},
|
|
|
+ {id: 3, name: '桂庙'},
|
|
|
+ {id: 4, name: '西丽'},
|
|
|
+ ],
|
|
|
+ photo: null,
|
|
|
+ loading: false,
|
|
|
+ userDo : {},
|
|
|
+ identityDo : {},
|
|
|
+ identityUpload : false,
|
|
|
+ userUpload : false
|
|
|
+ };
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ next() {
|
|
|
+ Toast.loading({
|
|
|
+ mask: true,
|
|
|
+ message: '此过程大约需要15s，你的校卡正在拼命上传，请耐心等待...',
|
|
|
+ duration: 20000
|
|
|
+ });
|
|
|
+ this.loading = true;
|
|
|
+ // 检查输入
|
|
|
+ if (this.phone.length !== 11) {
|
|
|
+ Toast.fail("请输入11位手机号");
|
|
|
+ this.phoneError = true;
|
|
|
+ this.loading = false;
|
|
|
+ return;
|
|
|
+ } else if (!isNumber(this.phone)) {
|
|
|
+ Toast.fail("请输入正确格式的手机号");
|
|
|
+ this.phoneError = true;
|
|
|
+ this.loading = false;
|
|
|
+ return;
|
|
|
+ } else if (isEmojiCharacter(this.username)) {
|
|
|
+ Toast.fail('不支持表情哦');
|
|
|
+ this.usernameError = true;
|
|
|
+ this.loading = false;
|
|
|
+ return;
|
|
|
+ } else if (this.username.length < 1) {
|
|
|
+ Toast.fail('请输入昵称');
|
|
|
+ this.usernameError = true;
|
|
|
+ this.loading = false;
|
|
|
+ return;
|
|
|
+ } else if (isEmojiCharacter(this.wechat) || this.wechat.length < 6) {
|
|
|
+ this.wechatError = true;
|
|
|
+ Toast.fail('请输入正确格式的微信号');
|
|
|
+ this.loading = false;
|
|
|
+ return;
|
|
|
+ } else if (this.dorId === -1) {
|
|
|
+ Toast.fail('请选择宿舍区');
|
|
|
+ this.loading = false;
|
|
|
+ return;
|
|
|
+ } else if (this.photo === null) {
|
|
|
+ Toast.fail('请上传校卡正面照片');
|
|
|
+ this.loading = false;
|
|
|
+ return;
|
|
|
+ }
|
|
|
+
|
|
|
+ let that = this;
|
|
|
+ // console.log('------- photo -------');
|
|
|
+ // console.log(this.photo);
|
|
|
+ this.updateInfo(null);
|
|
|
+ // let fileObj = this.photo;
|
|
|
+ let formData = new FormData();
|
|
|
+
|
|
|
+
|
|
|
+ // if(fileObj.size/1024 > 1025) { //大于1M，进行压缩上传
|
|
|
+ // photoCompress(fileObj, {
|
|
|
+ // quality: 0.2
|
|
|
+ // }, function(base64Codes){
|
|
|
+ // //console.log("压缩后：" + base.length / 1024 + " " + base);
|
|
|
+ // var bl = convertBase64UrlToBlob(base64Codes);
|
|
|
+ // formData.append('file', fileObj);
|
|
|
+ // console.log(formData);
|
|
|
+ // formData.append("file", bl, "file_"+Date.parse(new Date())+".jpg"); // 文件对象
|
|
|
+ // console.log(formData);
|
|
|
+ // });
|
|
|
+ // }else { //小于等于1M 原图上传
|
|
|
+ // formData.append('file', this.photo);
|
|
|
+ // }
|
|
|
+
|
|
|
+ BasicFunction.get_data("fileserver/upload?sign=abcdefg", function (res) {
|
|
|
+ try {
|
|
|
+ let imgURL = res.model;
|
|
|
+ if (res.ret === '10000') {
|
|
|
+ that.updateInfo(imgURL);
|
|
|
+ } else {
|
|
|
+ Toast.fail('上传图片失败，请检查网络');
|
|
|
+ that.loading = false;
|
|
|
+ }
|
|
|
+ } catch (e) {
|
|
|
+ console.warn(e);
|
|
|
+ Toast.fail('上传图片失败，请检查网络');
|
|
|
+ that.loading = false;
|
|
|
+ }
|
|
|
+ }, formData);
|
|
|
+ },
|
|
|
+ updateInfo(image){
|
|
|
+ let userId = localStorage.getItem('frontend-userid');
|
|
|
+ let that = this;
|
|
|
+ let useridentity = that.identityDo;
|
|
|
+ useridentity.userWxAccount = that.wechat;
|
|
|
+ useridentity.dormDistrict = that.dorId;
|
|
|
+ useridentity.userSex = parseInt(that.radio);
|
|
|
+ if(image != null){
|
|
|
+ useridentity.userSchoolCardPic = image;
|
|
|
+ }
|
|
|
+ let beforeImage = image;
|
|
|
+ useridentity.userSchoolCardPic = image;
|
|
|
+ useridentity.userReviewStatus = 100;
|
|
|
+ useridentity.reviewerNote = "等待审核";
|
|
|
+ useridentity.reviewerNoteToUser = "等待审核";
|
|
|
+ BasicFunction.get_data("smartIdentity/updateBatch", function (response) {
|
|
|
+ // console.log(useridentity);
|
|
|
+ // console.log(response);
|
|
|
+ if (response.ret === "10000") {
|
|
|
+ // console.log('----- User Info -----');
|
|
|
+ if(beforeImage != null) {
|
|
|
+ that.identityUpload = true;
|
|
|
+ if (that.userUpload == true) {
|
|
|
+ Toast.success("注册成功");
|
|
|
+ that.$router.push('presentRegister');
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ } else {
|
|
|
+ Toast.fail("注册失败，请检查网络");
|
|
|
+ that.loading = false;
|
|
|
+ }
|
|
|
+ }, [useridentity]);
|
|
|
+
|
|
|
+ let user = that.userDo;
|
|
|
+ user.name = that.username;
|
|
|
+ user.phone = that.phone;
|
|
|
+ // console.log('----- Update User Info -----');
|
|
|
+ // console.log(user);
|
|
|
+ BasicFunction.get_data('smartUsers/updateBatch', function (res) {
|
|
|
+ // console.log(res);
|
|
|
+ if (res !== undefined && res.ret === '10000') {
|
|
|
+ that.userUpload = true;
|
|
|
+ if(that.identityUpload == true && beforeImage != null) {
|
|
|
+ Toast.success("注册成功");
|
|
|
+ that.$router.push('presentRegister');
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ } else {
|
|
|
+ Toast.fail('注册失败，请稍后再试');
|
|
|
+ that.loading = false;
|
|
|
+ }
|
|
|
+ }, [user]);
|
|
|
+ },
|
|
|
+ onSelect(item) {
|
|
|
+ // 点击选项时默认不会关闭菜单，可以手动关闭
|
|
|
+ this.show = false;
|
|
|
+ this.dormitory = item.name;
|
|
|
+ this.dorId = item.id;
|
|
|
+ },
|
|
|
+ onRead(e) {
|
|
|
+ this.photo = e;
|
|
|
+ }
|
|
|
+ },
|
|
|
+ created: function () {
|
|
|
+ let userid = localStorage.getItem('frontend-userid');
|
|
|
+ let that = this;
|
|
|
+ if(userid == null || userid === undefined){
|
|
|
+ this.$router.push('login');
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ BasicFunction.get_data('smartUsers/list?uid=' + userid, function (res) {
|
|
|
+ if (res.ret === '10000') {
|
|
|
+ if(res.model === undefined || res.model == null || res.model.list == undefined || res.model.list.length <= 0){
|
|
|
+ localStorage.removeItem('frontend-userid');
|
|
|
+ that.$router.push('login');
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ if (res.model.list[0].phone != null && res.model.list[0].phone.length !== 0) {
|
|
|
+ that.$router.push('presentRegister');
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ that.userDo = res.model.list[0];
|
|
|
+ }
|
|
|
+ }, {});
|
|
|
+ BasicFunction.get_data("smartIdentity/list?userId=" + userId, function (res) {
|
|
|
+ try {
|
|
|
+ if (res.ret === '10000' && res.model !== undefined && res.model.list !== undefined && res.model.list.length > 0) {
|
|
|
+ that.identityDo = res.model.list[0];
|
|
|
+ } else {
|
|
|
+ localStorage.removeItem('frontend-userid');
|
|
|
+ that.loading = false;
|
|
|
+ that.$router.push('login');
|
|
|
+ }
|
|
|
+ } catch (e) {
|
|
|
+ console.warn(e);
|
|
|
+ Toast.fail('获取信息缓慢，请检查网络或等一会再试吧！');
|
|
|
+ localStorage.removeItem('frontend-userid');
|
|
|
+ that.loading = false;
|
|
|
+ that.$router.push('login');
|
|
|
+ }
|
|
|
+ }, {});
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ // 判断是否有emoji
|
|
|
+ function isEmojiCharacter(substring) {
|
|
|
+ for (var i = 0; i < substring.length; i++) {
|
|
|
+ var hs = substring.charCodeAt(i);
|
|
|
+ if (0xd800 <= hs && hs <= 0xdbff) {
|
|
|
+ if (substring.length > 1) {
|
|
|
+ var ls = substring.charCodeAt(i + 1);
|
|
|
+ var uc = ((hs - 0xd800) * 0x400) + (ls - 0xdc00) + 0x10000;
|
|
|
+ if (0x1d000 <= uc && uc <= 0x1f77f) {
|
|
|
+ return true;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ } else if (substring.length > 1) {
|
|
|
+ var ls = substring.charCodeAt(i + 1);
|
|
|
+ if (ls == 0x20e3) {
|
|
|
+ return true;
|
|
|
+ }
|
|
|
+ } else {
|
|
|
+ if (0x2100 <= hs && hs <= 0x27ff) {
|
|
|
+ return true;
|
|
|
+ } else if (0x2B05 <= hs && hs <= 0x2b07) {
|
|
|
+ return true;
|
|
|
+ } else if (0x2934 <= hs && hs <= 0x2935) {
|
|
|
+ return true;
|
|
|
+ } else if (0x3297 <= hs && hs <= 0x3299) {
|
|
|
+ return true;
|
|
|
+ } else if (hs == 0xa9 || hs == 0xae || hs == 0x303d || hs == 0x3030
|
|
|
+ || hs == 0x2b55 || hs == 0x2b1c || hs == 0x2b1b
|
|
|
+ || hs == 0x2b50) {
|
|
|
+ return true;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ // 判断是否是数字
|
|
|
+ function isNumber(str) {
|
|
|
+ for (let i = 0; i < str.length; i++) {
|
|
|
+ if (str[i] < '0' || str[i] > '9') return false;
|
|
|
+ }
|
|
|
+ return true;
|
|
|
+ }
|
|
|
+
|
|
|
+ /*
|
|
|
+ 三个参数
|
|
|
+ file：一个是文件(类型是图片格式)，
|
|
|
+ w：一个是文件压缩的后宽度，宽度越小，字节越小
|
|
|
+ objDiv：一个是容器或者回调函数
|
|
|
+ photoCompress()
|
|
|
+ */
|
|
|
+ function photoCompress(file, w, objDiv) {
|
|
|
+ var ready = new FileReader();
|
|
|
+ /*开始读取指定的Blob对象或File对象中的内容. 当读取操作完成时,readyState属性的值会成为DONE,如果设置了onloadend事件处理程序,则调用之.同时,result属性中将包含一个data: URL格式的字符串以表示所读取文件的内容.*/
|
|
|
+ ready.readAsDataURL(file);
|
|
|
+ ready.onload = function () {
|
|
|
+ var re = this.result;
|
|
|
+ canvasDataURL(re, w, objDiv)
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ function canvasDataURL(path, obj, callback) {
|
|
|
+ var img = new Image();
|
|
|
+ img.src = path;
|
|
|
+ img.onload = function () {
|
|
|
+ var that = this;
|
|
|
+ // 默认按比例压缩
|
|
|
+ var w = that.width,
|
|
|
+ h = that.height,
|
|
|
+ scale = w / h;
|
|
|
+ w = obj.width || w;
|
|
|
+ h = obj.height || (w / scale);
|
|
|
+ var quality = 0.7; // 默认图片质量为0.7
|
|
|
+ //生成canvas
|
|
|
+ var canvas = document.createElement('canvas');
|
|
|
+ var ctx = canvas.getContext('2d');
|
|
|
+ // 创建属性节点
|
|
|
+ var anw = document.createAttribute("width");
|
|
|
+ anw.nodeValue = w;
|
|
|
+ var anh = document.createAttribute("height");
|
|
|
+ anh.nodeValue = h;
|
|
|
+ canvas.setAttributeNode(anw);
|
|
|
+ canvas.setAttributeNode(anh);
|
|
|
+ ctx.drawImage(that, 0, 0, w, h);
|
|
|
+ // 图像质量
|
|
|
+ if (obj.quality && obj.quality <= 1 && obj.quality > 0) {
|
|
|
+ quality = obj.quality;
|
|
|
+ }
|
|
|
+ // quality值越小，所绘制出的图像越模糊
|
|
|
+ var base64 = canvas.toDataURL('image/jpeg', quality);
|
|
|
+ // 回调函数返回base64的值
|
|
|
+ callback(base64);
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ /**
|
|
|
+ * 将以base64的图片url数据转换为Blob
|
|
|
+ * @param urlData
|
|
|
+ * 用url方式表示的base64图片数据
|
|
|
+ */
|
|
|
+ function convertBase64UrlToBlob(urlData) {
|
|
|
+ var arr = urlData.split(','), mime = arr[0].match(/:(.*?);/)[1],
|
|
|
+ bstr = atob(arr[1]), n = bstr.length, u8arr = new Uint8Array(n);
|
|
|
+ while (n--) {
|
|
|
+ u8arr[n] = bstr.charCodeAt(n);
|
|
|
+ }
|
|
|
+ return new Blob([u8arr], {type: mime});
|
|
|
+ }
|
|
|
+
|
|
|
+
|
|
|
+ //上传文件方法
|
|
|
+ function UpladFile() {
|
|
|
+ var fileObj = document.getElementById("file").files[0]; // js 获取文件对象
|
|
|
+ var url = "后台图片上传接口"; // 接收上传文件的后台地址
|
|
|
+
|
|
|
+ var form = new FormData(); // FormData 对象
|
|
|
+
|
|
|
+ if (fileObj.size / 1024 > 1025) { //大于1M，进行压缩上传
|
|
|
+ photoCompress(fileObj, {
|
|
|
+ quality: 0.2
|
|
|
+ }, function (base64Codes) {
|
|
|
+ //console.log("压缩后：" + base.length / 1024 + " " + base);
|
|
|
+ var bl = convertBase64UrlToBlob(base64Codes);
|
|
|
+ form.append("file", bl, "file_" + Date.parse(new Date()) + ".jpg"); // 文件对象
|
|
|
+ xhr = new XMLHttpRequest(); // XMLHttpRequest 对象
|
|
|
+ xhr.open("post", url, true); //post方式，url为服务器请求地址，true 该参数规定请求是否异步处理。
|
|
|
+ xhr.onload = uploadComplete; //请求完成
|
|
|
+ xhr.onerror = uploadFailed; //请求失败
|
|
|
+
|
|
|
+ xhr.upload.onprogress = progressFunction;//【上传进度调用方法实现】
|
|
|
+ xhr.upload.onloadstart = function () {//上传开始执行方法
|
|
|
+ ot = new Date().getTime(); //设置上传开始时间
|
|
|
+ oloaded = 0;//设置上传开始时，以上传的文件大小为0
|
|
|
+ };
|
|
|
+
|
|
|
+ xhr.send(form); //开始上传，发送form数据
|
|
|
+ });
|
|
|
+ } else { //小于等于1M 原图上传
|
|
|
+ form.append("file", fileObj); // 文件对象
|
|
|
+ xhr = new XMLHttpRequest(); // XMLHttpRequest 对象
|
|
|
+ xhr.open("post", url, true); //post方式，url为服务器请求地址，true 该参数规定请求是否异步处理。
|
|
|
+ xhr.onload = uploadComplete; //请求完成
|
|
|
+ xhr.onerror = uploadFailed; //请求失败
|
|
|
+
|
|
|
+ xhr.upload.onprogress = progressFunction;//【上传进度调用方法实现】
|
|
|
+ xhr.upload.onloadstart = function () {//上传开始执行方法
|
|
|
+ ot = new Date().getTime(); //设置上传开始时间
|
|
|
+ oloaded = 0;//设置上传开始时，以上传的文件大小为0
|
|
|
+ };
|
|
|
+
|
|
|
+ xhr.send(form); //开始上传，发送form数据
|
|
|
+ }
|
|
|
+ }
|
|
|
+</script>
|
|
|
+
|
|
|
+<style scoped>
|
|
|
+ p, h3 {
|
|
|
+ color: #fd6740;
|
|
|
+ }
|
|
|
+ h3 {
|
|
|
+ padding: 5px;
|
|
|
+ border-bottom: solid 1px #e4e4e4;
|
|
|
+ }
|
|
|
+ .card {
|
|
|
+ background-color: white;
|
|
|
+ margin: 20px 20px;
|
|
|
+ border: solid 1px #e4e4e4;
|
|
|
+ padding: 15px;
|
|
|
+ text-align: left;
|
|
|
+ }
|
|
|
+
|
|
|
+ .submit_button {
|
|
|
+ margin-bottom: 10px;
|
|
|
+ margin-left: auto;
|
|
|
+ margin-right: auto;
|
|
|
+ background-color: #fd6740;
|
|
|
+ border-color: #fd6740;
|
|
|
+ width: 85%;
|
|
|
+ }
|
|
|
</style>
|
StephenArk30