feat: 计划列表

pages.json

@@ -40,6 +40,13 @@
         "navigationBarTitleText": "计划列表"
       }
     },
+    {
+      "path": "pages/index/uploadPhoto",
+      "style": {
+        "navigationStyle": "custom",
+        "navigationBarTitleText": "上传图片"
+      }
+    },
     {
       "path": "pages/my/index",
       "style": {

pages/index/planList.vue

@@ -3,39 +3,76 @@
     <u-navbar
       :is-back="false"
       title="计划列表"
+      title-color="black"
       :background="{ backgroundColor: '#F7F8FC' }"
       :border-bottom="false"
     >
-      <view slot="right"> 424242 </view>
+      <view slot="right">
+        <!-- <u-icon
+          name="calendar"
+          color="#333"
+          size="40"
+          style="margin-right: 32rpx"
+        ></u-icon> -->
+        <image
+          src="/static/images/icon-date.png"
+          mode="scaleToFill"
+          style="width: 40rpx; height: 40rpx; margin-right: 32rpx"
+          @click="toggleMenu"
+        />
+      </view>
     </u-navbar>
 
     <view class="selectTab">
-      <view class="tab-item">
+      <view
+        class="tab-item"
+        :class="{ active: activeTab === 'completed' }"
+        @click="switchTab('completed')"
+      >
         <view class="label">已完成计划</view>
         <view class="count">12</view>
       </view>
-      <view class="tab-item">
+      <view
+        class="tab-item"
+        :class="{ active: activeTab === 'incomplete' }"
+        @click="switchTab('incomplete')"
+      >
         <view class="label">未完成计划</view>
-        <view class="count">5</view>
+        <view class="count">12</view>
       </view>
     </view>
 
-    <view class="planList">
+    <view class="planList" :class="{ activeList: activeTab === 'incomplete' }">
       <view class="plan-item">
-        <view class="time">
+        <view class="plan-header">
-          <u-icon
+          <u-icon name="calendar" color="black" size="40"></u-icon>
-            label="uView"
-            size="40"
-            name="https://cdn.uviewui.com/uview/example/button.png"
-          ></u-icon>
           <view class="date">05-21</view>
+          <view>1天前</view>
         </view>
-        <view class="place-time">
+        <view class="plan-content">
-          <view class="place">校门A区教学楼</view>
+          <view class="plan-content-top">
-          <u-tag text="9:00~12:00" type="info" border-color="transparent" />
+            <view class="place">校门A区教学楼</view>
+            <u-tag text="9:00~12:00" type="info" border-color="transparent" />
+          </view>
+          <view class="plan-content-main">
+            北大门右侧操场跑道/南广场升旗台/A区第二食堂3楼
+          </view>
         </view>
-        <view class="illustrate">
+      </view>
-          北大门右侧操场跑道/南广场升旗台/A区第二食堂3楼
+      <view class="plan-item">
+        <view class="plan-header">
+          <u-icon name="calendar" color="black" size="40"></u-icon>
+          <view class="date">05-21</view>
+          <view>1天前</view>
+        </view>
+        <view class="plan-content">
+          <view class="plan-content-top">
+            <view class="place">校门A区教学楼</view>
+            <u-tag text="9:00~12:00" type="info" border-color="transparent" />
+          </view>
+          <view class="plan-content-main">
+            北大门右侧操场跑道/南广场升旗台/A区第二食堂3楼
+          </view>
         </view>
       </view>
     </view>
@@ -45,10 +82,16 @@
 <script>
 export default {
   data() {
-    return {};
+    return {
+      activeTab: "completed",
+    };
   },
   created() {},
-  methods: {},
+  methods: {
+    switchTab(tab) {
+      this.activeTab = tab;
+    },
+  },
 };
 </script>
 
@@ -56,34 +99,115 @@ export default {
 .content {
   height: 100vh;
   background: #f7f8fc;
-  .selectTab{
+  .selectTab {
-    padding: 42rpx 90rpx;
     display: flex;
-    justify-content: space-between;
+    background: linear-gradient(to right, #383edd, #4874f6);
-    // background: ;
+    border-radius: 16rpx;
-    .tab-item{
+    padding: 32rpx;
-      display: flex;
+    margin: 0 32rpx 32rpx;
-      flex-direction: column;
+
-      align-items: center;
+    .tab-item {
-      justify-content: center;
+      flex: 1;
-      width: 50%;
+      text-align: center;
-      background: #fff;
+      position: relative;
-      .label{
+      transition: all 0.3s;
+      position: relative;
+      z-index: 999;
+
+      .label {
         font-size: 28rpx;
-        color: #333;
+        color: rgba(255, 255, 255, 0.8);
+        margin-bottom: 8rpx;
       }
-      .count{
+
-        font-size: 24rpx;
+      .count {
-        color: #999;
+        font-size: 36rpx;
+        color: #ffffff;
+        font-weight: 500;
+      }
+
+      &.active {
+        .label {
+          color: #ffffff;
+          font-weight: 500;
+        }
+
+        &::after {
+          content: "";
+          position: absolute;
+          bottom: -46rpx;
+          left: 50%;
+          transform: translateX(-50%) rotate(45deg);
+          width: 32rpx;
+          height: 32rpx;
+          background: #383edd;
+          border-radius: 10rpx;
+          z-index: 1;
+        }
+
+        &::before {
+          content: "";
+          position: absolute;
+          bottom: -34rpx;
+          left: 50%;
+          transform: translateX(-50%);
+          width: 8rpx;
+          height: 8rpx;
+          background: #ffffff;
+          border-radius: 4rpx;
+          z-index: 2;
+        }
       }
     }
   }
   .planList {
     padding: 0 32rpx;
     .plan-item {
+      border-radius: 16rpx;
       margin-top: 32rpx;
-      padding: 32rpx;
+      background: linear-gradient(
-      background: #fff;
+        to bottom,
+        #edf2ff 0%,
+        #fafcff 30%,
+        #ffffff 100%
+      );
+      .plan-header {
+        display: flex;
+        align-items: center;
+        justify-content: flex-start;
+        gap: 20rpx;
+        padding: 20rpx;
+        border-bottom: 1px solid #f2f2f2;
+      }
+      .plan-content {
+        padding: 20rpx;
+        padding-bottom: 32rpx;
+        &-top {
+          display: flex;
+          justify-content: space-between;
+          align-items: center;
+          .place {
+            font-size: 32rpx;
+            color: #333;
+          }
+        }
+        &-main {
+          margin-top: 32rpx;
+          background-color: #f3f3f3;
+          padding: 32rpx;
+          border-radius: 16rpx;
+        }
+      }
+    }
+    &.activeList {
+      .plan-item {
+        background: linear-gradient(
+          to bottom,
+          #fef7ec 0%,
+          #fffdfa 30%,
+          #ffffff 100%
+        );
+      }
     }
   }
 }

pages/index/uploadPhoto.vue

@@ -0,0 +1,238 @@
+<template>
+  <view class="content">
+    <!-- 遮罩层 -->
+    <view class="mask" v-if="showMenu" @click="toggleMenu"></view>
+
+    <!-- 下拉菜单 -->
+    <view class="dropdown-menu" v-if="showMenu">
+      <view
+        class="menu-item"
+        v-for="(item, index) in menuItems"
+        :key="index"
+        @click="selectMenuItem(item)"
+      >
+        <text>{{ item }}</text>
+      </view>
+    </view>
+
+    <u-navbar
+      :is-back="true"
+      title="上传图片"
+      title-color="black"
+      :background="{ backgroundColor: '#F7F8FC' }"
+      :border-bottom="false"
+    >
+      <view slot="right">
+        <view class="menu-wrapper">
+          <image
+            src="/static/iconfont/more.svg"
+            mode="scaleToFill"
+            style="width: 40rpx; height: 40rpx; margin-right: 32rpx"
+            @click="toggleMenu"
+          />
+        </view>
+      </view>
+    </u-navbar>
+
+    <view class="content-header">
+      <view class="content-header-title"> 区域名称——所属计划 </view>
+    </view>
+
+    <view class="planList">
+      <view class="plan-header">
+        <text>请上传区域图片</text>
+      </view>
+      <view class="plan-content">
+        <view class="plan-content-top">
+          <image
+            src="/static/images/logo.png"
+            mode="scaleToFill"
+            style="width: 160rpx; height: 160rpx"
+          />
+        </view>
+        <view class="plan-content-remark">
+          <view class="plan-content-remark-title">备注</view>
+          <view class="plan-content-remark-text">
+            备注备注备注备注备注备注备注备注备注备注备注备注备注
+          </view>
+        </view>
+      </view>
+    </view>
+
+    <u-button
+      class="bottom-btn"
+      shape="circle"
+      type="primary"
+      style="margin: 0 32rpx"
+      @click="submitForm"
+      >上传</u-button
+    >
+  </view>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      activeTab: "completed",
+      showMenu: false,
+      menuItems: ["教学楼楼道", "南广场跑道", "食堂大厅", "食堂大厅"],
+    };
+  },
+  created() {},
+  methods: {
+    switchTab(tab) {
+      this.activeTab = tab;
+    },
+    toggleMenu() {
+      this.showMenu = !this.showMenu;
+    },
+    selectMenuItem(item) {
+      // 处理菜单项选择
+      console.log("选择了:", item);
+      // 这里可以添加选择后的逻辑
+      this.showMenu = false;
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.content {
+  position: relative;
+  height: 100vh;
+  background: #f7f8fc;
+
+  .mask {
+    position: fixed;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background-color: rgba(0, 0, 0, 0.2);
+    z-index: 999;
+  }
+  
+  .content-header {
+    height: 160rpx;
+    background: #ddd;
+    border-radius: 16rpx;
+    margin: 32rpx;
+    display: flex;
+    flex-direction: column-reverse;
+
+    &-title {
+      font-size: 32rpx;
+      color: #333;
+      font-weight: 500;
+      height: 60rpx;
+      line-height: 60rpx;
+      text-align: center;
+      background-color: #fff;
+      border-radius: 32rpx;
+      width: 70%;
+      margin: 0 auto 32rpx;
+    }
+  }
+  .planList {
+    margin: 0 32rpx;
+    border-radius: 16rpx;
+    background-color: #fff;
+
+    .plan-header {
+      font-size: 32rpx;
+      color: #333;
+      font-weight: 500;
+      padding: 32rpx;
+      border-bottom: 1px solid #f2f2f2;
+    }
+    .plan-content {
+      padding: 32rpx;
+      &-top {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        .place {
+          font-size: 32rpx;
+          color: #333;
+        }
+      }
+      &-remark {
+        margin-top: 32rpx;
+        border-radius: 16rpx;
+        &-title {
+          font-size: 32rpx;
+          color: #333;
+          font-weight: 500;
+        }
+        &-text {
+          font-size: 28rpx;
+          color: #666;
+          margin-top: 16rpx;
+        }
+      }
+    }
+    &.activeList {
+      .plan-item {
+        background: linear-gradient(
+          to bottom,
+          #fef7ec 0%,
+          #fffdfa 30%,
+          #ffffff 100%
+        );
+      }
+    }
+  }
+
+  .bottom-btn {
+    position: fixed;
+    bottom: 32rpx;
+    left: 0;
+    right: 0;
+  }
+}
+
+.header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 20rpx 32rpx;
+  position: relative;
+}
+
+.title {
+  font-size: 36rpx;
+  font-weight: 500;
+}
+
+.menu-wrapper {
+  position: relative;
+}
+
+.dropdown-menu {
+  position: absolute;
+  top: 80rpx;
+  right: 32rpx;
+  background-color: #ffffff;
+  border-radius: 12rpx;
+  box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.1);
+  width: 280rpx;
+  overflow: hidden;
+  z-index: 1000;
+
+  .menu-item {
+    padding: 24rpx 32rpx;
+    font-size: 28rpx;
+    color: #333333;
+    border-bottom: 1px solid #f5f5f5;
+
+    .menu-item:last-child {
+      border-bottom: none;
+    }
+
+    .menu-item:active {
+      background-color: #f8f8f8;
+    }
+  }
+}
+</style>

pages/user/index.vue

@@ -68,17 +68,17 @@ export default {
       cellList: [
         {
           title: "单位信息",
-          icon: "/static/images/pos-icon.png",
+          icon: "/static/images/icon-unit.png",
           path: "/pages/user/unitInfo/index",
         },
         {
           title: "版本信息",
-          icon: "/static/images/pos-icon.png",
+          icon: "/static/images/icon-info.png",
           path: "/pages/user/versionInfo/index",
         },
         {
           title: "注销",
-          icon: "/static/images/pos-icon.png",
+          icon: "/static/images/icon-logout.png",
           path: "",
         },
       ],

static/iconfont/more.svg

@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1744080752409" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1190" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><path d="M576 832a64 64 0 1 1-128 0 64 64 0 0 1 128 0zM512 256a64 64 0 1 0 0-128 64 64 0 0 0 0 128z m0 320a64 64 0 1 0 0-128 64 64 0 0 0 0 128z" fill="#000000" fill-opacity=".9" p-id="1191"></path></svg>