【微体系】多端全栈项目实战：商业级代驾全流程落地|完结无密

<template>
  <div>
    <h1>代驾下单页面</h1>
    <el-form :model="order" label-width="80px">
      <el-form-item label="起始地点">
        <el-input v-model="order.startPoint"></el-input>
      </el-form-item>
      <el-form-item label="目的地">
        <el-input v-model="order.destination"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="submitOrder">确认下单</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
export default {
  data() {
    return {
      order: {
        startPoint: '',
        destination: ''
      }
    };
  },
  methods: {
    submitOrder() {
      // 发送订单请求到后端
      console.log('提交订单：', this.order);
    }
  }
};
</script>

java@RestController
@RequestMapping("/orders")
public class OrderController {

    @Autowired
    private OrderService orderService;

    @PostMapping("/create")
    public ResponseEntity<?> createOrder(@RequestBody Order order) {
        Order createdOrder = orderService.createOrder(order);
        return ResponseEntity.ok(createdOrder);
    }

    // 其他接口略...
}

import 'package:flutter/material.dart';

class OrderPage extends StatefulWidget {
  @override
  _OrderPageState createState() => _OrderPageState();
}

class _OrderPageState extends State<OrderPage> {
  String startPoint = '';
  String destination = '';

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('代驾下单'),
      ),
      body: Padding(
        padding: EdgeInsets.all(20.0),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            TextField(
              onChanged: (value) {
                setState(() {
                  startPoint = value;
                });
              },
              decoration: InputDecoration(labelText: '起始地点'),
            ),
            TextField(
              onChanged: (value) {
                setState(() {
                  destination = value;
                });
              },
              decoration: InputDecoration(labelText: '目的地'),
            ),
            SizedBox(height: 20.0),
            ElevatedButton(
              onPressed: () {
                // 提交订单
                print('提交订单：$startPoint -> $destination');
              },
              child: Text('确认下单'),
            ),
          ],
        ),
      ),
    );
  }
}