sj-miniprogram/pages/jobs/job-detail.vue

<template>
  <view class="detail-container">
    <!-- 核心信息 -->
    <view class="header-box">
      <view class="title-row">
        <text class="title">高级审计师</text>
        <text class="salary">13K-23K</text>
      </view>
      <view class="tag-row">
        <text class="urgent-tag">急招</text>
      </view>
      <view class="meta-row">
        <text class="meta-text">上海市·黄浦区 | 招1人 | 2025-12-12 截止</text>
      </view>
    </view>

    <!-- 说明文字 -->
    <view class="content-box">
      <view class="section-title">岗位详情</view>
      <view class="tags-cloud">
        <text class="tag">全职</text>
        <text class="tag">五险一金</text>
        <text class="tag">本科</text>
        <text class="tag">CPA</text>
      </view>
      <view class="desc-text">
        我们需要一位经验丰富的审计师。您将负责执行复杂的财务和运营审计，识别流程改进机会。
      </view>
    </view>

    <!-- 底部按钮 -->
    <view class="bottom-bar">
      <view class="consult-btn" @click="goToChat">
        <text>咨询</text>
      </view>
    </view>
  </view>
</template>

<script setup>
import { createOrGetSession } from '../../api/message.js';

const goToChat = async () => {
  try {
    uni.showLoading({ title: '正在连接客服...' });
    const userInfo = uni.getStorageSync('userInfo') || {};
    const userId = userInfo.studentId || null;
    const userName = userInfo.name || '用户';
    const userAvatar = userInfo.avatarUrl || '/static/images/user_avatar.svg';
    const currentPage = getCurrentPages().pop();
    const jobId = currentPage?.options?.id || '';

    const res = await createOrGetSession({
      sessionType: 1,
      fromUserId: userId,
      fromUserName: userName,
      fromUserAvatar: userAvatar,
      sourceId: 'job_' + jobId
    });
    uni.hideLoading();

    if (res.data) {
      const session = res.data;
      uni.navigateTo({
        url: `/pages/chat/chat?sessionId=${session.sessionId}&sessionNo=${session.sessionNo || ''}&fromUserId=${userId || ''}&userName=${encodeURIComponent(userName)}`
      });
    } else {
      uni.showToast({ title: '创建会话失败', icon: 'none' });
    }
  } catch (err) {
    uni.hideLoading();
    console.error('创建会话失败:', err);
    uni.showToast({ title: '连接失败，请重试', icon: 'none' });
  }
};
</script>

<style lang="scss">
.detail-container {
  min-height: 100vh;
  background-color: #F8F9FB;
  padding-bottom: 120rpx;
}
.header-box {
  background: #fff;
  padding: 40rpx 30rpx;
  margin-bottom: 20rpx;
  .title-row {
    display: flex;
    justify-content: space-between;
    margin-bottom: 20rpx;
    .title { font-size: 40rpx; font-weight: bold; }
    .salary { font-size: 36rpx; color: #1F6CFF; font-weight: bold; }
  }
  .urgent-tag {
    background: #FFF2F0; color: #FF4D4F; font-size: 22rpx; padding: 4rpx 12rpx; border-radius: 4rpx;
  }
  .meta-row { margin-top: 20rpx; font-size: 24rpx; color: #999; }
}
.content-box {
  background: #fff;
  padding: 40rpx 30rpx;
  .section-title { font-size: 32rpx; font-weight: bold; margin-bottom: 20rpx; border-left: 8rpx solid #1F6CFF; padding-left: 20rpx; }
  .tags-cloud { display: flex; gap: 16rpx; margin-bottom: 30rpx; .tag { background: #F0F2F5; font-size: 24rpx; padding: 8rpx 20rpx; color: #666; } }
  .desc-text { font-size: 28rpx; color: #666; line-height: 1.6; }
}
.bottom-bar {
  position: fixed; bottom: 0; left: 0; right: 0; height: 110rpx; background: #fff; display: flex; align-items: center; padding: 0 40rpx; border-top: 1rpx solid #eee;
  .consult-btn { flex: 1; background: #1F6CFF; height: 80rpx; border-radius: 40rpx; display: flex; align-items: center; justify-content: center; text { color: #fff; font-weight: bold; } }
}
</style>