pco/app-ui/pages/business-entering/business-detail.vue

<template>
  <view>
    <view class="box">
      <view class="top">
        <text class="title">业务详情</text>
      </view>
      <view class="item">
        <view class="l">企业名称：</view>
        <view class="r">
          {{ form.customerName }}
        </view>
      </view>
      <view class="item">
        <view class="l">货物：</view>
        <view class="r">
          {{ form.goodsName }}
        </view>
      </view>
      <view class="item">
        <view class="l">货重：</view>
        <view class="r">
          {{ form.netWeight }}(kg)
        </view>
      </view>
      <view class="item-line">
        车辆
      </view>
      <view v-for="item in form.cars" :key="item.id" style="border-bottom: 1px solid #E5E5E5;">
        <view class="item">
          <view class="l">车牌号：</view>
          <view class="r">
            {{ item.carNo }}
          </view>
        </view>
        <view class="item">
          <view class="l">规格：</view>
          <view class="r">
            {{ item.carSize }} (米)
          </view>
        </view>
        <view class="item" v-if="item.realInTime">
          <view class="l">入场时间：</view>
          <view class="r">
            {{ item.realInTime }}
          </view>
        </view>
        <view class="item" v-if="item.realOutTime">
          <view class="l">离场时间：</view>
          <view class="r">
            {{ item.realOutTime }} (米)
          </view>
        </view>
        <view class="item" v-if="item.driverName">
          <view class="l">联系人：</view>
          <view class="r">
            {{ item.driverName }}
          </view>
        </view>
        <view class="item" v-if="item.driverPhone">
          <view class="l">联系号码：</view>
          <view class="r">
            {{ item.driverPhone }}
          </view>
        </view>
      </view>

      <view class="item-line">
        业务项
      </view>
      <view class="item" v-for="item in form.items" :key="item.id">
        <view class="l" style="flex: 7;">{{ item.itemTypeName }}：</view>
        <view class="r">
          {{ item.itemName }}({{ item.itemPrice }}x{{ item.num }}={{ item.total }}元)
        </view>
      </view>
      <view class="item">
        <view class="l">业务费：</view>
        <view class="r">
          {{ form.itemPrice }}
          <text>(元)</text>
        </view>
      </view>
      <view class="item">
        <text class="p1">订单状态:</text>
        <text class="p2">
          <text v-if="form.confirmInput==0">未确认</text>
          <text v-else>已确认</text>
        </text>
      </view>
      <view class="item">
        <text class="p1">支付状态:</text>
        <text class="p2">
          <text v-if="form.payStatus==1">未支付</text>
          <text v-if="form.payStatus==2">已支付(未确认)</text>
          <text v-if="form.payStatus==3">已支付(已确认)</text>
        </text>
      </view>
      <view class="hj">
        总费用：{{ form.totalMoney }}元
      </view>
      <u-button type="primary" text="返回" @click="backFn"></u-button>
      <view style="height: 80rpx;"></view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      form: {}
    }
  },
  onShow() {
  },

  onLoad(options) {
    this.id = options.id;
  },
  onShow() {
    this.getBusinessById();
  },
  methods: {
    backFn() {
      this.$common.back();
    },
    getBusinessById() {
      this.$api.getBusinessById({
        id: this.id
      }).then(resp => {
        this.form = resp.data;
      })
    },
  }
}
</script>

<style lang="scss">
page {
  background-color: #fff;
}

.hs-item {
  text-align: center;
}

.item-line {
  color: #a2a2a2;
  padding: 5px 0 10px 29px;
  border-bottom: 1px solid #E5E5E5;
}

.hj {
  padding: 50rpx;
  font-size: 30rpx;
  color: red;
  font-weight: bold;
}

.save-btn {
  background-color: #ff4200;
  height: 88rpx;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 60rpx;
  color: #fff;
  font-size: 30rpx;
  font-weight: bold;
  border-radius: 10rpx;
}

@import '@/common/common.scss'
</style>