ss-tiku-manage-h5/src/pages/distributor/edit.vue

<template>
  <view class="distributor-edit-container">
    <!-- 页面标题 -->
    <view class="page-header">
      <view class="header-left" @click="goBack">
        <view class="back-icon">←</view>
      </view>
      <view class="header-title">编辑分销员</view>
      <view class="header-right" @click="saveDistributor">
        <view class="save-btn">保存</view>
      </view>
    </view>
    
    <!-- 表单内容 -->
    <view class="form-section">
      <view class="section-title">基本信息</view>
      <view class="form-card">
        <view class="form-row">
          <view class="form-label">姓名</view>
          <view class="form-control">
            <input 
              v-model="distributorForm.name" 
              class="form-input"
              placeholder="请输入姓名"
            />
          </view>
        </view>
        <view class="form-row">
          <view class="form-label">手机号</view>
          <view class="form-control">
            <input 
              v-model="distributorForm.phone" 
              type="number" 
              class="form-input"
              placeholder="请输入手机号"
              maxlength="11"
            />
          </view>
        </view>
        <view class="form-row">
          <view class="form-label">角色</view>
          <view class="form-control">
            <picker 
              :range="roleOptions" 
              :value="roleIndex"
              @change="onRoleChange"
              class="picker"
            >
              <view class="picker-text">{{ roleOptions[roleIndex] }}</view>
            </picker>
          </view>
        </view>
        <view class="form-row">
          <view class="form-label">状态</view>
          <view class="form-control">
            <picker 
              :range="statusOptions" 
              :value="statusIndex"
              @change="onStatusChange"
              class="picker"
            >
              <view class="picker-text">{{ statusOptions[statusIndex] }}</view>
            </picker>
          </view>
        </view>
        <view class="form-row">
          <view class="form-label">备注</view>
          <view class="form-control">
            <textarea 
              v-model="distributorForm.remark" 
              class="form-textarea"
              placeholder="请输入备注信息"
              maxlength="200"
            ></textarea>
            <view class="textarea-count">{{ distributorForm.remark.length }}/200</view>
          </view>
        </view>
      </view>
    </view>
    
    <!-- 操作按钮 -->
    <view class="action-section">
      <view class="action-btn delete-btn" @click="deleteDistributor">
        删除分销员
      </view>
    </view>
  </view>
</template>

<script setup>
  import { ref, onMounted } from "vue"

  // 分销员表单数据
  const distributorForm = ref({
    id: '',
    name: '张三',
    phone: '13800138001',
    role: '初级分销员',
    status: '启用',
    remark: '默认分销员'
  })
  
  // 角色选项
  const roleOptions = ['初级分销员', '中级分销员', '高级分销员']
  const roleIndex = ref(0)
  
  // 状态选项
  const statusOptions = ['启用', '禁用']
  const statusIndex = ref(0)
  
  onMounted(() => {
    // 实际项目中应从接口获取分销员详情
    // loadDistributorDetail()
  })
  
  // 返回上一页
  function goBack() {
    uni.navigateBack({ delta: 1 })
  }
  
  // 保存分销员
  function saveDistributor() {
    if (!distributorForm.value.name) {
      uni.showToast({ 
        title: '请输入姓名', 
        icon: 'none' 
      })
      return
    }
    
    if (!distributorForm.value.phone || distributorForm.value.phone.length !== 11) {
      uni.showToast({ 
        title: '请输入有效的手机号', 
        icon: 'none' 
      })
      return
    }
    
    uni.showLoading({ title: '保存中...' })
    
    setTimeout(() => {
      uni.hideLoading()
      uni.showToast({ 
        title: '保存成功', 
        icon: 'success' 
      })
      // 实际项目中应调用接口保存分销员
      // updateDistributorData()
      
      // 保存成功后返回上一页
      setTimeout(() => {
        goBack()
      }, 1000)
    }, 1500)
  }
  
  // 删除分销员
  function deleteDistributor() {
    uni.showModal({
      title: '删除分销员',
      content: '确定要删除该分销员吗？',
      success: function(res) {
        if (res.confirm) {
          uni.showLoading({ title: '删除中...' })
          
          setTimeout(() => {
            uni.hideLoading()
            uni.showToast({ 
              title: '删除成功', 
              icon: 'success' 
            })
            // 实际项目中应调用接口删除分销员
            // deleteDistributorData()
            
            // 删除成功后返回上一页
            setTimeout(() => {
              goBack()
            }, 1000)
          }, 1500)
        }
      }
    })
  }
  
  // 角色变更
  function onRoleChange(e) {
    const value = e.detail.value
    roleIndex.value = value
    distributorForm.value.role = roleOptions[value]
  }
  
  // 状态变更
  function onStatusChange(e) {
    const value = e.detail.value
    statusIndex.value = value
    distributorForm.value.status = statusOptions[value]
  }
</script>

<style lang="scss" scoped>
  /* #ifndef APP-NVUE */
  page {
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    background-color: #f5f7fa;
    min-height: 100%;
    height: auto;
  }

  view {
    font-size: 14px;
    line-height: inherit;
  }
  /* #endif */

  .distributor-edit-container {
    flex: 1;
    display: flex;
    flex-direction: column;
  }
  
  /* 页面头部 */
  .page-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 120rpx;
    background-color: #fff;
    padding: 0 32rpx;
    box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1);
  }
  
  .header-left {
    width: 60rpx;
  }
  
  .back-icon {
    font-size: 40rpx;
    color: #303133;
    cursor: pointer;
  }
  
  .header-title {
    font-size: 32rpx;
    font-weight: bold;
    color: #303133;
  }
  
  .header-right {
    width: 60rpx;
    text-align: right;
  }
  
  .save-btn {
    font-size: 24rpx;
    color: #409eff;
    font-weight: 600;
    cursor: pointer;
  }
  
  /* 表单内容 */
  .form-section {
    padding: 32rpx;
    background-color: #fff;
    margin: 0 16rpx 16rpx;
    border-radius: 16rpx;
    box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.08);
  }
  
  .section-title {
    font-size: 32rpx;
    font-weight: bold;
    color: #303133;
    margin-bottom: 24rpx;
    padding-left: 12rpx;
    border-left: 8rpx solid #409eff;
    line-height: 1.2;
  }
  
  .form-card {
    background-color: #f9f9f9;
    border-radius: 12rpx;
    padding: 24rpx;
  }
  
  .form-row {
    display: flex;
    flex-direction: column;
    margin-bottom: 24rpx;
  }
  
  .form-row:last-child {
    margin-bottom: 0;
  }
  
  .form-label {
    font-size: 24rpx;
    color: #606266;
    margin-bottom: 8rpx;
  }
  
  .form-control {
    position: relative;
  }
  
  .form-input {
    width: 100%;
    background-color: #fff;
    border: 1rpx solid #dcdfe6;
    border-radius: 8rpx;
    padding: 16rpx;
    font-size: 24rpx;
    color: #303133;
  }
  
  .picker {
    background-color: #fff;
    border: 1rpx solid #dcdfe6;
    border-radius: 8rpx;
    padding: 16rpx;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  
  .picker-text {
    font-size: 24rpx;
    color: #303133;
  }
  
  .form-textarea {
    width: 100%;
    height: 160rpx;
    background-color: #fff;
    border: 1rpx solid #dcdfe6;
    border-radius: 8rpx;
    padding: 16rpx;
    font-size: 24rpx;
    color: #303133;
    resize: none;
  }
  
  .textarea-count {
    position: absolute;
    bottom: 8rpx;
    right: 16rpx;
    font-size: 18rpx;
    color: #909399;
  }
  
  /* 操作按钮 */
  .action-section {
    padding: 32rpx;
    background-color: #fff;
    margin: 0 16rpx 16rpx;
    border-radius: 16rpx;
    box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.08);
  }
  
  .action-btn {
    width: 100%;
    text-align: center;
    padding: 20rpx;
    border-radius: 8rpx;
    font-size: 24rpx;
    font-weight: 600;
    cursor: pointer;
  }
  
  .delete-btn {
    background-color: #fef0f0;
    color: #f56c6c;
  }
</style>