init

2025-01-03 17:32:02 +08:00
commit bec8d97242
576 changed files with 152154 additions and 0 deletions
@@ -0,0 +1,163 @@
+<template>
+  <view class="help-container">
+    <!-- 常见问题 -->
+    <view class="faq-list">
+      <view 
+        class="faq-item"
+        v-for="(item, index) in faqList"
+        :key="index"
+        @click="toggleFaq(index)"
+      >
+        <view class="faq-header">
+          <text class="question">{{ item.question }}</text>
+          <view class="arrow" :class="{ open: item.isOpen }"></view>
+        </view>
+        <view class="answer" v-show="item.isOpen">
+          {{ item.answer }}
+        </view>
+      </view>
+    </view>
+
+    <!-- 联系客服 -->
+    <view class="contact-card">
+      <view class="contact-title">联系客服</view>
+      <view class="contact-content">
+        <view class="contact-item">
+          <text class="label">客服电话</text>
+          <text class="value" @click="makePhoneCall">{{ contactInfo.phone }}</text>
+        </view>
+        <view class="contact-item">
+          <text class="label">服务时间</text>
+          <text class="value">{{ contactInfo.serviceTime }}</text>
+        </view>
+      </view>
+    </view>
+  </view>
+</template>
+
+<script>
+import { helpConfig } from '@/config/help'
+
+export default {
+  data() {
+    return {
+      faqList: helpConfig.faqList.map(item => ({
+        ...item,
+        isOpen: false
+      })),
+      contactInfo: helpConfig.contactInfo
+    }
+  },
+  methods: {
+    toggleFaq(index) {
+      this.faqList[index].isOpen = !this.faqList[index].isOpen
+    },
+    makePhoneCall() {
+      uni.makePhoneCall({
+        phoneNumber: this.contactInfo.phone
+      })
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.help-container {
+  min-height: 100vh;
+  background: #f8f8f8;
+  padding: 30rpx;
+
+  .faq-list {
+    background: #fff;
+    border-radius: 20rpx;
+    padding: 20rpx;
+    margin-bottom: 30rpx;
+    box-shadow: 0 4rpx 16rpx rgba(0,0,0,0.04);
+
+    .faq-item {
+      border-bottom: 1rpx solid #f5f5f5;
+      
+      &:last-child {
+        border-bottom: none;
+      }
+
+      .faq-header {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        padding: 30rpx 20rpx;
+
+        .question {
+          font-size: 30rpx;
+          color: #333;
+          flex: 1;
+          padding-right: 20rpx;
+        }
+
+        .arrow {
+          width: 16rpx;
+          height: 16rpx;
+          border-right: 4rpx solid #999;
+          border-bottom: 4rpx solid #999;
+          transform: rotate(45deg);
+          transition: all 0.3s;
+
+          &.open {
+            transform: rotate(-135deg);
+          }
+        }
+      }
+
+      .answer {
+        font-size: 28rpx;
+        color: #666;
+        line-height: 1.6;
+        padding: 0 20rpx 30rpx;
+        background: #f9f9f9;
+        border-radius: 10rpx;
+        margin: 0 20rpx 20rpx;
+      }
+    }
+  }
+
+  .contact-card {
+    background: #fff;
+    border-radius: 20rpx;
+    padding: 30rpx;
+    box-shadow: 0 4rpx 16rpx rgba(0,0,0,0.04);
+
+    .contact-title {
+      font-size: 32rpx;
+      color: #333;
+      font-weight: 500;
+      margin-bottom: 20rpx;
+      border-left: 8rpx solid #1976D2;
+      padding-left: 20rpx;
+    }
+
+    .contact-content {
+      .contact-item {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        padding: 20rpx 0;
+        
+        .label {
+          font-size: 28rpx;
+          color: #666;
+        }
+
+        .value {
+          font-size: 28rpx;
+          color: #333;
+          font-weight: 500;
+
+          &:active {
+            opacity: 0.7;
+          }
+        }
+      }
+    }
+  }
+}
+</style>