authPass.vue 8.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254
  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="storeImage">
  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="storeName">
  30. <u-input v-model="form.storeName" 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" :isJrMini="true" @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="contactName">
  40. <u-input v-model="form.contactName" placeholder="请输入联系人姓名"/>
  41. </u-form-item>
  42. <u-form-item label="联系人手机">
  43. {{form.contactPhone}}
  44. </u-form-item>
  45. <u-form-item label="关联客户" required prop="customerSn">
  46. <u-input v-model="form.customerName" type="select" placeholder="请输入选择关联客户" @click="chooseCustome" />
  47. </u-form-item>
  48. <u-form-item label="结算方式" required prop="settleType">
  49. <u-input v-model="form.settleTypeDictValue" type="select" @click="settleStyleModal = true" />
  50. <u-picker v-model="settleStyleModal" @confirm="settleStyleChange" :range="settleStyleList" range-key="dispName" mode="selector"></u-picker>
  51. </u-form-item>
  52. <u-form-item label="授信金额" required prop="creditLimit">
  53. <u-input type="number" :min="100" v-model.trim="form.creditLimit" placeholder="请输入大于100的数字,最多两位小数"/>
  54. </u-form-item>
  55. </u-form>
  56. </view>
  57. <view class="form-btn-con flex justify_center">
  58. <u-button class="form-btn" shape="circle" :loading="loading" type="info" :custom-style="{ background: '#066cff', color: '#fff',width:'350rpx' }" @click="formSubmit">审核通过</u-button>
  59. </view>
  60. </view>
  61. </template>
  62. <script>
  63. import Address from '@/components/address.vue'
  64. import { xprhStoreApplyDetail, xprhStoreApplyAudit } from '@/api/approveStore'
  65. import { clzConfirm } from '@/libs/tools';
  66. const baseUrl = getApp().globalData.baseUrl
  67. export default{
  68. components: {
  69. Address,
  70. },
  71. data(){
  72. return{
  73. loading: false,
  74. theme: '',
  75. form: {
  76. storeName: '', // 门店名称
  77. contactPhone: '', // 联系手机
  78. contactName: '', // 联系人
  79. addrProvince: undefined, // 省
  80. addrProvinceName: '',
  81. addrCity: undefined, // 市
  82. addrCityName: '',
  83. addrDistrict: undefined, // 区
  84. addrDistrictName: '',
  85. addrDetail: '', // 详细地址
  86. storeImage: '', // 门头照片
  87. licenseImage: '', // 营业执照
  88. settleType: undefined, // 结算方式
  89. settleTypeDictValue: undefined,
  90. customerSn: undefined, // 关联客户
  91. customerName: undefined,
  92. creditLimit: '', // 授信额度
  93. delearSn: undefined,
  94. applySn: undefined,
  95. auditStatus: 'PASS' // 通过
  96. },
  97. rules: {
  98. storeImage:[{ required: true, message: '请选择门头照片', trigger: 'change' }],
  99. storeName: [{ required: true, message: '请输入门店名称', trigger: 'change' }],
  100. contactMobile: [{ required: false, pattern: /^\d{30}$/, message: '请输入正确的手机号', trigger: 'change' }],
  101. addrProvince: [{ required: true, message: '请选择省', trigger: 'change' }],
  102. addrCity: [{ required: true, message: '请选择市', trigger: 'change' }],
  103. addrDistrict: [{ required: true, message: '请选择区/县', trigger: 'change' }],
  104. addrDetail: [{ required: true, message: '请输入详细地址', trigger: 'change' }],
  105. contactName: [{ required: true, message: '请输入联系人姓名', trigger: 'change' }],
  106. settleType: [{ required: true, message: '请选择收结算方式', trigger: 'change' }],
  107. customerSn: [{ required: true, message: '请选择关联客户', trigger: 'change' }],
  108. creditLimit: [{ required: true, message: '请输入授信额度', trigger: 'change' }],
  109. },
  110. areaIdArr: [], // 省市区id数组
  111. labelArr: [],
  112. action: baseUrl + '/upload',
  113. storePhotoList: [],
  114. yyzzPhotoList: [],
  115. settleStyleModal: false,
  116. settleStyleList: []
  117. }
  118. },
  119. // 必须要在onReady生命周期,因为onLoad生命周期组件可能尚未创建完毕
  120. onReady() {
  121. this.$refs.uForm.setRules(this.rules);
  122. },
  123. onLoad(options) {
  124. const _this = this
  125. this.applySn = options.sn
  126. this.getDetail()
  127. this.settleStyleList = this.$store.state.vuex_shelfSettleType
  128. // 选择关联客户
  129. uni.$on("addCustome",function(data){
  130. _this.form.customerSn = data.customerSn
  131. _this.form.customerName = data.customerName
  132. })
  133. },
  134. onUnload() {
  135. uni.$off("addCustome")
  136. },
  137. methods: {
  138. // 获取详细
  139. getDetail () {
  140. xprhStoreApplyDetail({ sn: this.applySn }).then(res => {
  141. if (res.status == 200) {
  142. this.form = Object.assign(this.form, res.data)
  143. this.storePhotoList = this.form.storeImage ? [{url:this.form.storeImage}] : []
  144. this.yyzzPhotoList = this.form.licenseImage ? [{url:this.form.licenseImage}] : [],
  145. this.labelArr = [this.form.addrProvinceName,this.form.addrCityName,this.form.addrDistrictName]
  146. this.areaIdArr = [this.form.addrProvince,this.form.addrCity,this.form.addrDistrict]
  147. this.form.label = this.labelArr.join('-')
  148. this.form.auditStatus = 'PASS' // 通过
  149. } else {
  150. this.$refs.ruleForm.resetFields()
  151. }
  152. })
  153. },
  154. // 上传门店图片成功
  155. uploadStorePhoto(res){
  156. this.form.storeImage = res.data
  157. },
  158. // 删除门店图片
  159. removeStorePhoto(index){
  160. this.form.storeImage = ''
  161. },
  162. // 上传营业执照图片成功
  163. uploadYyzzPhoto(res){
  164. this.form.licenseImage = res.data
  165. },
  166. // 删除营业执照图片
  167. removeYyzzPhoto(index){
  168. this.form.licenseImage = ''
  169. },
  170. // 收款方式 change
  171. settleStyleChange(ind){
  172. this.form.settleType = this.settleStyleList[ind].code || undefined
  173. this.form.settleTypeDictValue = this.settleStyleList[ind].dispName || undefined
  174. },
  175. // 选择关联客户
  176. chooseCustome(){
  177. uni.navigateTo({
  178. url: "/pages/sales/chooseCustomer?backPage=authPass"
  179. })
  180. },
  181. // 表单提交
  182. formSubmit(){
  183. const _this = this
  184. this.$refs.uForm.validate(valid => {
  185. if (valid) {
  186. if(_this.form.creditLimit >= 100){
  187. clzConfirm({
  188. title: '提示',
  189. content: '审核通过后,即可成为认证门店,确认审核通过吗?',
  190. success: function(res) {
  191. if (res.confirm || res.index == 0) {
  192. _this.submitData()
  193. }
  194. }
  195. })
  196. }else{
  197. uni.showToast({icon: 'none',title: "授信金额必需大于等于100"})
  198. }
  199. } else {
  200. console.log('验证失败');
  201. }
  202. });
  203. },
  204. submitData(){
  205. let obj = this.form
  206. obj.addrProvince = this.areaIdArr[0] // 省id
  207. obj.addrCity = this.areaIdArr[1] // 市id
  208. obj.addrDistrict = this.areaIdArr[2] // 区id
  209. obj.addrProvinceName = this.labelArr[0] // 省
  210. obj.addrCityName = this.labelArr[1] // 市
  211. obj.addrDistrictName = this.labelArr[2] // 区
  212. this.loading = true
  213. // 申请试用
  214. xprhStoreApplyAudit(obj).then(res => {
  215. console.log(res)
  216. if(res.status == 200){
  217. uni.navigateBack()
  218. uni.$emit("updateAuthState")
  219. }
  220. uni.showToast({icon: 'none',title: res.message})
  221. this.loading = false
  222. })
  223. },
  224. // 选择省区市
  225. areaConfirm(e) {
  226. console.log('已选择的省市区', e)
  227. this.labelArr = e.labelArr
  228. this.areaIdArr = [ e.provinceCode, e.cityCode, e.areaCode ]
  229. this.form.label = e.label
  230. },
  231. openAddress(){
  232. // 省市区 回显 参数为省市区id数组
  233. this.$refs.applyAddress.open(this.areaIdArr)
  234. },
  235. }
  236. }
  237. </script>
  238. <style scoped lang="scss">
  239. .apply-wrap{
  240. width:100%;
  241. height: 100vh;
  242. background-color: #fff;
  243. .login-form{
  244. padding: 0.7rem 1.5rem;
  245. flex-grow: 1;
  246. overflow: auto;
  247. }
  248. .form-btn-con{
  249. padding: 1rem;
  250. }
  251. }
  252. </style>