apply-trial.vue 8.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261
  1. <template>
  2. <view class="apply-wrap">
  3. <form class="login-form" @submit="formSubmit">
  4. <view class="form-item">
  5. <text class="require-tip">*</text>
  6. <input v-model="form.name" class="item-inp" name="name" type="text" placeholder="请输入企业名称" />
  7. </view>
  8. <view class="form-item">
  9. <text class="require-tip">*</text>
  10. <input v-model="areaInfo.label" class="item-inp" type="text" :disabled="true" placeholder="请选择省市区" @tap="openAddress" />
  11. <Address ref="applyAddress" @onConfirm="areaConfirm"></Address>
  12. </view>
  13. <view class="form-item">
  14. <input v-model="form.addrDetail" class="item-inp" name="addrDetail" type="text" placeholder="请输入详细地址" />
  15. </view>
  16. <view class="form-item">
  17. <text class="require-tip">*</text>
  18. <input v-model="form.contactPhone" class="item-inp" name="contactPhone" type="number" maxlength="11" placeholder="请输入手机号,该号码会作为系统登录账号" />
  19. </view>
  20. <view class="form-item">
  21. <text class="require-tip">*</text>
  22. <input v-model="form.verifyCode" class="item-inp" name="verifyCode" type="number" maxlength="6" placeholder="请输入手机验证码" />
  23. <button class="getcode-btn" :disabled="isDisable" @click="getCodeValidate">{{nowVal}}</button>
  24. </view>
  25. <view class="form-item">
  26. <input v-model="form.introPhone" class="item-inp" name="introPhone" type="number" maxlength="11" placeholder="请输入推荐人手机" />
  27. </view>
  28. <view class="form-btn-con">
  29. <button class="form-btn" form-type="submit">提交</button>
  30. <text class="apply-btn" @click="goLogin">已有账号?去登录</text>
  31. </view>
  32. </form>
  33. <!-- 图文验证码 -->
  34. <uni-popup ref="imageTxtPopup" type="center">
  35. <!-- type值 用于区分applyImageTxt申请试用 forgetImageTxt忘记密码 -->
  36. <popup-con type="applyImageTxt" title="图文验证码" :popBtn="popBtn" :changeImg="changeImg" @captchaImg="captchaImg"></popup-con>
  37. </uni-popup>
  38. <view class="authUserYs">
  39. <checkbox-group @change="authuserChange">
  40. <label>
  41. <checkbox value="true" :checked="isAuthuserYs" class="login-form-checkbox" />
  42. 注册代表同意<text @click="toYsPage()">章鱼车管家用户隐私政策</text>
  43. </label>
  44. </checkbox-group>
  45. </view>
  46. </view>
  47. </template>
  48. <script>
  49. import { isvalidPhone } from '@/libs/validate.js'
  50. import Address from '@/components/address.vue'
  51. import uniPopup from '@/components/uni-popup/uni-popup.vue'
  52. import popupCon from '@/components/uni-popup/popup-con.vue'
  53. import { clzConfirm } from '@/libs/tools.js'
  54. import { sendVerifyCode, apply, validateUser } from '@/api/user.js'
  55. export default{
  56. components: {
  57. Address,
  58. uniPopup,
  59. popupCon
  60. },
  61. data(){
  62. return{
  63. form: {
  64. name: '',
  65. orgType: '',
  66. addrProvince: '',
  67. addrCity: '',
  68. addrDistrict: '',
  69. addrDetail: '',
  70. contactPhone: '',
  71. introPhone: '',
  72. verifyCode: ''
  73. },
  74. nowVal: '获取验证码', // 按钮显示内容
  75. count: '', // 当前秒数
  76. timer: null, // 倒计时
  77. isDisable: false, // 是否禁止获取验证码
  78. areaInfo: '', // 省市区
  79. areaIdArr: [], // 省市区id数组
  80. popBtn: [], // name为操作按钮名称,color为操作按钮颜色值
  81. changeImg: false, // 是否重新更换图形验证码
  82. randomCode: '', // 图片验证码随机码
  83. isAuthuserYs: false // 是否同意隐私政策
  84. }
  85. },
  86. mounted() {
  87. this.isAuthuserYs = this.$store.state.vuex_isUsrAuthYs
  88. },
  89. methods: {
  90. // 表单提交
  91. formSubmit(){
  92. // 表单校验
  93. if(this.form.name == ''){
  94. uni.showToast({icon: 'none',title: '请输入企业名称'})
  95. return
  96. }
  97. // 省市区
  98. if(this.areaIdArr.length == 0){
  99. uni.showToast({icon: 'none',title: '请选择省市区'})
  100. return
  101. }
  102. if(this.form.contactPhone == ''){
  103. uni.showToast({icon: 'none',title: '请输入手机号码'})
  104. return
  105. }
  106. if(!isvalidPhone(this.form.contactPhone)){
  107. uni.showToast({icon: 'none',title: '请输入正确的手机号码'})
  108. return
  109. }
  110. if(this.form.verifyCode == ''){
  111. uni.showToast({icon: 'none',title: '请输入验证码'})
  112. return
  113. }
  114. if(this.randomCode == ''){
  115. uni.showToast({icon: 'none',title: '请输入正确的手机验证码'})
  116. return
  117. }
  118. if(!this.isAuthuserYs){
  119. uni.showToast({icon: 'none',title: '请同意并阅读用户隐私政策'})
  120. return
  121. }
  122. let obj = this.form
  123. obj.addrProvince = this.areaIdArr[0] // 省id
  124. obj.addrCity = this.areaIdArr[1] // 市id
  125. obj.addrDistrict = this.areaIdArr[2] // 区id
  126. obj.random = this.randomCode // 图片验证码随机码
  127. // 申请试用
  128. apply(obj).then(res => {
  129. console.log(res)
  130. if(res.status == 200){
  131. clzConfirm({
  132. title: '提示',
  133. content: '资料已提交成功,客服会在3个工作日内同您联系。请保持电话畅通,谢谢!',
  134. showCancel: false,
  135. success: function (ret) {
  136. if (ret.confirm||ret.index==0) {
  137. uni.reLaunch({
  138. url: '/pages/index'
  139. })
  140. }
  141. }
  142. })
  143. }else{
  144. uni.showToast({icon: 'none',title: res.message})
  145. }
  146. })
  147. },
  148. // 获取验证码
  149. getCodeValidate(){
  150. if(this.form.contactPhone){
  151. if(!isvalidPhone(this.form.contactPhone)){
  152. uni.showToast({icon: 'none',title: '请输入正确的手机号码'})
  153. return
  154. }else{
  155. // 校验手机号是否注册过
  156. validateUser({phone: this.form.contactPhone}).then(res => {
  157. if(res.status == 200){
  158. // 图文验证码
  159. this.$refs.imageTxtPopup.open()
  160. }else{
  161. uni.showToast({icon: 'none',title: res.message})
  162. }
  163. })
  164. }
  165. }else{
  166. uni.showToast({icon: 'none',title: '请先输入手机号'})
  167. }
  168. },
  169. // 图文验证码
  170. captchaImg(code, nowRandomCode){
  171. this.captchaVerify(code, nowRandomCode)
  172. },
  173. // 验证图片验证码
  174. captchaVerify(code, nowRandomCode){
  175. const _this = this
  176. let obj = {}
  177. obj.contactPhone = this.form.contactPhone
  178. obj.random = nowRandomCode
  179. obj.captcha = code
  180. // 短信验证码
  181. sendVerifyCode(obj).then(res => {
  182. console.log(JSON.stringify(res))
  183. if(res.status == 200){ // 验证码输入正确
  184. _this.randomCode = nowRandomCode // 图片验证码随机码
  185. // 关闭 图形验证码 弹框
  186. _this.$refs.imageTxtPopup.close()
  187. // 开启倒计时
  188. this.getCodeFun()
  189. uni.showToast({icon: 'none',title: '验证码发送成功'})
  190. }else { // 验证码输入错误
  191. _this.randomCode = ''
  192. // 切换验证码重新校验
  193. _this.changeImg = false
  194. _this.$nextTick(function(){
  195. _this.changeImg = true
  196. })
  197. uni.showToast({icon: 'none',title: res.message})
  198. }
  199. })
  200. },
  201. // 开始倒计时
  202. getCodeFun(){
  203. const TIME_COUNT = 60
  204. if (!this.timer) {
  205. this.count = TIME_COUNT
  206. this.timer = setInterval(() => {
  207. if (this.count > 0 && this.count <= TIME_COUNT) {
  208. this.count--
  209. this.nowVal = this.count + 's后重发'
  210. this.isDisable = true
  211. } else {
  212. this.nowVal = '重新获取验证码'
  213. clearInterval(this.timer)
  214. this.timer = null
  215. this.isDisable = false
  216. }
  217. }, 1000)
  218. }
  219. },
  220. // 选择省区市
  221. areaConfirm(e) {
  222. console.log('已选择的省市区', e)
  223. this.areaInfo = e
  224. this.areaIdArr = [ e.provinceCode, e.cityCode, e.areaCode ]
  225. },
  226. openAddress(){
  227. // 省市区 回显 参数为省市区id数组
  228. this.$refs.applyAddress.open(this.areaIdArr)
  229. },
  230. // 去登录
  231. goLogin(){
  232. uni.navigateTo({
  233. url: '/pages/login/login'
  234. })
  235. },
  236. // 隐私
  237. authuserChange(e){
  238. this.isAuthuserYs = e.detail.value.length > 0
  239. this.$u.vuex('vuex_isUsrAuthYs', this.isAuthuserYs)
  240. },
  241. toYsPage(){
  242. uni.navigateTo({
  243. url:'/pages/login/userAuthYs'
  244. })
  245. }
  246. }
  247. }
  248. </script>
  249. <style scoped lang="scss">
  250. @import './login.scss';
  251. .apply-wrap .login-form{
  252. padding-top: 80upx;
  253. }
  254. .getcode-btn {
  255. background-color: #298bf2 !important;
  256. color: #fff !important;
  257. border: none !important;
  258. }
  259. </style>