修改

src/store/api/user/applyCompany.js

@@ -0,0 +1,40 @@
+import { defineStore } from 'pinia'
+import { AxiosWrapper } from '@/utils/axios-wrapper'
+import { get } from 'lodash-es'
+const url = '/applyCompany'
+const axios = new AxiosWrapper()
+
+export const ApplyCompanyStore = defineStore('applyCompany', () => {
+  const query = async ({ skip = 0, limit = undefined, ...info } = {}) => {
+    let cond = {}
+    if (skip) cond.skip = skip
+    if (limit) cond.limit = limit
+    cond = { ...cond, ...info }
+    const res = await axios.$get(`${url}`, cond)
+    return res
+  }
+  const fetch = async (payload) => {
+    const res = await axios.$get(`${url}/${payload}`)
+    return res
+  }
+  const create = async (payload) => {
+    const res = await axios.$post(`${url}`, payload)
+    return res
+  }
+  const update = async (payload) => {
+    const id = get(payload, 'id', get(payload, '_id'))
+    const res = await axios.$post(`${url}/${id}`, payload)
+    return res
+  }
+  const del = async (payload) => {
+    const res = await axios.$delete(`${url}/${payload}`)
+    return res
+  }
+  return {
+    query,
+    fetch,
+    create,
+    update,
+    del
+  }
+})

src/views/detail/companyDetail.vue

@@ -30,6 +30,11 @@
           </div>
         </el-col>
         <el-col :span="24" class="one_3">
+          <div class="title" v-if="!info.user">
+            <span class="tit-a">企业认领</span>
+            <span class="tit-b"></span><span class="tit-c"></span>
+          </div>
+          <div v-if="!info.user" class="button" @click="dialog = true">企业认领</div>
           <div class="title">
             <span class="tit-a">企业简介</span>
             <span class="tit-b"></span><span class="tit-c"></span>
@@ -49,14 +54,21 @@
       </div>
     </el-col>
   </custom-layout>
+  <el-dialog v-model="dialog" title="企业认领" :destroy-on-close="true" @close="toClose">
+    <data-form></data-form>
+  </el-dialog>
 </template>
 
 <script setup>
 import companyLogo from '/images/companyLogo.jpg'
 import { get } from 'lodash-es'
+// 组件
+import dataForm from './parts/company.vue'
 // 接口
 import { CompanyStore } from '@/store/api/user/company'
+import { ApplyCompanyStore } from '@/store/api/user/applyCompany'
 const store = CompanyStore()
+const applyStore = ApplyCompanyStore()
 // 收藏
 import moment from 'moment'
 import { CollectionStore } from '@/store/api/platform/collection'
@@ -150,6 +162,60 @@ const toCollect = async () => {
     }
   } else ElMessage({ message: '未登录！', type: 'error' })
 }
+
+const validatePhoneNumber = (rule, value, callback) => {
+  const reg = /^1[3-9]\d{9}$/
+  if (!value) {
+    return callback(new Error('手机号不能为空'))
+  }
+  if (!reg.test(value)) {
+    return callback(new Error('请输入正确的手机号'))
+  }
+  callback()
+}
+const form = ref({})
+const dialog = ref(false)
+const ruleFormRef = ref()
+const rules = reactive({
+  file: [{ required: true, message: '请上传营业执照', trigger: 'blur' }],
+  person: [{ required: true, message: '请输入负责人', trigger: 'blur' }],
+  person_phone: [{ required: true, validator: validatePhoneNumber, trigger: 'blur' }],
+  card: [{ required: true, message: '请上传负责人身份证正反面', trigger: 'blur' }],
+  email: [{ required: true, message: '请输入电子邮箱', trigger: 'blur' }]
+})
+// 报名
+const submitForm = async (formEl) => {
+  if (!formEl) return
+  await formEl.validate((valid, fields) => {
+    if (valid) {
+      if (user.value.id) {
+        ElMessageBox.confirm(`您确认要认领该企业?`, '提示', { confirmButtonText: '确定', cancelButtonText: '取消', type: 'warning' })
+          .then(async () => {
+            const obj = { user: user.value.id, company: info.value.id, ...form.value }
+            const res = await applyStore.create(obj)
+            if (res.errcode == 0) {
+              toClose()
+              ElMessage({ message: `企业认领成功等待申请`, type: 'success' })
+            }
+          })
+          .catch(() => {})
+      } else {
+        ElMessage.error('用户未登录无法企业认领！')
+      }
+    } else {
+      console.log('error submit!', fields)
+    }
+  })
+}
+const toClose = () => {
+  dialog.value = false
+  form.value = {}
+}
+// provide
+provide('form', form)
+provide('rules', rules)
+provide('ruleFormRef', ruleFormRef)
+provide('submitForm', submitForm)
 </script>
 <style scoped lang="scss">
 .main {
@@ -236,6 +302,20 @@ const toCollect = async () => {
           border-bottom: 3px #637d8d solid;
         }
       }
+      .button {
+        margin: 10px 30px;
+        cursor: default;
+        justify-content: center;
+        display: flex;
+        align-items: center;
+        width: 136px;
+        height: 44px;
+        color: #fff;
+        font-size: $global-font-size-16;
+        background-image: linear-gradient(90deg, #0455da 0%, #378cff 100%), linear-gradient(#0455da, #0455da);
+        background-blend-mode: normal, normal;
+        border-radius: 4px;
+      }
       .content {
         font-size: $global-font-size-16;
         line-height: 36px;

src/views/detail/parts/company.vue

@@ -0,0 +1,53 @@
+<template>
+  <div id="index">
+    <el-row>
+      <el-col :span="24" class="main">
+        <el-col :span="24" class="one">
+          <el-form label-position="top" ref="ruleFormRef" :model="form" :rules="rules" label-width="80px" class="form">
+            <el-form-item label="营业执照" prop="file">
+              <custom-upload model="file" :list="form.file" listType="picture-card" :limit="1" url="/files/web/cxyy_applyCompany/upload" @change="onUpload"></custom-upload>
+            </el-form-item>
+            <el-form-item label="负责人" prop="person">
+              <el-input clearable v-model="form.person" placeholder="请输入负责人姓名"> </el-input>
+            </el-form-item>
+            <el-form-item label="负责人电话号" prop="person_phone">
+              <el-input clearable v-model="form.person_phone" placeholder="请输入负责人电话号"> </el-input>
+            </el-form-item>
+            <el-form-item label="负责人身份证正反面" prop="card">
+              <custom-upload model="card" :list="form.card" :limit="2" listType="picture-card" url="/files/web/cxyy_applyCompany/upload" @change="onUpload"></custom-upload>
+            </el-form-item>
+            <el-form-item label="电子邮箱" prop="email">
+              <el-input clearable v-model="form.email" placeholder="请输入电子邮箱"> </el-input>
+            </el-form-item>
+            <el-form-item>
+              <el-col :span="24" class="button">
+                <el-button type="primary" @click="submitForm(ruleFormRef)">确定</el-button>
+              </el-col>
+            </el-form-item>
+          </el-form>
+        </el-col>
+      </el-col>
+    </el-row>
+  </div>
+</template>
+
+<script setup>
+const ruleFormRef = inject('ruleFormRef')
+const form = inject('form')
+const rules = inject('rules')
+const submitForm = inject('submitForm')
+// 上传图片
+const onUpload = (e) => {
+  const { model, value } = e
+  form.value[model] = value
+}
+</script>
+<style scoped lang="scss">
+.main {
+  .one {
+    .button {
+      text-align: center;
+    }
+  }
+}
+</style>