✨ feat: 优化已结束活动详情显示

hookehuyr
Commit d4e45d5d5e2419595cbae7c92b219e9e72ac2506 d4e45d5d 1 parent 03dff360
Showing 3 changed files with 47 additions and 23 deletions
src/components/activity-bar.vue
src/components/activity-card.vue
src/pages/activityDetail/index.vue
--- a/src/components/activity-bar.vue
View file @d4e45d5
+++ b/src/components/activity-bar.vue
View file @d4e45d5
 <!--
  * @Date: 2022-09-26 16:10:35
  * @LastEditors: hookehuyr hookehuyr@gmail.com
- * @LastEditTime: 2022-10-21 13:37:32
+ * @LastEditTime: 2022-10-25 16:25:19
  * @FilePath: /swx/src/components/activity-bar.vue
  * @Description: 活动详情页底部导航栏
 -->
@@ -17,22 +17,29 @@
         </view>
       </van-col>
       <van-col span="19">
-        <view v-if="userType === 'volunteer'" class="user-not-reg">
+        <view v-if="!isEnd">
-          <view class="button" @tap="goTo('volunteer')">义工报名</view>
+          <view v-if="userType === 'volunteer'" class="user-not-reg">
-          <view class="button" @tap="goTo('join')">活动报名</view>
+            <view class="button" @tap="goTo('volunteer')">义工报名</view>
-        </view>
+            <view class="button" @tap="goTo('join')">活动报名</view>
-        <view v-if="userType === 'player_join'" class="user-reg">
+          </view>
-          <view class="button" @tap="goTo('info')">报名信息</view>
+          <view v-if="userType === 'player_join'" class="user-reg">
-        </view>
+            <view class="button" @tap="goTo('info')">报名信息</view>
-        <view v-if="userType === 'creator'" class="admin-control">
+          </view>
-          <view class="edit" @tap="goTo('edit')">修改活动</view>
+          <view v-if="userType === 'creator'" class="admin-control">
-          <view class="list" @tap="goTo('list')">报名列表</view>
+            <view class="edit" @tap="goTo('edit')">修改活动</view>
-        </view>
+            <view class="list" @tap="goTo('list')">报名列表</view>
-        <view v-if="userType === 'player'" class="staff-join">
+          </view>
-          <view class="button" @tap="goTo('join')">报名活动</view>
+          <view v-if="userType === 'player'" class="staff-join">
+            <view class="button" @tap="goTo('join')">报名活动</view>
+          </view>
+          <view v-if="userType === 'volunteer_only'" class="staff-not-join">
+            <view class="button" @tap="goTo('volunteer')">义工报名</view>
+          </view>
         </view>
-        <view v-if="userType === 'volunteer_only'" class="staff-not-join">
+        <view v-else>
-          <view class="button" @tap="goTo('volunteer')">义工报名</view>
+          <view class="activity-close">
+            <view class="button" @tap="goTo('info')">活动结束</view>
+          </view>
         </view>
       </van-col>
     </van-row>
@@ -54,6 +61,7 @@ const props = defineProps({
   userType: String,
   regId: String,
   memberRole : String,
+  isEnd : String,
 })
 const goTo = (type) => {
@@ -197,5 +205,19 @@ const goTo = (type) => {
       width: 100%;
     }
   }
+
+  .activity-close {
+    display: flex;
+    text-align: center;
+
+    .button {
+      padding: 0.8rem;
+      border-radius: 2rem;
+      background-color: #EDEDED;
+      color: #909090;
+      margin: 0.5rem 0.8rem;
+      width: 100%;
+    }
+  }
 }
 </style>
--- a/src/components/activity-card.vue
View file @d4e45d5
+++ b/src/components/activity-card.vue
View file @d4e45d5
 <!--
  * @Date: 2022-09-20 15:39:37
  * @LastEditors: hookehuyr hookehuyr@gmail.com
- * @LastEditTime: 2022-10-25 16:11:42
+ * @LastEditTime: 2022-10-25 16:37:35
  * @FilePath: /swx/src/components/activity-card.vue
  * @Description: 活动卡片组件
 -->
 <template>
-  <view @tap="goTo(data.id)" class="activity-card-page">
+  <view @tap="goTo(data.id, formatStatus(data))" class="activity-card-page">
     <view class="card-main">
       <van-row>
         <van-col :span="10">
@@ -86,16 +86,16 @@ const formatStatus = (item) => {
   } else if (dayjs(item.reg_begin_time).isBefore(dayjs(item.server_time)) && dayjs(item.server_time).isBefore(dayjs(item.reg_end_time))) {
     return '报名中';
   } else if (dayjs(item.reg_end_time).isBefore(dayjs(item.server_time)) && dayjs(item.server_time).isBefore(dayjs(item.activity_time))) {
-    return '报名截止';
+    return '报名结束';
   } else if (dayjs(item.activity_time).isBefore(dayjs(item.server_time))) {
     return '活动进行中';
   }
   return 'mo'
 }
-const goTo = (id) => {
+const goTo = (id, status) => {
   Taro.navigateTo({
-    url: '../activityDetail/index?id=' + id
+    url: '../activityDetail/index?id=' + id + '&status=' + decodeURIComponent(status)
   })
 }
 </script>
--- a/src/pages/activityDetail/index.vue
View file @d4e45d5
+++ b/src/pages/activityDetail/index.vue
View file @d4e45d5
 <!--
  * @Date: 2022-09-26 14:36:57
  * @LastEditors: hookehuyr hookehuyr@gmail.com
- * @LastEditTime: 2022-10-21 10:27:19
+ * @LastEditTime: 2022-10-25 16:26:07
  * @FilePath: /swx/src/pages/activityDetail/index.vue
  * @Description: 活动详情页
 -->
@@ -106,7 +106,7 @@
     </view>
   </view>
   <view style="height: 6rem;"></view>
-  <activity-bar :user-type="userType" :reg-id="reg_id" :member-role="member_role" />
+  <activity-bar :user-type="userType" :reg-id="reg_id" :member-role="member_role" :is-end="is_end" />
   <!-- <van-action-sheet
     :z-index="10"
@@ -473,6 +473,7 @@ export default {
     const { code, data } = await activityInfoAPI({ i: id });
     if (code) {
       this.activity = data.activity;
+      this.is_end = data.activity.is_end;
       this.host = data.host;
       this.member_role = data.member_role;
       this.reg_id = data.reg_id;
@@ -486,6 +487,7 @@ export default {
       host: {},
       member_role: '',
       reg_id: '',
+      is_end: '',
     }
   },
   computed: {