我的校园打卡UI

components/timeline/timeline.vue

@@ -0,0 +1,32 @@
+<template>
+  <view>
+    <view class="cu-timeline">
+      <view class="cu-time">昨天</view>
+      <view class="cu-item cur cuIcon-noticefill">
+        <view class="content bg-green shadow-blur">
+          <text>22:22</text>【广州市】快件已到达地球
+        </view>
+      </view>
+      <view class="cu-item text-red cuIcon-attentionforbidfill">
+        <view class="content bg-red shadow-blur">这是第一次，我家的铲屎官走了这么久。久到足足有三天！！</view>
+      </view>
+    </view>
+
+    <view class="cu-timeline">
+      <view class="cu-time">06-17</view>
+      <view class="cu-item">
+        <view class="content">
+          <text>01:30</text>【喵星】 MX-12138 已揽收，准备发往银河系
+        </view>
+      </view>
+    </view>
+  </view>
+</template>
+
+<script>
+export default {
+  data() {
+    return {};
+  },
+};
+</script>

components/uni-segmented-control/uni-segmented-control.vue

@@ -0,0 +1,124 @@
+<template>
+	<view :class="[styleType === 'text'?'segmented-control--text' : 'segmented-control--button' ]" :style="{ borderColor: styleType === 'text' ? '' : activeColor }"
+	 class="segmented-control">
+		<view v-for="(item, index) in values" :class="[ styleType === 'text'?'segmented-control__item--text': 'segmented-control__item--button' , index === currentIndex&&styleType === 'button'?'segmented-control__item--button--active': '' , index === 0&&styleType === 'button'?'segmented-control__item--button--first': '',index === values.length - 1&&styleType === 'button'?'segmented-control__item--button--last': '' ]"
+		 :key="index" :style="{
+        backgroundColor: index === currentIndex && styleType === 'button' ? activeColor : '',borderColor: index === currentIndex&&styleType === 'text'||styleType === 'button'?activeColor:'transparent'
+      }"
+		 class="segmented-control__item" @click="_onClick(index)">
+			<text :style="{color:
+          index === currentIndex
+            ? styleType === 'text'
+              ? activeColor
+              : '#fff'
+            : styleType === 'text'
+              ? '#000'
+              : activeColor}"
+			 class="segmented-control__text">{{ item }}</text>
+		</view>
+	</view>
+</template>
+
+<script>
+	export default {
+		name: 'UniSegmentedControl',
+		props: {
+			current: {
+				type: Number,
+				default: 0
+			},
+			values: {
+				type: Array,
+				default () {
+					return []
+				}
+			},
+			activeColor: {
+				type: String,
+				default: '#007aff'
+			},
+			styleType: {
+				type: String,
+				default: 'button'
+			}
+		},
+		data() {
+			return {
+				currentIndex: 0
+			}
+		},
+		watch: {
+			current(val) {
+				if (val !== this.currentIndex) {
+					this.currentIndex = val
+				}
+			}
+		},
+		created() {
+			this.currentIndex = this.current
+		},
+		methods: {
+			_onClick(index) {
+				if (this.currentIndex !== index) {
+					this.currentIndex = index
+					this.$emit('clickItem', {currentIndex:index})
+				}
+			}
+		}
+	}
+</script>
+
+<style lang="scss" scoped>
+	@import '@/uni.scss';
+
+	.segmented-control {
+		/* #ifndef APP-NVUE */
+		display: flex;
+		box-sizing: border-box;
+		/* #endif */
+		flex-direction: row;
+		height: 36px;
+		overflow: hidden;
+	}
+
+	.segmented-control__item {
+		/* #ifndef APP-NVUE */
+		display: inline-flex;
+		box-sizing: border-box;
+		/* #endif */
+		position: relative;
+		flex: 1;
+		justify-content: center;
+		align-items: center;
+	}
+
+	.segmented-control__item--button {
+		border-style: solid;
+		border-top-width: 1px;
+		border-bottom-width: 1px;
+		border-right-width: 1px;
+		border-left-width: 0;
+	}
+
+	.segmented-control__item--button--first {
+		border-left-width: 1px;
+		border-top-left-radius: 5px;
+		border-bottom-left-radius: 5px;
+	}
+
+	.segmented-control__item--button--last {
+		border-top-right-radius: 5px;
+		border-bottom-right-radius: 5px;
+	}
+
+	.segmented-control__item--text {
+		border-bottom-style: solid;
+		border-bottom-width: 3px;
+	}
+
+	.segmented-control__text {
+		font-size: 16px;
+		line-height: 20px;
+		text-align: center;
+	}
+</style>

pages.json

@@ -1,15 +1,19 @@
 {
   "pages": [
     {
-      "path": "pages/sign/sign",
+      "path": "pages/index/index",
       "style": {
-        "navigationBarTitleText": "打卡"
+        "navigationBarTitleText": "山大健康码"
       }
     },
     {
-      "path": "pages/index/index",
+      "path": "pages/my-signs/my-signs",
+      "style": { "navigationBarTitleText": "我的校园打卡" }
+    },
+    {
+      "path": "pages/sign/sign",
       "style": {
-        "navigationBarTitleText": "山大健康码"
+        "navigationBarTitleText": "打卡"
       }
     },
     {
@@ -22,7 +26,6 @@
         "navigationBarTitleText": "领取健康码"
       }
     }
-
   ],
   "globalStyle": {
     "navigationBarTextStyle": "black",

pages/my-signs/my-signs.vue

@@ -0,0 +1,63 @@
+<template>
+  <view class="wrap">
+    <!-- 头部菜单 -->
+    <view class="nav-wrap slide-bottom">
+      <uni-segmented-control
+        :active-color="activeColor"
+        :current="current"
+        :values="values"
+        @clickItem="handleClickNav"
+        class="nav"
+      />
+    </view>
+    <!-- 内容区 -->
+    <view class="content">
+      <!-- 今日打卡地图显示 -->
+      <history-map v-if="current === 0" />
+      <!-- 打卡记录 时间轴显示 -->
+      <timeline v-else />
+    </view>
+  </view>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      current: 0,
+      values: ['今日打卡', '打卡记录'],
+      activeColor: '#0897C7',
+    };
+  },
+  methods: {
+    handleClickNav({ currentIndex }) {
+      this.current = currentIndex;
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.wrap {
+  padding-top: 88rpx;
+  min-height: 100vh;
+  background-color: $white;
+
+  .nav-wrap {
+    z-index: 999;
+    position: fixed;
+    left: 0;
+    right: 0;
+    top: 0;
+
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    height: 88rpx;
+    background-color: $white;
+    .nav {
+      width: 540rpx;
+    }
+  }
+}
+</style>