crm-app-vue3/pages/orderDetailRefactored/components/PageFour.vue

<template>
  <view class="page-four-container">
    <!-- 入库信息卡片 -->
    <view class="card-wrap">
      <u--form labelPosition="top" :model="warehouseInfo" ref="form" class="address-section">
        <view class="address-header">
          <u-icon name="car-fill" size="36rpx" color="#108cff" class="location-icon" />
          <text class="address-title">入库信息</text>
        </view>

        <!-- 编码、快递单号、物流图片 -->
        <u-row class="info-row" justify="space-between">
          <u-col span="4.5">
            <u-form-item label="编码" prop="codeStorage">
              <u--input v-model="warehouseInfo.codeStorage" placeholder="请输入编码" class="info-input"
                :disabled="warehouseInfo.needCheckCode === '2'" />
            </u-form-item>
          </u-col>
          <u-col span="4.5">
            <u-form-item label="快递单号" prop="expressOrderNo">
              <u--input v-model="warehouseInfo.expressOrderNo" placeholder="请输入快递单号" class="info-input" />
            </u-form-item>
          </u-col>
          <u-col span="2">
            <u-form-item label="物流图片" prop="uploadedImage">
              <view class="image-uploader" @click="selectImage">
                <u-icon v-if="!warehouseInfo.uploadedImage" name="camera-fill" size="48rpx" color="#909399"
                  class="camera-icon" />
                <image v-else :src="warehouseInfo.uploadedImage" mode="aspectFill" class="image-preview" />
              </view>
            </u-form-item>
          </u-col>
        </u-row>

        <!-- 收单物品、收单类型 -->
        <u-row class="info-row" justify="space-between">
          <u-col span="5.8">
            <u-form-item label="收单物品" prop="item">
              <u--input v-model="warehouseInfo.item" placeholder="请输入收单物品" class="info-input" />
            </u-form-item>
          </u-col>
          <u-col span="5.8">
            <u-form-item label="收单类型" prop="customerServiceNameLabel">
              <view class="click-wrapper" @tap="selectCustomerServiceName">
                <u--input v-model="warehouseInfo.customerServiceNameLabel" placeholder="点击选择收单类型" class="info-input"
                  disabled />
              </view>
            </u-form-item>
            <u-picker :show="showCustomerServicePicker" :columns="customerServiceColumns" confirm keyName="label"
              @confirm="handleConfirmCustomerService" @cancel="showCustomerServicePicker = false" />
          </u-col>
        </u-row>

        <!-- 类别、是否需要查码 -->
        <u-row class="info-row" justify="space-between">
          <u-col span="5.8">
            <u-form-item label="类别" prop="category">
              <view class="click-wrapper" @tap="selectCategory">
                <u--input v-model="warehouseInfo.categoryLabel" placeholder="点击选择类别" class="info-input" disabled />
              </view>
            </u-form-item>
            <u-picker :show="showCategoryPicker" :columns="categoryColumns" confirm keyName="label"
              @confirm="handleConfirmCategory" @cancel="showCategoryPicker = false" />
          </u-col>
          <u-col span="5.8">
            <u-form-item label="是否需要查码" prop="needCheckCode">
              <view class="click-wrapper" @tap="selectNeedCheckCode">
                <u--input v-model="warehouseInfo.needCheckCodeLabel" placeholder="点击选择是否需要查码" class="info-input"
                  disabled />
              </view>
            </u-form-item>
            <u-picker :show="showNeedCheckCodePicker" :columns="needCheckCodeColumns" confirm keyName="label"
              @confirm="handleConfirmNeedCheckCode" @cancel="showNeedCheckCodePicker = false" />
          </u-col>
        </u-row>

        <!-- 表款、查码费 -->
        <u-row class="info-row" justify="space-between">
          <u-col span="5.8">
            <u-form-item label="表款">
              <u--input v-model="warehouseInfo.watchPrice" placeholder="请输入表款" class="info-input" type="number" />
            </u-form-item>
          </u-col>
          <u-col span="5.8">
            <u-form-item label="查码费">
              <u--input v-model="warehouseInfo.checkCodeFee" placeholder="请输入查码费" class="info-input" type="number"
                :disabled="warehouseInfo.needCheckCode === '2'" />
            </u-form-item>
          </u-col>
        </u-row>

        <!-- 好处费、运费 -->
        <u-row class="info-row" justify="space-between">
          <u-col span="5.8">
            <u-form-item label="好处费">
              <u--input v-model="warehouseInfo.benefitFee" placeholder="请输入好处费" class="info-input" type="number" />
            </u-form-item>
          </u-col>
          <u-col span="5.8">
            <u-form-item label="运费">
              <u--input v-model="warehouseInfo.freight" placeholder="请输入运费" class="info-input" type="number" />
            </u-form-item>
          </u-col>
        </u-row>

        <!-- 维修金额、分单比例 -->
        <u-row class="info-row" justify="space-between">
          <u-col span="5.8">
            <u-form-item label="维修金额">
              <u--input v-model="warehouseInfo.repairAmount" placeholder="请输入维修金额" class="info-input" type="number" />
            </u-form-item>
          </u-col>
          <u-col span="5.8">
            <u-form-item label="分单比例（0~100）">
              <u--input v-model="warehouseInfo.splitRatio" placeholder="请输入分单比例(0~100)" class="info-input"
                type="number" />
            </u-form-item>
          </u-col>
        </u-row>

        <!-- 成本合计、业绩、毛业绩 -->
        <u-row class="info-row" justify="space-between">
          <u-col span="3.8">
            <u-form-item label="成本合计">
              <u--input :disabled="true" :value="computedTotalCost" placeholder="成本合计自动计算" class="info-input"
                type="number" />
            </u-form-item>
          </u-col>
          <u-col span="3.8">
            <u-form-item label="业绩">
              <u--input :disabled="true" :value="computedPerformance" placeholder="业绩自动计算" class="info-input"
                type="number" />
            </u-form-item>
          </u-col>
          <u-col span="3.8">
            <u-form-item label="毛业绩">
              <u--input :disabled="true" :value="computedGrossPerformance" placeholder="毛业绩自动计算" class="info-input"
                type="number" />
            </u-form-item>
          </u-col>
        </u-row>

        <!-- 收单备注 -->
        <u-row class="info-row">
          <u-col span="12">
            <u-form-item label="收单备注">
              <u--textarea v-model="warehouseInfo.remarks" placeholder="请输入收单备注" class="info-input" confirmType="done"
                rows="4" />
            </u-form-item>
          </u-col>
        </u-row>
      </u--form>
    </view>

    <!-- 分成信息卡片 -->
    <view class="card-wrap">
      <view class="address-section">
        <view class="address-header add-button-container">
            <text class="address-title">分成信息</text>

          <view class="add-button" @click="addSplit">
            <u-icon name="plus" size="24rpx" color="#108cff" />
            <text>添加</text>
          </view>
        </view>

        <!-- 分成信息表格 -->
        <view class="split-table">
          <u-row class="split-table-header">
            <u-col span="4"><text class="header-text">关联</text></u-col>
            <u-col span="2"><text class="header-text">分成人</text></u-col>
            <u-col span="2"><text class="header-text">比例</text></u-col>
            <u-col span="1"><text class="header-text">类型</text></u-col>
            <u-col span="1"><text class="header-text">公司</text></u-col>
            <u-col span="2" class="action-column"><text class="header-text">操作</text></u-col>
          </u-row>
          <u-row v-for="(item, index) in profitSharingList" :key="item.uuid" class="split-table-row">
            <u-col span="4">
              <view class="table-cell">
                <u-button @click="handleSelectOrg(item)" :text="item.orgName || '选择组织'" plain />
              </view>
            </u-col>
            <u-col span="2">
              <view class="table-cell">
                <u-button @click="handleSelectPerson(item)" :text="item.userName || '选择人员'" plain />
              </view>
            </u-col>
            <u-col span="2">
              <view class="table-cell">
                <u--input v-model="item.commissionRate" type="number" class="percentage-input"
                  @input="handlePercentageInput(item)" min="0" max="100" precision="0" />
              </view>
            </u-col>
            <u-col span="1">
              <view class="table-cell">
                <view :class="['account-type', item.accountType == '1' ? 'frontend' : 'backend']"
                  @click="toggleAccountType(item)">
                  {{ item.accountType == '1' ? '前' : '后' }}
                </view>
              </view>
            </u-col>
            <u-col span="1">
              <view class="table-cell">
                <view class="radio-wrapper" @click="toggleBelongToCompany(item)">
                  <view :class="['radio-circle', item.isCompanyPerformance == '1' ? 'active' : '']">
                    <u-icon v-if="item.isCompanyPerformance == '1'" name="checkmark" size="20rpx" color="#fff" />
                  </view>
                </view>
              </view>
            </u-col>
            <u-col span="2" class="action-column">
              <view class="table-cell">
                <u-button type="error" plain shape="circle" size="mini" @click="deleteRow(item.id, item.uuid)"
                  class="delete-btn">
                  <u-icon name="trash" size="20rpx" color="#ff6b6b" />
                </u-button>
              </view>
            </u-col>
          </u-row>
        </view>
      </view>
    </view>

    <!-- 确认入库按钮 -->
    <view class="confirm-button-container">
      <u-button class="next-btn" type="success" @click="confirmWarehouseEntry">
        <u-icon name="checkmark-circle-fill" size="28rpx" color="#fff" />
        <text style="margin-left: 8rpx;">确认入库</text>
      </u-button>
    </view>

    <!-- 组织选择器 -->
    <u-picker :show="showOrgPicker" title="请选择组织" :columns="columnsOrgList" keyName="label" @confirm="handleOrgConfirm"
      @cancel="showOrgPicker = false" />

    <!-- 人员选择器 -->
    <u-picker :show="showPersonPicker" title="请选择分成人" :columns="columnsPersonList" keyName="label"
      @confirm="handleConfirmPerson" @cancel="handleCancelPerson" />

    <u-toast ref="uToast" />
  </view>
</template>

<script>
import imageUpload from '../utils/imageUpload.js'

export default {
  name: 'PageFour',
  props: {
    orderDetail: {
      type: Object,
      default: () => ({})
    },
    currentReceipt: {
      type: Object,
      default: () => ({})
    }
  },
  data() {
    return {
      warehouseInfo: {
        codeStorage: '',
        expressOrderNo: '',
        uploadedImage: '',
        item: '',
        checkCodeFee: '',
        watchPrice: '',
        benefitFee: '',
        freight: '',
        repairAmount: '',
        grossPerformance: '',
        performance: '',
        splitRatio: '',
        remarks: '',
        customerServiceNameLabel: '',
        customerServiceName: '',
        categoryLabel: '',
        category: '',
        needCheckCodeLabel: '',
        needCheckCode: ''
      },
      profitSharingList: [],
      showOrgPicker: false,
      showPersonPicker: false,
      columnsOrgList: [],
      columnsPersonList: [],
      showCustomerServicePicker: false,
      customerServiceColumns: [[
        { label: '收单类', value: '1' },
        { label: '维修类', value: '2' },
        { label: '销售类', value: '3' }
      ]],
      showCategoryPicker: false,
      categoryColumns: [[
        { label: '腕表', value: '1' },
        { label: '包包', value: '2' },
        { label: '首饰', value: '4' },
        { label: '其他', value: '3' }
      ]],
      showNeedCheckCodePicker: false,
      needCheckCodeColumns: [[
        { label: '是', value: '1' },
        { label: '否', value: '2' }
      ]],
      currentEditItem: ''
    }
  },
  computed: {
    computedTotalCost() {
      const freight = Number(this.warehouseInfo.freight) || 0
      const benefitFee = Number(this.warehouseInfo.benefitFee) || 0
      const checkCodeFee = Number(this.warehouseInfo.checkCodeFee) || 0
      const watchPrice = Number(this.warehouseInfo.watchPrice) || 0
      const repairAmount = Number(this.warehouseInfo.repairAmount) || 0
      return freight + benefitFee + checkCodeFee + watchPrice + repairAmount
    },
    computedPerformance() {
      const sellingPrice = Number(this.currentReceipt.sellingPrice) || 0
      return sellingPrice - this.computedTotalCost
    },
    computedGrossPerformance() {
      const performance = this.computedPerformance || 0
      const splitRatio = Number(this.warehouseInfo.splitRatio) / 100 || 0
      return (performance * splitRatio).toFixed(2)
    }
  },
  watch: {
    currentReceipt: {
      handler(newVal) {
        if (newVal) {
          this.initWarehouseInfo(newVal)
          this.loadShareList()
        }
      },
      immediate: true,
      deep: true
    }
  },
  mounted() {
    this.loadCommissionUserList()
  },
  methods: {
    /**
     * 初始化入库信息
     */
    initWarehouseInfo(data) {
      const receiptRemark = data.receiptRemark || ''
      const remarkParts = receiptRemark.split(';')

      // 设置默认值：收单类型默认为"收单类"，类别默认为"腕表"，是否需要查码默认为"是"
      const defaultCustomerServiceName = data.customerServiceName || '1'
      const defaultCategory = data.category || '1'
      const defaultNeedCheckCode = data.needCheckCode || '1'

      this.warehouseInfo = {
        codeStorage: data.code || '',
        expressOrderNo: data.expressOrderNo || '',
        uploadedImage: remarkParts[1] || '',
        item: data.item || '',
        checkCodeFee: data.checkCodeFee || '',
        watchPrice: data.tableFee || '',
        benefitFee: data.benefitFee || '',
        freight: data.freight || '',
        repairAmount: data.repairAmount || '',
        grossPerformance: data.grossPerformance || '',
        performance: data.performance || '',
        splitRatio: data.splitRatio || '',
        remarks: remarkParts[0] || '',
        customerServiceName: defaultCustomerServiceName,
        customerServiceNameLabel: this.getLabelByValue(
          this.customerServiceColumns[0],
          defaultCustomerServiceName
        ),
        category: defaultCategory,
        categoryLabel: this.getLabelByValue(
          this.categoryColumns[0],
          defaultCategory
        ),
        needCheckCode: defaultNeedCheckCode,
        needCheckCodeLabel: this.getLabelByValue(
          this.needCheckCodeColumns[0],
          defaultNeedCheckCode
        )
      }
    },

    /**
     * 根据值获取标签
     */
    getLabelByValue(columns, value) {
      const item = columns.find(col => col.value == value)
      return item ? item.label : ''
    },

    /**
     * 选择物流图片
     */
    async selectImage() {
      try {
        const tempFilePaths = await imageUpload.chooseImage(1)
        if (!tempFilePaths || tempFilePaths.length === 0) {
          uni.$u.toast('未获取到图片路径，请重试')
          return
        }
        const tempFilePath = tempFilePaths[0]
        const rep = await uni.$u.api.uploadFile(tempFilePath)
        if (rep.code == 200) {
          this.warehouseInfo.uploadedImage = rep.data.url
        }
      } catch (error) {
        console.error('上传图片失败:', error)
      }
    },

    /**
     * 加载分成人名单
     */
    async loadCommissionUserList() {
      try {
        const res = await uni.$u.api.getCustomerManagerAllList()
        this.columnsOrgList = [res.data[0].children]
      } catch (error) {
        console.error('加载分成人名单失败:', error)
      }
    },

    /**
     * 加载分成列表
     */
    async loadShareList() {
      if (!this.currentReceipt.sendFormId) return

      try {
        const { rows } = await uni.$u.api.selectCommissionList({
          pageSize: 9999,
          pageNum: 1
        }, { sendFormId: this.currentReceipt.sendFormId })

        const newRows = rows
          .filter(item => item.receiptFormId == this.currentReceipt.id)
          .map(item => ({
            ...item,
            uuid: Math.random()
          }))
        this.profitSharingList = newRows
      } catch (error) {
        console.error('加载分成列表失败:', error)
      }
    },

    /**
     * 添加分成行
     */
    addSplit() {
      this.profitSharingList.push({
        deptId: '',
        accountType: '1',
        userId: '',
        commissionRate: 0,
        isCompanyPerformance: '2',
        orgName: '',
        userName: '',
        id: '',
        uuid: Math.random()
      })
      this.calculateTotalPercentage()
    },

    /**
     * 重新计算分成比例
     */
    calculateTotalPercentage() {
      const frontItems = this.profitSharingList.filter(item => item.accountType == '1')
      const backItems = this.profitSharingList.filter(item => item.accountType == '2')
      const totalFrontItems = frontItems.length || 1
      const totalBackItems = backItems.length || 1

      this.profitSharingList.forEach(item => {
        if (item.accountType == '1') {
          item.commissionRate = Math.floor(100 / totalFrontItems)
        }
        if (item.accountType == '2') {
          item.commissionRate = Math.floor(100 / totalBackItems)
        }
      })
    },

    /**
     * 切换账户类型
     */
    toggleAccountType(item) {
      item.accountType = item.accountType == '1' ? '2' : '1'
      this.calculateTotalPercentage()
    },

    /**
     * 处理百分比输入
     */
    handlePercentageInput(item) {
      let value = Number(item.commissionRate)
      if (isNaN(value)) value = 0
      if (value < 0) value = 0
      if (value > 100) value = 100
      item.commissionRate = Math.floor(value)
    },

    /**
     * 切换归属公司
     */
    toggleBelongToCompany(item) {
      item.isCompanyPerformance = item.isCompanyPerformance == '1' ? '2' : '1'
    },

    /**
     * 选择组织
     */
    handleSelectOrg(item) {
      this.currentEditItem = item.uuid
      this.showPersonPicker = true
      this.columnsPersonList = this.columnsOrgList
    },

    /**
     * 选择人员
     */
    handleSelectPerson(item) {
      this.currentEditItem = item.uuid
      const deptId = item.deptId
      const org = this.findOrg(this.columnsOrgList[0], deptId)
      if (org) {
        this.columnsPersonList = [org.children]
      }
      this.showPersonPicker = true
    },

    /**
     * 递归查找组织
     */
    findOrg(orgList, deptId) {
      for (const org of orgList) {
        if (org.id == deptId) {
          return org
        }
        if (org.children && org.children.length > 0) {
          const found = this.findOrg(org.children, deptId)
          if (found) return found
        }
      }
      return null
    },

    /**
     * 确认选择组织
     */
    handleOrgConfirm({ value }) {
      this.profitSharingList.forEach(item => {
        if (item.uuid == this.currentEditItem) {
          item.orgName = value[0].label
          item.deptId = value[0].id
          item.userId = ''
          item.userName = ''
        }
      })
      this.showOrgPicker = false
    },

    /**
     * 确认选择人员
     */
    handleConfirmPerson({ value }) {
      if (value[0].isUser) {
        this.profitSharingList.forEach(item => {
          if (item.uuid == this.currentEditItem) {
            item.userName = value[0].label
            item.userId = value[0].id
          }
        })
        this.columnsPersonList = []
        this.showPersonPicker = false
      } else {
        this.profitSharingList.forEach(item => {
          if (item.uuid == this.currentEditItem) {
            item.orgName = value[0].label
            item.deptId = value[0].id
          }
        })
        this.columnsPersonList = [value[0].children]
      }
    },

    /**
     * 取消选择人员
     */
    handleCancelPerson() {
      this.columnsPersonList = []
      this.showPersonPicker = false
    },

    /**
     * 删除分成行
     */
    async deleteRow(id, uuid) {
      uni.showModal({
        title: '确认删除',
        content: '是否确认删除当前行分成比例？',
        success: async (res) => {
          if (res.confirm) {
            if (!id) {
              this.profitSharingList = this.profitSharingList.filter(item => item.uuid != uuid)
              this.calculateTotalPercentage()
              return
            }
            try {
              await uni.$u.api.deleteClueCommissionForm(id)
              uni.$u.toast('删除成功')
              this.loadShareList()
            } catch (error) {
              uni.$u.toast('删除失败')
            }
          }
        }
      })
    },

    /**
     * 选择收单类型
     */
    selectCustomerServiceName() {
      this.showCustomerServicePicker = true
    },

    /**
     * 确认收单类型
     */
    handleConfirmCustomerService({ value }) {
      this.warehouseInfo.customerServiceNameLabel = value[0].label
      this.warehouseInfo.customerServiceName = value[0].value
      this.showCustomerServicePicker = false
    },

    /**
     * 选择类别
     */
    selectCategory() {
      this.showCategoryPicker = true
    },

    /**
     * 确认类别
     */
    handleConfirmCategory({ value }) {
      this.warehouseInfo.categoryLabel = value[0].label
      this.warehouseInfo.category = value[0].value
      this.showCategoryPicker = false
    },

    /**
     * 选择是否需要查码
     */
    selectNeedCheckCode() {
      this.showNeedCheckCodePicker = true
    },

    /**
     * 确认是否需要查码
     */
    handleConfirmNeedCheckCode({ value }) {
      this.warehouseInfo.needCheckCodeLabel = value[0].label
      this.warehouseInfo.needCheckCode = value[0].value
      // 如果选择"否"，清空编码和查码费
      if (value[0].value === '2') {
        this.warehouseInfo.codeStorage = ''
        this.warehouseInfo.checkCodeFee = ''
      }
      this.showNeedCheckCodePicker = false
    },

    /**
     * 确认入库
     */
    async confirmWarehouseEntry() {
      uni.showModal({
        title: '确认入库',
        content: `是否确认入库该订单：${this.orderDetail.item}？`,
        success: async (res) => {
          if (res.confirm) {
            try {
              // 修改订单状态
              await uni.$u.api.oderForm({
                status: '3',
                id: this.orderDetail.id
              })

              // 更新收单表单
              await uni.$u.api.updateReceiptForm({
                id: this.currentReceipt.id,
                code: this.warehouseInfo.codeStorage || '',
                expressOrderNo: this.warehouseInfo.expressOrderNo || '',
                item: this.warehouseInfo.item || '',
                checkCodeFee: this.warehouseInfo.checkCodeFee || '',
                tableFee: this.warehouseInfo.watchPrice || '',
                benefitFee: this.warehouseInfo.benefitFee || '',
                freight: this.warehouseInfo.freight || '',
                repairAmount: this.warehouseInfo.repairAmount || '',
                grossPerformance: this.computedGrossPerformance || '',
                performance: this.computedPerformance || '',
                splitRatio: this.warehouseInfo.splitRatio || '',
                receiptRemark: `${this.warehouseInfo.remarks || ''};${this.warehouseInfo.uploadedImage || ''}`,
                customerServiceName: this.warehouseInfo.customerServiceName || '',
                category: this.warehouseInfo.category || '',
                needCheckCode: this.warehouseInfo.needCheckCode || '',
                totalCost: this.computedTotalCost || ''
              })

              // 上传分成数据
              await this.addShare()

              this.$refs.uToast.show({
                type: 'success',
                message: '入库成功',
                complete: () => {
                  uni.navigateBack({
                    delta: 1
                  })
                }
              })
            } catch (error) {
              console.error('入库失败:', error)
              uni.$u.toast('入库失败')
            }
          }
        }
      })
    },

    /**
     * 上传分成
     */
    async addShare() {
      for (const item of this.profitSharingList) {
        const data = {
          id: item.id || '',
          accountType: item.accountType == '1' ? 1 : 2,
          clueId: this.currentReceipt.clueId,
          commissionRate: item.commissionRate,
          isCompanyPerformance: item.isCompanyPerformance == '1' ? 1 : 2,
          sendFormId: this.currentReceipt.sendFormId,
          userId: item.userId,
          userName: item.userName,
          receiptFormId: this.currentReceipt.id
        }
        if (item.id) {
          await uni.$u.api.clueCommissionUpdate(data)
        } else {
          await uni.$u.api.clueCommissionAdd(data)
        }
      }
    }
  }
}
</script>

<style scoped lang="scss">
@import '../styles/common.scss';

.page-four-container {
  @extend .page-container;
  padding-bottom: 100rpx;
}

.address-section {
  padding: 20rpx;

  // 防止 label 换行
  ::v-deep .u-form-item__body__left__content__label {
    white-space: nowrap !important;
    overflow: visible;
  }
}

.info-row {
  margin-bottom: 20rpx;
}

.info-input {
  height: 65rpx;
  border-radius: 8rpx;
  border: 1rpx solid #e5e7eb;
  padding: 20rpx 16rpx;
  width: 100%;
  box-sizing: border-box;
}

.click-wrapper {
  width: 100%;
  cursor: pointer;
}

.image-uploader {
  width: 100%;
  height: 65rpx;
  border: 2rpx dashed #409eff;
  border-radius: 8rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  background-color: #ecf5ff;
}

.image-preview {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 10rpx;
}

.split-table {
  width: 100%;
  margin-top: 20rpx;
}

.split-table-header {
  background-color: #f5f7fa;
  padding: 15rpx 0;
  border-bottom: 1rpx solid #e4e7ed;
}

.split-table-row {
  padding: 15rpx 0;
  border-bottom: 1rpx solid #e4e7ed;
  align-items: center;
}

.header-text {
  @include font-styles($size: tiny, $weight: regular, $color: tertiary);
  text-align: center;
  display: block;
}

.table-cell {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 10rpx;
}

.percentage-input {
  text-align: center;
  background-color: #f9f9f9;
  padding: 0rpx !important;
}

.account-type {
  padding: 4rpx 16rpx;
  border-radius: 12rpx;
  font-size: 24rpx;
  font-weight: 500;
  color: #fff;
  text-align: center;
  cursor: pointer;

  &.frontend {
    background-color: #409eff;
  }

  &.backend {
    background-color: #909399;
  }
}

.radio-wrapper {
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

.radio-circle {
  width: 32rpx;
  height: 32rpx;
  border-radius: 50%;
  border: 2rpx solid #dcdfe6;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;

  &.active {
    border-color: #67c23a;
    background-color: #67c23a;
  }
}

.confirm-button-container {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 40rpx 0;
  margin-top: 20rpx;
}

.next-btn {
  width: 95%;
  height: 80rpx;
  line-height: 80rpx;
  text-align: center;
  border-radius: 11px;
}

.add-button-container{
  justify-content: space-between;
}
</style>