QSY-lvjuxcx/pkgService/lost_found_publish/lost_found_publish.vue

<template>
  <view class="lost-found-page tn-safe-area-inset-bottom">
    <tn-nav-bar
      :isBack="true"
      :bottomShadow="false"
      :backgroundColor="navBarBackgroundColor"
      :customBackStyle="navBarBackStyle"
      :fixed="true"
    >
      <view class="tn-text-bold tn-text-xl tn-color-black" :style="{ opacity: navTitleOpacity }">{{ $tr('失物拾物') }}</view>
    </tn-nav-bar>

    <scroll-view class="page-scroll" scroll-y :show-scrollbar="false" @scroll="handleScroll">
      <view class="page-content tn-padding" :style="{ paddingTop: vuex_custom_bar_height + 'px', paddingBottom: '220rpx' }">
        <view class="hero-header tn-margin-bottom-xl">
          <view class="hero-badge">
            <text class="badge-dot"></text>
            <text>{{ $tr('社区服务') }}</text>
          </view>
          <view class="hero-title">{{ $tr('发布失物或招领信息') }}</view>
          <view class="hero-desc">{{ $tr('将失物或拾获信息同步给社区，方便后续核实与快速匹配。') }}</view>
        </view>

        <view class="form-card">
          <view class="block-title">{{ $tr('物品信息') }}</view>
          <view class="block-subtitle">{{ $tr('请补充关键字段，必填项越完整，越方便他人联系与认领。') }}</view>

          <view class="form-item tn-margin-top">
            <view class="form-label">{{ $tr('发布类型') }}</view>
            <picker mode="selector" :range="typeLabels" @change="handleTypeChange">
              <view class="form-picker">
                {{ selectedTypeLabel || $tr('请选择失物或招领') }}
              </view>
            </picker>
          </view>

          <view class="form-item tn-margin-top">
            <view class="form-label">{{ $tr('物品类型') }}</view>
            <input v-model="form.itemType" class="form-input" :placeholder="$tr('例如证件、钥匙、电子设备')" maxlength="40" />
          </view>

          <view class="form-item tn-margin-top">
            <view class="form-label">{{ $tr('物品名称') }}</view>
            <input v-model="form.itemName" class="form-input" :placeholder="$tr('请输入物品名称')" maxlength="60" />
          </view>

          <view class="form-item tn-margin-top">
            <view class="form-label">{{ $tr('地点') }}</view>
            <input v-model="form.place" class="form-input" :placeholder="$tr('请输入丢失或拾取地点')" maxlength="100" />
          </view>

          <view class="form-item tn-margin-top">
            <view class="form-label">{{ $tr('时间') }}</view>
            <view class="picker-row">
              <picker mode="date" :value="form.whenDate" @change="handleDateChange">
                <view class="form-picker">{{ form.whenDate || $tr('选择日期') }}</view>
              </picker>
              <picker mode="time" :value="form.whenTime" @change="handleTimeChange">
                <view class="form-picker form-picker--time">{{ form.whenTime || $tr('选择时间') }}</view>
              </picker>
            </view>
            <view class="field-tip">{{ $tr('可选，若已知大致时间可一并填写。') }}</view>
          </view>

          <view class="form-item tn-margin-top">
            <view class="form-label">{{ $tr('联系人') }}</view>
            <input v-model="form.contract" class="form-input" :placeholder="$tr('请输入联系人')" maxlength="40" />
          </view>

          <view class="form-item tn-margin-top">
            <view class="form-label">{{ $tr('联系电话') }}</view>
            <input v-model="form.contractPhone" class="form-input" :placeholder="$tr('请输入联系电话')" maxlength="30" />
          </view>

          <view class="form-item tn-margin-top">
            <view class="form-label">{{ $tr('备注') }}</view>
            <textarea
              v-model="form.remark"
              class="form-textarea"
              :placeholder="$tr('可补充外观特征、认领说明或其他辅助信息')"
              maxlength="300"
            ></textarea>
            <view class="field-counter">{{ (form.remark || '').length }}/300</view>
          </view>

          <view class="form-item tn-margin-top">
            <view class="form-label">{{ $tr('现场图片') }}</view>
            <tn-image-upload
              :key="uploadInstanceKey"
              :fileList="form.photos"
              :action="uploadAction"
              :header="uploadHeaders"
              :formData="uploadFormData"
              :max-count="6"
              :max-size="5 * 1024 * 1024"
              uploadText=""
              @on-success="onUploadSuccess"
              @on-list-change="onPhotoListChange"
              @on-remove="onRemoveImage"
              @on-error="onUploadError"
              @on-oversize="onUploadOversize"
              @on-exceed="onUploadExceed"
            >
              <template #addBtn>
                <view class="upload-trigger">
                  <text class="tn-icon-camera-fill upload-trigger__icon"></text>
                  <view class="upload-trigger__text">{{ $tr('上传图片') }}</view>
                </view>
              </template>
            </tn-image-upload>
            <view class="field-tip">{{ $tr('可选，上传现场图或物品图可提升识别效率。') }}</view>
          </view>
        </view>
      </view>
    </scroll-view>

    <view class="floating-submit-bar">
      <view class="floating-submit-bar__inner">
        <view class="floating-submit-tip">{{ $tr('发布前请确认信息准确，系统会按当前语言提交接口。') }}</view>
        <view class="submit-btn btn-primary" :class="{ 'submit-btn--disabled': isSubmitting }" @click="submitForm">
          <text class="tn-text-bold">{{ isSubmitting ? $tr('发布中...') : $tr('立即发布') }}</text>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import { API_BASE_URL } from '@/utils/request'
import { getAuthToken } from '@/utils/app-state'
import { addFilePrefix } from '@/utils/common'
import { lostAndFoundPublish } from '@/api/index.js'
import { getStoredUser } from '@/utils/flow'

function pickReadableValue(...values) {
  for (let index = 0; index < values.length; index += 1) {
    const text = String(values[index] || '').trim()
    if (text) {
      return text
    }
  }
  return ''
}

export default {
  name: 'LostFoundPublishPage',
  data() {
    return {
      scrollTop: 0,
      isSubmitting: false,
      uploadInstanceKey: 0,
      form: this.createDefaultForm()
    }
  },
  computed: {
    language() {
      return this.$getLanguage ? this.$getLanguage() : 'zh'
    },
    navBarBackgroundColor() {
      if (this.scrollTop < 40) return 'rgba(255, 255, 255, 0)'
      return 'rgba(255, 255, 255, 0.96)'
    },
    navBarBackStyle() {
      const isDarkBg = this.scrollTop < 40
      return {
        transition: 'all 0.2s ease',
        background: isDarkBg ? 'rgba(0, 0, 0, 0.2)' : 'transparent',
        borderRadius: '50%',
        width: '64rpx',
        height: '64rpx',
        display: 'flex',
        alignItems: 'center',
        justifyContent: 'center',
        marginLeft: '12rpx',
        color: isDarkBg ? '#FFFFFF' : '#000000'
      }
    },
    navTitleOpacity() {
      return Math.min(Math.max((this.scrollTop - 40) / 50, 0), 1)
    },
    typeOptions() {
      return [
        { value: 1, label: this.$tr('失物'), labelEn: this.$tr('失物') },
        { value: 2, label: this.$tr('招领'), labelEn: this.$tr('招领') }
      ]
    },
    typeLabels() {
      return this.typeOptions.map(item => item.label)
    },
    selectedTypeLabel() {
      const current = this.typeOptions.find(item => item.value === this.form.type)
      return current ? current.label : ''
    },
    uploadAction() {
      return `${String(API_BASE_URL || '').replace(/\/$/, '')}/file/common/upload`
    },
    uploadHeaders() {
      const token = getAuthToken()
      return {
        ...(token ? { Authorization: `Bearer ${token}` } : {}),
        'X-Requested-Language': this.language === 'en' ? 'en' : 'zh'
      }
    },
    uploadFormData() {
      return {
        ProviderType: 'WechatMiniProgram'
      }
    }
  },
  onLoad() {
    this.prefillContact()
  },
  methods: {
    createDefaultForm() {
      return {
        type: 1,
        itemType: '',
        itemName: '',
        place: '',
        whenDate: '',
        whenTime: '',
        contract: '',
        contractPhone: '',
        remark: '',
        photos: [],
        imageUrls: []
      }
    },
    prefillContact() {
      const user = getStoredUser() || {}
      this.form.contract = this.form.contract || pickReadableValue(user.name, user.realName, user.username)
      this.form.contractPhone = this.form.contractPhone || pickReadableValue(user.phone, user.mobile, user.tel)
    },
    handleScroll(e) {
      this.scrollTop = e.detail.scrollTop
    },
    handleTypeChange(event) {
      const index = Number(event && event.detail ? event.detail.value : 0)
      const target = this.typeOptions[index]
      this.form.type = target ? target.value : 1
    },
    handleDateChange(event) {
      this.form.whenDate = event && event.detail ? event.detail.value : ''
    },
    handleTimeChange(event) {
      this.form.whenTime = event && event.detail ? event.detail.value : ''
    },
    resolveWhenValue() {
      if (!this.form.whenDate) {
        return null
      }
      const timeText = this.form.whenTime || '00:00'
      return `${this.form.whenDate}T${timeText}:00`
    },
    resolveUploadedFileUrl(uploadResult) {
      return pickReadableValue(
        uploadResult && uploadResult.data && uploadResult.data.url,
        uploadResult && uploadResult.data && uploadResult.data.fileUrl,
        uploadResult && uploadResult.data && uploadResult.data.path,
        uploadResult && uploadResult.data,
        uploadResult && uploadResult.url,
        uploadResult && uploadResult.fileUrl,
        uploadResult && uploadResult.path,
        typeof uploadResult === 'string' ? uploadResult : ''
      )
    },
    onUploadSuccess(data, index, list) {
      let parsedData = data
      if (typeof data === 'string') {
        try {
          parsedData = JSON.parse(data)
        } catch (error) {}
      }
      const resourceUrl = this.resolveUploadedFileUrl(parsedData)
      if (!resourceUrl) {
        return
      }
      this.form.photos = Array.isArray(list) ? list : this.form.photos
      this.form.imageUrls.splice(index, 1, resourceUrl)
    },
    onPhotoListChange(list) {
      this.form.photos = Array.isArray(list) ? list : []
    },
    onRemoveImage(index) {
      this.form.imageUrls.splice(index, 1)
    },
    onUploadError() {
      uni.showToast({ title: this.$tr('图片上传失败'), icon: 'none' })
    },
    onUploadOversize() {
      uni.showToast({ title: this.$tr('单张图片不能超过 5 MB'), icon: 'none' })
    },
    onUploadExceed() {
      uni.showToast({ title: this.$tr('最多上传 6 张图片'), icon: 'none' })
    },
    getValidationMessage() {
      if (!String(this.form.itemType || '').trim()) return this.$tr('请输入物品类型')
      if (!String(this.form.itemName || '').trim()) return this.$tr('请输入物品名称')
      if (!String(this.form.place || '').trim()) return this.$tr('请输入地点')
      if (!String(this.form.contract || '').trim()) return this.$tr('请输入联系人')
      if (!String(this.form.contractPhone || '').trim()) return this.$tr('请输入联系电话')
      return ''
    },
    buildSubmitPayload() {
      return {
        type: Number(this.form.type) || 1,
        itemType: String(this.form.itemType || '').trim(),
        itemName: String(this.form.itemName || '').trim(),
        place: String(this.form.place || '').trim(),
        when: this.resolveWhenValue(),
        contract: String(this.form.contract || '').trim(),
        contractPhone: String(this.form.contractPhone || '').trim(),
        remark: String(this.form.remark || '').trim() || null,
        imageUrls: this.form.imageUrls.length ? this.form.imageUrls.slice() : null
      }
    },
    resetForm() {
      this.uploadInstanceKey += 1
      this.form = this.createDefaultForm()
      this.prefillContact()
    },
    submitForm() {
      if (this.isSubmitting) {
        return
      }
      const validationMessage = this.getValidationMessage()
      if (validationMessage) {
        uni.showToast({ title: validationMessage, icon: 'none' })
        return
      }
      this.isSubmitting = true
      lostAndFoundPublish(this.buildSubmitPayload(), this.language)
        .then(() => {
          uni.showToast({
            title: this.$tr('发布成功'),
            icon: 'success'
          })
          this.resetForm()
          setTimeout(() => {
            uni.navigateBack({
              delta: 1
            })
          }, 600)
        })
        .catch((error) => {
          uni.showToast({
            title: (error && (error.message || error.msg)) || this.$tr('发布失败'),
            icon: 'none'
          })
        })
        .finally(() => {
          this.isSubmitting = false
        })
    }
  }
}
</script>

<style scoped lang="scss">
.lost-found-page {
  min-height: 100vh;
  background: linear-gradient(180deg, #F0F6FF 0%, #F8FAFF 100%);
}

.page-scroll {
  height: 100vh;
}

.hero-header {
  padding: 24rpx 8rpx 0;
}

.hero-badge {
  display: inline-flex;
  align-items: center;
  padding: 10rpx 18rpx;
  background: rgba($brand-primary, 0.08);
  border-radius: 999rpx;
  color: $brand-primary;
  font-size: 22rpx;
  font-weight: 700;
}

.badge-dot {
  width: 10rpx;
  height: 10rpx;
  border-radius: 50%;
  background: $brand-primary;
  margin-right: 10rpx;
}

.hero-title {
  margin-top: 22rpx;
  font-size: 52rpx;
  line-height: 1.2;
  color: #1A2233;
  font-weight: 800;
}

.hero-desc {
  margin-top: 16rpx;
  color: #6A7A99;
  font-size: 26rpx;
  line-height: 1.6;
}

.form-card {
  background: #FFFFFF;
  border-radius: 28rpx;
  box-shadow: 0 12rpx 36rpx rgba(43, 142, 255, 0.06);
  border: 1rpx solid rgba(255, 255, 255, 0.8);
  padding: 30rpx;
}

.block-title {
  font-size: 32rpx;
  font-weight: 700;
  color: #1A2233;
}

.block-subtitle {
  margin-top: 10rpx;
  font-size: 24rpx;
  color: #7C8AA5;
  line-height: 1.6;
}

.form-label {
  margin-bottom: 16rpx;
  font-size: 28rpx;
  color: #1A2233;
  font-weight: 700;
}

.form-input,
.form-picker,
.form-textarea {
  width: 100%;
  background: #F8FAFF;
  border-radius: 22rpx;
  border: 1rpx solid rgba($brand-primary, 0.08);
  color: #1A2233;
}

.form-input,
.form-picker {
  min-height: 96rpx;
  padding: 0 26rpx;
  display: flex;
  align-items: center;
  font-size: 28rpx;
}

.form-textarea {
  min-height: 180rpx;
  padding: 26rpx;
  font-size: 28rpx;
  line-height: 1.6;
}

.picker-row {
  display: flex;
  gap: 16rpx;
}

.picker-row picker {
  flex: 1;
}

.form-picker--time {
  justify-content: center;
}

.field-tip {
  margin-top: 12rpx;
  font-size: 22rpx;
  color: #8A97AE;
  line-height: 1.6;
}

.field-counter {
  margin-top: 12rpx;
  text-align: right;
  font-size: 22rpx;
  color: #9AA6BC;
}

.upload-trigger {
  width: 200rpx;
  height: 200rpx;
  border-radius: 22rpx;
  background: linear-gradient(135deg, rgba($brand-primary, 0.08) 0%, rgba($brand-primary, 0.03) 100%);
  border: 1rpx dashed rgba($brand-primary, 0.26);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.upload-trigger__icon {
  font-size: 40rpx;
  color: $brand-primary;
}

.upload-trigger__text {
  margin-top: 12rpx;
  font-size: 24rpx;
  color: $brand-primary;
  font-weight: 600;
}

.floating-submit-bar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 24rpx 24rpx calc(24rpx + env(safe-area-inset-bottom));
  background: linear-gradient(180deg, rgba(248, 250, 255, 0) 0%, rgba(248, 250, 255, 0.98) 36%, rgba(248, 250, 255, 1) 100%);
}

.floating-submit-bar__inner {
  background: rgba(255, 255, 255, 0.96);
  border-radius: 28rpx;
  padding: 22rpx;
  box-shadow: 0 12rpx 36rpx rgba(43, 142, 255, 0.08);
}

.floating-submit-tip {
  margin-bottom: 16rpx;
  font-size: 22rpx;
  color: #7C8AA5;
}

.submit-btn {
  height: 96rpx;
  border-radius: 24rpx;
  display: flex;
  align-items: center;
  justify-content: center;
}

.btn-primary {
  background: linear-gradient(135deg, rgba($brand-primary, 0.92) 0%, $brand-primary 100%);
  color: #FFFFFF;
  box-shadow: 0 12rpx 28rpx rgba($brand-primary, 0.24);
}

.submit-btn--disabled {
  opacity: 0.7;
}
</style>