企业我的页面开发
This commit is contained in:
263
pages/mine/company-info.vue
Normal file
263
pages/mine/company-info.vue
Normal file
@@ -0,0 +1,263 @@
|
||||
<template>
|
||||
<AppLayout title="企业信息" back-gorund-color="#F4F4F4">
|
||||
<!-- 头部进度显示 -->
|
||||
<view class="header-progress">
|
||||
<text class="progress-text">{{ companyInfo.completeness || '100%' }}</text>
|
||||
</view>
|
||||
|
||||
<!-- 编辑头像 -->
|
||||
<view class="avatar-section btn-feel" @click="editAvatar">
|
||||
<view class="avatar-label">编辑头像</view>
|
||||
<view class="avatar-container">
|
||||
<image class="company-avatar" :src="companyInfo.avatar || '/static/icon/company-avatar.png'"></image>
|
||||
<uni-icons color="#A2A2A2" type="right" size="16"></uni-icons>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 企业详细信息 -->
|
||||
<view class="info-section">
|
||||
<view class="info-item btn-feel" @click="editInfo('name')">
|
||||
<view class="info-label">企业名称</view>
|
||||
<view class="info-content">
|
||||
<text class="info-value">{{ companyInfo.name || '科里(北京)科技有限公司(喀什分公司)' }}</text>
|
||||
<uni-icons color="#A2A2A2" type="right" size="16"></uni-icons>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="info-item btn-feel" @click="editInfo('code')">
|
||||
<view class="info-label">统一社会代码</view>
|
||||
<view class="info-content">
|
||||
<text class="info-value">{{ companyInfo.socialCode || '6217171301012562295' }}</text>
|
||||
<uni-icons color="#A2A2A2" type="right" size="16"></uni-icons>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="info-item btn-feel" @click="editInfo('location')">
|
||||
<view class="info-label">企业注册地点</view>
|
||||
<view class="info-content">
|
||||
<text class="info-value">{{ companyInfo.location || '北京' }}</text>
|
||||
<uni-icons color="#A2A2A2" type="right" size="16"></uni-icons>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="info-item btn-feel" @click="editInfo('description')">
|
||||
<view class="info-label">企业信息介绍</view>
|
||||
<view class="info-content">
|
||||
<text class="info-value">{{ companyInfo.description || '公司成立于2003年01月27日,位于北京市大兴区经济技术产业开发区天泰一路3号一号楼南四、五楼,目前处于开业状态,经营范围包括信息技术咨询服务;科技中介服务;人工智能等。' }}</text>
|
||||
<uni-icons color="#A2A2A2" type="right" size="16"></uni-icons>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="info-item btn-feel" @click="editInfo('legalPerson')">
|
||||
<view class="info-label">企业法人姓名</view>
|
||||
<view class="info-content">
|
||||
<text class="info-value">{{ companyInfo.legalPerson || '孙正云' }}</text>
|
||||
<uni-icons color="#A2A2A2" type="right" size="16"></uni-icons>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="info-item btn-feel" @click="editInfo('contact1')">
|
||||
<view class="info-label">企业联系人名称</view>
|
||||
<view class="info-content">
|
||||
<text class="info-value">{{ companyInfo.contact1Name || '吴宣萱' }}</text>
|
||||
<uni-icons color="#A2A2A2" type="right" size="16"></uni-icons>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="info-item btn-feel" @click="editInfo('contact1Phone')">
|
||||
<view class="info-label">企业联系人电话</view>
|
||||
<view class="info-content">
|
||||
<text class="info-value">{{ companyInfo.contact1Phone || '15547143804' }}</text>
|
||||
<uni-icons color="#A2A2A2" type="right" size="16"></uni-icons>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="info-item btn-feel" @click="editInfo('contact2')">
|
||||
<view class="info-label">企业联系人名称</view>
|
||||
<view class="info-content">
|
||||
<text class="info-value">{{ companyInfo.contact2Name || '李杰' }}</text>
|
||||
<uni-icons color="#A2A2A2" type="right" size="16"></uni-icons>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="info-item btn-feel" @click="editInfo('contact2Phone')">
|
||||
<view class="info-label">企业联系人电话</view>
|
||||
<view class="info-content">
|
||||
<text class="info-value">{{ companyInfo.contact2Phone || '10700010700' }}</text>
|
||||
<uni-icons color="#A2A2A2" type="right" size="16"></uni-icons>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</AppLayout>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { reactive, inject, onMounted } from 'vue';
|
||||
import { onLoad, onShow } from '@dcloudio/uni-app';
|
||||
|
||||
const { $api, navTo } = inject('globalFunction');
|
||||
|
||||
// 企业信息数据
|
||||
const companyInfo = reactive({
|
||||
name: '科里(北京)科技有限公司(喀什分公司)',
|
||||
avatar: '/static/icon/company-avatar.png',
|
||||
completeness: '100%',
|
||||
socialCode: '6217171301012562295',
|
||||
location: '北京',
|
||||
description: '公司成立于2003年01月27日,位于北京市大兴区经济技术产业开发区天泰一路3号一号楼南四、五楼,目前处于开业状态,经营范围包括信息技术咨询服务;科技中介服务;人工智能等。',
|
||||
legalPerson: '孙正云',
|
||||
contact1Name: '吴宣萱',
|
||||
contact1Phone: '15547143804',
|
||||
contact2Name: '李杰',
|
||||
contact2Phone: '10700010700'
|
||||
});
|
||||
|
||||
function editAvatar() {
|
||||
// 编辑头像逻辑
|
||||
uni.chooseImage({
|
||||
count: 1,
|
||||
success: (res) => {
|
||||
// 上传头像
|
||||
uploadAvatar(res.tempFilePaths[0]);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
function uploadAvatar(filePath) {
|
||||
// 上传头像到服务器
|
||||
uni.uploadFile({
|
||||
url: '/api/upload/avatar',
|
||||
filePath: filePath,
|
||||
name: 'avatar',
|
||||
success: (res) => {
|
||||
const data = JSON.parse(res.data);
|
||||
if (data.success) {
|
||||
companyInfo.avatar = data.data.url;
|
||||
uni.showToast({
|
||||
title: '头像更新成功',
|
||||
icon: 'success'
|
||||
});
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
function editInfo(type) {
|
||||
// 根据类型跳转到不同的编辑页面
|
||||
const editPages = {
|
||||
name: '/pages/mine/edit-company-name',
|
||||
code: '/pages/mine/edit-company-code',
|
||||
location: '/pages/mine/edit-company-location',
|
||||
description: '/pages/mine/edit-company-description',
|
||||
legalPerson: '/pages/mine/edit-legal-person',
|
||||
contact1: '/pages/mine/edit-contact1',
|
||||
contact1Phone: '/pages/mine/edit-contact1-phone',
|
||||
contact2: '/pages/mine/edit-contact2',
|
||||
contact2Phone: '/pages/mine/edit-contact2-phone'
|
||||
};
|
||||
|
||||
if (editPages[type]) {
|
||||
navTo(editPages[type]);
|
||||
}
|
||||
}
|
||||
|
||||
onShow(() => {
|
||||
// 获取企业信息
|
||||
getCompanyInfo();
|
||||
});
|
||||
|
||||
function getCompanyInfo() {
|
||||
// 这里可以调用API获取企业信息
|
||||
// $api.createRequest('/app/company/info').then((resData) => {
|
||||
// Object.assign(companyInfo, resData.data);
|
||||
// });
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="stylus" scoped>
|
||||
.header-progress {
|
||||
text-align: center;
|
||||
padding: 20rpx 0;
|
||||
|
||||
.progress-text {
|
||||
font-size: 28rpx;
|
||||
color: #6C7282;
|
||||
}
|
||||
}
|
||||
|
||||
.avatar-section {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 30rpx;
|
||||
background: #FFFFFF;
|
||||
margin: 20rpx;
|
||||
border-radius: 20rpx;
|
||||
box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.08);
|
||||
|
||||
.avatar-label {
|
||||
font-size: 28rpx;
|
||||
color: #333333;
|
||||
}
|
||||
|
||||
.avatar-container {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
.company-avatar {
|
||||
width: 80rpx;
|
||||
height: 80rpx;
|
||||
border-radius: 50%;
|
||||
margin-right: 16rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.info-section {
|
||||
background: #FFFFFF;
|
||||
margin: 0 20rpx 40rpx;
|
||||
border-radius: 20rpx;
|
||||
box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.08);
|
||||
|
||||
.info-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 30rpx;
|
||||
border-bottom: 1rpx solid #F5F5F5;
|
||||
|
||||
&:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
.info-label {
|
||||
font-size: 28rpx;
|
||||
color: #6C7282;
|
||||
min-width: 200rpx;
|
||||
}
|
||||
|
||||
.info-content {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex: 1;
|
||||
|
||||
.info-value {
|
||||
font-size: 28rpx;
|
||||
color: #333333;
|
||||
flex: 1;
|
||||
text-align: right;
|
||||
margin-right: 16rpx;
|
||||
word-break: break-all;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.btn-feel {
|
||||
transition: transform 0.2s ease;
|
||||
|
||||
&:active {
|
||||
transform: scale(0.98);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
218
pages/mine/company-mine.vue
Normal file
218
pages/mine/company-mine.vue
Normal file
@@ -0,0 +1,218 @@
|
||||
<template>
|
||||
<AppLayout title="我的" back-gorund-color="#F4F4F4">
|
||||
<!-- 自定义tabbar -->
|
||||
<CustomTabBar :currentPage="4" />
|
||||
|
||||
<!-- 企业信息卡片 -->
|
||||
<view class="company-info-card btn-feel" @click="goToCompanyInfo">
|
||||
<view class="company-avatar">
|
||||
<image class="company-avatar-img" :src="companyInfo.avatar || '/static/icon/company-default.png'"></image>
|
||||
</view>
|
||||
<view class="company-details">
|
||||
<view class="company-name">{{ companyInfo.name || '科里喀什分公司' }}</view>
|
||||
<view class="company-completeness">信息完整度 {{ companyInfo.completeness || '100%' }}</view>
|
||||
</view>
|
||||
<view class="company-arrow">
|
||||
<uni-icons color="#A2A2A2" type="right" size="16"></uni-icons>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 服务专区 -->
|
||||
<view class="service-zone-card">
|
||||
<view class="service-title">服务专区</view>
|
||||
<view class="service-item btn-feel">
|
||||
<view class="service-left">
|
||||
<image class="service-icon" src="/static/icon/real-name-auth.png"></image>
|
||||
<text class="service-text">实名认证</text>
|
||||
</view>
|
||||
<view class="service-status">已通过</view>
|
||||
</view>
|
||||
<view class="service-item btn-feel">
|
||||
<view class="service-left">
|
||||
<image class="service-icon" src="/static/icon/notification.png"></image>
|
||||
<text class="service-text">通知与提醒</text>
|
||||
</view>
|
||||
<view class="service-status">已开启</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 退出登录按钮 -->
|
||||
<view class="logout-btn btn-feel" @click="logOut">
|
||||
退出登录
|
||||
</view>
|
||||
|
||||
<!-- 退出确认弹窗 -->
|
||||
<uni-popup ref="popup" type="dialog">
|
||||
<uni-popup-dialog
|
||||
mode="base"
|
||||
title="确定退出登录吗?"
|
||||
type="info"
|
||||
:duration="2000"
|
||||
:before-close="true"
|
||||
@confirm="confirm"
|
||||
@close="close"
|
||||
></uni-popup-dialog>
|
||||
</uni-popup>
|
||||
</AppLayout>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { reactive, inject, ref, onMounted } from 'vue';
|
||||
import { onLoad, onShow } from '@dcloudio/uni-app';
|
||||
|
||||
const { $api, navTo } = inject('globalFunction');
|
||||
const popup = ref(null);
|
||||
|
||||
// 企业信息数据
|
||||
const companyInfo = reactive({
|
||||
name: '科里喀什分公司',
|
||||
avatar: '/static/icon/company-avatar.png',
|
||||
completeness: '100%'
|
||||
});
|
||||
|
||||
function goToCompanyInfo() {
|
||||
navTo('/pages/mine/company-info');
|
||||
}
|
||||
|
||||
function logOut() {
|
||||
popup.value.open();
|
||||
}
|
||||
|
||||
function close() {
|
||||
popup.value.close();
|
||||
}
|
||||
|
||||
function confirm() {
|
||||
// 这里可以调用退出登录的API
|
||||
console.log('退出登录');
|
||||
// 跳转到登录页面或首页
|
||||
uni.reLaunch({
|
||||
url: '/pages/index/index'
|
||||
});
|
||||
}
|
||||
|
||||
onShow(() => {
|
||||
// 获取企业信息
|
||||
getCompanyInfo();
|
||||
});
|
||||
|
||||
function getCompanyInfo() {
|
||||
// 这里可以调用API获取企业信息
|
||||
// $api.createRequest('/app/company/info').then((resData) => {
|
||||
// Object.assign(companyInfo, resData.data);
|
||||
// });
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="stylus" scoped>
|
||||
.company-info-card {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 30rpx;
|
||||
background: #FFFFFF;
|
||||
margin: 20rpx;
|
||||
border-radius: 20rpx;
|
||||
box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.08);
|
||||
|
||||
.company-avatar {
|
||||
width: 100rpx;
|
||||
height: 100rpx;
|
||||
border-radius: 50%;
|
||||
overflow: hidden;
|
||||
margin-right: 24rpx;
|
||||
|
||||
.company-avatar-img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.company-details {
|
||||
flex: 1;
|
||||
|
||||
.company-name {
|
||||
font-size: 36rpx;
|
||||
font-weight: 600;
|
||||
color: #333333;
|
||||
margin-bottom: 8rpx;
|
||||
}
|
||||
|
||||
.company-completeness {
|
||||
font-size: 28rpx;
|
||||
color: #6C7282;
|
||||
}
|
||||
}
|
||||
|
||||
.company-arrow {
|
||||
margin-left: 20rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.service-zone-card {
|
||||
background: #FFFFFF;
|
||||
margin: 0 20rpx 20rpx;
|
||||
border-radius: 20rpx;
|
||||
box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.08);
|
||||
padding: 32rpx;
|
||||
|
||||
.service-title {
|
||||
font-size: 32rpx;
|
||||
font-weight: 600;
|
||||
color: #000000;
|
||||
margin-bottom: 32rpx;
|
||||
}
|
||||
|
||||
.service-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 24rpx 0;
|
||||
border-bottom: 1rpx solid #F5F5F5;
|
||||
|
||||
&:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
.service-left {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
.service-icon {
|
||||
width: 44rpx;
|
||||
height: 44rpx;
|
||||
margin-right: 16rpx;
|
||||
}
|
||||
|
||||
.service-text {
|
||||
font-size: 28rpx;
|
||||
color: #333333;
|
||||
}
|
||||
}
|
||||
|
||||
.service-status {
|
||||
font-size: 28rpx;
|
||||
color: #6E6E6E;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.logout-btn {
|
||||
height: 96rpx;
|
||||
background: #FFFFFF;
|
||||
margin: 0 20rpx 40rpx;
|
||||
border-radius: 20rpx;
|
||||
text-align: center;
|
||||
line-height: 96rpx;
|
||||
font-size: 28rpx;
|
||||
color: #256BFA;
|
||||
box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.08);
|
||||
}
|
||||
|
||||
.btn-feel {
|
||||
transition: transform 0.2s ease;
|
||||
|
||||
&:active {
|
||||
transform: scale(0.98);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -2,7 +2,22 @@
|
||||
<AppLayout title="我的" back-gorund-color="#F4F4F4">
|
||||
<!-- 自定义tabbar -->
|
||||
<CustomTabBar :currentPage="4" />
|
||||
<view class="mine-userinfo btn-feel" @click="seeDetail">
|
||||
<!-- 企业用户信息卡片 -->
|
||||
<view v-if="userInfo.isCompanyUser === 0" class="company-info-card btn-feel" @click="seeDetail">
|
||||
<view class="company-avatar">
|
||||
<image class="company-avatar-img" :src="companyInfo.avatar || '/static/icon/company-default.png'"></image>
|
||||
</view>
|
||||
<view class="company-details">
|
||||
<view class="company-name">{{ companyInfo.name || '科里喀什分公司' }}</view>
|
||||
<view class="company-completeness">信息完整度 {{ companyInfo.completeness || '100%' }}</view>
|
||||
</view>
|
||||
<view class="company-arrow">
|
||||
<uni-icons color="#A2A2A2" type="right" size="16"></uni-icons>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 求职者用户信息卡片 -->
|
||||
<view v-else class="mine-userinfo btn-feel" @click="seeDetail">
|
||||
<view class="userindo-head">
|
||||
<image class="userindo-head-img" v-if="userInfo.sex === '0'" src="/static/icon/boy.png"></image>
|
||||
<image class="userindo-head-img" v-else src="/static/icon/girl.png"></image>
|
||||
@@ -114,6 +129,13 @@ import { tabbarManager } from '@/utils/tabbarManager';
|
||||
const popup = ref(null);
|
||||
const { userInfo, Completion } = storeToRefs(useUserStore());
|
||||
const counts = ref({});
|
||||
|
||||
// 企业信息数据
|
||||
const companyInfo = reactive({
|
||||
name: '科里喀什分公司',
|
||||
avatar: '/static/icon/company-avatar.png',
|
||||
completeness: '100%'
|
||||
});
|
||||
function logOut() {
|
||||
popup.value.open();
|
||||
}
|
||||
@@ -140,9 +162,11 @@ function getUserstatistics() {
|
||||
});
|
||||
}
|
||||
function seeDetail() {
|
||||
if (userInfo.isCompanyUser) {
|
||||
navTo('/packageA/pages/myResume/corporateInformation');
|
||||
if (userInfo.isCompanyUser === 0) {
|
||||
// 企业用户跳转到企业信息页面
|
||||
navTo('/pages/mine/company-info');
|
||||
} else {
|
||||
// 求职者用户跳转到简历页面
|
||||
navTo('/packageA/pages/myResume/myResume');
|
||||
}
|
||||
}
|
||||
@@ -326,4 +350,48 @@ function seeDetail() {
|
||||
border-radius: 2rpx
|
||||
background: #A2A2A2;
|
||||
transform: rotate(45deg)
|
||||
|
||||
// 企业信息卡片样式
|
||||
.company-info-card {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 30rpx;
|
||||
background: #FFFFFF;
|
||||
margin: 20rpx;
|
||||
border-radius: 20rpx;
|
||||
box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.08);
|
||||
|
||||
.company-avatar {
|
||||
width: 100rpx;
|
||||
height: 100rpx;
|
||||
border-radius: 50%;
|
||||
overflow: hidden;
|
||||
margin-right: 24rpx;
|
||||
|
||||
.company-avatar-img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.company-details {
|
||||
flex: 1;
|
||||
|
||||
.company-name {
|
||||
font-size: 36rpx;
|
||||
font-weight: 600;
|
||||
color: #333333;
|
||||
margin-bottom: 8rpx;
|
||||
}
|
||||
|
||||
.company-completeness {
|
||||
font-size: 28rpx;
|
||||
color: #6C7282;
|
||||
}
|
||||
}
|
||||
|
||||
.company-arrow {
|
||||
margin-left: 20rpx;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user