✨ feat(活动详情页逻辑API联调):

hookehuyr
Commit 2b11bdfb63e740e0c8da3a6f504d8400339e36f9 2b11bdfb 1 parent 65674986
Showing 6 changed files with 115 additions and 45 deletions
src/api/Host/index.js
src/api/fn.js
src/components/activity-bar.vue
src/pages/activityDetail/index.less
src/pages/activityDetail/index.vue
src/utils/tools.js
--- a/src/api/Host/index.js
View file @2b11bdf
+++ b/src/api/Host/index.js
View file @2b11bdf
@@ -11,6 +11,7 @@ const Api = {
   HOST_LIST: '/srv/?a=host_list',
   ACTIVITY_ADD: '/srv/?a=activity_add',
   ACTIVITY_HOMEPAGE: '/srv/?a=activity_app_homepage',
+  ACTIVITY_INFO: '/srv/?a=activity_info',
 }
 /**
@@ -30,3 +31,9 @@ export const addActivityAPI = (params) => fn(fetch.post(Api.ACTIVITY_ADD, params
  * @returns
  */
 export const activityHomeAPI = (params) => fn(fetch.get(Api.ACTIVITY_HOMEPAGE, params));
+
+/**
+ * @description: 活动详情
+ * @returns
+ */
+export const activityInfoAPI = (params) => fn(fetch.get(Api.ACTIVITY_INFO, params));
--- a/src/api/fn.js
View file @2b11bdf
+++ b/src/api/fn.js
View file @2b11bdf
 /*
  * @Date: 2022-05-18 22:56:08
  * @LastEditors: hookehuyr hookehuyr@gmail.com
- * @LastEditTime: 2022-10-17 13:19:28
+ * @LastEditTime: 2022-10-18 15:06:40
  * @FilePath: /swx/src/api/fn.js
  * @Description: 文件描述
  */
@@ -66,7 +66,7 @@ export const uploadFn = (api) => {
  */
 export const fetch = {
   get: function (api, params) {
-    return axios.get(api, { params })
+    return axios.get(api, params)
   },
   post: function (api, params) {
     return axios.post(api, params)
--- a/src/components/activity-bar.vue
View file @2b11bdf
+++ b/src/components/activity-bar.vue
View file @2b11bdf
 <!--
  * @Date: 2022-09-26 16:10:35
  * @LastEditors: hookehuyr hookehuyr@gmail.com
- * @LastEditTime: 2022-09-29 09:52:40
+ * @LastEditTime: 2022-10-18 17:40:02
  * @FilePath: /swx/src/components/activity-bar.vue
- * @Description: 文件描述
+ * @Description: 活动详情页底部导航栏
 -->
 <template>
   <view class="activity-bar-page">
@@ -17,21 +17,21 @@
         </view>
       </van-col>
       <van-col span="19">
-        <view v-if="userType === '1'" class="user-not-reg">
+        <view v-if="userType === 'volunteer'" class="user-not-reg">
           <view class="button" @tap="goTo('volunteer')">义工报名</view>
           <view class="button" @tap="goTo('join')">活动报名</view>
         </view>
-        <view v-if="userType === '2'" class="user-reg">
+        <view v-if="userType === 'player_join'" class="user-reg">
           <view class="button" @tap="goTo('info')">报名信息</view>
         </view>
-        <view v-if="userType === '3'" class="admin-control">
+        <view v-if="userType === 'creator'" class="admin-control">
           <view class="edit" @tap="goTo('edit')">修改活动</view>
           <view class="list" @tap="goTo('list')">报名列表</view>
         </view>
-        <view v-if="userType === '4'" class="staff-join">
+        <view v-if="userType === 'player'" class="staff-join">
           <view class="button" @tap="goTo('join')">报名活动</view>
         </view>
-        <view v-if="userType === '5'" class="staff-not-join">
+        <view v-if="userType === 'volunteer_only'" class="staff-not-join">
           <view class="button" @tap="goTo('volunteer')">义工报名</view>
         </view>
       </van-col>
@@ -46,6 +46,11 @@ import icon_home1 from '@/images/icon/home01@2x.png'
 import Taro from '@tarojs/taro'
 const props = defineProps({
+  // player=参与者，可报名活动。
+  // player_join=查看报名信息
+  // volunteer=义工，可报名义工，如果活动允许内部人员参加，则也可报名活动。
+  // volunteer_only=只能报名义工
+  // creator=创建人，可管理活动
   userType: String
 })
--- a/src/pages/activityDetail/index.less
View file @2b11bdf
+++ b/src/pages/activityDetail/index.less
View file @2b11bdf
@@ -40,6 +40,14 @@
   }
 }
+.activity-note {
+  padding: 0.5rem 1rem 1rem 1rem;
+  image {
+    width: 100%;
+    object-fit: contain;
+  }
+}
+
 .activity-info-wrapper {
   .box {
     padding: 0 1rem;
--- a/src/pages/activityDetail/index.vue
View file @2b11bdf
+++ b/src/pages/activityDetail/index.vue
View file @2b11bdf
 <!--
  * @Date: 2022-09-26 14:36:57
  * @LastEditors: hookehuyr hookehuyr@gmail.com
- * @LastEditTime: 2022-09-29 09:46:53
+ * @LastEditTime: 2022-10-18 17:47:13
  * @FilePath: /swx/src/pages/activityDetail/index.vue
- * @Description: 文件描述
+ * @Description: 活动详情页
 -->
 <template>
   <view class="activity-detail-page">
     <view class="share-wrapper">
-      <van-image
+      <van-image width="100%" height="15rem" fit="cover" :src="activity.cover" />
-        width="100%"
-        height="15rem"
-        fit="cover"
-        :src="img_demo"
-      />
       <view @tap="shareActivity" class="share-button">
         <van-icon name="share-o" />
         <text>分享</text>
       </view>
     </view>
-    <view class="title">八段锦</view>
+    <view class="title">{{ activity.name }}</view>
     <view class="activity-title">
       <view class="box">
         <text class="bg-gradient" style="font-size: 1.25rem;">活动信息</text>
@@ -33,7 +28,7 @@
               <text class="label">主办方:</text>
             </van-col>
             <van-col span="17">
-              <text class="value">周三读书会</text>
+              <text class="value">{{ host.name }}</text>
             </van-col>
           </van-row>
         </view>
@@ -45,7 +40,7 @@
               <text class="label">活动时间:</text>
             </van-col>
             <van-col span="17">
-              <text class="value">2023-08-27 23:49</text>
+              <text class="value">{{ formatDate(activity.activity_time) }}</text>
             </van-col>
           </van-row>
         </view>
@@ -57,7 +52,8 @@
               <text class="label">活动方式:</text>
             </van-col>
             <van-col span="17">
-              <text class="value">现场活动</text>
+              <text v-if="activity.mode === 'offline'" class="value">现场活动</text>
+              <text v-if="activity.mode === 'online'" class="value">线上活动</text>
             </van-col>
           </van-row>
         </view>
@@ -69,7 +65,7 @@
               <text class="label">活动地址:</text>
             </van-col>
             <van-col span="17">
-              <text class="value">上海市杨浦区军工路100号A座05室上海市杨浦区军工路100号A座05室</text>
+              <text class="value">{{ activity.address }}</text>
             </van-col>
           </van-row>
         </view>
@@ -81,7 +77,7 @@
               <text class="label">报名开始时间:</text>
             </van-col>
             <van-col span="17">
-              <text class="value">2022-08-28 00:22</text>
+              <text class="value">{{ formatDate(activity.reg_begin_time) }}</text>
             </van-col>
           </van-row>
         </view>
@@ -93,7 +89,7 @@
               <text class="label">报名截止时间:</text>
             </van-col>
             <van-col span="17">
-              <text class="value">2022-08-28 00:22</text>
+              <text class="value">{{ formatDate(activity.reg_end_time) }}</text>
             </van-col>
           </van-row>
         </view>
@@ -105,17 +101,8 @@
         <text class="bg-gradient" style="font-size: 1.25rem;">活动详情</text>
       </view>
     </view>
-    <view style="padding: 0.5rem 1rem 1rem 1rem;">
+    <view class="activity-note">
-      <van-image
+      <view v-html="activity.note"></view>
-        width="100%"
-        height="32rem"
-        fit="contain"
-        :src="img_demo1"
-      />
-    </view>
-    <view style="padding: 0.5rem 1rem 1rem 1rem;">
-      八段锦对人体的好处,简单来说就是滋阴助阳,培补元气,舒经活络,活血生津。长期习练,便可身心调和，耳聪目明,延年益寿。
-      每天早七点，一起八段锦！
     </view>
   </view>
   <view style="height: 6rem;"></view>
@@ -152,17 +139,15 @@
 </template>
 <script setup>
-import img_demo from '@/images/demo@2x.png'
-import img_demo1 from '@/images/demo@2x-1.png'
 import activityBar from '@/components/activity-bar.vue'
 import Taro from '@tarojs/taro'
 import PosterBuilder from '@/components/PosterBuilder/index.vue';
+import { ref, computed } from "vue";
+import * as dayjs from 'dayjs'
-import { ref } from "vue";
+const formatDate = (date) => {
-
+  return dayjs(date).format('YYYY-MM-DD HH:mm')
-// TEMP: 等待真实数据类型
+}
-// 根据用户类型显示对应操作栏
-const userType = ref('3')
 const show_share = ref(false);
 const actions_share = ref([{
@@ -468,7 +453,61 @@ const onSelectSave = ({ detail }) => {
 <script>
 import "./index.less";
+import { activityInfoAPI } from '@/api/Host/index';
+import { pageQuery } from '@/utils/tools.js'
+import mixin from '@/utils/mixin';
+
 export default {
-  name: "demoPage",
+  name: "activityInfoPage",
+  mixins: [mixin.init],
+  async onShow () {
+    // 获取活动详情
+    const id = pageQuery().id;
+    const { code, data } = await activityInfoAPI({ i: id });
+    if (code) {
+      this.activity = data.activity;
+      this.host = data.host;
+      this.member_role = data.member_role;
+      this.reg_id = data.reg_id;
+    }
+  },
+  mounted() {
+  },
+  data () {
+    return {
+      activity: {},
+      host: {},
+      member_role: '',
+      reg_id: '',
+    }
+  },
+  computed: {
+    // player=参与者，可报名活动。
+    // player_join=查看报名信息
+    // volunteer=义工，可报名义工，如果活动允许内部人员参加，则也可报名活动。
+    // volunteer_only=只能报名义工
+    // creator=创建人，可管理活动
+    userType () {
+      let status = ''
+      if (this.member_role === 'creator') {
+        status = 'creator'
+      }
+      if (this.member_role === 'player') {
+        if (this.reg_id) {
+          status = 'player_join'
+        } else {
+          status = 'player'
+        }
+      }
+      if (this.member_role === 'volunteer') {
+        if (this.activity.is_inner) {
+          status = 'volunteer'
+        } else {
+          status = 'volunteer_only'
+        }
+      }
+      return status
+    }
+  }
 };
 </script>
--- a/src/utils/tools.js
View file @2b11bdf
+++ b/src/utils/tools.js
View file @2b11bdf
 /*
  * @Date: 2022-04-18 15:59:42
  * @LastEditors: hookehuyr hookehuyr@gmail.com
- * @LastEditTime: 2022-10-17 15:27:10
+ * @LastEditTime: 2022-10-18 14:55:28
  * @FilePath: /swx/src/utils/tools.js
  * @Description: 文件描述
  */
 import dayjs from 'dayjs';
+import Taro from '@tarojs/taro'
 // 格式化时间
 const formatDate = (date) => {
@@ -82,4 +83,14 @@ const randomId = (n) => {
   return res;
 }
-export { formatDate, wxInfo, hasEllipsis, parseQueryString, strExist, randomId };
+/**
+ * 获取页面query参数
+ */
+const pageQuery = () => {
+  const instance = Taro.getCurrentInstance();
+  let $query = '';
+  $query = JSON.stringify(instance.router.params);
+  return JSON.parse($query)
+}
+
+export { formatDate, wxInfo, hasEllipsis, parseQueryString, strExist, randomId, pageQuery };