approve.vue 8.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386
  1. <template>
  2. <view class="content">
  3. <view class="bgimg">
  4. <image class="img" src="https://zhibo.liuniu946.com/img/bgRz.png" mode="widthFix"></image>
  5. </view>
  6. <u-form class="user" :model="form" ref="uForm" v-if="!upDataLoding">
  7. <u-form-item label="姓名" label-width="150"><u-input v-model="form.name"
  8. placeholder="请输入真实姓名" /></u-form-item>
  9. <u-form-item label="身份证号" label-width="150"><u-input placeholder="请输入身份证号"
  10. v-model="form.card" /></u-form-item>
  11. </u-form>
  12. <!-- <view class="userBox" v-if="!upDataLoding">
  13. <view class="title">上传身份证照片</view>
  14. <view class="imgUp" @click.stop="upImg()">
  15. <image class="img" :src="form.img || '../../static/img/sfz.png'" mode="scaleToFill"></image>
  16. </view>
  17. </view> -->
  18. <button v-if="!upDataLoding" class="add-btn" @click="pushData('add')">提交</button>
  19. <view v-else class="titleType">
  20. <text v-if="renus">
  21. 已通过实名认证
  22. </text>
  23. <text v-else>
  24. 已提交资料请等待审核结果
  25. </text>
  26. </view>
  27. </view>
  28. </template>
  29. <script>
  30. import {
  31. realName,
  32. checkUser
  33. } from '@/api/set.js';
  34. import {
  35. rate
  36. } from '@/api/user.js';
  37. import {
  38. upload
  39. } from '@/api/order.js';
  40. // #ifdef APP
  41. const aliyunVerify = uni.requireNativePlugin('AP-FaceDetectModule');
  42. // #endif
  43. // #ifdef H5
  44. import {
  45. mapState,
  46. } from 'vuex';
  47. // #endif
  48. export default {
  49. data() {
  50. return {
  51. loding: false, //判断是否在点击中
  52. form: {
  53. name: '',
  54. card: '',
  55. // img: ''
  56. },
  57. upFileLoding: false, //防止上传图片时多次重复点击
  58. upDataLoding: false, //判断是否上传过数据
  59. renus: false, //判断是否已经通过实名认证
  60. };
  61. },
  62. onLoad(option) {
  63. this.init();
  64. },
  65. // #ifdef H5
  66. computed: {
  67. ...mapState(['baseURL', 'urlFile'])
  68. },
  69. // #endif
  70. methods: {
  71. init() {
  72. const that = this;
  73. uni.showLoading({
  74. title: '数据获取中',
  75. mask: true
  76. });
  77. // 获取数据判断是否已经验证过
  78. rate({})
  79. .then(e => {
  80. // 如果已经提交数据跳转验证页
  81. if (e.data.is_auth == 1) {
  82. that.upDataLoding = true;
  83. console.log(1);
  84. that.getYz();
  85. } else {
  86. uni.hideLoading()
  87. }
  88. if (e.data.is_auth == 2) {
  89. that.upDataLoding = true;
  90. that.renus = true;
  91. that.$api.msg('已通过实名认证');
  92. }
  93. if (e.data.is_auth == 3) {
  94. that.$api.msg(e.data.off);
  95. }
  96. })
  97. .catch(e => {
  98. uni.hideLoading()
  99. });
  100. },
  101. // 获取验证
  102. getYz() {
  103. const that = this;
  104. // #ifdef H5
  105. let metaInfo = JSON.stringify(window.getMetaInfo());
  106. let router = getApp().$router;
  107. // 判断是否真实路由模式
  108. const type = router.mode === "history" ? '' : '/#';
  109. // #endif
  110. // #ifdef APP
  111. let metaInfo = aliyunVerify.getMetaInfo();
  112. let p = uni.getSystemInfoSync().platform;
  113. if (p === "ios") {
  114. metaInfo = JSON.stringify(metaInfo);
  115. }
  116. // #endif
  117. checkUser({
  118. metaInfo: metaInfo,
  119. // #ifdef H5
  120. url: that.baseURL + that.urlFile + type + '/pages/user/approve'
  121. // #endif
  122. }).then(({
  123. data
  124. }) => {
  125. uni.hideLoading()
  126. // #ifdef H5
  127. window.location.href = data.url + ""
  128. // #endif
  129. // #ifdef APP
  130. that.aliyunVerify(data.id)
  131. // #endif
  132. console.log(data, 'data');
  133. }).catch((err) => {
  134. uni.hideLoading()
  135. })
  136. },
  137. // #ifdef APP
  138. // 调用刷脸认证
  139. aliyunVerify(id) {
  140. const that = this;
  141. aliyunVerify.verify({
  142. "certifyId": id, // 填写从服务端获取的certifyId
  143. },
  144. function(res) {
  145. if (res.code == 1000) {
  146. uni.showLoading({
  147. title: '刷脸成功,等待通过',
  148. mask: true
  149. });
  150. setTimeout(() => {
  151. that.init();
  152. }, 3000)
  153. } else {
  154. if (res.code == 1001) {
  155. uni.showModal({
  156. title: '提示',
  157. content: '系统错误请重启APP重新验证',
  158. showCancel: false,
  159. });
  160. }
  161. if (res.code == 1003) {
  162. uni.showModal({
  163. title: '提示',
  164. content: '验证取消是否重新验证?',
  165. success: re => {
  166. if (re.confirm) {
  167. that.aliyunVerify(id)
  168. }
  169. },
  170. });
  171. }
  172. if (res.code == 2002) {
  173. uni.showModal({
  174. title: '提示',
  175. content: '网络错误请检查是否开启网络连接',
  176. showCancel: false,
  177. });
  178. }
  179. if (res.code == 2003) {
  180. uni.showModal({
  181. title: '提示',
  182. content: '设备时间错误,请校验时候后重试',
  183. showCancel: false,
  184. });
  185. }
  186. if (res.code == 2006) {
  187. uni.showModal({
  188. title: '提示',
  189. content: '刷脸失败,是否重试?',
  190. success: re => {
  191. if (re.confirm) {
  192. that.aliyunVerify(id)
  193. }
  194. },
  195. });
  196. }
  197. }
  198. }
  199. );
  200. },
  201. // #endif
  202. upImg(e) {
  203. const that = this;
  204. if (that.upFileLoding) {
  205. return
  206. }
  207. that.upFileLoding = true;
  208. setTimeout(() => {
  209. that.upFileLoding = false;
  210. }, 1000);
  211. upload({
  212. filename: ''
  213. }).then(data => {
  214. this.form.img = data[0].url;
  215. }).catch((err) => {
  216. console.log(err);
  217. })
  218. },
  219. ToIndex() {
  220. let obj = this;
  221. let ur = uni.getStorageSync('present') || '/pages/index/index';
  222. // 用于处理缓存bug
  223. if (ur == 'pages/product/product') {
  224. ur = '/pages/index/index';
  225. }
  226. uni.switchTab({
  227. url: ur,
  228. fail(e) {
  229. uni.navigateTo({
  230. url: ur,
  231. fail(e) {
  232. uni.navigateTo({
  233. url: '/pages/index/index'
  234. });
  235. }
  236. });
  237. }
  238. });
  239. },
  240. pushData() {
  241. const that = this;
  242. const da = that.form;
  243. // 判断是否已经提交过数据
  244. if (that.upDataLoding) {
  245. that.init();
  246. return
  247. }
  248. if (that.loding) {
  249. return;
  250. }
  251. if (!da.name) {
  252. uni.showModal({
  253. title: '提示',
  254. content: '请填写真实姓名',
  255. showCancel: false
  256. });
  257. return;
  258. }
  259. if (!da.card) {
  260. uni.showModal({
  261. title: '提示',
  262. content: '请填写身份证',
  263. showCancel: false
  264. });
  265. return;
  266. }
  267. // if (!da.img) {
  268. // uni.showModal({
  269. // title: '提示',
  270. // content: '请选择图片',
  271. // showCancel: false
  272. // });
  273. // return;
  274. // }
  275. const data = {
  276. // cidimg: da.img,
  277. rname: da.name,
  278. cid: da.card
  279. };
  280. uni.showLoading({
  281. title: '审核中',
  282. mask: true
  283. });
  284. that.loding = true;
  285. // 上传
  286. realName(data)
  287. .then(e => {
  288. // 判断是否已经上传过数据
  289. that.upDataLoding = true;
  290. that.getYz();
  291. that.loding = false;
  292. console.log(e);
  293. })
  294. .catch(e => {
  295. that.loding = false;
  296. console.log(e);
  297. uni.hideLoading();
  298. });
  299. }
  300. }
  301. };
  302. </script>
  303. <style lang="scss" scoped>
  304. .content {
  305. height: 100%;
  306. padding: 0 $page-row-spacing;
  307. }
  308. .add-btn {
  309. display: flex;
  310. align-items: center;
  311. justify-content: center;
  312. width: 690rpx;
  313. height: 80rpx;
  314. margin: 60rpx auto;
  315. font-size: $font-lg;
  316. color: #fff;
  317. background: #ff0000;
  318. border-radius: 10rpx;
  319. // box-shadow: 1px 2px 5px rgba(219, 63, 96, 0.4);
  320. }
  321. .bgimg {
  322. text-align: center;
  323. width: 1200rpx;
  324. margin-left: -260rpx;
  325. height: 400rpx;
  326. background: #ff0000;
  327. border-bottom-right-radius: 999999rpx;
  328. border-bottom-left-radius: 999999rpx;
  329. .img {
  330. width: 400rpx;
  331. margin-top: 50rpx;
  332. }
  333. }
  334. .titleType {
  335. margin-top: -250rpx !important;
  336. text-align: center;
  337. color: #FFF;
  338. font-size: $font-lg;
  339. text-shadow: 4rpx 4rpx 6rpx #666;
  340. letter-spacing: 0.5em;
  341. font-weight: bold;
  342. }
  343. .user {
  344. margin-top: -100rpx !important;
  345. border-radius: 10rpx !important;
  346. padding: 0 30rpx;
  347. }
  348. .userBox,
  349. .user {
  350. box-shadow: 0px 2px 16px 1px rgba(89, 89, 89, 0.24) !important;
  351. background-color: white !important;
  352. }
  353. .userBox {
  354. margin-top: 20rpx;
  355. padding: 30rpx;
  356. .imgUp {
  357. min-height: 100rpx;
  358. text-align: center;
  359. margin-top: 30rpx;
  360. .img {
  361. width: 300rpx;
  362. height: 400rpx;
  363. }
  364. }
  365. }
  366. .imglist /deep/ * {
  367. margin-left: auto !important;
  368. margin-right: auto !important;
  369. }
  370. </style>