cfc/cfc-frontend/pages/match/street-match.vue

<template>
  <view class="match-page">
    <view class="page-title">区域匹配</view>
    
    <view class="filter-section">
      <view class="section-title">选择街道</view>
      <address-picker 
        v-model="filterStreetId" 
        @change="onFilterChange"
      />
      
      <view class="filter-actions">
        <button class="match-btn" @click="doMatch" :loading="matching">开始匹配</button>
      </view>
    </view>
    
    <view class="result-section" v-if="matchResult">
      <view class="section-title">匹配结果</view>
      
      <view class="match-level" v-if="matchResult.streetMatch">
        <view class="level-title">街道级匹配</view>
        <view class="match-count">
          找到 {{ familyCount.street || 0 }} 个家庭，
          {{ teacherCount.street || 0 }} 个成长规划师
        </view>
      </view>
      
      <view class="match-level" v-if="matchResult.districtMatch">
        <view class="level-title">区县级匹配</view>
        <view class="match-count">
          找到 {{ familyCount.district || 0 }} 个家庭，
          {{ teacherCount.district || 0 }} 个成长规划师
        </view>
      </view>
      
      <view class="match-level" v-if="matchResult.cityMatch">
        <view class="level-title">城市级匹配</view>
        <view class="match-count">
          找到 {{ familyCount.city || 0 }} 个家庭，
          {{ teacherCount.city || 0 }} 个成长规划师
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import AddressPicker from '@/components/address-picker.vue'
import { matchByStreet, countFamiliesByStreetIds, countTeachersByStreetIds } from '@/utils/api.js'

export default {
  components: {
    AddressPicker
  },
  data() {
    return {
      filterStreetId: null,
      matching: false,
      matchResult: null,
      familyCount: {},
      teacherCount: {}
    }
  },
  methods: {
    onFilterChange(data) {
      this.filterStreetId = data.streetId
    },
    
    async doMatch() {
      if (!this.filterStreetId) {
        uni.showToast({ title: '请选择街道', icon: 'none' })
        return
      }
      
      this.matching = true
      try {
        // 获取匹配范围
        const matchRes = await matchByStreet(this.filterStreetId)
        this.matchResult = matchRes.data
        
        // 统计各级别的家庭数
        if (matchRes.data.streetIds) {
          this.familyCount.street = await this.countFamilies(matchRes.data.streetIds)
          this.teacherCount.street = await this.countTeachers(matchRes.data.streetIds)
        }
        
        if (matchRes.data.districtStreetIds) {
          this.familyCount.district = await this.countFamilies(matchRes.data.districtStreetIds)
          this.teacherCount.district = await this.countTeachers(matchRes.data.districtStreetIds)
        }
        
        if (matchRes.data.cityStreetIds) {
          this.familyCount.city = await this.countFamilies(matchRes.data.cityStreetIds)
          this.teacherCount.city = await this.countTeachers(matchRes.data.cityStreetIds)
        }
      } catch (e) {
        console.error('匹配失败', e)
        uni.showToast({ title: '匹配失败', icon: 'none' })
      } finally {
        this.matching = false
      }
    },
    
    async countFamilies(streetIds) {
      if (!streetIds || streetIds.length === 0) return 0
      try {
        const res = await countFamiliesByStreetIds(streetIds)
        return res.data || 0
      } catch (e) {
        return 0
      }
    },
    
    async countTeachers(streetIds) {
      if (!streetIds || streetIds.length === 0) return 0
      try {
        const res = await countTeachersByStreetIds(streetIds)
        return res.data || 0
      } catch (e) {
        return 0
      }
    }
  }
}
</script>

<style scoped>
.match-page {
  min-height: 100vh;
  background: #f5f5f5;
  padding: 20rpx;
}

.page-title {
  font-size: 36rpx;
  font-weight: bold;
  color: #333;
  padding: 30rpx 0;
}

.filter-section {
  background: #fff;
  border-radius: 16rpx;
  padding: 20rpx;
  margin-bottom: 20rpx;
}

.section-title {
  font-size: 30rpx;
  color: #333;
  font-weight: bold;
  margin-bottom: 20rpx;
}

.filter-actions {
  margin-top: 30rpx;
}

.match-btn {
  width: 100%;
  height: 88rpx;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: #fff;
  border-radius: 44rpx;
  font-size: 32rpx;
}

.result-section {
  background: #fff;
  border-radius: 16rpx;
  padding: 20rpx;
}

.match-level {
  background: #f9f9f9;
  padding: 20rpx;
  border-radius: 8rpx;
  margin-bottom: 20rpx;
}

.level-title {
  font-size: 28rpx;
  font-weight: bold;
  color: #333;
  margin-bottom: 10rpx;
}

.match-count {
  font-size: 26rpx;
  color: #666;
}
</style>