fxyk-tabControl.vue 2.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475
  1. <template>
  2. <view :style="contentStyle[0]">
  3. <view class="d-flex a-center">
  4. <u-image width="41rpx" height="40rpx" :fade="false" :src="contentStyle[2]"></u-image>
  5. <view class="word-color u-margin-left-10">{{ contentStyle[1] }}</view>
  6. </view>
  7. <view class="word-color u-margin-top-4">{{ tabData.num }}</view>
  8. </view>
  9. </template>
  10. <script>
  11. export default {
  12. props: {
  13. // 传递数据
  14. tabData: {
  15. type: Object,
  16. default: () => {
  17. return {}
  18. }
  19. },
  20. // 当前索引值
  21. itemIndex: {
  22. type: Number,
  23. defalut: 0
  24. }
  25. },
  26. computed: {
  27. contentStyle() {
  28. let info = []
  29. if (parseInt(this.tabData.status) === 1) {
  30. info.push(...[{'padding': '17rpx 8rpx 8rpx 8rpx'},'所有项目'])
  31. if (this.itemIndex + 1 === parseInt(this.tabData.status)) {
  32. info.push('../../static/images/project_other.png')
  33. return info
  34. }
  35. info.push('../../static/images/project.png')
  36. return info
  37. } else if (parseInt(this.tabData.status) === 2){
  38. info.push(...[{'padding': '13rpx 21rpx 8rpx 21rpx'},'已完成'])
  39. if (this.itemIndex + 1 === parseInt(this.tabData.status)) {
  40. info.push('../../static/images/finish_other.png')
  41. return info
  42. }
  43. info.push('../../static/images/finish.png')
  44. return info
  45. } else if (parseInt(this.tabData.status) === 3) {
  46. info.push(...[{'padding': '13rpx 21rpx 8rpx 21rpx'},'进行中'])
  47. if (this.itemIndex + 1 === parseInt(this.tabData.status)) {
  48. info.push('../../static/images/ongoing_other.png')
  49. return info
  50. }
  51. info.push('../../static/images/ongoing.png')
  52. return info
  53. } else {
  54. info.push(...[{'padding': '13rpx 21rpx 8rpx 21rpx'},'未完成'])
  55. if (this.itemIndex + 1 === parseInt(this.tabData.status)) {
  56. info.push('../../static/images/end_other.png')
  57. return info
  58. }
  59. info.push('../../static/images/end.png')
  60. return info
  61. }
  62. }
  63. }
  64. }
  65. </script>
  66. <style lang="scss" scoped>
  67. .word-color {
  68. font-size: 25rpx;
  69. font-family: SimSun;
  70. font-weight: 400;
  71. color: #FFFFFF;
  72. }
  73. </style>