feat(week recipe page ): [A] 增加刷新每日菜单功能

[A] 增加刷新每日菜单功能

Signed-off-by: Ching <loooching@gmail.com>
This commit is contained in:
Ching 2021-10-07 13:52:23 +08:00
parent e308553490
commit d7a786f431
2 changed files with 132 additions and 86 deletions

View File

@ -97,7 +97,7 @@ export default {
}; };
}, },
mounted() { mounted() {
this.getDailyRecipy(), this.getDailyRecipe(),
axios axios
.get( .get(
config.publicPath + '/recipe/recipe/?recipe_type=meat&page_size=500' config.publicPath + '/recipe/recipe/?recipe_type=meat&page_size=500'
@ -119,7 +119,7 @@ export default {
.post( .post(
config.publicPath + '/recipe/daily-recipe/' + this.$route.params.id config.publicPath + '/recipe/daily-recipe/' + this.$route.params.id
) )
.then((response) => (response, this.getDailyRecipy())); .then((response) => (response, this.getDailyRecipe()));
}, },
submitRecipe() { submitRecipe() {
axios.put( axios.put(
@ -136,7 +136,7 @@ export default {
console.log(this.meat, this.vegetable, this.soup); console.log(this.meat, this.vegetable, this.soup);
this.disable_submit = false; this.disable_submit = false;
}, },
getDailyRecipy() { getDailyRecipe() {
axios axios
.get( .get(
config.publicPath + '/recipe/daily-recipe/' + this.$route.params.id config.publicPath + '/recipe/daily-recipe/' + this.$route.params.id

View File

@ -5,107 +5,132 @@
pulling-text="下拉重新生成每周菜谱" pulling-text="下拉重新生成每周菜谱"
loosing-text="可以松手了..." loosing-text="可以松手了..."
> >
<van-cell-group <div v-for:="(daily_recipe, recipe_index) in daily_recipes">
inset <van-cell-group
v-for:="daily_recipe in daily_recipes" inset
:title="formatDate(daily_recipe.date)" :title="formatDate(daily_recipe.date)"
class="daily_recipes" class="daily_recipes"
> >
<van-row> <van-swipe-cell>
<van-col span="3" class="recipe_type"> <van-row>
<van-grid :column-num="1"> <van-col span="3" class="recipe_type">
<van-grid-item text="肉" class="recipe_type"></van-grid-item> <van-grid :column-num="1">
</van-grid> <van-grid-item text="肉" class="recipe_type"></van-grid-item>
</van-col> </van-grid>
<van-col span="21"> </van-col>
<van-grid :column-num="3" clickable> <van-col span="21">
<van-grid-item <van-grid :column-num="3" clickable>
v-for:="recipe in daily_recipe.meat" <van-grid-item
:text="recipe.name" 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">
<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">
<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="{ :to="{
name: 'RecipeMobileRecipeDetail', name: 'RecipeMobileDailyRecipeDetail',
params: { id: recipe.id }, params: { id: daily_recipe.id },
}" }"
/> />
<van-grid-item <van-button
v-for="value in 3 - (daily_recipe.meat.length % 3)" square
:key="value" text="刷新"
type="danger"
class="action-button"
@click="reGenerateRecipe(daily_recipe.id, recipe_index)"
/> />
</van-grid> </template>
</van-col> </van-swipe-cell>
</van-row> </van-cell-group>
<van-row> </div>
<van-col span="3">
<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">
<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>
</van-cell-group>
</van-pull-refresh> </van-pull-refresh>
</template> </template>
<script> <script>
import { import {
Tag, Button,
Cell, Cell,
CellGroup, CellGroup,
Col, Col,
Row,
Button,
Grid, Grid,
GridItem, GridItem,
PullRefresh, PullRefresh,
Row,
SwipeCell,
Tag,
} from 'vant'; } from 'vant';
import axios from 'axios'; import axios from 'axios';
import config from '@/config/index'; import config from '@/config/index';
export default { export default {
name: 'RecipeMobileWeekRecipe', name: 'RecipeMobileWeekRecipe',
components: { components: {
[CellGroup.name]: CellGroup, [Button.name]: Button,
[Cell.name]: Cell, [Cell.name]: Cell,
[CellGroup.name]: CellGroup,
[Col.name]: Col, [Col.name]: Col,
[Row.name]: Row,
[Tag.name]: Tag,
[Grid.name]: Grid, [Grid.name]: Grid,
[GridItem.name]: GridItem, [GridItem.name]: GridItem,
[Button.name]: Button,
[PullRefresh.name]: PullRefresh, [PullRefresh.name]: PullRefresh,
[Row.name]: Row,
[SwipeCell.name]: SwipeCell,
[Tag.name]: Tag,
}, },
data() { data() {
return { return {
@ -114,9 +139,7 @@ export default {
}; };
}, },
mounted() { mounted() {
axios this.getWeekRecipe(false);
.get(config.publicPath + '/recipe/week-recipe/')
.then((response) => (this.daily_recipes = response.data));
}, },
methods: { methods: {
formatDate(date) { formatDate(date) {
@ -128,12 +151,31 @@ export default {
return days[date_.getDay()]; return days[date_.getDay()];
}, },
onRefresh() { 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 axios
.post(config.publicPath + '/recipe/week-recipe/') .post(config.publicPath + '/recipe/daily-recipe/' + daily_recipe_id)
.then( .then((response) =>
(response) => ( this.daily_recipes.splice(recepe_index, 1, response.data)
(this.daily_recipes = response.data), (this.loading = false)
)
); );
}, },
}, },
@ -153,4 +195,8 @@ export default {
.daily_recipes:last-child { .daily_recipes:last-child {
margin-bottom: 40px; margin-bottom: 40px;
} }
.action-button {
height: 100%;
width: 50%;
}
</style> </style>