ys-app/src/pages/business/CRM/customer/customerAdd.vue

<!--
 * @author wangzhuo
 * @description 客户人员新增
-->
<template>
  <view class="con-body">
    <view class="con-bg">
      <!-- 头部 -->
      <customHeader ref="customHeaderRef" :title="'客户人员新增'" :leftFlag="true" :rightFlag="true">
        <template #right>
          <view class="head-right" @click="submitForm">
            <uni-icons custom-prefix="iconfont" type="icon-phonebaocun" size="22"
                       color="#B7D2FF"></uni-icons>
            保存
          </view>
        </template>
      </customHeader>

      <!-- 高度来避免头部遮挡 -->
      <view class="top-height"></view>

      <!-- 正文内容 -->
      <view class="white-bg">
        <view class="form-con" @click="handleBlur">
          <uni-forms ref="formRef" :model="formData" :rules="rules" label-width="40%">
            <!-- 选择客户 -->
            <uni-forms-item label="客户名称" name="cusName" required class="f-c-right">
              <!--              <picker @change="bindPickerChange" :value="guestIndex" :range="guestArr">-->
              <!--                <view class="f-c-text">-->
              <!--                  {{guestArr[guestIndex]}}-->
              <!--                  -->
              <!--                </view>-->
              <!--              </picker>-->
              <view class="customer-name" @click="handleCustomerClick">
                <uni-icons type="right" size="20" color="#A0A0A0"></uni-icons>
                <text> {{ customerUser.cusName || '查询客户名称' }}</text> <!---->
              </view>
            </uni-forms-item>
            <!-- 系统推荐等级 -->
            <uni-forms-item label="系统公司等级" name="cusEstate" class="uni-forms-item is-direction-top is-top">
              <uni-easyinput v-model="formData.cusEstate"
                             :placeholder="customerUser.sysThinkLevel?customerUser.sysThinkLevel:'默认显示公司等级'"
                             disabled/>
            </uni-forms-item>
            <!-- 输入人员名称 -->
            <uni-forms-item label="人员姓名" name="customerUserName" required
                            class="uni-forms-item is-direction-top is-top">
              <uni-easyinput v-model="formData.customerUserName" placeholder="请输入姓名"/>
            </uni-forms-item>
            <!-- 输入人员手机号 -->
            <uni-forms-item label="人员手机号" name="iphone" required class="uni-forms-item is-direction-top is-top">
              <uni-easyinput v-model="formData.iphone" placeholder="请输入手机号"/>
            </uni-forms-item>
            <!-- 输入人员部门 -->
            <uni-forms-item label="部门" name="userDept" required class="uni-forms-item is-direction-top is-top">
              <uni-easyinput v-model="formData.userDept" placeholder="请输入所属部门"/>
            </uni-forms-item>
            <!-- 选择职能 -->
            <uni-forms-item label="职能" name="functionalRequirements" required
                            class="uni-forms-item is-direction-top is-top">
              <view class="form-picker">
                <picker @change="handleFunctionChange" :range="functionalRequirementList"
                        :range-key="'name'"> <!--选择职能 索引： :value="functionIndex" index1 响应：handlePlace1 -->
                  <view class="flex">
                    {{ formData.functionalRequirements ? formData.functionalRequirements : '请选择' }}
                    <!-- 职能：functionalRequirements -->
                    <uni-icons type="down" size="20" color="#A0A0A0"></uni-icons>
                  </view>
                </picker>
              </view>
            </uni-forms-item>
            <!-- 业务员选择人员等级 -->
            <uni-forms-item label="业务人员填写等级" name="salesmanThinkLevel" required
                            class="uni-forms-item is-direction-top is-top">
              <view class="form-picker">
                <picker @change="handleThinkLevelChange" :range="salesmanThinkLevelList"
                        :range-key="'name'"> <!--选择推荐等级 索引:value="thinkLevelIndex" index8 响应：handlePlace9 -->
                  <view class="flex">
                    {{ formData.salesmanThinkLevel ? formData.salesmanThinkLevel : '请选择' }}
                    <!-- 思考人员等级：salesmanThinkLevel-->
                    <uni-icons type="down" size="20" color="#A0A0A0"></uni-icons>
                  </view>
                </picker>
              </view>
            </uni-forms-item>
            <!-- 系统推荐等级 -->
            <uni-forms-item label="系统推荐等级" name="systemThinkLevel" class="uni-forms-item is-direction-top is-top">
              <uni-easyinput v-model="formData.systemThinkLevel" :placeholder="recommendLevel || '默认显示系统推荐等级'"
                             disabled/>
            </uni-forms-item>
            <!-- 输入人员职务 -->
            <uni-forms-item label="职务" name="job" required class="uni-forms-item is-direction-top is-top">
              <uni-easyinput v-model="formData.job" placeholder="请输入职务"/>
            </uni-forms-item>
            <!-- 输入办公场地 -->
            <uni-forms-item label="办公场地" name="officeSite" required class="uni-forms-item is-direction-top is-top">
              <uni-easyinput v-model="formData.officeSite" placeholder="请输入办公场地"/>
            </uni-forms-item>
            <!-- 输入性别 -->
            <uni-forms-item label="性别" name="sex" required
                            class="uni-forms-item is-direction-top is-top">
              <view class="form-picker">
                <picker @change="handleGenderChange" :value="genderIndex" :range="genderList"
                        :range-key="'name'"> <!--选择性别 索引：index2 ，范围：palceArray2，响应：handlePlace2-->
                  <view class="flex">
                    {{ formData.sex ? formData.sex : '请选择' }} <!--  性别：sex -->
                    <uni-icons type="down" size="20" color="#A0A0A0"></uni-icons>
                  </view>
                </picker>
              </view>
            </uni-forms-item>
            <!-- 输入人员工作电话 -->
            <uni-forms-item label="工作电话" name="jobTelphone" class="uni-forms-item is-direction-top is-top">
              <uni-easyinput v-model="formData.jobTelphone" placeholder="请输入工作电话"/>
            </uni-forms-item>
            <!-- 选择人员等级 -->
            <uni-forms-item label="人员等级(K)" name="userType"
                            class="uni-forms-item is-direction-top is-top">
              <view class="form-picker">
                <picker @change="handleUserTypeChange" :value="userTypeIndex" :range="userTypeList"
                        :range-key="'name'"> <!--选择等级 索引：index5 ，范围：palceArray3，响应：handlePlace6-->
                  <view class="flex">
                    {{ formData.userType ? formData.userType : '请选择' }} <!-- 等级：userType -->
                    <uni-icons type="down" size="20" color="#A0A0A0"></uni-icons>
                  </view>
                </picker>
              </view>
            </uni-forms-item>
            <!-- 输入专业产品 majorProduct-->
            <uni-forms-item label="专业产品" name="majorProduct" class="uni-forms-item is-direction-top is-top">
              <uni-easyinput v-model="formData.majorProduct" placeholder="请输入专业产品"/>
            </uni-forms-item>
            <!-- 输入产品需求 product-->
            <uni-forms-item label="产品需求" name="product" class="uni-forms-item is-direction-top is-top">
              <uni-easyinput v-model="formData.product" placeholder="请输入产品需求"/>
            </uni-forms-item>
            <!-- 选择任职时间 tenureTime-->
            <uni-forms-item label="任职日期" name="tenureTime" class="uni-forms-item is-direction-top is-top">
              <uni-datetime-picker type="date" :clear-icon="false" v-model="formData.tenureTime"
                                   @change="handleTenureTimeChange"/> <!-- 响应：orderDateChange-->
            </uni-forms-item>
            <!-- 输入需求层次 hierarchyNeeds-->
            <uni-forms-item label="需求层次" name="hierarchyNeeds"
                            class="uni-forms-item is-direction-top is-top">
              <view class="form-picker">
                <picker @change="handleHierarchyNeedsChange" :value="hierarchyNeedsIndex" :range="hierarchyNeedsList"
                        :range-key="'name'"> <!--选择层次 索引：index4 ，范围：palceArray5，响应：handlePlace5-->
                  <view class="flex">
                    {{ formData.hierarchyNeeds ? formData.hierarchyNeeds : '请选择' }} <!-- 层次：hierarchyNeeds -->
                    <uni-icons type="down" size="20" color="#A0A0A0"></uni-icons>
                  </view>
                </picker>
              </view>
            </uni-forms-item>
            <!-- 输入职务变化 jobChange-->
            <uni-forms-item label="职务变化" name="jobChange" class="uni-forms-item is-direction-top is-top">
              <uni-easyinput v-model="formData.jobChange" placeholder="请输入职务变化"/>
            </uni-forms-item>
            <!-- 选择发展潜能 develop-->
            <uni-forms-item label="发展潜能" name="develop"
                            class="uni-forms-item is-direction-top is-top">
              <view class="form-picker">
                <picker @change="handleDevelopChange" :value="developIndex" :range="developList"
                        :range-key="'name'"> <!--选择潜力 索引：index3 ，范围：handlePlace4，响应：handlePlace5-->
                  <view class="flex">
                    {{ formData.develop ? formData.develop : '请选择' }} <!--  潜能：develop -->
                    <uni-icons type="down" size="20" color="#A0A0A0"></uni-icons>
                  </view>
                </picker>
              </view>
            </uni-forms-item>
            <!-- 输入生日 -->
            <uni-forms-item label="生日" name="birthday" class="uni-forms-item is-direction-top is-top">
              <uni-datetime-picker type="date" :clear-icon="false" v-model="formData.birthday"
                                   @change="handleBirthdayChange"/> <!-- 响应：birthdayChange-->
            </uni-forms-item>
            <!-- 输入爱好 -->
            <uni-forms-item label="爱好" name="hobby" class="uni-forms-item is-direction-top is-top">
              <!-- 索引：hobbyIndex 范围：hobbyList 响应：handleHobbyChange-->
              <uni-easyinput v-model="formData.hobby" placeholder="请输入爱好"/>
              <multipleSelect ref="hobbySelectRef" :multiple="true" downInner :value="hobbyIds" :options="hobbyList"
                              @change="handleHobbyChange" :slabel="'name'"

              ></multipleSelect><!--placeholder="请选择爱好标签"-->
            </uni-forms-item>

            <!--            <uni-forms-item label="爱好" name="hobby" class="uni-forms-item is-direction-top is-top">-->
            <!--              <uni-easyinput v-model="formData.hobby" placeholder="请输入爱好" @click="chooseHobby"/>-->
            <!-- chooseHobby选择标签 -->
            <!--            </uni-forms-item>-->
            <!-- 输入禁忌 taboo-->
            <uni-forms-item label="禁忌" name="taboo" class="uni-forms-item is-direction-top is-top">
              <uni-easyinput v-model="formData.taboo" placeholder="请输入禁忌"/>
            </uni-forms-item>
            <!-- 输入籍贯 nativec-->
            <uni-forms-item label="籍贯" name="nativec" class="uni-forms-item is-direction-top is-top">
              <uni-easyinput v-model="formData.nativec" placeholder="请输入或选择籍贯"/>
              <uni-data-picker placeholder="请选择" :localdata="city"
                               :clear-icon="false"
                               :map="{text:'label',value:'value'}"
                               @change="handleNativeChange">

              </uni-data-picker>
              <!--              {{formData.nativec? formData.nativec:'请选择'}}--><!-- 响应：address-->
            </uni-forms-item>
            <!-- 输入家庭住址 homeAddress-->
            <uni-forms-item label="家庭住址" name="homeAddress" class="uni-forms-item is-direction-top is-top">
              <uni-easyinput v-model="formData.homeAddress" placeholder="请输入家庭住址"/>
            </uni-forms-item>
            <!-- 输入家庭情况 familyStatus-->
            <uni-forms-item label="家庭情况" name="familyStatus" class="uni-forms-item is-direction-top is-top">
              <uni-easyinput v-model="formData.familyStatus" placeholder="请输入家庭情况"/>
            </uni-forms-item>
            <!-- 输入婚姻状况 maritalStatus-->
            <uni-forms-item label="婚姻状况" name="maritalStatus" class="uni-forms-item is-direction-top is-top">
              <uni-easyinput v-model="formData.maritalStatus" placeholder="请输入婚姻状况"/>
            </uni-forms-item>
            <!-- 输入车型及牌号 motorcycleType-->
            <uni-forms-item label="车型及牌号" name="motorcycleType" class="uni-forms-item is-direction-top is-top">
              <uni-easyinput v-model="formData.motorcycleType" placeholder="请输入车型及牌号"/>
            </uni-forms-item>
            <!-- 输入毕业院校 graduateIns-->
            <uni-forms-item label="毕业院校" name="graduateIns" class="uni-forms-item is-direction-top is-top">
              <uni-easyinput v-model="formData.graduateIns" placeholder="请输入毕业院校"/>
            </uni-forms-item>
            <!-- 输入人脉关系 interpersonal-->
            <uni-forms-item label="人脉关系" name="interpersonal" class="uni-forms-item is-direction-top is-top">
              <uni-easyinput v-model="formData.interpersonal" placeholder="请输入人脉关系"/>
            </uni-forms-item>
            <!-- 输入支持程度 support-->
            <uni-forms-item label="支持程度" name="support" class="uni-forms-item is-direction-top is-top">
              <view class="form-picker">
                <picker @change="handleSupportChange" :value="supportIndex" :range="supportLevelList"
                        :range-key="'name'"> <!--选择支持程度 索引：index6 ，范围：palceArray6，响应：handlePlace7-->
                  <view class="flex">
                    {{ formData.support ? formData.support : '请选择' }} <!-- 支持：support -->
                    <uni-icons type="down" size="20" color="#A0A0A0"></uni-icons>
                  </view>
                </picker>
              </view>
            </uni-forms-item>
            <!-- 选择工作状态 workingStatus-->
            <uni-forms-item label="工作状态" name="workingStatus" class="uni-forms-item is-direction-top is-top">
              <view class="form-picker">
                <picker @change="handleWorkingStatusChange" :value="workingStatusIndex" :range="workingStatusList"
                        :range-key="'name'"> <!--选择支持程度 索引：index7 ，范围：palceArray7，响应：handlePlace8-->
                  <view class="flex">
                    {{ formData.workingStatus ? formData.workingStatus : '请选择' }} <!-- 工作：workingStatus -->
                    <uni-icons type="down" size="20" color="#A0A0A0"></uni-icons>
                  </view>
                </picker>
              </view>
            </uni-forms-item>
            <!-- 输入备注 -->
            <uni-forms-item label="备注" name="remark" class="uni-forms-item is-direction-top is-top">
              <uni-easyinput type="textarea" autoHeight v-model="formData.remark" placeholder="请输入备注"
                             class="form-texarea"/>
            </uni-forms-item>

            <view style="padding-bottom: 30rpx; font-size: 12px; color: gray; text-align: center;">*★,°*:.☆(￣▽￣)/$:*.°★*
              。<br>恭喜你完成了信息填写，赶快提交吧！
            </view>
            <view style="padding-bottom: 80rpx;">
              <button type="primary" @click="submitForm">保存</button>
            </view>
          </uni-forms>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup>
import {ref, reactive} from 'vue'
import customHeader from '@/components/customHeader.vue'
import multipleSelect from '@/components/multipleSelect.vue'
import {
  developList,
  functionalRequirementList,
  genderList,
  hierarchyNeedsList, hobbyList,
  salesmanThinkLevelList, supportLevelList,
  userTypeList, workingStatusList
} from "./dataMap";
import city from "@/utils/area";
import {getCustomerLevel, saveappCrmCusUserNew} from "@/api/crm/customer/getCustomer";
// 对 multipleSelect 组件的引用
const hobbySelectRef = ref(null);
// 表单引用
const formRef = ref({});
// 表单数据
const formData = ref({
  //部门
  userDept: null,
  //客户ID
  cusId: null,
  //客户人员名称
  customerUserName: null,
  userName: null,

  //等级（K）
  userType: null,
  //手机号
  iphone: null,
  mobilePhone: null,
  //客户姓名
  cusName: null,
  //系统中公司等级
  cusEstate: null,
  //工作手机号
  jobTelphone: null,
  //职能
  functionalRequirements: '',
  //职务
  job: null,
  //专业产品
  majorProduct: null,
  //产品需求
  product: null,
  //办公场地
  officeSite: null,
  //性别
  sex: '男',
  //任职时间
  tenureTime: null,
  //需求层次
  hierarchyNeeds: null,
  //职务变化
  jobChange: null,
  //发展潜能
  develop: null,
  //生日
  birthday: null,
  //爱好
  hobby: null,
  //禁忌
  taboo: null,
  //籍贯
  nativec: null,
  //家庭情况
  familyStatus: null,
  //婚姻状况
  maritalStatus: null,
  //车辆及牌号
  motorcycleType: null,
  //毕业院校
  graduateIns: null,
  //家庭住址
  homeAddress: null,
  //人脉关系
  interpersonal: null,
  //支持程度
  support: null,
  //工作状态
  workingStatus: null,
  //备注
  remark: null,
  //业务员认为的等级
  salesmanThinkLevel: null,
  //系统认为的等级
  systemThinkLevel: null,
  //职能
  function: null,
});

// 客户人员信息
const customerUser = ref({
  cusName: null,
  sysThinkLevel: null
});

// 表单校验规则
let rules;
// 初始化校验规则
(function bindRules() {
  rules = reactive({
    cusName: {rules: [{required: true, errorMessage: '客户名称不能为空', trigger: 'blur'}]},
    customerUserName: {rules: [{required: true, errorMessage: '人员名称不能为空', trigger: 'blur'}]},
    iphone: {
      rules: [{
        required: true,
        errorMessage: '请填写手机号码',
      }, {
        validateFunction: function (rule, value, data, callback) {
          let iphoneReg = (
              /^(13[0-9]|14[1579]|15[0-3,5-9]|16[6]|17[0123456789]|18[0-9]|19[89])\d{8}$/
          ); //手机号码
          if (!iphoneReg.test(value)) {
            callback('手机号码格式不正确，请重新填写')
          }
        }
      }]
    },
    userDept: {rules: [{required: true, errorMessage: '所属部门不能为空', trigger: 'blur'}]},
    functionalRequirements: {rules: [{required: true, errorMessage: '职能不能为空', trigger: 'blur'}]},
    salesmanThinkLevel: {rules: [{required: true, errorMessage: '手填等级不能为空', trigger: 'blur'}]},
    job: {rules: [{required: true, errorMessage: '职务不能为空', trigger: 'blur'}]},
    officeSite: {rules: [{required: true, errorMessage: '办公场地不能为空', trigger: 'blur'}]},
    sex: {rules: [{required: true, errorMessage: '性别不能为空', trigger: 'blur'}]},
  });
  console.log(rules, "校验规则");
})();

// 选择客户人员
let handleCustomerClick = () => {
  // 在起始页面跳转到test.vue页面，并监听test.vue发送过来的事件数据
  uni.navigateTo({
    url: '/pages/business/CRM/customer/selectCustomer',
    events: {
      // 为指定事件添加一个监听器，获取被打开页面传送到当前页面的数据
      cuSelected(data) {
        console.log(data, "获取到返回的数据")
        let {
          cusName, // 公司名称
          cusEstate, // 等级
          cusId,
        } = data;
        customerUser.value.cusName = cusName;
        if (!cusEstate) customerUser.value.sysThinkLevel = "该客户暂无等级信息，无法进行系统推荐"
        formData.value.cusEstate = cusEstate;
        formData.value.cusName = cusName;
        formData.value.cusId = cusId;
        getRecommendLevel();
      }
    },
    success: function (res) {
      // 通过eventChannel向被打开页面传送数据
      res.eventChannel.emit('requestCusList', {data: {cusName: customerUser.value.cusName}})
    }
  })

}

// 选择职能
let handleFunctionChange = (e) => {
  console.log(e.detail.value, '职能索引');
  const {name} = functionalRequirementList[e.detail.value];
  formData.value.functionalRequirements = name;
  formData.value.function = name;
  getRecommendLevel();
}

// 选择等级
let handleThinkLevelChange = (e) => {
  console.log(e.detail.value, '人员等级');
  const {name} = salesmanThinkLevelList[e.detail.value];
  formData.value.salesmanThinkLevel = name;
}
// 系统推荐等级
let recommendLevel = ref("");
let getRecommendLevel = async () => {
  if (formData.value.cusEstate) {
    let {cusEstate, functionalRequirements} = formData.value;
    let param = {cusEstate, functionalRequirements};
    if (formData.value.salesmanThinkLevel) {
      param.personnelLevel = formData.value.salesmanThinkLevel;
    }
    let res = await getCustomerLevel(param)
    /*.catch(err => {
      console.error(err, "客户的系统推荐等级获取失败")
    })*/
    try{
      if(res.data.systemRecommendationLevel){
        formData.value.systemThinkLevel = res.data.systemRecommendationLevel;
      }else{
        recommendLevel.value = "客户无等级信息，暂无法进行等级推荐";
      }
    }catch(e){
      if (res.systemRecommendationLevel) {
        formData.value.systemThinkLevel = res.systemRecommendationLevel;
      }else{
        recommendLevel.value = "客户无等级信息，暂无法进行等级推荐"
      }
    }
  } else {
    recommendLevel.value = "无公司等级信息，无法推荐等级";
  }
};

// 性别索引
let genderIndex = ref(0);
// 选择性别
let handleGenderChange = (e) => {
  const {value} = e.detail;
  console.log(e.detail.value);
  const {name} = genderList[value];
  genderIndex.value = value;
  formData.value.sex = name;
}

// 人员等级索引
let userTypeIndex = ref(0);
// 选择人员等级
let handleUserTypeChange = (e) => {
  let {value} = e.detail;
  userTypeIndex.value = value;
  const {name} = userTypeList[value];
  formData.value.userType = name;
}

// 选择日期
function handleTenureTimeChange(val) {
  console.log(val)
  formData.value.tenureTime = val;
}

// 需求层次索引
let hierarchyNeedsIndex = ref(0);
// 选择需求层次
let handleHierarchyNeedsChange = e => {
  let {value} = e.detail;
  const {name} = hierarchyNeedsList[value];
  hierarchyNeedsIndex.value = value;
  formData.value.hierarchyNeeds = name;
}
// 发展潜能索引
let developIndex = ref(0);
// 选择发展潜能
let handleDevelopChange = e => {
  let {value} = e.detail;
  developIndex.value = value;
  formData.value.develop = developList[value].name;
}

// 选择生日
function handleBirthdayChange(val) {
  formData.value.birthday = val;
}

// 爱好标签索引
let hobbyIds = ref([]);
let hobbies = ref([]);
// 选择爱好标签
const handleHobbyChange = (items, ids) => {
  console.log('选择爱好', items, ids);
  hobbyIds.value = [];
  hobbies.value = items;
};

// 选择
const handleNativeChange = (e) => {
  formData.value.nativec = (e.detail.value.map(item => {
    return item.text;
  }).join("-"))
}
// 支持程度索引
let supportIndex = ref(0);
// 选择支持程度
let handleSupportChange = e => {
  let {value} = e.detail;
  supportIndex.value = value;
  formData.value.support = supportLevelList[value].name;
}
// 工作状态索引
let workingStatusIndex = ref(0);
let handleWorkingStatusChange = e => {
  let {value} = e.detail;
  workingStatusIndex.value = 0;
  formData.value.workingStatus = workingStatusList[value].name;
}
// 多选组件失去焦点关闭
let handleBlur = () => {
  if (hobbySelectRef.value) hobbySelectRef.value.handleBlur();
}
// 提取爱好标签处理逻辑
const processHobbyTags = () => {
  let hobbyTags = hobbies.value.map(it => {
    let {name} = it;
    return name;
  })
  const hobbyTagString = hobbyTags.join('，');
  console.log(hobbyTagString);
  if (hobbyTagString || formData.value.hobby) {
    formData.value.hobby = hobbyTagString ? (formData.value.hobby ? formData.value.hobby + '，' : '') + hobbyTagString : formData.value.hobby;
  }
};

// 提取表单验证逻辑
const validateForm = async () => {
  formData.value.cusName = customerUser.value.cusName;
  await formRef.value.validate();
  console.log(formData.value, "提交表单数据");
};

// 提取API调用逻辑
const saveCustomerUser = async () => {
  uni.showLoading();
  try {
    const res = await saveappCrmCusUserNew(formData.value);
    if(res.code === 200){
      uni.showToast({
        title: "保存成功"
      });
    } else {
      uni.showToast({
        title: "操作失败",
        icon: "error"
      });
    }
    setTimeout(() => uni.navigateBack(), 1500);
  } catch(err) {
    uni.showToast({
      icon: 'none',
      title: "保存失败"
    });
  }
  finally{
    uni.hideLoading()
  }
};

// 简化后的 submitForm 方法
let submitForm = async () => {
  console.log(formData.value);
  try {
    if(formData.value.iphone){
      formData.value.mobilePhone = formData.value.iphone;
    }
    // 处理爱好标签
    processHobbyTags();

    // 表单验证
    await validateForm();

    // 保存客户人员信息
    await saveCustomerUser();
  } catch (err) {
    uni.showToast({
      icon: 'none',
      title: '请检查并完善信息'
    });
    console.warn(err);
  }
};

/*let submitForm = async () => {
  let hobbyTags = hobbies.value.map(it => {
    let {name} = it;
    return name;
  })
  const hobbyTagString = hobbyTags.join('，');
  console.log(hobbyTagString);
  if (hobbyTagString || formData.value.hobby) {
    formData.value.hobby = hobbyTagString ? (formData.value.hobby ? formData.value.hobby + '，' : '') + hobbyTagString : formData.value.hobby;
  }
  if(formData.value.iphone){
    formData.value.mobilePhone = formData.value.iphone;
  }
  // console.log(formData.value, "校验表单数据")
  // console.log(recommendLevel);
  formData.value.cusName = customerUser.value.cusName;
  try {
    await formRef.value.validate()
    console.log(formData.value, "提交表单数据")
    // 请求保存
    uni.showLoading()
    saveappCrmCusUserNew(formData.value).then(res => {
      uni.hideLoading();
      if (res.code === 200) {
        uni.showToast({
          title: "保存成功"
        })
      } else {
        uni.showToast({
          title: "操作失败"
        })
      }
      setTimeout(() => uni.navigateBack(), 1500);
    }).catch(() => {
      uni.showToast({
        icon: 'none',
        title: "保存失败"
      })
    })
    // 重置表单
    // 清除校验

  } catch (err) {
    uni.showToast({
      icon: 'none',
      title: '请检查并完善信息'
    })
    console.warn(err);
  }
}*/


</script>

<style lang="scss" scoped>
:deep(.uni-easyinput__content.is-input-border) {
  overflow: hidden;
}

:deep(.uni-easyinput__content.is-input-border.is-disabled) {
  border: none;
}

:deep(.uni-easyinput__content.is-input-border.is-disabled .uni-easyinput__content-input) {
  background-color: #f0f0f0 !important;
}

:deep(.is-disabled .uni-easyinput__placeholder-class) {
  color: #999;
}

:deep(.uni-select-dc-select .uni-select-multiple) {
  overflow: auto;
}

.form-picker {
  padding: 15rpx;
  font-size: 12px;
}

:deep(.uni-date-x .uni-date__x-input) {
  font-size: 12px;
}

.white-bg {
  width: 750rpx;
  padding: 30rpx 0 0;
  margin-bottom: 0;
  border-radius: 8px 8px 0 0;
}

.customer-name {
  height: 100%;
  display: flex;
  align-items: center;
  flex-direction: row-reverse
}

:deep(.uni-date-x) {
  display: block;
}

:deep(.uni-date-x .icon-calendar) {
  float: right;
  margin-top: 15rpx;
  margin-right: 20rpx;
  background: url('../../../../static/images/business/icon-date.png') no-repeat;
  background-size: 32rpx 35rpx;
  width: 32rpx;
  height: 35rpx;
}

:deep(.uni-date-x .icon-calendar::before) {
  display: none;
}

:deep(.uni-date-x .uni-date__x-input) {
  padding-left: 20rpx;
  color: #919191;
}
</style>