storeAuth.vue 5.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204
  1. <template>
  2. <view class="apply-wrap flex flex_column">
  3. <view class="login-form">
  4. <u-form :model="form" label-width="180rpx" :error-type="['toast']" ref="uForm">
  5. <u-form-item label="门头照片" required prop="storePhoto">
  6. <u-upload
  7. @on-success="uploadStorePhoto"
  8. @on-remove="removeStorePhoto"
  9. :file-list="storePhotoList"
  10. :action="action"
  11. :max-size="2 * 1024 * 1024"
  12. :width="200"
  13. :height="150"
  14. upload-text="上传门头照片"
  15. max-count="1"></u-upload>
  16. </u-form-item>
  17. <u-form-item label="营业执照">
  18. <u-upload
  19. @on-success="uploadYyzzPhoto"
  20. @on-remove="removeYyzzPhoto"
  21. :file-list="yyzzPhotoList"
  22. :action="action"
  23. :max-size="2 * 1024 * 1024"
  24. :width="200"
  25. :height="150"
  26. upload-text="上传营业执照"
  27. max-count="1"></u-upload>
  28. </u-form-item>
  29. <u-form-item label="门店名称" required prop="name">
  30. <u-input v-model="form.name" maxlength="30" placeholder="请输入门店名称(最多30个字符)"/>
  31. </u-form-item>
  32. <u-form-item label="所在地区" required prop="label">
  33. <u-input v-model="form.label" placeholder="请选择省市区" :disabled="true" @click="openAddress"/>
  34. <Address ref="applyAddress" @onConfirm="areaConfirm"></Address>
  35. </u-form-item>
  36. <u-form-item label="详细地址" required prop="addrDetail">
  37. <u-input v-model="form.addrDetail" placeholder="请输入详细地址"/>
  38. </u-form-item>
  39. <u-form-item label="联系人姓名" required prop="userName">
  40. <u-input v-model="form.userName" placeholder="请输入联系人姓名"/>
  41. </u-form-item>
  42. <u-form-item label="联系人手机">
  43. {{form.contactPhone}}
  44. </u-form-item>
  45. <u-form-item label="汽配商邀请码">
  46. <u-input v-model="form.code" placeholder="如没有可不填"/>
  47. </u-form-item>
  48. </u-form>
  49. </view>
  50. <view class="form-btn-con flex justify_center">
  51. <u-button class="form-btn" shape="circle" type="info" :custom-style="{ background: '#066cff', color: '#fff',width:'350rpx' }" @click="formSubmit">提交审核</u-button>
  52. </view>
  53. </view>
  54. </template>
  55. <script>
  56. import Address from '@/components/address.vue'
  57. import uniPopup from '@/components/uni-popup/uni-popup.vue'
  58. import popupCon from '@/components/uni-popup/popup-con.vue'
  59. import { sendVerifyCode, apply, validateUser } from '@/api/user.js'
  60. const baseUrl = getApp().globalData.baseUrl
  61. export default{
  62. components: {
  63. Address,
  64. uniPopup,
  65. popupCon
  66. },
  67. data(){
  68. return{
  69. theme: '',
  70. form: {
  71. name: '',
  72. addrProvince: '',
  73. addrCity: '',
  74. addrDistrict: '',
  75. addrDetail: '',
  76. contactPhone: '',
  77. label: ''
  78. },
  79. rules: {
  80. name: [
  81. {
  82. required: true,
  83. message: '请输入门店名称',
  84. // 可以单个或者同时写两个触发验证方式
  85. trigger: ['change','blur'],
  86. }
  87. ],
  88. label: [
  89. {
  90. required: true,
  91. message: '请选择所在地区',
  92. trigger: 'change'
  93. }
  94. ],
  95. addrDetail: [
  96. {
  97. required: true,
  98. message: '请输入详细地址',
  99. trigger: 'change'
  100. }
  101. ],
  102. },
  103. areaIdArr: [], // 省市区id数组
  104. action: baseUrl + '/upload',
  105. storePhotoList: [],
  106. itemIconArr: [], // 门店图片
  107. yyzzPhotoList: [],
  108. yyzzIconArr: [], // 营业执照图片
  109. }
  110. },
  111. // 必须要在onReady生命周期,因为onLoad生命周期组件可能尚未创建完毕
  112. onReady() {
  113. this.$refs.uForm.setRules(this.rules);
  114. },
  115. onLoad() {
  116. this.form.contactPhone = this.$store.state.vuex_userInfo.mobile
  117. },
  118. methods: {
  119. // 上传门店图片成功
  120. uploadStorePhoto(res){
  121. this.itemIconArr.push(res.data)
  122. },
  123. // 删除门店图片
  124. removeStorePhoto(index){
  125. this.itemIconArr.splice(index,1)
  126. },
  127. // 上传营业执照图片成功
  128. uploadYyzzPhoto(res){
  129. this.yyzzIconArr.push(res.data)
  130. },
  131. // 删除营业执照图片
  132. removeYyzzPhoto(index){
  133. this.yyzzIconArr.splice(index,1)
  134. },
  135. // 表单提交
  136. formSubmit(){
  137. this.$refs.uForm.validate(valid => {
  138. if (valid) {
  139. console.log('验证通过');
  140. this.submitData()
  141. } else {
  142. console.log('验证失败');
  143. }
  144. });
  145. },
  146. submitData(){
  147. let obj = this.form
  148. obj.addrProvince = this.areaIdArr[0] // 省id
  149. obj.addrCity = this.areaIdArr[1] // 市id
  150. obj.addrDistrict = this.areaIdArr[2] // 区id
  151. // 申请试用
  152. apply(obj).then(res => {
  153. console.log(res)
  154. if(res.status == 200){
  155. }else{
  156. uni.showToast({icon: 'none',title: res.message})
  157. }
  158. })
  159. },
  160. // 获取验证码
  161. getCodeValidate(){
  162. if(this.form.contactPhone){
  163. // 校验手机号是否注册过
  164. validateUser({phone: this.form.contactPhone}).then(res => {
  165. if(res.status == 200){
  166. // 图文验证码
  167. this.$refs.imageTxtPopup.open()
  168. }else{
  169. uni.showToast({icon: 'none',title: res.message})
  170. }
  171. })
  172. }else{
  173. uni.showToast({icon: 'none',title: '请先输入手机号'})
  174. }
  175. },
  176. // 选择省区市
  177. areaConfirm(e) {
  178. console.log('已选择的省市区', e)
  179. this.areaIdArr = [ e.provinceCode, e.cityCode, e.areaCode ]
  180. this.form.label = e.label
  181. },
  182. openAddress(){
  183. // 省市区 回显 参数为省市区id数组
  184. this.$refs.applyAddress.open(this.areaIdArr)
  185. },
  186. }
  187. }
  188. </script>
  189. <style scoped lang="scss">
  190. .apply-wrap{
  191. height: 100vh;
  192. background-color: #fff;
  193. .login-form{
  194. padding: 0.7rem 1.5rem;
  195. flex-grow: 1;
  196. overflow: auto;
  197. }
  198. .form-btn-con{
  199. padding: 1rem;
  200. }
  201. }
  202. </style>