dsite/frontend/src/components/recipe-mobile/week-recipe.vue

<template>
  <van-pull-refresh
    v-model="loading"
    @refresh="onRefresh"
    pulling-text="下拉重新生成每周菜谱"
    loosing-text="可以松手了..."
  >
    <div v-for:="(daily_recipe, recipe_index) in daily_recipes">
      <van-cell-group
        inset
        :title="formatDate(daily_recipe.date)"
        class="daily_recipes"
      >
        <van-swipe-cell>
          <van-row>
            <van-col span="3" class="recipe_type">
              <van-grid :column-num="1">
                <van-grid-item text="肉" class="recipe_type"></van-grid-item>
              </van-grid>
            </van-col>
            <van-col span="21">
              <van-grid :column-num="3" clickable>
                <van-grid-item
                  v-for:="recipe in daily_recipe.meat"
                  :text="recipe.name"
                  :to="{
                    name: 'RecipeMobileRecipeDetail',
                    params: { id: recipe.id },
                  }"
                />
                <van-grid-item
                  v-for="value in 3 - (daily_recipe.meat.length % 3)"
                  :key="value"
                />
              </van-grid>
            </van-col>
          </van-row>
          <van-row>
            <van-col span="3" class="recipe_type">
              <van-grid :column-num="1">
                <van-grid-item text="菜" class="recipe_type"></van-grid-item>
              </van-grid>
            </van-col>
            <van-col span="21">
              <van-grid :column-num="3" clickable>
                <van-grid-item
                  v-for:="recipe in daily_recipe.vegetable"
                  :text="recipe.name"
                  :to="{
                    name: 'RecipeMobileRecipeDetail',
                    params: { id: recipe.id },
                  }"
                />
                <van-grid-item
                  v-for="value in 3 - (daily_recipe.vegetable.length % 3)"
                  :key="value"
                />
              </van-grid>
            </van-col>
          </van-row>
          <van-row v-if="daily_recipe.soup.length > 0">
            <van-col span="3" class="recipe_type">
              <van-grid :column-num="1">
                <van-grid-item text="汤" class="recipe_type"></van-grid-item>
              </van-grid>
            </van-col>
            <van-col span="21">
              <van-grid :column-num="1" clickable>
                <van-grid-item
                  v-for:="recipe in daily_recipe.soup"
                  :text="recipe.name"
                  :to="{
                    name: 'RecipeMobileRecipeDetail',
                    params: { id: recipe.id },
                  }"
                />
              </van-grid>
            </van-col>
          </van-row>
          <template #right>
            <van-button
              square
              text="编辑"
              type="primary"
              class="action-button"
              :to="{
                name: 'RecipeMobileDailyRecipeDetail',
                params: { id: daily_recipe.id },
              }"
            />
            <van-button
              square
              text="刷新"
              type="danger"
              class="action-button"
              @click="reGenerateRecipe(daily_recipe.id, recipe_index)"
            />
          </template>
        </van-swipe-cell>
      </van-cell-group>
    </div>
  </van-pull-refresh>
</template>

<script>
import {
  Button,
  Cell,
  CellGroup,
  Col,
  Grid,
  GridItem,
  PullRefresh,
  Row,
  SwipeCell,
} from 'vant';
import axios from 'axios';
import config from '@/config/index';

export default {
  name: 'RecipeMobileWeekRecipe',
  components: {
    [Button.name]: Button,
    [Cell.name]: Cell,
    [CellGroup.name]: CellGroup,
    [Col.name]: Col,
    [Grid.name]: Grid,
    [GridItem.name]: GridItem,
    [PullRefresh.name]: PullRefresh,
    [Row.name]: Row,
    [SwipeCell.name]: SwipeCell,
  },
  data() {
    return {
      daily_recipes: [],
      loading: false,
    };
  },
  mounted() {
    this.getWeekRecipe(false);
  },
  methods: {
    formatDate(date) {
      if (date === undefined) {
        return;
      }
      var date_ = new Date(date * 1000);
      var days = ['周日', '周一', '周二', '周三', '周四', '周五', '周六'];
      return days[date_.getDay()];
    },
    onRefresh() {
      this.getWeekRecipe(true);
    },
    getWeekRecipe(regen) {
      if (regen) {
        axios
          .post(config.publicPath + '/recipe/week-recipe/')
          .then(
            (response) => (
              (this.daily_recipes = response.data), (this.loading = false)
            )
          );
      } else {
        axios
          .get(config.publicPath + '/recipe/week-recipe/')
          .then(
            (response) => (this.daily_recipes = response.data),
            (this.loading = false)
          );
      }
    },
    reGenerateRecipe(daily_recipe_id, recepe_index) {
      axios
        .post(config.publicPath + '/recipe/daily-recipe/' + daily_recipe_id)
        .then((response) =>
          this.daily_recipes.splice(recepe_index, 1, response.data)
        );
    },
  },
};
</script>

<style>
.recipe_type .van-grid-item__content {
  background-color: #f2f3f5;
}
.recipe_type {
  background-color: #f2f3f5;
}
.daily_recipes {
  margin-bottom: 10px;
}
.daily_recipes:last-child {
  margin-bottom: 40px;
}
.action-button {
  height: 100%;
  width: 50%;
}
</style>