feat(recipe edit page ): [A] 增加了编辑菜谱页面
[A] 增加了编辑菜谱页面 Signed-off-by: Ching <loooching@gmail.com>
This commit is contained in:
Ching
parent
97f7345aa6
commit
e308553490
131
frontend/src/components/recipe-mobile/recipe-edit.vue
Normal file
131
frontend/src/components/recipe-mobile/recipe-edit.vue
Normal file
@ -0,0 +1,131 @@
|
||||
<template>
|
||||
<van-form @submit="onSubmit(recipe_id)" class="recipe-create-form">
|
||||
<van-cell-group class="recipe-create" inset border>
|
||||
<van-field
|
||||
v-model="form.name"
|
||||
name="name"
|
||||
label="菜名"
|
||||
placehoder="鱼香茄子..."
|
||||
:rules="[{ required: true, message: '请填写菜名' }]"
|
||||
/>
|
||||
<van-field name="reicpe_type" label="类型">
|
||||
<template #input>
|
||||
<van-radio-group v-model="form.recipe_type" direction="horizontal">
|
||||
<van-radio name="meat" shape="square">肉</van-radio>
|
||||
<van-radio name="vegetable" shape="square">菜</van-radio>
|
||||
<van-radio name="soup" shape="square">汤</van-radio>
|
||||
</van-radio-group>
|
||||
</template>
|
||||
</van-field>
|
||||
<van-field name="rate" label="评分">
|
||||
<template #input>
|
||||
<van-rate
|
||||
v-model="form.rate"
|
||||
void-icon="like-o"
|
||||
icon="like"
|
||||
></van-rate>
|
||||
</template>
|
||||
</van-field>
|
||||
<van-field name="difficulty" label="难度">
|
||||
<template #input>
|
||||
<van-rate v-model="form.difficulty" color="#ffd21e"></van-rate>
|
||||
</template>
|
||||
</van-field>
|
||||
</van-cell-group>
|
||||
|
||||
<van-cell-group class="recipe-create" inset border>
|
||||
<van-field
|
||||
v-model="form.note"
|
||||
rows="2"
|
||||
auto-size
|
||||
label="备注"
|
||||
type="textarea"
|
||||
/>
|
||||
</van-cell-group>
|
||||
<div class="recipe-create">
|
||||
<van-button
|
||||
round
|
||||
type="primary"
|
||||
block
|
||||
plain
|
||||
@click="onSubmit(recipe_id)"
|
||||
:loading="loading"
|
||||
>提交</van-button
|
||||
>
|
||||
</div>
|
||||
</van-form>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { Form, Field, CellGroup, Radio, RadioGroup, Rate, Button } from 'vant';
|
||||
import axios from 'axios';
|
||||
import config from '@/config/index';
|
||||
import router from '@/router/index';
|
||||
import constants from '@/utils/constants.js';
|
||||
|
||||
export default {
|
||||
props: ['recipe_'],
|
||||
watch: {
|
||||
recipe_(val) {
|
||||
this.form = val;
|
||||
this.recipe_id = val.id;
|
||||
},
|
||||
},
|
||||
components: {
|
||||
[Form.name]: Form,
|
||||
[Field.name]: Field,
|
||||
[CellGroup.name]: CellGroup,
|
||||
[Radio.name]: Radio,
|
||||
[RadioGroup.name]: RadioGroup,
|
||||
[Rate.name]: Rate,
|
||||
[Button.name]: Button,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
form: {
|
||||
name: null,
|
||||
recipe_type: null,
|
||||
rate: 0,
|
||||
difficulty: 0,
|
||||
note: null,
|
||||
},
|
||||
loading: false,
|
||||
recipe_id: null,
|
||||
};
|
||||
},
|
||||
mounted() {},
|
||||
methods: {
|
||||
onSubmit(recipe_id) {
|
||||
if (!this.form.name) {
|
||||
return;
|
||||
}
|
||||
this.loading = true;
|
||||
let data = {
|
||||
name: this.form.name,
|
||||
recipe_type: this.form.recipe_type
|
||||
? this.form.recipe_type
|
||||
: constants.RECIPE_TYPE_META,
|
||||
difficulty: this.form.difficulty ? this.form.difficulty : 1,
|
||||
rate: this.form.rate ? this.form.rate : 1,
|
||||
note: this.form.note ? this.form.note : null,
|
||||
};
|
||||
if (!recipe_id) {
|
||||
axios
|
||||
.post(config.publicPath + '/recipe/recipe/', data)
|
||||
.then(
|
||||
(response) => (response, router.push({ name: 'RecipeMobileHome' }))
|
||||
);
|
||||
} else {
|
||||
axios
|
||||
.put(config.publicPath + '/recipe/recipe/' + recipe_id, data)
|
||||
.then((this.loading = false));
|
||||
}
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
<style>
|
||||
.recipe-create {
|
||||
margin: 20px 16px;
|
||||
}
|
||||
</style>
|
||||
@ -6,7 +6,16 @@
|
||||
@load="onLoad"
|
||||
class="recipe-list"
|
||||
>
|
||||
<van-cell center v-for:="recipe in recipes" size="large" clickable>
|
||||
<van-cell
|
||||
center
|
||||
v-for:="recipe in recipes"
|
||||
size="large"
|
||||
clickable
|
||||
:to="{
|
||||
name: 'RecipeMobileRecipeDetail',
|
||||
params: { id: recipe.id },
|
||||
}"
|
||||
>
|
||||
<template #title>
|
||||
<van-tag class="recipe-type-tag" plain type="primary">{{
|
||||
constants.formatRecipeType(recipe.recipe_type)
|
||||
|
||||
156
frontend/src/components/recipe-mobile/week-recipe.vue
Normal file
156
frontend/src/components/recipe-mobile/week-recipe.vue
Normal file
@ -0,0 +1,156 @@
|
||||
<template>
|
||||
<van-pull-refresh
|
||||
v-model="loading"
|
||||
@refresh="onRefresh"
|
||||
pulling-text="下拉重新生成每周菜谱"
|
||||
loosing-text="可以松手了..."
|
||||
>
|
||||
<van-cell-group
|
||||
inset
|
||||
v-for:="daily_recipe in daily_recipes"
|
||||
:title="formatDate(daily_recipe.date)"
|
||||
class="daily_recipes"
|
||||
>
|
||||
<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">
|
||||
<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>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {
|
||||
Tag,
|
||||
Cell,
|
||||
CellGroup,
|
||||
Col,
|
||||
Row,
|
||||
Button,
|
||||
Grid,
|
||||
GridItem,
|
||||
PullRefresh,
|
||||
} from 'vant';
|
||||
import axios from 'axios';
|
||||
import config from '@/config/index';
|
||||
export default {
|
||||
name: 'RecipeMobileWeekRecipe',
|
||||
components: {
|
||||
[CellGroup.name]: CellGroup,
|
||||
[Cell.name]: Cell,
|
||||
[Col.name]: Col,
|
||||
[Row.name]: Row,
|
||||
[Tag.name]: Tag,
|
||||
[Grid.name]: Grid,
|
||||
[GridItem.name]: GridItem,
|
||||
[Button.name]: Button,
|
||||
[PullRefresh.name]: PullRefresh,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
daily_recipes: [],
|
||||
loading: false,
|
||||
};
|
||||
},
|
||||
mounted() {
|
||||
axios
|
||||
.get(config.publicPath + '/recipe/week-recipe/')
|
||||
.then((response) => (this.daily_recipes = response.data));
|
||||
},
|
||||
methods: {
|
||||
formatDate(date) {
|
||||
if (date === undefined) {
|
||||
return;
|
||||
}
|
||||
var date_ = new Date(date * 1000);
|
||||
var days = ['周日', '周一', '周二', '周三', '周四', '周五', '周六'];
|
||||
return days[date_.getDay()];
|
||||
},
|
||||
onRefresh() {
|
||||
axios
|
||||
.post(config.publicPath + '/recipe/week-recipe/')
|
||||
.then(
|
||||
(response) => (
|
||||
(this.daily_recipes = response.data), (this.loading = false)
|
||||
)
|
||||
);
|
||||
},
|
||||
},
|
||||
};
|
||||
</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;
|
||||
}
|
||||
</style>
|
||||
@ -6,6 +6,7 @@ import DailyRecipeDetail from '@/views/dailyRecipeDetail.vue'
|
||||
import RecipeMobileHome from '@/views/recipe-mobile/Home.vue'
|
||||
import RecipeMobileRecipeCreate from '@/views/recipe-mobile/RecipeCreate.vue'
|
||||
import RecipeMobileWeekRecipe from '@/views/recipe-mobile/WeekRecipe.vue'
|
||||
import RecipeMobileRecipeDetail from '@/views/recipe-mobile/RecipeDetail.vue'
|
||||
|
||||
const routes = [
|
||||
{
|
||||
@ -45,6 +46,11 @@ const routes = [
|
||||
name: "RecipeMobileWeekRecipe",
|
||||
component: RecipeMobileWeekRecipe
|
||||
},
|
||||
{
|
||||
path: '/recipe-mobile/recipe/:id',
|
||||
name: "RecipeMobileRecipeDetail",
|
||||
component: RecipeMobileRecipeDetail
|
||||
},
|
||||
];
|
||||
|
||||
const router = createRouter({
|
||||
|
||||
@ -1,10 +1,9 @@
|
||||
1<template>
|
||||
<template>
|
||||
<recipe_list />
|
||||
<tabbar />
|
||||
</template>
|
||||
|
||||
<script>
|
||||
// import { Tabbar, TabbarItem } from 'vant';
|
||||
import recipe_list from '@/components/recipe-mobile/recipe-list.vue';
|
||||
import tabbar from '@/components/recipe-mobile/tabbar.vue';
|
||||
|
||||
@ -17,8 +16,6 @@ export default {
|
||||
data: function() {
|
||||
return {};
|
||||
},
|
||||
mounted() {},
|
||||
methods: {},
|
||||
};
|
||||
</script>
|
||||
|
||||
|
||||
@ -1,117 +1,20 @@
|
||||
<template>
|
||||
<van-form @submit="onSubmit" class="recipe-create-form">
|
||||
<van-cell-group class="recipe-create" inset border>
|
||||
<van-field
|
||||
v-model="name"
|
||||
name="name"
|
||||
label="菜名"
|
||||
placehoder="鱼香茄子..."
|
||||
:rules="[{ required: true, message: '请填写菜名' }]"
|
||||
/>
|
||||
<van-field name="reicpe_type" label="类型">
|
||||
<template #input>
|
||||
<van-radio-group v-model="recipe_type" direction="horizontal">
|
||||
<van-radio name="meat" shape="square">肉</van-radio>
|
||||
<van-radio name="vegetable" shape="square">菜</van-radio>
|
||||
<van-radio name="soup" shape="square">汤</van-radio>
|
||||
</van-radio-group>
|
||||
</template>
|
||||
</van-field>
|
||||
<van-field name="rate" label="评分">
|
||||
<template #input>
|
||||
<van-rate v-model="rate" void-icon="like-o" icon="like"></van-rate>
|
||||
</template>
|
||||
</van-field>
|
||||
<van-field name="difficulty" label="难度">
|
||||
<template #input>
|
||||
<van-rate v-model="difficulty" color="#ffd21e"></van-rate>
|
||||
</template>
|
||||
</van-field>
|
||||
</van-cell-group>
|
||||
|
||||
<van-cell-group class="recipe-create" inset border>
|
||||
<van-field
|
||||
v-model="note"
|
||||
rows="2"
|
||||
auto-size
|
||||
label="备注"
|
||||
type="textarea"
|
||||
/>
|
||||
</van-cell-group>
|
||||
<div class="recipe-create">
|
||||
<van-button
|
||||
round
|
||||
type="primary"
|
||||
block
|
||||
plain
|
||||
@click="onSubmit"
|
||||
:loading="loading"
|
||||
>提交</van-button
|
||||
>
|
||||
</div>
|
||||
</van-form>
|
||||
<recipe_edit />
|
||||
<tabbar />
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import tabbar from '@/components/recipe-mobile/tabbar.vue';
|
||||
import { Form, Field, CellGroup, Radio, RadioGroup, Rate, Button } from 'vant';
|
||||
import axios from 'axios';
|
||||
import config from '@/config/index';
|
||||
import router from '@/router/index';
|
||||
import constants from '@/utils/constants.js';
|
||||
import recipe_edit from '@/components/recipe-mobile/recipe-edit.vue';
|
||||
|
||||
export default {
|
||||
name: 'RecipeMobileRecipeCreate',
|
||||
components: {
|
||||
[Form.name]: Form,
|
||||
[Field.name]: Field,
|
||||
[CellGroup.name]: CellGroup,
|
||||
[Radio.name]: Radio,
|
||||
[RadioGroup.name]: RadioGroup,
|
||||
[Rate.name]: Rate,
|
||||
[Button.name]: Button,
|
||||
tabbar,
|
||||
recipe_edit,
|
||||
},
|
||||
data: function() {
|
||||
return {
|
||||
name: null,
|
||||
recipe_type: null,
|
||||
rate: 0,
|
||||
difficulty: 0,
|
||||
note: null,
|
||||
loading: false,
|
||||
};
|
||||
},
|
||||
mounted() {},
|
||||
methods: {
|
||||
onSubmit() {
|
||||
if (!this.name) {
|
||||
return;
|
||||
}
|
||||
this.loading = true;
|
||||
|
||||
let data = {
|
||||
name: this.name,
|
||||
recipe_type: this.recipe_type
|
||||
? this.recipe_type
|
||||
: constants.RECIPE_TYPE_META,
|
||||
difficulty: this.difficulty ? this.difficulty : 1,
|
||||
rate: this.rate ? this.rate : 1,
|
||||
note: this.note ? this.note : null,
|
||||
};
|
||||
axios
|
||||
.post(config.publicPath + '/recipe/recipe/', data)
|
||||
.then(
|
||||
(response) => (response, router.push({ name: 'RecipeMobileHome' }))
|
||||
);
|
||||
},
|
||||
return {};
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.recipe-create {
|
||||
margin: 20px 16px;
|
||||
}
|
||||
</style>
|
||||
|
||||
28
frontend/src/views/recipe-mobile/RecipeDetail.vue
Normal file
28
frontend/src/views/recipe-mobile/RecipeDetail.vue
Normal file
@ -0,0 +1,28 @@
|
||||
<template>
|
||||
<recipe_edit :recipe-id="recipe.id" :recipe_="recipe" />
|
||||
<tabbar />
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import axios from 'axios';
|
||||
import recipe_edit from '@/components/recipe-mobile/recipe-edit.vue';
|
||||
import config from '@/config/index';
|
||||
import tabbar from '@/components/recipe-mobile/tabbar.vue';
|
||||
|
||||
export default {
|
||||
components: {
|
||||
recipe_edit,
|
||||
tabbar,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
recipe: {},
|
||||
};
|
||||
},
|
||||
mounted() {
|
||||
axios
|
||||
.get(config.publicPath + '/recipe/recipe/' + this.$route.params.id)
|
||||
.then((response) => (this.recipe = response.data));
|
||||
},
|
||||
};
|
||||
</script>
|
||||
@ -1,131 +1,20 @@
|
||||
<template>
|
||||
<van-pull-refresh v-model="loading" @refresh="onRefresh">
|
||||
<van-cell-group
|
||||
inset
|
||||
v-for:="daily_recipe in daily_recipes"
|
||||
:title="formatDate(daily_recipe.date)"
|
||||
class="daily_recipes"
|
||||
>
|
||||
<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">
|
||||
<van-grid-item
|
||||
v-for:="recipe in daily_recipe.meat"
|
||||
:text="recipe.name"
|
||||
/>
|
||||
</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">
|
||||
<van-grid-item
|
||||
v-for:="recipe in daily_recipe.vegetable"
|
||||
:text="recipe.name"
|
||||
/>
|
||||
</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">
|
||||
<van-grid-item
|
||||
v-for:="recipe in daily_recipe.soup"
|
||||
:text="recipe.name"
|
||||
/>
|
||||
</van-grid>
|
||||
</van-col>
|
||||
</van-row>
|
||||
</van-cell-group>
|
||||
</van-pull-refresh>
|
||||
<week_recipe />
|
||||
<tabbar />
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import tabbar from '@/components/recipe-mobile/tabbar.vue';
|
||||
import {
|
||||
Tag,
|
||||
Cell,
|
||||
CellGroup,
|
||||
Col,
|
||||
Row,
|
||||
Button,
|
||||
Grid,
|
||||
GridItem,
|
||||
PullRefresh,
|
||||
} from 'vant';
|
||||
import axios from 'axios';
|
||||
import config from '@/config/index';
|
||||
// import router from '@/router/index';
|
||||
// import constants from '@/utils/constants.js';
|
||||
import week_recipe from '@/components/recipe-mobile/week-recipe.vue';
|
||||
|
||||
export default {
|
||||
name: 'RecipeMobileWeekRecipe',
|
||||
components: {
|
||||
[CellGroup.name]: CellGroup,
|
||||
[Cell.name]: Cell,
|
||||
[Col.name]: Col,
|
||||
[Row.name]: Row,
|
||||
[Tag.name]: Tag,
|
||||
[Grid.name]: Grid,
|
||||
[GridItem.name]: GridItem,
|
||||
[Button.name]: Button,
|
||||
[PullRefresh.name]: PullRefresh,
|
||||
tabbar,
|
||||
week_recipe,
|
||||
},
|
||||
data: function() {
|
||||
return {
|
||||
daily_recipes: [],
|
||||
loading: false,
|
||||
};
|
||||
},
|
||||
mounted() {
|
||||
axios
|
||||
.get(config.publicPath + '/recipe/week-recipe/')
|
||||
.then((response) => (this.daily_recipes = response.data));
|
||||
},
|
||||
methods: {
|
||||
formatDate(date) {
|
||||
if (date === undefined) {
|
||||
return;
|
||||
}
|
||||
var date_ = new Date(date * 1000);
|
||||
var days = ['周日', '周一', '周二', '周三', '周四', '周五', '周六'];
|
||||
return days[date_.getDay()];
|
||||
},
|
||||
onRefresh() {
|
||||
axios
|
||||
.post(config.publicPath + '/recipe/week-recipe/')
|
||||
.then(
|
||||
(response) => (
|
||||
(this.daily_recipes = response.data), (this.loading = false)
|
||||
)
|
||||
);
|
||||
},
|
||||
data() {
|
||||
return {};
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.recipe_type .van-grid-item__content {
|
||||
background-color: #f2f3f5;
|
||||
/* font-size: var(--van-font-size-lg); */
|
||||
}
|
||||
.daily_recipes:last-child {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
</style>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user