aquagreen_wechat_app/src/subPackages/pages-common/helpCenter.vue

<template>
  <view class="sub-page">
    <TopBar title="帮助中心" show-back />

    <view class="px-4 pt-3">
      <!-- 角色提示 -->
      <view class="glass-card p-4">
        <view class="flex items-center">
          <view class="icon-chip mr-3">
            <text class="uni-icons uniui-person-filled chip-glyph"></text>
          </view>
          <view>
            <text class="meta-label">当前角色</text>
            <text class="role-text">{{ roleText }}</text>
          </view>
        </view>
      </view>

      <!-- 常见问题 -->
      <view class="glass-card">
        <view class="section-head">
          <view class="section-bar mr-2"></view>
          <text class="section-title flex-1">常见问题</text>
        </view>
        <view
          v-for="(faq, index) in roleFaqs"
          :key="faq.id"
          class="faq-row"
        >
          <view class="flex justify-between items-center" @click="toggleFaq(index)">
            <text class="faq-question flex-1 pr-2">{{ faq.question }}</text>
            <text
              class="uni-icons uniui-arrowdown faq-arrow transition-transform"
              :class="expandedIndex === index ? 'rotate-180' : ''"
            ></text>
          </view>
          <view v-if="expandedIndex === index" class="faq-answer">
            {{ faq.answer }}
          </view>
        </view>
      </view>

      <!-- 联系客服 -->
      <view class="glass-card">
        <view class="section-head">
          <view class="section-bar mr-2"></view>
          <text class="section-title flex-1">联系客服</text>
        </view>
        <view class="contact-row" hover-class="row-hover" :hover-start-time="0" :hover-stay-time="120" @click="makePhoneCall('400-888-8888')">
          <view class="flex items-center">
            <text class="uni-icons uniui-phone contact-icon mr-3"></text>
            <text class="contact-label">客服热线</text>
          </view>
          <text class="contact-value">400-888-8888</text>
        </view>
        <view class="contact-row">
          <view class="flex items-center">
            <text class="uni-icons uniui-email contact-icon mr-3"></text>
            <text class="contact-label">电子邮箱</text>
          </view>
          <text class="contact-plain">service@qingdaofu.com</text>
        </view>
        <view class="contact-row">
          <view class="flex items-center">
            <text class="uni-icons uniui-clock-filled contact-icon mr-3"></text>
            <text class="contact-label">服务时间</text>
          </view>
          <text class="contact-plain">9:00-18:00</text>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup lang="ts">
import { ref, computed } from 'vue'
import TopBar from '@/components/common/TopBar.vue'
import { useAuthStore } from '@/stores/auth'
import { useCommonStore } from '@/stores/common'
import { getRoleText } from '@/utils'

const authStore = useAuthStore()
const commonStore = useCommonStore()

const role = computed(() => authStore.userRole || 'sales')
const roleText = computed(() => getRoleText(role.value))

const roleFaqs = computed(() => {
  return commonStore.faqs.filter((faq) => faq.category === role.value || faq.category === 'common')
})

const expandedIndex = ref<number | null>(null)

function toggleFaq(index: number) {
  expandedIndex.value = expandedIndex.value === index ? null : index
}

function makePhoneCall(phone: string) {
  uni.makePhoneCall({ phoneNumber: phone })
}
</script>

<style scoped>
.sub-page {
  max-width: 430px;
  margin: 0 auto;
  min-height: 100vh;
  background-color: #f6fbf9;
  padding-bottom: 24px;
}

.glass-card {
  background-color: rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid rgba(164, 216, 152, 0.35);
  border-radius: 24px;
  box-shadow: 0 18px 50px -12px rgba(54, 143, 111, 0.28);
  overflow: hidden;
  margin-bottom: 12px;
}

.icon-chip {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: rgba(164, 216, 152, 0.2);
}

.chip-glyph {
  font-size: 20px;
  color: #368f6f;
}

.meta-label {
  display: block;
  font-size: 12px;
  color: #9ca3af;
}

.role-text {
  display: block;
  font-size: 16px;
  font-weight: 700;
  color: #1f2937;
}

.section-head {
  display: flex;
  align-items: center;
  padding: 16px 16px 12px;
}

.section-bar {
  width: 4px;
  height: 16px;
  border-radius: 2px;
  background: linear-gradient(180deg, #368f6f 0%, #5ab8d0 100%);
}

.section-title {
  font-size: 16px;
  font-weight: 700;
  color: #1f2937;
}

.faq-row {
  padding: 13px 16px;
  border-top: 1px solid rgba(164, 216, 152, 0.18);
}

.faq-question {
  font-size: 14px;
  color: #4b5563;
}

.faq-arrow {
  font-size: 12px;
  color: #9ca3af;
}

.faq-answer {
  margin-top: 10px;
  padding: 10px 12px;
  border-radius: 12px;
  font-size: 13px;
  line-height: 1.7;
  color: #6b7280;
  background-color: rgba(164, 216, 152, 0.12);
}

.contact-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 13px 16px;
  border-top: 1px solid rgba(164, 216, 152, 0.18);
}

.row-hover {
  background-color: rgba(164, 216, 152, 0.1);
}

.contact-icon {
  font-size: 16px;
  color: #368f6f;
}

.contact-label {
  font-size: 14px;
  color: #4b5563;
}

.contact-value {
  font-size: 14px;
  font-weight: 600;
  color: #368f6f;
}

.contact-plain {
  font-size: 14px;
  color: #6b7280;
}
</style>