live-telecast-ui-h5/src/views/order/orderRes.vue

<template>
  <div class="orderRes" style="padding-top: 46px">
    <van-nav-bar title="下单结果" class="van-nav-bar-my-fixed" fixed />
    <div class="page-main" v-loading="loading">
      <img :src="img" class="page-main-img" alt="" />
      <!-- <div class="dagou" :class="{ ok: ok }">
        <svg width="100" height="100">
          <circle
            fill="none"
            stroke="#a67e4b"
            stroke-width="5"
            cx="50"
            cy="50"
            r="47.5"
            class="circle"
            transform="rotate(-90 50 50)"
          />
          <polyline
            fill="none"
            stroke="#a67e4b"
            stroke-width="6"
            points="16.5,53.5 45.25,71 78,34.5"
            stroke-linecap="round"
            stroke-linejoin="round"
            class="tick"
          />
        </svg>
      </div> -->
      <div class="tc" style="margin: -10px 0 30px 0">
        <p style="color: #a67e4b">恭喜您，下单成功！</p>
      </div>
      <div class="yingdao clear" v-if="ok">
        <van-button
          round
          type="info"
          class="fr"
          size="small"
          @click="goto('/oDetail')"
          >订单详情</van-button
        >
        <van-button round class="fr" size="small" @click="goto('/home/paddy')"
          >返回首页</van-button
        >
      </div>
    </div>
  </div>
</template>

<script>
import asyncRequest from "@/apis/order/index";
import resToken from "@/mixins/resToken";
export default {
  mixins: [resToken],
  components: {
    // "van-cell": cell,
    // "van-list": List,
    // "van-tab": Tab,
    // "van-tabs": Tabs,
  },
  data() {
    return {
      //初始小球不显示

      img: require("@/assets/img/state@2x.png"),
      resData: null,
      id: "",
      ok: false,
      loading: true,
    };
  },
  async created() {
    this.ok = false;
    this.id = this.$route.query.id ? this.$route.query.id : "0";
    if (this.id !== "0") {
      await this.initData();
    }
  },
  methods: {
    goto(url) {
      let model = {
        path: url,
      };
      if (url == "/oDetail") {
        model.query = {
          id: this.id,
        };
      }
      this.$router.replace(model);
    },
    async initData() {
      this.loading = true;
      const res = await asyncRequest.detail({ id: this.id });
      this.loading = false;
      if (res && res.code === 0) {
        this.ok = true;
        this.resData = res.data;
      } else if (res && res.code >= 100 && res.code <= 104) {
        await this.logout();
      } else {
        this.show_title(res.msg);
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.orderRes {
  width: 100%;
  height: 100%;
  background: #e6e6dc !important;
  .page-main {
    width: 100%;
    text-align: center;
    .page-main-img {
      box-sizing: border-box;
      display: inline-block;
      padding:50px 0 8px 0;
      width: 35%;
    }
  }
  .dagou {
    display: flex;
    width: 100%;
    justify-content: center;
    align-content: center;
    align-items: center;
    height: 150px;
    margin: 3vh 0;
    flex-direction: column;

    h2 {
      font-family: Arial, Helvetica, sans-serif;
      font-size: 36px;
      margin-top: 40px;
      color: #333;
    }
    .circle {
      stroke-dasharray: 597;
      stroke-dashoffset: 597;
    }
    .tick {
      stroke-dasharray: 175;
      stroke-dashoffset: 175;
    }

    @keyframes circle {
      from {
        stroke-dashoffset: 597;
      }
      to {
        stroke-dashoffset: 1194;
      }
    }
    @keyframes tick {
      from {
        stroke-dashoffset: 175;
      }
      to {
        stroke-dashoffset: 0;
      }
    }
    &.ok .circle {
      animation: circle 1s ease-in-out;
      animation-fill-mode: forwards;
    }
    &.ok .tick {
      animation: tick 1s ease-in-out;
      animation-fill-mode: forwards;
      animation-delay: 0.95s;
    }
  }
  .yingdao {
    padding: 5px 16px;
    box-sizing: border-box;
    button {
      width: 30.5%;
      &:first-child {
        margin: 0 13% 0 6.5%;
        color: #333;
        background: linear-gradient(0deg, #a67e4b, #efc180);
        // background: linear-gradient(0deg, #f4d022 0%, #f4d022 100%);
        border: 0;
      }
      &:last-child {
        margin: 0 6.5% 0 13%;
        color: #333;
        // background: #f2f2f2;
        border: 1px solid #333;
        background: transparent;
        // border-color: rgb(255, 131, 39);
        // color: rgb(255, 131, 39);
      }
    }
  }
}

// .code-main {
//   padding: 16px 16px 10px 16px;
//   img {
//     display: inline-block;
//     width: 80%;
//     margin: 0 10% 5px 10%;
//   }
//   p {
//     text-align: center;
//     line-height: 25px;
//   }
// }
// .mine-cell-list {
//   border-top: 0.01rem solid #ebedf0;
//   border-bottom: 0.01rem solid #ebedf0;
// }
// .mine-logout {
//   padding: 100px 20px 0 20px;
//   button {
//     width: 100%;
//     border: 0;
//   }
// }
// .mine-service {
//   padding: 16px 16px 16px 16px;
//   background: #fff;

//   .mine-service-title {
//     color: #000;
//     font-size: 18px;
//     font-weight: bolder;
//     padding: 0 3px 3px 3px;
//   }
//   ul {
//     width: 100%;
//     // border-top: 0.01rem solid #ebedf0;
//     li {
//       float: left;
//       width: 50%;
//       position: relative;
//       padding: 8px 0 0 0;

//       img.service-bg {
//         float: left;
//         margin: 0;
//         height: 75px;
//         width: 100%;
//       }
//       div {
//         position: absolute;
//         top: 0;
//         left: 0;
//         width: 100%;
//         padding: 20px;
//         box-sizing: border-box;
//         p {
//           float: left;
//           width: calc(100% - 40px);
//           color: #fff;
//           height: 45px;
//           line-height: 45px;
//           font-size: 16px;
//           text-align: center;
//           // padding: 0 5% 0 0;
//           box-sizing: border-box;
//           font-weight: bolder;
//         }
//         img {
//           float: left;
//           width: 40px;
//           box-sizing: border-box;
//           padding: 2% 2%;
//           height: 45px;
//           width: 40px;
//         }
//       }
//       &:nth-child(1) {
//         padding-right: 3px;
//         // padding-top: 6px;
//         // padding-bottom: 5px;
//       }
//       &:nth-child(2) {
//         padding-left: 3px;
//         // div {
//         //   img {
//         //     padding: 2% 0;
//         //   }
//         // }
//       }
//     }
//   }
// }
// .mine-resume {
//   padding-top: 46px;
//   position: relative;
//   box-sizing: border-box;
//   width: 100%;
//   height: 246px;
//   .edit {
//     position: absolute;
//     right: 0;
//     top: 98px;
//     background: #04d1dc;
//     height: 30px;
//     line-height: 30px;
//     color: #fff;
//     padding: 0 10px 0 16px;
//     border-top-left-radius: 15px;
//     font-size: 14px;
//     border-bottom-left-radius: 15px;
//   }
//   .mineBg {
//     width: 100%;
//     display: inline-block;
//     height: 200px;
//   }
//   .mine-resume-main {
//     position: absolute;
//     padding-top: 46px;
//     top: 0;
//     left: 0;
//     width: 100%;
//     z-index: 2;
//     ul {
//       width: 100%;
//       li {
//         float: left;
//         width: calc(100% - 155px);
//         &:first-child {
//           width: 125px;
//           height: 100%;
//           padding: 58px 5px 0 16px;
//           text-align: center;
//           img {
//             width: 48px;
//             height: 48px;
//             border: 1px solid #eee;
//             display: inline-block;
//             border-radius: 50%;
//             padding: 8px;
//           }
//         }
//         &:nth-child(2) {
//           // padding: 40px 0 0 0;
//           padding: 52px 0 0 0;
//           color: #fff;
//           font-size: 16px;
//           p::before,
//           p::after,
//           b::after,
//           b::before {
//             clear: both;
//             content: "";
//             box-sizing: border-box;
//           }
//           p {
//             width: 100%;
//             height: 40px;
//             line-height: 40px;
//             > span {
//               float: left;
//               &:first-child {
//                 width: 120px;
//                 display: inline-block;
//                 overflow: hidden;
//               }
//             }
//             b {
//               float: left;
//               font-weight: lighter;
//               height: 27px;
//               width: 70px;
//               margin: 4px 0 0 0;
//               vertical-align: top;
//               border-radius: 18px;
//               border: 1px solid #fff;
//               text-align: center;
//               i {
//                 vertical-align: top;
//                 font-size: 14px;
//                 height: 25px;
//                 line-height: 25px;
//               }
//               span {
//                 clear: both;
//                 padding: 0 4px 0 4px;
//                 vertical-align: top;
//                 font-size: 12px;
//                 height: 25px;
//                 line-height: 25px;
//               }
//             }
//           }
//         }
//       }
//     }
//   }
//   .mine-unresume-main {
//     position: absolute;
//     padding-top: 46px;
//     top: 0;
//     left: 0;
//     width: 100%;
//     z-index: 2;
//     text-align: center;
//     img {
//       width: 48px;
//       height: 48px;
//       border: 1px solid #eee;
//       display: inline-block;
//       border-radius: 50%;
//       padding: 8px;
//       margin: 50px 0 0 0;
//     }
//     div {
//       width: 100%;
//       padding: 12px 0 0 0;
//       b {
//         display: inline-block;
//         font-weight: lighter;
//         height: 27px;
//         width: 60px;
//         margin: 4px 0 0 0;
//         vertical-align: top;
//         border-radius: 18px;
//         border: 1px solid #fff;
//         text-align: center;
//         color: #fff;
//         i {
//           vertical-align: top;
//           font-size: 14px;
//           height: 25px;
//           line-height: 25px;
//         }
//         span {
//           clear: both;
//           padding: 0 4px 0 4px;
//           vertical-align: top;
//           font-size: 12px;
//           height: 25px;
//           line-height: 25px;
//         }
//       }
//     }
//   }
// }
// .color_ {
//   // color: rgb(64, 120, 202);
// }
// input[type="search"]::-webkit-search-cancel-button {
//   -webkit-appearance: none;
// }
// .search {
//   input {
//     background: rgba(242, 242, 247, 1);
//     border-radius: 15px;
//     height: 30px;
//     text-align: center;
//   }
// }
// .doge {
//   width: 140px;
//   height: 72px;
//   margin-top: 8px;
//   border-radius: 4px;
// }
// .tiaojian {
//   padding-bottom: 10px;
//   .search-tab {
//     font-size: 12px;
//     color: #333333;
//     .van-cell__right-icon {
//       color: #cccccc;
//       font-size: 12px;
//       line-height: normal;
//       height: auto;
//     }

//     .van-cell__right-icon::before {
//       -webkit-transform: rotate(90deg);
//       transform: rotate(90deg);
//       -webkit-transition: -webkit-transform 0.3s;
//       transition: -webkit-transform 0.3s;
//       transition: transform 0.3s;
//       transition: transform 0.3s, -webkit-transform 0.3s;
//       margin-top: 2px;
//     }
//   }
//   .search-tab.active {
//     color: rgb(64, 120, 202);
//     .van-cell__right-icon::before {
//       -webkit-transform: rotate(-90deg);
//       transform: rotate(-90deg);
//       color: rgb(64, 120, 202);
//     }
//   }
//   .search-tab.colorActive {
//     color: rgb(64, 120, 202);
//     .van-cell__right-icon::before {
//       color: rgb(64, 120, 202);
//     }
//   }
// }
// .tab-content {
//   overflow: hidden;
//   .tab-content-list {
//     overflow-y: auto;
//     div:nth-child(1) {
//       margin-top: 0px;
//     }
//   }
// }
</style>