2

package.json

@@ -83,7 +83,9 @@
     "jest": "^25.4.0",
     "mini-types": "*",
     "miniprogram-api-typings": "*",
-    "postcss-comment": "^2.0.0"
+    "node-sass": "^7.0.1",
+    "postcss-comment": "^2.0.0",
+    "sass-loader": "^12.4.0"
   },
   "browserslist": [
     "Android >= 4",

src/pages.json

@@ -26,6 +26,12 @@
 		"path": "pages/activity/activitySignUp" //活动报名
 	}, {
 		"path": "pages/activity/activityMedia" //活动图片、视频
+	}, {
+		"path": "pages/person/person", 
+		"style":{
+			"navigationBarTitleText":"个人中心",
+			"backgroundColor":"#f5f5f5"
+		}
 	}],
 	"subPackages": [{
 			"root": "pages/course", //课程分包
@@ -87,16 +93,36 @@
 		}
 	],
 	"tabBar": {
-		"color": "#7A7E83",
-		"selectedColor": "#00ACF9",
+		"color": "#929292",
+		"selectedColor": "#929292",
 		"borderStyle": "black",
 		"backgroundColor": "#ffffff",
+		"iconWidth": "30rpx",
 		"list": [{
 			"pagePath": "pages/index/index",
+			"iconPath": "static/image/index.png",
+			"selectedIconPath": "static/image/index_a.png",
 			"text": "首页"
+		}, {
+			"pagePath": "pages/index/index",
+			"iconPath": "static/image/study.png",
+			"selectedIconPath": "static/image/study_a.png",
+			"text": "学习"
+		}, {
+			"pagePath": "pages/index/index",
+			"iconPath": "static/image/course.png",
+			"selectedIconPath": "static/image/course_a.png",
+			"text": "课表"
 		}, {
 			"pagePath": "pages/activity/activityList",
+			"iconPath": "static/image/active.png",
+			"selectedIconPath": "static/image/active_a.png",
 			"text": "活动"
+		}, {
+			"pagePath": "pages/person/person",
+			"iconPath": "static/image/person.png",
+			"selectedIconPath": "static/image/person_a.png",
+			"text": "个人中心"
 		}]
 	},
 	"globalStyle": {
@@ -155,4 +181,4 @@
 			"van-count-down": "/wxcomponents/vant/count-down/index"
 		}
 	}
-}
\ No newline at end of file
+}

src/pages/person/person.vue

+<template>
+  <view class="person">
+    <view class="info flex_between_center flex_nowrap">
+      <view class="left flex_start_between">
+        <view class="date">
+          2021年12月30日
+        </view>
+        <view class="name"> Hello，{{ pageData.StuName }} </view>
+      </view>
+      <view class="right">
+        <image
+          :src="pageData.StuIcon"
+          mode="aspectFill"
+          style="width:100%;height:100%;border-radius: 50%;"
+        ></image>
+      </view>
+    </view>
+    <view class="orderInfo flex_between_center">
+      <view class="orderItem ">
+        <view class=" flex_between_center" style="width:100%">
+          <view class="orderNum">{{ pageData.OrderNum }}</view>
+          <image
+            src="../../static/image/person/order1.png"
+            mode="aspectFill"
+            class="orderIcon"
+          ></image
+        ></view>
+        <view class="orderName">
+          语培订单
+        </view>
+      </view>
+      <view class="orderItem ">
+        <view class=" flex_between_center" style="width:100%">
+          <view class="orderNum">{{ pageData.StudyAbroadNum }}</view>
+          <image
+            src="../../static/image/person/order2.png"
+            mode="aspectFill"
+            class="orderIcon"
+          ></image
+        ></view>
+        <view class="orderName">
+          留学订单
+        </view>
+      </view>
+      <view class="orderItem ">
+        <view class=" flex_between_center" style="width:100%">
+          <view class="orderNum">{{ pageData.ContractNum }}</view>
+          <image
+            src="../../static/image/person/order1.png"
+            mode="aspectFill"
+            class="orderIcon"
+          ></image
+        ></view>
+        <view class="orderName">
+          合同信息
+        </view>
+      </view>
+    </view>
+    <view class="courseInfo">
+      <view class="title">课程信息</view>
+      <view class="statistic">
+        <view class="statisticItem">
+          <view class="time"
+            >{{ pageData.CourseInfo.TotalHours }}
+            <text class="unit">节</text></view
+          >
+          <view class="statisticName">总共课时</view>
+        </view>
+        <view class="statisticItem">
+          <view class="time"
+            >{{ pageData.CourseInfo.CompleteHours }}
+            <text class="unit">节</text></view
+          >
+          <view class="statisticName">已学课时</view>
+        </view>
+        <view class="statisticItem">
+          <view class="time"
+            >{{ pageData.CourseInfo.AbsenceNum }}
+            <text class="unit">节</text></view
+          >
+          <view class="statisticName">缺勤课时</view>
+        </view>
+        <view class="statisticItem">
+          <view class="time"
+            >{{ pageData.CourseInfo.LeaveNum }}
+            <text class="unit">节</text></view
+          >
+          <view class="statisticName">请假课时</view>
+        </view>
+      </view>
+      <view class="courseBox">
+        <view class="left"></view>
+        <view class="right"> </view>
+      </view>
+    </view>
+  </view>
+</template>
+
+<script>
+import {
+  ref,
+  reactive,
+  toRefs,
+  toRef,
+  getCurrentInstance,
+  watch,
+  computed,
+  onMounted,
+  inject,
+} from "vue";
+export default {
+  setup(props, context) {
+    let { proxy } = getCurrentInstance();
+    let data = reactive({
+      pageData: {},
+    });
+    const methods = {
+      async getData() {
+        proxy.$request("/AppletCenter/GetMyCenterInfo", {}).then((res) => {
+          data.pageData = res.Data;
+          console.log(431, data.pageData);
+        });
+      },
+    };
+
+    onMounted(() => {
+      that.getData();
+    });
+    let that = methods;
+    return {
+      ...toRefs(data),
+    };
+  },
+};
+</script>
+
+<style scoped>
+.person {
+  height: 100vh;
+  background-color: #f5f5f5;
+}
+
+.person .info {
+  height: 160rpx;
+  padding: 0 35rpx;
+}
+
+.person .info .left {
+  width: 50%;
+}
+
+.person .info .left .date {
+  font-size: 22rpx;
+  font-family: PingFang SC;
+  font-weight: 500;
+  color: #999999;
+}
+
+.person .info .left .name {
+  font-size: 46rpx;
+  font-family: PingFang SC;
+  font-weight: bold;
+  color: #111111;
+}
+
+.person .info .right {
+  width: 95rpx;
+  height: 95rpx;
+  border-radius: 50%;
+  overflow: hidden;
+}
+
+.person .orderInfo {
+  height: 195rpx;
+  padding: 0 35rpx;
+  margin-bottom: 50rpx;
+}
+
+.person .orderItem {
+  width: 205rpx;
+  height: 195rpx;
+  background-color: #ffffff;
+  opacity: 0.97;
+  border-radius: 25rpx;
+  box-sizing: border-box;
+  padding: 20rpx 25rpx 35rpx 35rpx;
+  display: flex;
+  flex-wrap: wrap;
+  align-content: space-between;
+}
+.orderItem .orderNum {
+  font-size: 46rpx;
+  font-weight: 800;
+  font-style: italic;
+  color: #111111;
+}
+.orderItem .orderIcon {
+  width: 65rpx;
+  height: 65rpx;
+  background-color: #fff;
+}
+.orderItem .orderName {
+  font-size: 24rpx;
+  font-weight: 500;
+  color: #666666;
+}
+.courseInfo {
+  height: 535rpx;
+  background-color: #ebebeb;
+  padding: 35rpx;
+}
+.courseInfo .title {
+  font-size: 28rpx;
+  font-weight: bold;
+  color: #111111;
+  margin-bottom: 30rpx;
+}
+.statistic {
+  /* height: 70rpx; */
+  display: flex;
+  margin-bottom: 50rpx;
+}
+.statisticItem {
+  min-width: 80rpx;
+  /* height: 70rpx; */
+  display: flex;
+  flex-wrap: wrap;
+  align-content: space-between;
+  margin-right: 100rpx;
+}
+.statisticItem .time {
+  width: 100%;
+  font-size: 46rpx;
+  line-height: 30rpx;
+  font-weight: 800;
+  font-style: italic;
+  color: #111111;
+}
+.statisticItem .unit {
+  font-size: 20rpx;
+  font-weight: 500;
+  color: #111111;
+  font-style: normal;
+  margin-left: 10rpx;
+}
+.statisticName {
+  font-size: 20rpx;
+  font-weight: 500;
+  color: #666666;
+  white-space: nowrap;
+}
+.courseBox {
+  display: flex;
+}
+.courseBox .left {
+  width: 215rpx;
+  height: 275rpx;
+  background: #d5f3e9;
+  border-radius: 30rpx;
+}
+</style>

src/static/css/common.css

@@ -8,7 +8,7 @@
 }
 
 .flex {
-	display: flex
+	display: flex;
 }
 
 .flex_center_center {
@@ -18,6 +18,7 @@
 }
 
 .flex_between_center {
+	display: flex;
 	justify-content: space-between;
 	align-items: center;
 }
@@ -59,6 +60,7 @@
 }
 
 .flex_start_between {
+	flex-wrap: wrap;
 	justify-content: flex-start;
 	align-content: space-between;
 }
@@ -75,6 +77,9 @@
 	flex-flow: column wrap
 }
 
+.flex_nowrap {
+	flex-wrap: nowrap;
+}
 .flex_wrap {
 	flex-wrap: wrap;
 }