From ce937a5f3f5e5506efd70e34a2e099f351d77be1 Mon Sep 17 00:00:00 2001
From: 26947 <12@1>
Date: Sun, 2 Jun 2024 11:10:25 +0800
Subject: [PATCH] =?UTF-8?q?=E6=8B=86=E5=88=86=E9=83=A8=E5=88=86=E9=A1=B5?=
 =?UTF-8?q?=E9=9D=A2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 pages/activity/index.vue            | 159 +++-----------------------
 pages/activity/info.vue             |  32 +++++-
 pages/common/activityList/index.vue | 170 ++++++++++++++++++++++++++++
 utils/icon/icon.js                  |   4 +-
 4 files changed, 214 insertions(+), 151 deletions(-)
 create mode 100644 pages/common/activityList/index.vue

diff --git a/pages/activity/index.vue b/pages/activity/index.vue
index 708ae04..4b3421d 100644
--- a/pages/activity/index.vue
+++ b/pages/activity/index.vue
@@ -18,7 +18,7 @@
         <view class="bgc"></view>
         <!-- 搜索栏 -->
         <view class="sousuoBox1 flex alignCenter justifyBetween">
-            <view class="sousuoBox flex alignCenter justifyBetween" @click="toEarch">
+            <view class="sousuoBox flex alignCenter justifyBetween" @click="toESearch">
                 <view class="souBOx flex alignCenter">
                     <image :src="tu22" class="img3"></image>
                     <span class="shuruText">电音节节日活动</span>
@@ -40,45 +40,14 @@
         </view>
     </view>
         <!-- 列表信息 -->
-        <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" @click="toInfo(item)">
-                        <span class="titile">
-                            {{ item.title }}
-                        </span>
-                        <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="state1"  >
-                            <span class="text">报名中</span></view>
-                        </view>
-
-                    </view>
-
-                </up-list-item>
-            </up-list>
-        </view>
-
-    
+        
+        <ActiInfoList v-model="actiInfoList" @scrolltolower="scrolltolower"></ActiInfoList> 
     <view>
     </view>
 </template>
 <script setup>
+import ActiInfoList from '../common/activityList/index.vue'
 import { onShow, onLoad } from '@dcloudio/uni-app'
-
-
 import {getDicts} from "@/api/system/dict/data"
 import { ref, reactive, getCurrentInstance } from 'vue'
 import { useStore } from 'vuex';
@@ -164,22 +133,19 @@ const getDictLabelByValue = (state) => {
 const toInfo = (item) => {
     proxy.$tab.navigateTo(`/pages/activity/info?id=${item.id}`);
 }
+function toESearch(){
+    console.log("toESearch");
+    proxy.$tab.navigateTo('/pages/search/activitySearch')
+}
 
 </script>
 <style lang="scss">
   .fixed-header {
-    position: fixed;
-    top: 0;
-    left: 0;
-    right: 0;
-    z-index: -1; /* 足够高以确保它在上层 */
-  }
-  .scrollable-list {
-    margin-top:22vh; /* fixed-header 的高度 */
-    height:78vh ;/* 根据屏幕高度和fixed-header的高度计算 */
-    overflow: auto; /* 允许这个容器内部滚动 */
+    
+
   }
 
+
     .leftinfo{
         display: flex;
     align-items: flex-end;
@@ -219,7 +185,7 @@ display: flex;
 align-items: center;
 }
 .bgc {
-    width: 750rpx;
+    width: 100%;
     height: 500rpx;
     background: linear-gradient(180deg, rgb(201, 246, 245), rgb(248, 248, 226));
     position: fixed;
@@ -255,109 +221,10 @@ align-items: center;
     height: 38rpx;
 }
 .tabsinfo {
-    width: 686rpx;
+    
     height: 80rpx;
     margin: 0 auto;
 }
-.listInfo {
-    position: relative;
-    width: 686rpx;
-    height: 328rpx;
-    border-radius: 16rpx 16rpx 16rpx 16rpx;
-    background: #ffffff;
-    margin: 0 auto;
-    margin-top: 12rpx;
-    margin-bottom: 12rpx;
-    padding-top: 24rpx;
-    padding-left: 24rpx;
-    .titile {
-            font-weight: 400;
-           
-            height: 80rpx;
-            font-size: 32rpx;
-            color: #000000 100%;
-        }
-        .startTime {
-            margin-top: 34rpx;
-            font-weight: 400;
-            
-            height: 24rpx;
-            font-size: 24rpx;
-            color: #000000 100%;
-        }
-        .endTime {
-            margin-top: 12rpx;
-            font-weight: 400;
-            
-            height: 24rpx;
-            font-size: 24rpx;
-            color: #000000 100%;
-        }
-        .addrs {
-            margin-top: 22rpx;
-            font-weight: 400;
-            height: 24rpx;
-            font-size: 24rpx;
-            color: #000000 100%;
-        }
-}
-.statsInfo{
-    position: absolute;
-    right: 24rpx;
-    bottom: 24rpx;
-}
 
-.state0 {
-    width: 84rpx;
-    height: 28rpx;
-    border-radius: 14rpx 14rpx 14rpx 14rpx;
-    background: #f1f1f1;
-    display: flex;
-    justify-content: center;
-    align-content: center;
 
-    .text {
-        font-weight: 400;
-        width: 60rpx;
-        height: 20rpx;
-        font-size: 20rpx;
-        text-align: center;
-        color: #7E7E7E;
-    }
-}
-
-.state1 {
-    width: 84rpx;
-    height: 28rpx;
-    border-radius: 14rpx 14rpx 14rpx 14rpx;
-    background: #c0f0ec;
-    display: flex;
-    justify-content: center;
-    align-content: center;
-
-    .text {
-        font-weight: 400;
-        font-size: 20rpx;
-        text-align: center;
-        color: #00CCBE;
-    }
-}
-.state2 {
-    width: 84rpx;
-    height: 28rpx;
-    border-radius: 14rpx 14rpx 14rpx 14rpx;
-    background: #fde2e2;
-    display: flex;
-    justify-content: center;
-    align-content: center;
-
-    .text {
-        font-weight: 400;
-        width: 60rpx;
-        height: 20rpx;
-        font-size: 20rpx;
-        text-align: center;
-        color: #FFABAB;
-    }
-}
 </style>
\ No newline at end of file
diff --git a/pages/activity/info.vue b/pages/activity/info.vue
index fac6f5f..e5718a4 100644
--- a/pages/activity/info.vue
+++ b/pages/activity/info.vue
@@ -31,7 +31,8 @@
         </view>
     </view>
     <view class="infox">
-        <view class="infoavatar"><up-avatar size="60rpx" :src="QNDomain + actiInfoList.launchAvatarsurl"></up-avatar></view>
+        <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>
@@ -39,7 +40,15 @@
         <view class="elroll">已报名：{{ actiInfoList.elroll }}人</view>
     </view>
     <view class="infox2">
-
+            <up-modal :show="open" :title="title"  width="600rpx"
+            :content='content' confirmText="签到"
+            cancelText="取消"
+            confirmColor="#3477FC"
+            showCancelButton
+			closeOnClickOverlay
+            @confirm="confirm"
+            @cancel="cancel"
+            ></up-modal>
     </view>
 
 </template>
@@ -54,7 +63,9 @@ const tu22 = iconConfig.tu22;
 const tu51 = iconConfig.tu51;
 const tu52 = iconConfig.tu52;
 const tu53 = iconConfig.tu53;
-
+const open = ref(false)
+const title = ref('确认签到');  
+const content = ref('请您确认活动签到，祝您玩的愉快！');  
 // 创建响应式数据  ref('#001f3f')
 const bgColor = ref('');
 
@@ -82,6 +93,18 @@ onLoad((options) => {
 const leftClick = () => {
     proxy.$tab.navigateBack(1)
 }
+const btnClick = () => {
+    open.value = !open.value
+}
+//模态框确认按钮
+function confirm () {
+    open.value = !open.value
+}
+//模态框取消按钮
+function cancel () {
+    open.value = !open.value
+}
+
 
 </script>
 <style lang="scss">
@@ -176,7 +199,7 @@ const leftClick = () => {
     border-top: 1px solid #ccc; /* 上边框 */
 
     background-color: white; /* 背景色设置为白色，防止透明背景导致内容重叠可见 */
-    z-index: 1000; /* 确保在最上层 */
+    z-index: 10; 
 }
 .infox2{
     position: fixed; /* 固定位置 */
@@ -186,5 +209,6 @@ const leftClick = () => {
     height: 68rpx;
     width: 100%;
     background-color: #f6f6f6;
+    z-index: 10002; /* 确保在最上层 */
 }
 </style>
\ No newline at end of file
diff --git a/pages/common/activityList/index.vue b/pages/common/activityList/index.vue
new file mode 100644
index 0000000..0a53d56
--- /dev/null
+++ b/pages/common/activityList/index.vue
@@ -0,0 +1,170 @@
+<template>
+    <!-- 列表信息 -->
+    <view class="scrollable-list">
+        <up-list @scrolltolower="scrolltolower" :showScrollbar="false" :pagingEnabled="true">
+            <up-list-item v-for="(item, index) in modelValue" :key="index">
+                <view class="listInfo" @click="toInfo(item)">
+                    <span class="titile">
+                        {{ item.title }}
+                    </span>
+                    <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="state1">
+                            <span class="text">报名中</span>
+                        </view>
+                    </view>
+
+                </view>
+
+            </up-list-item>
+        </up-list>
+    </view>
+</template>
+<script setup>
+import { onShow, onLoad } from '@dcloudio/uni-app'
+import { getDicts } from "@/api/system/dict/data"
+import { ref, reactive, getCurrentInstance } from 'vue'
+import { useStore } from 'vuex';
+const emit = defineEmits(['scrolltolower']);
+const { proxy } = getCurrentInstance();
+
+const props = defineProps({
+    modelValue: Array
+});
+
+const scrolltolower = () => {
+    emit('scrolltolower'); // 如果不需要传递数据，可以省略第二个参数
+};
+
+
+</script>
+<style lang="scss" scoped>
+.scrollable-list {
+
+    overflow: auto;
+    /* 允许这个容器内部滚动 */
+}
+
+.listInfo {
+    position: relative;
+    
+    height: 328rpx;
+    border-radius: 16rpx 16rpx 16rpx 16rpx;
+    background: #ffffff;
+    margin: 0 auto;
+    margin-top: 12rpx;
+    margin-bottom: 12rpx;
+    padding-top: 24rpx;
+    padding-left: 24rpx;
+
+    .titile {
+        font-weight: 400;
+
+        height: 80rpx;
+        font-size: 32rpx;
+        color: #000000 100%;
+    }
+
+    .startTime {
+        margin-top: 34rpx;
+        font-weight: 400;
+
+        height: 24rpx;
+        font-size: 24rpx;
+        color: #000000 100%;
+    }
+
+    .endTime {
+        margin-top: 12rpx;
+        font-weight: 400;
+
+        height: 24rpx;
+        font-size: 24rpx;
+        color: #000000 100%;
+    }
+
+    .addrs {
+        margin-top: 22rpx;
+        font-weight: 400;
+        height: 24rpx;
+        font-size: 24rpx;
+        color: #000000 100%;
+    }
+}
+
+.statsInfo {
+    position: absolute;
+    right: 24rpx;
+    bottom: 24rpx;
+}
+
+.state0 {
+    width: 84rpx;
+    height: 28rpx;
+    border-radius: 14rpx 14rpx 14rpx 14rpx;
+    background: #f1f1f1;
+    display: flex;
+    justify-content: center;
+    align-content: center;
+
+    .text {
+        font-weight: 400;
+        width: 60rpx;
+        height: 20rpx;
+        font-size: 20rpx;
+        text-align: center;
+        color: #7E7E7E;
+    }
+}
+
+.state1 {
+    width: 84rpx;
+    height: 28rpx;
+    border-radius: 14rpx 14rpx 14rpx 14rpx;
+    background: #c0f0ec;
+    display: flex;
+    justify-content: center;
+    align-content: center;
+
+    .text {
+        font-weight: 400;
+        font-size: 20rpx;
+        text-align: center;
+        color: #00CCBE;
+    }
+}
+
+.state2 {
+    width: 84rpx;
+    height: 28rpx;
+    border-radius: 14rpx 14rpx 14rpx 14rpx;
+    background: #fde2e2;
+    display: flex;
+    justify-content: center;
+    align-content: center;
+
+    .text {
+        font-weight: 400;
+        width: 60rpx;
+        height: 20rpx;
+        font-size: 20rpx;
+        text-align: center;
+        color: #FFABAB;
+    }
+}
+</style>
\ No newline at end of file
diff --git a/utils/icon/icon.js b/utils/icon/icon.js
index 95003d0..2b5d0d7 100644
--- a/utils/icon/icon.js
+++ b/utils/icon/icon.js
@@ -8,8 +8,10 @@ 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")
+const tu23 = ref(QNDomain + "home/icon/image/png/tu2-3_20240602093303793.png")
+
 
 export default {
-  tu21,tu22,
+  tu21,tu22,tu23,
   tu51,tu52,tu53
 }
\ No newline at end of file