feedback.vue 3.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135
  1. <template>
  2. <div class="shopInfo">
  3. <el-row class="order_tab">
  4. <el-col :span="24">
  5. <div class="tabList">
  6. <div class="tab_item" @click="changeTabs(i)" :class="{'tab_item_ac':tabNum==i?true:false}" v-for="(item,i) in tabList" :key="i">
  7. <span class="item" :class="tabNum==i?'active-item':''" v-if="!item.children">{{item.name}}</span>
  8. <el-dropdown v-else @command="chooseCoupon">
  9. <span class="el-dropdown-link item" :class="tabNum==i?'active-item':''">
  10. {{item.name}}<i class="el-icon-arrow-down el-icon--right"></i>
  11. </span>
  12. <el-dropdown-menu slot="dropdown">
  13. <el-dropdown-item :command="v.command" v-for="(v,index) in item.children" :key="index">{{v.name}}</el-dropdown-item>
  14. </el-dropdown-menu>
  15. </el-dropdown>
  16. <div class="tab_line"></div>
  17. </div>
  18. </div>
  19. </el-col>
  20. </el-row>
  21. <el-row class="content">
  22. <component v-if="renderComponent" :is="activeName"></component>
  23. </el-row>
  24. </div>
  25. </template>
  26. <script>
  27. import feedbackInfo from "./feedbackInfo.vue";
  28. import myFeedback from "./myFeedback.vue";
  29. export default {
  30. name: "feedback",
  31. components: {
  32. feedbackInfo,
  33. myFeedback,
  34. },
  35. data() {
  36. return {
  37. activeName: "feedbackInfo",
  38. tabList: [
  39. { name: "意见反馈", index: 0, activeName: "feedbackInfo" },
  40. { name: "我的反馈", index: 1, activeName: "myFeedback" },
  41. ],
  42. tabNum: 0,
  43. renderComponent: true,
  44. };
  45. },
  46. created() {
  47. this.changeTabs(0);
  48. this.$bus.$on("goFeedbackList", (index) => {
  49. this.changeTabs(index);
  50. });
  51. },
  52. methods: {
  53. chooseCoupon(e) {
  54. this.tabNum = 2;
  55. this.activeName = e;
  56. },
  57. forceRerender() {
  58. // 从 DOM 中删除 my-component 组件
  59. this.renderComponent = false;
  60. this.$nextTick(() => {
  61. // 在 DOM 中添加 my-component 组件
  62. this.renderComponent = true;
  63. });
  64. },
  65. changeTabs(i) {
  66. if (i === this.tabNum) {
  67. this.forceRerender();
  68. return;
  69. }
  70. this.tabNum = i;
  71. this.activeName = this.tabList[i].activeName;
  72. },
  73. },
  74. };
  75. </script>
  76. <!-- Add "scoped" attribute to limit CSS to this component only -->
  77. <style scoped lang="scss">
  78. .shopInfo {
  79. .order_tab {
  80. width: 100%;
  81. height: 74px;
  82. background: #fff;
  83. .tabList {
  84. width: 100%;
  85. height: 74px;
  86. padding-top: 20px;
  87. padding-left: 36px;
  88. box-sizing: border-box;
  89. display: flex;
  90. .tab_item {
  91. min-width: 58px;
  92. margin-right: 56px;
  93. .item {
  94. font-size: 16px;
  95. font-weight: 500;
  96. color: #b1b1b1;
  97. position: relative;
  98. text-align: center;
  99. cursor: pointer;
  100. }
  101. .active-item {
  102. color: #fc7200;
  103. }
  104. .tab_line {
  105. width: 58px;
  106. height: 6px;
  107. background: #fff;
  108. border-radius: 3px;
  109. margin: 15px auto 0;
  110. }
  111. }
  112. .tab_item_ac {
  113. color: #fc7200;
  114. .tab_line {
  115. background: #fc7200;
  116. }
  117. }
  118. }
  119. }
  120. .content {
  121. width: 100%;
  122. margin-top: 10px;
  123. box-sizing: border-box;
  124. background: #ffffff;
  125. padding: 0 20px;
  126. }
  127. }
  128. </style>