raolu
/
PC-application


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124
							<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>饮食详情</title>
    <link rel="stylesheet" type="text/css" href="../../../css/bootstrap.min.css" />
    <link rel="stylesheet" type="text/css" href="../../../css/style.min.css" />
    <link rel="stylesheet" type="text/css" href="../../../css/cross.css" />
    <link rel="stylesheet" href="../../../plugins/toastr/toastr.min.css" />
    <link rel="stylesheet" href="../../../plugins/element-ui/element-ui.css" />
    <link rel="stylesheet" type="text/css" href="../css/date.css" />
    <link rel="stylesheet" href="../css/common.css" />
    <style>
      #app {
        padding: 8px 16px;
        font-size: 14px;
      }
      .food-info {
        font-size: 16px;
        padding-bottom: 12px;
        border-bottom: 1px solid rgba(0, 0, 0, 0.1);
      }
      .food-info img{
        max-width: 280px;
      }
      .tip {
        color: #11b7f5;
        padding: 12px 0;
      }
      .flex {
        display: flex;
        align-items: center;
      }
      .food-item {
        margin-bottom: 20px;
      }
      .food-item img{
        width: 100px;
      }
      .pl8 {
        padding-left: 8px;
      }
      .food-component {
        display: flex;
        align-items: center;
        justify-content: space-between;
        border-bottom: 1px solid rgba(0, 0, 0, 0.1);
        padding: 8px 0;
        margin-left: 20px;
      }
    </style>
  </head>
  <body>
    <div id="app" v-cloak>
      <div class="food-info">
        <div class="lheight2">{{dietDetail.time}}</div>
        <div class="lheight2" style="margin-bottom: 8px">{{dietDetail.content}}</div>
        <img :src="dietDetail.images" alt="" />
      </div>
      <div class="tip">以下食物热量和营养价值仅供参考</div>
      <div class="food-list">
        <div class="food-item" v-for="(item,i) in foodList" :key="i">
          <div class="flex">
            <img :src="item.photo" alt="" />
            <div class="pl8">
              <div>
                {{item.name}}
                <span class="pl8">{{item.weight}}</span>
              </div>
              <div>{{item.hot}} 千卡热量</div>
            </div>
          </div>
          <div class="food-component" v-for="(val,key) in item.component">
            <div>{{key}}</div>
            <div>{{val}} 克</div>
          </div>
        </div>
      </div>
    </div>
    <script type="text/javascript" src="../../../js/vue.js"></script>
    <script type="text/javascript" src="../../../js/jquery-2.2.4.js"></script>
    <script type="text/javascript" src="../../../js/es6-promise.js" charset="utf-8"></script>
    <script type="text/javascript" src="../../../plugins/toastr/toastr.min.js"></script>
    <script type="text/javascript" src="../../../plugins/element-ui/element-ui.js"></script>
    <script type="text/javascript" src="../../../api/http-request.js"></script>
    <script type="text/javascript" src="../../../plugins/layer/layer.min.js"></script>
    <script type="text/javascript" src="../../../api/rehabilitation-api.js"></script>
    <script type="text/javascript" src="../../../api/recover_api.js"></script>
    <script type="text/javascript" src="../../../js/underscore-1.9.1.js"></script>
    <script type="text/javascript" src="../../../js/util.js" charset="utf-8"></script>
    <script>
      new Vue({
        el: '#app',
        data() {
          return {
            id: '',
            dietDetail:{},
            foodList: []
          }
        },
        methods: {
          getFoodDetail() {
            const vm  = this
            httpRequest.get('doctor/health_record/dietDetail', { data: { id: this.id } }).then(function (res) {
              vm.dietDetail = res.data.dietDetail
              vm.dietDetail.time = vm.dietDetail.recordDate.substring(0,10)
              vm.foodList = (res.data.foodCompList??[]).map(function(item){
                return {
                  ...item,
                  component: JSON.parse(item.component)
                }
              })
            })
          }
        },
        mounted() {
          this.id = GetRequest().id
          this.getFoodDetail()
        }
      })
    </script>
  </body>
</html>