sj-miniprogram/online-service/mini-app-ref/chat.vue

<template>
  <view class="container">
    <scroll-view 
      class="chat-scroll" 
      scroll-y 
      :scroll-top="scrollTop" 
      scroll-with-animation
      @scrolltoupper="loadHistory"
    >
      <view class="msg-list">
        <block v-for="(item, index) in msgList" :key="index">
          <!-- 时间戳 -->
          <view class="time-stamp" v-if="showTime(index)">{{ item.time }}</view>
          
          <view :class="['msg-row', item.isMe ? 'row-right' : 'row-left']">
            <image class="avatar" :src="item.avatar" mode="aspectFill" />
            
            <view class="content">
              <!-- 文本消息 -->
              <view v-if="item.type === 'text'" class="bubble">{{ item.content }}</view>
              
              <!-- 岗位卡片 -->
              <view v-else-if="item.type === 'job_card'" class="card job-card" @tap="toJobDetail(item.payload.id)">
                <view class="job-header">
                  <text class="job-name">{{ item.payload.title }}</text>
                  <text class="salary">{{ item.payload.salary }}</text>
                </view>
                <view class="tags">
                  <text v-for="tag in item.payload.tags" :key="tag" class="tag">{{ tag }}</text>
                </view>
                <view class="company">
                  <image src="/static/icons/company.png" class="c-logo" />
                  <text>{{ item.payload.company }}</text>
                  <text class="loc">{{ item.payload.location }}</text>
                </view>
              </view>

              <!-- 订单卡片 -->
              <view v-else-if="item.type === 'order_card'" class="card order-card">
                <view class="order-title">您有一笔待付款项 <text class="status">已失效</text></view>
                <view class="order-body">
                  <view class="item"><text class="label">项目名称：</text>{{ item.payload.name }}</view>
                  <view class="item"><text class="label">支付金额：</text><text class="price">￥{{ item.payload.price }}</text></view>
                </view>
                <button class="btn disabled" disabled>已失效</button>
              </view>
            </view>
          </view>
        </block>
      </view>
    </scroll-view>

    <!-- 底部输入栏 -->
    <view class="input-panel">
      <image src="/static/icons/voice.png" class="icon" />
      <input 
        class="input" 
        v-model="inputVal" 
        placeholder="请输入内容..." 
        confirm-type="send"
        @confirm="sendMsg"
      />
      <image src="/static/icons/emoji.png" class="icon" />
      <image src="/static/icons/plus.png" class="icon" />
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      inputVal: '',
      scrollTop: 0,
      msgList: [
        { 
          isMe: false, 
          type: 'job_card', 
          avatar: '/static/kf-avatar.png',
          time: '12-28 13:15:56',
          payload: {
            id: 'j001',
            title: '审计员',
            salary: '13K-23K',
            tags: ['实习', '五险一金', '985'],
            company: '华财仁合',
            location: '上海市·黄浦区'
          }
        },
        {
          isMe: false,
          type: 'text',
          avatar: '/static/kf-avatar.png',
          content: '您好！我是您的专属客服，请问有什么可以帮助您',
          time: '12-28 13:16:10'
        },
        {
          isMe: false,
          type: 'order_card',
          avatar: '/static/kf-avatar.png',
          payload: {
            name: '审计师一极入职定金',
            price: '29.9'
          },
          time: '12-28 13:17:00'
        }
      ]
    }
  },
  methods: {
    sendMsg() {
      if(!this.inputVal) return;
      this.msgList.push({
        isMe: true,
        type: 'text',
        content: this.inputVal,
        avatar: '/static/user-avatar.png',
        time: new Date().toLocaleTimeString()
      });
      this.inputVal = '';
      this.scrollToBottom();
      // 这里调用 WebSocket 接口发送消息
    },
    scrollToBottom() {
      this.$nextTick(() => {
        this.scrollTop += 1000;
      })
    },
    showTime(index) {
      return index === 0; // 简化逻辑
    }
  }
}
</script>

<style lang="scss">
.container {
  display: flex;
  flex-direction: column;
  height: 100vh;
  background-color: #f7f7f7;
}

.chat-scroll {
  flex: 1;
  .msg-list {
    padding: 20rpx;
    
    .time-stamp {
      text-align: center;
      font-size: 22rpx;
      color: #999;
      margin: 30rpx 0;
      background: #e9e9e9;
      display: inline-block;
      padding: 4rpx 16rpx;
      border-radius: 8rpx;
      left: 50%;
      transform: translateX(-50%);
      position: relative;
    }

    .msg-row {
      display: flex;
      margin-bottom: 40rpx;
      
      .avatar {
        width: 80rpx;
        height: 80rpx;
        border-radius: 50%;
      }
      
      .content {
        max-width: 500rpx;
        margin: 0 20rpx;
        
        .bubble {
          padding: 20rpx;
          border-radius: 12rpx;
          font-size: 28rpx;
          line-height: 1.4;
          background-color: #fff;
          position: relative;
        }
      }
      
      &.row-left {
        .bubble {
          background-color: #fff;
          &::after {
            content: ''; position: absolute; left: -10rpx; top: 20rpx;
            border: 10rpx solid transparent; border-right-color: #fff;
          }
        }
      }
      
      &.row-right {
        flex-direction: row-reverse;
        .bubble {
          background-color: #95ec69;
          &::after {
            content: ''; position: absolute; right: -10rpx; top: 20rpx;
            border: 10rpx solid transparent; border-left-color: #95ec69;
          }
        }
      }
    }
  }
}

/* 卡片样式 */
.card {
  background: #fff;
  border-radius: 20rpx;
  padding: 30rpx;
  box-shadow: 0 4rpx 20rpx rgba(0,0,0,0.05);
  margin-top: 10rpx;
  
  &.job-card {
    .job-header {
      display: flex; justify-content: space-between; margin-bottom: 20rpx;
      .job-name { font-size: 32rpx; font-weight: bold; }
      .salary { color: #007aff; font-weight: bold; }
    }
    .tags {
      margin-bottom: 20rpx;
      .tag { font-size: 22rpx; color: #666; background: #f0f0f0; padding: 2rpx 12rpx; margin-right: 10rpx; border-radius: 4rpx; }
    }
    .company {
      display: flex; align-items: center; font-size: 24rpx; color: #333;
      .c-logo { width: 32rpx; height: 32rpx; margin-right: 10rpx; }
      .loc { margin-left: auto; color: #999; }
    }
  }

  &.order-card {
    .order-title {
      font-size: 28rpx; font-weight: bold; margin-bottom: 20rpx;
      .status { float: right; font-weight: normal; color: #999; font-size: 24rpx; }
    }
    .order-body {
      color: #666; font-size: 26rpx;
      .item { margin-bottom: 10rpx; }
      .price { color: #ff4d4f; font-weight: bold; font-size: 32rpx; }
    }
    .btn {
      margin-top: 30rpx; height: 70rpx; line-height: 70rpx; border-radius: 35rpx;
      font-size: 28rpx; background: #ffbc00; color: #fff;
      &.disabled { background: #e0e0e0; color: #999; }
    }
  }
}

.input-panel {
  display: flex; align-items: center; padding: 20rpx 30rpx;
  background: #f9f9f9; border-top: 1px solid #eee;
  padding-bottom: calc(20rpx + env(safe-area-inset-bottom));
  
  .input { flex: 1; height: 72rpx; background: #fff; border-radius: 8rpx; margin: 0 20rpx; padding: 0 20rpx; font-size: 28rpx; }
  .icon { width: 56rpx; height: 56rpx; }
}
</style>