identity_authentication.vue 8.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267
  1. <template>
  2. <view class="main">
  3. <view class="u-margin-left-20 u-margin-right-20 body_style">
  4. <u-form :model="form" ref="uForm">
  5. <u-form-item label="姓名" label-width="125" :border-bottom="true">
  6. <u-input placeholder="请输入您的真实姓名" :disabled="vuex_user.is_auth == 2" v-model="form.name" />
  7. </u-form-item>
  8. <u-form-item label="身份证" label-width="125" :border-bottom="true">
  9. <u-input @click="showtoastTips()" type="number" :disabled="vuex_user.is_auth == 2" maxlength="18"
  10. placeholder="请输入您的二代身份证号码" v-model="form.idCard" />
  11. </u-form-item>
  12. <u-form-item label="手机号" label-width="125" :border-bottom="true">
  13. <u-input type="number" :disabled="vuex_user.is_auth == 2" maxlength="11" placeholder="请输入您的手机号码"
  14. v-model="form.phone" />
  15. </u-form-item>
  16. <u-form-item label="所属地区" label-width="125" :border-bottom="true">
  17. <u-input placeholder="请选择所属地区" type="select"
  18. @click="vuex_user.is_auth == 2?show = false:show = true" border v-model="form.cityName" />
  19. </u-form-item>
  20. <u-form-item label="所属机构" label-width="125" :border-bottom="true">
  21. <u-input @click="vuex_user.is_auth == 2?showMechanism = false:showMechanism = true" type="select"
  22. placeholder="请选择您的所属机构" border v-model="form.mechanism" />
  23. </u-form-item>
  24. <u-form-item label="拍照/上传您的二代身份证" :border-bottom="true" label-position="top">
  25. <view class="flex justify-between align-center" style="width: 100%;">
  26. <image @click="uploadImg(idLeft,1)" style="width: 272rpx;height: 174rpx;" :src="idLeft" mode="">
  27. </image>
  28. <image @click="uploadImg(idRight,2)" style="width: 272rpx;height: 174rpx;" :src="idRight"
  29. mode=""></image>
  30. </view>
  31. </u-form-item>
  32. <u-form-item label="拍照/上传您的信用管理师资质证书" :border-bottom="true" label-position="top">
  33. <view class="flex justify-between align-center" style="width: 100%;">
  34. <u-image width="272rpx" @click="uploadQualification" height="174rpx" :src="form.qualification">
  35. </u-image>
  36. </view>
  37. </u-form-item>
  38. <u-form-item label="提交人说明" :border-bottom="false" label-position="top">
  39. <u-input @click="showtoastTips()" :disabled="vuex_user.is_auth == 2" placeholder="请填写说明" border
  40. height="150" :auto-height="true" type="textarea" v-model="form.intro" />
  41. </u-form-item>
  42. </u-form>
  43. </view>
  44. <u-picker mode="region" :params="params" @confirm="selectReg" v-model="show"
  45. :area-code='[form.province, form.city]'>
  46. </u-picker>
  47. <u-select @confirm="selectMechanism" v-model="showMechanism" :list="list"></u-select>
  48. <u-button v-if="this.vuex_user.is_auth != 2" shape="circle" @click="btnIdCard" hover-class="none"
  49. :custom-style="customStyle" throttle-time="1000">
  50. 提交</u-button>
  51. </view>
  52. </template>
  53. <script>
  54. import util from '@/common/util.js';
  55. export default {
  56. data() {
  57. return {
  58. form: {
  59. intro: '',
  60. mechanism: '',
  61. idCard: '',
  62. name: '',
  63. phone: '',
  64. province: '13',
  65. city: '1303',
  66. cityName: '河北省-秦皇岛市',
  67. qualification: ''
  68. },
  69. params: {
  70. province: true,
  71. city: true,
  72. area: false
  73. },
  74. show: false,
  75. showMechanism: false,
  76. customStyle: {
  77. marginTop: '20rpx',
  78. width: '182rpx',
  79. height: '60rpx',
  80. color: '#fff',
  81. background: '#FBC600',
  82. border: 'none'
  83. },
  84. idLeft: "https://zhengda.oss-cn-chengdu.aliyuncs.com/juyin/static/index/idCard.png",
  85. idRight: 'https://zhengda.oss-cn-chengdu.aliyuncs.com/juyin/static/index/idCard_two.png',
  86. list: []
  87. }
  88. },
  89. onLoad() {
  90. if (this.vuex_user.is_auth == 2) {
  91. this.form.intro = this.vuex_user.auth_info.explain
  92. this.form.mechanism = this.vuex_user.auth_info.organization
  93. this.form.idCard = this.vuex_user.auth_info.card
  94. this.idLeft = this.vuex_user.auth_info.front_img
  95. this.idRight = this.vuex_user.auth_info.back_img
  96. this.form.name = this.vuex_user.name
  97. this.form.phone = this.vuex_user.auth_info.phone
  98. this.form.qualification = this.vuex_user.auth_info.qualified
  99. }
  100. this.get_mechanism()
  101. },
  102. methods: {
  103. async get_mechanism() {
  104. let res = await this.$u.post('manager/get_mechanism', {
  105. city_code: this.form.city + "00"
  106. })
  107. if (res.code == 200) {
  108. this.list = res.data
  109. if (this.list.length != 0) {
  110. this.list = this.list.map(item => {
  111. return {
  112. value: item['id'],
  113. label: item['name']
  114. }
  115. })
  116. }
  117. this.list.push({
  118. value: 0,
  119. label: '其他'
  120. })
  121. }
  122. },
  123. selectMechanism(e) {
  124. this.form.mechanism = e[0].label
  125. },
  126. selectReg(e) {
  127. console.log(e)
  128. this.form.province = e.province.value
  129. this.form.city = e.city.value
  130. this.form.cityName = e.province.label + '-' + e.city.label
  131. this.get_mechanism()
  132. },
  133. showtoastTips() {
  134. if (this.vuex_user.is_auth == 2) {
  135. uni.showModal({
  136. title: "温馨提示",
  137. content: "已认证,若需修改认证信息请联系客服处理",
  138. showCancel: false
  139. })
  140. }
  141. },
  142. uploadQualification() {
  143. if (this.vuex_user.is_auth == 2) {
  144. uni.showModal({
  145. title: "温馨提示",
  146. content: "已认证,若需修改认证信息请联系客服处理",
  147. showCancel: false
  148. })
  149. return false
  150. }
  151. uni.chooseImage({
  152. count: 1,
  153. sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图,默认二者都有
  154. sourceType: ['album', 'camera'], //从相册选择
  155. success: res => {
  156. util.ajaxUploadImg('/common/uploadImg', res.tempFilePaths[0], (data) => {
  157. this.form.qualification = JSON.parse(data.data).data.file_url
  158. })
  159. }
  160. })
  161. },
  162. uploadImg(img, num) {
  163. if (this.vuex_user.is_auth == 2) {
  164. uni.showModal({
  165. title: "温馨提示",
  166. content: "已认证,若需修改认证信息请联系客服处理",
  167. showCancel: false
  168. })
  169. return false
  170. }
  171. uni.chooseImage({
  172. count: 1,
  173. sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图,默认二者都有
  174. sourceType: ['album', 'camera'], //从相册选择
  175. success: res => {
  176. util.ajaxUploadImg('/common/uploadImg', res.tempFilePaths[0], (data) => {
  177. if (num == 1) {
  178. this.idLeft = JSON.parse(data.data).data.file_url
  179. } else if (num == 2) {
  180. this.idRight = JSON.parse(data.data).data.file_url
  181. }
  182. })
  183. }
  184. })
  185. },
  186. async btnIdCard() {
  187. if (this.form.name == '') {
  188. uni.showToast({
  189. title: "请填写姓名",
  190. icon: "none"
  191. })
  192. return false
  193. }
  194. let is_card = util.isCardID(this.form.idCard)
  195. if (is_card != 1) {
  196. uni.showToast({
  197. title: is_card,
  198. icon: "none"
  199. })
  200. return false
  201. }
  202. if (this.form.phone == '') {
  203. uni.showToast({
  204. title: "请填写手机号",
  205. icon: "none"
  206. })
  207. return false
  208. }
  209. if (this.form.qualification == '') {
  210. uni.showToast({
  211. title: "请先上传资质",
  212. icon: "none"
  213. })
  214. return false
  215. }
  216. let res = await this.$u.post("manager/ManagerAuth", {
  217. name: this.form.name,
  218. card: this.form.idCard,
  219. phone: this.form.phone,
  220. province: this.form.province + "0000",
  221. city: this.form.city + "00",
  222. organization: this.form.mechanism,
  223. explain: this.form.intro,
  224. front_img: this.idLeft,
  225. back_img: this.idRight,
  226. qualified: this.form.qualification,
  227. cityName: this.form.cityName
  228. })
  229. if (res.code == 200) {
  230. this.$u.vuex('vuex_user.is_auth', res.data.is_auth)
  231. uni.showToast({
  232. title: "提交成功,等待审核",
  233. icon: "none",
  234. duration: 1000
  235. })
  236. setTimeout(() => {
  237. uni.navigateBack()
  238. }, 1000)
  239. console.log(this.vuex_user)
  240. } else {
  241. uni.showToast({
  242. title: res.message,
  243. icon: "none"
  244. })
  245. return false
  246. }
  247. }
  248. }
  249. }
  250. </script>
  251. <style>
  252. .main {
  253. min-height: 100vh;
  254. padding-top: 20rpx;
  255. }
  256. .body_style {
  257. background: #fff;
  258. border-radius: 16rpx;
  259. padding: 10rpx 30rpx;
  260. /* margin-top: 20rpx; */
  261. box-shadow: 6rpx 6rpx 10rpx rgba(122, 122, 122, 0.2);
  262. }
  263. </style>