ai_uniapp_v2/pages/my/contact.vue

<template>
  <view class="wrap">
    <view class="hero-card">
      <text class="eyebrow">CONTACT US</text>
      <text class="hero-title">联系我们</text>
      <text class="hero-desc">使用问题、商业合作都可以通过下面的方式找到我们。</text>
    </view>

    <view class="ct-card">
      <view v-for="item in contacts" :key="item.key" class="row" @click="copy(item.value)">
        <view class="row-copy">
          <text class="row-label">{{ item.label }}</text>
          <text class="row-value">{{ item.value }}</text>
        </view>
        <view class="row-btn">复制</view>
      </view>
    </view>

    <!-- 微信客服会话只有小程序端有 -->
    <!-- #ifdef MP-WEIXIN -->
    <view class="ct-card">
      <view class="row-copy">
        <text class="row-label">在线客服</text>
        <text class="row-value light">工作日 09:00 - 18:00 在线，其他时段留言也会回复</text>
      </view>
      <button class="service-btn" open-type="contact" session-from="mp_contact">
        进入客服中心
      </button>
    </view>
    <!-- #endif -->

    <view class="tip-card">
      <text class="tip-title">反馈更快被处理的小技巧</text>
      <text class="tip-line">· 描述问题时带上出现的页面与操作步骤</text>
      <text class="tip-line">· 附上问题截图，我们能更快复现</text>
      <text class="tip-line">· 也可以直接在「意见反馈」里提交，会同步给我们</text>
      <view class="tip-link" @click="goFeedback">去意见反馈</view>
    </view>
  </view>
</template>

<script setup>
import { useApp } from '@/utils/useApp.js'

const { toast } = useApp()

// 邮箱与旧版保持一致
const contacts = [
  { key: 'contact', label: '联系邮箱', value: 'contact@aionline.cc' },
  { key: 'market', label: '商业合作', value: 'market@aionline.cc' }
]

function copy(content) {
  uni.setClipboardData({
    data: content,
    success: () => toast('已复制'),
    fail: () => toast('复制失败')
  })
}

function goFeedback() {
  uni.navigateTo({ url: '/pages/my/feedback' })
}
</script>

<style lang="scss" scoped>
.wrap {
  min-height: 100vh;
  padding: 24rpx 28rpx 60rpx;
  background: #f3f7fb;
  box-sizing: border-box;
}

.hero-card {
  padding: 32rpx;
  border-radius: 26rpx;
  background: linear-gradient(135deg, #1f8cff, #41b9ff);
}
.eyebrow { display: block; color: rgba(255, 255, 255, 0.75); font-size: 21rpx; font-weight: 800; }
.hero-title { display: block; margin-top: 12rpx; color: #fff; font-size: 40rpx; font-weight: 900; }
.hero-desc {
  display: block;
  margin-top: 12rpx;
  color: rgba(255, 255, 255, 0.85);
  font-size: 23rpx;
  line-height: 1.5;
}

/* 类名带 ct- 前缀，避开全局 .card 的 margin/box-shadow */
.ct-card {
  margin-top: 22rpx;
  padding: 28rpx;
  border-radius: 24rpx;
  background: #fff;
}

.row {
  display: flex;
  align-items: center;
  gap: 20rpx;
  padding: 16rpx 0;
}
.row + .row { border-top: 2rpx solid #f1f5fa; }
.row-copy { flex: 1; min-width: 0; }
.row-label { display: block; color: #8a95a6; font-size: 23rpx; }
.row-value {
  display: block;
  margin-top: 8rpx;
  color: #172033;
  font-size: 29rpx;
  font-weight: 800;
  word-break: break-all;
}
.row-value.light { color: #7f8896; font-size: 24rpx; font-weight: 400; line-height: 1.5; }
.row-btn {
  flex-shrink: 0;
  height: 60rpx;
  padding: 0 24rpx;
  border-radius: 999rpx;
  color: #1f8cff;
  background: #eef7ff;
  font-size: 24rpx;
  font-weight: 800;
  line-height: 60rpx;
}

.service-btn {
  margin-top: 22rpx;
  height: 84rpx;
  border-radius: 999rpx;
  color: #fff;
  background: linear-gradient(135deg, #1f8cff, #41b9ff);
  font-size: 28rpx;
  font-weight: 800;
  line-height: 84rpx;
  border: none;

  &::after { border: none; }
}

.tip-card {
  margin-top: 22rpx;
  padding: 28rpx;
  border-radius: 24rpx;
  background: #fff;
}
.tip-title { display: block; margin-bottom: 12rpx; color: #172033; font-size: 28rpx; font-weight: 800; }
.tip-line {
  display: block;
  margin-top: 8rpx;
  color: #7f8896;
  font-size: 23rpx;
  line-height: 1.6;
}
.tip-link {
  margin-top: 20rpx;
  height: 72rpx;
  border-radius: 999rpx;
  color: #1f8cff;
  background: #eef7ff;
  font-size: 26rpx;
  font-weight: 800;
  line-height: 72rpx;
  text-align: center;
}
</style>