feat(recipe edit page ): [A] 增加了编辑菜谱页面

[A] 增加了编辑菜谱页面

Signed-off-by: Ching <loooching@gmail.com>

frontend/src/components/recipe-mobile/recipe-edit.vue

@@ -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>

frontend/src/components/recipe-mobile/recipe-list.vue

@@ -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)

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

@@ -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>

frontend/src/router/index.js

@@ -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({

frontend/src/views/recipe-mobile/Home.vue

@@ -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>
 

frontend/src/views/recipe-mobile/RecipeCreate.vue

@@ -1,117 +1,20 @@
 <template>
-  <van-form @submit="onSubmit" class="recipe-create-form">
+  <recipe_edit />
-    <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>
   <tabbar />
 </template>
 
 <script>
 import tabbar from '@/components/recipe-mobile/tabbar.vue';
-import { Form, Field, CellGroup, Radio, RadioGroup, Rate, Button } from 'vant';
+import recipe_edit from '@/components/recipe-mobile/recipe-edit.vue';
-import axios from 'axios';
-import config from '@/config/index';
-import router from '@/router/index';
-import constants from '@/utils/constants.js';
 
 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 {
+    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' }))
-        );
-    },
   },
 };
 </script>
-
-<style>
-.recipe-create {
-  margin: 20px 16px;
-}
-</style>

frontend/src/views/recipe-mobile/RecipeDetail.vue

@@ -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>

frontend/src/views/recipe-mobile/WeekRecipe.vue

@@ -1,131 +1,20 @@
 <template>
-  <van-pull-refresh v-model="loading" @refresh="onRefresh">
+  <week_recipe />
-    <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>
   <tabbar />
 </template>
 
 <script>
 import tabbar from '@/components/recipe-mobile/tabbar.vue';
-import {
+import week_recipe from '@/components/recipe-mobile/week-recipe.vue';
-  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';
 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() {
+  data() {
-    return {
+    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;
-  /* font-size: var(--van-font-size-lg); */
-}
-.daily_recipes:last-child {
-  margin-bottom: 20px;
-}
-</style>