storeAuth.vue 9.0 KB

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