recycle-front/pages/subcomponent/faq.vue

<template>
  <view class="faq-page">
    <!-- 顶部导航栏 -->
    <view class="nav-bar">
      <view class="back-icon" @tap="navigateBack">
        <uni-icons type="left" size="20"></uni-icons>
      </view>
      <view class="title">常见问题</view>
    </view>

    <!-- 主要内容区域 -->
    <view class="content">
      <!-- 推广相关 -->
      <view class="section">
        <view class="section-title">推广相关</view>
        <view class="qa-list">
          <view class="qa-item">
            <text class="question">
              <text class="q-icon">Q</text>
              如何申请成为推广官？
            </text>
            <text class="answer">您好！如需帮助，请优先选择以下方式联系我们。</text>
          </view>
          <view class="qa-item">
            <text class="question">
              <text class="q-icon">Q</text>
              推广官的佣金如何计算？
            </text>
            <text class="answer">您好！如需帮助，请优先选择以下方式联系我们。</text>
          </view>
        </view>
      </view>

      <!-- 订单回收相关 -->
      <view class="section">
        <view class="section-title">订单回收相关</view>
        <view class="qa-list">
          <view class="qa-item">
            <text class="question">
              <text class="q-icon">Q</text>
              为什么我的订单显示"回收失败"？
            </text>
            <text class="answer">您好！如需帮助，请优先选择以下方式联系我们。</text>
          </view>
          <view class="qa-item">
            <text class="question">
              <text class="q-icon">Q</text>
              如果我的订单出现问题怎么办？
            </text>
            <text class="answer">您好！如需帮助，请优先选择以下方式联系我们。</text>
          </view>
        </view>
      </view>

      <!-- 环保相关 -->
      <view class="section">
        <view class="section-title">环保相关</view>
        <view class="qa-list">
          <view class="qa-item">
            <text class="question">
              <text class="q-icon">Q</text>
              回收的旧衣如何处理？
            </text>
            <text class="answer">您好！如需帮助，请优先选择以下方式联系我们。</text>
          </view>
          <view class="qa-item">
            <text class="question">
              <text class="q-icon">Q</text>
              哪些衣物可以回收？
            </text>
            <text class="answer">您好！如需帮助，请优先选择以下方式联系我们。</text>
          </view>
        </view>
      </view>

      <!-- 底部提示 -->
      <view class="bottom-tip">
        如有任何问题或建议，请随时与我们联系，我们将竭诚为您服务！
      </view>
    </view>

    <!-- 底部按钮 -->
    <view class="bottom-btn">
      <button class="online-service-btn" @tap="openEmailPopup">联系在线客服</button>
    </view>
  </view>
  <email-popup 
    :show="showEmailPopup" 
    @close="handleCloseEmailPopup"
  />
</template>

<script>
	import emailPopup from '@/wxcomponents/email-popup/email-popup.vue'
	import pullRefreshMixin from '@/pages/mixins/pullRefreshMixin.js'
	
export default {
	components: {
	   emailPopup
	},
	mixins: [pullRefreshMixin],
  data() {
    return {
		showEmailPopup:false
    }
  },
  methods: {
    async onRefresh() {
      // 模拟刷新数据
      await new Promise(resolve => setTimeout(resolve, 1000))
      uni.stopPullRefresh()
    },
	      // 显示弹窗
	      openEmailPopup() {
	        this.showEmailPopup = true
	      },
	      // 关闭弹窗
	      handleCloseEmailPopup() {
	        this.showEmailPopup = false
	      },
    navigateBack() {
      uni.navigateBack()
    },
    handleOnlineService() {
      // 跳转到联系客服页面
      uni.navigateTo({
        url: '/pages/customer-service/index'
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.faq-page {
  min-height: 100vh;
  background: linear-gradient(to bottom,#fff3da,5%,#ffffff);
  padding-bottom: calc(env(safe-area-inset-bottom) + 120rpx);
}

.nav-bar {
  display: flex;
  align-items: center;
  height: 88rpx;
  padding-top: var(--status-bar-height);

  .title {
    font-family: PingFang SC;
    font-weight: 500;
    font-size: 16px;
    line-height: 140%;
    letter-spacing: 0%;
    text-align: center;
    vertical-align: middle;
    color: #333;
    margin-left: 30%;
  }

  .back-icon {
    width: 88rpx;
    height: 88rpx;
    display: flex;
    align-items: center;
    justify-content: center;
  }
}

.content {
  padding: 40rpx 30rpx;
  background: #fff;
  width: 80%;
  margin: 0 auto;

  .section {
    margin-bottom: 60rpx;

    .section-title {
      font-family: PingFang SC;
      font-weight: 400;
      font-size: 14px;
      line-height: 22px;
      letter-spacing: 0%;
      color: #666;
      margin-bottom: 30rpx;
    }

    .qa-list {
      .qa-item {
        margin-bottom: 40rpx;

        .question {
          display: flex;
          align-items: center;
          font-family: PingFang SC;
          font-weight: 600;
          font-size: 18px;
          line-height: 140%;
          letter-spacing: 0%;
          color: #333;
          margin-bottom: 20rpx;

          .q-icon {
            color: #FFA500;
            font-weight: bold;
            margin-right: 16rpx;
          }
        }

        .answer {
          font-family: PingFang SC;
          font-weight: 400;
          font-size: 13px;
          line-height: 140%;
          letter-spacing: 0%;
          color: #999;
          // line-height: 1.6;
          padding-left: 40rpx;
        }
      }
    }
  }

  .bottom-tip {
    font-size: 26rpx;
    color: #999;
    text-align: center;
    line-height: 1.6;
    padding: 30rpx;
    border-top: 1rpx solid rgba(0, 0, 0, 0.05);
  }
}

.bottom-btn {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 20rpx 30rpx;
  padding-bottom: calc(20rpx + env(safe-area-inset-bottom));
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(10px);

  .online-service-btn {
    width: 100%;
    height: 88rpx;
    line-height: 88rpx;
    background: #FFA500;
    color: #fff;
    font-size: 32rpx;
    border-radius: 44rpx;
    border: none;
  }
}
</style>