haha/haha-admin-mp/src/pages/products/apply-form.vue

<template>
  <view class="page">
    <NavBar :title="pageTitle" :showBack="true" />

    <scroll-view class="form-scroll" scroll-y>
      <view class="form-section">
        <view class="section-title">
          <text class="section-title-text">基本信息</text>
        </view>

        <view class="form-item required">
          <text class="form-label">商品名称</text>
          <view class="form-input-wrap">
            <input
              class="form-input"
              v-model="formData.productName"
              placeholder="请输入商品名称"
              :maxlength="50"
              :disabled="isView"
            />
          </view>
        </view>

        <view class="form-item required">
          <text class="form-label">条形码</text>
          <view class="form-input-wrap">
            <input
              class="form-input"
              v-model="formData.barcode"
              placeholder="请输入条形码"
              :maxlength="30"
              :disabled="isView"
              @blur="onBarcodeBlur"
            />
            <view v-if="!isView" class="scan-btn" @click="scanBarcode">
              <view class="scan-icon"></view>
            </view>
          </view>
          <text v-if="barcodeWarning" class="form-warning">该条码已存在商品库中</text>
        </view>

        <view class="form-item">
          <text class="form-label">分类</text>
          <view class="form-input-wrap">
            <input
              class="form-input"
              v-model="formData.category"
              placeholder="请输入分类"
              :maxlength="20"
              :disabled="isView"
            />
          </view>
        </view>

        <view class="form-item">
          <text class="form-label">品牌</text>
          <view class="form-input-wrap">
            <input
              class="form-input"
              v-model="formData.brand"
              placeholder="请输入品牌"
              :maxlength="30"
              :disabled="isView"
            />
          </view>
        </view>

        <view class="form-item">
          <text class="form-label">规格</text>
          <view class="form-input-wrap">
            <input
              class="form-input"
              v-model="formData.specification"
              placeholder="请输入规格"
              :maxlength="30"
              :disabled="isView"
            />
          </view>
        </view>

        <view class="form-item">
          <text class="form-label">单位</text>
          <view class="form-input-wrap">
            <input
              class="form-input"
              v-model="formData.unit"
              placeholder="请输入单位"
              :maxlength="10"
              :disabled="isView"
            />
          </view>
        </view>
      </view>

      <view class="form-section">
        <view class="section-title">
          <text class="section-title-text">价格信息</text>
        </view>

        <view class="form-item">
          <text class="form-label">售价(元)</text>
          <view class="form-input-wrap">
            <input
              class="form-input"
              type="digit"
              :value="priceInputs.price"
              placeholder="请输入售价"
              :disabled="isView"
              @input="onPriceInput('price', $event)"
              @blur="onPriceBlur('price')"
            />
          </view>
        </view>

        <view class="form-item">
          <text class="form-label">成本价(元)</text>
          <view class="form-input-wrap">
            <input
              class="form-input"
              type="digit"
              :value="priceInputs.costPrice"
              placeholder="请输入成本价"
              :disabled="isView"
              @input="onPriceInput('costPrice', $event)"
              @blur="onPriceBlur('costPrice')"
            />
          </view>
        </view>
      </view>

      <view class="form-section">
        <view class="section-title">
          <text class="section-title-text">加工图（5张，按顺序上传）</text>
        </view>

        <view class="image-upload-area">
          <view class="labeled-image-list">
            <view class="labeled-image-item" v-for="(item, index) in processedImageSlots" :key="'p'+index">
              <text class="labeled-image-title">{{ item.label }}</text>
              <view class="label-image-wrap">
                <image
                  v-if="item.url"
                  class="upload-image"
                  :src="item.url"
                  mode="aspectFill"
                  @click="previewLabeledImage(item.url)"
                />
                <view v-else-if="!isView" class="image-add" @click="chooseLabeledImage(index, 'processed')">
                  <text class="add-icon">+</text>
                </view>
              </view>
              <view v-if="!isView && item.url" class="label-image-delete" @click="removeLabeledImage(index, 'processed')">
                <text class="delete-icon">×</text>
              </view>
            </view>
          </view>
        </view>
      </view>

      <view class="form-section">
        <view class="section-title">
          <text class="section-title-text">原图（4张，按顺序上传）</text>
        </view>

        <view class="image-upload-area">
          <view class="labeled-image-list">
            <view class="labeled-image-item" v-for="(item, index) in originalImageSlots" :key="'o'+index">
              <text class="labeled-image-title">{{ item.label }}</text>
              <view class="label-image-wrap">
                <image
                  v-if="item.url"
                  class="upload-image"
                  :src="item.url"
                  mode="aspectFill"
                  @click="previewLabeledImage(item.url)"
                />
                <view v-else-if="!isView" class="image-add" @click="chooseLabeledImage(index, 'original')">
                  <text class="add-icon">+</text>
                </view>
              </view>
              <view v-if="!isView && item.url" class="label-image-delete" @click="removeLabeledImage(index, 'original')">
                <text class="delete-icon">×</text>
              </view>
            </view>
          </view>
        </view>
      </view>

      <!-- 货道参数 -->
      <view class="form-section">
        <view class="section-title">
          <text class="section-title-text">货道参数</text>
        </view>

        <view class="form-row">
          <view class="form-item form-item-half">
            <text class="form-label">长度(mm)</text>
            <view class="form-input-wrap">
              <input class="form-input" type="number" v-model.number="formData.length" placeholder="长度" :disabled="isView" />
            </view>
          </view>
          <view class="form-item form-item-half">
            <text class="form-label">宽度(mm)</text>
            <view class="form-input-wrap">
              <input class="form-input" type="number" v-model.number="formData.width" placeholder="宽度" :disabled="isView" />
            </view>
          </view>
        </view>
        <view class="form-row">
          <view class="form-item form-item-half">
            <text class="form-label">高度(mm)</text>
            <view class="form-input-wrap">
              <input class="form-input" type="number" v-model.number="formData.height" placeholder="高度" :disabled="isView" />
            </view>
          </view>
          <view class="form-item form-item-half">
            <text class="form-label">陈列高度(mm)</text>
            <view class="form-input-wrap">
              <input class="form-input" type="number" v-model.number="formData.exhibitHeight" placeholder="陈列高度" :disabled="isView" />
            </view>
          </view>
        </view>
        <view class="form-row">
          <view class="form-item form-item-half">
            <text class="form-label">商品占列</text>
            <view class="form-input-wrap">
              <input class="form-input" type="number" v-model.number="formData.columns" placeholder="占列数" :disabled="isView" />
            </view>
          </view>
          <view class="form-item form-item-half">
            <text class="form-label">每货道数量</text>
            <view class="form-input-wrap">
              <input class="form-input" type="number" v-model.number="formData.numbers" placeholder="数量" :disabled="isView" />
            </view>
          </view>
        </view>
      </view>

      <!-- 其他信息 -->
      <view class="form-section">
        <view class="section-title">
          <text class="section-title-text">其他信息</text>
        </view>

        <view class="form-item">
          <text class="form-label">商品类型</text>
          <view class="form-input-wrap">
            <picker :range="productTypeOptions" :range-key="'label'" :value="formData.productType || 0" @change="onProductTypeChange" :disabled="isView">
              <text class="picker-value" :class="{ 'picker-placeholder': formData.productType === undefined }">
                {{ productTypeLabel }}
              </text>
            </picker>
          </view>
        </view>

        <view class="form-item">
          <text class="form-label">标品/非标品</text>
          <view class="form-input-wrap">
            <picker :range="standardOptions" :range-key="'label'" :value="formData.standard ? formData.standard - 1 : 0" @change="onStandardChange" :disabled="isView">
              <text class="picker-value" :class="{ 'picker-placeholder': formData.standard === undefined }">
                {{ standardLabel }}
              </text>
            </picker>
          </view>
        </view>

        <view class="form-item">
          <text class="form-label">学习机号</text>
          <view class="form-input-wrap">
            <input class="form-input" v-model="formData.stickerNum" placeholder="请输入学习机号" :maxlength="20" :disabled="isView" />
          </view>
        </view>

        <view class="form-item textarea-item">
          <text class="form-label">申请原因</text>
          <textarea
            class="form-textarea"
            v-model="formData.reason"
            placeholder="请输入申请原因"
            :maxlength="500"
            :disabled="isView"
            auto-height
            :style="{ minHeight: '120rpx' }"
          />
          <text v-if="!isView" class="char-count">{{ (formData.reason || '').length }}/500</text>
        </view>
      </view>

      <view class="form-section">
        <view class="section-title">
          <text class="section-title-text">商品描述</text>
        </view>

        <view class="form-item textarea-item">
          <textarea
            class="form-textarea"
            v-model="formData.description"
            placeholder="请输入商品描述"
            :maxlength="500"
            :disabled="isView"
            auto-height
            :style="{ minHeight: '160rpx' }"
          />
          <text v-if="!isView" class="char-count">{{ (formData.description || '').length }}/500</text>
        </view>
      </view>

      <view class="bottom-spacer"></view>
    </scroll-view>

    <view class="footer-bar" v-if="!isView">
      <view class="btn-draft" @click="handleSaveDraft" v-if="!isEdit">
        <text class="btn-draft-text">存草稿</text>
      </view>
      <view class="btn-submit" @click="handleSubmit">
        <text class="btn-submit-text">{{ isEdit ? '保存修改' : '提交申请' }}</text>
      </view>
    </view>
  </view>
</template>

<script setup lang="ts">
import { ref, reactive, computed, onMounted } from 'vue';
import NavBar from '@/components/NavBar.vue';
import {
  getNewProductApplyById,
  submitNewProductApply,
  saveNewProductApplyDraft,
  updateNewProductApply,
  checkBarcode,
  type NewProductApplyItem
} from '@/api/newProductApply';
import { showToast } from '@/utils/common';
import { UPLOAD_URL, IMAGE_BASE_URL } from '@/utils/config';

type PageMode = 'add' | 'edit' | 'view';

const mode = ref<PageMode>('add');
const editId = ref<number>(0);
const barcodeWarning = ref(false);

// 商品类型选项
const productTypeOptions = [{ label: '静态', value: 0 }, { label: '动态', value: 1 }];
const standardOptions = [{ label: '标品', value: 1 }, { label: '非标品', value: 2 }];

const productTypeLabel = computed(() => {
  const opt = productTypeOptions.find(o => o.value === formData.productType);
  return opt ? opt.label : '请选择商品类型';
});
const standardLabel = computed(() => {
  const opt = standardOptions.find(o => o.value === formData.standard);
  return opt ? opt.label : '请选择';
});

// 9张分类图片 slots
const processedLabels = ['正面图', '背面图', '侧面图', '顶部图', '称重图'];
const originalLabels = ['正面原图', '背面原图', '侧面原图', '顶部原图'];

const processedImageSlots = ref(processedLabels.map(label => ({ label, url: '' })));
const originalImageSlots = ref(originalLabels.map(label => ({ label, url: '' })));

const isEdit = computed(() => mode.value === 'edit');
const isView = computed(() => mode.value === 'view');
const pageTitle = computed(() => {
  if (isView.value) return '查看申请';
  if (isEdit.value) return '编辑申请';
  return '新品申请';
});

const formData = reactive<NewProductApplyItem>({
  productName: '',
  barcode: '',
  category: '',
  brand: '',
  specification: '',
  unit: '',
  price: 0,
  costPrice: 0,
  images: '',
  description: '',
  productType: 0,
  standard: 1,
  stickerNum: '',
  length: undefined,
  width: undefined,
  height: undefined,
  exhibitHeight: undefined,
  columns: undefined,
  numbers: undefined,
  reason: ''
});

const validate = (): string | null => {
  if (!formData.productName.trim()) {
    return '请输入商品名称';
  }
  if (!formData.barcode.trim()) {
    return '请输入条形码';
  }
  return null;
};

const priceInputs = reactive({ price: '', costPrice: '' });

const initPriceInputs = () => {
  priceInputs.price = formData.price ? String(formData.price) : '';
  priceInputs.costPrice = formData.costPrice ? String(formData.costPrice) : '';
};

const onPriceInput = (field: 'price' | 'costPrice', e: any) => {
  let val = e.detail.value;
  val = val.replace(/[^\d.]/g, '');
  if (val.startsWith('.')) val = '0' + val;
  const parts = val.split('.');
  if (parts.length > 1) {
    val = parts[0] + '.' + parts.slice(1).join('').slice(0, 2);
  }
  if (parts.length > 2) {
    val = parts[0] + '.' + parts[1];
  }
  priceInputs[field] = val;
};

const onPriceBlur = (field: 'price' | 'costPrice') => {
  const val = parseFloat(priceInputs[field]);
  formData[field] = isNaN(val) ? 0 : Math.max(0, parseFloat(val.toFixed(2)));
  priceInputs[field] = formData[field] ? String(formData[field]) : '';
};

const scanBarcode = () => {
  uni.scanCode({
    scanType: ['barCode'],
    success: (res) => {
      if (res.result) {
        formData.barcode = res.result;
        onBarcodeBlur();
      }
    },
    fail: () => {
      showToast('扫码取消或失败');
    }
  });
};

const onBarcodeBlur = async () => {
  if (!formData.barcode.trim()) {
    barcodeWarning.value = false;
    return;
  }
  try {
    const res = await checkBarcode(formData.barcode.trim());
    if (res && res.exists) {
      barcodeWarning.value = true;
      if (res.product) {
        formData.productName = res.product.productName || formData.productName;
        formData.category = res.product.category || formData.category;
        formData.brand = res.product.brand || formData.brand;
        formData.specification = res.product.specification || formData.specification;
        formData.unit = res.product.unit || formData.unit;
        formData.price = res.product.price || formData.price;
      }
    } else {
      barcodeWarning.value = false;
    }
  } catch (error) {
    barcodeWarning.value = false;
  }
};

const onProductTypeChange = (e: any) => {
  formData.productType = productTypeOptions[e.detail.value].value;
};

const onStandardChange = (e: any) => {
  formData.standard = standardOptions[e.detail.value].value;
};

// 分类图片上传
const chooseLabeledImage = (index: number, type: 'processed' | 'original') => {
  uni.chooseImage({
    count: 1,
    sizeType: ['compressed'],
    sourceType: ['album', 'camera'],
    success: async (res) => {
      const tempPath = res.tempFilePaths[0];
      try {
        const uploadedUrl = await uploadImage(tempPath);
        if (type === 'processed') {
          processedImageSlots.value[index].url = uploadedUrl;
        } else {
          originalImageSlots.value[index].url = uploadedUrl;
        }
        syncImagesToForm();
      } catch (error) {
        console.error('上传图片失败', error);
      }
    }
  });
};

const removeLabeledImage = (index: number, type: 'processed' | 'original') => {
  if (type === 'processed') {
    processedImageSlots.value[index].url = '';
  } else {
    originalImageSlots.value[index].url = '';
  }
  syncImagesToForm();
};

const previewLabeledImage = (url: string) => {
  uni.previewImage({
    current: url.startsWith('http') ? url : `${IMAGE_BASE_URL}${url}`,
    urls: [url.startsWith('http') ? url : `${IMAGE_BASE_URL}${url}`]
  });
};

const syncImagesToForm = () => {
  const allUrls = [
    ...processedImageSlots.value.map(s => s.url),
    ...originalImageSlots.value.map(s => s.url)
  ];
  formData.images = allUrls.join(',');
};

const uploadImage = (tempFilePath: string): Promise<string> => {
  return new Promise((resolve, reject) => {
    uni.uploadFile({
      url: UPLOAD_URL,
      filePath: tempFilePath,
      name: 'file',
      success: (uploadRes) => {
        try {
          const data = JSON.parse(uploadRes.data);
          if (data.code === 200 && data.data) {
            const url = data.data.url || data.data;
            resolve(url.startsWith('http') ? url : `${IMAGE_BASE_URL}${url}`);
          } else {
            reject(new Error(data.message || '上传失败'));
          }
        } catch {
          reject(new Error('解析上传结果失败'));
        }
      },
      fail: (err) => {
        reject(err);
      }
    });
  });
};


const handleSaveDraft = async () => {
  const error = validate();
  if (error) {
    showToast(error);
    return;
  }
  try {
    uni.showLoading({ title: '保存中...', mask: true });
    await saveNewProductApplyDraft(formData);
    uni.hideLoading();
    showToast('草稿保存成功', 'success');
    setTimeout(() => {
      uni.navigateBack();
    }, 500);
  } catch (error) {
    uni.hideLoading();
    console.error('保存草稿失败', error);
  }
};

const handleSubmit = async () => {
  const error = validate();
  if (error) {
    showToast(error);
    return;
  }
  try {
    uni.showLoading({ title: '提交中...', mask: true });
    if (isEdit.value) {
      await updateNewProductApply(editId.value, formData);
      showToast('修改成功', 'success');
    } else {
      await submitNewProductApply(formData);
      showToast('提交成功', 'success');
    }
    uni.hideLoading();
    setTimeout(() => {
      uni.navigateBack();
    }, 500);
  } catch (error) {
    uni.hideLoading();
    console.error('提交失败', error);
  }
};

const loadDetail = async (id: number) => {
  try {
    uni.showLoading({ title: '加载中...', mask: true });
    const res: any = await getNewProductApplyById(id);
    uni.hideLoading();
    if (res) {
      Object.assign(formData, {
        productName: res.productName || res.name || '',
        barcode: res.barcode || '',
        category: res.category || '',
        brand: res.brand || '',
        specification: res.specification || '',
        unit: res.unit || '',
        price: res.price || 0,
        costPrice: res.costPrice || res.cost || 0,
        images: res.images || '',
        description: res.description || '',
        productType: res.productType ?? 0,
        standard: res.standard ?? 1,
        stickerNum: res.stickerNum || '',
        length: res.length ?? undefined,
        width: res.width ?? undefined,
        height: res.height ?? undefined,
        exhibitHeight: res.exhibitHeight ?? undefined,
        columns: res.columns ?? undefined,
        numbers: res.numbers ?? undefined,
        reason: res.reason || ''
      });
      initPriceInputs();

      // 解析图片到分类slots：优先从独立字段，其次从逗号分隔字符串
      const allUrls: string[] = [];
      const directFields = [res.imageUrl, res.imageUrl2, res.imageUrl3, res.imageUrl4, res.imageUrl5,
        res.originalImageUrl1, res.originalImageUrl2, res.originalImageUrl3, res.originalImageUrl4];
      const hasDirect = directFields.some((f: string) => f);
      if (hasDirect) {
        for (const f of directFields) allUrls.push(f || '');
      } else if (res.images) {
        const parts = res.images.split(',');
        for (const p of parts) allUrls.push((p || '').trim());
      }
      for (let i = 0; i < 5 && i < allUrls.length; i++) {
        processedImageSlots.value[i].url = allUrls[i] || '';
      }
      for (let i = 0; i < 4 && i < allUrls.length - 5; i++) {
        originalImageSlots.value[i].url = allUrls[5 + i] || '';
      }
    }
  } catch (error) {
    uni.hideLoading();
    console.error('加载详情失败', error);
  }
};

onMounted(() => {
  const pages = getCurrentPages();
  const currentPage = pages[pages.length - 1] as any;
  const options = currentPage?.options || {};
  const id = options.id ? Number(options.id) : 0;
  const pageMode = options.mode || '';

  if (id) {
    editId.value = id;
    if (pageMode === 'view') {
      mode.value = 'view';
    } else {
      mode.value = 'edit';
    }
    loadDetail(id);
  }
});
</script>

<style lang="scss" scoped>
.page {
  min-height: 100vh;
  background: $bg-color-page;
  display: flex;
  flex-direction: column;
}

.form-scroll {
  flex: 1;
  padding: 24rpx;
  height: 0;
}

.form-section {
  background: $bg-color-card;
  border-radius: $radius-lg;
  padding: 0 24rpx;
  margin-bottom: 20rpx;
  box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.04);
}

.section-title {
  padding: 28rpx 0 12rpx;
}

.section-title-text {
  font-size: $font-size-base;
  font-weight: 600;
  color: $text-color-primary;
}

.form-item {
  padding: 18rpx 0;

  &.required .form-label::before {
    content: '*';
    color: $error-color;
    margin-right: 6rpx;
  }

  &.textarea-item {
    padding-bottom: 20rpx;
  }
}

.form-label {
  font-size: $font-size-sm;
  color: $text-color-secondary;
  margin-bottom: 12rpx;
  display: block;
}

.form-input-wrap {
  display: flex;
  align-items: center;
  background: #FAFAFA;
  border-radius: $radius-base;
  padding: 0 20rpx;
  height: 80rpx;
}

.form-input {
  flex: 1;
  height: 80rpx;
  font-size: $font-size-base;
  color: $text-color-primary;
}

.scan-btn {
  width: 60rpx;
  height: 60rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-left: 12rpx;
  border-radius: $radius-base;
  background: $primary-color-bg;

  &:active { opacity: 0.7; }
}

.scan-icon {
  width: 36rpx;
  height: 30rpx;
  border: 3rpx solid $primary-color;
  border-radius: 4rpx;
  position: relative;

  &::after {
    content: '';
    position: absolute;
    top: -8rpx;
    right: -8rpx;
    width: 12rpx;
    height: 3rpx;
    background: $primary-color;
    border-radius: 2rpx;
  }
}

.form-warning {
  font-size: $font-size-xs;
  color: $warning-color;
  margin-top: 8rpx;
  display: block;
}

.form-textarea {
  width: 100%;
  background: #FAFAFA;
  border-radius: $radius-base;
  padding: 20rpx;
  font-size: $font-size-base;
  color: $text-color-primary;
  box-sizing: border-box;
}

.char-count {
  display: block;
  text-align: right;
  font-size: $font-size-xs;
  color: $text-color-muted;
  margin-top: 8rpx;
}

.image-upload-area {
  padding: 20rpx 0;
}

.labeled-image-list {
  display: flex;
  flex-wrap: wrap;
  gap: 16rpx;
}

.labeled-image-item {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8rpx;
}

.labeled-image-title {
  font-size: 22rpx;
  color: $text-color-muted;
}

.label-image-wrap {
  width: 150rpx;
  height: 150rpx;
  border-radius: $radius-base;
  overflow: hidden;
  background: #FAFAFA;
}

.label-image-wrap .upload-image {
  width: 150rpx;
  height: 150rpx;
  border-radius: $radius-base;
  background: $bg-color-page;
}

.label-image-wrap .image-add {
  width: 150rpx;
  height: 150rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #FAFAFA;

  &:active { opacity: 0.8; }
}

.label-image-delete {
  position: absolute;
  top: 18rpx;
  right: 2rpx;
  width: 36rpx;
  height: 36rpx;
  background: $error-color;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.image-list {
  display: flex;
  flex-wrap: wrap;
  gap: 16rpx;
}

.image-item {
  position: relative;
  width: 200rpx;
  height: 200rpx;
}

.upload-image {
  width: 200rpx;
  height: 200rpx;
  border-radius: $radius-base;
  background: $bg-color-page;
}

.image-delete {
  position: absolute;
  top: -12rpx;
  right: -12rpx;
  width: 40rpx;
  height: 40rpx;
  background: $error-color;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.2);
}

.delete-icon {
  font-size: 28rpx;
  color: #fff;
  line-height: 1;
}

.image-add {
  width: 200rpx;
  height: 200rpx;
  border-radius: $radius-base;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: #FAFAFA;

  &:active {
    opacity: 0.8;
  }
}

.add-icon {
  font-size: 56rpx;
  color: $text-color-muted;
  line-height: 1;
}

.add-text {
  font-size: $font-size-xs;
  color: $text-color-muted;
  margin-top: 8rpx;
}

.image-tip {
  font-size: $font-size-xs;
  color: $text-color-placeholder;
  margin-top: 12rpx;
  display: block;
}

// 货道参数双列布局
.form-row {
  display: flex;
  gap: 20rpx;
}

.form-item-half {
  flex: 1;
  min-width: 0;
}

// picker 文本样式
.picker-value {
  font-size: $font-size-base;
  color: $text-color-primary;
}

.picker-placeholder {
  color: $text-color-placeholder;
}

.bottom-spacer {
  height: 140rpx;
}

.footer-bar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  gap: 20rpx;
  padding: 20rpx 24rpx;
  padding-bottom: calc(20rpx + env(safe-area-inset-bottom));
  background: $bg-color-card;
  border-top: 1rpx solid $border-color;
  z-index: 100;
}

.btn-draft {
  flex: 1;
  height: 88rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: $radius-full;
  border: 2rpx solid $border-color;

  &:active { opacity: 0.7; }
}

.btn-draft-text {
  font-size: $font-size-lg;
  color: $text-color-secondary;
  font-weight: 500;
}

.btn-submit {
  flex: 2;
  height: 88rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  background: $primary-color;
  border-radius: $radius-full;

  &:active { opacity: 0.8; }
}

.btn-submit-text {
  font-size: $font-size-lg;
  color: $text-color-primary;
  font-weight: 600;
}
</style>