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