shanxia2.0/miniprogram/pages/crm/clue/form.vue

<script setup>
import { reactive, ref } from 'vue'
import { addClue } from '@/api/crm'
import { PAGE_PATHS } from '@/config/api'

const submitting = ref(false)
const form = reactive({
  clueName: '',
  mobile: '',
  company: '',
  customerType: 'company',
  position: '',
  source: '其它',
  level: 'C',
  industry: '',
  parkArea: '',
  province: '',
  city: '',
  remark: ''
})

const goBack = () => {
  uni.navigateBack({
    fail: () => uni.navigateTo({ url: PAGE_PATHS.crmClueList })
  })
}

const submit = async () => {
  if (!form.clueName.trim()) {
    uni.showToast({ title: '请填写线索姓名', icon: 'none' })
    return
  }
  if (!form.mobile.trim()) {
    uni.showToast({ title: '请填写手机号', icon: 'none' })
    return
  }
  if (!form.company.trim()) {
    uni.showToast({ title: '请填写公司名称', icon: 'none' })
    return
  }
  submitting.value = true
  try {
    await addClue({
      ...form,
      position: form.position || '-',
      industry: form.industry || '-',
      parkArea: form.parkArea || '-',
      province: form.province || '-',
      city: form.city || '-'
    })
    uni.showToast({ title: '创建成功', icon: 'success' })
    setTimeout(() => goBack(), 500)
  } catch (e) {
    uni.showToast({ title: e.message || '创建失败', icon: 'none' })
  } finally {
    submitting.value = false
  }
}
</script>

<template>
  <view class="mp-page mp-page--sub mp-page--with-bottom">
    <view class="mp-header">
      <text class="mp-subpage-back" @click="goBack">← 返回</text>
      <text class="mp-header__title" style="margin-top: 16rpx">新增线索</text>
    </view>

    <view class="mp-form-panel">
      <view class="mp-form-row">
        <text class="mp-form-label mp-form-label--req">线索姓名</text>
        <input v-model="form.clueName" class="mp-form-input" placeholder="联系人姓名" />
      </view>
      <view class="mp-form-row">
        <text class="mp-form-label mp-form-label--req">手机号</text>
        <input v-model="form.mobile" class="mp-form-input" type="number" placeholder="手机号" />
      </view>
      <view class="mp-form-row">
        <text class="mp-form-label mp-form-label--req">公司名称</text>
        <input v-model="form.company" class="mp-form-input" placeholder="公司 / 单位" />
      </view>
      <view class="mp-form-row">
        <text class="mp-form-label">职位</text>
        <input v-model="form.position" class="mp-form-input" placeholder="职位" />
      </view>
      <view class="mp-form-row">
        <text class="mp-form-label">来源</text>
        <input v-model="form.source" class="mp-form-input" placeholder="线索来源" />
      </view>
      <view class="mp-form-row">
        <text class="mp-form-label">行业</text>
        <input v-model="form.industry" class="mp-form-input" placeholder="所属行业" />
      </view>
      <view class="mp-form-row">
        <text class="mp-form-label">园区</text>
        <input v-model="form.parkArea" class="mp-form-input" placeholder="所在园区" />
      </view>
      <view class="mp-form-row">
        <text class="mp-form-label">备注</text>
        <textarea v-model="form.remark" class="mp-form-textarea" placeholder="备注" />
      </view>
    </view>

    <view class="mp-bottom-bar">
      <view class="mp-btn mp-btn--ghost" @click="goBack">取消</view>
      <view class="mp-btn mp-btn--primary" @click="submit">
        {{ submitting ? '提交中…' : '保存' }}
      </view>
    </view>
  </view>
</template>