食谱模板功能完成

stdiet-ui/src/views/custom/recipesBuild/RecommendView/RecommendView/index.vue

@@ -0,0 +1,8 @@
+<template>
+  <div>推荐列表</div>
+</template>
+<script>
+export default {
+  name: "TemplateView",
+};
+</script>

stdiet-ui/src/views/custom/recipesBuild/RecommendView/TemplateView/index.vue

@@ -0,0 +1,97 @@
+<template>
+  <div class="template_view_wrapper">
+    <div class="header">
+      <el-button size="mini" @click="handleOnBackClick">返回</el-button>
+    </div>
+    <div class="content">
+      <h2>选择模板</h2>
+      <el-table
+        v-loading="loading"
+        :data="dataList"
+        highlight-current-row
+        @current-change="handleCurrentChange"
+      >
+        <el-table-column label="模板名称" align="center" prop="name" />
+        <el-table-column label="营养师" align="center" prop="nutritionist" />
+        <el-table-column label="营养师助理" align="center" prop="nutriAssis" />
+        <el-table-column label="备注" prop="remark" align="center" />
+      </el-table>
+
+      <pagination
+        v-show="total > 0"
+        :total="total"
+        :page.sync="queryParams.pageNum"
+        :limit.sync="queryParams.pageSize"
+        @pagination="getList"
+      />
+    </div>
+  </div>
+</template>
+<script>
+import { listRecipesTemplate } from "@/api/custom/recipesTemplate";
+export default {
+  name: "TemplateView",
+  data() {
+    return {
+      loading: false,
+      dataList: [],
+      total: 0,
+      queryParams: {
+        pageNum: 1,
+        pageSize: 10,
+        reviewStatus: 2,
+      },
+    };
+  },
+  props: ["view"],
+  methods: {
+    handleOnBackClick() {
+      this.$emit("update:view", 0);
+      this.queryParams = {
+        pageNum: 1,
+        pageSize: 10,
+        reviewStatus: 2,
+      };
+    },
+    getList() {
+      this.loading = true;
+      listRecipesTemplate(this.queryParams).then((res) => {
+        if (res.code === 200) {
+          this.dataList = res.rows;
+          this.total = res.total;
+          this.loading = false;
+        }
+      });
+    },
+    handleCurrentChange(data) {
+      this.$emit("onSelect", data);
+      setTimeout(() => {
+        this.$emit("update:view", 0);
+      }, 500);
+    },
+  },
+  watch: {
+    view: function (val, oldVal) {
+      if (val === 1) {
+        this.getList();
+      }
+    },
+  },
+};
+</script>
+<style lang="scss" scoped>
+.template_view_wrapper {
+  height: 100%;
+
+  .header {
+    height: 32px;
+    display: flex;
+    justify-content: flex-end;
+    align-items: center;
+  }
+  .content {
+    height: calc(100% - 32px);
+    padding-top: 12px;
+  }
+}
+</style>

stdiet-ui/src/views/custom/recipesBuild/RecommendView/index.vue

@@ -0,0 +1,90 @@
+
+<template>
+  <div class="recommend_view_wrapper">
+    <div class="selector_view" v-if="curView === 0">
+      <div class="card_content" @click="handleOnClick(1)">
+        <em class="el-icon-brush" />
+        <span>模板</span>
+      </div>
+      <div class="card_content" @click="handleOnClick(2)" v-if="false">
+        <em class="el-icon-star-off" />
+        <span>推荐</span>
+      </div>
+    </div>
+
+    <TemplateView :view.sync="curView" @onSelect="handleOnSelect" />
+  </div>
+</template>
+<script>
+import { createNamespacedHelpers } from "vuex";
+import TemplateView from "./TemplateView";
+import RecommendView from "./RecommendView";
+const {
+  mapActions,
+  mapState,
+  mapMutations,
+  mapGetters,
+} = createNamespacedHelpers("recipes");
+export default {
+  name: "RecommondView",
+  components: {
+    RecommendView,
+    TemplateView,
+  },
+  data() {
+    return {
+      curView: 0,
+    };
+  },
+  methods: {
+    handleOnClick(type) {
+      this.curView = type;
+    },
+    handleOnSelect(data) {
+      const { recipesId } = data;
+      this.getRecipesInfo({ recipesId });
+    },
+    ...mapActions(["getRecipesInfo"]),
+  },
+};
+</script>
+<style lang="scss" scoped>
+.recommend_view_wrapper {
+  height: 100%;
+  width: 100%;
+  .selector_view {
+    height: 100%;
+    width: 100%;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+
+    .card_content {
+      cursor: pointer;
+      margin: 6px;
+      padding: 100px 80px;
+      border: 3px solid #e6ebf5;
+      border-radius: 6px;
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      justify-content: center;
+      font-weight: bold;
+
+      & > em {
+        font-size: 48px;
+      }
+
+      & > span {
+        margin-top: 12px;
+        font-size: 32px;
+      }
+
+      &:hover {
+        border-color: #409eff;
+        color: #1890ff;
+      }
+    }
+  }
+}
+</style>