校網：午餐區塊的語法

午餐區塊的語法：
( 說明：紅色的號碼，請至教育部校園食材登陸平台查詢。

 

<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>

<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

<div id="lunchApp">

 

    <div v-if="info.data.length != 0">

         

     

       

    {{getBatchdata}}

               

      <!--顯示菜單  -->   

      <div v-if="menu.data.length !=0" class="border-bottom" v-for="dish in menu.data">

            <span v-if="dish.DishType !== undefined">{{dish.DishType}} :</span>  {{dish.DishName}}

      </div>

      <p style="margin: 0.5em;"> </p>

     

        <button @click="queryDetail" type="button" class="shadow-sm bg-white rounded">查看詳細資料</button>

    </div>   

     

     

    <div v-else>

        <span class="border-bottom" style="font-size: 1em; color:#3572f3;">本日無菜單<span>

    </div>

    </div>

       

</div>

<script>

  let SchoolId = "64744649";

  // ====================== script runs from here =======================

  let Today=new Date();

  let period=Today.getFullYear()+ "-" + (Today.getMonth()+1) + "-" + Today.getDate();

  let url = "https://fatraceschool.k12ea.gov.tw/offered/meal?KitchenId=all&MenuType=1&period=" + period + "&SchoolId=" + SchoolId + '"';

    

  const { createApp } = Vue

  createApp({

    data() {

      return {

      

info: {

      'data':[]

    },

    menu: {

      'data':[]    

    },

    selectedBatchdataId: '',

      }

    },

    created: function() {

     axios

        .get(url)

        .then(response => {

             

            this.info = response.data;    

            //console.log("廠商:"+this.info.data.length);

            if(this.info.data.length === 1){

              this.selectedBatchdataId = this.info.data[0].BatchDataId;

            } else {

                this.selectedBatchdataId ="000000";

                let vm = this;             

                   

               

                this.info.data.forEach(item=>{

                let dish = {};

                dish.DishName = item.KitchenName;

                vm.menu.data.push(dish);

                })

                console.log(vm.menu);

             

            }

        });

   

    },

    computed: {

     getBatchdata: function(){

        if(this.info.data.length !=0){           

            this.getMenu();

           

        }

    }

    },

    methods: {

    

getMenu: function() {

              //https://fatraceschool.k12ea.gov.tw/dish?BatchDataId=1600228898323523

              if(this.selectedBatchdataId !== "000000"){

                 

                        let url = "https://fatraceschool.k12ea.gov.tw/dish?BatchDataId=" + this.selectedBatchdataId;

              axios

                .get(url)

                .then(response => {

                    this.menu = response.data;                     

                  })

              }

               

       

  },

  queryDetail: function(){  

  let url = "https://fatraceschool.k12ea.gov.tw/frontend/search.html?school="+ SchoolId +"/" ;

    window.open(url);  

  }

   

    

    

    

    }

  }).mount('#lunchApp')

 

</script>