9/6 训练报告&游戏记录tabbar，打包测试

config/dev.env.js

@@ -3,6 +3,6 @@ var prodEnv = require('./prod.env')
 
 module.exports = merge(prodEnv, {
   NODE_ENV: '"development"',
-  // REQUEST_URI: "'https://testapi.shuimuai.com/'"
+  // REQUEST_URI: "'https://api.shuimuai.com/'"
   REQUEST_URI: "'https://testapi.shuimuai.com/'"
 })

config/prod.env.js

@@ -1,5 +1,5 @@
 module.exports = {
   NODE_ENV: '"production"',
-  REQUEST_URI: "'https://api.shuimuai.com/'"
-  // REQUEST_URI:"'https://testapi.shuimuai.com/'"
+  // REQUEST_URI: "'https://api.shuimuai.com/'"
+  REQUEST_URI:"'https://testapi.shuimuai.com/'"
 }

project.private.config.json

@@ -16,11 +16,7 @@
           "name": "pages/index/main",
           "pathName": "pages/index/main",
           "query": "other=0",
-          "scene": 1065,
-          "partialCompile": {
-            "enabled": true,
-            "pages": []
-          }
+          "scene": 1065
         },
         {
           "name": "pages/coupons/main",
@@ -39,6 +35,12 @@
           "pathName": "pages/report/main",
           "query": "id=17700",
           "scene": null
+        },
+        {
+          "name": "pages/game_record/main",
+          "pathName": "pages/game_record/main",
+          "query": "",
+          "scene": null
         }
       ]
     }

src/App.vue

@@ -7,8 +7,8 @@ export default {
   },
   //外发
   onShow(options){
-      console.log('进入小程序了',options)
       let query = options.query.other
+      console.log('进入小程序了',options)
       // 有无参数
       if(query){
         console.log('外发给你')
@@ -19,13 +19,14 @@ export default {
       // 判断是啥券
       if(query == 1){
         console.log("外发其它券")
-        wx.setStorageSync("is_other", true);
+        wx.setStorageSync("is_other_first", true);
       }else{
-        wx.setStorageSync("is_other", false);
+        wx.setStorageSync("is_other_first", false);
       }
   },
   onHide(){
      wx.removeStorageSync("is_out");
+     wx.removeStorageSync("is_other_first");
      wx.removeStorageSync("is_other");
   },
   created() {

src/components/index/personal.vue

@@ -369,7 +369,48 @@ export default {
     // console.log("可以领注册体验券吗", $this.first & $this.twenty);
   },
   onShow() {
+    //外发
+    $this.output = wx.getStorageSync("is_out");
+
     reload_userinfo($this);
+
+    // 获取外发信息
+    if($this.output == true){
+    // 判断外发哪种券
+    if(wx.getStorageSync("is_other") == false){
+       outputCoupon().then((res)=>{
+       if(res.data.code == 0){
+         let $newData = res.data.data
+         $newData.validity_time['start_time_format'] = timestampTwoNum($newData.validity_time['start_time'])
+         $newData.validity_time['end_time_format'] = timestampTwoNum($newData.validity_time['end_time'])
+         $newData.validity_time['time_format'] = timestampTwoNum($newData.validity_time['time'])
+
+         $this.outCouponData = $newData
+         console.log('外发数据：',$this.outCouponData)
+         $this.is_outShow = true
+       }else{
+         wx.setStorageSync("is_out", false);
+         $this.output = false
+       }
+     })
+    }else{
+      outCardCoupon().then((res)=>{
+       if(res.data.code == 0){
+         let $newData = res.data.data
+         $newData.validity_time['start_time_format'] = timestampTwoNum($newData.validity_time['start_time'])
+         $newData.validity_time['end_time_format'] = timestampTwoNum($newData.validity_time['end_time'])
+         $newData.validity_time['time_format'] = timestampTwoNum($newData.validity_time['time'])
+
+         $this.outCouponData = $newData
+         console.log('外发数据：',$this.outCouponData)
+         $this.is_outShow = true
+       }else{
+         wx.setStorageSync("is_out", false);
+         $this.output = false
+       }
+     })
+    }  
+  }
   },
   created() {
     $this = this;

src/pages/game_record/index.vue

@@ -37,10 +37,15 @@
       </van-cell-group>
     </div>
 
+    <div style="height: 2rem;"></div>
+
     <!--    标签筛选-->
-    <van-tabs :active="active_date" @change="change_date" class="filter_date">
-      <van-tab :title="date.name" v-for="(date,index) in dates" :key="index"></van-tab>
-    </van-tabs>
+    <view class="cu-bar tabbar foot_nonShadow">
+      <van-tabs v-if="show" :active="active_date" @change="change_date" class="filter_date" line-width=58px>
+        <van-tab :title="date.name" v-for="(date,index) in dates" :key="index"></van-tab>
+      </van-tabs>
+    </view>
+    
   </div>
 </template>
 
@@ -56,6 +61,7 @@ export default {
   components: {},
   data() {
     return {
+      show:false,
       items: [],
       total: 0,
       dates: [
@@ -117,9 +123,11 @@ export default {
   },
   mounted() {
     $this.get_game_list()
+    
   },
   created() {
     $this = this
+    $this.show = true
   }
 }
 </script>
@@ -155,11 +163,18 @@ export default {
 
 .filter_date {
   position: absolute;
-  bottom: 50px;
+  bottom: 0;
   width: 100%;
   background-color: rgba(255, 255, 255, 0);
 }
 
+.foot_nonShadow{
+      position: fixed;
+    width: 100%;
+    bottom: 0;
+    z-index: 1024;
+}
+
 .record_list {
   height: 490px;
   overflow-y: scroll;

src/pages/index/index.vue

@@ -172,6 +172,12 @@ export default {
     });
   },
   onShow() {
+    if(wx.getStorageSync("is_other_first") == false){
+       wx.setStorageSync("is_other", false);
+    } else{
+       wx.setStorageSync("is_other", true);
+    }
+    
     wx.getStorageInfo({
       success(res) {
         console.log("当前存储的数据", res.keys);

src/pages/report/index.vue

@@ -5,13 +5,13 @@
     <view class="user_info">
       <img :src="userinfo.portrait"/>
       <view class="info_wrap">
-        <view class="box_wrap">
-          <text class="margin-bottom-sm text-bold text-xl">{{ record.user_name }}</text>
-          <text>{{ record.phone }}</text>
+        <view class="box_wrap margin-bottom-sm box_wrap_left">
+          <text class="text-bold text-xl">{{ record.user_name }}</text>
+          <text class="info_right">{{ record.start_time }}</text>
         </view>
-        <view class="box_wrap info_right">
-          <text style="margin-bottom:12px">{{ record.start_time }}</text>
-          <text>训练时间 : {{ record.play_time }}</text>
+        <view class="box_wrap box_wrap_right">
+          <text>{{ record.phone }}</text>
+          <text class="info_right">训练时间：{{ record.play_time }}</text>
         </view>
 
       </view>
@@ -53,9 +53,7 @@
           />
         </view>
         <view class="left_content">
-          <view class="left_num">{{ record.height_absorbed }}
-            <text class="textLil text-gray">%</text>
-          </view>
+          <view class="left_num">{{ record.height_absorbed }}<text class="textLil text-gray">%</text></view>
           <view class="left_text">高专注力<br/>&emsp;占比</view>
         </view>
       </view>
@@ -66,9 +64,7 @@
           <view>专注力维持区间</view>
         </view>
         <view class="detail">
-          <view class="detail_num">{{ record.interfere }}
-            <text class="textLil text-gray">次</text>
-          </view>
+          <view class="detail_num">{{ record.interfere }}<text class="textLil text-gray">次</text></view>
           <view>受干扰次数</view>
         </view>
         <view class="detail">
@@ -76,18 +72,14 @@
           <view>专注力最大爆发值</view>
         </view>
         <view class="detail">
-          <view class="detail_num">{{ record.start }}
-            <text class="textLil text-gray">秒</text>
-          </view>
+          <view class="detail_num">{{ record.start }}<text class="textLil text-gray">秒</text></view>
           <view>专注力启动时长</view>
         </view>
       </view>
 
       <!-- 平均专注力 -->
       <view class="margin_right ">
-        <view class="right_num">{{ record.att_average_big }}
-          <text class="text-sm">{{ record.att_average_lil }}</text>
-        </view>
+        <view class="right_num">{{ record.att_average_big }}<text class="text-sm">{{ record.att_average_lil }}</text></view>
         <view class="right_text">平均专注力</view>
       </view>
 
@@ -161,7 +153,7 @@
       />
     </view>
     <view
-      class="section_container"
+      class="section_container container_tab"
       v-if="is_cut"
     >
       <van-tabs
@@ -169,6 +161,7 @@
         color="#6858C4"
         @change="changeMin"
         :swipe-threshold="4"
+        line-width=54px
       >
         <van-tab
           :name="index"
@@ -178,6 +171,7 @@
         ></van-tab>
       </van-tabs>
     </view>
+    <view class="divide_line"></view>
 
     <view class="bar">
       <view>
@@ -185,12 +179,66 @@
         <view class="title">专注力数值累计比例</view>
       </view>
     </view>
-    <view class="chart">
-      <mpvue-echarts
-        :echarts="echarts"
-        :onInit="pie_charts"
-        canvasId="demo-canvas-1"
-      />
+
+    <view  class="flexBoxLand">
+      <view>
+       <view class="chart_circle">
+        <mpvue-echarts
+         :echarts="echarts"
+         :onInit="pie_charts"
+         canvasId="demo-canvas-1"
+        />
+       </view>
+       <view class="left_content">
+          <view class="left_text">专注力数值</view>
+          <view class="left_text">比例</view>
+        </view>
+
+      </view>
+      
+
+    <!-- 右侧标签 -->
+          <view class="flexBoxVer">
+            <view class="flexBoxLand colorChangeWrap">
+              <view
+                class="colorChange"
+                id="changeFirst"
+              >81-100</view>
+              <view class="colorChangeTime">{{record.level_time0}}（{{record.level_ratio0}}%）</view>
+            </view>
+
+            <view class="flexBoxLand colorChangeWrap">
+              <view
+                class="colorChange"
+                id="changeSecond"
+              >61-80</view>
+              <view class="colorChangeTime">{{record.level_time1}}（{{record.level_ratio1}}%）</view>
+            </view>
+
+            <view class="flexBoxLand colorChangeWrap">
+              <view
+                class="colorChange"
+                id="changeThird"
+              >41-60</view>
+              <view class="colorChangeTime">{{record.level_time2}}（{{record.level_ratio2}}%）</view>
+            </view>
+
+            <view class="flexBoxLand colorChangeWrap">
+              <view
+                class="colorChange"
+                id="changeFourth"
+              >21-40</view>
+              <dview class="colorChangeTime">{{record.level_time3}}（{{record.level_ratio3}}%）</dview>
+            </view>
+
+            <view class="flexBoxLand">
+              <view
+                class="colorChange"
+                id="changeFifth"
+              >00-20</view>
+              <view class="colorChangeTime">{{record.level_time4}}（{{record.level_ratio4}}%）</view>
+            </view>
+          </view>
     </view>
 
     <view class="divide_line"></view>
@@ -259,6 +307,7 @@
           color="#6858C4"
           @change="changeABMin"
           :swipe-threshold="4"
+          line-width=54px
         >
           <van-tab
             :name="index"
@@ -304,7 +353,7 @@
           color="#6858C4"
           @change="changeDTMin"
           :swipe-threshold="4"
-
+          line-width=54px
         >
           <van-tab
             :name="index"
@@ -510,10 +559,31 @@ export default {
             ]);
             radar_charts.setOption($options);
 
-            let $pie_data = filterPieData($this.record.level);
+            let $pie_data = $this.record.level;
+            // 时间
+            $this.record.level_time0 = formatSeconds($this.record.level[0]);
+            $this.record.level_time1 = formatSeconds($this.record.level[1]);
+            $this.record.level_time2 = formatSeconds($this.record.level[2]);
+            $this.record.level_time3 = formatSeconds($this.record.level[3]);
+            $this.record.level_time4 = formatSeconds($this.record.level[4]);
+
+            // 时间总数
+            let all_time = 0
+            for(let i = 0;i < 5; i++){
+              all_time += $this.record.level[i]
+            }
+
+            // 比例
+            $this.record.level_ratio0 = Math.round((($this.record.level[0] / all_time)*100)*100)/100;
+            $this.record.level_ratio1 = Math.round((($this.record.level[1] / all_time)*100)*100)/100;
+            $this.record.level_ratio2 = Math.round((($this.record.level[2] / all_time)*100)*100)/100;
+            $this.record.level_ratio3 = Math.round((($this.record.level[3] / all_time)*100)*100)/100;
+            $this.record.level_ratio4 = Math.round((($this.record.level[4] / all_time)*100)*100)/100;
+            
             let $pie_option = getPieChartsOption($pie_data);
             $pie_charts.setOption($pie_option);
 
+
             //5分钟阶段
             let $min = 2 * 60;
             $this.is_cut = $play_time > $min;
@@ -678,18 +748,28 @@ image.boy {
 .user_info .info_wrap {
   display: flex;
   justify-content: space-between;
+  box-sizing: border-box;
+  flex-direction: column;
   flex: 1;
 }
 
 .user_info .box_wrap {
   display: flex;
-  flex-direction: column;
   color: #222222;
+  box-sizing: border-box;
+  justify-content: space-between
+}
+
+.user_info .box_wrap_left {
+  align-items: center;
+}
+
+.user_info .box_wrap_right {
+  align-items: flex-end;
 }
 
 .user_info .info_right {
   color: #666666;
-  text-align: right
 }
 
 /* 智脑系数 */
@@ -896,6 +976,7 @@ image.boy {
 /*雷达图*/
 .radar_chart {
   margin: 0 auto;
+  margin-bottom: 10px;
   width: 360px;
   height: 293px;
   /* background: #f3f3f3; */
@@ -1234,4 +1315,83 @@ image.boy {
   /* background-color: #ffb400; */
   margin-right: 7px;
 }
+
+/* 圆环图 */
+.flexBoxVer {
+  display: flex;
+  align-items: center;
+  box-sizing: border-box;
+  flex-direction: column;
+  align-items: flex-start;
+}
+
+.flexBoxLand {
+  display: flex;
+  align-items: center;
+  box-sizing: border-box;
+}
+
+.colorChangeWrap {
+  margin-bottom: 5px;
+}
+
+.colorChange {
+  width: 50px;
+  height: 18px;
+  border-radius: 4px;
+  font-size: 11px;
+  color: #ffffff;
+  text-align: center;
+  line-height: 18px;
+  margin-right: 10px;
+}
+
+.colorChangeTime {
+  font-size: 13px;
+}
+
+#changeFirst {
+  background: #5470c6;
+}
+
+#changeSecond {
+  background: #91cc75;
+}
+
+#changeThird {
+  background: #fac858;
+}
+
+#changeFourth {
+  background: #ee6666;
+}
+
+#changeFifth {
+  background: #73c0de;
+}
+
+.chart_circle {
+  width: 180px;
+  height: 193px;
+  border-radius: 10px;
+}
+
+.left_content {
+  height: 193px;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  color: #676767;
+  z-index: 999;
+  margin-top: -190px;
+}
+
+.left_text {
+  font-size: 12px;
+}
+/* 滑动条 */
+.container_tab{
+  margin-bottom: 20px
+}
 </style>

src/utils/index.js

@@ -643,24 +643,16 @@ export function getHightPieChartOption($params, $total) {
 
 // 雷达图
 export function getRadarChartOption($params) {
-
+  var i = -1;
   let $option = {
     tooltip: {},
     color: "#ffb72d",
     radar: {
       radius: "65%",
-      name: {
-        textStyle: {
-          color: "#333333",
-          fontSize: 10,
-          fontWeight: "400",
-          fontFamily: "Microsoft YaHei",
-        },
-      },
       indicator: [{
-        name: "专注力平均指数",
-        max: 100
-      },
+          name: "专注力平均指数",
+          max: 100
+        },
         {
           name: "专注力广度指数",
           max: 100
@@ -694,8 +686,29 @@ export function getRadarChartOption($params) {
           color: "#E6E6E6",
         },
       },
+      name: {
+        rich: {
+            a: {
+              color: '#333333',
+              fontSize: 10,
+              fontWeight: "400",
+              fontFamily: "Microsoft YaHei",
+            },
+            b: {
+              color: '#333333',
+              align: 'center',
+              padding: 5,
+              fontSize: 10,
+            }
+        },
+        formatter: (a, b) => {
+          i++;
+          return `{a|${a}}\n{b|${$params[i]}}`
+        }
+    }
     },
     series: [{
+      silent: true,
       name: "预算 vs 开销（Budget vs spending）",
       type: "radar",
       color: "#FFB72D",
@@ -715,97 +728,32 @@ export function getRadarChartOption($params) {
 
 //获取饼状图图属性
 export function getPieChartsOption($pie_datas) {
-  if ($pie_datas) {
-    console.log($pie_datas);
-    let option = {
-      tooltip: {
-        trigger: "item",
-        formatter: "{a} \r\n {b}: {c} ({d}%)",
-      },
-      legend: {
-        orient: "vertical",
-        right: "10%",
-        top: "20%",
-        data: $pie_datas["legends"],
-      },
-      series: [{
-        name: "访问来源",
-        type: "pie",
-        radius: ["40%", "70%"],
-        avoidLabelOverlap: false,
+  let option = {
+    series: [{
+      silent: true,
+      name: "访问来源",
+      type: "pie",
+      radius: ["45%", "70%"],
+      avoidLabelOverlap: false,
+      label: {
+        show: false,
+        position: "center",
+      },
+      // right: "40%",
+      emphasis: {
         label: {
-          show: false,
-          position: "center",
-        },
-        right: "40%",
-        emphasis: {
-          label: {
-            show: true,
-            fontSize: "30",
-            fontWeight: "bold",
-          },
-        },
-        labelLine: {
           show: true,
+          fontSize: "30",
+          fontWeight: "bold",
         },
-        itemStyle: {
-          borderWidth: 2, //设置border的宽度有多大
-          borderColor: "#fff",
-        },
-        data: $pie_datas["datas"],
-      },],
-    };
-    return option;
-  }
-}
-
-//过滤饼状数据
-export function filterPieData(datas) {
-  let $this = this;
-  let legends = [];
-  let $att_region = [{
-    min: 0,
-    max: 20,
-  },
-    {
-      min: 21,
-      max: 40,
-    },
-    {
-      min: 41,
-      max: 60,
-    },
-    {
-      min: 61,
-      max: 80,
-    },
-    {
-      min: 81,
-      max: 100,
-    },
-  ];
-  datas.forEach(($val, $index) => {
-    legends.push(
-      $att_region[$index]["min"] +
-      "-" +
-      $att_region[$index]["max"] +
-      "：" +
-      formatSeconds($val)
-    );
-    let _data = {
-      name: $att_region[$index]["min"] +
-        "-" +
-        $att_region[$index]["max"] +
-        "：" +
-        formatSeconds($val),
-      value: $val,
-    };
-    datas[$index] = _data;
-  });
-  return {
-    datas,
-    legends
+      },
+      labelLine: {
+        show: false,
+      },
+      data: $pie_datas,
+    },],
   };
+  return option;
 }
 
 // 时间戳转化成时间格式
@@ -816,10 +764,10 @@ export function timestampToTimeS(timestamp) {
     (date.getMonth() + 1 < 10 ?
       "0" + (date.getMonth() + 1) :
       date.getMonth() + 1) + "-";
-  var D = date.getDate() + " ";
+  var D = (date.getDate() < 10 ? "0" + date.getDate() : date.getDate()) + " ";
   var h = date.getHours() + ":";
-  var m = date.getMinutes() + ":";
-  var s = date.getSeconds();
+  var m = (date.getMinutes() < 10 ? "0" + date.getMinutes() : date.getMinutes()) + ":";
+  var s = (date.getSeconds() < 10 ? "0" + date.getSeconds() : date.getSeconds());
   return Y + M + D + h + m + s;
 }