vue实现填写订单

Vue 实现填写订单功能

数据绑定与表单结构

使用 Vue 的 v-model 实现表单数据双向绑定，构建订单表单结构：

<template>
  <form @submit.prevent="submitOrder">
    <div>
      <label>收货人姓名</label>
      <input v-model="order.name" type="text" required>
    </div>
    <div>
      <label>联系电话</label>
      <input v-model="order.phone" type="tel" required>
    </div>
    <div>
      <label>收货地址</label>
      <textarea v-model="order.address" required></textarea>
    </div>
    <div>
      <label>商品列表</label>
      <div v-for="(item, index) in order.items" :key="index">
        {{ item.name }} - 单价: {{ item.price }} 数量: 
        <input v-model.number="item.quantity" type="number" min="1">
      </div>
    </div>
    <button type="submit">提交订单</button>
  </form>
</template>

订单数据处理

在 Vue 实例中定义订单数据和提交方法：

<script>
export default {
  data() {
    return {
      order: {
        name: '',
        phone: '',
        address: '',
        items: [
          { id: 1, name: '商品A', price: 100, quantity: 1 },
          { id: 2, name: '商品B', price: 200, quantity: 1 }
        ]
      }
    }
  },
  methods: {
    submitOrder() {
      // 计算总价
      const total = this.order.items.reduce(
        (sum, item) => sum + item.price * item.quantity, 0
      )

      // 组装提交数据
      const orderData = {
        ...this.order,
        total,
        createTime: new Date().toISOString()
      }

      console.log('提交订单:', orderData)
      // 实际项目中这里调用API接口
    }
  }
}
</script>

表单验证增强

使用 Vue 的 computed 属性实现实时验证：

computed: {
  formValid() {
    return (
      this.order.name.trim() &&
      /^1[3-9]\d{9}$/.test(this.order.phone) &&
      this.order.address.trim() &&
      this.order.items.every(item => item.quantity > 0)
    )
  }
}

订单总价实时计算

添加总价显示区域：

<div class="total-price">
  订单总价: {{ totalPrice }}元
</div>

对应计算属性：

computed: {
  totalPrice() {
    return this.order.items.reduce(
      (sum, item) => sum + item.price * item.quantity, 0
    )
  }
}

提交按钮状态控制

根据验证结果控制按钮状态：

<button 
  type="submit" 
  :disabled="!formValid"
  :class="{ 'disabled-btn': !formValid }"
>
  提交订单
</button>

样式优化

添加基础样式增强用户体验：

<style scoped>
input, textarea {
  border: 1px solid #ddd;
  padding: 8px;
  margin: 5px 0;
  width: 100%;
}
button {
  background: #42b983;
  color: white;
  padding: 10px 15px;
  border: none;
  cursor: pointer;
}
button.disabled-btn {
  background: #ccc;
  cursor: not-allowed;
}
.total-price {
  font-weight: bold;
  margin: 15px 0;
  font-size: 18px;
}
</style>