certify.vue 6.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309
  1. <template>
  2. <view class="page">
  3. <!-- 公共组件-每个页面必须引入 -->
  4. <public-module></public-module>
  5. <view class="IDcardInfo p-3 mb-3" style="background-color: #FFFFFF;">
  6. <view class="inputView d-flex">
  7. <view class="d-flex a-center">姓名</view>
  8. <view class="d-flex a-center">
  9. <input placeholder="请输入姓名" v-model="staffInfo.name" />
  10. </view>
  11. </view>
  12. <view class="warp" v-if="contentSlot">
  13. <view class="mt-1 position-relative border-bottom">
  14. <view class="position-absolute d-flex a-center j-center left-0 top-0 font-weight"
  15. style="width: 100rpx;height: 100%;">+86</view>
  16. <input type="text" v-model="staffInfo.phone" class="uni-input common-input"
  17. style="padding-left: 100rpx;" placeholder="手机号" />
  18. </view>
  19. <view class="mt-2 position-relative border-bottom">
  20. <input type="text" v-model="staffInfo.phoneMsg" class="uni-input common-input" maxlength="4"
  21. style="padding-right: 240rpx;" placeholder="请输入验证码" />
  22. <view class="position-absolute top-0 right-0 d-flex a-center j-center text-light-muted"
  23. style="width: 240rpx;height: 100%;" @tap="getCheckNum1">
  24. <view class="d-flex a-center j-center "
  25. :class="!codetime?'yanzhengmaView1 main-text-color':'yanzhengmaView2'">
  26. {{!codetime?'获取验证码':codetime+' S'+'后重新获取'}}
  27. </view>
  28. </view>
  29. </view>
  30. </view>
  31. </view>
  32. <button class="mx-3 my-5 d-flex a-center j-center main-bg-color" type="primary" @tap="submit">提 交</button>
  33. </view>
  34. </template>
  35. <script>
  36. import {
  37. mapState,
  38. mapMutations
  39. } from "vuex"
  40. import bankBin from "@/common/bankcardinfo.js"
  41. import {
  42. pathToBase64,
  43. base64ToPath
  44. } from '@/common/image-tools-base64.js';
  45. import zPopup from "@/components/common/z-popup.vue"
  46. export default {
  47. components: {
  48. zPopup
  49. },
  50. data() {
  51. return {
  52. IdCardBefore: "", //身份证正影像
  53. staffInfo: {
  54. name: "",
  55. phone: '', //手机号
  56. phoneMsg: '', //手机号验证码
  57. jobNumber: "" //id
  58. },
  59. contentSlot: true,
  60. codetime: 0, //验证码获取倒计时
  61. }
  62. },
  63. computed: {
  64. ...mapState(["userInfo", "userCheckInfo"]),
  65. },
  66. onLoad() {
  67. this.staffInfo.jobNumber = this.userInfo.sysUser.id;
  68. },
  69. methods: {
  70. ...mapMutations(['setUserModules']),
  71. async getCheckNum1() {
  72. uni.hideKeyboard();
  73. if (this.codetime > 0) return;
  74. // 验证手机号合法性
  75. if (!this.staffInfo.phone) {
  76. return uni.showToast({
  77. title: '请输入手机号',
  78. icon: 'none'
  79. });
  80. }
  81. if (!this.$base.phoneRegular.test(this.staffInfo.phone)) {
  82. return uni.showToast({
  83. title: '请输入正确的手机号码',
  84. icon: 'none'
  85. });
  86. }
  87. // 请求服务器,发送验证码
  88. let res = await this.$http.get('/sendMsg', {
  89. phone: this.staffInfo.phone,
  90. type: "1"
  91. });
  92. // 请求失败处理
  93. console.log(res)
  94. if (res.code != 200) {
  95. return uni.showToast({
  96. title: res.msg,
  97. icon: "none"
  98. });
  99. } else {
  100. uni.showToast({
  101. title: "发送成功",
  102. icon: "none"
  103. });
  104. }
  105. // 发送成功,开启倒计时
  106. this.codetime = 60;
  107. let timer = setInterval(() => {
  108. this.codetime--;
  109. if (this.codetime < 1) {
  110. clearInterval(timer);
  111. this.codetime = 0;
  112. }
  113. }, 1000);
  114. },
  115. isName() {
  116. let mPattern = /^([\u4e00-\u9fa5]{1,6}|[a-zA-Z\.\s]{1,6})$/;
  117. return mPattern.test(this.staffInfo.name);
  118. },
  119. async submit() {
  120. if (!this.isName()) {
  121. return uni.showToast({
  122. title: '请输入正确的姓名',
  123. icon: "none"
  124. });
  125. }
  126. var info = {
  127. sysUser: {},
  128. esmUserInternal: {},
  129. esmUserAgent: {}
  130. };
  131. Object.assign(info.sysUser, this.userInfo.sysUser)
  132. Object.assign(info.esmUserInternal, this.userInfo.esmUserInternal)
  133. Object.assign(info.esmUserAgent, this.userInfo.esmUserAgent)
  134. info.sysUser.name = this.staffInfo.name;
  135. info.sysUser.phone = this.staffInfo.phone;
  136. info.sysUser.jobCode = "17";
  137. // 修改并保存人员信息
  138. let res = await this.$http.post('/wechat/bindPhone', this.staffInfo);
  139. console.log(res)
  140. if (res.code == 200) {
  141. //保存临时数据到本地
  142. this.setUserModules({
  143. title: 'userInfo',
  144. data: info
  145. })
  146. setTimeout(() => {
  147. return uni.reLaunch({
  148. url: "/pages/index/index"
  149. })
  150. }, 500);
  151. } else if(res.code=='10100'){
  152. var that = this;
  153. uni.showToast({
  154. title: res.msg,
  155. icon: "none",
  156. duration: 2000
  157. });
  158. uni.login({
  159. provider: 'weixin',
  160. scopes: "auth_user",
  161. onlyAuthorize: true,
  162. success: function(loginRes) {
  163. that.codeRes(loginRes);
  164. }
  165. });
  166. }else{
  167. uni.showToast({
  168. title: res.msg,
  169. icon: "none",
  170. duration: 2000
  171. });
  172. }
  173. },
  174. async codeRes(data) {
  175. this.$login({
  176. url: "/wechat/login",
  177. data: {
  178. code: data.code,
  179. }
  180. }).then(res => {
  181. socket.init();
  182. return;
  183. })
  184. },
  185. }
  186. }
  187. </script>
  188. <style lang="scss" scoped>
  189. @import '@/style/mixin.scss';
  190. .idCardBefore {
  191. background: rgba($themeColor, 0.1) url('/static/image/user/identy2.png') center center no-repeat;
  192. background-size: auto 70%;
  193. padding: 10upx;
  194. }
  195. .idCardAfter {
  196. background: rgba($themeColor, 0.1) url('/static/image/user/identy1.png') center center no-repeat;
  197. background-size: auto 70%;
  198. padding: 10upx;
  199. }
  200. .bankCardImage {
  201. background: rgba($themeColor, 0.1) url('/static/image/user/card.png') center center no-repeat;
  202. background-size: auto 70%;
  203. padding: 10upx;
  204. }
  205. .imageBorder {
  206. border: 2px solid #ddd;
  207. padding: 10upx;
  208. }
  209. .cardImages>view {
  210. width: 310rpx;
  211. height: 260rpx;
  212. }
  213. .cardImages>view>image {
  214. width: 100%;
  215. height: 100%;
  216. }
  217. .IDcardInfo .IDcardNotice,
  218. .BankCardInfo .BankCardNotice {
  219. text-align: center;
  220. height: 110rpx;
  221. line-height: 110rpx;
  222. }
  223. .inputView {
  224. border-bottom: 1px solid #ddd;
  225. height: 90upx;
  226. }
  227. .inputView>view:nth-of-type(1) {
  228. flex-shrink: 0;
  229. font-size: 32upx;
  230. padding-left: 12px;
  231. color: #333;
  232. }
  233. .inputView>view:nth-of-type(2)>input {
  234. font-size: 30upx;
  235. color: #999;
  236. }
  237. .BankCardInfo {
  238. background-color: #FFFFFF;
  239. padding: 30upx;
  240. }
  241. .popup_box {
  242. width: 100%;
  243. // border-radius: 12upx;
  244. }
  245. .popup_title {
  246. display: flex;
  247. justify-content: space-between;
  248. height: 88upx;
  249. line-height: 88upx;
  250. border-bottom: 2upx solid #ebebeb;
  251. padding: 0 20upx;
  252. background-color: #FFF;
  253. }
  254. .popup_title view {
  255. font-size: 32upx;
  256. display: flex;
  257. align-items: center;
  258. }
  259. .popup_title text {
  260. width: 80upx;
  261. flex-shrink: 0;
  262. text-align: center;
  263. }
  264. .popup_title text {
  265. font-size: 28upx;
  266. color: #999;
  267. }
  268. .popup_title text:last-child {
  269. color: $themeColor;
  270. }
  271. .popup_content {
  272. padding: 40rpx 30rpx;
  273. background-color: #FFFFFF;
  274. text-align: center;
  275. }
  276. .popup_content .body {
  277. padding: 20upx 30upx;
  278. }
  279. .popup_content .body image {
  280. width: 540upx;
  281. }
  282. </style>