aluminium-trading-uniapp-240925/pages_order/order/backOrder.vue

<template>
  <view class="page">

    <navbar :title="$t('pageTitle.cancelOrder')" leftClick @leftClick="$utils.navigateBack" />

    <view class="frame">

      <!--填写信息-->
      <view class="form">

        <!--供应商名称-->
        <view class="item">
          <view>{{ $t('other.supplierName') }}</view>
          <view>
            <!-- <input disabled v-model="form.a" placeholder="" clearable></input> -->
            {{ form.a }}
          </view>
        </view>

        <!--商品规格-->
        <view class="item">
          <view>{{ $t('components.productSpecification') }}</view>
          <view>
            {{ form.b }}
          </view>
        </view>

        <!--提货地点-->
        <view class="item">
          <view>{{ $t('components.pickupLocation') }}</view>
          <view>
            {{ form.c }}
          </view>
        </view>

        <!--交货时间-->
        <view class="item">
          <view>{{ $t('other.deliveryTime') }}</view>
          <view>
            {{ form.d }}
          </view>
        </view>

        <!--暂定数量-->
        <view class="tentativeQuantity">
          <view class="key">{{ $t('other.tentativeQuantity') }}</view>
          <view class="value">
            <uv-number-box v-model="form.tentativeQuantity"></uv-number-box>
          </view>
        </view>

        <!--单价-->
        <view class="item">
          <view>{{ $t('components.unitPrice') }}</view>
          <view>
            <input v-model="form.price" disabled clearable></input>
          </view>
        </view>

        <view class="tip">
          {{ $t('components.withdrawRequestNotice') }}
        </view>

      </view>

      <!--立即下单和联系我们-->
      <view class="btns">
        <span @click="reviewSubmit" class="ontBtn">
          {{ $t('components.submitReview') }}
        </span>

        <span @click="contactUs" class="twoBtn">
          {{ $t('components.contactUs') }}
        </span>
      </view>

    </view>

    <!-- 联系客服弹框 -->
    <customerServicePopup ref="customerServicePopup" />
  </view>
</template>
<script>

import customerServicePopup from "@/components/config/customerServicePopup.vue";

export default {
  name: "backOrder",
  components: {customerServicePopup},
  onLoad(options) {
    this.orderId = options.id
  },
  data() {
    return {
      orderId: null,
      form:{
        a: '湖南科技有限公司',
        b: '铝锭al>96%',
        c: '湖南省长沙市天心区天心街道天心小区1栋1单元101室',
        d: '2021-12-31 12:00:00',
        price: '￥111',
      }
    }
  },
  methods: {
    // 联系我们
    contactUs(){
      this.$refs.customerServicePopup.open();
    },

    // 提交审核
    reviewSubmit() {

    }
  },
}
</script>


<style scoped lang="scss">
.page {
  .frame {
    .title {
      display: flex;
      justify-content: center;
      align-items: center;
      font-size: 36rpx;
      color: #000;
      padding: 30rpx;
    }

    .form {
      margin: 20rpx;
      border: 1px solid #efefef;
      border-radius: 20rpx;
      overflow: hidden;


      .item {
        display: flex;
        align-items: center;
        background-color: #FFF;
        height: 100rpx;
        padding: 10rpx 0 0 20rpx;
        border-bottom: 1px solid #efefef;

        > view:nth-of-type(1) {
          width: 30%;
          // font-weight: 700;
        }

        > view:nth-of-type(2) {
          width: 70%;
          border-radius: 10rpx;
          overflow: hidden;


          input {
            background-color: #FFF;
            font-size: 28rpx;
            padding: 16rpx 8rpx 16rpx 15rpx;
          }
        }
      }

      .tentativeQuantity {
        display: flex;
        align-items: center;
        background-color: #FFF;
        height: 80rpx;
        // margin: 10rpx 0 0 0;
        padding: 10rpx 0 0 20rpx;

        .key {
          width: 30%;
        }

        .value {
          width: 70%;
          border-radius: 10rpx;
          overflow: hidden;
        }

      }

      .tip {
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 28rpx;
        color: #f95e7d;
        background-color: #f5f5f5;
        height: 40rpx;
        //margin-top: 20rpx;
        padding: 10rpx;
      }
    }

    .btns {
      width: 100%;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 20rpx;
      position: fixed;
      bottom: 80rpx;
      left: 0;
      right: 0;

      .ontBtn {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 500rpx;
        height: 70rpx;
        border-radius: 40rpx;
        color: #FFF;
        font-size: 28rpx;
        margin: 20rpx 10rpx 0 0;
        background: $uni-color;
        //margin-top: 20rpx;
        border-radius: 40rpx;
      }

      .twoBtn {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 500rpx;
        height: 70rpx;
        border-radius: 40rpx;
        color: #000000;
        font-size: 28rpx;
        margin: 20rpx 10rpx 0 0;
        background: #f1f1f1;
        //margin-top: 20rpx;
        border-radius: 40rpx;
      }


    }
  }
}
</style>