123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334 |
- <template>
- <view class="apply-wrap flex flex_column">
- <view v-if="tipTit">
- <u-alert-tips :show-icon="true" type="warning" :title="tipTit"></u-alert-tips>
- </view>
- <view class="login-form">
- <u-form v-if="!isRead" :model="form" label-width="180rpx" :error-type="['toast']" ref="uForm">
- <u-form-item label="门头照片" prop="storeImage">
- <u-upload
- @on-success="uploadStorePhoto"
- @on-remove="removeStorePhoto"
- :file-list="storePhotoList"
- :action="action"
- :max-size="2 * 1024 * 1024"
- :width="200"
- :height="150"
- upload-text="上传门头照片"
- max-count="1"></u-upload>
- </u-form-item>
- <u-form-item label="营业执照">
- <u-upload
- @on-success="uploadYyzzPhoto"
- @on-remove="removeYyzzPhoto"
- :file-list="yyzzPhotoList"
- :action="action"
- :max-size="2 * 1024 * 1024"
- :width="200"
- :height="150"
- upload-text="上传营业执照"
- max-count="1"></u-upload>
- </u-form-item>
- <u-form-item label="门店名称" required prop="storeName">
- <u-input v-model="form.storeName" maxlength="30" placeholder="请输入门店名称(最多30个字符)"/>
- </u-form-item>
- <u-form-item label="所在地区" prop="label">
- <view @click="openAddress" :style="{color:form.label?'':'#c0c2c5'}" style="line-height: normal;" class="flex justify_between align_center">
- {{form.label||'请选择省市区'}}
- <u-icon name="arrow-down" color="#c0c2c5" size="28"></u-icon>
- </view>
- </u-form-item>
- <u-form-item label="详细地址" prop="addrDetail">
- <u-input type="textarea" maxlength="100" v-model="form.addrDetail" placeholder="请输入详细地址"/>
- </u-form-item>
- <u-form-item label="联系人姓名" required prop="contactName">
- <u-input v-model="form.contactName" maxlength="20" placeholder="请输入联系人姓名"/>
- </u-form-item>
- <u-form-item label="联系人手机">
- {{form.contactPhone}}
- </u-form-item>
- <u-form-item label="汽配商邀请码" required prop="inviteCode">
- <u-input v-model="form.inviteCode" maxlength="30" :clearable="false" @input="inputDealer" @blur="findDealer" @confirm="findDealer" placeholder="请输入邀请码"/>
- </u-form-item>
- <u-form-item label="汽配商" v-if="form.inviteName.length">
- {{form.inviteName||'--'}}
- </u-form-item>
- </u-form>
- <!-- 详情 -->
- <u-form v-else :model="form" label-width="180rpx" :error-type="['toast']" ref="uForm">
- <u-form-item label="门头照片" prop="storeImage">
- <u-image v-if='form.storeImage' :src="form.storeImage" width="200" height="150"></u-image>
- <text v-else>未上传</text>
- </u-form-item>
- <u-form-item label="营业执照">
- <u-image v-if='form.licenseImage' :src="form.licenseImage" width="200" height="150"></u-image>
- <text v-else>未上传</text>
- </u-form-item>
- <u-form-item label="门店名称" required prop="storeName">
- {{form.storeName||'--'}}
- </u-form-item>
- <u-form-item label="所在地区" prop="label">
- {{form.label||'--'}}
- </u-form-item>
- <u-form-item label="详细地址" prop="addrDetail">
- <div style="word-break: break-all;line-height: normal;">
- {{form.addrDetail||'--'}}
- </div>
- </u-form-item>
- <u-form-item label="联系人姓名" required prop="contactName">
- {{form.contactName||'--'}}
- </u-form-item>
- <u-form-item label="联系人手机">
- {{form.contactPhone||'--'}}
- </u-form-item>
- <u-form-item label="汽配商邀请码" required prop="inviteCode">
- {{form.inviteCode||'未填写'}}
- </u-form-item>
- <u-form-item label="汽配商" v-if="form.inviteName.length">
- {{form.inviteName||'--'}}
- </u-form-item>
- </u-form>
- </view>
- <view class="form-btn-con flex justify_center" v-if="!isRead">
- <u-button class="form-btn" shape="circle" type="info" :loading="loading" :custom-style="{ background: '#066cff', color: '#fff',width:'350rpx' }" @click="formSubmit">提交审核</u-button>
- </view>
- <Address ref="applyAddress" @onConfirm="areaConfirm"></Address>
- </view>
- </template>
- <script>
- import Address from '@/components/address.vue'
- import uniPopup from '@/components/uni-popup/uni-popup.vue'
- import popupCon from '@/components/uni-popup/popup-con.vue'
- import { xprhStoreApply, xprhFindDealer } from '@/api/xprh.js'
- const baseUrl = getApp().globalData.baseUrl
- export default{
- components: {
- Address,
- uniPopup,
- popupCon
- },
- data(){
- return{
- loading: false,
- form: {
- storeImage:'',
- licenseImage:'',
- storeName: '',
- addrProvince: '',
- addrCity: '',
- addrDistrict: '',
- addrProvinceName: '',
- addrCityName: '',
- addrDistrictName: '',
- addrDetail: '',
- contactName:'',
- contactPhone: '',
- label: '',
- inviteCode:'',
- inviteName:''
- },
- rules: {
- // storeImage:[
- // {
- // required: true,
- // message: '请选择门头照片',
- // trigger: 'change'
- // }
- // ],
- storeName: [
- {
- required: true,
- message: '请输入门店名称',
- trigger: ['change','blur'],
- }
- ],
- // label: [
- // {
- // required: true,
- // message: '请选择所在地区',
- // trigger: 'change'
- // }
- // ],
- // addrDetail: [
- // {
- // required: true,
- // message: '请输入详细地址',
- // trigger: 'change'
- // }
- // ],
- inviteCode: [
- {
- required: true,
- message: '请输入汽配商邀请码',
- trigger: 'change'
- }
- ],
- contactName: [
- {
- required: true,
- message: '请输入联系人姓名',
- trigger: 'change'
- }
- ]
- },
- areaIdArr: [], // 省市区id数组
- labelArr: [],
- action: baseUrl + 'upload',
- storePhotoList: [],
- yyzzPhotoList: [],
- storeApply: null,
- isRead: true,
- tipTit: ''
- }
- },
- // 必须要在onReady生命周期,因为onLoad生命周期组件可能尚未创建完毕
- onReady() {
- this.$refs.uForm.setRules(this.rules);
- },
- onLoad() {
- const _this = this
- // 判断是否审核中
- this.storeApply = this.$store.state.vuex_storeAuthInfo
- if(this.storeApply){
- this.isRead = this.storeApply.auditStatus == 'WAIT' || this.storeApply.auditStatus == 'PASS'
- const titText = {'WAIT':'门店认证资料审核中,请耐心等待',"REFUSE":'门店认证资料审核不通过,请重新提交审核!','PASS':'门店认证审核已通过,请重新登录!'}
- this.tipTit = titText[this.storeApply.auditStatus]
- if(this.storeApply.auditStatus=='PASS'){
- uni.showModal({
- title: '提示',
- content: '门店认证审核已通过,请重新登录!',
- confirmText: '去登录',
- showCancel: false,
- success() {
- _this.$store.dispatch('userLogout');
- uni.redirectTo({
- url: '/pages/login/login'
- });
- }
- })
- }
- // 赋值
- this.form = Object.assign(this.form, this.storeApply)
- this.storePhotoList = this.form.storeImage ? [{url:this.form.storeImage}] : []
- this.yyzzPhotoList = this.form.licenseImage ? [{url:this.form.licenseImage}] : [],
- this.labelArr = [this.form.addrProvinceName,this.form.addrCityName,this.form.addrDistrictName]
- this.areaIdArr = [this.form.addrProvince,this.form.addrCity,this.form.addrDistrict]
- this.form.label = this.labelArr.join('-')
- this.findDealer()
- }else{
- this.form.contactPhone = this.$store.state.vuex_userInfo.mobile
- this.tipTit = ''
- this.isRead = false
- }
- },
- methods: {
- // 上传门店图片成功
- uploadStorePhoto(res){
- this.form.storeImage = res.data
- },
- // 删除门店图片
- removeStorePhoto(index){
- this.form.storeImage = ''
- },
- // 上传营业执照图片成功
- uploadYyzzPhoto(res){
- this.form.licenseImage = res.data
- },
- // 删除营业执照图片
- removeYyzzPhoto(index){
- this.form.licenseImage = ''
- },
- inputDealer(v){
- if(!this.form.inviteCode){
- this.form.inviteName = ''
- }
- },
- findDealer(v){
- if(!this.form.inviteCode){
- this.form.inviteName = ''
- return
- }
- uni.showLoading({
- title: "正在查询"
- })
- xprhFindDealer({inviteCode: this.form.inviteCode}).then(res => {
- uni.hideLoading()
- if(res.status == 200){
- this.form.inviteName = res.data&&res.data.dealerName
- }else{
- this.form.inviteName = ''
- if(!this.isRead){
- uni.showToast({icon: 'none',title: res.message,duration:5000})
- }
- }
- })
- },
- // 表单提交
- formSubmit(){
- this.$refs.uForm.validate(valid => {
- if (valid) {
- console.log('验证通过');
- this.submitData()
- } else {
- console.log('验证失败');
- }
- });
- },
- submitData(){
- const _this = this
- let obj = this.form
- obj.addrProvince = this.areaIdArr[0]||'' // 省id
- obj.addrCity = this.areaIdArr[1]||'' // 市id
- obj.addrDistrict = this.areaIdArr[2]||'' // 区id
- obj.addrProvinceName = this.labelArr[0]||'' // 省
- obj.addrCityName = this.labelArr[1]||'' // 市
- obj.addrDistrictName = this.labelArr[2]||'' // 区
-
- _this.loading = true
- // 申请试用
- xprhStoreApply(obj).then(res => {
- console.log(res)
- uni.showToast({icon: 'none',title: res.message,duration:3000})
- if(res.status == 200){
- uni.$emit("refashHome")
- setTimeout(()=>{
- uni.switchTab({
- url: "/pages/index/index"
- })
- _this.loading = false
- },3000)
- }else{
- _this.loading = false
- }
- })
- },
- // 选择省区市
- areaConfirm(e) {
- console.log('已选择的省市区', e)
- this.labelArr = e.labelArr
- this.areaIdArr = [ e.provinceCode, e.cityCode, e.areaCode ]
- this.form.label = e.label
- },
- openAddress(){
- console.log('省市区')
- // 省市区 回显 参数为省市区id数组
- this.$refs.applyAddress.open(this.areaIdArr)
- },
- }
- }
- </script>
- <style scoped lang="scss">
- .apply-wrap{
- height: 100vh;
- background-color: #fff;
- .login-form{
- padding: 0.7rem 1.5rem;
- flex-grow: 1;
- overflow: auto;
- }
- .form-btn-con{
- padding: 1rem;
- }
- }
- </style>
|