orderSuccessful.vue 3.45 KB
<template>
  <view class="container">
    <Navbar title="订气完成" canBack bgColor="#EA5504" leftIconColor="#fff" textColor="#fff"></Navbar>
    <view class="topCss">
      <view class="flex">
        <view class="">
          <u-image src="@/static/images/home/success.png" width="50px" height="50px"></u-image>
        </view>
        <view class="flex flex-direction margin-left-sm justify-between">
          <view class="text-xl text-white text-bold">
            下单成功!
          </view>
          <view class="text-white text-sm">
            感谢您的支持
          </view>
        </view>
      </view>
      <view class="borderCss flex flex-direction">
        <view class="billCss">
          <view class="priceCss">
            ¥{{ ddInfo.fDdje }}
          </view>
          <view class="margin-lr-sm">
            <u-line dashed></u-line>
          </view>
          <view class="flex margin-left-sm margin-top-lg align-center">
            <view class="text-gray">
              订单编号:
            </view>
            <view class="margin-left-sm">
              {{ ddInfo.fDddh || '-' }}
            </view>
          </view>
          <view class="flex margin-left-sm margin-top-lg align-center">
            <view class="text-gray">
              下单时间:
            </view>
            <view class="margin-left-sm">
              {{ ddInfo.fCjsj || '-' }}
            </view>
          </view>
          <view class="flex margin-left-sm margin-top-lg align-center">
            <view class="text-gray">
              订单总金额:
            </view>
            <view class="margin-left-sm">
              ¥{{ ddInfo.fDdje || '-' }}
            </view>
          </view>
        </view>
      </view>
    </view>
    <view class="bomBtnCss flex justify-between">
      <view class="" @click="goHome">
        <u-button>返回首页</u-button>
      </view>
      <view class="" @click="goOrder">
        <u-button color="#EA5504">查看订单</u-button>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  components: {},
  data() {
    return {
      ddInfo: null
    };
  },
  mounted() {

  },
  onLoad(data) {
    this.getDetailInfo(JSON.parse(data.datas).ddid);
  },
  methods: {
    async getDetailInfo(id) {
      let result = await this.$api.orderApi.getOrderDetail(id);
      let {code, value} = result;
      if (code == 200) {
        this.ddInfo = value;
        console.log("ddInfo", this.ddInfo);
      }
    },
    goHome() {
      uni.switchTab({
        url: "/pages/home/home"
      })
    },
    goOrder() {
      uni.$emit("onload", true);
      uni.switchTab({
        url: "/pages/order/order"
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.topCss {
  background: #EA5504;
  height: 200px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.borderCss {
  width: 90%;
  height: 10px;
  background: #8A3A0E;
  border-radius: 15px;
  margin: 40px 10px 0 10px;
  position: relative;
}

.billCss {
  width: 95%;
  position: absolute;
  background: #fff;
  left: 0;
  right: 0;
  margin: 0 auto;
  text-align: center;
  top: 5px;
  padding: 10px 10px 20px 10px;
  // height: 250px;
  box-shadow: 0px 0px 5px #FACFBA;

  .priceCss {
    font-size: 35px;
    margin: 10px 0;
  }
}

.bomBtnCss {
  display: flex;
  justify-content: space-around;
  position: absolute;
  width: 100%;
  bottom: 20px;
}

/deep/ .bomBtnCss .u-button {
  width: 135px;
  border-radius: 8px;
}
</style>