cfc/cfc-frontend/pages/action-detail/octopus-add-effect.vue

<template>
  <view class="container">
    <view class="page-header">
      <text class="page-title">感恩记录</text>
    </view>

    <!-- 成交金额 -->
    <view class="form-section">
      <text class="section-label">成交金额（元） <text class="required-mark">*</text></text>
      <input class="amount-input" v-model="effectAmount" type="digit" placeholder="如 2500.00" />
    </view>

    <!-- 成交来源描述 -->
    <view class="form-section">
      <text class="section-label">成交来源描述（选填）</text>
      <textarea class="desc-input" v-model="effectDesc" placeholder="简述成交来源，如：家长转介绍、社区活动等" maxlength="200"></textarea>
    </view>

    <!-- 发生时间 -->
    <view class="form-section">
      <text class="section-label">发生时间（选填）</text>
      <view class="datetime-row">
        <picker mode="date" :value="happenedDate" @change="onDateChange">
          <view class="form-picker">{{ happenedDate || '选择日期' }}</view>
        </picker>
        <text class="datetime-sep">·</text>
        <picker mode="time" :value="happenedTime" @change="onTimeChange">
          <view class="form-picker">{{ happenedTime || '选择时间' }}</view>
        </picker>
      </view>
    </view>

    <!-- 关联关键人（可多选 + 角色标记） -->
    <view class="form-section">
      <view class="kp-header">
        <text class="section-label">关联关键人（可多选）</text>
        <text class="kp-add-link" @tap="goAddKeyPerson">+ 新建</text>
      </view>
      <view class="kp-list" v-if="keyPersons.length > 0">
        <view class="kp-item" v-for="kp in keyPersons" :key="kp.id"
              :class="{selected: selectedMap[kp.id]}"
              @click="toggleKeyPerson(kp.id)">
          <view class="kp-info">
            <text class="kp-name">{{ kp.name }}</text>
            <text class="kp-org">{{ kp.organization || kp.title || '' }}</text>
          </view>
          <!-- 已有联系方式 → 可匹配系统用户 -->
          <text class="kp-match-btn" v-if="kp.contactInfo" @click.stop="onMatchByPhone(kp)">匹配用户</text>
          <text class="kp-sys-badge" v-if="kp.matched">✓ 系统用户</text>
          <!-- 角色选择（选中时显示） -->
          <view class="kp-role" v-if="selectedMap[kp.id]" @click.stop>
            <text class="role-tag" :class="{active: roleMap[kp.id] === 1}" @click="setRole(kp.id, 1)">引荐</text>
            <text class="role-tag" :class="{active: roleMap[kp.id] === 2}" @click="setRole(kp.id, 2)">决策</text>
            <text class="role-tag" :class="{active: roleMap[kp.id] === 3}" @click="setRole(kp.id, 3)">其他</text>
          </view>
        </view>
      </view>
      <text class="empty-hint" v-else>暂无关键人，点击「+ 新建」添加</text>
    </view>

    <!-- 按手机号快速建关键人 -->
    <view class="form-section">
      <text class="section-label">手机号匹配（选填）</text>
      <view class="phone-match-row">
        <input class="phone-input" v-model="matchPhone" placeholder="输入手机号自动匹配" maxlength="11" type="number" />
        <text class="phone-match-btn" @tap="doPhoneMatch">匹配</text>
      </view>
      <text class="phone-match-result" v-if="matchResult">{{ matchResult }}</text>
    </view>

    <!-- 提交按钮 -->
    <view class="submit-bar">
      <button class="btn-submit" @click="onSubmit" :disabled="!canSubmit">保存感恩记录</button>
    </view>
  </view>
</template>

<script>
import { addOctopusEffect, getOctopusKeyPersons, matchOctopusKeyPersonByPhone, bindOctopusKeyPersonSystemUser } from '../../utils/api.js'

export default {
  data() {
    var now = new Date()
    var y = now.getFullYear()
    var m = String(now.getMonth() + 1).padStart(2, '0')
    var d = String(now.getDate()).padStart(2, '0')
    var h = String(now.getHours()).padStart(2, '0')
    var min = String(now.getMinutes()).padStart(2, '0')
    return {
      effectAmount: '',
      effectDesc: '',
      happenedDate: y + '-' + m + '-' + d,
      happenedTime: h + ':' + min,
      keyPersons: [],
      selectedMap: {},   // kpId -> true
      roleMap: {},        // kpId -> role (1引荐/2决策/3其他)
      _onLoadFired: false,
      matchPhone: '',
      matchResult: ''
    }
  },
  computed: {
    canSubmit() {
      return this.effectAmount.trim()
    }
  },
  onLoad() {
    this.loadKeyPersons()
    this._onLoadFired = true
  },
  onShow() {
    if (this._onLoadFired) {
      this._onLoadFired = false
    } else {
      this.loadKeyPersons()
    }
  },
  methods: {
    async loadKeyPersons() {
      try {
        var res = await getOctopusKeyPersons()
        if (res.code === 200 && Array.isArray(res.data)) {
          this.keyPersons = res.data
        }
      } catch (e) { /* 静默 */ }
    },
    /** 按关键人联系方式匹配系统用户 */
    onMatchByPhone: function(kp) {
      if (!kp.contactInfo) return
      this.doPhoneMatchInternal(kp.contactInfo, kp.id)
    },
    /** 手机号匹配输入框触发 */
    doPhoneMatch: function() {
      var phone = this.matchPhone.trim()
      if (!phone) {
        this.matchResult = '请输入手机号'
        return
      }
      this.matchResult = '匹配中...'
      this.doPhoneMatchInternal(phone, null)
    },
    async doPhoneMatchInternal(phone, kpId) {
      try {
        var res = await matchOctopusKeyPersonByPhone({ phone: phone })
        if (res.code === 200 && res.data && res.data.matched) {
          var matchedName = res.data.nickname || res.data.realName || res.data.memberName || ''
          var extra = res.data.memberId ? ' (memberId:' + res.data.memberId + ')' : ''
          this.matchResult = '已匹配: ' + matchedName + extra
          if (kpId && res.data.systemUserId) {
            // 持久化：将关键人与系统用户绑定
            var bindRes = await bindOctopusKeyPersonSystemUser({ keyPersonId: kpId, systemUserId: res.data.systemUserId })
            if (bindRes.code === 200) {
              this.$set(this.keyPersons[this.keyPersons.findIndex(function(k) { return k.id === kpId })], 'matched', true)
              this.matchResult = '已匹配并保存: ' + matchedName + extra
            }
          }
        } else {
          this.matchResult = res.message || '未找到该手机号对应的用户'
        }
      } catch (e) {
        this.matchResult = '匹配失败，请稍后重试'
      }
    },
    goAddKeyPerson() {
      uni.navigateTo({ url: '/pages/action-detail/octopus-add-key-person' })
    },
    toggleKeyPerson(id) {
      if (this.selectedMap[id]) {
        this.$set(this.selectedMap, id, false)
        this.$delete(this.roleMap, id)
      } else {
        this.$set(this.selectedMap, id, true)
        this.$set(this.roleMap, id, 1) // 默认引荐
      }
    },
    setRole(id, role) {
      this.$set(this.roleMap, id, role)
    },
    onDateChange(e) {
      this.happenedDate = e.detail.value
    },
    onTimeChange(e) {
      this.happenedTime = e.detail.value
    },
    async onSubmit() {
      if (!this.effectAmount.trim()) {
        uni.showToast({ title: '请填写成交金额', icon: 'none' })
        return
      }
      var data = {
        effectAmount: this.effectAmount,
        effectDesc: this.effectDesc.trim(),
        happenedAt: this.happenedDate + 'T' + this.happenedTime + ':00'
      }
      // 组装关键人列表
      var kpList = []
      var ids = Object.keys(this.selectedMap).filter(function(k) { return this.selectedMap[k] }, this)
      ids.forEach(function(k) {
        kpList.push({ keyPersonId: Number(k), role: this.roleMap[k] || 3 })
      }, this)
      if (kpList.length > 0) data.keyPersons = kpList
      try {
        var res = await addOctopusEffect(data)
        if (res.code === 200) {
          uni.showToast({ title: '保存成功', icon: 'success' })
          setTimeout(() => uni.navigateBack(), 1500)
        } else {
          uni.showToast({ title: res.message || '保存失败', icon: 'none' })
        }
      } catch (e) { uni.showToast({ title: '保存失败', icon: 'none' }) }
    }
  }
}
</script>

<style scoped>
.container {
  min-height: 100vh;
  background: #f5f5f5;
  padding: 24rpx;
}
.page-header {
  padding: 20rpx 0 30rpx;
}
.page-title {
  font-size: 36rpx;
  font-weight: bold;
  color: #333;
}
.form-section {
  background: #fff;
  border-radius: 16rpx;
  padding: 24rpx;
  margin-bottom: 20rpx;
}
.section-label {
  font-size: 28rpx;
  color: #333;
  font-weight: 500;
  display: block;
  margin-bottom: 16rpx;
}
.required-mark {
  color: #F97316;
}
.amount-input {
  width: 100%;
  height: 88rpx;
  background: #fafafa;
  border-radius: 12rpx;
  padding: 0 20rpx;
  font-size: 28rpx;
  box-sizing: border-box;
}
.desc-input {
  width: 100%;
  height: 160rpx;
  background: #fafafa;
  border-radius: 12rpx;
  padding: 20rpx;
  font-size: 28rpx;
  box-sizing: border-box;
}
/* 关键人选择 */
.kp-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.kp-header .section-label {
  margin-bottom: 0;
}
.kp-add-link {
  font-size: 26rpx;
  color: #F97316;
}
.kp-list {
  margin-top: 16rpx;
}
.kp-item {
  padding: 16rpx 20rpx;
  border: 2rpx solid #e0e0e0;
  border-radius: 12rpx;
  background: #fafafa;
  margin-bottom: 12rpx;
}
.kp-item.selected {
  border-color: #F97316;
  background: #FFF7ED;
}
.kp-info {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.kp-name {
  font-size: 28rpx;
  color: #333;
}
.kp-org {
  font-size: 22rpx;
  color: #999;
}
.kp-match-btn {
  font-size: 22rpx;
  color: #0EA5E9;
  padding: 4rpx 12rpx;
  border: 1rpx solid #0EA5E9;
  border-radius: 8rpx;
  background: #F0F9FF;
  flex-shrink: 0;
}
.kp-sys-badge {
  font-size: 20rpx;
  color: #10B981;
  background: #ECFDF5;
  padding: 2rpx 12rpx;
  border-radius: 6rpx;
  margin-left: 8rpx;
}
.kp-role {
  display: flex;
  margin-top: 12rpx;
  gap: 12rpx;
}
.role-tag {
  font-size: 22rpx;
  padding: 6rpx 20rpx;
  border-radius: 8rpx;
  border: 2rpx solid #e0e0e0;
  color: #666;
}
.role-tag.active {
  border-color: #F97316;
  background: #F97316;
  color: #fff;
}
.empty-hint {
  font-size: 26rpx;
  color: #999;
}
.submit-bar {
  margin-top: 40rpx;
}
.btn-submit {
  width: 100%;
  background: #F97316;
  color: #fff;
  border: none;
  border-radius: 12rpx;
  padding: 24rpx 0;
  font-size: 32rpx;
}
.btn-submit[disabled] {
  background: #ccc;
}
.form-picker {
  width: 45%;
  height: 88rpx;
  background: #fafafa;
  border-radius: 12rpx;
  padding: 0 20rpx;
  font-size: 28rpx;
  color: #333;
  display: flex;
  align-items: center;
  box-sizing: border-box;
}
.datetime-row {
  display: flex;
  align-items: center;
  gap: 16rpx;
}
.datetime-sep {
  font-size: 28rpx;
  color: #ccc;
}
/* 手机号匹配 */
.phone-match-row {
  display: flex;
  align-items: center;
  gap: 16rpx;
}
.phone-input {
  flex: 1;
  height: 88rpx;
  background: #fafafa;
  border-radius: 12rpx;
  padding: 0 20rpx;
  font-size: 28rpx;
  box-sizing: border-box;
}
.phone-match-btn {
  padding: 0 28rpx;
  height: 88rpx;
  line-height: 88rpx;
  background: #0EA5E9;
  color: #fff;
  border-radius: 12rpx;
  font-size: 28rpx;
  flex-shrink: 0;
}
.phone-match-result {
  font-size: 24rpx;
  color: #0EA5E9;
  margin-top: 12rpx;
  display: block;
}
</style>