美食杰-菜谱分类

菜谱分类

代码效果图片

代码

想要实现上图效果，需要在router中index.js加上

import create from '@/views/create/create.vue'
{
    path:'/create',
    name:'create',
    title:'菜谱大全',
    component:create
}

在script中的代码

<script>
import Stuff from './stuff'
import Upload from './step-upload'
import UploadImg from '@/components/upload-img'
import {getProperty, getClassify, publish} from '@/service/api'

const raw_material_struct = {
  name:"",specs:""
}

export default {
  name: 'create',
  components: {Stuff,Upload,UploadImg},
  data(){
    return {
    }
  },
  mounted(){
  },
  methods:{
  }
}
</script>

css的代码

<style lang="stylus">
.create-introduce 
  background-color #fff
  padding 20px

  .add-step-button
    margin-left 100px

.create
  width 100%
  h2
    text-align center
    margin 20px 0
  .send
    // ff3232()
    height: 70px;
    width: 220px;
    background #ff3232
    color #fff
    border none
    margin 20px auto
    display block
  h5 
    margin 20px 0
.create-input input
  width 446px
  line-height 22px
.upload-img-box 
  .upload-img
    float left
  .introduce-text
    float left
  .el-textarea
    width 60%
    margin-left 10px
</style>

create文件夹

在create.vue中可以实现标题、属性、菜谱分类、成品图、记录所有原材料的效果

标题

templete
<h5>标题</h5>
<el-input v-model="backData.title" class="create-input" placeholder="请输入内容"></el-input>

在script中
data(){
    return {
      backData:{
        title:'',
      }
    }
}

属性

<h5>属性</h5>
<div>
  <el-select
  v-for="item in propertyies"
  :key="item.parent_type"
  :placeholder="item.parent_name"
  v-model="backData.property[item.title]"
  >
    <el-option
    v-for="option in item.list"
    :key="option.type"
    :label="option.name"
    :value="option.type"
    >
    </el-option>
  </el-select>
</div>

在script中的代码
data(){
    return {
      backData:{
        property:{
          // craft: "", //工艺
          // flavor: "",  //口味
          // hard: "",    //难度
          // perpole: "", //人数
        },
     },
     propertyies:[]
   }
}，
mounted(){
	getProperty().then(({data})=>{
      
      this.propertyies = data;
      this.backData.property = data.reduce((o,item)=>{
        o[item.title] = '';
        return o;
      },{})
      // console.log(data);
      // console.log(this.backData.property);
    });
}

菜谱分类

templete
<h5>菜谱分类</h5>
<div>
  <el-select placeholder="请选择菜谱分类" v-model="backData.classify">
    <el-option-group
      v-for="group in classifyies"
      :key="group.parent_type"
      :label="group.parent_name"
    >
      <el-option
      v-for="item in group.list"
      :key="item.type"
      :label="item.name"
      :value="item.type"
        >
      </el-option>
    </el-option-group>
  </el-select>
</div>
在script中
data(){
	return {
		backData:{
			classify:""
		},
      	classifyies:[]
	}
},
mounted(){
	getClassify().then(({data})=>{
      console.log(data);
      this.classifyies = data;
    })
}