adultDeviceApp/pages/target/target.vue

<template>
  <view class="content">
    <!-- 时间选择 -->
    <view class="TrendPage">
      <view class="TrendTime">
        <view class="boxTime">
          <view class="one">
            <picker mode="date" class="f-l" :value="startTime?startTime:startDate" @change="handStartTimeH">
              <view class="uni-input">{{startTime?startTime:startDate}}
                <icon class="iconfont iconDown"></icon>
              </view>
            </picker>

            <picker mode="date" :end="endDate" class="f-r" :value="endDate" @change="handEndTimeH">
              <view class="uni-input">~ {{endTime?endTime:endDate}}
                <icon class="iconfont iconDown"></icon>
              </view>
            </picker>
          </view>
          <view class="tow" @click="handAllTime(0)" :class="{style:active==0}">
            近3月
          </view>
          <view class="tow" @click="handAllTime(1)" :class="{style:active==1}">
            近半年
          </view>
        </view>
      </view>
      <!-- 曲线图 -->
      <view class="box boxList">
        <view class="listC">
          <view :class="{active:index==active1}" class="name" v-for="(item,index) in weightList" :key="index"
            @click="showbox(index)">
            {{item.title}}
          </view>
        </view>
        <view class="blockC">
          <view v-if="lineData&&lineData.categories.length&&handTrue">
            <qiun-data-charts type="area" :chartData="lineData" :canvas2d="true" canvasId="charts09" :cHeight="480"
              :cWidth="680" :animation="false" :opts="{enableScroll:true,xAxis:{scrollShow:false,itemCount:3}}"
              :ontouch="true" />
          </view>
          <view class="nolist" v-else>
            <icon class="iconfont icon-zanwu"></icon>
          </view>
        </view>
      </view>

      <!--  目标-->
      <view class="box">
        <view class="data">
          <view class="item" @click="handleClick(0)">
            <view class="val">{{userInfo.targetweight?userInfo.targetweight:0}}<text>kg</text>
            </view>
            <view class="name">目标体重<icon class="t-icon t-icon-bianji3"></icon>
            </view>
          </view>
          <view class="item">
            <view class="val">{{userInfo.totalweight?Math.abs(userInfo.totalweight):0}}<text>kg</text>
            </view>
            <view class="name" v-if="Number(userInfo.totalweight)<0">累计增重</view>
            <view class="name" v-else>累计减重</view>
          </view>
          <view class="item" @click="handleClick(1)">
            <view class="val">{{userInfo.firstweight?userInfo.firstweight:0}}<text>kg</text>
            </view>
            <view class="name">初始体重<icon class="t-icon t-icon-bianji3"></icon>
            </view>
          </view>
          <view class="item">
            <view class="val">{{userInfo.day?userInfo.day:0}}<text>天</text></view>
            <view class="name">减重天数</view>
          </view>
          <view class="item" @click="handleClick(2)">
            <view class="val"></view>
            <view class="name">
              <icon class="iconfont icon-tianjia">手动记录</icon>
            </view>
          </view>
        </view>
      </view>
      <!-- 手动 -->
      <manuaRecord @getList="getList"></manuaRecord>
      <!-- 初始 -->
      <firstweight></firstweight>
      <!-- 目标 -->
      <targetWeight></targetWeight>
      <!-- 登录 -->
      <userPopup></userPopup>
    </view>
  </view>
</template>
<script>
  import {
    mapState
  } from "vuex";
  import userPopup from '@/components/userLogin.vue'
  import targetWeight from '@/components/target/targetWeight.vue';
  import firstweight from '@/components/target/firstweight.vue';
  import manuaRecord from '@/components/target/manuaRecord.vue';
  import qiunDataCharts from '@/uni_modules/qiun-data-charts/components/qiun-data-charts.vue';
  export default {
    components: {
      targetWeight,
      firstweight,
      manuaRecord,
      userPopup,
      qiunDataCharts,
    },
    computed: {
      ...mapState(["user", "Trend", "appTheme"]),
      userInfo: function() {
        return this.user
      },
      endDate() {
        return this.$tools.getDate("start")
      },
      startDate() {
        return this.$tools.GetDateStr(-90);
      },
    },
    onLoad() {
      // 导航栏颜色
      uni.setNavigationBarColor({
        frontColor: '#ffffff',
        backgroundColor: this.appTheme,
      })
    },
    onShow() {
      let that = this
      this.token = uni.getStorageSync('token')
      this.active = 0
      this.startTime = ""
      this.endTime = ""
      that.getList(this.startDate, this.endDate)
    },
    methods: {
      getList(start, end) {
        console.log("fanhui", start, end)
        let that = this
        that.$model.getTrendList({
          familyid: uni.getStorageSync('familyid'),
          starttime: start,
          endtime: end,
        }).then(res => {
          if (res) {
            for (var i = 0; i < that.weightList.length; i++) {
              that.weightList[i].Line = res[that.weightList[i].key];
            }
            that.showbox(0)
          }
        })
      },
      showbox(index) {
        let that = this
        that.handTrue = false
        this.$nextTick(function() {
          that.handTrue = true
          that.lineData = that.weightList[index].Line
        })
        that.active1 = index
      },
      //开始
      handStartTimeH(e) {
        let that = this
        if (this.endTime) {
          if (Date.parse(e.target.value) > Date.parse(this.endTime)) {
            this.$tools.msg("请选择正确的时间")
            return
          }
        } else {
          if (Date.parse(e.target.value) > Date.parse(this.endDate)) {
            this.$tools.msg("请选择正确的时间")
            return
          }
        }
        this.startTime = e.target.value
        let endtime = that.endTime ? that.endTime : that.endDate
        this.getList(that.startTime, endtime)
      },
      // 结束
      handEndTimeH(e) {
        let that = this
        if (this.startTime) {
          if (Date.parse(e.target.value) < Date.parse(this.startTime)) {
            this.$tools.msg("请选择正确的时间")
            return
          }
        } else {
          if (Date.parse(e.target.value) < Date.parse(this.startDate)) {
            this.$tools.msg("请选择正确的时间")
            return
          }
        }
        this.endTime = e.target.value
        let startTime = that.startTime ? that.startTime : that.startDate
        this.getList(startTime, this.endTime)
      },
      // 日期
      handAllTime(ind) {
        let that = this
        if (!uni.getStorageSync('token')) {
          this.$store.commit("changeUserLogin", true);
          return
        }
        this.active = ind
        if (ind == 0) {
          this.startTime = that.$tools.GetDateStr(-90)
        } else {
          this.startTime = that.$tools.GetDateStr(-180)
        }
        this.getList(this.startTime, this.endDate)
      },
      handleClick(ind) {
        if (!uni.getStorageSync('token')) {
          this.$store.commit("changeUserLogin", true);
          return
        }
        if (ind == 0) {
          this.$store.commit("changeTarget", true);
          return
        }
        if (ind == 1) {
          this.$store.commit("changeFirst", true);
          return
        }
        if (ind == 2) {
          this.$store.commit("changeRecord", true);
          return
        }
      },
    },
    data() {
      return {
        lineData: null,
        type: null,
        active1: 0,
        weight: "",
        startTime: "",
        endTime: "",
        active: 0,
        token: null,
        handTrue: true,
        weightList: [{
            title: '体重',
            key: 'weight',
            showCon: false,
            Line: {
              "categories": [],
              "series": [{
                "color": "#fb7b92",
                "name": "体重",
                "data": []
              }]
            },
          },
          {
            title: 'BMI',
            key: 'bmi',
            Line: {
              "categories": [],
              "series": [{
                "color": "#6bb0fe",
                "name": "bmi",
                "data": []
              }]
            },
          }, {
            title: '肌肉',
            key: 'muscle',
            showCon: false,
            Line: {
              "categories": [],
              "series": [{
                "color": "#ff9f40",
                "name": "肌肉率",
                "data": []
              }]
            },
          },
          {
            title: '脂肪',
            key: 'fat_r',
            showCon: false,
            Line: {
              "categories": [],
              "series": [{
                "color": "#3fcba7",
                "name": "脂肪率",
                "data": []
              }]
            },
          }
        ],
      };
    }
  }
</script>

<style lang="scss" scoped>
  .TrendTime {
    background: #fff;
    padding: 10px;
    margin-bottom: 15px;
    border-radius: 10px;
  }

  .listC {
    margin: 10px;
  }

  .boxList {
    background-color: #fff;
    border-radius: 10px;

    .list {
      margin: 10px;
    }
  }
</style>