front-end/hdApp/src/admin/express/create.vue

<template>
  <view class="app-main app-content">
    <view class="express-form-container">
      <!-- 订单信息显示 -->
      <view class="order-info-section" v-if="orderInfo">
        <view class="section-title">
          订单信息
          <button class="admin-button-com mini-btn" @click="goToModifyPage" style="float: right;">修改</button>
        </view>
        <view class="info-item">
          <text class="label">下单客户：</text>
          <text class="value">{{ orderInfo.customName }}</text>
        </view>
        <view class="info-item">
          <text class="label">下单手机：</text>
          <text class="value">{{ orderInfo.bookMobile }}</text>
        </view>
        <view class="info-item">
          <text class="label">订单编号：</text>
          <text class="value">{{ orderInfo.orderSn }}</text>
        </view>
        <view class="info-item">
          <text class="label">收货姓名：</text>
          <text class="value">{{ expressForm.user_name }}</text>
        </view>
        <view class="info-item">
          <text class="label">手机号码：</text>
          <text class="value">{{ expressForm.user_phone }}</text>
        </view>
        <view class="info-item">
          <text class="label">详细地址：</text>
          <view class="value-container">
            <text class="value">{{orderInfo.address}}{{orderInfo.floor}}</text>
            <view v-if="orderInfo.fullAddress!=orderInfo.showAddress && orderInfo.showAddress!=''" class="secondary-address">
              <text style="color:#a7a0a0;">{{ orderInfo.showAddress }}</text>
            </view>
          </view>
        </view>
      </view>

      <!-- 包裹信息 -->
      <view class="form-section">
        <view class="section-title">商品信息</view>
        <view class="form-item">
          <text class="item-label">商品数量</text>
          <view class="item-value">
            <input class="item-input" type="number" v-model="expressForm.packageNum" placeholder="请输入包裹数量" />
          </view>
        </view>
        <view class="form-item required">
          <text class="item-label">商品重量</text>
          <view class="item-value">
            <input class="item-input" type="digit" v-model="expressForm.weight" placeholder="公斤" @focus="expressForm.weight=''" />
          </view>
        </view>
        <view class="form-item">
          <text class="item-label">配送费用</text>
          <view class="item-value">
            <text class="fee-text">¥{{ deliveryFee }}</text>
          </view>
        </view>
      </view>

      <!-- 操作按钮 -->
      <view class="button-section" style="display: flex; justify-content: center; gap: 50rpx;">
        <button class="admin-button-com blue big" @click="queryDeliveryFee">
          查运费
        </button>
        <button class="admin-button-com blue big" style="padding: 0 30rpx; display: flex; align-items: center; justify-content: center;" @click="submitExpress">提交</button>
      </view>
    </view>
  </view>
</template>

<script>
import { getStoreFee, createExpressOrder } from '@/api/shop-express'
import { getDetail } from '@/api/order'

export default {
  name: 'ExpressCreate',
  data() {
    return {
      orderId: '',
      orderInfo: null,
      // 配送表单数据
      expressForm: {
        packageNum: 1,
        price: 0,
        weight:'',
        user_name: '',
        user_phone: '',
        user_lng: 0,
        user_lat: 0,
        user_address: '',
        note: ''
      },
      cargo: {
        name: '',
        price: 0,
        type: 0,
        num: 0,
      },
      // 配送费用
      deliveryFee: 0,
      refreshPage:0
    }
  },
  onLoad(options) {
    if (options.orderId) {
      this.orderId = options.orderId
    }

    //返回上一页时刷新
    let pages = getCurrentPages();
    let prevPage = pages[ pages.length - 2 ];
    prevPage.$vm.refreshPage = 1

  },
  onShow() {
    if(this.orderId){
      this.getOrderDetail()
    } else {
      setTimeout(() => {
        this.getOrderDetail()
      }, 100)
    }

    if(this.refreshPage == 1){
      this.getOrderDetail()
      this.refreshPage = 0
    }

  },
  methods: {
    init(){},
    /**
     * 跳转到修改订单页面
     */
    goToModifyPage() {
      uni.navigateTo({
        url: `/admin/order/modify?id=${this.orderId}`
      })
    },

    /**
     * 获取订单详情
     */
    async getOrderDetail() {
        const res = await getDetail({ id: this.orderId })
        if (res.code === 1) {
          this.orderInfo = res.data
          this.expressForm.weight = res.data.weight?parseFloat(res.data.weight):0
          this.expressForm.price = res.data.prePrice || 0
          // 自动填充收货信息
          this.expressForm.user_name = res.data.receiveUserName || res.data.bookName || ''
          this.expressForm.user_phone = res.data.receiveMobile || res.data.bookMobile || ''
          this.expressForm.user_address = res.data.dist + res.data.address + res.data.floor
          this.expressForm.user_lng = res.data.long || 0
          this.expressForm.user_lat = res.data.lat || 0
        }
    },
    /**
     * 查询配送运费
     */
    async queryDeliveryFee() {
      // 验证必填字段
      if (!this.expressForm.weight || Number(this.expressForm.weight) <= 0) {
        this.$msg('请输入重量')
        return
      }
      if (!this.expressForm.user_name) {
        this.$msg('收货人姓名不能为空')
        return
      }
      if (!this.expressForm.user_phone) {
        this.$msg('收货人手机号不能为空')
        return
      }
      if (!this.expressForm.user_address) {
        this.$msg('收货地址不能为空')
        return
      }
      const data = {
        orderId: this.orderId,
        price: this.expressForm.price,
        weight: Number(this.expressForm.weight),
        packageNum: this.expressForm.packageNum,
        user_name: this.expressForm.user_name,
        user_phone: this.expressForm.user_phone,
        user_address: this.expressForm.user_address,
        user_lng: this.expressForm.user_lng,
        user_lat: this.expressForm.user_lat
      }
      const res = await getStoreFee(data)
      if (res.code === 1) {
        const deliveryFee = res.data.est_fee || '0'
        this.deliveryFee = deliveryFee/100.0
        this.$msg('运费查询成功')
      }
    },

    /**
     * 提交配送订单
     */
    async submitExpress() {
      // 验证必填字段
      if (!this.expressForm.weight || Number(this.expressForm.weight) <= 0) {
        this.$msg('请输入重量')
        return
      }
      if (!this.expressForm.user_name) {
        this.$msg('收货人姓名不能为空')
        return
      }
      if (!this.expressForm.user_phone) {
        this.$msg('收货人手机号不能为空')
        return
      }
      if (!this.expressForm.user_address) {
        this.$msg('收货地址不能为空')
        return
      }
      this.$util.confirmModal({content: '确认呼叫跑腿？'}, async () => {
          const data = {
            orderId: this.orderId,
            weight: Number(this.expressForm.weight),
            packageNum: this.expressForm.packageNum,
            user_name: this.expressForm.user_name,
            user_phone: this.expressForm.user_phone,
            user_address: this.expressForm.user_address,
            user_lng: this.expressForm.user_lng,
            user_lat: this.expressForm.user_lat,
            note: this.expressForm.note
          }
          const res = await createExpressOrder(data)
          if (res.code === 1) {
            this.$msg('提交成功')
            // 返回订单列表页面
            setTimeout(() => {
              uni.navigateBack()
            }, 1500)
          }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.app-content {
  padding: 20upx;
  background-color: #f5f5f5;
  min-height: 100vh;
}

.express-form-container {
  max-width: 750upx;
  margin: 0 auto;
}

.order-info-section {
  background: white;
  border-radius: 12upx;
  padding: 30upx;
  margin-bottom: 20upx;

  .info-item {
    display: flex;
    align-items: center;
    margin-bottom: 20upx;
    
    &:last-child {
      margin-bottom: 0;
    }

    .label {
      width: 150upx;
      color: #666;
      font-size: 28upx;
    }

    .value-container {
      flex: 1;
    }
    .value {
      color: black;
      font-size: 28upx;
    }
    .secondary-address {
      margin-top: 10upx;
      font-size: 28upx;
    }
  }
}

.form-section {
  background: white;
  border-radius: 12upx;
  padding: 30upx;
  margin-bottom: 20upx;
}

.section-title {
  font-size: 32upx;
  font-weight: bold;
  color: #333;
  margin-bottom: 30upx;
  padding-bottom: 20upx;
  border-bottom: 2upx solid #eee;
}

.section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 30upx;
  padding-bottom: 20upx;
  border-bottom: 2upx solid #eee;

  .title {
    font-size: 32upx;
    font-weight: bold;
    color: #333;
  }
}

.form-item {
  display: flex;
  align-items: flex-start;
  margin-bottom: 20upx;
  
  &:last-child {
    margin-bottom: 0;
  }

  &.required .item-label::after {
    content: '*';
    color: #ff4d4f;
    margin-left: 4upx;
  }

  .item-label {
    width: 140upx;
    color: #333;
    font-size: 28upx;
    padding-top: 16upx;
    flex-shrink: 0;
  }

  .item-value {
    flex: 1;
    display: flex;
    align-items: center;
    min-height: 80upx;

    .fee-text {
      color: #ff2842;
      font-weight: bold;
      font-size: 36upx;
      line-height: 80upx;
    }
  }

  .item-input {
    width: 100%;
    height: 80upx;
    line-height: 80upx;
    border: 2upx solid #eee;
    border-radius: 8upx;
    padding: 0 20upx;
    font-size: 28upx;
    background: #fff;

    &:focus {
      border-color: #007aff;
    }
  }

  .item-textarea {
    flex: 1;
    max-height: 150upx;
    min-height: 80upx;
    border: 2upx solid #eee;
    border-radius: 8upx;
    padding: 20upx;
    font-size: 28upx;
    background: #fff;

    &.large {
      min-height: 160upx;
    }

    &:focus {
      border-color: #007aff;
    }
  }
}

.fee-display {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 30upx;
  background: #f0f9ff;
  border-radius: 12upx;
  border: 1upx solid #09C567;

  .fee-label {
    font-size: 32upx;
    color: #333;
    font-weight: bold;
  }

  .fee-amount {
    font-size: 36upx;
    color: #ff4d4f;
    font-weight: bold;
    margin-left: 20upx;
  }
}

.button-section {
  margin-top: 40upx;
  display: flex;
  gap: 20upx;
}

.express-button {
  flex: 1;
  height: 88upx;
  line-height: 88upx;
  border-radius: 12upx;
  font-size: 32upx;
  font-weight: bold;
  border: none;
  
  &.query-button {
    background: #f0f9ff;
    color: #09C567;
    border: 2upx solid #09C567;

    &:disabled {
      background: #f5f5f5;
      color: #ccc;
      border-color: #ddd;
    }
  }

  &.submit-button {
    background: #09C567;
    color: white;

    &:disabled {
      background: #ccc;
    }
  }
}
</style>