storeAuth.vue 7.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259
  1. <template>
  2. <view class="apply-wrap flex flex_column">
  3. <view v-if="tipTit">
  4. <u-alert-tips :show-icon="true" type="warning" :title="tipTit"></u-alert-tips>
  5. </view>
  6. <view class="login-form">
  7. <u-form v-if="!isRead" :model="form" label-width="180rpx" :error-type="['toast']" ref="uForm">
  8. <u-form-item label="门头照片" required prop="storeImage">
  9. <u-upload
  10. @on-success="uploadStorePhoto"
  11. @on-remove="removeStorePhoto"
  12. :file-list="storePhotoList"
  13. :action="action"
  14. :max-size="2 * 1024 * 1024"
  15. :width="200"
  16. :height="150"
  17. upload-text="上传门头照片"
  18. max-count="1"></u-upload>
  19. </u-form-item>
  20. <u-form-item label="营业执照">
  21. <u-upload
  22. @on-success="uploadYyzzPhoto"
  23. @on-remove="removeYyzzPhoto"
  24. :file-list="yyzzPhotoList"
  25. :action="action"
  26. :max-size="2 * 1024 * 1024"
  27. :width="200"
  28. :height="150"
  29. upload-text="上传营业执照"
  30. max-count="1"></u-upload>
  31. </u-form-item>
  32. <u-form-item label="门店名称" required prop="storeName">
  33. <u-input v-model="form.storeName" maxlength="30" placeholder="请输入门店名称(最多30个字符)"/>
  34. </u-form-item>
  35. <u-form-item label="所在地区" required prop="label">
  36. <u-input v-model="form.label" placeholder="请选择省市区" :disabled="true" @click="openAddress"/>
  37. <Address ref="applyAddress" @onConfirm="areaConfirm"></Address>
  38. </u-form-item>
  39. <u-form-item label="详细地址" required prop="addrDetail">
  40. <u-input v-model="form.addrDetail" placeholder="请输入详细地址"/>
  41. </u-form-item>
  42. <u-form-item label="联系人姓名" required prop="contactName">
  43. <u-input v-model="form.contactName" placeholder="请输入联系人姓名"/>
  44. </u-form-item>
  45. <u-form-item label="联系人手机">
  46. {{form.contactPhone}}
  47. </u-form-item>
  48. <u-form-item label="汽配商邀请码">
  49. <u-input v-model="form.inviteCode" placeholder="如没有可不填"/>
  50. </u-form-item>
  51. </u-form>
  52. <!-- 详情 -->
  53. <u-form v-else :model="form" label-width="180rpx" :error-type="['toast']" ref="uForm">
  54. <u-form-item label="门头照片" required prop="storeImage">
  55. <u-image :src="form.storeImage" width="200" height="150"></u-image>
  56. </u-form-item>
  57. <u-form-item label="营业执照">
  58. <u-image :src="form.licenseImage" width="200" height="150"></u-image>
  59. </u-form-item>
  60. <u-form-item label="门店名称" required prop="storeName">
  61. {{form.storeName||'--'}}
  62. </u-form-item>
  63. <u-form-item label="所在地区" required prop="label">
  64. {{form.label||'--'}}
  65. </u-form-item>
  66. <u-form-item label="详细地址" required prop="addrDetail">
  67. {{form.addrDetail||'--'}}
  68. </u-form-item>
  69. <u-form-item label="联系人姓名" required prop="contactName">
  70. {{form.contactName||'--'}}
  71. </u-form-item>
  72. <u-form-item label="联系人手机">
  73. {{form.contactPhone||'--'}}
  74. </u-form-item>
  75. <u-form-item label="汽配商邀请码">
  76. {{form.inviteCode||'--'}}
  77. </u-form-item>
  78. </u-form>
  79. </view>
  80. <view class="form-btn-con flex justify_center" v-if="!isRead">
  81. <u-button class="form-btn" shape="circle" type="info" :custom-style="{ background: '#066cff', color: '#fff',width:'350rpx' }" @click="formSubmit">提交审核</u-button>
  82. </view>
  83. </view>
  84. </template>
  85. <script>
  86. import Address from '@/components/address.vue'
  87. import uniPopup from '@/components/uni-popup/uni-popup.vue'
  88. import popupCon from '@/components/uni-popup/popup-con.vue'
  89. import { xprhStoreApply } from '@/api/xprh.js'
  90. const baseUrl = getApp().globalData.baseUrl
  91. export default{
  92. components: {
  93. Address,
  94. uniPopup,
  95. popupCon
  96. },
  97. data(){
  98. return{
  99. theme: '',
  100. form: {
  101. storeImage:'',
  102. licenseImage:'',
  103. storeName: '',
  104. addrProvince: '',
  105. addrCity: '',
  106. addrDistrict: '',
  107. addrProvinceName: '',
  108. addrCityName: '',
  109. addrDistrictName: '',
  110. addrDetail: '',
  111. contactName:'',
  112. contactPhone: '',
  113. label: '',
  114. inviteCode:''
  115. },
  116. rules: {
  117. storeImage:[
  118. {
  119. required: true,
  120. message: '请选择门头照片',
  121. trigger: 'change'
  122. }
  123. ],
  124. storeName: [
  125. {
  126. required: true,
  127. message: '请输入门店名称',
  128. trigger: ['change','blur'],
  129. }
  130. ],
  131. label: [
  132. {
  133. required: true,
  134. message: '请选择所在地区',
  135. trigger: 'change'
  136. }
  137. ],
  138. addrDetail: [
  139. {
  140. required: true,
  141. message: '请输入详细地址',
  142. trigger: 'change'
  143. }
  144. ],
  145. contactName: [
  146. {
  147. required: true,
  148. message: '请输入联系人姓名',
  149. trigger: 'change'
  150. }
  151. ]
  152. },
  153. areaIdArr: [], // 省市区id数组
  154. labelArr: [],
  155. action: baseUrl + '/upload',
  156. storePhotoList: [],
  157. yyzzPhotoList: [],
  158. storeApply: null,
  159. isRead: false,
  160. tipTit: ''
  161. }
  162. },
  163. // 必须要在onReady生命周期,因为onLoad生命周期组件可能尚未创建完毕
  164. onReady() {
  165. this.$refs.uForm.setRules(this.rules);
  166. },
  167. onLoad() {
  168. // 判断是否审核中
  169. this.storeApply = this.$store.state.vuex_storeAuthInfo
  170. if(this.storeApply){
  171. this.isRead = this.storeApply.auditStatus == 'WAIT'
  172. this.tipTit = this.storeApply.auditStatus == 'WAIT' ? '门店认证资料审核中,请耐心等待' : (this.storeApply.auditStatus == 'REFUSE' ? '门店认证资料审核不通过,请重新提交审核!' : '')
  173. this.form = Object.assign(this.form, this.storeApply)
  174. this.storePhotoList = this.form.storeImage ? [{url:this.form.storeImage}] : []
  175. this.yyzzPhotoList = this.form.licenseImage ? [{url:this.form.licenseImage}] : [],
  176. this.labelArr = [this.form.addrProvinceName,this.form.addrCityName,this.form.addrDistrictName]
  177. this.areaIdArr = [this.form.addrProvince,this.form.addrCity,this.form.addrDistrict]
  178. this.form.label = this.labelArr.join('-')
  179. }else{
  180. // this.form.contactPhone = this.$store.state.vuex_userInfo.mobile
  181. this.form.contactPhone = '13709146193'
  182. this.tipTit = ''
  183. }
  184. },
  185. methods: {
  186. // 上传门店图片成功
  187. uploadStorePhoto(res){
  188. this.form.storeImage = res.data
  189. },
  190. // 删除门店图片
  191. removeStorePhoto(index){
  192. this.form.storeImage = ''
  193. },
  194. // 上传营业执照图片成功
  195. uploadYyzzPhoto(res){
  196. this.form.licenseImage = res.data
  197. },
  198. // 删除营业执照图片
  199. removeYyzzPhoto(index){
  200. this.form.licenseImage = ''
  201. },
  202. // 表单提交
  203. formSubmit(){
  204. this.$refs.uForm.validate(valid => {
  205. if (valid) {
  206. console.log('验证通过');
  207. this.submitData()
  208. } else {
  209. console.log('验证失败');
  210. }
  211. });
  212. },
  213. submitData(){
  214. let obj = this.form
  215. obj.addrProvince = this.areaIdArr[0] // 省id
  216. obj.addrCity = this.areaIdArr[1] // 市id
  217. obj.addrDistrict = this.areaIdArr[2] // 区id
  218. obj.addrProvinceName = this.labelArr[0] // 省
  219. obj.addrCityName = this.labelArr[1] // 市
  220. obj.addrDistrictName = this.labelArr[2] // 区
  221. // 申请试用
  222. xprhStoreApply(obj).then(res => {
  223. console.log(res)
  224. if(res.status == 200){
  225. uni.navigateBack()
  226. uni.$emit("updateAuthState")
  227. }
  228. uni.showToast({icon: 'none',title: res.message})
  229. })
  230. },
  231. // 选择省区市
  232. areaConfirm(e) {
  233. console.log('已选择的省市区', e)
  234. this.labelArr = e.labelArr
  235. this.areaIdArr = [ e.provinceCode, e.cityCode, e.areaCode ]
  236. this.form.label = e.label
  237. },
  238. openAddress(){
  239. // 省市区 回显 参数为省市区id数组
  240. this.$refs.applyAddress.open(this.areaIdArr)
  241. },
  242. }
  243. }
  244. </script>
  245. <style scoped lang="scss">
  246. .apply-wrap{
  247. height: 100vh;
  248. background-color: #fff;
  249. .login-form{
  250. padding: 0.7rem 1.5rem;
  251. flex-grow: 1;
  252. overflow: auto;
  253. }
  254. .form-btn-con{
  255. padding: 1rem;
  256. }
  257. }
  258. </style>