apply-trial.vue 3.9 KB

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