增加活动列表页面，增加全局灰色背景色

App.vue

@@ -30,6 +30,10 @@
 </script>
 
 <style lang="scss">
+page{
+    background-color: #FBFBFB;
+
+}
 /* 注意要写在第一行，同时给style标签加入lang="scss"属性 */
 @import "uview-plus/index.scss";
 @import '@/static/scss/index.scss';

api/system/dict/data.js

@@ -0,0 +1,52 @@
+import request from '@/utils/request'
+
+// 查询字典数据列表
+export function listData(query) {
+  return request({
+    url: '/system/dict/data/list',
+    method: 'get',
+    params: query
+  })
+}
+
+// 查询字典数据详细
+export function getData(dictCode) {
+  return request({
+    url: '/system/dict/data/' + dictCode,
+    method: 'get'
+  })
+}
+
+// 根据字典类型查询字典数据信息
+export function getDicts(dictType) {
+  return request({
+    url: '/system/dict/data/type/' + dictType,
+    method: 'get'
+  })
+}
+
+// 新增字典数据
+export function addData(data) {
+  return request({
+    url: '/system/dict/data',
+    method: 'post',
+    data: data
+  })
+}
+
+// 修改字典数据
+export function updateData(data) {
+  return request({
+    url: '/system/dict/data',
+    method: 'put',
+    data: data
+  })
+}
+
+// 删除字典数据
+export function delData(dictCode) {
+  return request({
+    url: '/system/dict/data/' + dictCode,
+    method: 'delete'
+  })
+}

api/system/dict/type.js

@@ -0,0 +1,60 @@
+import request from '@/utils/request'
+
+// 查询字典类型列表
+export function listType(query) {
+  return request({
+    url: '/system/dict/type/list',
+    method: 'get',
+    params: query
+  })
+}
+
+// 查询字典类型详细
+export function getType(dictId) {
+  return request({
+    url: '/system/dict/type/' + dictId,
+    method: 'get'
+  })
+}
+
+// 新增字典类型
+export function addType(data) {
+  return request({
+    url: '/system/dict/type',
+    method: 'post',
+    data: data
+  })
+}
+
+// 修改字典类型
+export function updateType(data) {
+  return request({
+    url: '/system/dict/type',
+    method: 'put',
+    data: data
+  })
+}
+
+// 删除字典类型
+export function delType(dictId) {
+  return request({
+    url: '/system/dict/type/' + dictId,
+    method: 'delete'
+  })
+}
+
+// 刷新字典缓存
+export function refreshCache() {
+  return request({
+    url: '/system/dict/type/refreshCache',
+    method: 'delete'
+  })
+}
+
+// 获取字典选择框列表
+export function optionselect() {
+  return request({
+    url: '/system/dict/type/optionselect',
+    method: 'get'
+  })
+}

main.js

@@ -3,11 +3,13 @@ import App from './App'
 import store from './store' // store
 import { install } from './plugins' // plugins
 import './permission.js' // permission
+
 // main.js
 import uviewPlus from 'uview-plus'
 
 export function createApp() {
   const app = createSSRApp(App)
+
   app.use(uviewPlus)
   app.use(store)
   // app.use(uView)

pages/activity/index.vue

@@ -37,14 +37,43 @@
         }" itemStyle="  width: 200rpx; padding-bottom:18rpx;">
             </up-tabs>
         </view>
+        <!-- 列表信息 -->
+        <view>
+            <up-list @scrolltolower="scrolltolower" :showScrollbar="false" :pagingEnabled="true">
+                <up-list-item v-for="(item, index) in actiInfoList" :key="index">
+                    <view class="listInfo">
+                        <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="statsInfo">
+                            <view :class="getDictLabelByValue(item.state).cssClass"  >
+                            <span class="text">{{ getDictLabelByValue(item.state).dictLabel }}</span>
+                        </view>
+                        </view>
+
+                    </view>
+
+                </up-list-item>
+            </up-list>
+        </view>
+
     </view>
     <view>
     </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 { proxy } = getCurrentInstance();
+
+const activityState = ref([])//字典
 const imgInfo = ref("")
 // 创建响应式数据  ref('#001f3f')
 const bgColor = ref('');
@@ -62,8 +91,63 @@ const tu22 = ref("")
 tu22.value = QNDomain + "home/icon/image/png/tu2-2_20240531163115818.png"
 tu21.value = QNDomain + "home/icon/image/png/tu2-1_20240531153239639.png"
 imgInfo.value = QNDomain + "home/test/image/jpeg/test1_20240531151817921.jpg"
+const actiInfoList = ref([
+   {title:'怎么评论爱德华·艾尔加这位音乐家及其他的作品,欢迎大家发表自己的看法？',
+   startTime:'2023-05-01 15:00',
+   endTime:'2023-05-01 16:00',
+   state:'1',
+   addrs:'天津电子信息职业技术学院操场东面'
+   },
+   {title:'怎么评论爱德华·艾尔加这位音乐家及其他的作品,欢迎大家发表自己的看法？',
+   startTime:'2023-05-01 15:00',
+   endTime:'2023-05-01 16:00',
+   state:'2',
+   addrs:'天津电子信息职业技术学院操场东面'
+   },
+   {title:'怎么评论爱德华·艾尔加这位音乐家及其他的作品,欢迎大家发表自己的看法？',
+   startTime:'2023-05-01 15:00',
+   endTime:'2023-05-01 16:00',
+   state:'0',
+   addrs:'天津电子信息职业技术学院操场东面'
+   }
+   ,
+   {title:'怎么评论爱德华·艾尔加这位音乐家及其他的作品,欢迎大家发表自己的看法？',
+   startTime:'2023-05-01 15:00',
+   endTime:'2023-05-01 16:00',
+   state:'0',
+   addrs:'天津电子信息职业技术学院操场东面'
+   }
+
+]); 
+
+onLoad((options) => {
+    getDicts('activity_state').then( e=> {
+        activityState.value=e.data
+        console.log(activityState.value);
+    })
+})
+
+onShow(() => {
+  console.log('Page onShow')
+})
+
+const scrolltolower = () => {
+    console.log("scrolltolower");
+    actiInfoList.value.push( {title:'怎么评论爱德华·艾尔加这位音乐家及其他的作品,欢迎大家发表自己的看法？',
+   startTime:'2023-05-01 15:00',
+   endTime:'2023-05-01 16:00',
+   state:'2',
+   addrs:'天津电子信息职业技术学院操场东面'
+   })
+};
+const getDictLabelByValue = (state) => {
+  const dict = activityState.value.find((dict) => dict.dictValue === state);
+  return dict ? dict : '未知状态';
+};
+
 </script>
 <style lang="scss">
+
     .leftinfo{
         display: flex;
     align-items: flex-end;
@@ -111,6 +195,7 @@ align-items: center;
     left: 0rpx;
     z-index: -1;
 }
+
 .sousuoBox1 {
     margin: 10rpx 32rpx;
     width: auto;
@@ -143,5 +228,108 @@ align-items: center;
     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;
+            width: 614rpx;
+            height: 80rpx;
+            font-size: 32rpx;
+            color: #000000 100%;
+        }
+        .startTime {
+            margin-top: 34rpx;
+            font-weight: 400;
+            width: 350rpx;
+            height: 24rpx;
+            font-size: 24rpx;
+            color: #000000 100%;
+        }
+        .endTime {
+            margin-top: 12rpx;
+            font-weight: 400;
+            width: 350rpx;
+            height: 24rpx;
+            font-size: 24rpx;
+            color: #000000 100%;
+        }
+        .addrs {
+            margin-top: 24rpx;
+            font-weight: 400;
+            width: 504rpx;
+            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;
+        width: 60rpx;
+        height: 20rpx;
+        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>

pages/communication/addfriends.vue

@@ -1,11 +1,9 @@
 <template>
-	<view>
-		
-	</view>
+
 </template>
 
 <script setup>
-	
+
 </script>	
 
 <style>

store/getters.js

@@ -1,6 +1,7 @@
 const getters = {
   token: state => state.user.token,
   avatar: state => state.user.avatar,
+  dict: state => state.dict.dict,
   name: state => state.user.name,
   roles: state => state.user.roles,
   permissions: state => state.user.permissions