apply-trial.vue 4.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163
  1. <template>
  2. <view class="apply-wrap">
  3. <view class="login-body">
  4. <u-form :model="form" :error-type="['toast']" ref="uForm" label-position="top">
  5. <u-form-item label="门店名称" required prop="name">
  6. <u-input v-model="form.name" maxlength="30" placeholder="请输入门店名称(最多30个字符)"/>
  7. </u-form-item>
  8. <u-form-item label="门店地址" required prop="addrDetail">
  9. <u-input v-model="form.addrDetail" placeholder="请输入门店详细地址"/>
  10. </u-form-item>
  11. <u-form-item label="手机号码" required prop="contactPhone">
  12. <u-input v-model="form.contactPhone" type="number" maxlength="11" placeholder="请输入手机号码"/>
  13. </u-form-item>
  14. <u-form-item label="姓名" required prop="userName">
  15. <u-input v-model="form.userName" maxlength="11" placeholder="请输入姓名"/>
  16. </u-form-item>
  17. </u-form>
  18. <view class="login-form">
  19. <view class="form-btn-con">
  20. <button class="form-btn" :style="{background:$config('primaryColor')}" @click="formSubmit">提交</button>
  21. <text class="apply-btn" @click="goLogin">已有账号?去登录</text>
  22. </view>
  23. </view>
  24. </view>
  25. </view>
  26. </template>
  27. <script>
  28. import Address from '@/components/address.vue'
  29. import { clzConfirm } from '@/libs/tools.js'
  30. import { register } from '@/api/user.js'
  31. export default{
  32. components: {
  33. Address,
  34. },
  35. data(){
  36. return{
  37. theme: '',
  38. form: {
  39. name: '',
  40. addrProvince: '',
  41. addrCity: '',
  42. addrDistrict: '',
  43. addrDetail: '',
  44. contactPhone: '',
  45. userName: '',
  46. },
  47. rules: {
  48. name: [
  49. {
  50. required: true,
  51. message: '请输入门店名称',
  52. // 可以单个或者同时写两个触发验证方式
  53. trigger: ['change','blur'],
  54. }
  55. ],
  56. addrDetail: [
  57. {
  58. required: true,
  59. message: '请输入详细地址',
  60. trigger: 'change'
  61. }
  62. ],
  63. contactPhone: [
  64. {
  65. required: true,
  66. message: '请输入手机号',
  67. trigger: 'change'
  68. }
  69. ],
  70. userName: [
  71. {
  72. required: true,
  73. message: '请输入姓名',
  74. trigger: 'change'
  75. }
  76. ],
  77. },
  78. areaIdArr: [], // 省市区id数组
  79. }
  80. },
  81. // 必须要在onReady生命周期,因为onLoad生命周期组件可能尚未创建完毕
  82. onReady() {
  83. this.$refs.uForm.setRules(this.rules);
  84. this.theme = getApp().globalData.theme;
  85. },
  86. methods: {
  87. // 表单提交
  88. formSubmit(){
  89. this.$refs.uForm.validate(valid => {
  90. if (valid) {
  91. console.log('验证通过');
  92. this.submitData()
  93. } else {
  94. console.log('验证失败');
  95. }
  96. });
  97. },
  98. submitData(){
  99. let obj = this.form
  100. // 申请试用
  101. uni.showLoading({
  102. title: '正在提交申请...'
  103. })
  104. register(obj).then(res => {
  105. uni.hideLoading()
  106. clzConfirm({
  107. title: '提示',
  108. content: '资料已提交成功,客服会在3个工作日内同您联系。请保持电话畅通,谢谢!',
  109. showCancel: false,
  110. success: function (ret) {
  111. if (ret.confirm||ret.index==0) {
  112. uni.reLaunch({
  113. url: '/pages/login/login'
  114. })
  115. }
  116. }
  117. })
  118. })
  119. },
  120. // 选择省区市
  121. areaConfirm(e) {
  122. console.log('已选择的省市区', e)
  123. this.areaIdArr = [ e.provinceCode, e.cityCode, e.areaCode ]
  124. this.form.label = e.label
  125. },
  126. openAddress(){
  127. // 省市区 回显 参数为省市区id数组
  128. this.$refs.applyAddress.open(this.areaIdArr)
  129. },
  130. // 去登录
  131. goLogin(){
  132. uni.navigateBack()
  133. },
  134. }
  135. }
  136. </script>
  137. <style scoped lang="scss">
  138. @import './login.scss';
  139. .apply-wrap .login-form{
  140. padding-top: 40upx;
  141. .form-btn-con{
  142. margin: 0;
  143. }
  144. }
  145. .apply-wrap .login-body{
  146. display: block;
  147. }
  148. .apply-wrap .authUserYs{
  149. padding: 60upx 0 30upx 0;
  150. }
  151. .getcode-btn {
  152. color: #0485F6 !important;
  153. border: none !important;
  154. background: none !important;
  155. font-size: 28upx;
  156. margin: 0;
  157. padding: 0;
  158. &:after{
  159. border: none !important;
  160. }
  161. }
  162. </style>