activity.vue 3.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111
  1. <template>
  2. <view class="container">
  3. <!-- 返回按钮 -->
  4. <back text="活动详情"></back>
  5. <!-- 单个数据详情 -->
  6. <view class="detail-item">
  7. <view class="flex" style="width: 100%;height: 90rpx;">
  8. <view class="flex" style="margin: -30rpx 0 0 10rpx;">
  9. <view class="index"
  10. :style="{backgroundColor: singleDetail.survey.progress === 'finish'||singleDetail.vote.progress === 'finish'? '#23b46c': '#f9c752' }">
  11. </view>
  12. <view class="name">{{singleDetail.survey.name||singleDetail.vote.name}}</view>
  13. </view>
  14. <view class="t-icon t-icon-yiwancheng1"
  15. v-if="singleDetail.survey.progress === 'finish'||singleDetail.vote.progress === 'finish'"
  16. style="margin-left: auto; width: 90rpx; height: 90rpx;"></view>
  17. <view class="t-icon t-icon-jinhangzhong-copy"
  18. v-if="singleDetail.survey.progress === 'going'||singleDetail.vote.progress === 'going'"
  19. style="margin-left: auto; width: 90rpx; height: 90rpx;"></view>
  20. </view>
  21. <!-- 正文 -->
  22. <view class="content-box">
  23. <view style="display:flex;flex-direction: column;padding: 0 30rpx;">
  24. <rich-text class="subtitle-info" style="margin-bottom: 15rpx;"
  25. :nodes="singleDetail.survey.description||singleDetail.vote.description">
  26. </rich-text>
  27. <view class="flex">
  28. <view class="subtitle">布置老师:</view>
  29. <view class="subtitle-info" style="margin-left: 10rpx;">
  30. {{singleDetail.survey.creatorId||singleDetail.vote.creatorId}}
  31. </view>
  32. <view class="subtitle" style="margin-left: 20rpx;">截止时间:</view>
  33. <view class="subtitle-info" style="margin-left: 10rpx;" v-if="singleDetail.survey">
  34. {{$timestampToTime(singleDetail.survey.endTime)}}
  35. </view>
  36. <view class="subtitle-info" style="margin-left: 10rpx;" v-if="singleDetail.vote">
  37. {{$timestampToTime(singleDetail.vote.endTime)}}
  38. </view>
  39. </view>
  40. </view>
  41. <!-- 内容 -->
  42. <view class="content-detail-box">
  43. <!-- 问卷 -->
  44. <view class="title-box"
  45. :style="{backgroundColor: singleDetail.survey.progress === 'finish'? '#23b46c': '#f9c752' }"
  46. v-if="singleDetail.survey">
  47. <view class="content-subtitle">问卷详情</view>
  48. </view>
  49. <view class="flex" style="justify-content: space-around;">
  50. <view class="option-box"
  51. :style="{backgroundColor: singleDetail.survey.progress === 'finish'? '#23b46c': '#f9c752' }"
  52. v-for="(option,i) in singleDetail.survey.answers[0]" :key="i">
  53. <view class="content-subtitle" style="font-size: 30rpx;">{{option}}</view>
  54. </view>
  55. </view>
  56. <!-- 投票 -->
  57. <view class="title-box"
  58. :style="{backgroundColor: singleDetail.vote.progress === 'finish'? '#23b46c': '#f9c752' }"
  59. v-if="singleDetail.vote">
  60. <view class="content-subtitle">{{singleDetail.vote.secret ? '匿名投票':'普通投票'}}</view>
  61. </view>
  62. <view class="flex" style="justify-content: space-around;">
  63. <view class="flex-colum" v-for="(option,j) in singleDetail.vote.options" :key="j">
  64. <rich-text class="subtitle-info" style="margin-bottom: 15rpx;" :nodes="option.value">
  65. </rich-text>
  66. <view class="option-box"
  67. :style="{backgroundColor: singleDetail.vote.progress === 'finish'? '#23b46c': '#f9c752' }">
  68. <view class="content-subtitle" style="font-size: 30rpx;">{{option.code}}</view>
  69. </view>
  70. </view>
  71. </view>
  72. </view>
  73. </view>
  74. </view>
  75. </view>
  76. </template>
  77. <script>
  78. import {
  79. mapState,
  80. mapMutations
  81. } from 'vuex'
  82. export default {
  83. computed: {
  84. ...mapState('m_children', ['singleDetail'])
  85. },
  86. data(){
  87. return{
  88. };
  89. },
  90. onLoad() {
  91. },
  92. methods:{
  93. }
  94. }
  95. </script>
  96. <style lang="scss">
  97. @import '@/subpkg/common/detailpage.scss';
  98. .flex-colum{
  99. display: flex;
  100. flex-direction: column;
  101. align-items: center;
  102. }
  103. </style>