aluminium-trading-uniapp-240925/pages_order/tradingPlatform/confirmOrder.vue

<template>
  <view class="confirmOrder">
    <navbar :title="$t('pageTitle.confirmOrder')" leftClick @leftClick="$utils.navigateBack"/>

    <view class="frame">

      <view class="title">
          {{ $t('other.payDeposit') }}
      </view>

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

        <!--开户名称-->
        <view class="item">
          <view> {{ $t('components.accountName') }}</view>
          <view>
            <input v-model="form.a"  :placeholder="$t('components.enterAccountName')" clearable></input>
          </view>
        </view>

        <!--开户行-->
        <view class="item">
          <view> {{ $t('components.bankName') }}</view>
          <view>
            <input v-model="form.b"  :placeholder="$t('components.enterOpeningBank')" clearable></input>
          </view>
        </view>

        <!--银行账号-->
        <view class="item">
          <view> {{ $t('components.bankAccount') }}</view>
          <view>
            <input v-model="form.c"  :placeholder="$t('components.enterBankAccount')" clearable></input>
          </view>
        </view>


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

      </view>

      <!--和联系我们-->
      <view class="btns">
          <span @click="confirmOrder" class="qrdd">
              {{ $t('components.confirmOrder') }}
          </span>

        <span @click="closeOrder" class="qxdd">
              {{ $t('components.cancelOrder') }}
          </span>
      </view>

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

<script>
export default {
  name: "confirmOrder",
  onLoad(options) {
    if (options.params) {
      const fatherData = JSON.parse(decodeURIComponent(options.params));
      console.log(fatherData, "fatherData==========")
      this.fatherData = fatherData;
    }
  },
  data() {
    return {
      fatherData: {},
      form: {
        a: "",
        b: "",
        c: "",
      },
    }
  },
  methods: {
    //确认下单
    confirmOrder() {
      this.$api('addProductOrder',this.form, res => {
        if (res.code == 200) {
          uni.redirectTo({
            url: '/pages/index/clearanceService'
          })
        }
      })
    },
    //取消订单
    closeOrder() {

    },

  },
}
</script>

<style scoped lang="scss">
.confirmOrder {
  background-color: #FFF;
  height: 100vh;

  .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;
          }
        }
      }


      .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;

      .qrdd {
        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;
      }

      .qxdd {
        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>