authPass.vue 12 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348
  1. <template>
  2. <view class="apply-wrap flex flex_column">
  3. <view class="login-form">
  4. <u-form :model="form" label-width="200rpx" :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="请选择省市区" type="select" @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" :maxlength="100" placeholder="请输入详细地址(最多100个字符)"/>
  38. </u-form-item>
  39. <u-form-item label="联系人姓名" required prop="contactName">
  40. <u-input v-model="form.contactName" :maxlength="20" placeholder="请输入联系人姓名(最多20个字符)"/>
  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" placeholder="请输入选择结算方式" 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="授信金额" v-if="form.settleType == 'CREDIT'" required prop="creditLimit">
  53. <u-input :clearable="false" type="digit" :min="100" :maxlength="8" @blur="numberToFixed('creditLimit',2,999999)" v-model.trim="form.creditLimit" placeholder="请输入大于100的数字,最多两位小数"/>
  54. </u-form-item>
  55. <view>
  56. <view style="padding: 1rem 0">价格权限设置</view>
  57. <view class="flex align_center" style="width: 100%;padding: 0.3rem 0">
  58. <text style="width: 90px;">货架产品:</text>
  59. <u-checkbox-group @change="priceSetChange">
  60. <u-checkbox v-for="item in showPrice" :key="item.paramCode" v-model="item.checked"
  61. :name="item.paramCode">{{item.text}}</u-checkbox>
  62. </u-checkbox-group>
  63. </view>
  64. <view class="flex align_center" style="width: 100%;padding: 0.3rem 0">
  65. <text style="width: 90px;">非货架产品:</text>
  66. <u-checkbox-group @change="nonPriceSetChange">
  67. <u-checkbox v-for="item in showNoPrice" :key="item.paramCode" v-model="item.checked"
  68. :name="item.paramCode">{{item.text}}</u-checkbox>
  69. </u-checkbox-group>
  70. </view>
  71. </view>
  72. </u-form>
  73. </view>
  74. <view class="form-btn-con flex justify_center">
  75. <u-button class="form-btn" shape="circle" :loading="loading" type="info" :custom-style="customBtnStyle" @click="formSubmit">审核通过</u-button>
  76. </view>
  77. </view>
  78. </template>
  79. <script>
  80. import Address from '@/components/address.vue'
  81. import { xprhStoreApplyDetail, xprhStoreApplyAudit } from '@/api/approveStore'
  82. import {updateShelfPriceShow} from '@/api/shelf'
  83. import { clzConfirm, numberToFixed } from '@/libs/tools';
  84. const baseUrl = getApp().globalData.baseUrl
  85. export default{
  86. components: {
  87. Address,
  88. },
  89. data(){
  90. return{
  91. loading: false,
  92. theme: '',
  93. customBtnStyle: { // 自定义按钮样式
  94. borderColor: this.$config('primaryColor'),
  95. backgroundColor: this.$config('primaryColor'),
  96. color: '#fff',
  97. width: '360rpx'
  98. },
  99. form: {
  100. storeName: '', // 门店名称
  101. contactPhone: '', // 联系手机
  102. contactName: '', // 联系人
  103. label: '',
  104. addrProvince: undefined, // 省
  105. addrProvinceName: '',
  106. addrCity: undefined, // 市
  107. addrCityName: '',
  108. addrDistrict: undefined, // 区
  109. addrDistrictName: '',
  110. addrDetail: '', // 详细地址
  111. storeImage: '', // 门头照片
  112. licenseImage: '', // 营业执照
  113. settleType: undefined, // 结算方式
  114. settleTypeDictValue: undefined,
  115. customerSn: undefined, // 关联客户
  116. customerName: undefined,
  117. creditLimit: '', // 授信额度
  118. delearSn: undefined,
  119. applySn: undefined,
  120. auditStatus: 'PASS' // 通过
  121. },
  122. rules: {
  123. storeImage:[{ required: true, message: '请选择门头照片', trigger: 'change' }],
  124. storeName: [{ required: true, message: '请输入门店名称', trigger: 'change' }],
  125. contactMobile: [{ required: false, pattern: /^\d{30}$/, message: '请输入正确的手机号', trigger: 'change' }],
  126. label: [{ required: true, message: '请选择地区', trigger: 'change' }],
  127. addrDetail: [{ required: true, message: '请输入详细地址', trigger: 'change' }],
  128. contactName: [{ required: true, message: '请输入联系人姓名', trigger: 'change' }],
  129. settleType: [{ required: true, message: '请选择收结算方式', trigger: 'change' }],
  130. customerSn: [{ required: true, message: '请选择关联客户', trigger: 'change' }],
  131. // creditLimit: [{ required: true, message: '请输入授信金额', trigger: 'change' }],
  132. },
  133. areaIdArr: [], // 省市区id数组
  134. labelArr: [],
  135. action: baseUrl + 'upload',
  136. storePhotoList: [],
  137. yyzzPhotoList: [],
  138. settleStyleModal: false,
  139. settleStyleList: [],
  140. showPrice: [],
  141. showNoPrice: []
  142. }
  143. },
  144. // 必须要在onReady生命周期,因为onLoad生命周期组件可能尚未创建完毕
  145. onReady() {
  146. this.$refs.uForm.setRules(this.rules);
  147. this.showPrice = [{
  148. paramCode: 'shelf_price_show',
  149. paramValue: 1,
  150. text: '车主价',
  151. checked: true
  152. },{
  153. paramCode: 'shelf_cost_show',
  154. paramValue: 0,
  155. text: '结算价',
  156. checked: false
  157. }]
  158. this.showNoPrice = [{
  159. paramCode: 'non_shelf_price_show',
  160. paramValue: 1,
  161. text: '车主价',
  162. checked: true
  163. },{
  164. paramCode: 'non_shelf_cost_show',
  165. paramValue: 0,
  166. text: '结算价',
  167. checked: false
  168. }]
  169. },
  170. onLoad(options) {
  171. const _this = this
  172. this.applySn = options.sn
  173. this.getDetail()
  174. this.settleStyleList = this.$store.state.vuex_shelfSettleType
  175. // 选择关联客户
  176. uni.$on("addCustome",function(data){
  177. _this.form.customerSn = data.customerSn
  178. _this.form.customerName = data.customerName
  179. })
  180. },
  181. onUnload() {
  182. uni.$off("addCustome")
  183. },
  184. methods: {
  185. // 小数点后两位
  186. numberToFixed: function (key, num, max) {
  187. let val = this.form[key]
  188. let ret = numberToFixed(val, num, max)
  189. this.$nextTick(() => {
  190. this.form[key] = ret < 100 ? 100 : ret
  191. })
  192. },
  193. // 获取详细
  194. getDetail () {
  195. xprhStoreApplyDetail({ sn: this.applySn }).then(res => {
  196. if (res.status == 200) {
  197. this.form = Object.assign(this.form, res.data)
  198. this.storePhotoList = this.form.storeImage ? [{url:this.form.storeImage}] : []
  199. this.yyzzPhotoList = this.form.licenseImage ? [{url:this.form.licenseImage}] : [],
  200. this.form.addrDetail = this.form.addrDetail || ''
  201. if(this.form.addrProvinceName&&this.form.addrCityName&&this.form.addrDistrictName){
  202. this.labelArr = [this.form.addrProvinceName,this.form.addrCityName,this.form.addrDistrictName]
  203. this.areaIdArr = [this.form.addrProvince,this.form.addrCity,this.form.addrDistrict]
  204. this.form.label = this.labelArr.join('-')
  205. }else{
  206. this.labelArr = []
  207. this.areaIdArr = []
  208. this.form.label = ''
  209. }
  210. this.form.auditStatus = 'PASS' // 通过
  211. } else {
  212. this.$refs.ruleForm.resetFields()
  213. }
  214. })
  215. },
  216. // 上传门店图片成功
  217. uploadStorePhoto(res){
  218. this.form.storeImage = res.data
  219. },
  220. // 删除门店图片
  221. removeStorePhoto(index){
  222. this.form.storeImage = ''
  223. },
  224. // 上传营业执照图片成功
  225. uploadYyzzPhoto(res){
  226. this.form.licenseImage = res.data
  227. },
  228. // 删除营业执照图片
  229. removeYyzzPhoto(index){
  230. this.form.licenseImage = ''
  231. },
  232. // 收款方式 change
  233. settleStyleChange(ind){
  234. this.form.settleType = this.settleStyleList[ind].code || undefined
  235. this.form.settleTypeDictValue = this.settleStyleList[ind].dispName || undefined
  236. this.form.creditLimit = ''
  237. },
  238. // 选择关联客户
  239. chooseCustome(){
  240. uni.navigateTo({
  241. url: "/pages/sales/chooseCustomer?backPage=authPass"
  242. })
  243. },
  244. // 表单提交
  245. formSubmit(){
  246. const _this = this
  247. this.$refs.uForm.validate(valid => {
  248. if (valid) {
  249. if((_this.form.creditLimit >= 100 && _this.form.settleType == 'CREDIT') || _this.form.settleType !== 'CREDIT'){
  250. clzConfirm({
  251. title: '提示',
  252. content: '审核通过后,即可成为认证门店,确认审核通过吗?',
  253. success: function(res) {
  254. if (res.confirm || res.index == 0) {
  255. _this.submitData()
  256. }
  257. }
  258. })
  259. }else{
  260. uni.showToast({
  261. icon: 'none',
  262. title: '请输入授信金额'
  263. })
  264. }
  265. } else {
  266. console.log('验证失败');
  267. }
  268. });
  269. },
  270. submitData(){
  271. let obj = this.form
  272. obj.addrProvince = this.areaIdArr[0] // 省id
  273. obj.addrCity = this.areaIdArr[1] // 市id
  274. obj.addrDistrict = this.areaIdArr[2] // 区id
  275. obj.addrProvinceName = this.labelArr[0] // 省
  276. obj.addrCityName = this.labelArr[1] // 市
  277. obj.addrDistrictName = this.labelArr[2] // 区
  278. this.loading = true
  279. // 申请试用
  280. xprhStoreApplyAudit(obj).then(res => {
  281. console.log(res)
  282. if(res.status == 200){
  283. this.savePriceSet(res.data)
  284. }else{
  285. uni.showToast({icon: 'none',title: res.message})
  286. this.loading = false
  287. }
  288. })
  289. },
  290. // 选择价格显示
  291. priceSetChange(e) {
  292. this.showPrice.map(item => {
  293. item.paramValue = e.includes(item.paramCode) ? 1 : 0
  294. })
  295. },
  296. nonPriceSetChange(e){
  297. this.showNoPrice.map(item => {
  298. item.paramValue = e.includes(item.paramCode) ? 1 : 0
  299. })
  300. },
  301. // 价格显示保存
  302. savePriceSet(data) {
  303. const params = {
  304. shelfSn: data.shelfSn,
  305. paramValue: [...this.showPrice, ...this.showNoPrice]
  306. }
  307. console.log(params)
  308. // 更新价格显示
  309. updateShelfPriceShow(params).then(res => {
  310. if (res.status == 200) {
  311. uni.navigateBack()
  312. uni.$emit("updateAuthState")
  313. }
  314. uni.showToast({icon: 'none',title: res.message})
  315. this.loading = false
  316. })
  317. },
  318. // 选择省区市
  319. areaConfirm(e) {
  320. console.log('已选择的省市区', e)
  321. this.labelArr = e.labelArr
  322. this.areaIdArr = [ e.provinceCode, e.cityCode, e.areaCode ]
  323. this.form.label = e.label
  324. },
  325. openAddress(){
  326. // 省市区 回显 参数为省市区id数组
  327. this.$refs.applyAddress.open(this.areaIdArr)
  328. },
  329. }
  330. }
  331. </script>
  332. <style scoped lang="scss">
  333. .apply-wrap{
  334. width:100%;
  335. height: 100vh;
  336. background-color: #fff;
  337. .login-form{
  338. padding: 0.7rem 1.5rem;
  339. flex-grow: 1;
  340. overflow: auto;
  341. }
  342. .form-btn-con{
  343. padding: 1rem;
  344. }
  345. }
  346. </style>