335 lines
7.8 KiB
Vue
335 lines
7.8 KiB
Vue
<template>
|
|
<view class="content addFood">
|
|
<!-- 菜谱介绍 -->
|
|
<view class="topimg">
|
|
<uni-file-picker :imageStyles="imageStyles" @select="handleFMimg" file-mediatype="image" disable-preview
|
|
limit="1">
|
|
<icon class="iconfont icon-add"></icon>
|
|
<text class="text">上传封面</text>
|
|
<text>(单张图片)</text>
|
|
</uni-file-picker>
|
|
</view>
|
|
<view class="title">
|
|
<input type="text" v-model="info.title" placeholder="输入菜谱标题" />
|
|
</view>
|
|
<view class="textarea">
|
|
<textarea v-model="info.content" name="content" placeholder="输入菜谱简介" maxlength="100" />
|
|
</view>
|
|
<!-- 添加食材 -->
|
|
<view class="food" v-if="isFood">
|
|
<view class="h4">
|
|
添加食材
|
|
<text class="close" @click="handleClose" v-if="info.list.length">清空</text>
|
|
</view>
|
|
<view class="foodlist" v-for="(ite,ind) in info.list" :key="ind" v-if="info.list.length">
|
|
<view class="item">
|
|
<view class="name">{{ite.name}}</view>
|
|
<view class="input">
|
|
<input class="text" placeholder="请输入用量" v-model="ite.weight" type="digit" />{{ite.unit}}
|
|
</view>
|
|
<view class="edit">
|
|
<icon class="iconfont icon-ashbin" @click="handledel(ind,'food')"></icon>
|
|
<image src="../../static/xia.png" @click="handleMove(ind,0,'food')" class="xia"></image>
|
|
<image src="../../static/xia.png" @click="handleMove(ind,1,'food')" class="shang xia"></image>
|
|
</view>
|
|
</view>
|
|
|
|
</view>
|
|
<view class="add" @click="handleAddfood">+添加食材</view>
|
|
</view>
|
|
<!-- 添加步骤 -->
|
|
<view class="step">
|
|
<view class="h4">添加步骤</view>
|
|
<view class="stepList" v-for="(ite,ind) in info.stepList" :key="ind" v-if="info.stepList.length">
|
|
<view class="top">
|
|
<text>步骤{{ind+1}}</text>
|
|
<view class="edit">
|
|
<icon class="iconfont icon-ashbin" @click="handledel(ind,'step')"></icon>
|
|
<image src="../../static/xia.png" @click="handleMove(ind,0,'step')" class="xia"></image>
|
|
<image src="../../static/xia.png" @click="handleMove(ind,1,'step')" class="shang xia"></image>
|
|
</view>
|
|
</view>
|
|
<view class="right">
|
|
<view class="image">
|
|
<uni-file-picker :imageStyles="imageStyles" file-mediatype="image" :index="ind"
|
|
@select="handleBZimage" limit="1">
|
|
<icon class="iconfont icon-add"></icon>
|
|
<text class="text">上传图片</text>
|
|
</uni-file-picker>
|
|
</view>
|
|
<view class="textarea">
|
|
<textarea v-model="ite.content" name="content" placeholder="输入步骤说明" maxlength="100" />
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class="add" @click="handleAddstep">+添加步骤</view>
|
|
</view>
|
|
<!-- 保存 -->
|
|
<view class="groupbtn">
|
|
<view @click="handleLook"> 预览</view>
|
|
<view class="subbtn"> 保存</view>
|
|
</view>
|
|
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import {
|
|
mapState
|
|
} from "vuex";
|
|
export default {
|
|
data() {
|
|
return {
|
|
isFood: true,
|
|
info: {
|
|
FMimg: "",
|
|
title: "",
|
|
content: "",
|
|
list: [],
|
|
stepList: []
|
|
},
|
|
imageStyles: {
|
|
width: '100%',
|
|
height: 331,
|
|
},
|
|
}
|
|
},
|
|
computed: {
|
|
...mapState(["user"])
|
|
},
|
|
onLoad() {},
|
|
methods: {
|
|
//
|
|
getAddFood(list) {
|
|
let that = this
|
|
list.forEach(ite => {
|
|
ite.weight = null
|
|
})
|
|
that.info.list = list
|
|
console.log("list", list)
|
|
},
|
|
// 清空食材
|
|
handleClose() {
|
|
let that = this
|
|
that.info.list = []
|
|
},
|
|
// 添加食材
|
|
handleAddfood() {
|
|
let that = this
|
|
uni.navigateTo({
|
|
url: "/pageTwo/me/foodlist"
|
|
})
|
|
},
|
|
// 删除指定食材/菜谱
|
|
handledel(id, type) {
|
|
let that = this
|
|
let name = type == 'step' ? '步骤' : '食材'
|
|
let list = type == 'step' ? that.info.stepList : that.info.list
|
|
uni.showModal({
|
|
title: '友情提示',
|
|
content: '是否删除当前' + name,
|
|
success: function(res) {
|
|
if (res.confirm) {
|
|
list.splice(list.findIndex((ite, ind) => ind === id), 1)
|
|
} else if (res.cancel) {
|
|
that.$tools.msg("您已取消操作！");
|
|
}
|
|
},
|
|
})
|
|
},
|
|
// 上下移动食材
|
|
handleMove(ind, dir, type) {
|
|
let that = this
|
|
let list = type == 'step' ? that.info.stepList : that.info.list
|
|
let moveComm = (curIndex, nextIndex) => {
|
|
let arr = type == 'step' ? that.info.stepList : that.info.list
|
|
arr[curIndex] = arr.splice(nextIndex, 1, arr[curIndex])[0]
|
|
return arr
|
|
}
|
|
list.some((val, index) => {
|
|
if (index === ind) {
|
|
if (dir === 1 && index === 0) {
|
|
this.$tools.msg('已在顶部！')
|
|
} else if (dir === 0 && index === list.length - 1) {
|
|
this.$tools.msg('已在底部！')
|
|
} else {
|
|
let nextIndex = dir === 1 ? index - 1 : index + 1
|
|
list = moveComm(index, nextIndex)
|
|
}
|
|
return true
|
|
}
|
|
return false
|
|
})
|
|
},
|
|
// 添加步骤
|
|
handleAddstep() {
|
|
let that = this
|
|
that.info.stepList.push({
|
|
image: null,
|
|
content: null,
|
|
})
|
|
},
|
|
// 上传封面
|
|
handleFMimg(e) {
|
|
let that = this
|
|
that.info.FMimg = e.tempFilePaths[0]
|
|
console.log('选择文件：', e.tempFilePaths[0])
|
|
},
|
|
// 上传步骤图
|
|
handleBZimage(e) {
|
|
let that = this
|
|
that.info.stepList[e.index].image = e.tempFilePaths[0]
|
|
console.log('选择文件：', e, that.info.stepList)
|
|
},
|
|
handleLook() {
|
|
let that = this
|
|
if (!that.info.FMimg) {
|
|
that.$tools.msg("请上传封面图！")
|
|
return
|
|
}
|
|
if (!that.info.title) {
|
|
that.$tools.msg("请输入菜谱标题！")
|
|
return
|
|
}
|
|
if (!that.info.content) {
|
|
that.$tools.msg("请输入菜谱简介！")
|
|
return
|
|
}
|
|
if (!that.info.list.length) {
|
|
that.$tools.msg("请添加食材！")
|
|
return
|
|
}
|
|
let array = []
|
|
that.info.list.forEach(ite => {
|
|
if (ite.weight != null || ite.weight > 0) {
|
|
array.push(ite.weight)
|
|
}
|
|
})
|
|
if (array.length != that.info.list.length) {
|
|
that.$tools.msg("请输入食材重量！")
|
|
return
|
|
}
|
|
if (!that.info.stepList.length) {
|
|
that.$tools.msg("请添加步骤！")
|
|
return
|
|
}
|
|
if (that.info.stepList.length) {
|
|
let array = []
|
|
that.info.stepList.forEach(ite => {
|
|
if (ite.image != null && ite.content != null) {
|
|
array.push(ite.image)
|
|
return
|
|
}
|
|
})
|
|
if (array.length != that.info.stepList.length) {
|
|
that.$tools.msg("请完善步骤！")
|
|
return
|
|
}
|
|
}
|
|
that.info.pageName = "菜谱预览"
|
|
that.info.user = that.user
|
|
console.log("预览info", that.info)
|
|
uni.navigateTo({
|
|
url: "/pageTwo/me/menudetail?info=" + JSON.stringify(that.info)
|
|
})
|
|
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
.content {
|
|
padding: 0 15px;
|
|
}
|
|
|
|
.topimg {
|
|
width: 100%;
|
|
height: 320px;
|
|
background: #fff;
|
|
border-radius: 10px;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
flex-wrap: wrap;
|
|
flex-direction: column;
|
|
margin-bottom: 10px;
|
|
overflow: hidden;
|
|
position: relative;
|
|
|
|
.iconfont {
|
|
font-size: 30px;
|
|
color: $mainColor;
|
|
}
|
|
|
|
text {
|
|
display: inline-block;
|
|
width: 100%;
|
|
text-align: center;
|
|
font-size: 12px;
|
|
color: #999;
|
|
}
|
|
|
|
.text {
|
|
font-size: 16px;
|
|
color: #666;
|
|
margin-bottom: 3px;
|
|
}
|
|
|
|
image {
|
|
width: 100%;
|
|
height: inherit;
|
|
}
|
|
}
|
|
|
|
.step {
|
|
.image {
|
|
height: 320px;
|
|
margin: auto;
|
|
background: #f7f7f7;
|
|
border-radius: 10px;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
flex-wrap: wrap;
|
|
flex-direction: column;
|
|
overflow: hidden;
|
|
|
|
image {
|
|
width: 100%;
|
|
height: inherit;
|
|
display: inline-table;
|
|
}
|
|
|
|
icon {
|
|
font-size: 30px;
|
|
color: #ff4c4f;
|
|
margin-bottom: 5px;
|
|
}
|
|
}
|
|
}
|
|
|
|
/deep/.is-add {
|
|
flex-wrap: wrap;
|
|
flex-direction: column;
|
|
}
|
|
|
|
.title,
|
|
.textarea {
|
|
/deep/input {
|
|
height: 40px;
|
|
line-height: 40px;
|
|
}
|
|
|
|
/deep/textarea {
|
|
width: 100%;
|
|
height: 6rem;
|
|
line-height: 20px;
|
|
background: none;
|
|
border: none;
|
|
font-size: 14px;
|
|
padding-top: 10px;
|
|
}
|
|
}
|
|
</style>
|