cfc/cfc-frontend/pages/discover/create-circle.vue

<template>
  <view class="create-circle-page" :style="{ '--font-scale': fontScale }">
    <view class="nav-bar">
      <view class="nav-back" @tap="goBack"><text class="nav-back-icon">‹</text></view>
      <text class="nav-title">创建圈子</text>
      <view class="nav-placeholder"></view>
    </view>

    <scroll-view class="content" scroll-y>
      <view class="form-card">
        <view class="form-item">
          <text class="form-label">圈子名称 <text class="required">*</text></text>
          <input class="form-input" placeholder="给圈子起个名字" v-model="form.name" maxlength="30" />
        </view>
        <view class="form-item">
          <text class="form-label">圈子类型</text>
          <view class="type-grid">
            <view class="type-opt" :class="{ 'type-active': form.type === t.value }" v-for="t in circleTypes" :key="t.value" @tap="form.type = t.value">
              <text class="to-icon">{{ t.icon }}</text>
              <text class="to-label">{{ t.label }}</text>
            </view>
          </view>
        </view>
        <view class="form-item">
          <text class="form-label">圈子描述</text>
          <textarea class="form-textarea" placeholder="简单介绍一下这个圈子..." v-model="form.description" maxlength="200" />
        </view>
        <view class="form-item">
          <text class="form-label">加入方式</text>
          <view class="join-options">
            <view class="join-opt" :class="{ 'join-active': form.joinCondition === 0 }" @tap="form.joinCondition = 0">
              <text class="jo-icon">🌐</text>
              <text class="jo-label">公开加入</text>
              <text class="jo-desc">任何人都可以加入</text>
            </view>
            <view class="join-opt" :class="{ 'join-active': form.joinCondition === 1 }" @tap="form.joinCondition = 1">
              <text class="jo-icon">🔒</text>
              <text class="jo-label">需审核</text>
              <text class="jo-desc">管理员审核后加入</text>
            </view>
            <view class="join-opt" :class="{ 'join-active': form.joinCondition === 2 }" @tap="form.joinCondition = 2">
              <text class="jo-icon">🔗</text>
              <text class="jo-label">邀请制</text>
              <text class="jo-desc">仅邀请可加入</text>
            </view>
          </view>
        </view>
        <view class="form-item">
          <view class="switch-row">
            <text class="form-label">公开可见</text>
            <switch :checked="form.isPublic === 1" :color="bodyColor" @change="form.isPublic = $event.detail.value ? 1 : 0" />
          </view>
          <text class="switch-desc">其他用户可以在发现页看到此圈子</text>
        </view>
      </view>

      <view class="bottom-space"></view>
    </scroll-view>

    <view class="fixed-bottom">
      <button class="btn-create" :disabled="!form.name.trim()" @tap="handleCreate">创建圈子</button>
    </view>
  </view>
</template>

<script>
import { BrandColors } from '@/utils/brand-colors.js'
import { createGeneralCircle } from '@/utils/api.js'
import fontScaleMixin from '@/mixins/font-scale.js'

export default {
  mixins: [fontScaleMixin],
  data: function() {
    return {
      bodyColor: BrandColors.body,
      form: {
        name: '',
        type: 'topic',
        description: '',
        joinCondition: 0,
        isPublic: 1
      },
      circleTypes: [
        { value: 'topic', label: '话题', icon: '💬' },
        { value: 'activity', label: '活动', icon: '🎯' },
        { value: 'hobby', label: '爱好', icon: '🎨' },
        { value: 'health', label: '健康', icon: '💪' },
        { value: 'ability', label: '能力', icon: '🧠' },
        { value: 'product', label: '商品', icon: '🛒' }
      ]
    }
  },
  methods: {
    goBack: function() {
      uni.navigateBack()
    },
    handleCreate: function() {
      var self = this
      if (!self.form.name.trim()) return
      var memberId = uni.getStorageSync('currentChildId') || ''
      if (!memberId) {
        uni.showToast({ title: '请先登录', icon: 'none' })
        return
      }
      uni.showLoading({ title: '创建中...' })
      createGeneralCircle({
        name: self.form.name.trim(),
        type: self.form.type,
        description: self.form.description,
        joinCondition: self.form.joinCondition,
        isPublic: self.form.isPublic,
        creatorId: memberId,
        creatorType: 'child'
      }).then(function(res) {
        uni.hideLoading()
        if (res.code === 200 && res.data) {
          uni.showToast({ title: '创建成功', icon: 'success' })
          setTimeout(function() {
            uni.redirectTo({ url: '/pages/discover/circle-feed?circleId=' + res.data.id + '&name=' + encodeURIComponent(self.form.name) + '&memberCount=1' })
          }, 1000)
        } else {
          uni.showToast({ title: res.message || '创建失败', icon: 'none' })
        }
      }).catch(function() {
        uni.hideLoading()
        uni.showToast({ title: '创建失败，请重试', icon: 'none' })
      })
    }
  }
}
</script>

<style scoped lang="scss">
.create-circle-page { min-height: 100vh; background: $app-bg; padding-bottom: 160rpx; }
.nav-bar {
  display: flex; align-items: center; justify-content: space-between;
  height: 88rpx; padding-top: env(safe-area-inset-top);
  background: $app-surface; position: sticky; top: 0; z-index: 100;
  border-bottom: 1rpx solid $facade-fill;
}
.nav-back { width: 80rpx; padding-left: 24rpx; }
.nav-back-icon { font-size: calc(48rpx * var(--font-scale, 1)); color: $facade-text-strong; }
.nav-title { font-size: calc(32rpx * var(--font-scale, 1)); font-weight: 600; color: $facade-text-strong; }
.nav-placeholder { width: 80rpx; }
.content { padding: 24rpx 32rpx; }
.form-card { background: $app-surface; border-radius: 24rpx; padding: 24rpx; }
.form-item { padding: 24rpx 0; border-bottom: 1rpx solid $facade-fill-2; }
.form-item:last-child { border-bottom: none; }
.form-label { font-size: calc(28rpx * var(--font-scale, 1)); font-weight: 600; color: $facade-text-strong; display: block; margin-bottom: 16rpx; }
.required { color: $mat-red; }
.form-input {
  width: 100%; height: 72rpx; background: $facade-fill-2; border-radius: 16rpx;
  padding: 0 20rpx; font-size: calc(28rpx * var(--font-scale, 1)); box-sizing: border-box;
}
.form-textarea {
  width: 100%; height: 160rpx; background: $facade-fill-2; border-radius: 16rpx;
  padding: 16rpx 20rpx; font-size: calc(26rpx * var(--font-scale, 1)); line-height: 1.6; box-sizing: border-box;
}
.type-grid { display: flex; flex-wrap: wrap; }
.type-opt {
  display: flex; flex-direction: column; align-items: center;
  padding: 20rpx 28rpx; margin-right: 16rpx; margin-bottom: 16rpx;
  background: $facade-fill-2; border-radius: 16rpx; border: 2rpx solid transparent;
}
.type-active { border-color: $dim-body; background: $warm-peach; }
.to-icon { font-size: calc(40rpx * var(--font-scale, 1)); margin-bottom: 8rpx; }
.to-label { font-size: calc(24rpx * var(--font-scale, 1)); color: $facade-text-body; }
.join-options { display: flex; flex-direction: column; }
.join-opt {
  display: flex; align-items: center; padding: 20rpx;
  background: $facade-fill-ghost; border-radius: 16rpx; border: 2rpx solid transparent;
}
.join-active { border-color: $dim-body; background: $dim-body-tint; }
.jo-icon { font-size: calc(36rpx * var(--font-scale, 1)); margin-right: 16rpx; }
.jo-label { font-size: calc(26rpx * var(--font-scale, 1)); font-weight: 600; color: $facade-text-strong; margin-right: 16rpx; }
.jo-desc { font-size: calc(22rpx * var(--font-scale, 1)); color: $facade-text-muted; }
.switch-row { display: flex; align-items: center; justify-content: space-between; }
.switch-desc { font-size: calc(22rpx * var(--font-scale, 1)); color: $facade-text-muted; margin-top: 8rpx; display: block; }
.fixed-bottom {
  position: fixed; bottom: 0; left: 0; right: 0;
  padding: 20rpx 32rpx; padding-bottom: calc(20rpx + env(safe-area-inset-bottom));
  background: $app-surface; border-top: 1rpx solid $facade-fill;
}
.btn-create {
  background: linear-gradient(135deg, $dim-body, $dim-body-light);
  color: $app-surface; border: none; border-radius: 24rpx;
  font-size: calc(30rpx * var(--font-scale, 1)); font-weight: 600; padding: 24rpx 0;
}
.btn-create[disabled] { opacity: 0.4; }
.bottom-space { height: 40rpx; }
</style>