feat: 每日一练

src/components/record-cell/index.vue

+<template>
+  <view class="record-cell">
+    <view class="time-view">{{ timeText }}</view>
+    <view class="detail-view">
+      <view v-for="(value, key) in labels" :key="key" class="item-view">
+        <view>{{ value }}</view>
+        <view class="content-view">
+          <view
+            v-if="key == 'result'"
+            :class="['result-text', { passed: passed }]"
+            >{{ resultText }}</view
+          >
+          <view v-else class="content-text">{{ info[key] }}</view>
+          <view class="unit-text">{{ units[key] }}</view>
+        </view>
+      </view>
+    </view>
+  </view>
+</template>
+
+<script>
+export default {
+  props: {
+    info: {
+      type: Object,
+      default() {
+        return {}
+      },
+    },
+  },
+  data() {
+    return {}
+  },
+  computed: {
+    timeText() {
+      return this.$u.timeFormat(this.info.date, 'yyyy.mm.dd')
+    },
+    labels() {
+      return {
+        time: '模考用时',
+        score: '模考成绩',
+        result: '是否及格',
+      }
+    },
+    units() {
+      return {
+        time: '分钟',
+        score: '分',
+        result: '',
+      }
+    },
+    passed() {
+      // 及格、不及格
+      return this.info.score >= 60
+    },
+    resultText() {
+      return this.passed ? '及格' : '不及格'
+    },
+  },
+  methods: {},
+}
+</script>
+
+<style lang="scss" scoped>
+.record-cell {
+  height: 296rpx;
+  border-bottom: 2rpx solid #e8ebf3;
+  padding: 48rpx 0 40rpx 0;
+  .time-view {
+    color: #5a6073;
+    font-size: 28rpx;
+  }
+  .detail-view {
+    display: flex;
+    align-items: center;
+    justify-content: space-around;
+    margin-top: 34rpx;
+    .item-view {
+      color: #9ea5bb;
+      font-size: 28rpx;
+      text-align: center;
+      .content-view {
+        padding-top: 16rpx;
+        display: flex;
+        align-items: flex-end;
+        .result-text {
+          font-size: 44rpx;
+          color: #fa5a49;
+          font-weight: bold;
+          line-height: 80rpx;
+          height: 80rpx;
+          &.passed {
+            color: #2953ff;
+          }
+        }
+        .content-text {
+          color: #5a6073;
+          font-size: 56rpx;
+          font-weight: bold;
+          height: 80rpx;
+          line-height: 80rpx;
+        }
+        .unit-text {
+          padding-left: 14rpx;
+          font-weight: 400;
+          margin-bottom: 11rpx;
+        }
+      }
+    }
+  }
+}
+</style>

src/pages.json

@@ -111,6 +111,16 @@
 						"disableScroll": true
 					}
 				},
+				{
+					"path": "record",
+					"name": "learnRecord",
+					"style": {
+						"navigationBarTitleText": "学练记录",
+						"navigationStyle": "custom",
+						"enablePullDownRefresh": false,
+						"disableScroll": true
+					}
+				},
 				{
 					"path": "addExam",
 					"name": "learnAddExam",

src/pages/learn/examSetting.vue

@@ -48,6 +48,9 @@
           mode="region"
           v-model="show"
           :params="params"
+          safe-area-inset-bottom
+          cancel-color="#9EA5BB"
+          confirm-color="#2953FF"
           :default-region="defaultRegion"
           @confirm="handleConform"
         ></u-picker>

src/pages/learn/record.vue

+<template>
+  <view class="record-view">
+    <u-navbar
+      back-icon-color="#FFFFFF"
+      background="transparent"
+      title="学练记录"
+      titleColor="#FFFFFF"
+      :border-bottom="false"
+      title-bold
+    ></u-navbar>
+    <view class="head-view">
+      <view class="left-view">
+        <view class="head-tip">学练记录</view>
+        <view class="content-text">Learn of punch</view>
+      </view>
+      <image class="xunzhang-image" :src="xunzhangImage"></image>
+    </view>
+    <view class="body-view">
+      <view class="date-view">
+        <view class="content-title">每日一练</view>
+        <view class="date-content"></view>
+      </view>
+      <view class="charts-view">
+        <view class="content-title">练习分析</view>
+        <view class="range-view">
+          <view class="range-title">日期范围</view>
+          <view
+            v-for="(item, index) in items"
+            :key="index"
+            :class="['range-item', { selected: item.selected }]"
+            @click="handleClickRange(index)"
+            >{{ item.title }}</view
+          >
+        </view>
+        <view v-if="showSelect" class="days-select-view">
+          <picker
+            mode="date"
+            :value="rangeDay0"
+            :end="rangeDay1"
+            @change="handleConform($event, 0)"
+          >
+            <view class="date-picker-content" hover-class="hover-class">
+              <view class="input-view">{{ rangeDay0 }}</view>
+              <u-icon name="arrow-down"></u-icon>
+            </view>
+          </picker>
+          <view class="line-view">-</view>
+          <picker
+            mode="date"
+            :value="rangeDay1"
+            :start="rangeDay0"
+            :end="getDate()"
+            @change="handleConform($event, 1)"
+          >
+            <view class="date-picker-content" hover-class="hover-class">
+              <view class="input-view">{{ rangeDay1 }}</view>
+              <u-icon name="arrow-down"></u-icon>
+            </view>
+          </picker>
+        </view>
+        <view class="charts-content"> </view>
+      </view>
+      <view class="list-view">
+        <view class="content-title">模考成绩</view>
+        <view class="list-content">
+          <RecordCell
+            v-for="(item, index) in showedList"
+            :key="index"
+            :info="item"
+          ></RecordCell>
+          <view class="show-more" @click="showAll = true" v-if="!showAll">
+            <u-icon name="arrow-down"></u-icon>
+            <text>查看更多</text>
+          </view>
+        </view>
+      </view>
+    </view>
+  </view>
+</template>
+
+<script>
+import RecordCell from '@/components/record-cell'
+export default {
+  components: { RecordCell },
+  data() {
+    return {
+      lists: [],
+      showSelect: false,
+      showAll: false,
+      items: [
+        {
+          title: '近7天',
+          selected: true,
+        },
+        {
+          title: '近30天',
+          selected: false,
+        },
+        {
+          title: '自定义',
+          selected: false,
+        },
+      ],
+
+      rangeDay0: this.getDate(), // 自定义开始日期
+      rangeDay1: this.getDate(), // 自定义结束日期
+    }
+  },
+
+  computed: {
+    xunzhangImage() {
+      return process.uniEnv.qn_base_url + 'xuelianxunzhang.png'
+    },
+    params() {
+      return {
+        year: true,
+        month: true,
+        day: true,
+      }
+    },
+    showedList() {
+      return this.showAll ? this.lists : this.lists.slice(0, 2)
+    },
+  },
+  onLoad() {
+    this.lists = [
+      { time: 36, score: 80, date: new Date().getTime },
+      { time: 100, score: 40, date: new Date().getTime },
+      { time: 40, score: 60, date: new Date().getTime },
+    ]
+  },
+  methods: {
+    handleClick() {},
+    handleClickRange(index) {
+      for (var item of this.items) {
+        item.selected = false
+      }
+      this.items[index].selected = true
+      if (index == 2) {
+        this.showSelect = true
+      } else {
+        // 修改图表
+        // ...
+      }
+    },
+    handleConform(e, index) {
+      this['rangeDay' + index] = e.target.value
+      // 修改图表
+      // ...
+    },
+    getDate() {
+      return this.$u.timeFormat(new Date().getTime(), 'yyyy-mm-dd')
+    },
+  },
+}
+</script>
+
+<style lang="scss" scoped>
+::-webkit-scrollbar {
+  width: 0;
+  height: 0;
+  color: transparent;
+  display: none;
+}
+.record-view {
+  display: flex;
+  flex-direction: column;
+  height: 100vh;
+  position: relative;
+  background-color: #f7f9fc;
+  background-image: linear-gradient(to top, #2272ff 0%, #2953ff 50%);
+  background-size: 100% 400rpx;
+  background-repeat: no-repeat;
+
+  .head-view {
+    padding: 10rpx 60rpx 50rpx 60rpx;
+    display: flex;
+    justify-content: space-between;
+    overflow: visible;
+    align-items: flex-start;
+    height: 220rpx;
+    .left-view {
+      margin-top: 20rpx;
+      .head-tip {
+        color: #ffffff;
+        font-size: 48rpx;
+        font-weight: bold;
+        margin-bottom: 16rpx;
+      }
+      .content-text {
+        font-size: 40rpx;
+        font-weight: bold;
+        color: #ffffff;
+      }
+    }
+    .xunzhang-image {
+      width: 182rpx;
+      height: 272rpx;
+      z-index: 1;
+    }
+  }
+  .body-view {
+    border-radius: 24rpx 24rpx 0 0;
+    background-color: #ffffff;
+    height: 100%;
+    overflow: auto;
+    padding: 24rpx 30rpx 44rpx 30rpx;
+    .date-view {
+      .date-content {
+        min-height: 648rpx;
+      }
+    }
+    .content-title {
+      font-size: 32rpx;
+      color: #191c27;
+      font-weight: bold;
+    }
+    .charts-view {
+      .range-view {
+        display: flex;
+        margin-top: 40rpx;
+        margin-bottom: 40rpx;
+        .range-title {
+          font-size: 28rpx;
+          color: #9ea5bb;
+          margin-right: 8rpx;
+        }
+        .range-item {
+          margin-left: 30rpx;
+          font-size: 24rpx;
+          color: #9ea5bb;
+          background-color: #e8ebf3;
+          border-radius: 24rpx;
+          padding: 0 20rpx;
+          line-height: 48rpx;
+          height: 48rpx;
+          &.selected {
+            color: #ffffff;
+            background-color: #2953ff;
+          }
+        }
+      }
+      .days-select-view {
+        margin-left: 154rpx;
+        display: flex;
+        align-items: center;
+        color: #9ea5bb;
+
+        .line-view {
+        }
+        .hover-class {
+          background-color: #2953ff;
+          color: #ffffff;
+        }
+        .date-picker-content {
+          display: flex;
+          align-items: center;
+          padding-left: 10rpx;
+          padding-right: 10rpx;
+          border-radius: 12rpx;
+          .input-view {
+            margin-right: 8rpx;
+          }
+        }
+      }
+      .charts-content {
+        min-height: 570rpx;
+      }
+    }
+    .list-view {
+      .list-content {
+        .show-more {
+          display: flex;
+          justify-content: center;
+          align-items: center;
+          color: #2953ff;
+          height: 80rpx;
+        }
+      }
+    }
+  }
+}
+</style>