初始化统计页

main.js

@@ -3,13 +3,23 @@ import { http } from 'plugins/request/index';
 import App from './App';
 // import store from './store';
 
-Vue.config.productionTip = false
+Vue.config.productionTip = false;
 Vue.prototype.$http = http;
 
-App.mpType = 'app'
+/**
+ * 打开某个页面
+ * @param {string} path 页面完成路径
+ * @param {string} query 参数字符串a=x&b=y
+ */
+Vue.prototype.openPage = function(path, query = '') {
+  let url = query ? `${path}?${query}` : path;
+  uni.navigateTo({ url });
+};
+
+App.mpType = 'app';
 
 const app = new Vue({
   // store,
-    ...App
-})
-app.$mount()
+  ...App,
+});
+app.$mount();

pages.json

@@ -1,15 +1,25 @@
 {
-	"pages": [ //pages数组中第一项表示应用启动页，参考：https://uniapp.dcloud.io/collocation/pages
+  "pages": [
     {
       "path": "pages/index/index",
       "style": {
-				"navigationBarTitleText": "uni-app"
+        "navigationBarTitleText": "山大健康码"
+      }
+    },
+    {
+      "path": "pages/statistics/statistics",
+      "style": { "navigationBarTitleText": "统计" }
+    },
+    {
+      "path": "pages/get-code/get-code",
+      "style": {
+        "navigationBarTitleText": "领取健康码"
       }
     }
   ],
   "globalStyle": {
     "navigationBarTextStyle": "black",
-		"navigationBarTitleText": "uni-app",
+    "navigationBarTitleText": "山大健康码",
     "navigationBarBackgroundColor": "#F8F8F8",
     "backgroundColor": "#F8F8F8"
   },

pages/get-code/get-code.vue

@@ -0,0 +1,25 @@
+<template>
+  <view>
+    <button @tap="handleSelectLocation">选择位置</button>
+  </view>
+</template>
+
+<script>
+export default {
+  data() {
+    return {};
+  },
+  methods: {
+    handleSelectLocation() {
+      uni.chooseLocation({
+        success: function(res) {
+          console.log('位置名称：' + res.name);
+          console.log('详细地址：' + res.address);
+          console.log('纬度：' + res.latitude);
+          console.log('经度：' + res.longitude);
+        },
+      });
+    },
+  },
+};
+</script>

pages/index/components/home.vue

@@ -1,8 +1,9 @@
 <template>
 	<view class="content">
 		<image src="../../../static/bg.png" style="width: 100%;"></image>
+
 		<view class="box">
-			<view class="cu-card flex margin bg-white shadow card-radius">
+			<view class="cu-card flex margin bg-white shadow card-radius" hover-class="cc-active" @tap="openPage('/pages/get-code/get-code')">
 				<view class="flex align-center padding">
 					<view class="round lg cu-avatar icon1">
 						<view class="iconfont icon-erweima"></view>
@@ -13,7 +14,7 @@
 					</view>
 				</view>
 			</view>
-			<view class="cu-card flex margin bg-white shadow card-radius">
+			<view class="cu-card flex margin bg-white shadow card-radius" hover-class="cc-active">
 				<view class="flex align-center padding">
 					<view class="round lg cu-avatar icon2">
 						<view class="iconfont icon-daka"></view>
@@ -24,7 +25,7 @@
 					</view>
 				</view>
 			</view>
-			<view class="cu-card flex margin bg-white shadow card-radius">
+			<view class="cu-card flex margin bg-white shadow card-radius" hover-class="cc-active">
 				<view class="flex align-center padding">
 					<view class="round lg cu-avatar icon3">
 						<view class="iconfont icon-bushuline"></view>
@@ -35,7 +36,7 @@
 					</view>
 				</view>
 			</view>
-			<view class="cu-card flex margin bg-white shadow card-radius">
+			<view class="cu-card flex margin bg-white shadow card-radius" hover-class="cc-active" @tap="openPage('/pages/statistics/statistics')">
 				<view class="flex align-center padding">
 					<view class="round lg cu-avatar icon4">
 						<view class="iconfont icon-tongji"></view>

pages/index/components/mine.vue

@@ -1,5 +1,5 @@
 <template>
-  <div>user</div>
+  <div>user1</div>
 </template>
 
 <script>

pages/index/index.vue

@@ -30,8 +30,16 @@ export default {
     },
 
     // 扫一扫
+    // 只允许通过相机扫码
+    // TODO: 扫码业务
     onScan() {
-      console.log('扫一扫');
+      uni.scanCode({
+        onlyFromCamera: true,
+        success: res => {
+          console.log('条码类型：' + res.scanType);
+          console.log('条码内容：' + res.result);
+        },
+      });
     },
   },
 };
@@ -47,6 +55,7 @@ export default {
 
   .content {
     flex: 1;
+    overflow-y: auto;
   }
   .nav-bottom {
     width: 100%;

pages/statistics/statistics.vue

@@ -0,0 +1,99 @@
+<template>
+  <view class="padding">
+    <!-- 日期组件 -->
+    <view></view>
+    <!-- 健康上报组件 -->
+    <view></view>
+    <!-- 校园轨迹组件 -->
+    <view class="card radius shadow-warp bg-white">
+      <view class="card-head solid-bottom">
+        <view class="card-head-avatar">
+          <view class></view>
+        </view>
+        <view class="card-head-title">校园打卡</view>
+        <view class="card-head-action">icon</view>
+      </view>
+
+      <view class="card-content">
+        <view class="map-wrap">
+          <map
+            :latitude="latitude"
+            :longitude="longitude"
+            :markers="covers"
+            style="width: 100%; height: 1000rpx;"
+          />
+        </view>
+      </view>
+    </view>
+  </view>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      latitude: 37.87059,
+      longitude: 112.55067,
+      covers: [
+        {
+          latitude: 37.87059,
+          longitude: 112.55067,
+          iconPath: '../../static/location.png',
+        },
+        {
+          latitude: 37.87,
+          longitude: 112.5506,
+          iconPath: '../../static/location.png',
+        },
+      ],
+    };
+  },
+
+  onLoad() {
+    this.getLocation();
+  },
+
+  methods: {
+    getLocation() {
+      uni.getLocation({
+        type: 'wgs84',
+        success: res => {
+          this.longitude = res.longitude;
+          this.latitude = res.latitude;
+          console.log('当前位置的经度：' + res.longitude);
+          console.log('当前位置的纬度：' + res.latitude);
+        },
+      });
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.card {
+  .card-head {
+    display: flex;
+    align-items: center;
+    height: 120rpx;
+    padding: 0 32rpx;
+
+    .card-head-avatar {
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      width: 56rpx;
+      height: 56rpx;
+      border-radius: 50%;
+      background-color: $blue;
+      color: $white;
+    }
+
+    .card-head-title {
+      flex: 1;
+      margin: 0 20rpx;
+      font-size: 16px;
+      color: $black;
+    }
+  }
+}
+</style>