✨ feat(首页): 联调首页活动和轮播API

hookehuyr
Commit 7b1c6253d557fc165fb3da1a5048da8d04afb71e 7b1c6253 1 parent b1559bcd
Showing 4 changed files with 58 additions and 74 deletions
src/api/Host/index.js
src/components/activity-card.vue
src/pages/createActivity/index.vue
src/pages/index/index.vue
--- a/src/api/Host/index.js
View file @7b1c625
+++ b/src/api/Host/index.js
View file @7b1c625
 /*
  * @Date: 2022-10-14 17:26:56
  * @LastEditors: hookehuyr hookehuyr@gmail.com
- * @LastEditTime: 2022-10-18 09:28:54
+ * @LastEditTime: 2022-10-18 11:34:45
  * @FilePath: /swx/src/api/Host/index.js
- * @Description: 文件描述
+ * @Description: 活动相关接口
  */
 import { fn, fetch } from '../fn';
 const Api = {
   HOST_LIST: '/srv/?a=host_list',
   ACTIVITY_ADD: '/srv/?a=activity_add',
+  ACTIVITY_HOMEPAGE: '/srv/?a=activity_app_homepage',
 }
 /**
@@ -23,3 +24,9 @@ export const hostListAPI = (params) => fn(fetch.post(Api.HOST_LIST, params));
  * @returns
  */
 export const addActivityAPI = (params) => fn(fetch.post(Api.ACTIVITY_ADD, params));
+
+/**
+ * @description: 首页活动和轮播
+ * @returns
+ */
+export const activityHomeAPI = (params) => fn(fetch.get(Api.ACTIVITY_HOMEPAGE, params));
--- a/src/components/activity-card.vue
View file @7b1c625
+++ b/src/components/activity-card.vue
View file @7b1c625
 <!--
  * @Date: 2022-09-20 15:39:37
  * @LastEditors: hookehuyr hookehuyr@gmail.com
- * @LastEditTime: 2022-10-08 10:14:21
+ * @LastEditTime: 2022-10-18 14:21:21
  * @FilePath: /swx/src/components/activity-card.vue
  * @Description: 活动卡片组件
 -->
@@ -10,20 +10,18 @@
     <view class="card-main">
       <van-row>
         <van-col :span="10">
-          <van-image width="100%" height="5rem" fit="cover" src="https://img.yzcdn.cn/vant/cat.jpeg" />
+          <van-image width="100%" height="5rem" fit="cover" :src="data.cover" />
         </van-col>
         <van-col :span="14">
           <view class="card-main-text">
-            <view style="font-size: 1.1rem;">{{ data.title }}</view>
+            <view style="font-size: 1.1rem;">{{ data.name }}</view>
-            <!-- <view class="status-text">
-              <text>网络活动</text>
-            </view> -->
             <view class="status-text">
-              <van-tag :round="true" color="#E9FAF4" text-color="#199A74" size="large">网络活动</van-tag>
+              <van-tag v-if="data.mode === 'offline'" :round="true" color="#E9FAF4" text-color="#199A74" size="large">现场活动</van-tag>
-              <van-tag :round="true" color="#D7FFD7" text-color="#019200" size="large">报名中</van-tag>
+              <van-tag v-if="data.mode === 'online'" :round="true" color="#E9FAF4" text-color="#199A74" size="large">线上活动</van-tag>
+              <van-tag v-if="register" :round="true" color="#D7FFD7" text-color="#019200" size="large">报名中</van-tag>
             </view>
             <view style="font-size: 0.95rem;">
-              <van-icon name="clock-o" color="#BBBBBB" />&nbsp;2022-08-25 14:00
+              <van-icon name="clock-o" color="#BBBBBB" />&nbsp;{{ formatDate(data.activity_time) }}
             </view>
           </view>
         </van-col>
@@ -41,13 +39,13 @@
       <van-row>
         <van-col :span="19">
           <view style="line-height: 2;">
-            <text>浏览：2996</text>&nbsp;
+            <text>浏览：{{ data.view_count }}</text>&nbsp;
-            <text>报名：444/无限</text>&nbsp;
+            <text>报名：{{ data.reg_count }}/<text v-if="data.reg_max === 0">无限</text><text v-else>{{ data.reg_max }}</text></text>&nbsp;
-            <text>岗位：333</text>
+            <text v-if="data.extend.length">岗位：{{ data.extend && data.extend.join(',') }}</text>
           </view>
         </van-col>
         <van-col v-if="status === 'join'" :span="5">
-          <view @tap="goTo()" class="status-button">
+          <view @tap="goTo(data.id)" class="status-button">
             <text>我要报名</text>
           </view>
         </van-col>
@@ -58,20 +56,27 @@
 </template>
 <script setup>
-import { ref, defineProps } from 'vue'
+import { ref, defineProps, computed } from 'vue'
-import icon_time from '@/images/icon/time@2x.png'
 import icon_address from '@/images/icon/address@2x.png'
-
 import Taro from '@tarojs/taro'
+import * as dayjs from 'dayjs'
 const props = defineProps({
   data: Object,
   status: String
+});
+
+const register = computed(() => { // 报名中状态显示
+  return false
 })
-const goTo = () => {
+const formatDate = (date) => {
+  return dayjs(date).format('YYYY-MM-DD HH:mm')
+}
+
+const goTo = (id) => {
   Taro.navigateTo({
-    url: '../activityDetail/index'
+    url: '../activityDetail/index?id=' + id
   })
 }
 </script>
@@ -82,6 +87,7 @@ const goTo = () => {
 .activity-card-page {
   background-color: #FFFFFF;
   border-radius: 0.5rem;
+  margin-bottom: 1rem;
   .card-main {
     padding: 0.8rem;
     border-bottom: 1px solid #F2F2F2;
--- a/src/pages/createActivity/index.vue
View file @7b1c625
+++ b/src/pages/createActivity/index.vue
View file @7b1c625
 <!--
  * @Date: 2022-09-21 16:04:10
  * @LastEditors: hookehuyr hookehuyr@gmail.com
- * @LastEditTime: 2022-10-18 11:09:05
+ * @LastEditTime: 2022-10-18 13:15:36
  * @FilePath: /swx/src/pages/createActivity/index.vue
  * @Description: 创建活动页面
 -->
@@ -528,15 +528,9 @@ const status = ref('disable'); // disable=未发布，enable=已发布
 const publish_status = ref('暂不发布');
 const columns = ref(['暂不发布', '立即发布']);
 const onPublishChange = (event) => {
-  // const { picker, value, index } = event.detail;
-  // console.warn(value);
-  // console.warn(index);
-  // publish_status.value = value;
 }
 const onPublishConfirm = (event) => {
   const { picker, value, index } = event.detail;
-  // console.warn(value);
-  // console.warn(index);
   if (index) { // 已发布
     status.value = 'enable';
   } else { // 未发布
@@ -555,10 +549,6 @@ const activity_type = ref('现场活动');
 const mode = ref('offline'); // offline=现场活动，online=线上活动
 const activity_type_columns = ref(['现场活动', '线上活动']);
 const onActivityTypeChange = (event) => {
-  // const { picker, value, index } = event.detail;
-  // console.warn(value);
-  // console.warn(index);
-  // activity_type.value = value;
 }
 const onActivityTypeConfirm = (event) => {
   const { picker, value, index } = event.detail;
@@ -586,10 +576,6 @@ const public_type = ref('不公开');
 const is_public = ref(0);
 const public_type_columns = ref(['不公开', '公开']);
 const onPublicTypeChange = (event) => {
-  // const { picker, value, index } = event.detail;
-  // console.warn(value);
-  // console.warn(index);
-  // public_type.value = value;
 }
 const onPublicTypeConfirm = (event) => {
   const { picker, value, index } = event.detail;
@@ -685,10 +671,10 @@ const onSubmit = async () => {
       reg_begin_time: reg_begin_time.value, // 报名开始时间
       reg_end_time: reg_end_time.value, // 报名截止时间
       reg_max: reg_max.value === '无限制' ? 0 : reg_max.value, // 报名限制人数
-      status: publish_status.value === '暂不发布' ? 0 : 1, // 状态
+      status: status.value, // 状态
-      mode: activity_type.value === '现场活动' ? 0 : 1, // 活动方式
+      mode: mode.value, // 活动方式
       address: address.value, // 活动地址
-      is_public: public_type.value === '不公开' ? 0 : 1, // 是否公开
+      is_public: is_public.value, // 是否公开
       is_inner: is_inner.value ? 1 : 0, // 是否允许内部人员报名
       is_black: is_black.value ? 1 : 0, // 是否屏蔽黑名单
       extend: JSON.stringify(extend.value), // 义工岗位
--- a/src/pages/index/index.vue
View file @7b1c625
+++ b/src/pages/index/index.vue
View file @7b1c625
 <!--
  * @Date: 2022-09-19 14:11:06
  * @LastEditors: hookehuyr hookehuyr@gmail.com
- * @LastEditTime: 2022-10-13 22:30:46
+ * @LastEditTime: 2022-10-18 14:28:15
  * @FilePath: /swx/src/pages/index/index.vue
  * @Description: 首页
 -->
@@ -10,8 +10,8 @@
     <swiper class='slide-box' indicatorColor='#94B294' indicatorActiveColor='#FFFFFF' current="current"
       :duration="duration" :interval="interval" :circular="isCircular" :autoplay="isAutoplay"
       :indicatorDots="hasIndicatorDots">
-      <swiper-item v-for="(item, idx) in imgUrls" :key="idx">
+      <swiper-item v-for="(item, idx) in carousel" :key="idx">
-        <image :src="item" class="slide-image" />
+        <image @tap="goTo(item.id)" :src="item.cover" class="slide-image" />
       </swiper-item>
     </swiper>
   </view>
@@ -30,37 +30,16 @@ import Taro from '@tarojs/taro'
 import { ref, onMounted } from 'vue';
 import activityCard from '@/components/activity-card.vue'
 import navbar from '@/components/navbar.vue'
-import request from '../../utils/request';
+import Taro from '@tarojs/taro'
-onMounted(() => {
+onMounted(async () => {
-  request.get('/srv/?a=activity_app_homepage')
-  .then(res => {
-    // console.warn(res);
-  })
-  .catch(err => {
-    console.error(err);
-  })
 })
-const activity_list = ref([{
+const goTo = (id) => {
-  title: '智慧没有烦恼',
+  Taro.navigateTo({
-  address: '上海市杨浦区军工路100号A座05室',
+    url: '../activityDetail/index?id=' + id
-}, {
+  })
-  title: '万人共乘浪漫热气球',
+}
-  address: '',
-}, {
-  title: '八段锦',
-  address: '',
-}, {
-  title: '智慧没有烦恼',
-  address: '上海市杨浦区军工路100号A座05室',
-}, {
-  title: '万人共乘浪漫热气球',
-  address: '',
-}, {
-  title: '八段锦',
-  address: '',
-}]);
 // 分享功能
 wx.showShareMenu({
@@ -71,6 +50,7 @@ wx.showShareMenu({
 <script>
 import "./index.less";
+import { activityHomeAPI } from '@/api/Host/index'
 export default {
   name: "indexPage",
@@ -113,6 +93,14 @@ export default {
       }
     });
   },
+  async onShow () {
+    // 获取活动和轮播信息
+    const { code, data } = await activityHomeAPI();
+    if (code) {
+      this.activity_list = data.activity_list;
+      this.carousel = data.carousel;
+    }
+  },
   data() {
     return {
       current: 1,
@@ -121,11 +109,8 @@ export default {
       isCircular: true,
       isAutoplay: false,
       hasIndicatorDots: true,
-      imgUrls: [
+      activity_list: [],
-        'http://gyzs.onwall.cn/swx_banner%402x.png',
+      carousel: []
-        'http://gyzs.onwall.cn/swx_banner%402x.png',
-        'http://gyzs.onwall.cn/swx_banner%402x.png',
-      ],
     };
   },
   methods: {