talk
/
talk_appAmin
8
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

增加详情页

main
26947 2024-06-01 15:04:14 +08:00
parent f021759a3e
commit 28c31bf458
4 changed files with 243 additions and 21 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
pages.json
View File

@ -48,6 +48,14 @@
"navigationBarTextStyle": "white"
}
}
, {
"path": "pages/activity/info",
"style": {
"navigationBarTitleText": "活动详情",
"navigationStyle": "custom",
"navigationBarTextStyle": "white"
}
}
, {
"path": "pages/work/index",
"style": {

58
pages/activity/index.vue
View File

@ -43,17 +43,26 @@
<view class="scrollable-list">
<up-list @scrolltolower="scrolltolower" :showScrollbar="false" :pagingEnabled="true">
<up-list-item v-for="(item, index) in actiInfoList" :key="index">
<view class="listInfo">
<view class="listInfo" @click="toInfo(item)">
<span class="titile">
{{ item.title }}
</span>
<view class="startTime">开始时间：{{ item.startTime }}</view>
<view class="endTime">结束时间：{{ item.endTime }}</view>
<view class="addrs">活动地点：{{ item.addrs }}</view>
<view class="startTime flex alignCenter">
<image :src="tu52" style="width: 25rpx; height: 26rpx; margin-right: 12rpx;"></image>
开始时间：{{ item.startTime }}</view>
<view class="endTime flex alignCenter">
<image :src="tu53" style="width: 25rpx; height: 26rpx; margin-right: 12rpx;"></image>
结束时间：{{ item.endTime }}</view>
<view class="addrs flex alignCenter">
<image :src="tu51" style="width: 20rpx; height: 26rpx; margin-right: 12rpx;"></image>
活动地点：{{ item.addrs }}</view>
<view class="statsInfo">
<view :class="getDictLabelByValue(item.state).cssClass" >
<span class="text">{{ getDictLabelByValue(item.state).dictLabel }}</span>
</view>
<!-- 动态数据 -->
<!-- <view :class="getDictLabelByValue(item.state).cssClass" >
<span class="text">{{ getDictLabelByValue(item.state).dictLabel }}</span></view> -->
<!-- 静态数据 -->
<view class="state1" >
<span class="text">报名中</span></view>
</view>
</view>
@ -77,6 +86,9 @@ const { proxy } = getCurrentInstance();
const iconConfig = proxy.iconConfig;
const tu21 = iconConfig.tu21;
const tu22 = iconConfig.tu22;
const tu51 = iconConfig.tu51;
const tu52 = iconConfig.tu52;
const tu53 = iconConfig.tu53;
const activityState = ref([])//字典
const imgInfo = ref("")
// 创建响应式数据 ref('#001f3f')
@ -90,26 +102,32 @@ const list4 = reactive([
{ name: '已结束' }
]);
const actiInfoList = ref([
{title:'怎么评论爱德华·艾尔加这位音乐家及其他的作品,欢迎大家发表自己的看法？',
{
id:1,
title:'怎么评论爱德华·艾尔加这位音乐家及其他的作品,欢迎大家发表自己的看法？',
startTime:'2023-05-01 15:00',
endTime:'2023-05-01 16:00',
state:'1',
addrs:'天津电子信息职业技术学院操场东面'
},
{title:'怎么评论爱德华·艾尔加这位音乐家及其他的作品,欢迎大家发表自己的看法？',
{
id:2,
title:'怎么评论爱德华·艾尔加这位音乐家及其他的作品,欢迎大家发表自己的看法？',
startTime:'2023-05-01 15:00',
endTime:'2023-05-01 16:00',
state:'2',
addrs:'天津电子信息职业技术学院操场东面'
},
{title:'怎么评论爱德华·艾尔加这位音乐家及其他的作品,欢迎大家发表自己的看法？',
{id:3,
title:'怎么评论爱德华·艾尔加这位音乐家及其他的作品,欢迎大家发表自己的看法？',
startTime:'2023-05-01 15:00',
endTime:'2023-05-01 16:00',
state:'0',
addrs:'天津电子信息职业技术学院操场东面'
}
,
{title:'怎么评论爱德华·艾尔加这位音乐家及其他的作品,欢迎大家发表自己的看法？',
{id:4,
title:'怎么评论爱德华·艾尔加这位音乐家及其他的作品,欢迎大家发表自己的看法？',
startTime:'2023-05-01 15:00',
endTime:'2023-05-01 16:00',
state:'0',
@ -143,6 +161,10 @@ const getDictLabelByValue = (state) => {
return dict ? dict : '未知状态';
};
const toInfo = (item) => {
proxy.$tab.navigateTo(`/pages/activity/info?id=${item.id}`);
}
</script>
<style lang="scss">
.fixed-header {
@ -223,11 +245,10 @@ align-items: center;
margin-left: 32rpx;
}
.sousuoBox .souBOx .shuruText {
margin-left: 20rpx;
font-weight: 400;
font-size: 28rpx;
text-align: center;
color: #999999 100%;
margin-left: 20rpx;
color: #999999 !important;
}
.img3 {
width: 38rpx;
@ -251,7 +272,7 @@ align-items: center;
padding-left: 24rpx;
.titile {
font-weight: 400;
width: 614rpx;
height: 80rpx;
font-size: 32rpx;
color: #000000 100%;
@ -259,7 +280,7 @@ align-items: center;
.startTime {
margin-top: 34rpx;
font-weight: 400;
width: 350rpx;
height: 24rpx;
font-size: 24rpx;
color: #000000 100%;
@ -267,15 +288,14 @@ align-items: center;
.endTime {
margin-top: 12rpx;
font-weight: 400;
width: 350rpx;
height: 24rpx;
font-size: 24rpx;
color: #000000 100%;
}
.addrs {
margin-top: 24rpx;
margin-top: 22rpx;
font-weight: 400;
width: 504rpx;
height: 24rpx;
font-size: 24rpx;
color: #000000 100%;

190
pages/activity/info.vue Normal file
View File

@ -0,0 +1,190 @@
<template class="content">
<view class="fixed-header">
<!-- 顶部导航栏 -->
<up-navbar leftText="" title="" :placeholder="true" :safeAreaInsetTop="true" @leftClick="leftClick">
<template #center>
<div class="navbarcenter"><span>活动详情</span></div>
</template>
</up-navbar>
</view>
<view style="height: 100vh; overflow: auto;">
<view class="avtivityInfo">
<view>
<view class="cards">
<view class="title"> {{ actiInfoList.title }}</view>
<view class="time">活动时间：{{ actiInfoList.startTime }} - {{ actiInfoList.endTime }}</view>
<view class="addrs">活动地点：{{ actiInfoList.addrs }}</view>
</view>
<view class="cardz">{{ actiInfoList.activityInfo }}</view>
<view class="cardx">
<image :src="QNDomain + actiInfoList.url" class="image"></image>
</view>
</view>
</view>
<view class="dictAuto">
<view class="state1">
<up-button color="#c0f0ec" size="large" shape="circle" @click="btnClick"><span
class="btnText">立即报名</span></up-button>
</view>
</view>
</view>
<view class="infox">
<view class="infoavatar"><up-avatar size="60rpx" :src="QNDomain + actiInfoList.launchAvatarsurl"></up-avatar></view>
<view>
<view class="launchName">{{ actiInfoList.launchName }}</view>
<view class="launchAddres">{{ actiInfoList.launchAddres }}</view>
</view>
<view class="elroll">已报名：{{ actiInfoList.elroll }}人</view>
</view>
<view class="infox2">
</view>
</template>
<script setup>
import { onShow, onLoad } from '@dcloudio/uni-app'
import { ref, reactive, getCurrentInstance } from 'vue'
import { useStore } from 'vuex';
const { proxy } = getCurrentInstance();
const iconConfig = proxy.iconConfig;
const tu21 = iconConfig.tu21;
const tu22 = iconConfig.tu22;
const tu51 = iconConfig.tu51;
const tu52 = iconConfig.tu52;
const tu53 = iconConfig.tu53;
// 创建响应式数据 ref('#001f3f')
const bgColor = ref('');
const store = useStore()
const QNDomain = store.state.user.QNDomain
const actiInfoList = ref(
{
title: '社团招新|广纳新人（文学社）',
startTime: '2024.06.01 12:00',
endTime: '2024.06.01 14:00',
state: '1',
addrs: '天津电子信息职业技术学院操场东面',
activityInfo: '社团招新是各大高校、社区或其他组织为了吸引新成员、注入新鲜血液而举办的活动。以下是社团招新的一些关键要点和通常的步骤1.确骤1.确定招新目标和需求:社团需要明确自己想要吸引什么样的新成员，以及这些新成员能为社团带来什么。这有助于社团骤1.确定招新目标和需求:社团需要明确自己想要吸引什么样的新成员，以及这些新成员能为社团带来什么。这有助于社团骤1.确定招新目标和需求:社团需要明确自己想要吸引什么样的新成员，以及这些新成员能为社团带来什么。这有助于社团定招新目标和需求:社团需要明确自己想要吸引什么样的新成员，以及这些新成员能为社团带来什么。这有助于社团更有针对性地制定招新计划和策略。2.制定招新计划:包括招新时间、地点、方式等。例如，可以在新生入学时举办招新活动，卖或者在校园内的显眼位置设立招新摊位。3.宣传和推广:社团需要通过各种渠道进行宣传，如校园广播、海报、社交媒体等以吸引潜在的新成员。宣传内容应突出社团的特色和优势，让更多人了解和关注。4.举办招新活动:在招招新是各大高校、社区或其他组织为了吸引新成员、注入新鲜血液而举办的活动。以下是社团招新的一些关键要点和通常的步骤1.确定招新目标和需求:社团需要明确自己想要吸引什么样的新成员，新期间，社团可以组织各种有趣的活动，如现场表演、游戏互动、展览展示等，以展示社团的风采和实力，同时吸引更多人参与。',
url: 'home/test/image/png/45feb5093f71dbdbec7329ca1822da0_20240601133007403.png',
launchAvatarsurl: 'home/test/image/jpeg/test1_20240531151817921.jpg',
launchName: '爱吃饭的小张',
launchAddres: '天津电子信息职业技术学院',
elroll: '123'
}
);
onLoad((options) => {
console.log("页面参数：", options.id);
})
const leftClick = () => {
proxy.$tab.navigateBack(1)
}
</script>
<style lang="scss">
.navbarcenter {
font-weight: 400;
width: 148rpx;
height: 37rpx;
font-size: 36rpx;
text-align: left;
color: #000000;
}
.avtivityInfo {
width: 686rpx;
margin: 44rpx auto;
.cards {
.title {
font-weight: 400 !important;
font-size: 32rpx;
text-align: left;
color: #000000 !important;
}
.time {
margin-top: 28rpx;
font-weight: 400;
font-size: 24rpx;
text-align: left;
color: #999999 !important;
}
.addrs {
margin-top: 12rpx;
font-weight: 400;
font-size: 24rpx;
text-align: left;
color: #999999 !important;
}
}
.cardz {
margin-top: 48rpx;
font-weight: 400;
width: 674rpx;
font-size: 24rpx;
text-align: left;
color: #000000 !important;
}
.cardx {
.image {
width: 686rpx;
height: 720rpx;
}
}
}
.dictAuto {
margin: 4rpx auto;
margin-bottom: 200rpx;
.state1 {
width: 686rpx;
height: 80rpx;
margin: 0 auto;
.btnText {
font-weight: 400;
width: 120rpx;
height: 32rpx;
font-size: 30rpx;
color: #00CCBE !important;
}
}
}
.infox {
display: flex;
justify-content: space-between;
align-items: center;
height: 88rpx;
padding-left: 32rpx;
padding-right: 32rpx;
position: fixed; /* 固定位置 */
left: 0; /* 左对齐 */
right: 0; /* 右对齐 */
bottom: 68rpx; /* 底部对齐 */
border-top: 1px solid #ccc; /* 上边框 */
background-color: white; /* 背景色设置为白色，防止透明背景导致内容重叠可见 */
z-index: 1000; /* 确保在最上层 */
}
.infox2{
position: fixed; /* 固定位置 */
left: 0; /* 左对齐 */
right: 0; /* 右对齐 */
bottom: 0; /* 底部对齐 */
height: 68rpx;
width: 100%;
background-color: #f6f6f6;
}
</style>

8
utils/icon/icon.js
View File

@ -1,11 +1,15 @@
// useIconConfig.js
import { ref } from 'vue'
import store from '@/store'
const QNDomain = store.state.user.QNDomain
const tu21 = ref(QNDomain + "home/icon/image/png/tu2-1_20240531153239639.png")
const tu22 = ref(QNDomain + "home/icon/image/png/tu2-2_20240531163115818.png")
const tu51 = ref(QNDomain + "home/icon/image/png/tu5-1_20240601124004353.png")
const tu52 = ref(QNDomain + "home/icon/image/png/tu5-2_20240601124010403.png")
const tu53 = ref(QNDomain + "home/icon/image/png/tu5-3_20240601124016641.png")
export default {
tu21,tu22
tu21,tu22,
tu51,tu52,tu53
}