472 lines
12 KiB
Vue
472 lines
12 KiB
Vue
<template>
|
|
<view class="content addFood">
|
|
<!-- 菜谱介绍 -->
|
|
<view class="topimg" @click="handleFMimg(0)">
|
|
<image :src="FMimg" mode="aspectFill" v-if="FMimg" />
|
|
<icon class="iconfont icon-add"></icon>
|
|
<text class="text">上传封面</text>
|
|
<text>(单张图片)</text>
|
|
</view>
|
|
<view class="title">
|
|
<input type="text" v-model="info.title" placeholder="输入菜谱标题" />
|
|
</view>
|
|
<view class="title title2">
|
|
<view class="">菜谱类型：</view>
|
|
<picker mode="selector" :range="menu" range-key="name" :value="cookIndex" @change="changeMenuList">
|
|
<view class="uni-input">
|
|
{{cookIndex!=null?menu[cookIndex].name:"请选择"}}
|
|
<uni-icons type="forward" size="20" color="#999"></uni-icons>
|
|
</view>
|
|
</picker>
|
|
</view>
|
|
<view class="textarea">
|
|
<textarea v-model="info.description" name="content" placeholder="输入菜谱简介" maxlength="100" />
|
|
</view>
|
|
<!-- 添加食材 -->
|
|
<view class="food" v-if="isFood">
|
|
<view class="h4">
|
|
添加食材
|
|
<text class="close" @click="handleClose" v-if="info.food_list.length">清空</text>
|
|
</view>
|
|
<view class="foodlist" v-for="(ite,ind) in info.food_list" :key="ind" v-if="info.food_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="step_list" v-for="(ite,ind) in info.step_list" :key="ind" v-if="info.step_list.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" @click="handleBZimage(ite,ind)">
|
|
<image :src="img" mode="aspectFill" v-if="ite.pic_list.length"
|
|
v-for="(img,id) in ite.pic_img" />
|
|
<icon class="iconfont icon-add"></icon>
|
|
<text class="text">上传封面</text>
|
|
</view>
|
|
<view class="textarea">
|
|
<textarea v-model="ite.description" name="content" placeholder="输入步骤说明" maxlength="100" />
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class="add" @click="handleAddstep">+添加步骤</view>
|
|
</view>
|
|
<!-- 保存 -->
|
|
<view class="groupbtn">
|
|
<view @click="handleLook(1)"> 预览</view>
|
|
<view class="subbtn" @click="handleLook(2)"> 保存</view>
|
|
</view>
|
|
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import {
|
|
mapState
|
|
} from "vuex";
|
|
export default {
|
|
data() {
|
|
return {
|
|
isFood: true,
|
|
info: {
|
|
cook_label: null,
|
|
title: "",
|
|
description: "",
|
|
food_list: [],
|
|
cover: null, //封面id
|
|
step_list: []
|
|
},
|
|
FMimg: "",
|
|
cookIndex: null,
|
|
}
|
|
},
|
|
computed: {
|
|
...mapState(["menuList"]),
|
|
menu() {
|
|
return this.menuList
|
|
},
|
|
},
|
|
onLoad() {},
|
|
onShow() {
|
|
console.log("11111111onshow")
|
|
},
|
|
onTabItemClick(itemPath) {
|
|
// 例如，你可以在这里添加一个确认对话框
|
|
console.log("itemPath", itemPath)
|
|
},
|
|
methods: {
|
|
//
|
|
getAddFood(list) {
|
|
let that = this
|
|
list.forEach(ite => {
|
|
ite.weight = null
|
|
})
|
|
that.info.food_list = that.$tools.mergeAndDeduplicate(that.info.food_list, list, 'name')
|
|
},
|
|
// 清空食材
|
|
handleClose() {
|
|
let that = this
|
|
that.info.food_list = []
|
|
},
|
|
// 添加食材
|
|
handleAddfood() {
|
|
let that = this
|
|
uni.navigateTo({
|
|
url: "/pageTwo/me/foodlist?list=" + JSON.stringify(that.info.food_list)
|
|
})
|
|
},
|
|
// 删除指定食材/菜谱
|
|
handledel(id, type) {
|
|
let that = this
|
|
let name = type == 'step' ? '步骤' : '食材'
|
|
let list = type == 'step' ? that.info.step_list : that.info.food_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.step_list : that.info.food_list
|
|
let moveComm = (curIndex, nextIndex) => {
|
|
let arr = type == 'step' ? that.info.step_list : that.info.food_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
|
|
})
|
|
},
|
|
// 上传封面
|
|
handleFMimg(ind) {
|
|
let that = this
|
|
uni.authorize({
|
|
scope: 'scope.camera', // 根据需要选择相应的权限范围
|
|
success() {
|
|
// 用户已经同意小程序使用相册，后续调用 uni.chooseMedia 等 API不会有问题
|
|
uni.chooseMedia({
|
|
count: 1,
|
|
sourceType: ['album', 'camera'],
|
|
success(res) {
|
|
that.$model.getUploadImg({
|
|
uploadpath: res.tempFiles[0]
|
|
}).then(res2 => {
|
|
if (res2.code == 0) {
|
|
that.FMimg = res2.data.pic_url
|
|
that.info.cover = res2.data.id
|
|
}
|
|
})
|
|
}
|
|
})
|
|
},
|
|
fail() {
|
|
// 用户拒绝授权，可以引导用户手动去授权设置页面进行授权
|
|
uni.showModal({
|
|
title: '授权失败',
|
|
content: '请在设置中开启权限',
|
|
showCancel: false,
|
|
confirmText: '去设置',
|
|
success: function(res) {
|
|
if (res.confirm) {
|
|
// 跳转到设置页面，引导用户开启权限
|
|
uni.openSetting();
|
|
}
|
|
}
|
|
});
|
|
}
|
|
});
|
|
|
|
},
|
|
changeMenuList(e) {
|
|
this.cookIndex = e.target.value
|
|
this.info.cook_label = this.menu[e.target.value].id
|
|
},
|
|
// 添加步骤
|
|
handleAddstep() {
|
|
let that = this
|
|
that.info.step_list.push({
|
|
pic_list: [],
|
|
pic_img: [],
|
|
description: null,
|
|
})
|
|
},
|
|
// 上传步骤图
|
|
handleBZimage(ite, ind) {
|
|
let that = this
|
|
ite.pic_list = []
|
|
ite.pic_img = []
|
|
uni.authorize({
|
|
scope: 'scope.camera', // 根据需要选择相应的权限范围
|
|
success() {
|
|
// 用户已经同意小程序使用相册，后续调用 uni.chooseMedia 等 API不会有问题
|
|
uni.chooseMedia({
|
|
count: 1,
|
|
sourceType: ['album', 'camera'],
|
|
success(res) {
|
|
that.$model.getUploadImg({
|
|
uploadpath: res.tempFiles[0]
|
|
}).then(res2 => {
|
|
if (res2.code == 0) {
|
|
ite.pic_list.push(res2.data.id)
|
|
ite.pic_img.push(res2.data.pic_url)
|
|
}
|
|
console.log("11111111", res2, ite)
|
|
})
|
|
}
|
|
})
|
|
},
|
|
fail() {
|
|
// 用户拒绝授权，可以引导用户手动去授权设置页面进行授权
|
|
uni.showModal({
|
|
title: '授权失败',
|
|
content: '请在设置中开启权限',
|
|
showCancel: false,
|
|
confirmText: '去设置',
|
|
success: function(res) {
|
|
if (res.confirm) {
|
|
// 跳转到设置页面，引导用户开启权限
|
|
uni.openSetting();
|
|
}
|
|
}
|
|
});
|
|
}
|
|
});
|
|
},
|
|
handleLook(ind) {
|
|
let that = this
|
|
if (!uni.getStorageSync('token')) {
|
|
that.$tools.msg("登录后查看等多！")
|
|
return
|
|
}
|
|
if (!that.info.cover) {
|
|
that.$tools.msg("请上传封面图！")
|
|
return
|
|
}
|
|
if (!that.info.title) {
|
|
that.$tools.msg("请输入菜谱标题！")
|
|
return
|
|
}
|
|
if (!that.info.cook_label) {
|
|
that.$tools.msg("请选择菜谱类型！")
|
|
return
|
|
}
|
|
if (!that.info.description) {
|
|
that.$tools.msg("请输入菜谱简介！")
|
|
return
|
|
}
|
|
if (!that.info.food_list.length) {
|
|
that.$tools.msg("请添加食材！")
|
|
return
|
|
}
|
|
let array = []
|
|
that.info.food_list.forEach(ite => {
|
|
if (ite.weight != null || ite.weight > 0) {
|
|
array.push(ite.weight)
|
|
}
|
|
})
|
|
if (array.length != that.info.food_list.length) {
|
|
that.$tools.msg("请输入食材重量！")
|
|
return
|
|
}
|
|
if (!that.info.step_list.length) {
|
|
that.$tools.msg("请添加步骤！")
|
|
return
|
|
}
|
|
if (that.info.step_list.length) {
|
|
let array = []
|
|
that.info.step_list.forEach(ite => {
|
|
if (ite.pic_list != null && ite.description != null) {
|
|
array.push(ite.pic_list)
|
|
return
|
|
}
|
|
})
|
|
if (array.length != that.info.step_list.length) {
|
|
that.$tools.msg("请完善步骤！")
|
|
return
|
|
}
|
|
}
|
|
if (ind == 2) {
|
|
that.info.token = uni.getStorageSync('token')
|
|
that.$model.getAddCookbook(that.info).then(res2 => {
|
|
if (res2.code == 0) {
|
|
that.$tools.msg("添加成功")
|
|
that.isFood = true
|
|
that.info = {
|
|
cook_label: null,
|
|
title: "",
|
|
description: "",
|
|
food_list: [],
|
|
cover: null, //封面id
|
|
step_list: []
|
|
}
|
|
that.FMimg = ""
|
|
that.cookIndex = null
|
|
setTimeout(function() {
|
|
uni.switchTab({
|
|
url: "/pages/menu/menu"
|
|
})
|
|
}, 1000)
|
|
}
|
|
})
|
|
}
|
|
if (ind == 1) {
|
|
that.info.FMimg = that.FMimg
|
|
console.log("预览info", that.info)
|
|
uni.navigateTo({
|
|
url: "/pages/add/Preview?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: 10px 0;
|
|
}
|
|
}
|
|
|
|
/deep/picker {
|
|
height: 45px;
|
|
line-height: 45px;
|
|
|
|
.uni-input {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
}
|
|
}
|
|
|
|
.title2 {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
}
|
|
</style> |