details.vue 5.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192
  1. <template>
  2. <view class="container">
  3. <image class="banner" :src="info.image" mode="scaleToFill"></image>
  4. <uni-section :title="info.topic" titleFontSize="18" type="line">
  5. <uni-list>
  6. <uni-list-item :show-extra-icon="true" :extra-icon="extraIcon[0]" title="报名时间" :rightText="`${info.regStartTime}至${info.regEndTime}`"></uni-list-item>
  7. <uni-list-item :show-extra-icon="true" :extra-icon="extraIcon[0]" title="活动时间" :rightText="`${info.startTime}至${info.endTime}`"></uni-list-item>
  8. <uni-list-item :show-extra-icon="true" :extra-icon="extraIcon[1]" title="负责人" :rightText="info.sponsorName"></uni-list-item>
  9. <uni-list-item :show-extra-icon="true" :extra-icon="extraIcon[2]" title="联系电话" :rightText="info.sponsorPhone"></uni-list-item>
  10. </uni-list>
  11. </uni-section>
  12. <uni-section title="活动详情" titleFontSize="18" type="line">
  13. <rich-text image-menu-prevent="true" :nodes="info.description" class="content"></rich-text>
  14. </uni-section>
  15. <uni-goods-nav class="goodNav" :fill="true" :options="options" :buttonGroup="buttonGroup" @buttonClick="buttonClick" />
  16. </view>
  17. </template>
  18. <script>
  19. import request from '../../api/activity.js';
  20. import { BASE_URL } from '../../env.js';
  21. export default {
  22. onLoad: function (option) {
  23. this.activityId = option.activityId;
  24. },
  25. data() {
  26. return {
  27. activityId: '',
  28. info: null,
  29. options: [],
  30. extraIcon: [
  31. {
  32. color: '#c60814',
  33. size: '22',
  34. type: 'calendar'
  35. },
  36. {
  37. color: '#c60814',
  38. size: '22',
  39. type: 'person-filled'
  40. },
  41. {
  42. color: '#c60814',
  43. size: '22',
  44. type: 'phone'
  45. }
  46. ],
  47. buttonGroup: [
  48. {
  49. text: '报名活动',
  50. backgroundColor: '#ff0000',
  51. color: '#fff'
  52. },
  53. {
  54. text: '获取积分',
  55. backgroundColor: '#ffa200',
  56. color: '#fff'
  57. }
  58. ],
  59. statusInfo: true
  60. }
  61. },
  62. mounted() {
  63. this.query();
  64. },
  65. methods: {
  66. async query() {
  67. const res = await request.getdetails({ activityId: this.activityId });
  68. const statusInfo = await request.getstatus({ activityId: this.activityId });
  69. res.data.image = BASE_URL.fileUrl + res.data.image;
  70. this.info = res.data;
  71. this.statusInfo = statusInfo.status
  72. const newDateTime = new Date().getTime();
  73. const isTime = Date.parse(res.data.regEndTime);
  74. const startTime = Date.parse(res.data.regStartTime);
  75. const startActiveTime = Date.parse(res.data.startTime);
  76. // 报名按钮状态设置
  77. if (!statusInfo.status) {
  78. this.buttonGroup[0].backgroundColor = '#ff0000';
  79. this.buttonGroup[0].text = '报名活动';
  80. delete this.buttonGroup[0].status
  81. delete this.buttonGroup[0].disable
  82. this.buttonGroup[1].disable = true;
  83. this.buttonGroup[1].backgroundColor = '#999';
  84. }
  85. if (statusInfo.status) {
  86. this.buttonGroup[0].backgroundColor = '#999';
  87. this.buttonGroup[0].text = '取消报名';
  88. this.buttonGroup[0].status = true;
  89. delete this.buttonGroup[1].disable;
  90. this.buttonGroup[1].backgroundColor = '#ffa200';
  91. }
  92. if (newDateTime < startTime) {
  93. this.buttonGroup[0].backgroundColor = '#999';
  94. this.buttonGroup[0].text = '报名未开始';
  95. this.buttonGroup[0].disable = true;
  96. }
  97. if (newDateTime > isTime) {
  98. this.buttonGroup[0].backgroundColor = '#999';
  99. this.buttonGroup[0].text = '报名已结束';
  100. this.buttonGroup[0].disable = true;
  101. }
  102. // 活动状态及积分获取按钮状态
  103. if (res.data.status == 3) {
  104. this.buttonGroup[1].text = '活动已结束';
  105. this.buttonGroup[1].backgroundColor = '#999';
  106. this.buttonGroup[1].disable = true;
  107. this.buttonGroup[0].backgroundColor = '#999';
  108. this.buttonGroup[0].text = '报名已结束';
  109. this.buttonGroup[0].disable = true;
  110. }else if(res.data.status == 0) {
  111. if(newDateTime < startActiveTime){
  112. this.buttonGroup[1].text = '活动未开始';
  113. this.buttonGroup[1].backgroundColor = '#999';
  114. this.buttonGroup[1].disable = true;
  115. }else{
  116. if(statusInfo.status){
  117. this.buttonGroup[1].text = '获取积分';
  118. this.buttonGroup[1].backgroundColor = '#ffa200';
  119. delete this.buttonGroup[1].disable;
  120. }else{
  121. this.buttonGroup[1].text = '活动进行中';
  122. this.buttonGroup[1].backgroundColor = '#999';
  123. this.buttonGroup[1].disable = true;
  124. }
  125. }
  126. }
  127. },
  128. buttonClick(e) {
  129. if (e.index == 0){
  130. if (e.content.disable) return;
  131. if (e.content.status) {
  132. this.offReport();
  133. return;
  134. };
  135. this.report();
  136. } else {
  137. if (e.content.disable) return;
  138. this.submitPhoto();
  139. }
  140. },
  141. async report() {
  142. const res = await request.report({ activityId: this.activityId });
  143. if (res.code == 200) {
  144. wx.showToast({
  145. title: '报名成功'
  146. })
  147. this.query();
  148. }
  149. },
  150. async offReport() {
  151. const res = await request.offReport({ activityId: this.activityId });
  152. if (res.code == 200) {
  153. wx.showToast({
  154. title: '取消报名成功'
  155. })
  156. this.query();
  157. }
  158. },
  159. async submitPhoto() {
  160. uni.navigateTo({ url: `/pages/activity/uploadFiel?activityId=${this.activityId}` })
  161. }
  162. }
  163. }
  164. </script>
  165. <style>
  166. .container {
  167. position: relative;
  168. padding-bottom: 12vw;
  169. background-color: #fff;
  170. }
  171. .banner {
  172. width: 100%;
  173. height: 50vw;
  174. }
  175. .content {
  176. display: block;
  177. width: 90%;
  178. margin: 10px auto;
  179. }
  180. .goodNav {
  181. width: 100%;
  182. height: 12vw;
  183. position: fixed;
  184. left: 0;
  185. bottom: 0;
  186. }
  187. </style>