backend-mini-brand/subpages/order/add.vue

<template>
  <view class="add-container">
    <common-header title="新建订单" theme="order" @back="goBack" />
    
    <view class="add-content">
      <uni-forms ref="form" :model="formData" :rules="rules" label-width="120">
        <uni-forms-item label="订单编号" name="orderNo">
          <uni-easyinput v-model="formData.orderNo" placeholder="系统自动生成" disabled />
        </uni-forms-item>
        
        <uni-forms-item label="客户名称" required name="customerName">
          <uni-easyinput v-model="formData.customerName" placeholder="请输入客户名称" />
        </uni-forms-item>
        
        <uni-forms-item label="联系电话" name="phone">
          <uni-easyinput v-model="formData.phone" placeholder="请输入联系电话" />
        </uni-forms-item>
        
        <uni-forms-item label="收货地址" name="address">
          <uni-easyinput v-model="formData.address" placeholder="请输入收货地址" />
        </uni-forms-item>
        
        <uni-forms-item label="产品名称" required name="productName">
          <uni-easyinput v-model="formData.productName" placeholder="请输入产品名称" />
        </uni-forms-item>
        
        <uni-forms-item label="订单数量" required name="quantity">
          <uni-easyinput v-model="formData.quantity" placeholder="请输入订单数量" type="number" />
        </uni-forms-item>
        
        <uni-forms-item label="单价" name="unitPrice">
          <uni-easyinput v-model="formData.unitPrice" placeholder="请输入单价" type="number" />
        </uni-forms-item>
        
        <uni-forms-item label="总金额" name="totalAmount">
          <uni-easyinput v-model="totalAmount" placeholder="自动计算" disabled />
        </uni-forms-item>
        
        <uni-forms-item label="订单备注" name="remark">
          <uni-easyinput 
            v-model="formData.remark" 
            type="textarea" 
            placeholder="请输入订单备注"
            :auto-height="true" />
        </uni-forms-item>
      </uni-forms>
      
      <view class="form-actions">
        <uni-button type="default" @click="goBack">取消</uni-button>
        <uni-button type="primary" @click="submitForm" :loading="submitting">保存</uni-button>
      </view>
    </view>
  </view>
</template>

<script>
import CommonHeader from '@/components/common-header/common-header.vue'

export default {
  name: 'OrderAdd',
  components: {
    CommonHeader
  },
  
  data() {
    return {
      formData: {
        orderNo: '',
        customerName: '',
        phone: '',
        address: '',
        productName: '',
        quantity: '',
        unitPrice: '',
        remark: ''
      },
      rules: {
        customerName: {
          rules: [{ required: true, errorMessage: '请输入客户名称' }]
        },
        productName: {
          rules: [{ required: true, errorMessage: '请输入产品名称' }]
        },
        quantity: {
          rules: [{ required: true, errorMessage: '请输入订单数量' }]
        }
      },
      submitting: false
    }
  },
  
  computed: {
    totalAmount() {
      const quantity = parseFloat(this.formData.quantity) || 0
      const unitPrice = parseFloat(this.formData.unitPrice) || 0
      return (quantity * unitPrice).toFixed(2)
    }
  },
  
  onLoad() {
    this.generateOrderNo()
  },
  
  methods: {
    generateOrderNo() {
      // 生成订单号
      const now = new Date()
      const timestamp = now.getFullYear().toString() + 
                       (now.getMonth() + 1).toString().padStart(2, '0') + 
                       now.getDate().toString().padStart(2, '0') + 
                       now.getHours().toString().padStart(2, '0') + 
                       now.getMinutes().toString().padStart(2, '0') + 
                       now.getSeconds().toString().padStart(2, '0')
      this.formData.orderNo = 'ORD' + timestamp
    },
    
    async submitForm() {
      try {
        // 表单验证
        const valid = await this.$refs.form.validate()
        if (!valid) return
        
        this.submitting = true
        
        const submitData = {
          ...this.formData,
          totalAmount: this.totalAmount
        }
        
        // TODO: Replace with actual API call
        const response = await this.$http.post('/brewery/order', submitData)
        
        this.$modal.showToast('保存成功')
        
        // 返回上一页
        setTimeout(() => {
          uni.navigateBack()
        }, 1500)
        
      } catch (error) {
        console.error('保存失败:', error)
        this.$modal.showToast('保存失败')
      } finally {
        this.submitting = false
      }
    },
    
    goBack() {
      uni.navigateBack()
    }
  }
}
</script>

<style lang="scss" scoped>
.add-container {
  min-height: 100vh;
  background: #f5f7fa;
}

.add-content {
  padding: 20rpx;
}

.form-actions {
  display: flex;
  gap: 20rpx;
  margin-top: 60rpx;
  padding: 0 20rpx;
}
</style>