scancode-miro/pages/hexiao/jxs/add_order.vue

<template>
  <view class="page-container">
    <view class="card-item">
      <view class="card-header">
        <view class="card-title">收货信息</view>
      </view>
      <view class="card-body form-body">
        <view class="form-item">
          <text class="form-label">收货人</text>
          <input
              class="form-input"
              v-model="shippingAddress.name"
              placeholder="请输入收货人姓名"
              placeholder-class="placeholder"
          />
        </view>
        <view class="form-item">
          <text class="form-label">联系方式</text>
          <input
              class="form-input"
              type="number"
              maxlength="11"
              v-model="shippingAddress.phone"
              placeholder="请输入手机号码"
              placeholder-class="placeholder"
          />
        </view>
        <view class="form-item no-border">
          <text class="form-label">收货地址</text>
          <input
              class="form-input"
              v-model="shippingAddress.fullAddress"
              placeholder="请输入详细收货地址"
              placeholder-class="placeholder"
          />
        </view>
      </view>
    </view>

    <view class="card-item">
      <view class="card-header">
        <view class="card-title">商品信息</view>
      </view>
      <view class="card-body product-list">
        <view class="product-item" v-for="(item, index) in productList" :key="item.id">
          <view class="product-info">
            <text class="product-index">{{ index + 1 }}.</text>
            <text class="product-name">{{ item.name_ }}</text>
          </view>
          <uni-number-box max="500" v-model="item.count"></uni-number-box>

        </view>
      </view>
    </view>

    <view class="card-item">
      <view class="card-header">
        <view class="card-title">订单信息</view>
      </view>
      <view class="card-body">
        <view class="remark-label">订单备注</view>
        <textarea
            class="remark-textarea"
            v-model="remarks"
            placeholder="请输入备注信息"
            placeholder-class="placeholder"
        />
      </view>
    </view>

    <view class="footer-submit">
      <button class="submit-btn" @click="submitOrder">提交订单</button>
    </view>
  </view>
</template>

<script>
import {getProductList,addDealerOrder,getOrderDetail,editDealerOrder} from "@/api/hexiao";

export default {
  data() {
    return {
      id:0,
      // 收货地址信息，初始为空
      shippingAddress: {
        name: '',
        phone: '',
        fullAddress: ''
      },
      // 商品列表
      productList: [

      ],
      // 订单备注
      remarks: '',
      isLoading:false
    };
  },
  onLoad(opt){
    getProductList().then(res=>{
      this.productList = res.data;
    })
    this.id = opt.id;
    if(this.id>0){
      getOrderDetail(this.id).then(res=>{
       let data = res.data;
       this.shippingAddress.name = data.delivery.receiverName;
        this.shippingAddress.phone = data.delivery.receiverPhone;
        this.shippingAddress.fullAddress = data.delivery.address;

        let items = data.items;
        for (let i = 0; i < items.length; i++) {
          let item = items[i];
          let product = this.productList.find(p => p.type_ === item.productId);
          if (product) {
            product.count = item.quantity;
          }
        }
        this.remarks = data.remark;
      })
    }
  },
  methods: {
    // 提交订单
    submitOrder() {
        // 1. 数据校验 (此部分保持不变)
        if (!this.shippingAddress.name) {
          return uni.showToast({ title: '请输入收货人', icon: 'none' });
        }
        if (!/^1[3-9]\d{9}$/.test(this.shippingAddress.phone)) {
          return uni.showToast({ title: '请输入正确的手机号', icon: 'none' });
        }
        if (!this.shippingAddress.fullAddress) {
          return uni.showToast({ title: '请输入收货地址', icon: 'none' });
        }

        const items = [];
        for (let i = 0; i < this.productList.length; i++) {
          let item = this.productList[i];
          if(!item.count){
            continue;
          }
          items.push({
            productId: item.type_, // 键名从 id 改为 productId
            quantity: item.count
          })
        }
        if(items.length === 0){
          return uni.showToast({ title: '请至少选择一件商品', icon: 'none' });
        }
        // 2. 【核心改动】按照您指定的格式组合提交数据
        const finalData = {
          // 备注信息，键名为 remark
          remark: this.remarks,
          // 收货信息，键名为 delivery，是一个对象
          delivery: {
            receiverName: this.shippingAddress.name,
            receiverPhone: this.shippingAddress.phone,
            address: this.shippingAddress.fullAddress
          },
          // 商品列表，键名为 items，是一个数组
          items: items
        };
      uni.showLoading({ title: '正在提交...' });
      let self = this;
      if(self.isLoading){
        uni.showToast({ title: '请勿重复提交', icon: 'none' });
        return
      }
      self.isLoading = true;
      if(this.id>0){
        finalData.orderId = this.id;
        editDealerOrder(finalData).then(res=>{
          if(res.data){
            uni.showToast({ title: '订单提交成功', icon: 'success' });
          }
          uni.hideLoading();

          setTimeout(() =>{
            self.isLoading = false;
            uni.reLaunch({url:"/pages/hexiao/jxs/order"});
          }, 1500);
        })
      }else{
        addDealerOrder(finalData).then(res=>{
          if(res.data){
            uni.showToast({ title: '订单提交成功', icon: 'success' });
          }
          uni.hideLoading();

          setTimeout(() =>{
            self.isLoading = false;
            uni.reLaunch({url:"/pages/hexiao/jxs/order"});
          }, 1500);
        })
      }

    }
  }
}
</script>

<style lang="scss" scoped>
.page-container {
  min-height: 100vh;
  background: linear-gradient(to bottom, #e4efff, #f5f6fa 60%);
  padding: 30rpx;
  box-sizing: border-box;
  padding-bottom: 180rpx;
}

.card-item {
  background-color: #ffffff;
  border-radius: 20rpx;
  padding: 30rpx;
  margin-bottom: 30rpx;
  box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.05);
  position: relative;

  &::before {
    content: '';
    position: absolute;
    left: 0;
    top: 35rpx;
    width: 8rpx;
    height: 30rpx;
    background-color: #3c82f8;
    border-radius: 0 4rpx 4rpx 0;
  }
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-bottom: 10rpx; // 缩小header和body间距
  .card-title {
    font-size: 32rpx;
    font-weight: bold;
  }
}

.card-body {
  padding-top: 10rpx;
  &.form-body {
    padding-top: 0;
  }
}

// 新增：表单项样式
.form-item {
  display: flex;
  flex-direction: column;
  padding: 20rpx 0;
  border-bottom: 1rpx solid #f5f5f5;

  &.no-border {
    border-bottom: none;
  }

  .form-label {
    font-size: 28rpx;
    color: #666;
  }
  .form-input {
    font-size: 30rpx;
    color: #333;
    padding-top: 15rpx;
  }
  .placeholder {
    color: #c0c4cc;
  }
}

.product-list {
  border-top: 1rpx solid #f5f5f5;
  .product-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20rpx 0;

    .product-info {
      display: flex;
      align-items: center;
      .product-index {
        font-size: 28rpx;
        color: #999;
        margin-right: 15rpx;
      }
      .product-name {
        font-size: 30rpx;
        font-weight: 500;
      }
    }
  }
}

.remark-label {
  font-size: 28rpx;
  color: #666;
}
.remark-textarea {
  margin-top: 20rpx;
  width: 100%;
  font-size: 30rpx;
  background-color: #f5f6fa;
  padding: 20rpx;
  box-sizing: border-box;
  border-radius: 10rpx;
  height: 150rpx;
}

.footer-submit {
  position: fixed;
  left: 0;
  bottom: 0;
  width: 100%;
  padding: 20rpx 30rpx;
  background-color: #f5f6fa;
  box-sizing: border-box;
  padding-bottom: calc(20rpx + constant(safe-area-inset-bottom));
  padding-bottom: calc(20rpx + env(safe-area-inset-bottom));
  z-index: 100;
}
.submit-btn {
  background-color: #3c82f8;
  color: #ffffff;
  border-radius: 50rpx;
  font-size: 32rpx;
  height: 90rpx;
  line-height: 90rpx;
  &::after { border: none; }
}
</style>