ykt-team-wxapp/pages/home/consult.vue

<template>
  <view class="consult-container">
    <view class="consult-title">咨询互动</view>

    <view class="consult-grid">
      <view
        class="consult-item"
        v-for="item in consultItems"
        :key="item.id"
        @click="handleItemClick(item)"
      >
        <view class="item-icon" :style="{ backgroundColor: item.bgColor }">
          <image :src="item.icon" class="icon-img" mode="aspectFit" />
        </view>
        <view class="item-label">{{ item.label }}</view>
      </view>
    </view>

    <!-- 选择咨询人弹窗 -->
    <select-consultant-popup
      ref="consultantPopup"
      :customers="customers"
      :corpId="corpId"
      :teamId="teamId"
      @confirm="handleConsultantConfirm"
      @addNew="handleAddNewArchive"
    />
  </view>
</template>

<script setup>
import { ref, computed } from "vue";
import { storeToRefs } from "pinia";
import useAccount from "@/store/account";
import api from "@/utils/api";
import { toast } from "@/utils/widget";
import SelectConsultantPopup from "./select-consultant-popup.vue";

const props = defineProps({
  corpId: {
    type: String,
    default: "",
  },
  teamId: {
    type: String,
    default: "",
  },
  customers: {
    type: Array,
    default: () => [],
  },
});

const { account } = storeToRefs(useAccount());
const consultantPopup = ref(null);

const consultItems = ref([
  {
    id: "chat",
    label: "聊天咨询",
    icon: "/static/homepage/chat-icon.png",
    bgColor: "#5DADE2",
    needSelectConsultant: true,
  },
  {
    id: "education",
    label: "我的宣教",
    icon: "/static/homepage/education-icon.png",
    bgColor: "#F4D03F",
    path: "/pages/article/article-list",
  },
  {
    id: "survey",
    label: "我的问卷",
    icon: "/static/homepage/survey-icon.png",
    bgColor: "#58D68D",
    path: "/pages/health/list",
  },
  {
    id: "rating",
    label: "服务评价",
    icon: "/static/homepage/rating-icon.png",
    bgColor: "#5DADE2",
    path: "",
  },
]);

function handleItemClick(item) {
  // 聊天咨询需要选择咨询人
  if (item.needSelectConsultant) {
    if (!props.customers || props.customers.length === 0) {
      toast("请先添加档案");
      // 跳转到档案管理页面
      uni.navigateTo({
        url: `/pages/archive/archive-manage?corpId=${props.corpId}&teamId=${props.teamId}`,
      });
      return;
    }

    // 打开选择咨询人弹窗
    consultantPopup.value?.open();
    return;
  }

  // 其他功能直接跳转
  if (!item.path) {
    toast("功能开发中");
    return;
  }

  uni.navigateTo({
    url: item.path,
    fail: () => {
      toast("页面跳转失败");
    },
  });
}

// 确认选择咨询人
async function handleConsultantConfirm(customer) {
  console.log("选择的咨询人:", customer);
  // 调用创建咨询群组接口
  uni.showLoading({ title: "创建咨询中..." });
  try {
    const res = await api("createConsultGroup", {
      teamId: props.teamId,
      corpId: props.corpId,
      customerId: customer._id,
      customerImUserId: account.value.openid,
    });
    uni.hideLoading();
    if (res && res.success) {
      const { groupId, isExisting } = res.data;
      // 跳转到聊天页面
      uni.navigateTo({
        url: `/pages/message/index?conversationID=GROUP${groupId}&groupID=${groupId}`,
      });
    } else {
      toast(res?.message || "创建咨询失败");
    }
  } catch (error) {
    uni.hideLoading();
    console.error("创建咨询群组失败:", error);
    toast("创建咨询失败");
  }
}

// 新建档案
function handleAddNewArchive() {
  uni.navigateTo({
    url: `/pages/archive/edit-archive?corpId=${props.corpId}&teamId=${props.teamId}`,
  });
}
</script>

<style lang="scss" scoped>
.consult-container {
  padding: 32rpx;
  background: #fff;
  border-radius: 16rpx;
  margin: 24rpx;
}

.consult-title {
  font-size: 32rpx;
  font-weight: 600;
  color: #333;
  margin-bottom: 32rpx;
}

.consult-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24rpx;
}

.consult-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16rpx;
  cursor: pointer;
}

.item-icon {
  width: 96rpx;
  height: 96rpx;
  border-radius: 20rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.2s;
}

.consult-item:active .item-icon {
  transform: scale(0.95);
}

.icon-img {
  width: 56rpx;
  height: 56rpx;
}

.item-label {
  font-size: 28rpx;
  color: #333;
  text-align: center;
  font-weight: 600;
}
</style>