629 lines
15 KiB
Vue
629 lines
15 KiB
Vue
<template>
|
||
<view class="content addFood" :class="[isBle?'maxheight':'']">
|
||
<!-- 封面 -->
|
||
<view class="topimg">
|
||
<image :src="info.cover_pic_url" mode="aspectFill"></image>
|
||
</view>
|
||
<!-- 信息 -->
|
||
<view class="title">
|
||
<view class="table">{{info.title}}</view>
|
||
<view class="user">
|
||
<view class="left">
|
||
<image :src="info.create_user_head_pic"></image>
|
||
<text>{{info.create_user_nickname}}</text>
|
||
</view>
|
||
<view class="right">
|
||
<icon class="t-icon" :class="[info.collect_status=='yes'?'t-icon-icon3':'t-icon-icon_collect']">
|
||
</icon>
|
||
<text class="ml-5">{{info.likes_num}}</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<view class="title title2">
|
||
<view class="">菜谱类型：</view>
|
||
<view>{{menu[cookIndex].name}}</view>
|
||
</view>
|
||
<!-- 食材 -->
|
||
<view class="food">
|
||
<view class="desc">
|
||
{{info.description}}
|
||
</view>
|
||
<view class="h4">
|
||
<view class="tags">
|
||
<view class="tags-item" :class="[index ==ind?'active':'']" v-for="(item,ind) in info.tags" :key="ind" @click="handleToggle(ind)">{{item.title}}</view>
|
||
</view>
|
||
<view class="close" @click="handleWeight">
|
||
<image src="../../static/lianjie.png"></image>
|
||
连接称重
|
||
</view>
|
||
</view>
|
||
<view class="foodlist">
|
||
<view class="item" v-for="(ite,ind) in info.tags[index].list" :key="ind" v-if="info.tags&&info.tags[index].list.length">
|
||
<view class="name" style="flex: 1;">{{ite.name}}</view>
|
||
<view class="weight">
|
||
{{ite.weight}}{{ite.unit}}
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<!-- 步骤 -->
|
||
<view class="step">
|
||
<view class="stepList" v-for="(ite,ind) in info.step_list" :key="ind"
|
||
v-if="info.step_list&&info.step_list.length">
|
||
<view class="top">
|
||
<text>{{ite.step_num}}</text>
|
||
</view>
|
||
<view class="right">
|
||
<view class="desc">
|
||
{{ite.description}}
|
||
</view>
|
||
<view class="image" v-for="(it,id) in ite.pic_url_list">
|
||
<image :src="it" mode="aspectFill" class="mt-10"></image>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<!-- 底部操作 -->
|
||
<view class="foot">
|
||
<view class="item" @click="handleCang()">
|
||
<icon class="t-icon" :class="[info.collect_status=='yes'?'t-icon-icon3':'t-icon-icon_collect']"></icon>
|
||
<text>收藏</text>
|
||
</view>
|
||
<!-- <view class="item" @click="handleshare()">
|
||
<icon class="iconfont icon-a-fenxiang2"></icon>
|
||
<text>分享</text>
|
||
</view> -->
|
||
<view class="item" v-if="type=='我的菜谱'" @click="handleEdit()">
|
||
<icon class="iconfont icon-bianji"></icon>
|
||
<text>编辑</text>
|
||
</view>
|
||
<view class="item" v-if="type=='我的菜谱'" @click="handledel()">
|
||
<icon class="iconfont icon-ashbin"></icon>
|
||
<text>删除</text>
|
||
</view>
|
||
</view>
|
||
<!--蓝牙连接区 -->
|
||
<view class="wrapper" v-show="isBle">
|
||
<view class="bg" @click="isBle = false">
|
||
<view class="box weightBox" @click.stop>
|
||
<view class="table">
|
||
<text>备料</text>
|
||
<icon class="iconfont icon-error" @click='isBle=false'></icon>
|
||
</view>
|
||
<view class="foodlist">
|
||
<view class="text">
|
||
<text>食材</text>
|
||
<text>建议</text>
|
||
<text>重量</text>
|
||
<text>热量</text>
|
||
<text>重秤</text>
|
||
</view>
|
||
<view class="item" v-for="(ite,ind) in info.tags[0].list" :key="ind"
|
||
v-if="info.tags&&info.tags[0].list.length">
|
||
<view class="name">{{ite.name}}</view>
|
||
<view class="num">
|
||
{{ite.weight}}{{ite.unit}}
|
||
</view>
|
||
<view class="num" v-if="ite.newweight">
|
||
{{ite.newweight}}{{ite.newunit}}
|
||
</view>
|
||
<view class="num" v-if="ite.newkcal">
|
||
{{ite.newkcal}}
|
||
</view>
|
||
<view class="edit" @click="handlechongzhi(ite,ind)" v-if="ite.newweight">
|
||
<icon class="iconfont icon-reset"></icon>
|
||
</view>
|
||
<view class="kcal" v-if="activeType.id&&activeType.id ==ite.id&&!ite.newweight">
|
||
正在称重...
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="groupbtn" :style="{display: (isWeightType&&iSWeightSub) ? '' : 'none'}">
|
||
<view @click="handleWeightType(1)">累计称重</view>
|
||
<view @click="handleWeightType(0)">分类称重</view>
|
||
</view>
|
||
<view class="title" :style="{display: (!isWeightType&&iSWeightSub) ? '' : 'none'}">
|
||
<view class="name">{{activeType.name}}</view>
|
||
<blue-tooth @handleDetailNext="handleDetailNext" @handleDetailSub="handleDetailSub" @connect_success="handleWeight" :weightType="weightType"
|
||
:isLast="isLast" :weightKcal="weightKcal" />
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
import {
|
||
mapState
|
||
} from "vuex";
|
||
import blueTooth from "../../components/bluetooth_new.vue"
|
||
export default {
|
||
data() {
|
||
return {
|
||
type: "",
|
||
info: {},
|
||
id: null,
|
||
index: 0,
|
||
weightKcal: null,
|
||
weightType: 2,
|
||
activeType: {},
|
||
isBle: false,
|
||
isWeightType: true,
|
||
iSWeightSub: true,
|
||
listInd: 0,
|
||
isLast: false,
|
||
cookIndex: null,
|
||
}
|
||
},
|
||
computed: {
|
||
...mapState(["user", "menuList"]),
|
||
menu() {
|
||
return this.menuList
|
||
},
|
||
},
|
||
components: {
|
||
blueTooth
|
||
},
|
||
onLoad(options) {
|
||
let that = this
|
||
let info = {}
|
||
if (options && options.info) {
|
||
info = JSON.parse(options.info)
|
||
that.type = info.pageName
|
||
that.info = info
|
||
} else {
|
||
that.type = options.title
|
||
}
|
||
that.id = options.id
|
||
that.handleHomeInfo(options.id)
|
||
},
|
||
methods: {
|
||
handleToggle(ind) {
|
||
this.index = ind
|
||
},
|
||
handleHomeInfo(id) {
|
||
let that = this
|
||
that.$model.getCookListDetails({
|
||
cookbook_id: id
|
||
}).then(res => {
|
||
if (res.code != 0) return
|
||
that.info = res.data
|
||
that.cookIndex = that.menu.findIndex(ite => ite.id == res.data.cook_label)
|
||
})
|
||
},
|
||
//连接称重
|
||
handleWeight() {
|
||
let that = this
|
||
if(that.isBle) {
|
||
return
|
||
}
|
||
|
||
that.isBle = true
|
||
that.isLast = false
|
||
that.activeType = {}
|
||
that.iSWeightSub = true
|
||
that.isWeightType = true
|
||
},
|
||
// 下一位
|
||
handleDetailNext(weight, dw, kcal) {
|
||
let that = this
|
||
console.log("下一位id", weight, dw, kcal, that.activeType)
|
||
let ind = that.info.tags[0].list.findIndex(ite => ite.id == that.activeType.id)
|
||
that.info.tags[0].list[ind].newweight = weight
|
||
that.info.tags[0].list[ind].newunit = dw
|
||
that.info.tags[0].list[ind].newkcal = kcal
|
||
that.listInd = that.listInd + 1
|
||
that.activeType = that.info.tags[0].list[ind + 1]
|
||
that.weightKcal = that.activeType.kcal
|
||
if (that.listInd == that.info.tags[0].list.length - 1 || that.listInd == that.info.list.length) {
|
||
that.isLast = true
|
||
}
|
||
console.log("下一位序号", that.listInd)
|
||
},
|
||
// 结束称重
|
||
handleDetailSub(weight, dw, kcal) {
|
||
let that = this
|
||
let ind = that.info.tags[0].list.findIndex(ite => ite.id == that.activeType.id)
|
||
that.info.tags[0].list[ind].newweight = weight
|
||
that.info.tags[0].list[ind].newunit = dw
|
||
that.info.tags[0].list[ind].newkcal = kcal
|
||
that.iSWeightSub = false
|
||
console.log("称重完成", weight, dw, kcal)
|
||
},
|
||
//重置
|
||
handlechongzhi(ite, ind) {
|
||
let that = this
|
||
that.listInd = ind
|
||
that.isLast = false
|
||
that.activeType = ite
|
||
that.iSWeightSub = true
|
||
that.isWeightType = false
|
||
that.weightKcal = that.activeType.kcal
|
||
that.info.tags[0].list[ind].newweight = ""
|
||
that.info.tags[0].list[ind].newunit = ""
|
||
that.info.tags[0].list[ind].newkcal = ""
|
||
if (that.listInd == that.info.tags[0].list.length - 1 || that.listInd == that.info.tags[0].list.length) {
|
||
that.isLast = true
|
||
}
|
||
console.log("重置", ind, that.info.tags[0].list.length)
|
||
},
|
||
//称重类型选择
|
||
handleWeightType(ind) {
|
||
this.weightType = ind
|
||
this.isLast = false
|
||
this.isWeightType = false
|
||
this.activeType = this.info.tags[0].list[0]
|
||
this.weightKcal = this.activeType.kcal
|
||
},
|
||
handleCang() {
|
||
let that = this
|
||
that.$model.getCookLike({
|
||
cookbook_id: that.id
|
||
}).then(res => {
|
||
if (res.code != 0) return
|
||
that.info.likes_num = res.data.likes_num
|
||
that.info.collect_status = res.data.collect_status
|
||
})
|
||
},
|
||
handleshare() {
|
||
this.$tools.msg("分享")
|
||
},
|
||
handleEdit() {
|
||
uni.navigateTo({
|
||
url: "/pageTwo/me/menuEdit?info=" + JSON.stringify(this.info)
|
||
})
|
||
},
|
||
handledel() {
|
||
let that = this
|
||
uni.showModal({
|
||
title: '友情提示',
|
||
content: '是否删除当前菜谱？',
|
||
success: function(res) {
|
||
if (res.confirm) {
|
||
that.$model.getMyCookbookDel({
|
||
aud_id: that.user.aud_id,
|
||
cookbook_id: that.id,
|
||
}).then((res) => {
|
||
if (res.code != 0) {
|
||
that.$tools.msg(res.message)
|
||
return
|
||
}
|
||
that.$tools.msg("删除成功")
|
||
uni.navigateBack()
|
||
})
|
||
} else if (res.cancel) {
|
||
that.$tools.msg("您已取消操作！");
|
||
}
|
||
},
|
||
})
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
.content {
|
||
padding: 0 15px;
|
||
}
|
||
|
||
.maxheight {
|
||
max-height: 90vh !important;
|
||
overflow: hidden;
|
||
}
|
||
|
||
.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;
|
||
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;
|
||
}
|
||
}
|
||
}
|
||
|
||
.title {
|
||
padding: 10px;
|
||
|
||
.table {
|
||
font-size: 16px;
|
||
font-weight: bold;
|
||
}
|
||
|
||
.user {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
margin-top: 15px;
|
||
|
||
.left {
|
||
display: flex;
|
||
align-items: center;
|
||
|
||
image {
|
||
width: 25px;
|
||
height: 25px;
|
||
margin-right: 5px;
|
||
border-radius: 50%;
|
||
}
|
||
}
|
||
|
||
.right {
|
||
display: flex;
|
||
}
|
||
}
|
||
}
|
||
|
||
.desc {
|
||
width: 100%;
|
||
line-height: 25px;
|
||
margin-bottom: 10px;
|
||
}
|
||
|
||
.h4 {
|
||
margin: 10px 0;
|
||
padding-top: 10px;
|
||
border-top: 1px solid #f7f7f7;
|
||
|
||
.tags {
|
||
flex: 1;
|
||
display: flex;
|
||
justify-content: space-around;
|
||
.tags-item {
|
||
border-bottom: 2px solid transparent;
|
||
}
|
||
.active {
|
||
border-bottom: 2px solid #ff4c4f;
|
||
}
|
||
|
||
}
|
||
.close {
|
||
color: #fff;
|
||
width: 100px;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
border-radius: 10px;
|
||
background-color: $maincolor;
|
||
|
||
image {
|
||
width: 25px;
|
||
height: 25px;
|
||
}
|
||
}
|
||
}
|
||
|
||
.step {
|
||
margin-bottom: 85px;
|
||
}
|
||
|
||
.foodlist {
|
||
border-radius: 10px;
|
||
background: #fff;
|
||
|
||
.item {
|
||
margin-top: 0 !important;
|
||
border-radius: 0px !important;
|
||
border-bottom: 1px solid #f7f7f7;
|
||
}
|
||
|
||
.name {
|
||
border-right: none !important;
|
||
}
|
||
}
|
||
|
||
.foot {
|
||
position: fixed;
|
||
bottom: 0;
|
||
left: 0;
|
||
right: 0;
|
||
background: #fff;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
padding: 5px 0px 20px;
|
||
border-radius: 10px 10px 0 0;
|
||
box-shadow: 0px 1px 5px 2px #dfe2e1fc;
|
||
|
||
.item {
|
||
width: 25%;
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
justify-content: center;
|
||
|
||
icon {
|
||
font-size: 21px;
|
||
}
|
||
|
||
text {
|
||
display: inline-block;
|
||
text-align: center;
|
||
width: 100%;
|
||
}
|
||
}
|
||
}
|
||
|
||
//
|
||
.weightBox {
|
||
top: 32px;
|
||
height: auto;
|
||
border-radius: 0;
|
||
|
||
.table {
|
||
width: 100%;
|
||
display: flex;
|
||
justify-content: center;
|
||
font-size: 18px;
|
||
font-weight: bold;
|
||
border-bottom: 1px solid #fff;
|
||
|
||
icon {
|
||
font-size: 45px;
|
||
margin-top: -30px;
|
||
background: #fff;
|
||
border-radius: 50%;
|
||
width: 45px;
|
||
height: 45px;
|
||
position: absolute;
|
||
right: 16px;
|
||
}
|
||
}
|
||
|
||
.foodlist {
|
||
border-radius: 0;
|
||
height: 40%;
|
||
overflow: scroll;
|
||
margin-top: 15px;
|
||
|
||
.text {
|
||
width: 100%;
|
||
font-weight: bold;
|
||
font-size: 14px;
|
||
display: flex;
|
||
height: 40px;
|
||
line-height: 40px;
|
||
|
||
text {
|
||
width: 18%;
|
||
text-align: center;
|
||
}
|
||
|
||
:nth-child(1) {
|
||
width: 28%;
|
||
text-align: left;
|
||
}
|
||
|
||
:nth-child(5) {
|
||
width: 15%;
|
||
// text-align: right !important;
|
||
}
|
||
|
||
|
||
}
|
||
|
||
.item {
|
||
display: flex;
|
||
// justify-content: space-between;
|
||
align-items: center;
|
||
height: 40px;
|
||
line-height: 40px;
|
||
font-size: 16px;
|
||
|
||
view {
|
||
width: 18%;
|
||
text-align: center;
|
||
font-size: 12px;
|
||
}
|
||
|
||
:nth-child(5) {
|
||
width: 15%;
|
||
text-align: right !important;
|
||
display: flex;
|
||
justify-content: flex-end;
|
||
}
|
||
}
|
||
|
||
.kcal {
|
||
width: 60% !important;
|
||
text-align: center !important;
|
||
}
|
||
|
||
.name {
|
||
width: auto;
|
||
float: left;
|
||
font-size: 12px;
|
||
font-weight: 500;
|
||
width: 28% !important;
|
||
text-align: left !important;
|
||
white-space: nowrap;
|
||
overflow-x: auto;
|
||
}
|
||
}
|
||
|
||
.title {
|
||
width: 100%;
|
||
padding: 0;
|
||
margin-top: 10px;
|
||
overflow: hidden;
|
||
position: absolute;
|
||
bottom: 10px;
|
||
top: 50%;
|
||
left: 0;
|
||
right: 0;
|
||
|
||
/deep/.weightPages {
|
||
top: 15px;
|
||
display: block;
|
||
}
|
||
}
|
||
|
||
.groupbtn {
|
||
position: absolute;
|
||
left: 15px;
|
||
right: 15px;
|
||
width: auto;
|
||
bottom: 50px;
|
||
}
|
||
}
|
||
|
||
.title2 {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
}
|
||
</style> |