header.vue

            <router-link to="/create" class="collection">发布菜谱</router-link>

create.vue

<template><div class="create"><h2>欢迎发布新菜谱，先介绍一下你的大作！</h2><section class="create-introduce"><h5>标题</h5>{{backData.title}}<el-input class="create-input" placeholder="请输入内容" v-model="backData.title"></el-input><h5>属性</h5><div><el-selectv-for="item in properties":key="item.parent_type":placeholder="item.parent_name"v-model="backData.property[item.title]"><el-optionv-for="option in item.list":key="option.type":label="option.name":value="option.type"></el-option></el-select></div><h5>菜谱分类</h5><div><el-select placeholder="请选择菜谱分类" v-model="backData.classify"><el-option-groupv-for="group in classifies":key="group.parent_type":label="group.parent_name"><el-optionv-for="item in group.list":key="item.type":label="item.name":value="item.type"></el-option></el-option-group></el-select></div><h5>成品图 (328*440)</h5><div class="upload-img-box clearfix"><div class="upload-img"><upload-imgaction="/api/upload?type=product":image-url="backData.product_pic_url"@res-url="(data) => {backData.product_pic_url = data.resImgUrl}"></upload-img></div><el-inputclass="introduce-text"type="textarea":rows="10"placeholder="请输入内容"v-model="backData.product_story"></el-input></div></section><h2>记录所有原材料</h2><section class="create-introduce"><h5>主料</h5><!--[ { "name": "", "specs": "" }, { "name": "", "specs": "" }, { "name": "", "specs": "" } ]--><Stuff v-model="backData.raw_material.main_material"></Stuff><h5>辅料</h5><Stuff v-model="backData.raw_material.accessories_material"></Stuff></section><h2>开始写步骤了！能否简单易学就看你怎么写了，加油！</h2><section class="create-introduce"><Upload v-for="(item,index) in backData.steps" :key="item.customeId":n="index+1"v-model="backData.steps[index]"@remove="removeStep"></Upload><el-button class="eaeaea add-step-button" type="primary" size="medium" icon="el-icon-plus"@click="addStep">增加一步</el-button><h5>烹饪小技巧</h5><el-inputclass="introduce-text"type="textarea":rows="8"placeholder="分享下你做这道菜的过程中的心得和小技巧吧！"v-model="backData.skill"></el-input></section><el-button class="send" type="primary" size="medium" :icon="icon"@click="send">搞定，提交审核</el-button></div>
</template>
<script>
import Stuff from './stuff'
import Upload from './step-upload'
import UploadImg from '@/components/upload-img'
import {getProperty, getClassify, publish} from '@/service/api'
// 向后端发送的数据结构
const backData = {title: '',  // 标题product_pic_url: '', // 成品图URLproduct_story: '', // 成品图故事property: {craft: 0,  // 工艺 enum: [1,2,3,4],flavor: 0,  // 口味  enum: [1,2,3,4],hard: 0,   // 难度 enum: [1,2,3,4],pepole: 0  // pepole 人数: [1,2,3,4],},  // 属性raw_material: { // 料main_material: [{name: '',specs: ''}], // 主料accessories_material: [{name: '',specs: ''}], // 辅料},steps: [{img_url: '',describe: '',}], // 步骤classify: '', // 菜谱分类skill: '',
}
// 用料的数据结构
const raw_material_struct = {name: '',specs: ''
}
// 步骤中， 每一步的数据结构
const steps_struct = {img_url: '',describe: '',}
// 步骤中，存储序号
let n = 1;
export default {name: 'create',components: {Stuff,Upload,UploadImg},data(){return {properties: [],  // 页面展示的数据classifies: [], icon: '',backData: {// 标题title: "",// 属性property: {craft: "", // 工艺 enum: [1,2,3,4],flavor: "", // 口味  enum: [1,2,3,4],hard: "", // 难度 enum: [1,2,3,4],people: "", // pepole 人数: [1,2,3,4],},// 菜谱分类classify: "",// 成品图URLproduct_pic_url:"https://s1.c.meishij.net/n/images/upload_big_img.png?_=1561906961",// 成品图故事product_story: "",// 料raw_material: {main_material: [{ name: "", specs: "" }], // 主料accessories_material: [{ name: "", specs: "" }], // 辅料},// 步骤  { img_url: "", describe: "" }steps: Array(3).fill(1).map(() => ({ ...steps_struct, customeId: this.uuid() })),skill: "",},icon: "",}}},mounted(){getProperty().then(({data}) => {this.properties = data;this.backData.property = data.reduce((o,item) => {o[item.title] = '';return o;},{});})getClassify().then(({data}) => {console.log(data);this.classifies = data;})},methods:{uuid(){n++;return Date.now() + n;},addStep(){this.backData.steps.push({...steps_struct,customeId: this.uuid()})},removeStep(index){this.backData.steps.splice(index-1, 1);},send(){this.icon = 'el-icon-loading';let param = this.backData;// 验证// 删除字段 删除字段后，当前页面需要用到这个字段的地方可能会有问题// 提取出需要的字段param.steps = param.steps.map((item) => {return {img_url: item.img_url,describe: item.describe,}})// 1. 测试过程中不跳转，手动去打开指定的跳转的页面去看数据对不对// 2. mock数据，模拟一套数据，预先准备一套//console.log(JSON.stringify(param, null, 2)); 这个2 看懵了吧？ 这是转字符串输出， 2个间距，有空多看看基础吧publish(param).then((data) => {console.log(data);this.$router.push({name: 'space'})})}}
}
</script>
<style lang="stylus">.create-introduce background-color #fffpadding 20px.add-step-buttonmargin-left 100px.createwidth 100%h2text-align centermargin 20px 0.send// ff3232()height: 70px;width: 220px;background #ff3232color #fffborder nonemargin 20px autodisplay blockh5 margin 20px 0.create-input inputwidth 446pxline-height 22px
.upload-img-box .upload-imgfloat left.introduce-textfloat left.el-textareawidth 60%margin-left 10px
</style>

stuff.vue

<template><div class="stuff"><div class="clearfix"><div class="raw-item" v-for="(item, index) in value" :key="index"><el-inputplaceholder="请输入内容"v-model="item.name"style="width: 200px"></el-input><el-inputplaceholder="请输入内容"v-model="item.specs"style="width: 100px"></el-input><i class="delete-icon el-icon-close" v-show="value.length!=1" @click="deletes(index)"></i></div></div><el-button class="eaeaea" @click="medium" type="primary" size="medium" icon="el-icon-plus">增加一项</el-button></div>
</template>
<script>
// v-model 在组件上面双向绑定 value 发布事件input
export default {props: {value: {type: Array,default: () => [],},},methods: {deletes(i){this.value.splice(i,1)this.$emit("input",[...this.value])},medium(){this.$emit("input",[...this.value,{ name: "", specs: "" }])}},
};
</script>
<style lang="stylus">
.delete-iconbackground-color #cccborder-radius 50%color #fff:hoverbackground: #ff3232;color: #fff;
.raw-itemfloat leftmargin-right 65pxmargin-bottom 20px.el-inputmargin-right 5px
</style>

step-upload.vue

<template><div class="step clearfix"><div class="step-number">{{ index }}.</div><div class="upload-box"><upload-img:img-max-width="184"action="/api/upload?type=product":imageUrl="info.img_url?info.img_url:'https://s1.c.meishij.net/n/images/upload_big_img.png?_=1561906961'"@imageUrl="(data) => {info.img_url = data.resImgUrl;}"></upload-img></div><el-inputclass="introduce-text"type="textarea":rows="8"v-model="info.describe"placeholder="请输入内容"></el-input><i class="delete-icon el-icon-close" v-show="length != 1" @click="icon(index)"></i></div>
</template>
<script>
import UploadImg from "@/components/upload-img";
export default {components: { UploadImg },imageUrl: "https://s1.c.meishij.net/n/images/upload_step_img.png",props: {info: {type: Object,default: () => [],},index: {type: Number,default: 1,},length: {type: Number,default: 0,},},methods: {icon(i) {// console.log(i-1);this.$emit("input", i);},},
};
</script><style lang="stylus">
.stepmargin-bottom 20px> divfloat left.step-numberheight 180pxwidth 100pxfont-size 60pxcolor #aaafont-family Arial, Helvetica, sans-seriffont-weight boldvertical-align topline-height 180px.introduce-textwidth 60%margin-left 40px.upload-boximgvertical-align top
</style>

upload-img.vue

  <el-uploadclass="avatar-uploader":action="action":show-file-list="false":on-success="handleAvatarSuccess":before-upload="beforeAvatarUpload"><img :src="url"  :style="{ width: imgMaxWidth + 'px' }"/></el-upload>
</template>
<script>
export default {props: {action: String,imageUrl: {type: String,},imgMaxWidth:{type:  [Number, String],default:"210"}},data() {return {url: this.imageUrl,};},methods: {handleAvatarSuccess(res, file) {console.log("avatarSuccess",res, file);if (res.code === 1) {this.$message({message: res.mes,type: "watning",});return;}this.url = URL.createObjectURL(file.raw);this.$emit("imageUrl",{resImgUrl:this.url})},beforeAvatarUpload(file) {console.log(file, "beforeAvatarUpload");const isJPG = file.type === "image/jpeg" ;const isLt2M = file.size / 1024 / 1024 < 2;if (!isJPG) {this.$message.error("上传头像图片只能是 JPG 格式!");}if (!isLt2M) {this.$message.error("上传头像图片大小不能超过 2MB!");}return isJPG && isLt2M;},},
};
</script>

vue 美食杰发布菜谱相关推荐

vue项目美食杰 -- 发布菜谱
不知不觉间,vue美食杰项目已经实现了很多了,我都有点始料未及呢,今天进行的部分呢,是项目中的发布菜谱功能,在这个页面中,我们会学习到前后端的交互,Element-ui的使用等等... 先看下效果图: ...
VUE——超详细的美食杰项目—菜谱详情
VUE--超详细的美食杰项目-菜谱详情效果介绍 detail.vue detail-header.vue detail-content.vue comment.vue 效果介绍实现页面数据渲染,还 ...
vue——超详细的美食杰项目—菜谱大全
vue--超详细的美食杰项目-菜谱大全效果介绍 1.家常菜谱Tab切换: 2.筛选: 效果介绍下面我们实现的效果就是图一中的.点击'家常菜谱'下的其中一项时背景颜色改变并向路由中显示参数.在点击' ...
美食杰项目----菜谱大全
美食杰项目----菜谱大全实现效果介绍: 点击菜谱tab切换,类似于一个二级菜单当他点击家常菜切换颜色,当它刷新的时候颜色不会掉点击工艺,口味切换,也类似于一个二级菜单当点击"炒&q ...
美食杰-发布菜单（完整版）
一,效果展示二,效果概要 1.获取数据 2.数据渲染 3.赋值数据 4.点击提交审核三,技术掌握 1.熟悉element组件库 2.掌握vue-cli脚手架 3.掌握vue-router路由 4. ...
美食杰项目 -- 菜谱大全（二）
目录前言: 具体实现思路: 步骤: 1. 展示美食杰菜谱大全效果 2. 引入element-ui 3. 代码总结: 前言: 本文给大家讲解,美食杰项目中菜谱大全实现的效果,和具体代码. 具体实现思 ...
vue美食杰个人空间
文章目录效果图在这里插入图片描述 router文件下的index.js space.vue MenuList fans 如果一直报这个效果图 router文件下的index.js import ...
vue美食杰项目之菜谱大全实现效果（一）
目录 recipe.vue 注意:因为用到了element-ui组件,所以需要先安装element-ui组件,进入项目根目录后执行 npm i element-ui 思路: 1.找到对应的组件进行数 ...
Vue美食杰项目个人主页
条件: 登录自己的个人主页(可以不需要传入id) 登录他人的个人主页(需要传入id) 登录自己的个人空间时,只需要路由跳转到指定的个人空间的页面,数据拿vuex中的数据即可,因为之前在router的i ...

vue 美食杰发布菜谱

文章目录

header.vue

create.vue

stuff.vue

step-upload.vue

upload-img.vue

vue 美食杰发布菜谱相关推荐

最新文章

热门文章

vue 美食杰 发布菜谱

文章目录

header.vue

create.vue

stuff.vue

step-upload.vue

upload-img.vue

vue 美食杰 发布菜谱相关推荐

最新文章

热门文章

vue 美食杰发布菜谱

vue 美食杰发布菜谱相关推荐