酒店信息前端完善

src/views/settings/components/storeAuthInfo.vue

@@ -1,35 +1,131 @@
 <template>
-    <a-form-model ref="form" :model="model">
-        <a-form-model-item label="门头照" >
-            <j-image-upload class="avatar-uploader" text="上传" v-model="model.ewm" ></j-image-upload>
-          </a-form-model-item>
-          <a-form-model-item label="照片" >
-            <j-image-upload class="avatar-uploader" text="上传" v-model="model.imgList" :isMultiple="true"></j-image-upload>
-          </a-form-model-item>
-          <a-button type="primary" @click="submit">确定</a-button>
-    </a-form-model>
+    <a-form ref="form" :form="form" :label-col="{ span: 3 }" :wrapper-col="{ span: 17 }">
+        <a-divider orientation="left">
+            经营执照
+            <span class="red-txt">(*必填)</span>
+        </a-divider>
+        <a-form-item label="营业执照">
+            <j-image-upload class="avatar-uploader" text="上传"
+                v-decorator="['certImg', { rules: [{ required: true, message: '请上传营业执照！' }] }]"></j-image-upload>
+        </a-form-item>
+        <a-form-item label="特种行业许可">
+            <j-image-upload class="avatar-uploader" text="上传"
+                v-decorator="['tzImg', { rules: [{ required: false, message: '请上传营业执照！' }] }]"></j-image-upload>
+        </a-form-item>
+
+        <a-form-item label="企业法人">
+            <a-input type="text" placeholder="请填写企业法人"
+                v-decorator="['faren', { rules: [{ required: true, message: '请填写企业法人！' }] }]"></a-input>
+        </a-form-item>
+
+        <a-form-item label="经营场所">
+            <a-input type="text" placeholder="请填写经营场所"
+                v-decorator="['jyAddress', { rules: [{ required: true, message: '请填写经营场所！' }] }]"></a-input>
+        </a-form-item>
+
+        <a-form-item label="有效期">
+            <a-date-picker type="text" placeholder="请填写经营场所"
+                v-decorator="['valideDate', { rules: [{ required: false, message: '请填写经营场所！' }] }]"></a-date-picker>
+        </a-form-item>
+        <a-divider orientation="left">
+            个人证件
+            <span class="red-txt">(*必填)</span>
+            <a-tag color="orange">
+                与酒店联系人信息保持一致
+            </a-tag>
+        </a-divider>
+        <a-form-item label="身份证照(正面)">
+            <j-image-upload class="avatar-uploader" text="上传"
+                v-decorator="['idcardFront', { rules: [{ required: true, message: '请上传身份证照(正面)！' }] }]"></j-image-upload>
+        </a-form-item>
+
+        <a-form-item label="身份证照(反面)">
+            <j-image-upload class="avatar-uploader" text="上传"
+                v-decorator="['idcardBack', { rules: [{ required: true, message: '请上传身份证照(反面)！' }] }]"></j-image-upload>
+        </a-form-item>
+
+        <a-form-item label="手持身份证照">
+            <j-image-upload class="avatar-uploader" text="上传"
+                v-decorator="['idcardHand', { rules: [{ required: true, message: '请上传手持身份证照！' }] }]"></j-image-upload>
+            <a-button type="link" @click="warning">手持证件要求</a-button>
+        </a-form-item>
+
+        <a-form-item label="联系人姓名">
+            <a-input type="text" placeholder="请填写联系人姓名"
+                v-decorator="['lxrName', { rules: [{ required: true, message: '请填写联系人姓名！' }] }]"></a-input>
+        </a-form-item>
+
+        <a-form-item label="身份证号">
+            <a-input type="text" placeholder="请填写身份证号"
+                v-decorator="['idcardNo', { rules: [{ required: true, message: '请填写身份证号！' }] }]"></a-input>
+        </a-form-item>
+
+        <a-button type="primary" @click="submit">确定</a-button>
+
+       
+    </a-form>
 </template>
 
 <script>
+import { Modal } from 'ant-design-vue';
 export default {
     created() {
         // alert("这里获取当前缓存门店信息，照片信息");
     },
     data() {
         return {
+            visible: false,
+            formLayout: 'horizontal',
+            form: this.$form.createForm(this, { certImg: null }),
             model: {
-                ewm: null,
+                certImg: null,
                 imgList: null
             }
         }
     },
+    computed: {
+        formItemLayout() {
+            const { formLayout } = this;
+            return formLayout === 'horizontal'
+                ? {
+                    labelCol: { span: 4 },
+                    wrapperCol: { span: 14 },
+                }
+                : {};
+        },
+    },
     methods: {
+        warning() {
+      this.$warning({
+        title: '手持身份证拍照要求',
+        // JSX support
+        content: (
+            <ul>
+                <li>免冠，建议未化妆，五官可见;</li>
+                <li>身份证全部信息清晰无遮挡，否则将无法通过认证;</li>
+                <li>完整露出手臂;</li>
+                <li>以酒店门头招牌为背景图片;</li>
+                <li>请勿进行任何软件处理;</li>
+                <li>单张图片不超过5M，尺寸要求500（长）X412（宽）以上，支持jpg、png、gif;</li>
+            </ul>
+        ),
+      });
+    },
         submit() {
-            console.log(this.model)
+            // console.log(this.form.values.certImg)
+            this.form.validateFields((err, values) => {
+                console.log(values)
+                if (!err) {
+                    console.info('success');
+                }
+            });
         }
     },
 }
 </script>
 
 <style scoped>
+.red-txt {
+    color: red;
+}
 </style>

src/views/settings/components/storeImages.vue

@@ -1,5 +1,5 @@
 <template>
-    <a-form-model ref="form" :model="model">
+    <a-form-model ref="form" :model="model" :label-col="{ span: 3 }" :wrapper-col="{ span: 17 }">
         <a-form-model-item label="门头照" >
             <j-image-upload class="avatar-uploader" text="上传" v-model="model.ewm" ></j-image-upload>
           </a-form-model-item>

src/views/settings/hotelInfo.vue

@@ -13,7 +13,7 @@
                     <a-icon type="audit" />
                     实名信息
                 </span>
-                实名信息
+                <store-auth-info></store-auth-info>
             </a-tab-pane>
             <a-tab-pane key="3">
                 <span slot="tab">
@@ -28,9 +28,11 @@
 
 <script>
 import storeImages from './components/storeImages.vue';
+import storeAuthInfo from './components/storeAuthInfo.vue';
 export default {
     components:{
-        storeImages
+        storeImages,
+        storeAuthInfo
     },
     data() {
         return {