Initial commit

miniprogram/pages/post/post.json

@@ -0,0 +1,4 @@
+{
+  "navigationStyle": "custom",
+  "usingComponents": {}
+}

miniprogram/pages/post/post.ts

@@ -0,0 +1,196 @@
+import { api } from '../../utils/api'
+import { chooseAndUploadMedia } from '../../utils/auth'
+import { MOOD_OPTIONS, HOT_HASHTAGS } from '../../utils/constants'
+import { getPetEmoji } from '../../utils/format'
+
+const app = getApp<{ userInfo: any; currentLocation: any }>()
+
+Page({
+  data: {
+    statusBarHeight: 0,
+    content: '',
+    images: [] as any[],
+    location: null as any,
+    selectedPetId: '',
+    selectedHashtags: [] as string[],
+    hashtagInput: '',
+    selectedMood: '',
+    moods: MOOD_OPTIONS,
+    hotHashtags: HOT_HASHTAGS.slice(0, 6),
+    myPets: [] as any[],
+    submitting: false,
+    canSubmit: false,
+  },
+
+  onLoad() {
+    const info = wx.getSystemInfoSync()
+    this.setData({ statusBarHeight: info.statusBarHeight })
+    this.loadMyPets()
+    this.autoGetLocation()
+  },
+
+  loadMyPets() {
+    const user = app.globalData?.userInfo
+    if (!user?.pets?.length) return
+    const pets = user.pets.map((p: any) => ({
+      ...p,
+      emoji: getPetEmoji(p.species, p.breed),
+    }))
+    this.setData({
+      myPets: pets,
+      selectedPetId: pets[0]?._id || '',
+    })
+  },
+
+  autoGetLocation() {
+    const loc = app.globalData?.currentLocation
+    if (!loc) return
+    wx.reverseGeocoder({
+      location: { longitude: loc.longitude, latitude: loc.latitude },
+      success: (res: any) => {
+        const name = res.result?.address || ''
+        if (name) {
+          this.setData({
+            location: { name, latitude: loc.latitude, longitude: loc.longitude },
+          })
+          this.checkCanSubmit()
+        }
+      },
+      fail: () => {},
+    } as any)
+  },
+
+  onContentInput(e: WechatMiniprogram.CustomEvent) {
+    this.setData({ content: e.detail.value })
+    this.checkCanSubmit()
+  },
+
+  checkCanSubmit() {
+    const { content, images } = this.data
+    this.setData({ canSubmit: content.trim().length > 0 || images.length > 0 })
+  },
+
+  async onChooseImage() {
+    try {
+      const fileIDs = await chooseAndUploadMedia(9 - this.data.images.length)
+      const newImages = fileIDs.map(id => ({ fileID: id, tempPath: id }))
+      this.setData({ images: [...this.data.images, ...newImages] })
+      this.checkCanSubmit()
+    } catch (e: any) {
+      if (e?.errMsg?.includes('cancel')) return
+      wx.showToast({ title: '上传失败', icon: 'none' })
+    }
+  },
+
+  onRemoveImage(e: WechatMiniprogram.CustomEvent) {
+    const idx = e.currentTarget.dataset.idx as number
+    const images = [...this.data.images]
+    images.splice(idx, 1)
+    this.setData({ images })
+    this.checkCanSubmit()
+  },
+
+  onPreviewImage(e: WechatMiniprogram.CustomEvent) {
+    const idx = e.currentTarget.dataset.idx as number
+    wx.previewImage({
+      current: this.data.images[idx]?.tempPath || this.data.images[idx],
+      urls: this.data.images.map((img: any) => img.tempPath || img),
+    })
+  },
+
+  onChooseLocation() {
+    wx.chooseLocation({
+      success: res => {
+        this.setData({
+          location: {
+            name: res.name || res.address,
+            latitude: res.latitude,
+            longitude: res.longitude,
+          },
+        })
+      },
+      fail: () => {},
+    })
+  },
+
+  onRemoveLocation() {
+    this.setData({ location: null })
+  },
+
+  onSelectPet(e: WechatMiniprogram.CustomEvent) {
+    const id = e.currentTarget.dataset.id as string
+    this.setData({ selectedPetId: this.data.selectedPetId === id ? '' : id })
+  },
+
+  onHashtagInput(e: WechatMiniprogram.CustomEvent) {
+    this.setData({ hashtagInput: e.detail.value })
+  },
+
+  onAddHashtag() {
+    let tag = this.data.hashtagInput.trim().replace(/^#/, '')
+    if (!tag) return
+    const tags = [...this.data.selectedHashtags]
+    if (!tags.includes(tag) && tags.length < 5) {
+      tags.push(tag)
+    }
+    this.setData({ selectedHashtags: tags, hashtagInput: '' })
+  },
+
+  onRemoveHashtag(e: WechatMiniprogram.CustomEvent) {
+    const idx = e.currentTarget.dataset.idx as number
+    const tags = [...this.data.selectedHashtags]
+    tags.splice(idx, 1)
+    this.setData({ selectedHashtags: tags })
+  },
+
+  onHotTag(e: WechatMiniprogram.CustomEvent) {
+    const tag = (e.currentTarget.dataset.tag as string).replace(/^#/, '')
+    const tags = [...this.data.selectedHashtags]
+    if (!tags.includes(tag) && tags.length < 5) {
+      tags.push(tag)
+      this.setData({ selectedHashtags: tags })
+    }
+  },
+
+  onSelectMood(e: WechatMiniprogram.CustomEvent) {
+    const val = e.currentTarget.dataset.val as string
+    this.setData({ selectedMood: this.data.selectedMood === val ? '' : val })
+  },
+
+  async onSubmit() {
+    if (!this.data.canSubmit || this.data.submitting) return
+    this.setData({ submitting: true })
+
+    try {
+      const moodLabel = MOOD_OPTIONS.find(m => m.value === this.data.selectedMood)?.label
+      await api.createPost({
+        content: this.data.content.trim(),
+        images: this.data.images.map((img: any) => img.fileID || img),
+        location: this.data.location,
+        hashtags: this.data.selectedHashtags.map(t => `#${t}`),
+        mood: moodLabel,
+        petId: this.data.selectedPetId || undefined,
+      })
+
+      wx.showToast({ title: '发布成功！', icon: 'success' })
+      setTimeout(() => wx.navigateBack(), 1200)
+    } catch {
+      wx.showToast({ title: '发布失败，请重试', icon: 'none' })
+      this.setData({ submitting: false })
+    }
+  },
+
+  onCancel() {
+    if (this.data.content || this.data.images.length > 0) {
+      wx.showModal({
+        title: '放弃编辑？',
+        content: '内容将不会保存',
+        confirmText: '放弃',
+        cancelText: '继续',
+        success: res => { if (res.confirm) wx.navigateBack() },
+      })
+    } else {
+      wx.navigateBack()
+    }
+  },
+})

miniprogram/pages/post/post.wxml

@@ -0,0 +1,136 @@
+<view class="post-page">
+  <view class="safe-top" style="height: {{statusBarHeight}}px"></view>
+
+  <!-- 顶部导航 -->
+  <view class="post-header">
+    <view class="cancel-btn" bindtap="onCancel">取消</view>
+    <view class="header-title">发布动态</view>
+    <view class="submit-btn {{canSubmit ? '' : 'submit-disabled'}}" bindtap="onSubmit">
+      {{submitting ? '发布中...' : '发布'}}
+    </view>
+  </view>
+
+  <scroll-view scroll-y="true" class="post-scroll" enhanced="true" show-scrollbar="false">
+    <view class="post-body">
+
+      <!-- 图片上传区 -->
+      <view class="upload-section">
+        <view wx:if="{{images.length === 0}}" class="upload-placeholder" bindtap="onChooseImage">
+          <view class="upload-icon">📷</view>
+          <text class="upload-hint">点击添加图片或视频</text>
+          <text class="upload-sub">最多9张</text>
+        </view>
+
+        <view wx:else class="image-grid">
+          <view
+            wx:for="{{images}}"
+            wx:key="index"
+            class="image-item"
+            bindtap="onPreviewImage"
+            data-idx="{{index}}"
+          >
+            <image class="img-preview" src="{{item.tempPath || item}}" mode="aspectFill" />
+            <view class="img-remove" catchtap="onRemoveImage" data-idx="{{index}}">×</view>
+            <view wx:if="{{item.uploading}}" class="img-uploading">
+              <view class="upload-spinner"></view>
+            </view>
+          </view>
+          <view wx:if="{{images.length < 9}}" class="image-add" bindtap="onChooseImage">
+            <text class="add-plus">+</text>
+          </view>
+        </view>
+      </view>
+
+      <!-- 文字输入 -->
+      <textarea
+        class="content-input"
+        placeholder="分享你和毛孩子的今天 🐾"
+        placeholder-class="input-placeholder"
+        value="{{content}}"
+        bindinput="onContentInput"
+        maxlength="500"
+        auto-height="true"
+        show-confirm-bar="false"
+        adjust-position="true"
+        cursor-spacing="120"
+      />
+      <view class="word-count">{{content.length}}/500</view>
+
+      <!-- 位置标签 -->
+      <view class="section-title">📍 位置</view>
+      <view class="tag-row">
+        <view
+          class="tag-pill {{location ? 'tag-selected' : ''}}"
+          bindtap="onChooseLocation"
+        >
+          <text>{{location ? location.name : '添加位置'}}</text>
+        </view>
+        <view wx:if="{{location}}" class="tag-remove" bindtap="onRemoveLocation">×</view>
+      </view>
+
+      <!-- 关联宠物 -->
+      <view class="section-title">🐾 关联宠物</view>
+      <view class="tag-row">
+        <view
+          wx:for="{{myPets}}"
+          wx:key="_id"
+          class="tag-pill {{selectedPetId === item._id ? 'tag-selected' : ''}}"
+          bindtap="onSelectPet"
+          data-id="{{item._id}}"
+        >
+          <text>{{item.emoji}} {{item.name}}</text>
+        </view>
+      </view>
+
+      <!-- 话题标签 -->
+      <view class="section-title">🏷 话题</view>
+      <view class="hashtag-wrap">
+        <view class="hashtag-input-row">
+          <input
+            class="hashtag-input"
+            placeholder="输入话题..."
+            value="{{hashtagInput}}"
+            bindinput="onHashtagInput"
+            bindconfirm="onAddHashtag"
+            maxlength="20"
+          />
+          <view class="hashtag-add-btn" bindtap="onAddHashtag">添加</view>
+        </view>
+        <view class="tag-row" style="margin-top: 16rpx;">
+          <view
+            wx:for="{{selectedHashtags}}"
+            wx:key="index"
+            class="hashtag-chip"
+          >
+            <text>#{{item}}</text>
+            <text class="chip-remove" catchtap="onRemoveHashtag" data-idx="{{index}}">×</text>
+          </view>
+        </view>
+        <view class="hot-tags">
+          <text class="hot-tags-label">热门：</text>
+          <view
+            wx:for="{{hotHashtags}}"
+            wx:key="index"
+            class="hot-tag"
+            bindtap="onHotTag"
+            data-tag="{{item}}"
+          >{{item}}</view>
+        </view>
+      </view>
+
+      <!-- 心情 -->
+      <view class="section-title">😊 心情</view>
+      <view class="mood-row">
+        <view
+          wx:for="{{moods}}"
+          wx:key="value"
+          class="mood-pill {{selectedMood === item.value ? 'mood-on' : ''}}"
+          bindtap="onSelectMood"
+          data-val="{{item.value}}"
+        >{{item.label}}</view>
+      </view>
+
+      <view style="height: 60rpx;"></view>
+    </view>
+  </scroll-view>
+</view>

miniprogram/pages/post/post.wxss

@@ -0,0 +1,324 @@
+.post-page {
+  min-height: 100vh;
+  background: linear-gradient(180deg, #fff8f2 0%, #fff4fb 100%);
+  display: flex;
+  flex-direction: column;
+}
+
+/* 顶部 */
+.post-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 16rpx 28rpx;
+  border-bottom: 1rpx solid rgba(255, 255, 255, 0.72);
+  background: rgba(255, 255, 255, 0.60);
+  flex-shrink: 0;
+}
+
+.cancel-btn {
+  font-size: 28rpx;
+  font-weight: 700;
+  color: #9b8fa8;
+  padding: 10rpx;
+}
+
+.header-title {
+  font-size: 32rpx;
+  font-weight: 900;
+  color: #272235;
+}
+
+.submit-btn {
+  background: linear-gradient(135deg, #ff4f91, #ff9f1c);
+  color: #fff;
+  border-radius: 999rpx;
+  padding: 14rpx 34rpx;
+  font-size: 26rpx;
+  font-weight: 900;
+  box-shadow: 0 10rpx 22rpx rgba(255, 79, 145, 0.28);
+}
+
+.submit-disabled {
+  background: #e8e4f0;
+  color: #9b8fa8;
+  box-shadow: none;
+}
+
+/* 滚动区 */
+.post-scroll { flex: 1; }
+
+.post-body { padding: 24rpx 28rpx; }
+
+/* 图片上传 */
+.upload-section {
+  margin-bottom: 28rpx;
+}
+
+.upload-placeholder {
+  width: 100%;
+  height: 320rpx;
+  background: linear-gradient(135deg, #fff0a8, #ffd6e8 48%, #c9f7df);
+  border: 3rpx dashed rgba(39, 34, 53, 0.18);
+  border-radius: 48rpx;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 16rpx;
+  box-shadow: inset 0 0 0 2rpx rgba(255, 255, 255, 0.65), 0 16rpx 32rpx rgba(83, 62, 100, 0.09);
+}
+
+.upload-icon { font-size: 64rpx; }
+
+.upload-hint {
+  font-size: 28rpx;
+  font-weight: 800;
+  color: #272235;
+}
+
+.upload-sub {
+  font-size: 22rpx;
+  color: #9b8fa8;
+}
+
+/* 图片网格 */
+.image-grid {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  gap: 12rpx;
+}
+
+.image-item {
+  aspect-ratio: 1;
+  border-radius: 20rpx;
+  overflow: hidden;
+  position: relative;
+}
+
+.img-preview {
+  width: 100%;
+  height: 100%;
+  background: #f0eef5;
+}
+
+.img-remove {
+  position: absolute;
+  top: 6rpx;
+  right: 6rpx;
+  width: 44rpx;
+  height: 44rpx;
+  border-radius: 50%;
+  background: rgba(39, 34, 53, 0.72);
+  color: #fff;
+  font-size: 28rpx;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-weight: 700;
+}
+
+.img-uploading {
+  position: absolute;
+  inset: 0;
+  background: rgba(255, 255, 255, 0.7);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.upload-spinner {
+  width: 40rpx;
+  height: 40rpx;
+  border: 4rpx solid rgba(255, 79, 145, 0.2);
+  border-top-color: #ff4f91;
+  border-radius: 50%;
+  animation: spin 0.8s linear infinite;
+}
+
+@keyframes spin { to { transform: rotate(360deg); } }
+
+.image-add {
+  aspect-ratio: 1;
+  border-radius: 20rpx;
+  background: rgba(255, 255, 255, 0.72);
+  border: 3rpx dashed rgba(39, 34, 53, 0.18);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.add-plus {
+  font-size: 60rpx;
+  color: #9b8fa8;
+  font-weight: 200;
+}
+
+/* 文字输入 */
+.content-input {
+  width: 100%;
+  min-height: 160rpx;
+  background: rgba(255, 255, 255, 0.80);
+  border: 1rpx solid rgba(255, 255, 255, 0.72);
+  border-radius: 36rpx;
+  padding: 24rpx 28rpx;
+  font-size: 30rpx;
+  color: #272235;
+  font-family: "PingFang SC", sans-serif;
+  line-height: 1.6;
+  box-shadow: 0 10rpx 24rpx rgba(78, 56, 96, 0.07);
+  margin-bottom: 8rpx;
+}
+
+.input-placeholder { color: #c4b8d0; }
+
+.word-count {
+  text-align: right;
+  font-size: 22rpx;
+  color: #9b8fa8;
+  margin-bottom: 28rpx;
+}
+
+/* 通用 section */
+.section-title {
+  font-size: 24rpx;
+  font-weight: 900;
+  color: #9b8fa8;
+  letter-spacing: 0.5rpx;
+  margin-bottom: 14rpx;
+  text-transform: uppercase;
+}
+
+.tag-row {
+  display: flex;
+  gap: 14rpx;
+  flex-wrap: wrap;
+  margin-bottom: 28rpx;
+  align-items: center;
+}
+
+.tag-pill {
+  display: flex;
+  align-items: center;
+  gap: 10rpx;
+  background: rgba(255, 255, 255, 0.78);
+  border: 1rpx solid rgba(255, 255, 255, 0.72);
+  border-radius: 999rpx;
+  padding: 14rpx 24rpx;
+  font-size: 26rpx;
+  font-weight: 800;
+  color: #6a6178;
+}
+
+.tag-selected {
+  background: #ffe5f0;
+  border-color: #ffb6d0;
+  color: #a91d5b;
+}
+
+.tag-remove {
+  width: 44rpx;
+  height: 44rpx;
+  border-radius: 50%;
+  background: #ffe5f0;
+  color: #ff4f91;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 28rpx;
+  font-weight: 700;
+}
+
+/* 话题 */
+.hashtag-wrap { margin-bottom: 28rpx; }
+
+.hashtag-input-row {
+  display: flex;
+  gap: 14rpx;
+  align-items: center;
+}
+
+.hashtag-input {
+  flex: 1;
+  height: 72rpx;
+  background: rgba(255, 255, 255, 0.80);
+  border: 1rpx solid rgba(255, 255, 255, 0.72);
+  border-radius: 999rpx;
+  padding: 0 24rpx;
+  font-size: 26rpx;
+  color: #272235;
+}
+
+.hashtag-add-btn {
+  background: rgba(255, 255, 255, 0.80);
+  border: 1rpx solid rgba(255, 255, 255, 0.72);
+  border-radius: 999rpx;
+  padding: 14rpx 28rpx;
+  font-size: 26rpx;
+  font-weight: 800;
+  color: #272235;
+}
+
+.hashtag-chip {
+  display: inline-flex;
+  align-items: center;
+  gap: 8rpx;
+  font-size: 24rpx;
+  font-weight: 800;
+  color: #8b3cff;
+  background: #f0e8ff;
+  border-radius: 999rpx;
+  padding: 8rpx 16rpx;
+}
+
+.chip-remove {
+  font-size: 26rpx;
+  color: #8b3cff;
+  font-weight: 700;
+}
+
+.hot-tags {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 10rpx;
+  align-items: center;
+  margin-top: 14rpx;
+}
+
+.hot-tags-label {
+  font-size: 22rpx;
+  color: #9b8fa8;
+}
+
+.hot-tag {
+  font-size: 22rpx;
+  color: #9b8fa8;
+  background: rgba(255, 255, 255, 0.72);
+  border: 1rpx solid rgba(43, 37, 61, 0.10);
+  border-radius: 999rpx;
+  padding: 6rpx 16rpx;
+}
+
+/* 心情 */
+.mood-row {
+  display: flex;
+  gap: 14rpx;
+  flex-wrap: wrap;
+  margin-bottom: 28rpx;
+}
+
+.mood-pill {
+  background: rgba(255, 255, 255, 0.78);
+  border: 1rpx solid rgba(255, 255, 255, 0.72);
+  border-radius: 999rpx;
+  padding: 14rpx 26rpx;
+  font-size: 26rpx;
+  font-weight: 800;
+  color: #6a6178;
+}
+
+.mood-on {
+  background: #fff0a8;
+  border-color: #ffe15a;
+  color: #6f4b00;
+}