storeAuth.vue 10 KB

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