|
@@ -0,0 +1,190 @@
|
|
|
+<template>
|
|
|
+ <view class="apply-wrap flex flex_column">
|
|
|
+ <view class="login-form">
|
|
|
+ <u-form :model="form" label-width="180rpx" :error-type="['toast']" ref="uForm">
|
|
|
+ <u-form-item label="门头照片" required prop="storePhoto">
|
|
|
+ <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="门店名称">
|
|
|
+ <u-input v-model="form.name" maxlength="30" placeholder="请输入门店名称(最多30个字符)"/>
|
|
|
+ </u-form-item>
|
|
|
+ <u-form-item label="所在地区">
|
|
|
+ <u-input v-model="form.label" placeholder="请选择省市区" :disabled="true" @click="openAddress"/>
|
|
|
+ <Address ref="applyAddress" @onConfirm="areaConfirm"></Address>
|
|
|
+ </u-form-item>
|
|
|
+ <u-form-item label="详细地址">
|
|
|
+ <u-input v-model="form.addrDetail" placeholder="请输入详细地址"/>
|
|
|
+ </u-form-item>
|
|
|
+ <u-form-item label="联系人姓名" prop="userName">
|
|
|
+ <u-input v-model="form.userName" placeholder="请输入联系人姓名"/>
|
|
|
+ </u-form-item>
|
|
|
+ <u-form-item label="联系人手机">
|
|
|
+ {{form.contactPhone}}
|
|
|
+ </u-form-item>
|
|
|
+ <u-form-item label="汽配商邀请码">
|
|
|
+ <u-input v-model="form.code" placeholder="如没有可不填"/>
|
|
|
+ </u-form-item>
|
|
|
+ </u-form>
|
|
|
+ </view>
|
|
|
+ <view class="form-btn-con flex justify_center">
|
|
|
+ <u-button class="form-btn" shape="circle" type="info" :custom-style="{ background: '#066cff', color: '#fff',width:'350rpx' }" @click="formSubmit">提交审核</u-button>
|
|
|
+ </view>
|
|
|
+ </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 { sendVerifyCode, apply, validateUser } from '@/api/user.js'
|
|
|
+ const baseUrl = getApp().globalData.baseUrl
|
|
|
+ export default{
|
|
|
+ components: {
|
|
|
+ Address,
|
|
|
+ uniPopup,
|
|
|
+ popupCon
|
|
|
+ },
|
|
|
+ data(){
|
|
|
+ return{
|
|
|
+ theme: '',
|
|
|
+ form: {
|
|
|
+ name: '',
|
|
|
+ addrProvince: '',
|
|
|
+ addrCity: '',
|
|
|
+ addrDistrict: '',
|
|
|
+ addrDetail: '',
|
|
|
+ contactPhone: '',
|
|
|
+ label: ''
|
|
|
+ },
|
|
|
+ rules: {
|
|
|
+ name: [
|
|
|
+ {
|
|
|
+ required: true,
|
|
|
+ message: '请输入门店名称',
|
|
|
+ // 可以单个或者同时写两个触发验证方式
|
|
|
+ trigger: ['change','blur'],
|
|
|
+ }
|
|
|
+ ],
|
|
|
+ },
|
|
|
+ areaIdArr: [], // 省市区id数组
|
|
|
+ action: baseUrl + '/upload',
|
|
|
+ storePhotoList: [],
|
|
|
+ itemIconArr: [], // 门店图片
|
|
|
+ yyzzPhotoList: [],
|
|
|
+ yyzzIconArr: [], // 营业执照图片
|
|
|
+ }
|
|
|
+ },
|
|
|
+ // 必须要在onReady生命周期,因为onLoad生命周期组件可能尚未创建完毕
|
|
|
+ onReady() {
|
|
|
+ this.$refs.uForm.setRules(this.rules);
|
|
|
+ },
|
|
|
+ onLoad() {
|
|
|
+ this.form.contactPhone = this.$store.state.vuex_userInfo.mobile
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ // 上传门店图片成功
|
|
|
+ uploadStorePhoto(res){
|
|
|
+ this.itemIconArr.push(res.data)
|
|
|
+ },
|
|
|
+ // 删除门店图片
|
|
|
+ removeStorePhoto(index){
|
|
|
+ this.itemIconArr.splice(index,1)
|
|
|
+ },
|
|
|
+ // 上传营业执照图片成功
|
|
|
+ uploadYyzzPhoto(res){
|
|
|
+ this.yyzzIconArr.push(res.data)
|
|
|
+ },
|
|
|
+ // 删除营业执照图片
|
|
|
+ removeYyzzPhoto(index){
|
|
|
+ this.yyzzIconArr.splice(index,1)
|
|
|
+ },
|
|
|
+ // 表单提交
|
|
|
+ formSubmit(){
|
|
|
+ this.$refs.uForm.validate(valid => {
|
|
|
+ if (valid) {
|
|
|
+ console.log('验证通过');
|
|
|
+ this.submitData()
|
|
|
+ } else {
|
|
|
+ console.log('验证失败');
|
|
|
+ }
|
|
|
+ });
|
|
|
+ },
|
|
|
+ submitData(){
|
|
|
+ let obj = this.form
|
|
|
+ obj.addrProvince = this.areaIdArr[0] // 省id
|
|
|
+ obj.addrCity = this.areaIdArr[1] // 市id
|
|
|
+ obj.addrDistrict = this.areaIdArr[2] // 区id
|
|
|
+ // 申请试用
|
|
|
+ apply(obj).then(res => {
|
|
|
+ console.log(res)
|
|
|
+ if(res.status == 200){
|
|
|
+
|
|
|
+ }else{
|
|
|
+ uni.showToast({icon: 'none',title: res.message})
|
|
|
+ }
|
|
|
+ })
|
|
|
+ },
|
|
|
+ // 获取验证码
|
|
|
+ getCodeValidate(){
|
|
|
+ if(this.form.contactPhone){
|
|
|
+ // 校验手机号是否注册过
|
|
|
+ validateUser({phone: this.form.contactPhone}).then(res => {
|
|
|
+ if(res.status == 200){
|
|
|
+ // 图文验证码
|
|
|
+ this.$refs.imageTxtPopup.open()
|
|
|
+ }else{
|
|
|
+ uni.showToast({icon: 'none',title: res.message})
|
|
|
+ }
|
|
|
+ })
|
|
|
+ }else{
|
|
|
+ uni.showToast({icon: 'none',title: '请先输入手机号'})
|
|
|
+ }
|
|
|
+ },
|
|
|
+ // 选择省区市
|
|
|
+ areaConfirm(e) {
|
|
|
+ console.log('已选择的省市区', e)
|
|
|
+ this.areaIdArr = [ e.provinceCode, e.cityCode, e.areaCode ]
|
|
|
+ this.form.label = e.label
|
|
|
+ },
|
|
|
+ openAddress(){
|
|
|
+ // 省市区 回显 参数为省市区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>
|