userCenterMyOrder.vue 2.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081
  1. <template>
  2. <div class="userCenterMyOrder">
  3. <div style="height:45px;line-height:42px">
  4. <div :class="informationsClass==1?'information2':'information1'"
  5. @click="getInformation(1)" class="cursor">
  6. {{ $t('common.myOrder') }}
  7. </div>
  8. <div :class="informationsClass==2?'information2':'information1'"
  9. @click="getInformation(2)" class="cursor">
  10. {{ $t('common.myAddress') }}
  11. </div>
  12. <!-- <div :class="informationsClass==3?'information2':'information1'"
  13. @click="getInformation(3)" class="cursor">
  14. {{ $t('common.myBalance') }}
  15. </div> -->
  16. </div>
  17. <userCenterMyOrderCom v-if="informationsClass==1"></userCenterMyOrderCom>
  18. <userCenterMyAddress v-if="informationsClass==2"></userCenterMyAddress>
  19. <!-- <userCenterMyBalance v-if="informationsClass==3"></userCenterMyBalance> -->
  20. </div>
  21. </template>
  22. <script>
  23. import userCenterMyOrderCom from "@/views/userCenter/userCenterItem/userCenterMyOrderCom";
  24. import userCenterMyAddress from "@/views/userCenter/userCenterItem/userCenterMyAddress";
  25. import userCenterMyBalance from "@/views/userCenter/userCenterItem/userCenterMyBalance";
  26. export default {
  27. name: "userCenterMyOrder",
  28. components:{userCenterMyOrderCom,userCenterMyAddress,userCenterMyBalance},
  29. data() {
  30. return {
  31. informationsClass: this.$route.query.key?this.$route.query.key:"1",
  32. }
  33. },
  34. mounted() {
  35. },
  36. methods: {
  37. getInformation(num) {
  38. this.informationsClass = num
  39. },
  40. }
  41. }
  42. </script>
  43. <style scoped lang="less">
  44. .userCenterMyOrder {
  45. width: 100%;
  46. background: #fff;
  47. min-height: 800px;
  48. }
  49. .information1 {
  50. display: inline-block;
  51. height: 100%;
  52. text-align: center;
  53. background: #f9f9f9;
  54. border-top: 3px solid #f9f9f9;
  55. color: #999;
  56. box-sizing: border-box;
  57. vertical-align: middle;
  58. font-weight: 600;
  59. padding: 0 20px;
  60. }
  61. .information1:hover {
  62. color: #FF0036;
  63. }
  64. .information2 {
  65. display: inline-block;
  66. height: 100%;
  67. text-align: center;
  68. border-top: 3px solid #2c5589;
  69. color: #2c5589;
  70. box-sizing: border-box;
  71. vertical-align: middle;
  72. font-weight: 600;
  73. padding: 0 20px;
  74. }
  75. </style>