scancode-miro/pages/hexiao/jxs/add_ywy.vue

<template>
  <view class="page-container">
    <view class="form-card">

      <view class="form-item">
        <text class="form-label">业务员名称</text>
        <input
            class="form-input"
            v-model="formData.name"
            placeholder="请输入业务员姓名"
            placeholder-class="placeholder"
        />
      </view>

      <view class="form-item">
        <text class="form-label">业务员账号</text>
        <input
            class="form-input"
            type="number"
            maxlength="11"
            v-model="formData.account"
            placeholder="请输入业务员账号（手机号）"
            placeholder-class="placeholder"
        />
      </view>

      <view class="form-item item-flex" v-if="formData.id != 0">
        <text class="form-label">业务员状态</text>
        <view class="switch-wrapper">
          <text :class="formData.isJob ? 'status-active' : ''">在职</text>
          <switch :checked="formData.isJob" @change="statusChange" color="#409eff" />
        </view>
      </view>

      <picker mode="selector" :range="areaList" range-key="area_name" @change="handleAreaChange">
        <view class="form-item item-flex">
          <text class="form-label">所属区域</text>
          <view class="picker-value">
            <text :class="{'placeholder': !formData.region}">
              {{ formData.region || '请选择' }}
            </text>
            <uni-icons type="right" size="16" color="#c0c0c0"></uni-icons>
          </view>
        </view>
      </picker>

    </view>

    <view class="footer-save-button">
      <button class="save-btn" @click="submitForm">保 存</button>
    </view>
  </view>
</template>

<script>
import {areaList,addYwy,updateYwy,getYwyByIdDetail} from "@/api/hexiao";

export default {
  data() {
    return {
      // 区域列表数据
      areaList: [
      ],
      areaMap :{},
      // 表单数据
      formData: {
        id:0,
        name: '',
        account: '',
        isJob: true,
        region: '', // 用于显示选择的区域名称
        regionId: null // 用于提交给后端的区域ID
      }
    };
  },
  onLoad(opt) {
    // 在实际项目中，您应该在这里通过API获取区域列表
    this.fetchAreaList(opt);
  },
  methods: {

    fetchAreaList (opt) {
      // 模拟区域列表数据
      areaList().then(res=>{
        this.areaMap = {};
        this.areaList = res.data;
        for (let i = 0; i < this.areaList.length; i++) {
          let area = this.areaList[i];
          this.areaMap [area.id] = area;
        }
        if(opt.id){
          getYwyByIdDetail(opt.id).then(res=>{
            let data = res.data;
            this.formData = {
              id: data.id,
              name: data.nick_name,
              account: data.tel_,
              isJob: data.is_job,
              regionId: data.area_id
            }
            let area = this.areaMap[data.area_id]
            this.formData.region = area.area_name;
          })
        }
      })
    },
    // 监听 Switch 开关变化
    statusChange(e) {
      this.formData.isJob = e.detail.value;
    },

    // 关键改动：处理 Picker 的 change 事件
    handleAreaChange(e) {
      const selectedIndex = e.detail.value; // 获取用户选择的索引
      const selectedArea = this.areaList[selectedIndex]; // 根据索引找到对应的区域对象

      console.log('选择的区域对象:', selectedArea);

      // 更新表单数据
      this.formData.region = selectedArea.area_name;
      this.formData.regionId = selectedArea.id;
    },

    // 提交表单
    submitForm() {
      // --- 手动进行数据校验 ---
      if (!this.formData.name) {
        uni.showToast({ title: '请输入业务员姓名', icon: 'none' });
        return;
      }
      if (!this.formData.account) {
        uni.showToast({ title: '请输入业务员账号', icon: 'none' });
        return;
      }
      if (!/^1[3-9]\d{9}$/.test(this.formData.account)) {
        uni.showToast({ title: '请输入正确的手机号码', icon: 'none' });
        return;
      }
      if (!this.formData.regionId) { // 校验ID是否存在
        uni.showToast({ title: '请选择所属区域', icon: 'none' });
        return;
      }

      console.log('校验通过，准备提交的数据:', this.formData);

      // 执行提交逻辑
      uni.showLoading({ title: '正在保存...' });

      let data  = {
        name: this.formData.name,
        phone:this.formData.account,
        status: this.formData.status,
        areaId: this.formData.regionId,
      }
      if(this.formData.id == 0){
        addYwy(data).then(res=>{
          uni.hideLoading();
          uni.showToast({
            title: '保存成功',
            icon: 'success'
          });
          uni.navigateBack();
        })
      }else{
        data.isJob = this.formData.isJob?1:0;
        data.ywyId = this.formData.id;
        updateYwy(data).then(res=>{
          uni.hideLoading();
          uni.showToast({
            title: '保存成功',
            icon: 'success'
          });
          uni.navigateBack();
        })
      }
    }
  }
}
</script>

<style lang="scss" scoped>
/* 所有样式与上一版完全相同，无需改动 */
.page-container {
  min-height: 100vh;
  background: linear-gradient(to bottom, #e4efff, #f5f6fa 40%);
  padding: 30rpx;
  box-sizing: border-box;
}
.form-card {
  background-color: #ffffff;
  border-radius: 20rpx;
  padding: 0 40rpx;
  box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.05);
}
.form-item {
  padding: 30rpx 0;
  border-bottom: 1rpx solid #f0f0f0;
  &:last-child {
    border-bottom: none;
  }
  &.item-flex {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
}
.form-label {
  font-size: 30rpx;
  color: #333;
  font-weight: 500;
}
.form-input {
  margin-top: 20rpx;
  font-size: 28rpx;
  color: #333;
}
.placeholder {
  color: #c0c4cc;
}
.switch-wrapper {
  display: flex;
  align-items: center;
  font-size: 28rpx;
  color: #999;
  .status-active {
    color: #409eff;
  }
  switch {
    margin-left: 20rpx;
    transform: scale(0.8);
  }
}
.picker-value {
  display: flex;
  align-items: center;
  font-size: 28rpx;
}
.footer-save-button {
  position: fixed;
  left: 0;
  bottom: 0;
  width: 100%;
  padding: 20rpx 30rpx;
  background-color: #f5f6fa;
  box-sizing: border-box;
  padding-bottom: calc(20rpx + constant(safe-area-inset-bottom));
  padding-bottom: calc(20rpx + env(safe-area-inset-bottom));
}
.save-btn {
  background-color: #409eff;
  color: #ffffff;
  border-radius: 50rpx;
  font-size: 32rpx;
  height: 90rpx;
  line-height: 90rpx;
  &::after {
    border: none;
  }
}
</style>