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

<template>
  <view class="page">

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

    <view class="info">
      <view class="flex">

        <!--订单基本信息-->
        <view class="server-item">

          <view class="img-box">
            <img :src="orderInfo.pic" style="width: 100%;height: 100%;"/>
          </view>

          <view class="server-info">
            <view class="server-title">
              {{ $t('other.aluminumProducts') }}
            </view>

            <view class="current-price">
              <text class="unit">{{ $t('components.productSpecification') }}：</text>
              <text class="text"> {{ $t('other.specification') }}</text>
            </view>

            <view class="sales-volume" style="margin-top: 5px;">
              <view class="desc"> {{ $t('other.pickupDate') }}：{{ orderInfo.takeTime }}</view>
            </view>
          </view>
        </view>

        <!--收货地址-->
        <view class="line address">
          <view class="address-top">
            <view class="">
              {{ $t('components.shippingAddress') }}
            </view>
            <view class="copy">
              <img style="width:40rpx;height:40rpx;"
                   @click="$utils.copyText('1')"
                   src="../static/order/copy.png">
            </view>
          </view>
          <view class="addressDetail">
            <view class="">{{ orderInfo.userName }}&nbsp;&nbsp;&nbsp; {{ orderInfo.phone }}</view>
            <view class="">
              {{ orderInfo.address }}
            </view>
          </view>
        </view>

        <!-- 订单信息 -->
        <view class="line">
          <view class="t min_tips">
            <view class="">
              {{ $t('components.orderInfo') }}
            </view>
          </view>
          <view class="min_tips">
            <view class="">
              {{ $t('components.orderNumber') }}
            </view>
            <view class="">
              {{ orderInfo.id }}
            </view>
          </view>
          <view class="min_tips">
            <view class="">
              {{ $t('components.orderTime') }}
            </view>
            <view class="">
              {{ orderInfo.createTime }}
            </view>
          </view>
        </view>

        <!-- 下单须知 -->
        <view class="line">
          <view class="t min_tips">
            <view class="">
              {{ $t('components.orderNotice') }}
            </view>
          </view>
          <view class="xdxz" style="line-height: 40rpx;">
            <!--<uv-parse :content="content"></uv-parse>-->
            <view>1. 请您在收货时间前15分钟内到货，否则将视为放弃挂单。</view>
            <view>2. 请您在收货地址提供的手机号码收到货物</view>
          </view>
        </view>
      </view>

      <!--我要撤单和联系客服-->
      <view class="btns">
        <view @click="backOrder" class="oneBtn">
          {{ $t('other.withdrawOrder') }}
        </view>
        <view @click="$refs.customerServicePopup.open()" class="twoBtn">
          {{ $t('components.contactCustomerService') }}
        </view>
      </view>

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

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

export default {
  name: "orderDetail2",
  components: {customerServicePopup},
  onLoad(options) {
    if (options.orderInfo) {
      this.orderInfo = JSON.parse(decodeURIComponent(options.orderInfo));
      console.log(this.orderInfo, "解析后的订单数据"); // 解析后的订单数据
    }
  },
  data() {
    return {
      orderInfo: {}
    }
  },
  methods: {

    // 供应商根据挂单id查询挂单详情的接口
    queryOrderInfo() {
      this.$api('getProductInfo', this.orderId, res => {
        console.log(res, "挂单详情信息")
        this.orderInfo = res.result
      })
    },

    // 撤单
    backOrder() {
      let self = this
      uni.showModal({
        title: self.$t('other.backOrderTitle'),
        content: self.$t('other.backOrderTitleConfirm'),
        success(e) {
          if (e.confirm) {
            self.$api('noShow', {id}, res => {
              if (res.code == 200) {
                uni.showToast({
                  title: self.$t('other.backOrderSuccess'),
                  icon: 'none'
                })
                uni.navigateBack();
              }
            })
          }
        }
      })


    },
  },
}
</script>


<style scoped lang="scss">
.page {

  .info {
    margin: 10px;
    padding: 20rpx;
    background-color: #fff;
    width: calc(100% - 40px);
    border-radius: 10px;

    .head-title {
      font-family: PingFang SC, PingFang SC-Bold;
      color: #2f2e2e;
      line-height: 30rpx;
      margin-left: 10rpx;
    }

    .server-item {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      justify-content: space-between;
      background: white;
      border-radius: 15rpx;
      box-sizing: border-box;
      margin: 20rpx 0rpx;
      width: 100%;

      .img-box {
        width: 150rpx;
        height: 150rpx;
        border-radius: 10rpx;
        overflow: hidden;

        image {
          width: 100%;
          height: 100%;
        }
      }

      .server-info {
        display: flex;
        flex-direction: column;
        justify-content: space-around;
        width: calc(100% - 180rpx);
        box-sizing: border-box;
        padding: 10rpx 15rpx;

        .server-title {
          display: flex;
          margin-bottom: 10rpx;
        }

        .coupon {
          display: flex;
          justify-content: center;
          align-items: center;
          background: #F29E45;
          color: white;
          width: 120rpx;
          height: 40rpx;
          border-radius: 10rpx;
          margin-left: 10rpx;
          font-size: 22rpx;
        }

        .time-coupon,
        .price {
          display: flex;
          flex-wrap: wrap;
          align-items: center;
        }

        .time-coupon {
          margin: 10rpx 0rpx;
          font-size: 26rpx;
          justify-content: space-between;
          width: 100%;

          .flex {
            justify-content: center;
            align-items: center;
          }

          image {
            width: 25rpx;
            height: 25rpx;
          }

          .time {
            color: #B8B8B8;
            margin-left: 6rpx;
          }
        }

        .sales-volume {
          display: flex;
          align-items: center;
          color: #B8B8B8;
          font-size: 24rpx;

          image {
            width: 25rpx;
            height: 25rpx;
          }
        }
      }
    }

    .address {

      .address-top {
        display: flex;
        justify-content: space-between;
        align-items: center;

        image {
          width: 30rpx;
          height: 30rpx;
        }
      }

      .addressDetail {
        color: #777;
        font-size: 26rpx;
        padding: 5px 0;
      }

      text {
        background-color: #F29E45;
        padding: 8rpx 10rpx;
        color: #fff;
        font-size: 20rpx;
        margin-left: 10px;
        border-radius: 5px;
      }
    }

    .min_tips {
      font-size: 22rpx;
      color: #777;
      display: flex;
      justify-content: space-between;
      padding: 5px 0;
      align-items: center;
    }

    .btns {
      display: flex;
      justify-content: center;
      align-items: center;
      gap: 40rpx;

      .oneBtn {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 40%;
        height: 70rpx;
        padding: 10rpx;

        border-radius: 40rpx;
        color: white;
        font-size: 28rpx;
        margin: 20rpx 10rpx 0 0;
        background: #293143;
        //margin-top: 20rpx;
        border-radius: 40rpx;
      }

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

    }

    .xdxz {
      font-size: 24rpx;
      color: #777;
      line-height: 30rpx;
    }

    .current-price {
      font-size: 24rpx;
      color: #8c8888;

      .unit {

      }

      .text {

      }
    }

    .line {
      border-top: 2px dotted #00000011;
      padding: 20rpx 0;

      .t {
        padding: 5px 0;
        color: #000;
        font-size: 26rpx;
      }
    }

    .head-div {
      .nickname {
        font-size: 30rpx;
        font-weight: 600;
        text-align: left;
        line-height: 42rpx;
        display: flex;
        align-items: center;

        .tag {
          position: relative;
          display: flex;
          align-items: center;

          image {
            height: 45rpx;
            width: 90rpx;
            vertical-align: middle;
          }

          .auth {
            position: absolute;
            white-space: nowrap;
            color: $uni-color;
            left: 23rpx;
            font-size: 17rpx;
          }
        }
      }

      .days {
        font-size: 20rpx;
        font-weight: 400;
        text-align: left;
        line-height: 56rpx;
        display: flex;
        align-items: center;

        view {
          padding-left: 5px;
        }
      }
    }

    .btn-x {
      color: $uni-color;
      border: 1px solid $uni-color;
      padding: 10rpx 20rpx;
      border-radius: 30rpx;
    }

    .btns {
      display: flex;
      justify-content: center;

      .btn {
        color: $uni-color;
        border: 1px solid $uni-color;
        padding: 10rpx 20rpx;
        border-radius: 30rpx;
      }
    }
  }
}
</style>