Hooke / swx_weapp

Go to a project
Toggle navigation Toggle navigation pinning
hookehuyr
7b1c6253 1 parent b1559bcd

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

Inline Side-by-side
Showing 4 changed files with 58 additions and 74 deletions
/*
* @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));
......
<!--
* @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 class="status-text">
<text>网络活动</text>
</view> -->
<view style="font-size: 1.1rem;">{{ data.name }}</view>
<view class="status-text">
<van-tag :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 === 'offline'" :round="true" color="#E9FAF4" text-color="#199A74" 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>报名：444/无限</text>&nbsp;
<text>岗位：333</text>
<text>浏览：{{ data.view_count }}</text>&nbsp;
<text>报名：{{ data.reg_count }}/<text v-if="data.reg_max === 0">无限</text><text v-else>{{ data.reg_max }}</text></text>&nbsp;
<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 icon_time from '@/images/icon/time@2x.png'
import { ref, defineProps, computed } from 'vue'
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;
......
<!--
* @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, // 状态
mode: activity_type.value === '现场活动' ? 0 : 1, // 活动方式
status: status.value, // 状态
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), // 义工岗位
......
<!--
* @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">
<image :src="item" class="slide-image" />
<swiper-item v-for="(item, idx) in carousel" :key="idx">
<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(() => {
request.get('/srv/?a=activity_app_homepage')
.then(res => {
// console.warn(res);
})
.catch(err => {
console.error(err);
})
onMounted(async () => {
})
const activity_list = ref([{
title: '智慧没有烦恼',
address: '上海市杨浦区军工路100号A座05室',
}, {
title: '万人共乘浪漫热气球',
address: '',
}, {
title: '八段锦',
address: '',
}, {
title: '智慧没有烦恼',
address: '上海市杨浦区军工路100号A座05室',
}, {
title: '万人共乘浪漫热气球',
address: '',
}, {
title: '八段锦',
address: '',
}]);
const goTo = (id) => {
Taro.navigateTo({
url: '../activityDetail/index?id=' + id
})
}
// 分享功能
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: [
'http://gyzs.onwall.cn/swx_banner%402x.png',
'http://gyzs.onwall.cn/swx_banner%402x.png',
'http://gyzs.onwall.cn/swx_banner%402x.png',
],
activity_list: [],
carousel: []
};
},
methods: {
......