qiaocl
/
ReedawFoodApp
Template
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity
ReedawFoodApp/Food/count/search.vue

1478 lines
32 KiB
Vue
Raw Normal View History

厨房秤功能
2026-03-23 16:23:40 +08:00
<template>
<view class="content">
<!-- 搜索 -->
<view class="serachBox">
<view class="type">
<picker mode="selector" @change="changeClickType" :range="foodItem" range-key="name">
<view>
{{foodName}}
<image src="/static/arrow-down.png"></image>
</view>
</picker>
</view>
<view class="serach-box">
<view class="searchInput">
<input placeholder="请输入..." class="city-serach-input" v-model="search_value" />
<icon v-if="search_value" class="iconfont icon-error" @click="handlecolse" size="30"></icon>
</view>
<view class="searchBtn">
<view @click="handleSerach">搜索</view>
</view>
</view>
</view>
<!-- 历史搜索 -->
<view class="content-box" v-if="!search_list.length">
<view v-if="history_food.length" class="search-history">
<view class="title">
<view class="quan mr-5"></view>历史搜索
</view>
<view class="button-container" @click="showAll =! showAll" v-if="history_food.length>10">
<image :src="showAll?'/static/arrow-up.png':'/static/arrow-down.png'"></image>
</view>
<view class="history-list">
<view class="history-list-item"
v-for="(item,index) in showAll?history_food:history_food.slice(0, 10)"
@click="handleSearchHistory(item.keyword)">
{{item.keyword}}
</view>
</view>
</view>
<view class="popular-container">
<view class="title">
<view class="quan mr-5"></view>猜你想搜
</view>
<view class="popular-food-item" v-for="(ite,index) in popular_food" :key="index">
<view class="food-title">{{ite.title}}</view>
<view class="popular-food-inner">
<text class="popular-food-subitem" v-for="(sub_item,sub_index) in ite.list"
@click="handleSearchHistory(sub_item.name)" :key="sub_index">{{sub_item.name}}
</text>
</view>
</view>
</view>
</view>
<!-- 底部购物车 -->
<view class="groupbtn">
<view @click="handleisShop" class="left">
<view class="che">
<text>{{ActiveList.filter(ite => ite.meals_type == foodName).length||0}}</text>
<image src="/static/pan.png"></image>
</view>
<view class="type">
{{foodName}}
<image src="/static/arrow-down.png"></image>
</view>
</view>
<view class="mic-icon" @touchstart="onVoiceTouchStart" @touchend="onVoiceTouchEnd"
@touchcancel="cancelRecording">
<uni-icons type="mic-filled" size="20" color="#fff"></uni-icons>
语音搜索
</view>
<view class="mic-icon mic-icon2" @click="scanCode">
<uni-icons type="scan" size="20" color="#fff"></uni-icons>
扫一扫
</view>
</view>
<!-- 搜索列表 -->
<view class="search_list" v-if="search_list.length">
<view class="search_list_item" v-for="(ite,ind) in search_list" @click="handleDetail(ite)">
<image :src="ite.pic_url"></image>
<view>
<text>{{ite.name}}</text>
<text>100g/{{ite.kcal}}kcal</text>
</view>
</view>
<view class="endtext" v-if="!lastPage || page >= lastPage">—— 到底了，看看别的吧 ——</view>
</view>
<!-- 购物车弹框 -->
<view class="wrapper activeList" v-if="isShop">
<view class="bg" @click='isShop=false'>
<view class="box2" @click.stop>
<!-- -->
<icon class="iconfont icon-error" @click="isShop=false"></icon>
<view class="jishiqi">
<view class="left">
<view class="chart-wrap">
<qiun-data-charts type="arcbar" :chartData="chartData" :cHeight="280" :cWidth="280"
:canvas2d="true" canvasId="searchCharts" />
<view class="center">
摄入
<text>{{foodInfo[0].today_intake}}</text>
<view class="unit">Kcal</view>
</view>
</view>
<view class="mubiao">
目标：<text>{{foodInfo[0].suggestion}}</text>kcal
</view>
</view>
<view class="right">
<view class="item" v-for="(ite,ind) in foodInfo.slice(1)">
<view class="left-icon">
<image :src="ite.icon"></image>
<view class="val" :style="{color:ite.color}">{{ite.proportion_fp||0}}%</view>
</view>
<view class="right-info">
<view class="right-info-top">
<text class="name">{{ite.name}}</text>
<text class="">
{{ite.today_intake||0}}/{{ite.suggestion||0}}g
</text>
</view>
<view class="right-info-bottom">
<view class="val" :style="{ width: ite.proportion + '%',background:ite.color}">
</view>
</view>
</view>
</view>
</view>
</view>
<!-- -->
<view class="box_list">
<view class="left">
<view :class="[item.name == foodName?'active':'']" v-for="(item,index) in foodItem"
@click="handleToggle(item.name)">
{{item.name}}
</view>
</view>
<view class="box_list_item" v-if="ActiveList.length">
<view class="length">共<text
class="red">{{ActiveList.filter(ite => ite.meals_type == foodName).length}}</text>条记录
</view>
<view class="item" v-for="(ite,ind) in ActiveList" :key="ind"
v-if="ite.meals_type==foodName">
<view class="item-left">
<image :src="ite.pic_url"></image>
<view class="name">
<text>{{ite.name}}</text>
<text class="weight">{{ite.weight}}{{ite.unit}} / {{ite.kcal}}kcal</text>
</view>
</view>
<icon class="iconfont icon-ashbin" color="red" size="26" @click="handledelactive(ite)">
</icon>
</view>
</view>
<view v-else class="nolist list">
<icon class="iconfont icon-wancan"></icon>
<text>还没有添加食物</text>
</view>
</view>
</view>
</view>
</view>
<!-- 测量弹框 -->
<view class="wrapper" v-if="IsWeight">
<view class="bg" @click='IsWeight=false'>
<view class="box" @click.stop>
<icon class="iconfont icon-error" @click="IsWeight=false"></icon>
<scroll-view style="height: 100%;margin-top: 20rpx;" scroll-y="true">
<view class="box-info">
<view class="foodItem">
<view class="left">
<image :src="activeType.pic_url" mode="aspectFill"></image>
<view class="info">
<view class="name">{{activeType.name}}</view>
<view class="kcal">{{activeType.kcal}}千卡/100克</view>
</view>
</view>
</view>
<view class="foodInfo">
<view class="foodInfoItem" v-for="(item,index) in activeType.nutrients_four"
:key="index">
<view class="name">
<view class="color" :style="{'background-color':item.color}"
v-if="item.color != ''"></view>
<text>{{item.name}}({{unitConversion(item.unit)}})</text>
</view>
<view class="value">
{{Number((activeType.weight)/100 * item.value).toFixed(1) }}
</view>
</view>
</view>
<!-- 蓝牙称重 -->
<view class="blue-tooth" v-if="isBle">
<blue-tooth @handleBle="handleBle" :weightKcal="weightKcal"
@realTimeWeight="realTimeWeight" :btnType="'2'"></blue-tooth>
</view>
</view>
<!-- 营养分析 -->
<view class="foodDetail">
<view class="foodContent">
<view class="tips">
<text>营养素</text>
<text>{{(activeType.weight).toFixed(1)}}克含量</text>
</view>
<view class="foodDetailList">
<view class="foodDetailItem" v-for="(item,index) in activeType.nutrients_list"
:key="index">
<view class="name">{{item.name_ch}}</view>
<view class="value">
{{Number((activeType.weight)/100 * item.value).toFixed(1)}}{{item.unit}}
</view>
</view>
</view>
</view>
</view>
</scroll-view>
</view>
</view>
</view>
<!-- 语音弹框 -->
<view class="wrapper" v-if="showAutoSearchDlg">
<view class="auto-search-dialog">
<view class="auto-search-inner">
<view class="voice-wave">
<view class="wave-bar"></view>
<view class="wave-bar"></view>
<view class="wave-bar"></view>
<view class="wave-bar"></view>
<view class="wave-bar"></view>
<view class="wave-bar"></view>
</view>
</view>
</view>
</view>
<!-- s扫一扫弹框 -->
<view class="wrapper wrapperScan" v-if="showScanCodeDlg">
<view class="auto-search-dialog" @click="showScanCodeDlg = false">
<view class="auto-search-inner">
<text>提示</text>
{{ScanCodeMsg}}
</view>
</view>
</view>
</view>
</template>
<script>
import {
mapState
} from "vuex";
const plugin = requirePlugin("WechatSI")
import blueTooth from "@/components/foodIndex/bluetooth_food.vue"
import qiunDataCharts from '@/uni_modules/qiun-data-charts/components/qiun-data-charts.vue';
export default {
data() {
return {
chartData: {
series: [{
data: 0,
color: "#3CB383"
}]
},
foodInfo: [],
time: "",
page: 1,
foodName: "",
showAll: false,
IsWeight: false,
search_list: [],
isShop: false,
lastPage: "",
isBle: true,
weightKcal: "",
search_value: '',
ActiveList: [],
activeType: {},
voiceManager: null,
ScanCodeMsg: "",
showAutoSearchDlg: false,
showScanCodeDlg: false,
history_food: [],
popular_food: [],
};
},
computed: {
...mapState(["configInfo", "user", 'bleValue', "countFoodInfo"]),
foodItem() {
return this.configInfo.meal_list
},
},
components: {
blueTooth,
qiunDataCharts
},
onLoad(options) {
let that = this
that.handleList()
that.time = that.countFoodInfo.date
that.foodName = options.name
},
watch: {
bleValue: {
handler(newVal, oldVal) {
蓝牙设备对接
2026-03-25 17:27:29 +08:00
this.realTimeWeight(newVal.foodWeight, newVal.foodUnit)
if (newVal.foodType == 2 && Number(newVal.foodWeight) > 0) {
this.handletoggleUnit(newVal.foodWeight, newVal.foodUnit, this.activeType.nutrients_four)
厨房秤功能
2026-03-23 16:23:40 +08:00
}
},
deep: true
},
},
mounted() {
let that = this
that.voiceManager = plugin.getRecordRecognitionManager()
that.voiceManager.onStop = function(res) {
that.search_value = res.result.replace('。', '')
that.handleSerach()
}
that.voiceManager.onError = function(res) {
console.error("error msg", res.retcode)
}
that.voiceManager.stop()
},
onReachBottom() {
let that = this
if (!this.lastPage || this.page >= this.lastPage) {
uni.showToast({
title: '没有更多数据！',
icon: 'none'
})
return
}
this.page++
this.handleSerach()
},
methods: {
handleList() {
let that = this
that.$model.getCountSearchmsg({
aud_id: that.user.aud_id
}).then(res => {
if (res.code == 0) {
that.history_food = res.data.search_history.food
that.popular_food = res.data.search_guess.food_data
}
})
},
scanCode() {
let that = this
uni.scanCode({
onlyFromCamera: true,
success: function(res) {
console.log('条码类型：' + res.scanType);
console.log('条码内容：' + res.result);
uni.showLoading({
title: '搜索中'
});
that.$model.getPhotoSearch({
barcode: res.result,
}).then(res => {
uni.hideLoading();
if (res.code != 0) {
that.ScanCodeMsg = res.msg
that.showScanCodeDlg = true
return
}
that.handleDetail(res.data)
})
},
fail: res => {
that.$api.msg("您已取消操作")
return
}
});
},
// 购物车早午晚餐切换
handleToggle(name) {
this.search_value = ""
this.search_list = []
this.foodName = name
this.handleAddEveryMealFood()
},
//实时重量
realTimeWeight(weight, unit) {
this.activeType = Object.assign({}, this.activeType, {
蓝牙设备对接
2026-03-25 17:27:29 +08:00
weight: this.$ble.convertToGrams(weight, unit)
厨房秤功能
2026-03-23 16:23:40 +08:00
})
},
// 食物选择
handleDetail(ite) {
let that = this
that.isBle = true
that.isShop = false
that.IsWeight = true
that.showScanCodeDlg = false
that.showAutoSearchDlg = false
that.activeType = ite
that.weightKcal = ite.kcal
if (that.bleValue.serviceId != "") {
蓝牙设备对接
2026-03-25 17:27:29 +08:00
that.realTimeWeight(that.bleValue.foodWeight, that.bleValue.foodUnit)
if (that.bleValue.foodType == 2 && Number(that.bleValue.foodWeight) > 0) {
that.handletoggleUnit(that.bleValue.foodWeight, that.bleValue.foodUnit, ite.nutrients_four)
厨房秤功能
2026-03-23 16:23:40 +08:00
}
} else {
蓝牙设备对接
2026-03-25 17:27:29 +08:00
let weight = Number(that.bleValue.foodWeight) > 0 ? Number(that.bleValue.foodWeight) : 100
厨房秤功能
2026-03-23 16:23:40 +08:00
that.$store.commit("changeBluetoothValue", {
蓝牙设备对接
2026-03-25 17:27:29 +08:00
foodWeight: weight,
foodUnit: that.bleValue.foodUnit
厨房秤功能
2026-03-23 16:23:40 +08:00
})
蓝牙设备对接
2026-03-25 17:27:29 +08:00
that.realTimeWeight(weight, that.bleValue.foodUnit)
厨房秤功能
2026-03-23 16:23:40 +08:00
}
},
//测量返回
handleBle(weight, unit, kcal) {
let that = this
let list = []
that.activeType.unit = unit
that.activeType.kcal = kcal
that.activeType.weight = weight
that.activeType.meals_type = that.foodName
list.push(that.activeType)
that.$model.getAddIntakeFood({
aud_id: that.user.aud_id,
food_list: list,
time: that.time
}).then(res => {
if (res.code != 0) return
that.$store.dispatch("getCountFoodInfo", {
aud_id: that.user.aud_id,
time: that.time
})
that.activeType.food_id = res.data.id
if (that.ActiveList.indexOf(that.activeType) == -1) {
that.ActiveList.push(that.activeType);
} else {
let index = that.ActiveList.indexOf(that.activeType)
that.ActiveList[index].weight = that.activeType.weight;
that.ActiveList[index].unit = that.activeType.unit;
}
setTimeout(() => {
that.handleAddEveryMealFood()
}, 100)
})
},
handleAddEveryMealFood() {
let that = this
let list = []
that.ActiveList.forEach(ite => {
if (ite.meals_type == that.foodName) {
list.push(ite.food_id)
}
})
that.$model.getAddEveryMealFood({
log_id: list,
aud_id: that.user.aud_id,
}).then(res => {
if (res.code != 0) return
that.isBle = false
that.IsWeight = false
that.isShop = true
that.foodInfo = res.data.nutrients_four
that.chartData.series[0].data = Number(res.data.nutrients_four[0].proportion) / 100
})
},
handleisShop() {
let that = this
if (!that.ActiveList.length) {
that.foodInfo = that.configInfo.default_count_foot.nutrients_four
that.chartData.series[0].data = Number(that.configInfo.default_count_foot.nutrients_four[0].proportion) / 100
}
that.isShop = true
},
// 搜索
handleSerach() {
let that = this
that.search_list = []
if (that.search_value == "") {
that.$tools.msg("输入关键字后搜索")
return
}
that.$model.getFoodSearch({
page: that.page,
search_data: that.search_value
}).then(res => {
if (res.code != 0) {
uni.showToast({
title: res.msg,
icon: 'error'
})
return
}
that.search_list = that.search_list.concat(res.data.content_list)
})
},
// 取消搜索
handlecolse() {
this.search_value = ""
this.search_list = []
},
// 历史搜索
handleSearchHistory(text) {
let that = this
that.search_value = text
that.handleSerach()
},
// 早午晚餐筛选
changeClickType(e) {
this.search_value = ""
this.search_list = []
this.foodName = this.foodItem[e.target.value].name
},
//删除购物车食材
handledelactive(ite) {
let that = this
uni.showModal({
content: `是否删除[${ite.name}]？`,
success: (res) => {
if (res.confirm) {
this.$model.delCEatAction({
aud_id: that.user.aud_id,
eat_log_id: ite.food_id
}).then(res => {
that.ActiveList.splice(that.ActiveList.indexOf(ite), 1);
蓝牙设备对接
2026-03-25 17:27:29 +08:00
that.$store.dispatch("getCountFoodInfo", {
aud_id: that.user.aud_id,
time: that.time
})
厨房秤功能
2026-03-23 16:23:40 +08:00
that.handleAddEveryMealFood()
})
}
}
})
},
// 开始录音
onVoiceTouchStart() {
let that = this
that.showAutoSearchDlg = true
that.isShop = false
that.voiceManager.start({
duration: 60000,
lang: "zh_CN"
})
},
// 停止录音
onVoiceTouchEnd() {
let that = this
that.showAutoSearchDlg = false
that.voiceManager.stop()
},
// 取消录音
cancelRecording() {
// #ifdef MP-WEIXIN
if (this.voiceManager) {
this.voiceManager.stop()
this.showAutoSearchDlg = false
}
// #endif
},
unitConversion(unit) {
if (unit == 'kcal') {
return '千卡'
} else if (unit == 'g') {
return '克'
}
return unit
},
// 下发营养含量
handletoggleUnit(val, unit, ite) {
let that = this
蓝牙设备对接
2026-03-25 17:27:29 +08:00
let weight = Number(that.$ble.convertToGrams(val, unit)) / 100
厨房秤功能
2026-03-23 16:23:40 +08:00
const dataArray = that.buildNutritionData({
fat: weight * ite[2].value,
calorie: weight * ite[0].value,
carbohydrate: weight * ite[3].value,
protein: weight * ite[1].value,
fiber: 0
});
const arrayBuffer = new ArrayBuffer(dataArray.length);
const uint8Array = new Uint8Array(arrayBuffer);
dataArray.forEach((value, index) => {
uint8Array[index] = value;
});
console.log("营养数据", arrayBuffer)
that.sendArrayBuffer(arrayBuffer);
},
// 构建营养成分数据包
buildNutritionData(data) {
// 头信息
const header = 0xC5; // 同步头
const dataLength = 0x11; // 数据长度：17字节
const cmd = 0x04; // CMD字节
const packetInfo = 0x41; // 包信息：总1包，第1包
// 转换营养成分值（×10并取整）
const fatValue = Math.round(data.fat * 10);
const calorieValue = Math.round(data.calorie * 10);
const carbValue = Math.round(data.carbohydrate * 10);
const fiberValue = Math.round(data.fiber * 10);
const proteinValue = Math.round(data.protein * 10);
// 构建数据数组
const dataArray = [];
// 添加头部
dataArray.push(header); // 0xC5
dataArray.push(dataLength); // 0x11
dataArray.push(cmd); // 0x04
dataArray.push(packetInfo); // 0x41
// 添加脂肪数据（大端序，3字节）
dataArray.push((fatValue >> 16) & 0xFF); // 高位字节
dataArray.push((fatValue >> 8) & 0xFF); // 中位字节
dataArray.push(fatValue & 0xFF); // 低位字节
// 添加卡路里数据（大端序，3字节）
dataArray.push((calorieValue >> 16) & 0xFF);
dataArray.push((calorieValue >> 8) & 0xFF);
dataArray.push(calorieValue & 0xFF);
// 添加碳水化合物数据（大端序，3字节）
dataArray.push((carbValue >> 16) & 0xFF);
dataArray.push((carbValue >> 8) & 0xFF);
dataArray.push(carbValue & 0xFF);
// 添加膳食纤维数据（大端序，3字节）
dataArray.push((fiberValue >> 16) & 0xFF);
dataArray.push((fiberValue >> 8) & 0xFF);
dataArray.push(fiberValue & 0xFF);
// 添加蛋白质数据（大端序，3字节）
dataArray.push((proteinValue >> 16) & 0xFF);
dataArray.push((proteinValue >> 8) & 0xFF);
dataArray.push(proteinValue & 0xFF);
// 计算校验和（除同步头外的所有字节的和，取低8位）
let checksum = 0;
for (let i = 1; i < dataArray.length; i++) {
checksum = (checksum + dataArray[i]) & 0xFF;
}
// 添加校验和
dataArray.push(checksum);
console.log('构建的数据包:', dataArray);
console.log('十六进制:', dataArray.map(b => b.toString(16).padStart(2, '0')).join(' '));
return dataArray;
},
sendArrayBuffer(buffer) {
let that = this
uni.writeBLECharacteristicValue({
deviceId: that.bleValue.deviceId,
serviceId: that.bleValue.serviceId,
蓝牙设备对接
2026-03-25 17:27:29 +08:00
characteristicId: that.bleValue.foodWrite,
厨房秤功能
2026-03-23 16:23:40 +08:00
value: buffer,
success: res => {
console.log('下发指令成功', res.errMsg)
},
fail: res => {
console.log("下发指令失败", res);
},
})
},
}
}
</script>
<style lang="scss" scoped>
.content {
display: flex;
flex-direction: column;
align-items: center;
background-color: #f7f7f7;
min-height: 100vh;
}
.serachBox {
height: 140rpx;
z-index: 9;
padding: 15px 10px;
.type {
padding-bottom: 10px;
width: 100%;
text-align: center;
font-size: 30rpx;
font-weight: bold;
}
.serach-box {
height: 80rpx;
border-radius: 20rpx;
position: relative;
background-color: #fff;
}
.searchInput {
width: calc(100% - 120rpx);
position: absolute;
left: 0;
right: 120rpx;
height: 80rpx;
padding: 0;
margin: 0;
icon {
position: absolute;
right: 20rpx;
top: 20rpx;
display: flex;
z-index: 9;
}
}
.searchBtn {
position: absolute;
width: 120rpx;
right: 0px;
height: 80rpx;
line-height: 80rpx;
background: $maincolor;
border-radius: 0 20rpx 20rpx 0;
text-align: center;
color: #fff;
}
input {
height: 80rpx;
padding: 0 5px;
text-align: center;
position: absolute;
left: 0px;
right: 0px;
border-radius: 20rpx;
}
.icon {
width: 100rpx;
height: 80rpx;
position: absolute;
right: 30rpx;
display: flex;
align-items: center;
justify-content: center;
}
image {
width: 15px;
height: 15px;
margin-left: 10px;
}
}
.content-box {
border-radius: 20rpx 20rpx 0 0;
position: relative;
z-index: 9;
width: calc(100% - 20px);
margin: 100px 10px 270rpx;
background: #fff;
}
.search-history {
width: 100%;
height: auto;
overflow: hidden;
uni-icons {
color: #333333;
font-size: 60rpx;
position: absolute;
top: 13px;
right: 30rpx;
}
}
.history-list {
width: calc(100% - 40rpx);
margin: 20rpx 20rpx 0;
height: auto;
display: flex;
flex-wrap: wrap;
.history-list-item {
border: 1px solid #dfdfdf;
padding: 3px 24rpx;
border-radius: 20rpx;
margin-bottom: 20rpx;
margin-right: 20rpx;
}
}
.title {
width: 90%;
font-size: 30rpx;
font-weight: bold;
color: #000;
margin-top: 30rpx;
margin-left: 30rpx;
display: flex;
align-items: center;
}
.popular-container {
width: 100%;
margin-top: 30rpx;
.popular-food-item {
display: flex;
flex-direction: column;
align-items: center;
margin: 20rpx;
padding: 20rpx;
box-sizing: border-box;
border-radius: 20rpx;
background: linear-gradient(#EDFFF4, #ffffff 100%);
.food-title {
font-size: 34rpx;
font-weight: 700;
}
.popular-food-inner {
display: flex;
flex-wrap: wrap;
justify-content: flex-start;
width: 100%;
margin-top: 20rpx;
.popular-food-subitem {
display: flex;
align-items: center;
margin-bottom: 20rpx;
padding: 10rpx 20rpx;
background-color: #fff;
margin-right: 20rpx;
border-radius: 20rpx;
border: 1px solid #f7f7f7;
}
}
}
}
.search_list {
display: flex;
padding: 0 20rpx;
flex-wrap: wrap;
margin: 95px 20rpx 90px;
width: calc(100% - 80rpx);
justify-content: space-between;
background: #fff;
border-radius: 20rpx;
.search_list_item {
width: 100%;
display: flex;
align-items: center;
border-bottom: 1px solid #f7f7f7;
padding: 20rpx 0;
image {
width: 90rpx;
height: 90rpx;
margin-right: 20rpx;
border-radius: 50%;
border: 1px solid #f7f7f7;
}
text {
width: 100%;
display: inline-block;
}
:nth-child(2) text {
margin-top: 5px;
}
}
}
.activeList {
z-index: 12;
bottom: 100rpx;
.title {
font-weight: bold;
margin: 5px 0;
}
.list {
padding-bottom: 55px;
.name {
margin-right: 5px;
}
}
}
.auto-search-dialog {
display: flex;
justify-content: center;
align-items: center;
position: fixed;
left: 0;
top: 0;
width: 100%;
bottom: 75px;
background-color: rgba(0, 0, 0, 0.5);
z-index: 999;
.auto-search-inner {
display: flex;
flex-direction: column;
justify-content: space-between;
align-items: center;
position: relative;
width: 50%;
padding: 60rpx 0;
background-color: #fff;
border-radius: 20rpx;
box-shadow: 0 0 20rpx #ccc;
}
}
.footBtn {
position: fixed;
width: 100%;
bottom: 0;
padding-top: 30rpx;
background: #fff;
display: flex;
justify-content: space-around;
view {
color: #fff;
width: auto;
padding: 5px 40rpx;
background: $maincolor;
margin-bottom: 30rpx;
display: flex;
align-items: center;
border-radius: 20rpx;
}
}
.groupbtn {
display: flex;
align-items: center;
justify-content: space-between;
padding: 0 20rpx;
position: fixed;
bottom: 0rpx;
left: 0;
right: 0;
height: 60px;
padding-bottom: 15px;
z-index: 15;
background-color: #fff;
overflow: hidden;
box-shadow: 0px 1px 5px 2px #dfe2e1fc;
.subbtn {
color: #fff;
width: 40%;
text-align: center;
border-radius: 20rpx;
height: 35px;
line-height: 35px;
background-color: #f0ae43;
}
.left {
width: 31%;
display: flex;
align-items: center;
.che {
width: 80rpx;
height: 80rpx;
position: relative;
text {
position: absolute;
height: 30rpx;
background: red;
width: 30rpx;
border-radius: 50%;
display: inline-block;
color: #fff;
line-height: 30rpx;
text-align: center;
font-size: 24rpx;
right: 0;
top: 5px;
}
image,
.t-icon {
width: 100%;
height: 100%;
border-radius: 50%;
}
}
.type {
image {
width: 15px;
height: 15px;
}
}
}
.mic-icon {
color: #fff;
width: 31%;
padding: 8px 0;
background: $maincolor;
display: flex;
align-items: center;
justify-content: center;
border-radius: 20rpx;
}
.mic-icon2 {
background: $yellowcolor ;
}
}
.wrapper {
.box {
top: 40px;
background-color: #dfdfdf;
}
.box-info {
border-radius: 20rpx;
padding: 20rpx;
background-color: #fff;
.val {
display: flex;
justify-content: center;
align-items: center;
width: 70%;
padding: 30rpx 0;
border-radius: 20rpx;
background-color: #F8F8F8;
margin: 30rpx auto;
input {
border-bottom: 1px soild #fff;
}
.unit {
width: auto;
display: inline-block;
padding: 10rpx;
margin-left: 30rpx;
font-size: 28rpx;
color: #fff;
border-radius: 8rpx;
background-color: #F0AE43;
}
}
}
.foodItem {
display: flex;
justify-content: space-between;
align-items: center;
margin-top: 10rpx;
.more {
padding: 6rpx 10rpx;
border-radius: 12rpx;
color: #fff;
background-color: #f0ae43;
image {
width: 50rpx;
height: 50rpx;
}
}
.left {
width: 65%;
display: flex;
align-items: center;
image {
width: 90rpx;
height: 90rpx;
border-radius: 50%;
border: 1px solid #f7f7f7;
}
.info {
display: flex;
flex-direction: column;
justify-content: center;
margin-left: 30rpx;
.name {
font-size: 26rpx;
color: #333;
text-align: left;
margin-bottom: 10rpx;
}
.kcal {
font-size: 24rpx;
color: #666;
}
}
}
}
.foodInfo {
display: flex;
justify-content: space-around;
margin-top: 30rpx;
box-sizing: border-box;
.foodInfoItem {
display: flex;
flex-direction: column;
align-items: center;
.name {
display: flex;
align-items: center;
font-size: 24rpx;
color: #8F8F8F;
.color {
width: 6rpx;
height: 20rpx;
margin-right: 10rpx;
border-radius: 3rpx;
}
}
.value {
font-size: 28rpx;
margin-top: 10rpx;
}
}
}
.blue-tooth {
margin-top: 10rpx;
}
.foodDetail {
background: #fff;
border-radius: 20rpx;
margin-top: 20rpx;
}
.foodContent {
padding: 0 10rpx 30rpx;
margin-top: 0;
.title {
margin-left: 0;
}
.progress {
justify-content: space-between;
.info {
width: calc(100% - 280rpx);
.info-item {
display: flex;
align-items: center;
margin-top: 20rpx;
justify-content: space-between;
width: 100%;
.weight {
color: #f7f7f7;
background: none;
padding: 0;
text {
display: inline-block;
width: 30px;
margin: 0 10rpx;
color: #666;
}
}
.name {
text-align: left;
font-size: 28rpx;
font-weight: 500;
}
.color {
width: 6rpx;
height: 20rpx;
margin-right: 10rpx;
border-radius: 3rpx;
display: inline-block;
}
}
}
}
.tips {
display: flex;
justify-content: space-between;
border-bottom: 1px solid #f1f1f1;
padding: 16rpx 0;
margin-top: 10rpx;
}
.foodDetailList {
margin-top: 10rpx;
.foodDetailItem {
display: flex;
justify-content: space-between;
padding: 20rpx 0;
box-sizing: border-box;
.name {
width: 70%;
font-size: 24rpx;
color: #777;
text-align: left;
}
.val {
width: 30%;
font-size: 24rpx;
font-weight: 700;
color: #333;
text-align: right;
}
}
}
}
.icon-error {
position: absolute;
right: 20rpx;
top: -40rpx;
background: #fff;
font-size: 80rpx;
width: 80rpx;
height: 80rpx;
border-radius: 50%;
}
.box2 {
left: 0;
right: 0;
top: 80rpx;
bottom: 0;
position: absolute;
padding: 20rpx;
padding-bottom: 90px;
background-color: #dfdfdf;
.jishiqi {
margin-top: 15px;
width: calc(100% - 20px);
overflow: hidden;
background: #fff;
padding: 10px;
border-radius: 10px;
height: 340rpx;
.chart-wrap {
margin-top: -15px;
}
.center {
height: 270rpx;
top: 55rpx;
border: none;
width: 260rpx;
position: absolute;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.mubiao {
width: 100%;
text-align: center;
font-size: 26rpx;
}
.right {
margin-top: 10px;
}
}
.box_list {
position: absolute;
left: 10px;
right: 10px;
bottom: 90px;
background: #fff;
border-radius: 10px;
margin-top: 15px;
overflow: hidden;
top: 420rpx;
.left {
width: 80px;
background: #fff;
position: absolute;
left: 0px;
top: 0px;
bottom: 0px;
display: flex;
border-radius: 10px;
flex-direction: column;
view {
height: 25%;
display: flex;
align-items: center;
justify-content: center;
}
.active {
border-radius: 10px;
background-color: #EDFFF4;
color: #3CB383;
}
}
.box_list_item {
position: absolute;
top: 10px;
left: 90px;
right: 0;
bottom: 0;
overflow: scroll;
padding-bottom: 15px;
.length {
width: 100%;
height: 35px;
line-height: 35px;
margin-top: -5px;
font-weight: bold;
}
.item {
width: 100%;
height: 50px;
display: flex;
padding: 5px 0;
position: relative;
align-items: center;
justify-content: space-between;
border-bottom: 1px solid #f7f7f7;
.item-left {
width: calc(100% - 40px);
display: flex;
align-items: center;
image {
width: 90rpx;
height: 90rpx;
border-radius: 50%;
border: 1px solid #f7f7f7;
}
.name {
width: calc(100% - 100rpx);
display: flex;
flex-direction: column;
margin-left: 10px;
height: 40px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
justify-content: space-between;
text {
width: 100%;
}
}
.weight {
font-size: 24rpx;
color: #999;
}
}
}
.icon-ashbin {
position: absolute;
right: 10px;
top: 15px;
color: red !important;
font-size: 18px !important;
}
}
}
}
}
.btn {
color: #fff;
width: 60%;
margin: auto;
background-color: #f0ae43;
}
.button-container {
position: absolute;
top: 20rpx;
right: 30rpx;
font-size: 40rpx;
image {
width: 50rpx;
height: 50rpx;
}
}
.footBtn {
position: fixed;
width: 100%;
bottom: 0px;
padding-bottom: 30rpx;
padding-top: 30rpx;
background: #fff;
display: flex;
z-index: 99;
justify-content: space-around;
view {
color: #fff;
width: 80%;
padding: 8px 40rpx;
background: $maincolor;
margin-bottom: 30rpx;
display: flex;
align-items: center;
justify-content: center;
border-radius: 20rpx;
}
}
.wrapperScan {
.auto-search-dialog {
bottom: 0;
text {
font-size: 16px;
font-weight: bold;
margin-bottom: 20px;
margin-top: -10px;
}
}
}
</style>