最新版厨房秤
This commit is contained in:
qcl_123
parent
31facc9457
commit
f2c0fcff4c
2
App.vue
2
App.vue
|
|
@ -40,7 +40,7 @@
|
|||
flex-direction: column;
|
||||
align-items: center;
|
||||
/* justify-content: center; */
|
||||
background-color: #efefef;
|
||||
background-color: #f7f7f7;
|
||||
min-height: 100vh;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -7,25 +7,37 @@ page {
|
|||
.ml-5{
|
||||
margin-left: 5px !important;
|
||||
}
|
||||
.mr-5{
|
||||
margin-right: 5px !important;
|
||||
}
|
||||
.mt-5 {
|
||||
margin-top: 5px !important;
|
||||
}
|
||||
|
||||
.mt-10 {
|
||||
margin-top: 10px !important;
|
||||
margin-top: 20rpx !important;
|
||||
}
|
||||
|
||||
.mt-15 {
|
||||
margin-top: 15px !important;
|
||||
margin-top: 30rpx !important;
|
||||
}
|
||||
|
||||
.mt-20 {
|
||||
margin-top: 20px !important;
|
||||
margin-top: 40rpx !important;
|
||||
}
|
||||
.size12{
|
||||
font-size: 26rpx !important;
|
||||
}
|
||||
.size14{
|
||||
font-size: 28rpx !important;
|
||||
}
|
||||
.size22{
|
||||
font-size: 36rpx !important;
|
||||
font-weight: bold !important;
|
||||
}
|
||||
.c999{
|
||||
color: #999 !important;
|
||||
}
|
||||
.bold {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
|
@ -36,19 +48,19 @@ page {
|
|||
}
|
||||
.btn{
|
||||
width: auto;
|
||||
border-radius: 10px;
|
||||
border-radius: 20rpx;
|
||||
background-color: #45C570;
|
||||
text-align: center;
|
||||
height: 40px;
|
||||
line-height: 40px;
|
||||
margin: 15px;
|
||||
height: 80rpx;
|
||||
line-height: 80rpx;
|
||||
margin: 30rpx;
|
||||
}
|
||||
.endtext{
|
||||
color: #999;
|
||||
margin-top: 20px;
|
||||
margin-top: 40rpx;
|
||||
text-align: center;
|
||||
width: 100%;
|
||||
margin-bottom: 15px;
|
||||
margin-bottom: 30rpx;
|
||||
}
|
||||
|
||||
.quan {
|
||||
|
|
@ -60,8 +72,8 @@ page {
|
|||
.quan::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
width: 40rpx;
|
||||
height: 40rpx;
|
||||
width: 35rpx;
|
||||
height: 35rpx;
|
||||
left: 0px;
|
||||
z-index: 22;
|
||||
background: #3CB383;
|
||||
|
|
@ -71,16 +83,16 @@ page {
|
|||
.quan::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
width: 40rpx;
|
||||
height: 40rpx;
|
||||
left: 15rpx;
|
||||
width: 35rpx;
|
||||
height: 35rpx;
|
||||
left: 17rpx;
|
||||
z-index: 11;
|
||||
background: #9CDCBF;
|
||||
border-radius: 50%;
|
||||
}
|
||||
// .列表样式
|
||||
.footlist {
|
||||
margin: 15px 0;
|
||||
margin: 30rpx 0;
|
||||
width: 100%;
|
||||
height: auto;
|
||||
overflow: hidden;
|
||||
|
|
@ -91,7 +103,7 @@ page {
|
|||
// justify-content: space-between;
|
||||
|
||||
.list {
|
||||
margin-bottom: 10px;
|
||||
margin-bottom: 20rpx;
|
||||
// height: auto;
|
||||
overflow: auto;
|
||||
break-inside: avoid;
|
||||
|
|
@ -101,7 +113,7 @@ page {
|
|||
|
||||
.item {
|
||||
color: #666;
|
||||
width: calc(100% - 10px);
|
||||
width: calc(100% - 20rpx);
|
||||
position: initial;
|
||||
background: #fff;
|
||||
border-radius: 0 0 5px 5px;
|
||||
|
|
@ -128,7 +140,7 @@ page {
|
|||
|
||||
.zan {
|
||||
.iconfont {
|
||||
font-size: 16px;
|
||||
font-size: 32rpx;
|
||||
position: inherit !important;
|
||||
}
|
||||
|
||||
|
|
@ -136,8 +148,8 @@ page {
|
|||
}
|
||||
}
|
||||
.footbox {
|
||||
// width: calc(100% - 30px);
|
||||
// margin-top: 40px;
|
||||
// width: calc(100% - 60rpx);
|
||||
// margin-top: 80rpx;
|
||||
position: relative;
|
||||
|
||||
.item {
|
||||
|
|
@ -148,9 +160,9 @@ page {
|
|||
right: 5px;
|
||||
background: #403f3f5c;
|
||||
padding: 5px;
|
||||
font-size: 15px;
|
||||
font-size: 30rpx;
|
||||
z-index: 999999;
|
||||
border-radius:0 0 10px 10px;
|
||||
border-radius:0 0 20rpx 20rpx;
|
||||
|
||||
.title {
|
||||
width: 100%;
|
||||
|
|
@ -162,23 +174,23 @@ page {
|
|||
.name {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
font-size: 12px;
|
||||
font-size: 26rpx;
|
||||
float: left;
|
||||
width: 70%;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
height: 30px;
|
||||
line-height: 30px;
|
||||
height: 60rpx;
|
||||
line-height: 60rpx;
|
||||
|
||||
image {
|
||||
width: 25px;
|
||||
height: 25px;
|
||||
width: 50rpx;
|
||||
height: 50rpx;
|
||||
border-radius: 50%;
|
||||
margin-right: 5px;
|
||||
}
|
||||
text{
|
||||
width: calc(100% - 30px);
|
||||
width: calc(100% - 60rpx);
|
||||
display: inline-block;
|
||||
}
|
||||
}
|
||||
|
|
@ -186,21 +198,21 @@ page {
|
|||
.zan {
|
||||
width: 30%;
|
||||
float: left;
|
||||
font-size: 12px;
|
||||
font-size: 26rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
height: auto;
|
||||
overflow: auto;
|
||||
height: 30px;
|
||||
line-height: 30px;
|
||||
height: 60rpx;
|
||||
line-height: 60rpx;
|
||||
justify-content: flex-end;
|
||||
|
||||
.iconfont {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
position: absolute;
|
||||
right: 15px;
|
||||
bottom: 10px;
|
||||
right: 30rpx;
|
||||
bottom: 20rpx;
|
||||
text-align: right;
|
||||
z-index: 99;
|
||||
margin-right: 5px;
|
||||
|
|
@ -215,7 +227,7 @@ page {
|
|||
}
|
||||
// 菜谱左侧导航
|
||||
.menu {
|
||||
width: calc(100% - 30px);
|
||||
width: calc(100% - 60rpx);
|
||||
height: auto;
|
||||
overflow: hidden;
|
||||
|
||||
|
|
@ -225,7 +237,7 @@ page {
|
|||
width: 100px;
|
||||
bottom: 0;
|
||||
top: 55px;
|
||||
line-height: 45px;
|
||||
line-height: 100rpx;
|
||||
font-size: 14px;
|
||||
font-weight: bold;
|
||||
overflow-y: scroll;
|
||||
|
|
@ -233,7 +245,7 @@ page {
|
|||
height: calc(100vh - 70px);
|
||||
|
||||
.name {
|
||||
padding-left: 15px;
|
||||
padding-left: 30rpx;
|
||||
white-space: nowrap;
|
||||
overflow-x: auto;
|
||||
width: 160rpx;
|
||||
|
|
@ -259,7 +271,7 @@ page {
|
|||
right: 0;
|
||||
top: 55px;
|
||||
bottom: 0;
|
||||
padding-bottom: 15px;
|
||||
padding-bottom: 30rpx;
|
||||
height: calc(100vh - 70px);
|
||||
overflow-y: scroll;
|
||||
background: #fff;
|
||||
|
|
@ -269,14 +281,14 @@ page {
|
|||
}
|
||||
|
||||
.right_list {
|
||||
padding: 0 10px;
|
||||
padding: 0 20rpx;
|
||||
|
||||
.title {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
line-height: 45px;
|
||||
line-height: 100rpx;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
|
|
@ -288,13 +300,13 @@ page {
|
|||
image {
|
||||
width: 140rpx;
|
||||
height: 140rpx;
|
||||
border-radius: 10px;
|
||||
border-radius: 20rpx;
|
||||
}
|
||||
|
||||
text {
|
||||
display: block;
|
||||
text-align: center;
|
||||
margin-bottom: 10px;
|
||||
margin-bottom: 20rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -306,25 +318,25 @@ page {
|
|||
|
||||
.title,
|
||||
.textarea {
|
||||
width: calc(100% - 20px);
|
||||
margin-bottom: 10px;
|
||||
width: calc(100% - 40rpx);
|
||||
margin-bottom: 20rpx;
|
||||
background: #fff;
|
||||
padding: 0 10px;
|
||||
border-radius: 10px;
|
||||
padding: 0 20rpx;
|
||||
border-radius: 20rpx;
|
||||
|
||||
}
|
||||
|
||||
.food,
|
||||
.step {
|
||||
width: calc(100% - 20px);
|
||||
margin-bottom: 10px;
|
||||
width: calc(100% - 40rpx);
|
||||
margin-bottom: 20rpx;
|
||||
background: #fff;
|
||||
padding: 10px;
|
||||
border-radius: 10px;
|
||||
padding: 20rpx;
|
||||
border-radius: 20rpx;
|
||||
|
||||
.h4 {
|
||||
height: 30px;
|
||||
line-height: 30px;
|
||||
height: 60rpx;
|
||||
line-height: 60rpx;
|
||||
font-size: 14px;
|
||||
display: flex;
|
||||
font-weight: bold;
|
||||
|
|
@ -333,8 +345,8 @@ page {
|
|||
text {
|
||||
font-size: 14px;
|
||||
border: 1px solid #dfdfdf;
|
||||
border-radius: 15PX;
|
||||
padding: 0 20px;
|
||||
border-radius: 30rpx;
|
||||
padding: 0 40rpx;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -344,17 +356,17 @@ page {
|
|||
.item {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
width: calc(100% - 20px);
|
||||
width: calc(100% - 40rpx);
|
||||
background: #f7f7f7;
|
||||
border-radius: 10px;
|
||||
padding: 8px 10px;
|
||||
margin-top: 10px;
|
||||
border-radius: 20rpx;
|
||||
padding: 8px 20rpx;
|
||||
margin-top: 20rpx;
|
||||
}
|
||||
|
||||
.name {
|
||||
width: 30%;
|
||||
border-right: 1px solid #999;
|
||||
margin-right: 15px;
|
||||
margin-right: 30rpx;
|
||||
}
|
||||
|
||||
.input {
|
||||
|
|
@ -395,8 +407,8 @@ page {
|
|||
height: 35px;
|
||||
line-height: 35px;
|
||||
background: $maincolor;
|
||||
margin-top: 15px;
|
||||
border-radius: 10px;
|
||||
margin-top: 30rpx;
|
||||
border-radius: 20rpx;
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
|
|
@ -405,13 +417,13 @@ page {
|
|||
.top {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
margin: 10px 0;
|
||||
margin: 20rpx 0;
|
||||
font-size: 14px;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.textarea {
|
||||
margin-top: 10px;
|
||||
margin-top: 20rpx;
|
||||
background-color: #f7f7f7;
|
||||
}
|
||||
|
||||
|
|
@ -436,8 +448,8 @@ page {
|
|||
text-align: center;
|
||||
height: 35px;
|
||||
line-height: 35px;
|
||||
border-radius: 10px;
|
||||
margin-bottom: 15px;
|
||||
border-radius: 20rpx;
|
||||
margin-bottom: 30rpx;
|
||||
}
|
||||
|
||||
.subbtn {
|
||||
|
|
@ -472,16 +484,16 @@ page {
|
|||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
overflow: scroll;
|
||||
padding-bottom: 50px;
|
||||
padding-bottom: 100rpx;
|
||||
|
||||
.item {
|
||||
width: calc(100% - 20px);
|
||||
width: calc(100% - 40rpx);
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
height: 33px;
|
||||
height: 66rpx;
|
||||
align-items: center;
|
||||
padding-bottom: 5px;
|
||||
padding: 5px 10px;
|
||||
padding: 5px 20rpx;
|
||||
border-bottom: 1px solid #dfdfdf;
|
||||
|
||||
text {
|
||||
|
|
@ -490,7 +502,7 @@ page {
|
|||
|
||||
icon {
|
||||
color: $maincolor;
|
||||
font-size: 16px;
|
||||
font-size: 32rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -502,15 +514,15 @@ page {
|
|||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
padding: 10px;
|
||||
border-radius: 10px 10px 0 0;
|
||||
padding: 20rpx;
|
||||
border-radius: 20rpx 20rpx 0 0;
|
||||
|
||||
.title {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
|
||||
.cancel {
|
||||
width: 80px;
|
||||
width: 160rpx;
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
|
|
@ -521,9 +533,9 @@ page {
|
|||
.weight {
|
||||
width: auto;
|
||||
display: flex;
|
||||
font-size: 24rpx;
|
||||
font-size: 26rpx;
|
||||
background: $uni-color-warning;
|
||||
border-radius: 10px;
|
||||
border-radius: 20rpx;
|
||||
color: #fff;
|
||||
padding: 3px 8px;
|
||||
align-items: center;
|
||||
|
|
@ -536,20 +548,20 @@ page {
|
|||
.name {
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
font-size: 16px;
|
||||
font-size: 32rpx;
|
||||
font-weight: bold;
|
||||
// margin-top:-15px
|
||||
// margin-top:-30rpx
|
||||
}
|
||||
|
||||
.val {
|
||||
text-align: center;
|
||||
margin: 15px 0;
|
||||
margin: 30rpx 0;
|
||||
|
||||
text {
|
||||
display: inline-block;
|
||||
width: 80px;
|
||||
width:160rpx;
|
||||
border-bottom: 1px solid #dfdfdf;
|
||||
font-size: 22px;
|
||||
font-size: 44rpx;
|
||||
font-weight: bold;
|
||||
text-align: center;
|
||||
}
|
||||
|
|
@ -579,7 +591,7 @@ page {
|
|||
height: 70rpx;
|
||||
background-color: #fff;
|
||||
border-radius: 10rpx;
|
||||
font-size: 18px;
|
||||
font-size: 36rpx;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
|
|
@ -592,8 +604,8 @@ page {
|
|||
}
|
||||
|
||||
image {
|
||||
width: 25px;
|
||||
height: 25px;
|
||||
width: 50rpx;
|
||||
height: 50rpx;
|
||||
}
|
||||
|
||||
.MymaskList2 {
|
||||
|
|
@ -602,9 +614,9 @@ page {
|
|||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
position: absolute;
|
||||
right: 10px;
|
||||
top: 10px;
|
||||
bottom: 15px;
|
||||
right: 20rpx;
|
||||
top: 20rpx;
|
||||
bottom: 30rpx;
|
||||
|
||||
.maskListItem {
|
||||
width: 100%;
|
||||
|
|
@ -624,8 +636,8 @@ page {
|
|||
}
|
||||
|
||||
.close {
|
||||
width: 32px;
|
||||
height: 20px;
|
||||
width: 64rpx;
|
||||
height: 40rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -648,14 +660,14 @@ page {
|
|||
}
|
||||
.nolist {
|
||||
width: 100%;
|
||||
padding-top: 50px;
|
||||
padding-top: 100rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-wrap: wrap;
|
||||
justify-content: center;
|
||||
|
||||
icon {
|
||||
font-size: 70px !important;
|
||||
font-size: 140rpx !important;
|
||||
color: #ccc;
|
||||
}
|
||||
|
||||
|
|
@ -665,3 +677,245 @@ page {
|
|||
text-align: center;
|
||||
}
|
||||
}
|
||||
.foodDetail {
|
||||
background-color: #F7F7F7;
|
||||
padding: 20rpx;
|
||||
box-sizing: border-box;
|
||||
|
||||
.foodInfo {
|
||||
display: flex;
|
||||
width: 100%;
|
||||
padding: 30rpx;
|
||||
border-radius: 20rpx;
|
||||
box-sizing: border-box;
|
||||
background-color: #fff;
|
||||
box-sizing: 0 0 20rpx #f1f1f1;
|
||||
|
||||
image {
|
||||
width: 90rpx;
|
||||
height: 90rpx;
|
||||
border-radius: 15rpx;
|
||||
}
|
||||
|
||||
.info {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
margin-left: 30rpx;
|
||||
|
||||
.name {
|
||||
font-size: 28rpx;
|
||||
font-weight: 700;
|
||||
margin-bottom: 10rpx;
|
||||
}
|
||||
|
||||
.kcal {
|
||||
width: 100% !important;
|
||||
font-size: 26rpx;
|
||||
color: #666;
|
||||
padding: 0 !important;
|
||||
margin: 0 !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.foodContent {
|
||||
width: 100%;
|
||||
padding: 30rpx;
|
||||
margin-top: 16rpx;
|
||||
box-sizing: border-box;
|
||||
border-radius: 20rpx;
|
||||
box-sizing: border-box;
|
||||
background-color: #fff;
|
||||
box-sizing: 0 0 20rpx #f1f1f1;
|
||||
|
||||
.title {
|
||||
font-size: 28rpx;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.progress {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
.chart-wrap {
|
||||
position: relative;
|
||||
width: 280rpx;
|
||||
height: 280rpx;
|
||||
margin-top: -30rpx;
|
||||
margin-left: -20px;
|
||||
|
||||
// .uchart-kcal {
|
||||
// position: absolute;
|
||||
// left: 60rpx;
|
||||
// top: 120rpx;
|
||||
// width: 130rpx;
|
||||
// font-size: 40rpx;
|
||||
// text-align: center;
|
||||
// z-index: 9;
|
||||
// }
|
||||
}
|
||||
|
||||
.info {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
font-size: 26rpx;
|
||||
height: 200rpx;
|
||||
|
||||
.info-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-top: 20rpx;
|
||||
|
||||
.color {
|
||||
width: 6rpx;
|
||||
height: 20rpx;
|
||||
margin-right: 10rpx;
|
||||
border-radius: 3rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.tips {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
border-bottom: 1px solid #f1f1f1;
|
||||
padding: 16rpx 0;
|
||||
font-size: 26rpx;
|
||||
margin-top: 10rpx;
|
||||
}
|
||||
|
||||
.foodDetailList {
|
||||
margin-top: 10rpx;
|
||||
|
||||
.foodDetailItem {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
padding: 20rpx 0;
|
||||
box-sizing: border-box;
|
||||
|
||||
.name {
|
||||
font-size: 26rpx;
|
||||
color: #777;
|
||||
}
|
||||
|
||||
.val {
|
||||
font-size: 26rpx;
|
||||
font-weight: 700;
|
||||
color: #333;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.jishiqi {
|
||||
margin-top: 30rpx;
|
||||
|
||||
.left {
|
||||
float: left;
|
||||
width: 270rpx;
|
||||
height: 320rpx;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
|
||||
.center {
|
||||
border: none;
|
||||
width: 280rpx;
|
||||
height: 210rpx;
|
||||
position: absolute;
|
||||
top: 64rpx;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
|
||||
text {
|
||||
font-size: 40rpx;
|
||||
font-weight: bold;
|
||||
margin: 20rpx 0;
|
||||
}
|
||||
}
|
||||
|
||||
.mubiao {
|
||||
width: 100%;
|
||||
margin-top: 32rpx;
|
||||
text-align: center;
|
||||
font-size: 26rpx;
|
||||
|
||||
text {
|
||||
font-weight: bold;
|
||||
color: $maincolor;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.right {
|
||||
width: calc(100% - 290rpx);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
float: left;
|
||||
height: 300rpx;
|
||||
margin-left: 20rpx;
|
||||
margin-top: 10px;
|
||||
justify-content: space-between;
|
||||
|
||||
.item {
|
||||
width: 100%;
|
||||
font-size: 26rpx;
|
||||
|
||||
image{
|
||||
width: 40rpx;
|
||||
height: 40rpx;
|
||||
}
|
||||
|
||||
.left-icon {
|
||||
width: 90rpx;
|
||||
float: left;
|
||||
height: 80rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.right-info {
|
||||
width: calc(100% - 100rpx);
|
||||
float: left;
|
||||
height: 74rpx;
|
||||
margin-left: 5px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
|
||||
.right-info-top {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.right-info-bottom {
|
||||
width: 100%;
|
||||
height: 8px;
|
||||
background-color: #f3f7f5;
|
||||
border-radius: 5px;
|
||||
position: relative;
|
||||
|
||||
.val {
|
||||
width: 45%;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
z-index: 9;
|
||||
height: 16rpx;
|
||||
border-radius: 5px;
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -1,8 +1,8 @@
|
|||
|
||||
.t-icon {
|
||||
display: inline-block;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
width: 40rpx;
|
||||
height: 40rpx;
|
||||
background-repeat: no-repeat;
|
||||
background-position: center;
|
||||
background-size: 100%;
|
||||
|
|
|
|||
|
|
@ -9,7 +9,7 @@
|
|||
|
||||
.iconfont {
|
||||
font-family: "iconfont" !important;
|
||||
font-size: 20px;
|
||||
font-size: 40rpx;
|
||||
font-style: normal;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
|
|
|||
|
|
@ -16,13 +16,13 @@
|
|||
position: relative;
|
||||
top: 70px;
|
||||
z-index: 99;
|
||||
margin-bottom: 15px;
|
||||
margin-bottom: 30rpx;
|
||||
|
||||
image {
|
||||
width: 70px;
|
||||
height: 70px;
|
||||
margin: auto;
|
||||
margin-bottom: 10px;
|
||||
margin-bottom: 20rpx;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
|
|
@ -40,8 +40,8 @@
|
|||
width: 86%;
|
||||
height: auto;
|
||||
background: #fff;
|
||||
border-radius: 10px;
|
||||
padding: 10px 0;
|
||||
border-radius: 20rpx;
|
||||
padding: 20rpx 0;
|
||||
background-color: #fff;
|
||||
z-index: 99;
|
||||
position: absolute;
|
||||
|
|
@ -54,14 +54,14 @@
|
|||
color: #333;
|
||||
font-size: 40rpx;
|
||||
font-weight: bold;
|
||||
margin-bottom: 15px;
|
||||
margin-left: 15px;
|
||||
margin-bottom: 30rpx;
|
||||
margin-left: 30rpx;
|
||||
}
|
||||
|
||||
.toggle {
|
||||
position: absolute;
|
||||
right: 15px;
|
||||
top: 20px;
|
||||
right: 30rpx;
|
||||
top: 40rpx;
|
||||
}
|
||||
|
||||
.editem {
|
||||
|
|
@ -69,18 +69,18 @@
|
|||
display: flex;
|
||||
align-items: center;
|
||||
font-size: 32rpx;
|
||||
margin: 0 15px;
|
||||
margin: 0 30rpx;
|
||||
justify-content: space-between;
|
||||
flex-wrap: wrap;
|
||||
|
||||
|
||||
.item {
|
||||
width: 100%;
|
||||
margin-bottom: 15px;
|
||||
margin-bottom: 30rpx;
|
||||
|
||||
.text {
|
||||
font-size: 32rpx;
|
||||
margin-bottom: 10px;
|
||||
margin-bottom: 20rpx;
|
||||
}
|
||||
|
||||
.input {
|
||||
|
|
@ -89,15 +89,15 @@
|
|||
display: flex;
|
||||
position: relative;
|
||||
border: #dfdfdf 1px solid;
|
||||
padding: 0 10px;
|
||||
padding: 0 20rpx;
|
||||
border-radius: 5px;
|
||||
}
|
||||
|
||||
input {
|
||||
height: 40px;
|
||||
line-height: 40px;
|
||||
height: 80rpx;
|
||||
line-height: 80rpx;
|
||||
position: absolute;
|
||||
left: 10px;
|
||||
left: 20rpx;
|
||||
right: 0px;
|
||||
z-index: 88;
|
||||
font-size: 32rpx;
|
||||
|
|
@ -116,7 +116,7 @@
|
|||
background: #dfdfdf;
|
||||
font-size: 28rpx;
|
||||
margin: 0;
|
||||
line-height: 40px;
|
||||
line-height: 80rpx;
|
||||
border-radius: 5px;
|
||||
text-align: center;
|
||||
position: absolute;
|
||||
|
|
@ -143,7 +143,7 @@
|
|||
height: 35px;
|
||||
line-height: 35px;
|
||||
display: flex;
|
||||
margin: 0 15px;
|
||||
margin: 0 30rpx;
|
||||
justify-content: center;
|
||||
|
||||
text {
|
||||
|
|
@ -153,13 +153,13 @@
|
|||
}
|
||||
|
||||
.btnlogin {
|
||||
width: calc(100% - 30px);
|
||||
margin: 15px;
|
||||
width: calc(100% - 60rpx);
|
||||
margin: 30rpx;
|
||||
height: 42px;
|
||||
line-height: 42px;
|
||||
background: $btncolor;
|
||||
font-weight: 700;
|
||||
border-radius: 15px;
|
||||
border-radius: 30rpx;
|
||||
text-align: center;
|
||||
color: #fff !important;
|
||||
}
|
||||
|
|
@ -168,7 +168,7 @@
|
|||
.xieyi {
|
||||
font-size: 32rpx;
|
||||
color: $textcolor;
|
||||
margin-left: 10px;
|
||||
margin-left: 20rpx;
|
||||
|
||||
text {
|
||||
border-bottom: 1px solid $textcolor;
|
||||
|
|
|
|||
|
|
@ -506,9 +506,9 @@
|
|||
justify-content: space-around;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 20px;
|
||||
top: 60px;
|
||||
margin-top: 20px;
|
||||
bottom: 40rpx;
|
||||
top: 120rpx;
|
||||
margin-top: 40rpx;
|
||||
|
||||
.weight {
|
||||
background: #fff;
|
||||
|
|
@ -519,17 +519,17 @@
|
|||
|
||||
view {
|
||||
width: 60%;
|
||||
height: 50px;
|
||||
height: 100rpx;
|
||||
display: flex;
|
||||
margin-left: 25%;
|
||||
align-items: flex-end;
|
||||
margin-bottom: 15px;
|
||||
margin-bottom: 30rpx;
|
||||
|
||||
text {
|
||||
width: 80px;
|
||||
display: inline-block;
|
||||
border-bottom: 1px solid #dfdfdf;
|
||||
margin: 0 10px;
|
||||
margin: 0 20rpx;
|
||||
font-size: 18px;
|
||||
font-weight: bold;
|
||||
color: #f0ae43;
|
||||
|
|
@ -538,7 +538,7 @@
|
|||
}
|
||||
|
||||
.tips {
|
||||
font-size: 12px;
|
||||
font-size: 24rpx;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
|
|
@ -559,12 +559,12 @@
|
|||
font-size: 16px;
|
||||
font-weight: bold;
|
||||
text-align: center;
|
||||
margin: 15px 0;
|
||||
margin: 30rpx 0;
|
||||
}
|
||||
|
||||
.image {
|
||||
width: 160px;
|
||||
height: 160px;
|
||||
width: 1120rpx;
|
||||
height: 1120rpx;
|
||||
margin: auto;
|
||||
|
||||
image {
|
||||
|
|
@ -574,8 +574,8 @@
|
|||
}
|
||||
|
||||
.tips {
|
||||
margin-bottom: 15px;
|
||||
margin-left: 15px;
|
||||
margin-bottom: 30rpx;
|
||||
margin-left: 30rpx;
|
||||
display: flex;
|
||||
color: #999;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -573,7 +573,7 @@
|
|||
}
|
||||
|
||||
.tips {
|
||||
font-size: 12px;
|
||||
font-size: 24rpx;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
|
|
@ -594,12 +594,12 @@
|
|||
font-size: 16px;
|
||||
font-weight: bold;
|
||||
text-align: center;
|
||||
margin: 15px 0;
|
||||
margin: 30rpx 0;
|
||||
}
|
||||
|
||||
.image {
|
||||
width: 160px;
|
||||
height: 160px;
|
||||
width: 1120rpx;
|
||||
height: 1120rpx;
|
||||
margin: auto;
|
||||
|
||||
image {
|
||||
|
|
@ -610,7 +610,7 @@
|
|||
|
||||
.tips {
|
||||
margin-top: 40rpx;
|
||||
margin-left: 15px;
|
||||
margin-left: 30rpx;
|
||||
display: flex;
|
||||
color: #999;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,22 +1,56 @@
|
|||
<template>
|
||||
<view class="weightPages">
|
||||
<view class="table" v-if="isConnection == 0">{{bleTipsText}}</view>
|
||||
<view class="table" v-if="isConnection == 1" @click="openBluetoothAdapter">连接失败，点击重新连接</view>
|
||||
<view>
|
||||
<view class="weight-wrap">
|
||||
<view class="weight">
|
||||
<text class="val">{{weight == '' ? '--':weight}}</text>
|
||||
<text class="unit">{{unitConversion(dw)}}</text>
|
||||
<view class="table">
|
||||
<view class="text">
|
||||
<image src="/static/zhong.png"></image>
|
||||
<text v-if="isConnection == 0">{{bleTipsText}}</text>
|
||||
<text v-if="isConnection == 1" @click="openBluetoothAdapter">连接失败，点击重新连接</text>
|
||||
</view>
|
||||
<view class="duan" @click="handleBack" v-if="isShow&&isConnection == 0">
|
||||
断开连接
|
||||
</view>
|
||||
</view>
|
||||
<!-- -->
|
||||
<view class="weight-wrap">
|
||||
<!-- 蓝牙称重 -->
|
||||
<view class="weight" @click="inputDialogToggle">
|
||||
<text class="val">{{weight == '' ? '--':weight}}</text>
|
||||
<text class="unit">{{dw}}</text>
|
||||
</view>
|
||||
<!-- <view class="weight" v-else>
|
||||
<input type="digit" v-model="activeType.weight" placeholder="请输入" @input="replaceInput" />
|
||||
<text class="unit">克</text>
|
||||
</view>
|
||||
<view class="more" @click="handleToggleBle">
|
||||
<image class="keybordIcon" :src="isBle?'/static/chengIcon.png':'/static/keybordIcon.png'"
|
||||
mode="widthFix">
|
||||
</image>
|
||||
</view> -->
|
||||
</view>
|
||||
<!-- -->
|
||||
<view class="groupbtn">
|
||||
<view class="btn danwei">
|
||||
<view class="lan border-bottom">
|
||||
<view class="right">
|
||||
<picker mode="selector" :range="unitList" range-key="name" @change="changleUnits"
|
||||
:value="unitListIndex">
|
||||
<view class="uni-input">
|
||||
单位
|
||||
</view>
|
||||
</picker>
|
||||
</view>
|
||||
</view>
|
||||
<!-- <view class="kcal">
|
||||
<text class="val">{{kcal == '' ? 0 : kcal}}</text>
|
||||
<text class="unit">千卡</text>
|
||||
</view> -->
|
||||
</view>
|
||||
<view class="tips">
|
||||
注：重新测量可更新当前数据
|
||||
</view>
|
||||
<view class="btn" @click="handlesub" v-if="weightType==2">确认添加</view>
|
||||
<view class="btn addbtn size14" @click="handlesub" v-if="weightType==2&&btnType==2">保存</view>
|
||||
<view class="btn addbtn" @click="handleAddFood" v-if="weightType==2&&btnType==1">+</view>
|
||||
<view class="btn qingling" @click="handleqingling">清零</view>
|
||||
</view>
|
||||
<!-- -->
|
||||
<view>
|
||||
<uni-popup ref="popup" type="dialog">
|
||||
<uni-popup-dialog mode="input" title="重量" placeholder="请输入食物重量" @close="close"
|
||||
@confirm="confirm"></uni-popup-dialog>
|
||||
</uni-popup>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
|
@ -30,15 +64,23 @@
|
|||
export default {
|
||||
data() {
|
||||
return {
|
||||
dw: "g",
|
||||
dw: "克",
|
||||
kcal: 0,
|
||||
weight: "",
|
||||
weightALL: "",
|
||||
unit: '',
|
||||
weight0: 0,
|
||||
bleTipsText: "蓝牙搜索中",
|
||||
stopblue: false,
|
||||
isShow: false,
|
||||
bleTipsText: "",
|
||||
inputDialog: false,
|
||||
isConnection: 0, //是否连接成功
|
||||
unitList: [{
|
||||
name: "克",
|
||||
id: '00',
|
||||
unit: "g"
|
||||
}, {
|
||||
name: "盎司",
|
||||
id: "08",
|
||||
unit: "oz"
|
||||
}],
|
||||
unitListIndex: 0,
|
||||
units: ['kg', '斤', 'st:lb', 'lb', 'g', 'ml', 'Waterml',
|
||||
'milkml', 'oz', 'floz', 'lboz'
|
||||
]
|
||||
|
|
@ -53,60 +95,57 @@
|
|||
type: Number,
|
||||
default: -1 //0分类测量,1累计测量,2购物车测量
|
||||
},
|
||||
isLast: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
}
|
||||
btnType: {
|
||||
type: Number,
|
||||
default: 1 //1添加食材，2保存测量
|
||||
},
|
||||
},
|
||||
computed: {
|
||||
...mapState(["user", 'isConnected', "isBluetoothTyle"]),
|
||||
...mapState(["bleValue", "isBluetoothTyle", "countFoodInfo"]),
|
||||
weight() {
|
||||
return this.bleValue.countWeight
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
let that = this
|
||||
console.log("mounted_new", that.weightType)
|
||||
that.openBluetoothAdapter()
|
||||
if (that.bleValue.serviceId != '') {
|
||||
that.getBLECharacteristicValueChange(that.bleValue.deviceId, that.bleValue.serviceId, that.bleValue.notify)
|
||||
} else {
|
||||
that.openBluetoothAdapter()
|
||||
}
|
||||
that.onBLEConnectionStateChange()
|
||||
uni.onBluetoothAdapterStateChange(function(res) {
|
||||
that.$store.commit("changeBluetooth", res.available);
|
||||
})
|
||||
},
|
||||
destroyed() {
|
||||
this.isConnection = 1
|
||||
this.closeBLEConnection()
|
||||
this.closeBluetoothAdapter()
|
||||
// this.isConnection = 1
|
||||
// this.closeBLEConnection()
|
||||
// this.closeBluetoothAdapter()
|
||||
},
|
||||
watch: {
|
||||
// weightType: function() {
|
||||
// let that = this
|
||||
// that.openBluetoothAdapter()
|
||||
// },
|
||||
isBluetoothTyle: function() {
|
||||
let that = this
|
||||
if (!that.isBluetoothTyle) {
|
||||
that.handleBack()
|
||||
}
|
||||
},
|
||||
isLast: function() {
|
||||
let that = this
|
||||
that.stopblue = that.isLast
|
||||
console.log("最后", this.isLast)
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
// 初始化蓝牙
|
||||
openBluetoothAdapter() {
|
||||
let that = this
|
||||
that.weight = ""
|
||||
that.kcal = ""
|
||||
that.isShow = false
|
||||
that.bleTipsText = "蓝牙搜索中"
|
||||
uni.openBluetoothAdapter({
|
||||
success: e => {
|
||||
that.isConnection = 0
|
||||
that.bleTipsText = "蓝牙搜索中"
|
||||
that.startBluetoothDeviceDiscovery()
|
||||
},
|
||||
fail: e => {
|
||||
that.isConnection = 0
|
||||
that.bleTipsText = "请确定设备是开机状态、手机蓝牙权限已打开！"
|
||||
that.bleTipsText = "请确定设备和手机蓝牙已打开！"
|
||||
console.log('openBluetoothAdapter', e)
|
||||
}
|
||||
});
|
||||
|
|
@ -126,7 +165,7 @@
|
|||
},
|
||||
fail: res => {
|
||||
that.isConnection = 0
|
||||
that.bleTipsText = "请确定设备是开机状态、手机蓝牙权限已打开！"
|
||||
that.bleTipsText = "请确定设备和手机蓝牙已打开！"
|
||||
console.log('startBluetoothDeviceDiscovery', res)
|
||||
}
|
||||
});
|
||||
|
|
@ -141,7 +180,7 @@
|
|||
that.closeBLEConnection()
|
||||
that.closeBluetoothAdapter()
|
||||
}
|
||||
that.$store.commit("changeConnected", res.connected);
|
||||
that.$store.commit("changeBluetooth", res.connected);
|
||||
})
|
||||
},
|
||||
/**
|
||||
|
|
@ -223,10 +262,13 @@
|
|||
that.kcal = (Number(that.weightKcal) / 100 * data2).toFixed(2)
|
||||
that.$emit('realTimeWeight', data2, that.dw)
|
||||
}
|
||||
} else if (device.name.indexOf('Chipsea-BLE') != -1 || device.localName.indexOf(
|
||||
'Chipsea-BLE') != -1 || id == 'a5fe') {
|
||||
return
|
||||
}
|
||||
if (device.name.indexOf('Chipsea-BLE') != -1 || (device.localName && device
|
||||
.localName.indexOf('Chipsea-BLE') != -1) || id == 'a5fe') {
|
||||
that.stopBluetoothDevicesDiscovery()
|
||||
that.connectDevice(device.deviceId)
|
||||
return
|
||||
}
|
||||
})
|
||||
});
|
||||
|
|
@ -290,37 +332,52 @@
|
|||
notify = item.uuid
|
||||
}
|
||||
}
|
||||
|
||||
uni.notifyBLECharacteristicValueChange({
|
||||
let info = {
|
||||
deviceId: deviceId,
|
||||
serviceId: serviceId,
|
||||
characteristicId: notify,
|
||||
state: true,
|
||||
success: () => {
|
||||
that.isConnection = 0
|
||||
that.bleTipsText = "测量中，请将食物放到秤上"
|
||||
uni.onBLECharacteristicValueChange(function(res) {
|
||||
const value = res.value
|
||||
const dataView = new DataView(value)
|
||||
const header = dataView.getUint8(0)
|
||||
notify: notify,
|
||||
write: write,
|
||||
}
|
||||
that.handletoggleUnit(0x04)
|
||||
that.$store.commit('changeBluetoothValue', info)
|
||||
setTimeout(function() {
|
||||
that.getBLECharacteristicValueChange(deviceId, serviceId, notify)
|
||||
}, 300)
|
||||
},
|
||||
fail: res => {
|
||||
console.log('获取特征值失败:', JSON.stringify(res))
|
||||
}
|
||||
})
|
||||
},
|
||||
getBLECharacteristicValueChange(deviceId, serviceId, notify) {
|
||||
let that = this
|
||||
uni.notifyBLECharacteristicValueChange({
|
||||
deviceId: deviceId,
|
||||
serviceId: serviceId,
|
||||
characteristicId: notify,
|
||||
state: true,
|
||||
success: () => {
|
||||
that.isShow = true
|
||||
that.isConnection = 0
|
||||
that.bleTipsText = "测量中，请将食物放到秤上"
|
||||
uni.onBLECharacteristicValueChange(function(res) {
|
||||
const value = res.value
|
||||
const dataView = new DataView(value)
|
||||
const header = dataView.getUint8(0)
|
||||
console.log("value", that.$tools.ab2hex(res.value, ""))
|
||||
|
||||
// MCU主动上报数据
|
||||
if (header === 0xC7) {
|
||||
const cmd = dataView.getUint8(2)
|
||||
// MCU主动上报数据
|
||||
if (header === 0xC7) {
|
||||
const cmd = dataView.getUint8(2)
|
||||
|
||||
switch (cmd) {
|
||||
case 0x02:
|
||||
that.parseWeightData(dataView)
|
||||
break
|
||||
switch (cmd) {
|
||||
case 0x02:
|
||||
that.parseWeightData(dataView)
|
||||
break
|
||||
|
||||
case 0x03:
|
||||
break
|
||||
}
|
||||
}
|
||||
})
|
||||
},
|
||||
fail: res => {
|
||||
console.log('获取特征值失败:', JSON.stringify(res))
|
||||
case 0x03:
|
||||
break
|
||||
}
|
||||
}
|
||||
})
|
||||
},
|
||||
|
|
@ -329,6 +386,55 @@
|
|||
}
|
||||
})
|
||||
},
|
||||
changleUnits(e) {
|
||||
let that = this
|
||||
let name = that.unitList[e.detail.value].name
|
||||
if (that.isShow && that.dw != name) {
|
||||
that.handletoggleUnit(name == '盎司' ? 0x08 : 0x04)
|
||||
that.$store.commit("changeBluetoothValue", {
|
||||
countWeight: finalWeight,
|
||||
unit: that.unitList[e.detail.value].unit
|
||||
})
|
||||
}
|
||||
that.unitListIndex = [e.detail.value]
|
||||
that.dw = that.unitList[e.detail.value].name
|
||||
|
||||
},
|
||||
handletoggleUnit(unit) {
|
||||
let that = this
|
||||
let checksum = 0;
|
||||
const bytes = [0xC5, 0x03, 0x05, 0x11]
|
||||
bytes[4] = unit
|
||||
for (let i = 0; i < bytes.length; i++) {
|
||||
checksum ^= bytes[i];
|
||||
}
|
||||
bytes[5] = checksum
|
||||
that.sendData(new Uint8Array(bytes).buffer)
|
||||
},
|
||||
handleqingling() {
|
||||
let that = this
|
||||
let str = "C503071100D0"
|
||||
let buf = new Uint8Array(str.match(/[\da-f]{2}/gi).map(function(h) {
|
||||
return parseInt(h, 16)
|
||||
}))
|
||||
that.sendData(buf.buffer)
|
||||
},
|
||||
sendData(buffer) {
|
||||
let that = this
|
||||
uni.writeBLECharacteristicValue({
|
||||
deviceId: that.bleValue.deviceId,
|
||||
serviceId: that.bleValue.serviceId,
|
||||
characteristicId: that.bleValue.write,
|
||||
value: buffer,
|
||||
success: res => {
|
||||
console.log('下发指令成功', res.errMsg)
|
||||
},
|
||||
fail: res => {
|
||||
console.log("下发指令失败", res);
|
||||
},
|
||||
})
|
||||
},
|
||||
|
||||
parseWeightData(dataView) {
|
||||
const statusByte = dataView.getUint8(4)
|
||||
const isNegative = !!(statusByte & 0x80) // 最高位表示正负
|
||||
|
|
@ -349,13 +455,20 @@
|
|||
let finalWeight = weightValue / Math.pow(10, precision)
|
||||
if (isNegative) finalWeight = -finalWeight
|
||||
|
||||
// 更新状态
|
||||
this.weight = finalWeight
|
||||
this.dw = this.units[unitIndex] || 'g'
|
||||
this.kcal = (Number(this.weightKcal) / 100 * finalWeight).toFixed(2)
|
||||
// console.log('重量：' + finalWeight)
|
||||
// console.log('单位：' + this.unit)
|
||||
this.$emit('realTimeWeight', finalWeight, this.dw)
|
||||
if (this.units[unitIndex] == 'kcal') {
|
||||
this.dw = '千卡'
|
||||
} else if (this.units[unitIndex] == 'g') {
|
||||
this.dw = '克'
|
||||
} else if (this.units[unitIndex] == 'lb') {
|
||||
this.dw = '磅'
|
||||
} else if (this.units[unitIndex] == 'oz') {
|
||||
this.dw = '盎司'
|
||||
}
|
||||
this.$store.commit("changeBluetoothValue", {
|
||||
countWeight: finalWeight,
|
||||
unit: this.units[unitIndex]
|
||||
})
|
||||
// this.$emit('realTimeWeight', finalWeight, this.dw)
|
||||
|
||||
// 状态处理
|
||||
// if (statusType === 0x02) {
|
||||
|
|
@ -371,70 +484,7 @@
|
|||
} else {
|
||||
that.$tools.msg("数据异常，请清零后重新测量!")
|
||||
}
|
||||
|
||||
},
|
||||
// 备料完成
|
||||
handleDetailSub() {
|
||||
let that = this
|
||||
if (that.weightType == 1) { //累计测量
|
||||
// that.weight0 = Number(that.weight) - Number(that.weightALL)
|
||||
that.weight0 = Number((Number(that.weight) - Number(that.weightALL)).toFixed(2))
|
||||
if (that.weight0 > 0) {
|
||||
that.weightALL = that.weight
|
||||
} else {
|
||||
that.$tools.msg("数据异常，请清零后重新测量!")
|
||||
}
|
||||
} else {
|
||||
that.weight0 = that.weight
|
||||
}
|
||||
if (Number(that.weight0) > 0) {
|
||||
that.$emit("handleDetailSub", that.weight0, that.dw, that.kcal)
|
||||
// that.stopBluetoothDevicesDiscovery() //取消蓝牙搜索
|
||||
// that.closeBLEConnection()
|
||||
// that.closeBluetoothAdapter()
|
||||
that.weight = 0
|
||||
that.weight0 = 0
|
||||
} else {
|
||||
that.$tools.msg("数据异常，请重新测量!")
|
||||
}
|
||||
},
|
||||
//备料下一个
|
||||
handleDetailNext() {
|
||||
let that = this
|
||||
if (that.weightType == 1) {
|
||||
console.log('weight：' + that.weight)
|
||||
console.log('weight0：' + that.weight0)
|
||||
console.log('weightALL：' + that.weightALL)
|
||||
// that.weight0 = Number(that.weight) - Number(that.weightALL)
|
||||
that.weight0 = Number((Number(that.weight) - Number(that.weightALL)).toFixed(2))
|
||||
if (that.weight0 > 0) {
|
||||
that.weightALL = that.weight
|
||||
} else {
|
||||
that.$tools.msg("数据异常，请清零后重新测量!")
|
||||
}
|
||||
} else {
|
||||
that.weight0 = that.weight
|
||||
}
|
||||
|
||||
if (Number(that.weight0) > 0) {
|
||||
that.$emit("handleDetailNext", that.weight0, that.dw, that.kcal)
|
||||
that.weight = 0
|
||||
that.weight0 = 0
|
||||
} else {
|
||||
that.$tools.msg("数据异常，请清零后重新测量!")
|
||||
}
|
||||
},
|
||||
|
||||
handlechongzhi(weight) {
|
||||
let that = this
|
||||
console.log('当前总重：' + that.weightALL)
|
||||
console.log('重置重量：' + weight)
|
||||
if (that.weightType == 1) {
|
||||
that.weightALL = Number((Number(that.weightALL) - Number(weight)).toFixed(2))
|
||||
console.log('剩余重量：' + that.weightALL)
|
||||
}
|
||||
},
|
||||
|
||||
handleBack() {
|
||||
let that = this
|
||||
that.isConnection = 1
|
||||
|
|
@ -449,6 +499,15 @@
|
|||
let that = this;
|
||||
uni.closeBluetoothAdapter({
|
||||
success: res => {
|
||||
that.isConnection = 1
|
||||
that.$store.commit("changeBluetoothValue", {
|
||||
deviceId: "",
|
||||
serviceId: "",
|
||||
notify: "",
|
||||
write: "",
|
||||
unit: "",
|
||||
countWeight: 0,
|
||||
})
|
||||
console.log('蓝牙模块关闭成功');
|
||||
}
|
||||
})
|
||||
|
|
@ -459,8 +518,9 @@
|
|||
closeBLEConnection() {
|
||||
var that = this;
|
||||
uni.closeBLEConnection({
|
||||
deviceId: that.deviceId,
|
||||
deviceId: that.bleValue.deviceId,
|
||||
success: res => {
|
||||
that.isConnection = 1
|
||||
console.log('断开蓝牙连接成功');
|
||||
}
|
||||
});
|
||||
|
|
@ -476,7 +536,27 @@
|
|||
return '盎司'
|
||||
}
|
||||
return unit
|
||||
}
|
||||
},
|
||||
// 添加食物
|
||||
handleAddFood() {
|
||||
uni.navigateTo({
|
||||
url: "/pageTwo/count/search?name=早餐&time=" + this.countFoodInfo.date
|
||||
})
|
||||
},
|
||||
inputDialogToggle() {
|
||||
this.$refs.popup.open()
|
||||
},
|
||||
confirm(value) {
|
||||
console.log(value)
|
||||
this.$store.commit("changeBluetoothValue", {
|
||||
countWeight: value,
|
||||
unit: this.unitList[this.unitListIndex].unit
|
||||
})
|
||||
this.$refs.popup.close()
|
||||
},
|
||||
close() {
|
||||
this.$refs.popup.close()
|
||||
},
|
||||
// isNutritionScale(advertisData) {
|
||||
// const buffer = this.base64ToArrayBuffer(advertisData)
|
||||
// const dataView = new DataView(buffer)
|
||||
|
|
@ -506,24 +586,37 @@
|
|||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
image {
|
||||
width: 22px;
|
||||
height: 22px;
|
||||
}
|
||||
|
||||
.more {
|
||||
padding: 6rpx 10rpx;
|
||||
border-radius: 12rpx;
|
||||
color: #fff;
|
||||
background-color: #f0ae43;
|
||||
}
|
||||
|
||||
.weightPages {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
flex-direction: column;
|
||||
position: relative;
|
||||
background: #fff;
|
||||
border-radius: 10px;
|
||||
border-radius: 20rpx;
|
||||
justify-content: space-around;
|
||||
|
||||
.weight-wrap {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
background: #fff;
|
||||
color: #666;
|
||||
font-size: 16px;
|
||||
flex-wrap: wrap;
|
||||
text-align: center;
|
||||
height: 60px;
|
||||
margin: 10px 0;
|
||||
|
||||
.weight,
|
||||
.kcal {
|
||||
|
|
@ -537,8 +630,6 @@
|
|||
}
|
||||
|
||||
.weight {
|
||||
margin-bottom: 30rpx;
|
||||
|
||||
.val {
|
||||
font-size: 40rpx;
|
||||
color: #F0AE43;
|
||||
|
|
@ -571,37 +662,61 @@
|
|||
}
|
||||
|
||||
.tips {
|
||||
font-size: 12px;
|
||||
font-size: 24rpx;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.btn {
|
||||
color: #fff;
|
||||
width: 80%;
|
||||
margin-left: 10%;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.groupbtn {
|
||||
margin-top: 15px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
|
||||
.btn {
|
||||
color: #000 !important;
|
||||
background-color: #F0AE43;
|
||||
width: 30%;
|
||||
color: $maincolor;
|
||||
text-align: center;
|
||||
height: 40px;
|
||||
line-height: 40px;
|
||||
border-radius: 10px;
|
||||
border: 1px solid $maincolor;
|
||||
background: #fff;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.addbtn {
|
||||
width: 30%;
|
||||
color: #fff;
|
||||
font-size: 45px;
|
||||
line-height: 38px;
|
||||
background: $maincolor;
|
||||
}
|
||||
}
|
||||
|
||||
.table {
|
||||
width: 100%;
|
||||
font-size: 14px;
|
||||
text-align: center;
|
||||
margin: 15px 0;
|
||||
background: #ffecec;
|
||||
align-items: center;
|
||||
padding: 5px 0;
|
||||
border-radius: 5px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
|
||||
.text {
|
||||
color: #8284f0;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
image {
|
||||
width: 22px;
|
||||
height: 22px;
|
||||
margin-right: 5px;
|
||||
}
|
||||
}
|
||||
|
||||
.image {
|
||||
width: 160px;
|
||||
height: 160px;
|
||||
width: 1120rpx;
|
||||
height: 1120rpx;
|
||||
margin: auto;
|
||||
|
||||
image {
|
||||
|
|
@ -610,9 +725,18 @@
|
|||
}
|
||||
}
|
||||
|
||||
.duan {
|
||||
width: fit-content;
|
||||
background: linear-gradient(-90deg, #d4f5c4, #a7d5e4 80%, );
|
||||
border-radius: 5px;
|
||||
text-align: center;
|
||||
padding: 3px 10px;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.tips {
|
||||
margin-top: 30rpx;
|
||||
margin-left: 15px;
|
||||
margin-left: 30rpx;
|
||||
display: flex;
|
||||
color: #999;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -62,7 +62,7 @@
|
|||
|
||||
<style scoped lang="scss">
|
||||
.footlist {
|
||||
margin: 15px 0;
|
||||
margin: 30rpx 0;
|
||||
width: 100%;
|
||||
height: auto;
|
||||
overflow: hidden;
|
||||
|
|
@ -73,7 +73,7 @@
|
|||
// justify-content: space-between;
|
||||
|
||||
.list {
|
||||
margin-bottom: 10px;
|
||||
margin-bottom: 20rpx;
|
||||
// height: auto;
|
||||
overflow: auto;
|
||||
break-inside: avoid;
|
||||
|
|
@ -83,7 +83,7 @@
|
|||
|
||||
.item {
|
||||
color: #666;
|
||||
width: calc(100% - 10px);
|
||||
width: calc(100% - 20rpx);
|
||||
position: initial;
|
||||
background: #fff;
|
||||
border-radius: 0 0 5px 5px;
|
||||
|
|
|
|||
|
|
@ -53,18 +53,18 @@
|
|||
|
||||
<style scoped lang="scss">
|
||||
.serachBox {
|
||||
height: 40px;
|
||||
height: 80rpx;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
padding: 0 15px 10px;
|
||||
padding: 0 30rpx 20rpx;
|
||||
z-index: 99;
|
||||
background-color: #efefef;
|
||||
background-color: #f7f7f7;
|
||||
|
||||
.serach-box {
|
||||
height: 40px;
|
||||
border-radius: 10px;
|
||||
height: 80rpx;
|
||||
border-radius: 20rpx;
|
||||
position: relative;
|
||||
background-color: #fff;
|
||||
}
|
||||
|
|
@ -72,13 +72,13 @@
|
|||
.searchInput {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
right: 60px;
|
||||
height: 40px;
|
||||
right: 120rpx;
|
||||
height: 80rpx;
|
||||
|
||||
icon {
|
||||
position: absolute;
|
||||
right: 10px;
|
||||
top: 10px;
|
||||
right: 20rpx;
|
||||
top: 20rpx;
|
||||
display: flex;
|
||||
z-index: 99999;
|
||||
}
|
||||
|
|
@ -88,7 +88,7 @@
|
|||
justify-content: flex-end;
|
||||
align-items: center;
|
||||
position: absolute;
|
||||
right: 10px;
|
||||
right: 20rpx;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
width: 150rpx;
|
||||
|
|
@ -103,32 +103,32 @@
|
|||
|
||||
.searchBtn {
|
||||
position: absolute;
|
||||
width: 60px;
|
||||
width: 120rpx;
|
||||
right: 0px;
|
||||
height: 40px;
|
||||
line-height: 40px;
|
||||
height: 80rpx;
|
||||
line-height: 80rpx;
|
||||
background: $maincolor;
|
||||
border-radius: 0 10px 10px 0;
|
||||
border-radius: 0 20rpx 20rpx 0;
|
||||
text-align: center;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
input {
|
||||
height: 40px;
|
||||
height: 80rpx;
|
||||
padding: 0 5px;
|
||||
text-align: center;
|
||||
position: absolute;
|
||||
left: 0px;
|
||||
right: 0px;
|
||||
border-radius: 10px;
|
||||
border-radius: 20rpx;
|
||||
|
||||
}
|
||||
|
||||
.icon {
|
||||
width: 50px;
|
||||
height: 40px;
|
||||
width: 100rpx;
|
||||
height: 80rpx;
|
||||
position: absolute;
|
||||
right: 15px;
|
||||
right: 30rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
|
|
|||
|
|
@ -2,6 +2,7 @@
|
|||
<!-- 搜索 -->
|
||||
<view class="search" @click="handleSearch">
|
||||
<input type="text" :placeholder="name" />
|
||||
<icon v-if="name" class="iconfont icon-error" @click="handleSearch"></icon>
|
||||
<image src="/static/28.png"></image>
|
||||
</view>
|
||||
</template>
|
||||
|
|
@ -36,18 +37,18 @@
|
|||
left: 0;
|
||||
top: 0;
|
||||
padding-bottom: 35px;
|
||||
padding-top: 10px;
|
||||
padding-top: 20rpx;
|
||||
background-color: $maincolor;
|
||||
|
||||
|
||||
input {
|
||||
width: calc(100% - 40px);
|
||||
width: calc(100% - 80rpx);
|
||||
background: #fff;
|
||||
height: 39px;
|
||||
line-height: 38px;
|
||||
border-radius: 10px;
|
||||
padding: 0 10px;
|
||||
margin: 0 10px;
|
||||
border-radius: 20rpx;
|
||||
padding: 0 20rpx;
|
||||
margin: 0 20rpx;
|
||||
}
|
||||
|
||||
.input:hover {
|
||||
|
|
@ -55,12 +56,20 @@
|
|||
}
|
||||
|
||||
image {
|
||||
width: 25px;
|
||||
height: 25px;
|
||||
width: 50rpx;
|
||||
height: 50rpx;
|
||||
position: absolute;
|
||||
right: 20px;
|
||||
right: 40rpx;
|
||||
top: 18px;
|
||||
z-index: 99;
|
||||
}
|
||||
}
|
||||
|
||||
.icon-error {
|
||||
color: #888484;
|
||||
position: absolute;
|
||||
right: 120rpx;
|
||||
top: 18px;
|
||||
font-size: 24px;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -144,7 +144,7 @@
|
|||
}
|
||||
|
||||
.line {
|
||||
width: 10px;
|
||||
width: 20rpx;
|
||||
position: absolute;
|
||||
left: 366rpx;
|
||||
top: 40rpx;
|
||||
|
|
@ -198,7 +198,7 @@
|
|||
}
|
||||
|
||||
.ruler-item {
|
||||
width: 10px;
|
||||
width: 20rpx;
|
||||
text-align: center;
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
|
|
@ -213,7 +213,7 @@
|
|||
&:before {
|
||||
content: '';
|
||||
width: 1px;
|
||||
height: 30px;
|
||||
height: 60rpx;
|
||||
background: rgba(#3A414B, .15);
|
||||
display: inline-block;
|
||||
vertical-align: text-top;
|
||||
|
|
@ -232,7 +232,7 @@
|
|||
&:nth-child(10n+1) {
|
||||
&::before {
|
||||
width: 1px;
|
||||
height: 40px;
|
||||
height: 80rpx;
|
||||
}
|
||||
|
||||
span {
|
||||
|
|
|
|||
|
|
@ -68,8 +68,8 @@
|
|||
justify-content: center;
|
||||
|
||||
image {
|
||||
width: 25px;
|
||||
height: 25px;
|
||||
width: 50rpx;
|
||||
height: 50rpx;
|
||||
}
|
||||
|
||||
text {
|
||||
|
|
|
|||
|
|
@ -0,0 +1,27 @@
|
|||
{
|
||||
"name": "滑动刻度尺选择组件，刻度值拖动选择，支持按钮控制。",
|
||||
"version": "v1.0.0",
|
||||
"lockfileVersion": 2,
|
||||
"requires": true,
|
||||
"packages": {
|
||||
"": {
|
||||
"name": "滑动刻度尺选择组件，刻度值拖动选择，支持按钮控制。",
|
||||
"version": "v1.0.0",
|
||||
"dependencies": {
|
||||
"@qiun/vue-ucharts": "^2.5.0-20230101"
|
||||
}
|
||||
},
|
||||
"node_modules/@qiun/vue-ucharts": {
|
||||
"version": "2.5.0-20230101",
|
||||
"resolved": "https://registry.npmmirror.com/@qiun/vue-ucharts/-/vue-ucharts-2.5.0-20230101.tgz",
|
||||
"integrity": "sha512-HZ4q6CBjzheAmocr//jY2nV3wO2Xu+2CX6NjwUD+uM1Jo/ewlnNIL2TiRRqtwMBhyaIoJh4nCzmnoeT7kUvlxA=="
|
||||
}
|
||||
},
|
||||
"dependencies": {
|
||||
"@qiun/vue-ucharts": {
|
||||
"version": "2.5.0-20230101",
|
||||
"resolved": "https://registry.npmmirror.com/@qiun/vue-ucharts/-/vue-ucharts-2.5.0-20230101.tgz",
|
||||
"integrity": "sha512-HZ4q6CBjzheAmocr//jY2nV3wO2Xu+2CX6NjwUD+uM1Jo/ewlnNIL2TiRRqtwMBhyaIoJh4nCzmnoeT7kUvlxA=="
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -15,5 +15,8 @@
|
|||
"前端组件",
|
||||
"通用组件"
|
||||
]
|
||||
},
|
||||
"dependencies": {
|
||||
"@qiun/vue-ucharts": "^2.5.0-20230101"
|
||||
}
|
||||
}
|
||||
|
|
@ -57,7 +57,7 @@
|
|||
|
||||
<style scoped lang="scss">
|
||||
.content {
|
||||
padding: 0 15px;
|
||||
padding: 0 30rpx;
|
||||
flex-wrap: wrap;
|
||||
background-color: #fff;
|
||||
}
|
||||
|
|
@ -65,7 +65,7 @@
|
|||
.title {
|
||||
width: 100%;
|
||||
font-size: 16px;
|
||||
margin: 15px 0;
|
||||
margin: 30rpx 0;
|
||||
font-weight: bold;
|
||||
|
||||
text {
|
||||
|
|
@ -74,17 +74,17 @@
|
|||
font-weight: 500;
|
||||
width: 100%;
|
||||
display: inline-block;
|
||||
margin-top: 10px;
|
||||
margin-top: 20rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.input {
|
||||
display: flex;
|
||||
margin: 20px;
|
||||
margin: 40rpx;
|
||||
height: 35px;
|
||||
line-height: 35px;
|
||||
border-bottom: 1px solid #dfdfdf;
|
||||
width: calc(100% - 40px);
|
||||
width: calc(100% - 80rpx);
|
||||
position: relative;
|
||||
|
||||
/deep/input {
|
||||
|
|
@ -104,8 +104,8 @@
|
|||
}
|
||||
|
||||
.btn {
|
||||
margin-top: 40px;
|
||||
width: calc(100% - 30px);
|
||||
margin-top: 80rpx;
|
||||
width: calc(100% - 60rpx);
|
||||
color: #fff;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,379 @@
|
|||
<template>
|
||||
<view class="content">
|
||||
<view class="content_box">
|
||||
<view class="date"></view>
|
||||
<!-- 早午晚餐 -->
|
||||
<view class="everyDay">
|
||||
<view class="title">
|
||||
<view><text class="quan"></text>卡路里分析</view>
|
||||
</view>
|
||||
<div class="chart-wrap">
|
||||
<qiun-data-charts type="ring" :opts="opts" :chartData="chartData" :cHeight="320" :cWidth="320" />
|
||||
</div>
|
||||
<view class="foodtools">
|
||||
<view class="type" v-for="(item,index) in foodInfo.list">
|
||||
<view class="name">
|
||||
<text :style="{background:item.color}"></text>
|
||||
<view>{{item.name}}</view>
|
||||
</view>
|
||||
<view>{{item.val||0}}{{item.unit}}<text>|</text>{{item.kcal_proportion}}%</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<!--营养元素分析 -->
|
||||
<view class="everyDay">
|
||||
<view class="title">
|
||||
<view><text class="quan"></text>营养元素能量占比</view>
|
||||
</view>
|
||||
<div class="chart-wrap">
|
||||
<qiun-data-charts type="ring" :opts="opts2" :chartData="chartData2" :cHeight="320" :cWidth="320" />
|
||||
</div>
|
||||
<view class="foodtools">
|
||||
<view class="top">
|
||||
<view>营养分类</view>
|
||||
<view>摄入</view>
|
||||
</view>
|
||||
<view class="type">
|
||||
<view class="name">
|
||||
<text :style="{background:details.carbohydrate.color}"></text>
|
||||
<image :src="details.carbohydrate.icon"></image>
|
||||
<view>{{details.carbohydrate.name}}</view>
|
||||
</view>
|
||||
<view>
|
||||
{{details.carbohydrate.val}}{{details.carbohydrate.unit}}<text>|</text>{{details.carbohydrate.proportion}}%
|
||||
</view>
|
||||
</view>
|
||||
<view class="type">
|
||||
<view class="name">
|
||||
<text :style="{background:details.fat.color}"></text>
|
||||
<image :src="details.fat.icon"></image>
|
||||
<view>{{details.fat.name}}</view>
|
||||
</view>
|
||||
<view>{{details.fat.val}}{{details.fat.unit}}<text>|</text>{{details.fat.proportion}}%</view>
|
||||
</view>
|
||||
<view class="type">
|
||||
<view class="name">
|
||||
<text :style="{background:details.protein.color}"></text>
|
||||
<image :src="details.protein.icon"></image>
|
||||
<view>{{details.protein.name}}</view>
|
||||
</view>
|
||||
<view>
|
||||
{{details.protein.val}}{{details.protein.unit}}<text>|</text>{{details.protein.proportion}}%
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<!--营养元素排行榜 -->
|
||||
<view class="everyDay">
|
||||
<view class="title">
|
||||
<view><text class="quan"></text>营养元素排行榜</view>
|
||||
</view>
|
||||
<view class="foodtools rank_list">
|
||||
<view class="topname">{{details.carbohydrate.name}}</view>
|
||||
<view class="type" v-for="(item,index) in details.carbohydrate.rank_list">
|
||||
<view class="name">
|
||||
<image :src="item.icon"></image>
|
||||
<image :src="item.pic_url" class="pic" v-if="item.pic_url"></image>
|
||||
<view>{{item.name?item.name:'--'}}</view>
|
||||
</view>
|
||||
<view>{{item.weight||0}}g</view>
|
||||
</view>
|
||||
<view class="topname">{{details.fat.name}}</view>
|
||||
<view class="type" v-for="(item,index) in details.fat.rank_list">
|
||||
<view class="name">
|
||||
<image :src="item.icon"></image>
|
||||
<image :src="item.pic_url" class="pic" v-if="item.pic_url"></image>
|
||||
<view>{{item.name?item.name:'--'}}</view>
|
||||
</view>
|
||||
<view>{{item.weight||0}}g</view>
|
||||
</view>
|
||||
<view class="topname">{{details.protein.name}}</view>
|
||||
<view class="type" v-for="(item,index) in details.protein.rank_list">
|
||||
<view class="name">
|
||||
<image :src="item.icon"></image>
|
||||
<image :src="item.pic_url" class="pic" v-if="item.pic_url"></image>
|
||||
<view>{{item.name?item.name:'--'}}</view>
|
||||
</view>
|
||||
<view>{{item.weight||0}}g</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<!-- 营养元素 -->
|
||||
<view class="jishiqi">
|
||||
<view class="right">
|
||||
<view class="item" v-for="(ite,ind) in foodInfo.nutrients_four">
|
||||
<view class="left-icon">
|
||||
<view class="name">
|
||||
<image :src="ite.icon"></image>
|
||||
<text class="name">{{ite.name}}</text>
|
||||
</view>
|
||||
<view>
|
||||
<text class="weight">{{ite.today_intake||0}}{{ite.unit}}</text> / {{ite.suggestion||0}}g
|
||||
</view>
|
||||
</view>
|
||||
<view class="right-info">
|
||||
<view class="right-info-bottom">
|
||||
<view class="val" :style="{ width: ite.proportion + '%',background:ite.color}"></view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="item" v-for="(ite,ind) in foodInfo.trace_elements_all_day">
|
||||
<view class="left-icon">
|
||||
<view class="name">
|
||||
<text class="name">{{ite.name_ch}}</text>
|
||||
</view>
|
||||
<view>
|
||||
{{ite.value||0}}{{ite.unit}}
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {
|
||||
mapState
|
||||
} from "vuex";
|
||||
import qiunDataCharts from '@/uni_modules/qiun-data-charts/components/qiun-data-charts.vue';
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
page: "",
|
||||
opts: {
|
||||
color: [],
|
||||
title: {
|
||||
name: "",
|
||||
}
|
||||
},
|
||||
opts2: {
|
||||
color: [],
|
||||
subtitle: {
|
||||
name: "",
|
||||
}
|
||||
},
|
||||
chartData: {},
|
||||
chartData2: {},
|
||||
foodInfo: {},
|
||||
details: {}
|
||||
}
|
||||
},
|
||||
components: {
|
||||
qiunDataCharts
|
||||
},
|
||||
computed: {
|
||||
...mapState(["user", "countFoodInfo"]),
|
||||
},
|
||||
onLoad(options) {
|
||||
let that = this
|
||||
that.page = options.page
|
||||
that.handleList()
|
||||
},
|
||||
methods: {
|
||||
handleList() {
|
||||
let that = this
|
||||
let chart_data = []
|
||||
let chart_data2 = []
|
||||
that.opts.color = []
|
||||
that.opts2.color = []
|
||||
that.foodInfo = that.page == 'home' ? that.user.food_count : that.countFoodInfo
|
||||
that.details = that.page == 'home' ? that.user.food_count.details : that.countFoodInfo.details
|
||||
for (let i = 0; i < that.foodInfo.list.length; ++i) {
|
||||
that.opts.color.push(that.foodInfo.list[i].color)
|
||||
chart_data.push({
|
||||
name: that.foodInfo.list[i].name,
|
||||
value: Number(that.foodInfo.list[i].kcal_proportion),
|
||||
})
|
||||
}
|
||||
that.opts.title.name = that.foodInfo.nutrients_four[0].today_intake
|
||||
that.chartData = JSON.parse(JSON.stringify({
|
||||
series: [{
|
||||
data: chart_data
|
||||
}]
|
||||
}));
|
||||
|
||||
for (let key in that.details) {
|
||||
if (that.details.hasOwnProperty(key)) {
|
||||
that.opts2.color.push(that.details[key].color)
|
||||
chart_data2.push({
|
||||
name: that.details[key].name,
|
||||
value: Number(that.details[key].proportion),
|
||||
})
|
||||
}
|
||||
}
|
||||
that.chartData2 = JSON.parse(JSON.stringify({
|
||||
series: [{
|
||||
data: chart_data
|
||||
}]
|
||||
}));
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.content {
|
||||
padding: 0 20rpx;
|
||||
}
|
||||
|
||||
.content_box {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.chart-wrap {
|
||||
position: relative;
|
||||
width: 320rpx;
|
||||
height: 320rpx;
|
||||
margin: -30rpx auto 0;
|
||||
|
||||
.uchart-val {
|
||||
margin-top: 70rpx;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 48rpx;
|
||||
width: 320rpx;
|
||||
font-size: 46rpx;
|
||||
text-align: center;
|
||||
z-index: 9;
|
||||
}
|
||||
}
|
||||
|
||||
.everyDay {
|
||||
background: #fff;
|
||||
padding: 10px 10px 0;
|
||||
border-radius: 10px;
|
||||
margin-top: 15px;
|
||||
height: auto;
|
||||
overflow: hidden;
|
||||
|
||||
.title {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
font-weight: bold;
|
||||
font-size: 15px;
|
||||
|
||||
.quan {
|
||||
margin-right: 70rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.foodtools {
|
||||
|
||||
text {
|
||||
margin: 0 15rpx;
|
||||
color: #ccc;
|
||||
}
|
||||
|
||||
.type {
|
||||
display: flex;
|
||||
line-height: 45px;
|
||||
justify-content: space-between;
|
||||
border-bottom: 1px solid #f7f7f7;
|
||||
|
||||
.name {
|
||||
width: 80%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
.pic {
|
||||
border: 1px solid #f7f7f7;
|
||||
border-radius: 10px;
|
||||
}
|
||||
|
||||
text {
|
||||
width: 7px;
|
||||
height: 7px;
|
||||
margin-right: 10px;
|
||||
border-radius: 15px;
|
||||
}
|
||||
}
|
||||
|
||||
image {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
margin-right: 10px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.rank_list {
|
||||
.topname {
|
||||
position: relative;
|
||||
padding-left: 15px;
|
||||
margin-top: 5px;
|
||||
}
|
||||
|
||||
.topname::after {
|
||||
width: 5px;
|
||||
height: 5px;
|
||||
content: "";
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 7px;
|
||||
background-color: #666;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.type {
|
||||
border-bottom: none;
|
||||
line-height: 40px;
|
||||
}
|
||||
}
|
||||
|
||||
.top {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
}
|
||||
}
|
||||
|
||||
.jishiqi {
|
||||
.right {
|
||||
width: 100%;
|
||||
margin-left: 0;
|
||||
height: auto;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.item {
|
||||
width: auto;
|
||||
background: #fff;
|
||||
padding: 2px 15px;
|
||||
border-radius: 10px;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
font-size: 28rpx;
|
||||
margin-bottom: 10px;
|
||||
|
||||
.left-icon {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
flex-direction: inherit;
|
||||
|
||||
image {
|
||||
margin-right: 5px;
|
||||
}
|
||||
|
||||
.name {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.weight {
|
||||
margin-right: 5px;
|
||||
color: $maincolor;
|
||||
}
|
||||
}
|
||||
|
||||
.right-info {
|
||||
width: 100%;
|
||||
height: auto;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,446 @@
|
|||
<template>
|
||||
<view class="content">
|
||||
<view class="content_box">
|
||||
<view class="box">
|
||||
<!-- 类型 -->
|
||||
<view class="top">
|
||||
<image :src="bgimage" mode="aspectFill">
|
||||
<view class="name">{{info.name}}</view>
|
||||
<view class="time">{{time}}</view>
|
||||
</image>
|
||||
</view>
|
||||
<!-- 成分统计 -->
|
||||
<view class="everyDay">
|
||||
<view class="title">
|
||||
<view><text class="quan"></text>成分统计</view>
|
||||
</view>
|
||||
<view class="progress">
|
||||
<div class="chart-wrap">
|
||||
<qiun-data-charts type="ring" :opts="opts" canvasId="foodCharts" :chartData="chartData"
|
||||
:cHeight="280" :cWidth="280" />
|
||||
</div>
|
||||
<view class="info" v-if="info.nutrients_four">
|
||||
<view class="info-item" v-for="(item,index) in info.nutrients_four.slice(1)" :key="index">
|
||||
<view>
|
||||
<view class="color" :style="{'background-color':`${item.color}`}"></view>
|
||||
<view>{{item.name}}</view>
|
||||
</view>
|
||||
<view>
|
||||
<view>{{item.value}}{{item.unit}}<text>|</text>{{item.proportion}}%</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<!-- 早午晚餐 -->
|
||||
<view class="foodtools">
|
||||
<view class="type">
|
||||
<view class="title">
|
||||
<view><text class="quan"></text>食物类型</view>
|
||||
</view>
|
||||
<view class="list" v-if="info.list.length">
|
||||
<uni-swipe-action>
|
||||
<uni-swipe-action-item v-for="(ite,ind) in info.list" :key="ind"
|
||||
:right-options="actionOptions" @click="delAcitionItem(ite)">
|
||||
<view class="item" @click="showFoodDetail(ite)">
|
||||
<image :src="ite.pic_url" mode="aspectFill"></image>
|
||||
<view class="weight">
|
||||
<view>{{ite.name}}</view>
|
||||
<view class="size12 c999">{{ite.weight}}<text>|</text>{{ite.val}}kcal</view>
|
||||
</view>
|
||||
</view>
|
||||
</uni-swipe-action-item>
|
||||
</uni-swipe-action>
|
||||
</view>
|
||||
<view v-else class="nolist">
|
||||
<image src="/static/none.png"></image>
|
||||
<view>暂无食物</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<!-- 添加食物 -->
|
||||
<view class="add" @click="handleAddFood()">
|
||||
<text>+</text>添加食物
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<!-- 营养含量分析 -->
|
||||
<uni-drawer ref="showRight" mode="right" width="300">
|
||||
<scroll-view style="height: 100%;" scroll-y="true">
|
||||
<view class="foodDetail">
|
||||
<view class="foodInfo">
|
||||
<image :src="activeFoodDetail.pic_url" mode="aspectFill"></image>
|
||||
<view class="info">
|
||||
<view class="name">{{activeFoodDetail.name}}</view>
|
||||
<view class="kcal">{{activeFoodDetail.val}}千卡</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="foodContent">
|
||||
<view class="title">热量和营养</view>
|
||||
<view class="progress">
|
||||
<div class="chart-wrap">
|
||||
<qiun-data-charts type="ring" :opts="opts2" :chartData="chartData2" :cHeight="280"
|
||||
:cWidth="280" />
|
||||
</div>
|
||||
<view class="info" v-if="activeFoodDetail.nutrients_four">
|
||||
<view class="info-item" v-for="(item,index) in activeFoodDetail.nutrients_four.slice(1)"
|
||||
:key="index">
|
||||
<view class="color" :style="{'background-color':`${item.color}`}">
|
||||
</view>
|
||||
<view>{{item.name}}：{{item.proportion}}%</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="tips">
|
||||
<text>营养素</text>
|
||||
<text>{{activeFoodDetail.weight}}含量</text>
|
||||
</view>
|
||||
<view class="foodDetailList">
|
||||
<view class="foodDetailItem" v-for="(item,index) in activeFoodDetail.nutrients_list"
|
||||
:key="index">
|
||||
<view class="name">{{item.name_ch}}</view>
|
||||
<view class="value">{{item.value}}{{item.unit}}
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</scroll-view>
|
||||
</uni-drawer>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {
|
||||
mapState
|
||||
} from "vuex";
|
||||
let next = 0
|
||||
import qiunDataCharts from '@/uni_modules/qiun-data-charts/components/qiun-data-charts.vue';
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
opts: {
|
||||
color: [],
|
||||
title: {
|
||||
name: "",
|
||||
}
|
||||
},
|
||||
opts2: {
|
||||
color: [],
|
||||
title: {
|
||||
name: "",
|
||||
}
|
||||
},
|
||||
chartData: {},
|
||||
chartData2: {},
|
||||
activeFoodDetail: {},
|
||||
actionOptions: [{
|
||||
text: '删除',
|
||||
style: {
|
||||
backgroundColor: '#dd524d',
|
||||
borderRadius: '10rpx'
|
||||
}
|
||||
}],
|
||||
time: "",
|
||||
bgimage: "",
|
||||
page: "",
|
||||
index: "",
|
||||
info:{}
|
||||
}
|
||||
},
|
||||
components: {
|
||||
qiunDataCharts
|
||||
},
|
||||
computed: {
|
||||
...mapState(["user", "countFoodInfo", "configInfo"]),
|
||||
foodItem() {
|
||||
return this.configInfo.meal_list
|
||||
},
|
||||
},
|
||||
onLoad(options) {
|
||||
let that = this
|
||||
that.page = options.page
|
||||
that.index = options.index
|
||||
that.bgimage = that.foodItem[options.index].icon_bg
|
||||
that.handleInfo()
|
||||
},
|
||||
watch: {
|
||||
user() {
|
||||
this.handleInfo()
|
||||
},
|
||||
countFoodInfo() {
|
||||
this.handleInfo()
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
handleInfo() {
|
||||
let that = this
|
||||
that.time = that.page == "home" ? that.user.food_count.date : that.countFoodInfo.date
|
||||
that.info = that.page == "home" ? that.user.food_count.list[that.index] : that.countFoodInfo.list[that
|
||||
.index]
|
||||
let chart_data = []
|
||||
that.opts.color = []
|
||||
for (let i = 1; i < that.info.nutrients_four.length; ++i) {
|
||||
this.opts.color.push(that.info.nutrients_four[i].color)
|
||||
chart_data.push({
|
||||
name: that.info.nutrients_four[i].name,
|
||||
value: Number(that.info.nutrients_four[i].proportion),
|
||||
})
|
||||
}
|
||||
this.opts.title.name = that.info.val
|
||||
this.chartData = JSON.parse(JSON.stringify({
|
||||
series: [{
|
||||
data: chart_data
|
||||
}]
|
||||
}));
|
||||
},
|
||||
// 详情
|
||||
showFoodDetail(item) {
|
||||
console.log("item", item)
|
||||
let that = this
|
||||
let chart_data = []
|
||||
this.activeFoodDetail = item
|
||||
this.$refs.showRight.open();
|
||||
this.opts2.color = []
|
||||
for (let i = 1; i < item.nutrients_four.length; ++i) {
|
||||
this.opts2.color.push(item.nutrients_four[i].color)
|
||||
chart_data.push({
|
||||
name: item.nutrients_four[i].name,
|
||||
value: Number(item.nutrients_four[i].proportion),
|
||||
})
|
||||
}
|
||||
this.opts2.title.name = that.activeFoodDetail.val
|
||||
this.chartData2 = JSON.parse(JSON.stringify({
|
||||
series: [{
|
||||
data: chart_data
|
||||
}]
|
||||
}));
|
||||
},
|
||||
// 添加食物
|
||||
handleAddFood() {
|
||||
uni.navigateTo({
|
||||
url: "/pageTwo/count/search?name=" + this.info.name + "&time=" + this.time
|
||||
})
|
||||
},
|
||||
// 删除食材
|
||||
delAcitionItem(item) {
|
||||
let that = this
|
||||
uni.showModal({
|
||||
content: `是否删除[${item.name}]？`,
|
||||
success: (res) => {
|
||||
if (res.confirm) {
|
||||
this.$model.delCEatAction({
|
||||
aud_id: that.user.aud_id,
|
||||
eat_log_id: item.id
|
||||
}).then(res => {
|
||||
that.$store.dispatch("getCountFoodInfo", {
|
||||
aud_id: that.user.aud_id,
|
||||
time: that.time
|
||||
})
|
||||
// 删除最新一天食物
|
||||
if (that.time == that.user.food_count.date) {
|
||||
that.$store.dispatch("getUserInfo")
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.content {
|
||||
padding: 0 20rpx;
|
||||
}
|
||||
|
||||
.content_box {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.quan {
|
||||
margin-right: 70rpx;
|
||||
}
|
||||
|
||||
.top {
|
||||
width: 100%;
|
||||
height: 280rpx;
|
||||
display: flex;
|
||||
position: relative;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background: #dfdfdf;
|
||||
border-radius: 10px;
|
||||
margin-top: 15px;
|
||||
|
||||
.name {
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
font-size: 25px;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
view {
|
||||
z-index: 11;
|
||||
}
|
||||
|
||||
image {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
z-index: 9;
|
||||
border-radius: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
.everyDay {
|
||||
background: #fff;
|
||||
padding: 10px;
|
||||
border-radius: 10px;
|
||||
margin-top: 15px;
|
||||
height: auto;
|
||||
overflow: hidden;
|
||||
|
||||
.progress {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
.chart-wrap {
|
||||
position: relative;
|
||||
width: 280rpx;
|
||||
height: 280rpx;
|
||||
margin-top: -30rpx;
|
||||
margin-left: -15px;
|
||||
}
|
||||
|
||||
.info {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
font-size: 24rpx;
|
||||
width: calc(100% - 270rpx);
|
||||
height: 200rpx;
|
||||
|
||||
.info-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
margin-top: 30rpx;
|
||||
|
||||
view {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
text {
|
||||
color: #ccc;
|
||||
margin: 0px 5px;
|
||||
}
|
||||
|
||||
.color {
|
||||
width: 10rpx;
|
||||
height: 10rpx;
|
||||
margin-right: 10rpx;
|
||||
border-radius: 3rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.foodtools {
|
||||
margin-top: 15px;
|
||||
|
||||
.type {
|
||||
background: #fff;
|
||||
margin-bottom: 10px;
|
||||
border-radius: 10px;
|
||||
padding: 10px 10px 0;
|
||||
|
||||
.title {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
|
||||
image {
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
}
|
||||
|
||||
.text {
|
||||
width: 50%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
view {
|
||||
font-size: 32rpx;
|
||||
font-weight: bold;
|
||||
margin: 0 10px;
|
||||
}
|
||||
}
|
||||
|
||||
.detail {
|
||||
color: #999;
|
||||
display: flex;
|
||||
font-size: 24rpx;
|
||||
align-items: center;
|
||||
}
|
||||
}
|
||||
|
||||
.list {
|
||||
width: 100%;
|
||||
margin-top: 15px;
|
||||
|
||||
.item {
|
||||
display: flex;
|
||||
padding: 10px 0;
|
||||
border-bottom: 1px solid #f7f7f7;
|
||||
|
||||
image {
|
||||
width: 90rpx;
|
||||
height: 90rpx;
|
||||
border-radius: 50%;
|
||||
border: 1px solid #f7f7f7;
|
||||
}
|
||||
|
||||
.weight {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
margin-left: 10px;
|
||||
|
||||
text {
|
||||
margin: 0 10px;
|
||||
color: #dfdfdf;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.nolist {
|
||||
image {
|
||||
width: 120rpx;
|
||||
height: 120rpx;
|
||||
}
|
||||
|
||||
view {
|
||||
margin-bottom: 15px;
|
||||
text-align: center;
|
||||
width: 100%;
|
||||
margin-top: 10px;
|
||||
color: #999;
|
||||
}
|
||||
}
|
||||
|
||||
.add {
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
font-weight: bold;
|
||||
margin-top: 10px;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -698,14 +698,14 @@
|
|||
<style lang="scss" scoped>
|
||||
.tab_list {
|
||||
display: flex;
|
||||
margin: 45px -10px 0;
|
||||
margin: 100rpx -20rpx 0;
|
||||
justify-content: space-between;
|
||||
|
||||
.scroll-menu {
|
||||
width: 100%;
|
||||
|
||||
.tabbar {
|
||||
padding: 10px;
|
||||
padding: 20rpx;
|
||||
display: inline-block;
|
||||
|
||||
view {
|
||||
|
|
@ -733,7 +733,7 @@
|
|||
display: block !important;
|
||||
column-count: 3;
|
||||
/* 分成两列 */
|
||||
column-gap: 10px;
|
||||
column-gap: 20rpx;
|
||||
/* 列间距 */
|
||||
}
|
||||
|
||||
|
|
@ -745,9 +745,9 @@
|
|||
align-items: center;
|
||||
box-sizing: border-box;
|
||||
justify-content: space-around;
|
||||
// height: 30px;
|
||||
// height: 60rpx;
|
||||
border-radius: 5px;
|
||||
margin: 0 2% 10px;
|
||||
margin: 0 2% 20rpx;
|
||||
box-shadow: 0 0 10rpx #e1e1e1;
|
||||
|
||||
text {
|
||||
|
|
@ -772,8 +772,8 @@
|
|||
position: absolute;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 20px;
|
||||
top: 60px;
|
||||
bottom: 40rpx;
|
||||
top: 120rpx;
|
||||
justify-content: space-around;
|
||||
|
||||
.weight {
|
||||
|
|
@ -785,17 +785,17 @@
|
|||
|
||||
view {
|
||||
width: 60%;
|
||||
height: 50px;
|
||||
height: 100rpx;
|
||||
display: flex;
|
||||
margin-left: 25%;
|
||||
align-items: flex-end;
|
||||
margin-bottom: 15px;
|
||||
margin-bottom: 30rpx;
|
||||
|
||||
text {
|
||||
width: 80px;
|
||||
display: inline-block;
|
||||
border-bottom: 1px solid #dfdfdf;
|
||||
margin: 0 10px;
|
||||
margin: 0 20rpx;
|
||||
font-size: 18px;
|
||||
font-weight: bold;
|
||||
color: #f0ae43;
|
||||
|
|
@ -804,7 +804,7 @@
|
|||
}
|
||||
|
||||
.tips {
|
||||
font-size: 12px;
|
||||
font-size: 24rpx;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
|
|
@ -819,12 +819,12 @@
|
|||
font-size: 16px;
|
||||
font-weight: bold;
|
||||
text-align: center;
|
||||
margin: 15px 0;
|
||||
margin: 30rpx 0;
|
||||
}
|
||||
|
||||
.image {
|
||||
width: 160px;
|
||||
height: 160px;
|
||||
width: 1120rpx;
|
||||
height: 1120rpx;
|
||||
margin: auto;
|
||||
|
||||
image {
|
||||
|
|
@ -834,8 +834,8 @@
|
|||
}
|
||||
|
||||
.tips {
|
||||
margin-bottom: 15px;
|
||||
margin-left: 15px;
|
||||
margin-bottom: 30rpx;
|
||||
margin-left: 30rpx;
|
||||
display: flex;
|
||||
color: #999;
|
||||
}
|
||||
|
|
@ -845,7 +845,7 @@
|
|||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 0 10px;
|
||||
padding: 0 20rpx;
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
|
|
@ -860,36 +860,36 @@
|
|||
color: #fff;
|
||||
width: 40%;
|
||||
text-align: center;
|
||||
border-radius: 10px;
|
||||
border-radius: 20rpx;
|
||||
height: 31px;
|
||||
line-height: 31px;
|
||||
background-color: $maincolor;
|
||||
}
|
||||
|
||||
.che {
|
||||
width: 50px;
|
||||
height: 40px;
|
||||
width: 100rpx;
|
||||
height: 80rpx;
|
||||
position: relative;
|
||||
|
||||
text {
|
||||
position: absolute;
|
||||
height: 15px;
|
||||
height: 30rpx;
|
||||
background: red;
|
||||
width: 15px;
|
||||
width: 30rpx;
|
||||
border-radius: 50%;
|
||||
display: inline-block;
|
||||
color: #fff;
|
||||
line-height: 15px;
|
||||
line-height: 30rpx;
|
||||
text-align: center;
|
||||
font-size: 12px;
|
||||
font-size: 24rpx;
|
||||
right: 0;
|
||||
top: 5px;
|
||||
}
|
||||
|
||||
image,
|
||||
.t-icon {
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
width: 100rpx;
|
||||
height: 100rpx;
|
||||
margin-top: -3px;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
|
@ -899,12 +899,12 @@
|
|||
.menu {
|
||||
.left {
|
||||
bottom: 55px;
|
||||
height: calc(100vh - 150px);
|
||||
height: calc(100vh - 1100rpx);
|
||||
}
|
||||
|
||||
.right {
|
||||
bottom: 55px;
|
||||
height: calc(100vh - 150px);
|
||||
height: calc(100vh - 1100rpx);
|
||||
|
||||
}
|
||||
|
||||
|
|
@ -912,7 +912,7 @@
|
|||
|
||||
.activeList {
|
||||
z-index: 12;
|
||||
bottom: 50px;
|
||||
bottom: 100rpx;
|
||||
|
||||
.title {
|
||||
font-weight: bold;
|
||||
|
|
@ -1165,17 +1165,17 @@
|
|||
position: absolute;
|
||||
right: 10rpx;
|
||||
top: -35rpx;
|
||||
font-size: 45px;
|
||||
font-size: 100rpx;
|
||||
background: #fff;
|
||||
border-radius: 50%;
|
||||
width: 45px;
|
||||
height: 45px;
|
||||
width: 100rpx;
|
||||
height: 100rpx;
|
||||
}
|
||||
|
||||
.wrapper {
|
||||
.box {
|
||||
height: 800rpx !important;
|
||||
padding: 15px !important;
|
||||
padding: 30rpx !important;
|
||||
|
||||
.weight {
|
||||
position: absolute;
|
||||
|
|
@ -1216,12 +1216,12 @@
|
|||
}
|
||||
|
||||
.val {
|
||||
margin: 25px 0 !important;
|
||||
font-size: 20px;
|
||||
margin: 50rpx 0 !important;
|
||||
font-size: 40rpx;
|
||||
|
||||
text {
|
||||
font-size: 40px !important;
|
||||
width: 140px !important;
|
||||
font-size: 80rpx !important;
|
||||
width: 180rpx !important;
|
||||
}
|
||||
}
|
||||
|
||||
File diff suppressed because it is too large
Load Diff
|
|
@ -1,57 +1,42 @@
|
|||
<template>
|
||||
<view class="content">
|
||||
<!-- -->
|
||||
<view class="info" @click="handleEditUser">
|
||||
<view class="left">
|
||||
<image :src="userInfo.head_pic"></image>
|
||||
<view class="name overflow">{{userInfo.nickname}}</view>
|
||||
<view>{{userInfo.gender==1?'男':userInfo.gender==2?'女':'未知'}}</view>
|
||||
<view>{{userInfo.age}}岁</view>
|
||||
<view class="kcal">
|
||||
<view class="set">
|
||||
<input type="digit" v-model="weight" placeholder="请输入" :focus="focus" @blur="handleBlur">
|
||||
<uni-icons v-if="weight!=''" type="close" size="24" class="uni-iocns" color="#999"
|
||||
@click="handleclear"></uni-icons>
|
||||
<view class="num">
|
||||
{{kcal.suggestion_kcal_unit}}
|
||||
</view>
|
||||
</view>
|
||||
<icon class="iconfont icon-bianji"></icon>
|
||||
</view>
|
||||
<!-- -->
|
||||
<view class="kcal" @click="handleEditKcal()">
|
||||
<view class="text">
|
||||
{{kcal.title}}
|
||||
<text>修改></text>
|
||||
</view>
|
||||
<view class="num">
|
||||
<text>{{kcal.suggestion_kcal_val}}</text>{{kcal.suggestion_kcal_unit}}
|
||||
</view>
|
||||
<view class="desc" v-for="(ite,ind) in kcal.describe">
|
||||
{{ite}}
|
||||
<view class="desc">
|
||||
{{kcal.suggestion_kcal_range_val}}
|
||||
</view>
|
||||
</view>
|
||||
<!-- -->
|
||||
<view class="kcal">
|
||||
<view class="text">
|
||||
{{nutrition.title}}
|
||||
营养占比
|
||||
</view>
|
||||
<view class="num">
|
||||
<view class="slider">
|
||||
<llt-slider-range :model-value="rangeValue" @change="handleChange" />
|
||||
</view>
|
||||
<view class="list">
|
||||
<view class="item" v-for="(ite,ind) in nutrition.list">
|
||||
<icon class="iconfont" :class="ite.icon"></icon>
|
||||
<text>{{ite.name}}</text>
|
||||
<text>{{ite.proportion}}</text>
|
||||
<text>{{ite.proportion}}%</text>
|
||||
<view class="val">{{ite.val}}{{ite.unit}}</view>
|
||||
</view>
|
||||
<!-- <view class="item">
|
||||
<icon class="iconfont icon-Sm-danbaizhi"></icon>
|
||||
<text>蛋白质</text>
|
||||
<text>17%</text>
|
||||
<view class="val">45g</view>
|
||||
</view>
|
||||
<view class="item">
|
||||
<icon class="iconfont icon-w_fat_normal"></icon>
|
||||
<text>脂肪</text>
|
||||
<text>30%</text>
|
||||
<view class="val">43g</view>
|
||||
</view> -->
|
||||
</view>
|
||||
<view class="desc" v-for="(ite,ind) in describe" v-if="describe.length">
|
||||
{{ite}}
|
||||
</view>
|
||||
</view>
|
||||
<view class="num">
|
||||
<view class="item" v-for="(ite,ind) in nutrition.describe">
|
||||
<text>{{ite}}</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="subbtn" @click="handleEditKcal">保存</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
|
|
@ -59,12 +44,21 @@
|
|||
import {
|
||||
mapState
|
||||
} from "vuex";
|
||||
import lltSliderRange from '@/uni_modules/llt-slider-range/components/llt-slider-range/llt-slider-range.vue';
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
weight: "",
|
||||
kcal: {},
|
||||
nutrition: {},
|
||||
describe: [],
|
||||
focus: false,
|
||||
carbohydrate_v: 0,
|
||||
protein_v: 0,
|
||||
fat_v: 0,
|
||||
carbohydrate_p: 0,
|
||||
protein_p: 0,
|
||||
fat_p: 0,
|
||||
rangeValue: [0, 0]
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
|
|
@ -76,6 +70,10 @@
|
|||
onLoad() {
|
||||
this.handleList()
|
||||
},
|
||||
components: {
|
||||
lltSliderRange
|
||||
},
|
||||
watch: {},
|
||||
methods: {
|
||||
handleList() {
|
||||
let that = this
|
||||
|
|
@ -85,7 +83,11 @@
|
|||
if (res.code == 0) {
|
||||
that.kcal = res.data.kcal
|
||||
that.nutrition = res.data.nutrition
|
||||
that.describe = res.data.describe ? res.data.describe : []
|
||||
that.weight = res.data.kcal.suggestion_kcal_val
|
||||
that.rangeValue[0] = Number(that.nutrition.list[0].proportion)
|
||||
that.rangeValue[1] = Number(that.nutrition.list[0].proportion) + Number(that.nutrition.list[1].proportion)
|
||||
console.log("that.rangeValue", that.rangeValue)
|
||||
that.handleProportion()
|
||||
}
|
||||
})
|
||||
},
|
||||
|
|
@ -94,10 +96,70 @@
|
|||
url: "/pageTwo/me/userEdit?familayData=" + JSON.stringify(this.userInfo)
|
||||
})
|
||||
},
|
||||
handleEditKcal() {
|
||||
uni.navigateTo({
|
||||
url: "/pageTwo/count/KcalEdit?suggestion_kcal_range_val=" + this.kcal.suggestion_kcal_range_val
|
||||
handleChange(val) {
|
||||
let that = this
|
||||
that.rangeValue = val
|
||||
that.weight = that.weight ? that.weight : Number(that.kcal.suggestion_kcal_val)
|
||||
that.handleProportion()
|
||||
},
|
||||
handleProportion() {
|
||||
let that = this
|
||||
that.nutrition.list.forEach(ite => {
|
||||
if (ite.name.indexOf('碳水') != -1) {
|
||||
ite.proportion = that.rangeValue[0]
|
||||
ite.val = Number(that.weight * ite.proportion / 100 / 4).toFixed(2)
|
||||
that.carbohydrate_v = ite.val
|
||||
that.carbohydrate_p = ite.proportion
|
||||
}
|
||||
if (ite.name.indexOf('蛋白') != -1) {
|
||||
ite.proportion = that.rangeValue[1] - that.rangeValue[0]
|
||||
ite.val = Number(that.weight * ite.proportion / 100 / 4).toFixed(2)
|
||||
that.protein_v = ite.val
|
||||
that.protein_p = ite.proportion
|
||||
|
||||
}
|
||||
if (ite.name.indexOf('脂肪') != -1) {
|
||||
ite.proportion = 100 - that.rangeValue[1]
|
||||
ite.val = Number(that.weight * ite.proportion / 100 / 9).toFixed(2)
|
||||
that.fat_v = ite.val
|
||||
that.fat_p = ite.proportion
|
||||
}
|
||||
})
|
||||
},
|
||||
handleBlur() {
|
||||
let that = this
|
||||
that.weight = that.weight ? that.weight : Number(that.kcal.suggestion_kcal_val)
|
||||
that.handleProportion()
|
||||
},
|
||||
handleEditKcal() {
|
||||
let that = this
|
||||
if (that.weight == '' || Number(that.weight) <= 0) {
|
||||
that.$tools.msg("请输入卡路里")
|
||||
return
|
||||
}
|
||||
that.$model.getCountSetUserKcal({
|
||||
aud_id: that.user.aud_id,
|
||||
set_kcal: that.weight,
|
||||
carbohydrate_v: that.carbohydrate_v,
|
||||
protein_v: that.protein_v,
|
||||
fat_v: that.fat_v,
|
||||
carbohydrate_p: that.carbohydrate_p,
|
||||
protein_p: that.protein_p,
|
||||
fat_p: that.fat_p,
|
||||
}).then(res => {
|
||||
if (res.code == 0) {
|
||||
that.$tools.msg("设置成功")
|
||||
setTimeout(function() {
|
||||
uni.switchTab({
|
||||
url: '/pages/count/count'
|
||||
})
|
||||
}, 1000)
|
||||
}
|
||||
})
|
||||
},
|
||||
handleclear() {
|
||||
this.focus = true
|
||||
this.weight = ""
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -105,118 +167,121 @@
|
|||
|
||||
<style scoped lang="scss">
|
||||
.content {
|
||||
padding: 0 10px;
|
||||
}
|
||||
|
||||
.info {
|
||||
width: calc(100% - 20px);
|
||||
background: #fff;
|
||||
border-radius: 10px;
|
||||
padding: 10px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin: 15px 0;
|
||||
justify-content: space-between;
|
||||
|
||||
.left {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
.name {
|
||||
max-width: 50%;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
view {
|
||||
margin-right: 15px;
|
||||
}
|
||||
|
||||
image {
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
border-radius: 50%;
|
||||
margin-right: 10px;
|
||||
border: 1px solid #dfdfdf;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
icon {
|
||||
font-size: 20px;
|
||||
}
|
||||
padding: 0 30rpx;
|
||||
}
|
||||
|
||||
.kcal {
|
||||
width: 100%;
|
||||
width: calc(100% - 40rpx);
|
||||
background: #fff;
|
||||
margin: 20rpx 0;
|
||||
padding: 20rpx;
|
||||
border-radius: 10px;
|
||||
padding: 10px 0;
|
||||
margin-bottom: 15px;
|
||||
|
||||
.text {
|
||||
padding: 5px 10px;
|
||||
.set {
|
||||
width: calc(100% - 40rpx);
|
||||
background: #f7f7f7;
|
||||
border-radius: 10px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
}
|
||||
padding: 0 10px;
|
||||
position: relative;
|
||||
height: 45px;
|
||||
|
||||
.num {
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
margin: 15px 0;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: baseline;
|
||||
|
||||
text {
|
||||
font-size: 25px;
|
||||
font-weight: bold;
|
||||
margin-right: 5px;
|
||||
color: $maincolor;
|
||||
border-bottom: 1px solid;
|
||||
input {
|
||||
width: 100%;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.item {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
width: 33.3%;
|
||||
justify-content: center;
|
||||
.num {
|
||||
position: absolute;
|
||||
right: 10px;
|
||||
}
|
||||
|
||||
icon {
|
||||
font-size: 40px;
|
||||
color: $uni-color-warning;
|
||||
border-radius: 30%;
|
||||
padding: 5px;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
text {
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
color: #666;
|
||||
display: inline-block;
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
line-height: 20px;
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
.val {
|
||||
width: 100px;
|
||||
background: #f7f7f7;
|
||||
border-radius: 10px;
|
||||
margin: auto;
|
||||
margin-top: 8px;
|
||||
font-weight: bold;
|
||||
padding: 2px 0;
|
||||
}
|
||||
.uni-iocns {
|
||||
position: absolute;
|
||||
right: 50px;
|
||||
z-index: 99;
|
||||
}
|
||||
}
|
||||
|
||||
.desc {
|
||||
margin: 0 10px;
|
||||
font-size: 12px;
|
||||
font-size: 24rpx;
|
||||
color: #999;
|
||||
line-height: 20px;
|
||||
line-height: 40rpx;
|
||||
margin-top: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
.slider {
|
||||
background: #f7f7f7;
|
||||
margin-top: 15px;
|
||||
border-radius: 10px;
|
||||
padding: -10px 0;
|
||||
}
|
||||
|
||||
.list {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
margin-top: 15px;
|
||||
|
||||
|
||||
.item {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
width: 30%;
|
||||
background-color: #f7f7f7;
|
||||
justify-content: center;
|
||||
border-radius: 10px;
|
||||
|
||||
icon {
|
||||
font-size: 40px;
|
||||
color: $uni-color-warning;
|
||||
border-radius: 30%;
|
||||
padding: 5px;
|
||||
}
|
||||
|
||||
text {
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
color: #666;
|
||||
display: inline-block;
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
line-height: 20px;
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
.val {
|
||||
width: 100%;
|
||||
background: #f7f7f7;
|
||||
border-radius: 10px;
|
||||
margin: auto;
|
||||
text-align: center;
|
||||
font-weight: bold;
|
||||
padding: 2px 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.num {
|
||||
display: flex;
|
||||
font-size: 24rpx;
|
||||
flex-direction: column;
|
||||
|
||||
.item {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.subbtn {
|
||||
color: #fff;
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
border-radius: 20rpx;
|
||||
height: 35px;
|
||||
line-height: 35px;
|
||||
margin: 15px 0;
|
||||
background-color: #f0ae43;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -180,15 +180,15 @@
|
|||
}
|
||||
|
||||
.login {
|
||||
width: calc(100% - 30px);
|
||||
width: calc(100% - 60rpx);
|
||||
height: auto;
|
||||
background: #fff;
|
||||
border-radius: 10px;
|
||||
padding: 15px;
|
||||
border-radius: 20rpx;
|
||||
padding: 30rpx;
|
||||
background-color: #fff;
|
||||
z-index: 99;
|
||||
// position: relative;
|
||||
// margin-left: calc(10% - 40px);
|
||||
// margin-left: calc(10% - 80rpx);
|
||||
// box-shadow: 0px 1px 5px 2px #dfe2e1fc;
|
||||
|
||||
.title {
|
||||
|
|
@ -196,7 +196,7 @@
|
|||
color: #333;
|
||||
font-size: 40rpx;
|
||||
font-weight: bold;
|
||||
margin-bottom: 15px;
|
||||
margin-bottom: 30rpx;
|
||||
}
|
||||
|
||||
|
||||
|
|
@ -214,12 +214,12 @@
|
|||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
margin-bottom: 15px;
|
||||
margin-bottom: 30rpx;
|
||||
|
||||
.text {
|
||||
width: 240rpx;
|
||||
height: 40px;
|
||||
line-height: 40px;
|
||||
height: 80rpx;
|
||||
line-height: 80rpx;
|
||||
font-size: 32rpx;
|
||||
}
|
||||
|
||||
|
|
@ -231,15 +231,15 @@
|
|||
position: relative;
|
||||
border: #dfdfdf 1px solid;
|
||||
border-radius: 5px;
|
||||
padding: 0 10px;
|
||||
padding: 0 20rpx;
|
||||
background-color: #f7f7f7;
|
||||
}
|
||||
|
||||
input {
|
||||
height: 40px;
|
||||
line-height: 40px;
|
||||
height: 80rpx;
|
||||
line-height: 80rpx;
|
||||
position: absolute;
|
||||
left: 10px;
|
||||
left: 20rpx;
|
||||
right: 0px;
|
||||
z-index: 88;
|
||||
font-size:28rpx;
|
||||
|
|
@ -258,7 +258,7 @@
|
|||
background: #dfdfdf;
|
||||
font-size: 28rpx;
|
||||
margin: 0;
|
||||
line-height: 40px;
|
||||
line-height: 80rpx;
|
||||
border-radius: 5px;
|
||||
text-align: center;
|
||||
position: absolute;
|
||||
|
|
@ -290,12 +290,12 @@
|
|||
|
||||
.btnlogin {
|
||||
width: 100%;
|
||||
margin: 15px 0;
|
||||
margin: 30rpx 0;
|
||||
height: 42px;
|
||||
line-height: 42px;
|
||||
background: $btncolor;
|
||||
font-weight: 700;
|
||||
border-radius: 15px;
|
||||
border-radius: 30rpx;
|
||||
text-align: center;
|
||||
color: #fff !important;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -238,7 +238,7 @@
|
|||
.xieyi {
|
||||
font-size: 28rpx;
|
||||
color: #999;
|
||||
margin-left: 10px;
|
||||
margin-left: 20rpx;
|
||||
|
||||
text {
|
||||
color: $maincolor;
|
||||
|
|
@ -252,11 +252,11 @@
|
|||
.wxbtn {
|
||||
width: 100%;
|
||||
position: absolute;
|
||||
margin-top: 30px;
|
||||
margin-top: 60rpx;
|
||||
top: 80%;
|
||||
|
||||
icon {
|
||||
font-size: 25px;
|
||||
font-size: 50rpx;
|
||||
color: #28c445;
|
||||
}
|
||||
|
||||
|
|
@ -265,7 +265,7 @@
|
|||
display: block;
|
||||
// width: 100%;
|
||||
margin-top: 5px;
|
||||
font-size: 12px;
|
||||
font-size: 24rpx;
|
||||
// color: #666;
|
||||
text-align: center;
|
||||
border-bottom: 1px solid blue;
|
||||
|
|
@ -274,7 +274,6 @@
|
|||
|
||||
button {
|
||||
line-height: initial;
|
||||
background: #efefef;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
padding: 0;
|
||||
|
|
@ -290,8 +289,8 @@
|
|||
}
|
||||
|
||||
image {
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
width: 60rpx;
|
||||
height: 60rpx;
|
||||
border-radius: 50%;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -62,15 +62,15 @@
|
|||
|
||||
<style lang="scss" scoped>
|
||||
.formbox {
|
||||
padding: 15px;
|
||||
width: calc(100% - 30px);
|
||||
padding: 30rpx;
|
||||
width: calc(100% - 60rpx);
|
||||
}
|
||||
|
||||
.input {
|
||||
margin: 0;
|
||||
display: flex;
|
||||
border-radius: 10px;
|
||||
padding: 10px;
|
||||
border-radius: 20rpx;
|
||||
padding: 20rpx;
|
||||
margin-bottom: 1rem;
|
||||
background: #fff;
|
||||
|
||||
|
|
@ -86,7 +86,7 @@
|
|||
/deep/textarea {
|
||||
width: 100%;
|
||||
height: 6rem;
|
||||
line-height: 20px;
|
||||
line-height: 40rpx;
|
||||
background: none;
|
||||
border: none;
|
||||
font-size: 14px;
|
||||
|
|
@ -95,6 +95,6 @@
|
|||
|
||||
.btn {
|
||||
color: #fff;
|
||||
margin: 15px 0;
|
||||
margin: 30rpx 0;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -0,0 +1,365 @@
|
|||
<template>
|
||||
<view class="content">
|
||||
<!-- 搜索 -->
|
||||
<search @handleSearch="handleSearch"></search>
|
||||
|
||||
<!-- 头部1级菜单栏 -->
|
||||
<view class="tab_list">
|
||||
<scroll-view class="scroll-menu" scroll-x="true" style="white-space: nowrap;">
|
||||
<view class="tabbar" v-for="(ite,ind) in menuTop" :key="ind" @click="handleToggle(ind)">
|
||||
<view :class="[index ==ind?'active':'']">{{ite.name}}</view>
|
||||
</view>
|
||||
</scroll-view>
|
||||
</view>
|
||||
|
||||
<view class="box menu" :class="[ActiveList.length?'maxheight':'']">
|
||||
<!-- 左侧2级商品 -->
|
||||
<view class="left">
|
||||
<view class="name" v-for="(ite,ind) in menu2" :key="ind" :class="[leftInd==ind?'active':'']"
|
||||
@click="handleToggleLeft(ind)">
|
||||
{{ite.name}}
|
||||
</view>
|
||||
</view>
|
||||
<!-- 右侧3级 -->
|
||||
<view class="right">
|
||||
<view class="list mt-15">
|
||||
<view class="item" v-for="(ite,ind) in menu3" :key="ind" @click="handleDetail(ite,1)"
|
||||
:class="[ActiveList.indexOf(ite)!=-1?'active0':'']">
|
||||
<text class="overflow">{{ite.name}}</text>
|
||||
<icon class="iconfont" :class="[ActiveList.indexOf(ite)!=-1?'icon-xuanzhong':'icon-add']" />
|
||||
</view>
|
||||
<!-- <div class="slot" style="width: 100%;height: 340rpx;" v-if="ActiveList.length>0"></div> -->
|
||||
</view>
|
||||
<view v-if="!menu3.length" class="nolist">
|
||||
<icon class="iconfont icon-wancan"></icon>
|
||||
<text>还没有数据哦！</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<!-- 选中区 -->
|
||||
<view class="activeList" v-if="ActiveList.length">
|
||||
<view class="list">
|
||||
<view class="item" v-for="(ite,ind) in ActiveList" :key="ind">
|
||||
<text>{{ite.name}}</text>
|
||||
<icon class="iconfont icon-quxiao" @click="handleDetail(ite,2)"></icon>
|
||||
</view>
|
||||
</view>
|
||||
<view class="groupbtn">
|
||||
<view @click="handledelete">清空</view>
|
||||
<view class="subbtn" @click="handlesubbtn"> 确定</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {
|
||||
mapState
|
||||
} from "vuex";
|
||||
import search from "../../components/search.vue"
|
||||
export default {
|
||||
components: {
|
||||
search
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
text: "",
|
||||
index: 0,
|
||||
leftInd: 0,
|
||||
menu: [],
|
||||
menu2: [],
|
||||
menu3: [],
|
||||
menulist: [],
|
||||
ActiveList: [],
|
||||
page: 1,
|
||||
type: "",
|
||||
name: "",
|
||||
lastPage: "",
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
...mapState(["foodList"]),
|
||||
menuTop() {
|
||||
this.menu2 = this.foodList.length ? this.foodList[0].list : [],
|
||||
console.log([...this.foodList, {
|
||||
id: 4,
|
||||
list: [],
|
||||
name: '搜索'
|
||||
}])
|
||||
return [...this.foodList, {
|
||||
id: 4,
|
||||
list: [],
|
||||
name: '搜索'
|
||||
}]
|
||||
},
|
||||
},
|
||||
onLoad(options) {
|
||||
let that = this
|
||||
if (options && options.list) {
|
||||
let list = JSON.parse(options.list)
|
||||
console.log("11111111", list)
|
||||
}
|
||||
that.handleHomeInfo()
|
||||
},
|
||||
onPullDownRefresh() {
|
||||
let that = this
|
||||
if (!this.lastPage || this.page >= this.lastPage) {
|
||||
uni.showToast({
|
||||
title: '没有更多数据！',
|
||||
icon: 'none'
|
||||
})
|
||||
return
|
||||
}
|
||||
this.page++
|
||||
if (that.menu2.length) {
|
||||
that.handleHomeInfo()
|
||||
}
|
||||
setTimeout(function() {
|
||||
uni.stopPullDownRefresh();
|
||||
}, 500);
|
||||
},
|
||||
methods: {
|
||||
handleHomeInfo() {
|
||||
let that = this
|
||||
that.$model.getCookFoodList({
|
||||
food_level2_id: that.menu2[that.leftInd].id,
|
||||
page: that.page,
|
||||
search_data: that.name
|
||||
}).then(res => {
|
||||
if (res.code != 0) return
|
||||
that.lastPage = res.data.page_total
|
||||
that.menu3 = that.menu3.concat(res.data.content_list)
|
||||
})
|
||||
},
|
||||
// 头部切换
|
||||
handleToggle(ind) {
|
||||
let that = this
|
||||
that.index = ind
|
||||
that.leftInd = 0
|
||||
that.menu2 = that.menuTop[ind].list
|
||||
that.menu3 = []
|
||||
that.page = 1
|
||||
if (that.menu2.length) {
|
||||
that.handleHomeInfo()
|
||||
}
|
||||
},
|
||||
// 左侧切换
|
||||
handleToggleLeft(ind) {
|
||||
let that = this
|
||||
that.leftInd = ind
|
||||
that.menu3 = []
|
||||
that.page = 1
|
||||
that.handleHomeInfo()
|
||||
},
|
||||
// 商品选择
|
||||
handleDetail(ite, ind) {
|
||||
var that = this;
|
||||
let list = []
|
||||
if (ind == 1) {
|
||||
list.push(ite)
|
||||
that.ActiveList = that.$tools.mergeAndDeduplicate(that.ActiveList, list, 'name')
|
||||
} else {
|
||||
for (var n = 0; n < that.ActiveList.length; n++) {
|
||||
if (ite.name == that.ActiveList[n].name) {
|
||||
that.ActiveList.splice(n, 1)
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
// 商品清空
|
||||
handledelete() {
|
||||
this.ActiveList = []
|
||||
},
|
||||
// 商品提交
|
||||
handlesubbtn() {
|
||||
let that = this
|
||||
let pages = getCurrentPages()
|
||||
let prevPage = pages[pages.length - 2]
|
||||
prevPage.$vm.getAddFood(that.ActiveList)
|
||||
uni.navigateBack({
|
||||
delta: 1
|
||||
})
|
||||
},
|
||||
// 搜索
|
||||
handleSearch(name) {
|
||||
let that = this
|
||||
let list = []
|
||||
if (name != "") {
|
||||
that.$model.getFoodSearch({
|
||||
food_name: name
|
||||
}).then(res => {
|
||||
if (res.code != 0) {
|
||||
uni.showToast({
|
||||
title: res.msg,
|
||||
icon: 'error'
|
||||
})
|
||||
return
|
||||
}
|
||||
that.index = 3
|
||||
that.menu2 = []
|
||||
that.menu3 = res.data
|
||||
})
|
||||
}
|
||||
},
|
||||
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.tab_list {
|
||||
display: flex;
|
||||
top: 100rpx;
|
||||
width: 100%;
|
||||
position: fixed;
|
||||
z-index: 99;
|
||||
height: 100rpx;
|
||||
background: #FFF;
|
||||
justify-content: space-between;
|
||||
|
||||
.scroll-menu {
|
||||
width: 100%;
|
||||
|
||||
.tabbar {
|
||||
padding: 20rpx;
|
||||
display: inline-block;
|
||||
|
||||
view {
|
||||
display: inline-block;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.active {
|
||||
color: #fff;
|
||||
padding: 5px 8px;
|
||||
border-radius: 5px;
|
||||
background-color: #ff4c4f;
|
||||
}
|
||||
}
|
||||
|
||||
.menu {
|
||||
width: 100%;
|
||||
position: relative;
|
||||
margin-top: 101px;
|
||||
height: calc(100vh - 101px) !important;
|
||||
|
||||
.left {
|
||||
top: 101px !important;
|
||||
position: fixed;
|
||||
background-color: #f7f7f7;
|
||||
height: calc(100vh - 100px);
|
||||
}
|
||||
|
||||
.right {
|
||||
top: 0px !important;
|
||||
height: calc(100vh - 100px);
|
||||
|
||||
.list {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.item {
|
||||
width: 29%;
|
||||
border: 1px solid #dfdfdf;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
box-sizing: border-box;
|
||||
justify-content: space-between;
|
||||
height: 60rpx;
|
||||
border-radius: 5px;
|
||||
margin: 0 2% 20rpx;
|
||||
padding: 0 5px;
|
||||
|
||||
text {
|
||||
margin-bottom: 0 !important;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.icon-xuanzhong {
|
||||
color: $maincolor;
|
||||
}
|
||||
|
||||
.active0 {
|
||||
border: 1px solid $maincolor;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.activeList {
|
||||
position: fixed;
|
||||
bottom: 0px;
|
||||
left: 0;
|
||||
right: 0;
|
||||
z-index: 999;
|
||||
background: #fff;
|
||||
padding: 20rpx 0;
|
||||
border-radius: 20rpx 20rpx 0 0;
|
||||
box-shadow: 0px 1px 5px 2px #dfe2e1fc;
|
||||
|
||||
.list {
|
||||
height: 340rpx;
|
||||
overflow: scroll;
|
||||
padding-bottom: 55px;
|
||||
// display: flex;
|
||||
// flex-wrap: wrap;
|
||||
|
||||
.item {
|
||||
border: 1px solid $maincolor;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
height: 56rpx;
|
||||
box-sizing: border-box;
|
||||
border-radius: 5px;
|
||||
align-items: center;
|
||||
margin: 0 2% 20rpx;
|
||||
float: left;
|
||||
padding: 0 20rpx;
|
||||
|
||||
icon {
|
||||
color: $maincolor;
|
||||
font-size: 16px;
|
||||
margin-left: 10rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.groupbtn {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
position: absolute;
|
||||
left: 0px;
|
||||
right: 0px;
|
||||
bottom: 0px;
|
||||
padding: 20rpx;
|
||||
background: #fff;
|
||||
border-top: 1px solid #f7f7f7;
|
||||
|
||||
view {
|
||||
width: 40%;
|
||||
text-align: center;
|
||||
border: 1px solid #dfdfdf;
|
||||
border-radius: 20rpx;
|
||||
height: 31px;
|
||||
line-height: 31px;
|
||||
}
|
||||
|
||||
.subbtn {
|
||||
color: #fff;
|
||||
border-color: $maincolor;
|
||||
background-color: $maincolor;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.maxheight {
|
||||
.left {
|
||||
height: calc(100vh - 680rpx);
|
||||
}
|
||||
.right {
|
||||
height: calc(100vh - 680rpx);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,54 +1,113 @@
|
|||
<template>
|
||||
<view class="content">
|
||||
<!-- 搜索 -->
|
||||
<search @handleSearch="handleSearch"></search>
|
||||
|
||||
<!-- 头部1级菜单栏 -->
|
||||
<view class="tab_list">
|
||||
<scroll-view class="scroll-menu" scroll-x="true" style="white-space: nowrap;">
|
||||
<view class="tabbar" v-for="(ite,ind) in menuTop" :key="ind" @click="handleToggle(ind)">
|
||||
<view :class="[index ==ind?'active':'']">{{ite.name}}</view>
|
||||
</view>
|
||||
</scroll-view>
|
||||
</view>
|
||||
|
||||
<view class="box menu" :class="[ActiveList.length?'maxheight':'']">
|
||||
<!-- 左侧2级商品 -->
|
||||
<view class="left">
|
||||
<view class="name" v-for="(ite,ind) in menu2" :key="ind" :class="[leftInd==ind?'active':'']"
|
||||
@click="handleToggleLeft(ind)">
|
||||
{{ite.name}}
|
||||
</view>
|
||||
</view>
|
||||
<!-- 右侧3级 -->
|
||||
<view class="right">
|
||||
<view class="list mt-15">
|
||||
<view class="item" v-for="(ite,ind) in menu3" :key="ind" @click="handleDetail(ite,1)"
|
||||
:class="[ActiveList.indexOf(ite)!=-1?'active0':'']">
|
||||
<text class="overflow">{{ite.name}}</text>
|
||||
<icon class="iconfont" :class="[ActiveList.indexOf(ite)!=-1?'icon-xuanzhong':'icon-add']" />
|
||||
<view class="serachBox">
|
||||
<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"></icon>
|
||||
<view class="voice" v-if="!search_value">
|
||||
<uni-icons class="mic" type="mic-filled" size="26" @click="onShowSearchType(1)"></uni-icons>
|
||||
<uni-icons class="camera" type="camera-filled" size="26"
|
||||
@click="onShowSearchType(2)"></uni-icons>
|
||||
</view>
|
||||
<!-- <div class="slot" style="width: 100%;height: 340rpx;" v-if="ActiveList.length>0"></div> -->
|
||||
</view>
|
||||
<view v-if="!menu3.length" class="nolist">
|
||||
<icon class="iconfont icon-wancan"></icon>
|
||||
<text>还没有数据哦！</text>
|
||||
<view class="searchBtn">
|
||||
<view @click="handleSerach">搜索</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<!-- 选中区 -->
|
||||
<view class="activeList" v-if="ActiveList.length">
|
||||
<view class="list">
|
||||
<view class="item" v-for="(ite,ind) in ActiveList" :key="ind">
|
||||
<!-- 历史搜索 -->
|
||||
<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="search_list" v-if="search_list.length">
|
||||
<view class="search_list_item" v-for="(ite,ind) in search_list" @click="handleDetail(ite,1)">
|
||||
<image :src="ite.pic_url"></image>
|
||||
<view>
|
||||
<text>{{ite.name}}</text>
|
||||
<icon class="iconfont icon-quxiao" @click="handleDetail(ite,2)"></icon>
|
||||
<text>100g/{{ite.kcal}}kcal</text>
|
||||
</view>
|
||||
<view v-if="ActiveList.indexOf(ite)!=-1" class="dui">
|
||||
<uni-icons type="checkmarkempty" size="22" color="#F7931E"></uni-icons>
|
||||
</view>
|
||||
</view>
|
||||
<view class="groupbtn">
|
||||
<view @click="handledelete">清空</view>
|
||||
<view class="subbtn" @click="handlesubbtn"> 确定</view>
|
||||
<view class="endtext" v-if="!lastPage || page >= lastPage">—— 到底了，看看别的吧 ——</view>
|
||||
</view>
|
||||
<!-- 语音描述 -->
|
||||
<view class="auto-search-dialog" v-if="showAutoSearchDlg">
|
||||
<view class="auto-search-inner">
|
||||
<text>{{autoSearchContent != '' ? `识别到你描述的食材为“${autoSearchContent}”,是否查找食材“${autoSearchContent}”` : "长安麦克风图标开始说话，松开后结束"}}</text>
|
||||
<view class="mic-icon" :style="{'border-color':mic_touch ? '#18bc37' : '#777777'}"
|
||||
@touchstart="onVoiceTouchStart" @touchend="onVoiceTouchEnd"
|
||||
v-if="autoSearchContent == ''">
|
||||
<uni-icons type="mic-filled" size="80" :color="mic_touch ? '#18bc37' : '#777777'"></uni-icons>
|
||||
</view>
|
||||
<view class="btn-wrap" v-else>
|
||||
<view class="retry" @click="retrySearch">重试</view>
|
||||
<view class="confirm" @click="handleVoiceSearch(autoSearchContent)">确定</view>
|
||||
</view>
|
||||
<uni-icons class="close" type="close" color="#ffffff" size="45"
|
||||
@click="showAutoSearchDlg=false"></uni-icons>
|
||||
</view>
|
||||
</view>
|
||||
<!-- 底部购物车 -->
|
||||
<view class="groupbtn" v-if="ActiveList.length">
|
||||
<view class="che" @click="isShop =! isShop">
|
||||
<text v-if="ActiveList.length">{{ActiveList.length}}</text>
|
||||
<icon class="t-icon t-icon-canpan"></icon>
|
||||
</view>
|
||||
<view class="subbtn" @click="handlesubbtn"> 确定</view>
|
||||
</view>
|
||||
<!-- 购物车列表 -->
|
||||
<view class="wrapper activeList" v-if="isShop">
|
||||
<view class="bg" @click='isShop=false'>
|
||||
<view class="box2" @click.stop>
|
||||
<view class="list" v-if="ActiveList.length">
|
||||
<view class="item" v-for="(ite,ind) in ActiveList" :key="ind">
|
||||
<view class="">
|
||||
<text class="name">{{ite.name}}</text>
|
||||
</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>
|
||||
</template>
|
||||
|
||||
|
|
@ -56,52 +115,49 @@
|
|||
import {
|
||||
mapState
|
||||
} from "vuex";
|
||||
import search from "../../components/search.vue"
|
||||
const plugin = requirePlugin("WechatSI")
|
||||
export default {
|
||||
components: {
|
||||
search
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
text: "",
|
||||
index: 0,
|
||||
leftInd: 0,
|
||||
menu: [],
|
||||
menu2: [],
|
||||
menu3: [],
|
||||
menulist: [],
|
||||
ActiveList: [],
|
||||
page: 1,
|
||||
type: "",
|
||||
name: "",
|
||||
isShop: false,
|
||||
showAll: false,
|
||||
IsWeight: false,
|
||||
search_list: [],
|
||||
ActiveList: [],
|
||||
lastPage: "",
|
||||
search_value: '',
|
||||
mic_touch: false,
|
||||
voiceManager: null,
|
||||
autoSearchContent: "",
|
||||
showAutoSearchDlg: false
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
...mapState(["foodList"]),
|
||||
menuTop() {
|
||||
this.menu2 = this.foodList.length ? this.foodList[0].list : [],
|
||||
console.log([...this.foodList, {
|
||||
id: 4,
|
||||
list: [],
|
||||
name: '搜索'
|
||||
}])
|
||||
return [...this.foodList, {
|
||||
id: 4,
|
||||
list: [],
|
||||
name: '搜索'
|
||||
}]
|
||||
...mapState(["configInfo", "user"]),
|
||||
popular_food() {
|
||||
return this.configInfo.search_guess.food_data
|
||||
},
|
||||
},
|
||||
onLoad(options) {
|
||||
let that = this
|
||||
if (options && options.list) {
|
||||
let list = JSON.parse(options.list)
|
||||
console.log("11111111", list)
|
||||
history_food() {
|
||||
return this.configInfo.search_history.food
|
||||
}
|
||||
that.handleHomeInfo()
|
||||
},
|
||||
onPullDownRefresh() {
|
||||
onLoad() {
|
||||
let that = this
|
||||
},
|
||||
mounted() {
|
||||
let that = this
|
||||
that.voiceManager = plugin.getRecordRecognitionManager()
|
||||
that.voiceManager.onStop = function(res) {
|
||||
that.autoSearchContent = res.result.replace('。', '')
|
||||
}
|
||||
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({
|
||||
|
|
@ -111,49 +167,12 @@
|
|||
return
|
||||
}
|
||||
this.page++
|
||||
if (that.menu2.length) {
|
||||
that.handleHomeInfo()
|
||||
}
|
||||
setTimeout(function() {
|
||||
uni.stopPullDownRefresh();
|
||||
}, 500);
|
||||
this.handleSerach()
|
||||
},
|
||||
methods: {
|
||||
handleHomeInfo() {
|
||||
let that = this
|
||||
that.$model.getCookFoodList({
|
||||
food_level2_id: that.menu2[that.leftInd].id,
|
||||
page: that.page,
|
||||
search_data: that.name
|
||||
}).then(res => {
|
||||
if (res.code != 0) return
|
||||
that.lastPage = res.data.page_total
|
||||
that.menu3 = that.menu3.concat(res.data.content_list)
|
||||
})
|
||||
},
|
||||
// 头部切换
|
||||
handleToggle(ind) {
|
||||
let that = this
|
||||
that.index = ind
|
||||
that.leftInd = 0
|
||||
that.menu2 = that.menuTop[ind].list
|
||||
that.menu3 = []
|
||||
that.page = 1
|
||||
if (that.menu2.length) {
|
||||
that.handleHomeInfo()
|
||||
}
|
||||
},
|
||||
// 左侧切换
|
||||
handleToggleLeft(ind) {
|
||||
let that = this
|
||||
that.leftInd = ind
|
||||
that.menu3 = []
|
||||
that.page = 1
|
||||
that.handleHomeInfo()
|
||||
},
|
||||
// 商品选择
|
||||
// 食物选择
|
||||
handleDetail(ite, ind) {
|
||||
var that = this;
|
||||
let that = this
|
||||
let list = []
|
||||
if (ind == 1) {
|
||||
list.push(ite)
|
||||
|
|
@ -166,11 +185,122 @@
|
|||
}
|
||||
}
|
||||
},
|
||||
// 商品清空
|
||||
handledelete() {
|
||||
this.ActiveList = []
|
||||
onShowSearchType(type) {
|
||||
let that = this
|
||||
console.log("autoSearchType", type, that.autoSearchContent)
|
||||
this.autoSearchType = type
|
||||
|
||||
if (type == 1) {
|
||||
that.showAutoSearchDlg = true
|
||||
} else if (type == 2) {
|
||||
that.selectPhoto()
|
||||
}
|
||||
},
|
||||
// 商品提交
|
||||
// 搜索
|
||||
handleSerach() {
|
||||
let that = this
|
||||
that.search_list = []
|
||||
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 = []
|
||||
},
|
||||
handleVoiceSearch() {
|
||||
let that = this
|
||||
if (that.autoSearchContent != '') {
|
||||
that.search_value = that.autoSearchContent
|
||||
that.showAutoSearchDlg = false
|
||||
that.autoSearchContent = ''
|
||||
that.handleSerach()
|
||||
}
|
||||
},
|
||||
// 历史搜索
|
||||
handleSearchHistory(text) {
|
||||
let that = this
|
||||
that.search_value = text
|
||||
that.showAutoSearchDlg = false
|
||||
that.autoSearchContent = ''
|
||||
that.handleSerach()
|
||||
},
|
||||
// 重试
|
||||
retrySearch() {
|
||||
let that = this
|
||||
that.autoSearchContent = ''
|
||||
if (that.autoSearchType == 2) {
|
||||
that.showAutoSearchDlg = false
|
||||
that.selectPhoto()
|
||||
}
|
||||
},
|
||||
// 开始说话
|
||||
onVoiceTouchStart() {
|
||||
let that = this
|
||||
that.mic_touch = true
|
||||
that.voiceManager.start({
|
||||
duration: 60000,
|
||||
lang: "zh_CN"
|
||||
})
|
||||
},
|
||||
// 语音结束
|
||||
onVoiceTouchEnd() {
|
||||
let that = this
|
||||
that.mic_touch = false
|
||||
that.voiceManager.stop()
|
||||
},
|
||||
selectPhoto() {
|
||||
let that = this
|
||||
uni.chooseMedia({
|
||||
count: 1,
|
||||
mediaType: ['image'],
|
||||
sourceType: ['album', 'camera'],
|
||||
sizeType: ['compressed'],
|
||||
camera: 'back',
|
||||
success(res) {
|
||||
const tempFilePath = res.tempFiles[0].tempFilePath
|
||||
uni.getFileSystemManager().readFile({
|
||||
filePath: tempFilePath,
|
||||
encoding: 'base64',
|
||||
success: (res) => {
|
||||
const base64 = 'data:image/jpeg;base64,' + res.data
|
||||
|
||||
uni.showLoading({
|
||||
title: '图片识别中...',
|
||||
mask: true
|
||||
})
|
||||
|
||||
that.$model.getPhotoSearch({
|
||||
img_str: base64,
|
||||
}).then(res => {
|
||||
uni.hideLoading()
|
||||
if (res.code != 0) return
|
||||
that.autoSearchContent = res.data.name
|
||||
that.showAutoSearchDlg = true
|
||||
})
|
||||
},
|
||||
fail: (err) => {
|
||||
console.error('读取文件失败:', err)
|
||||
}
|
||||
})
|
||||
},
|
||||
fail(err) {
|
||||
console.error('拍照失败:', err)
|
||||
}
|
||||
})
|
||||
},
|
||||
// 购物车提交
|
||||
handlesubbtn() {
|
||||
let that = this
|
||||
let pages = getCurrentPages()
|
||||
|
|
@ -180,186 +310,399 @@
|
|||
delta: 1
|
||||
})
|
||||
},
|
||||
// 搜索
|
||||
handleSearch(name) {
|
||||
//删除购物车食材
|
||||
handledelactive(ite) {
|
||||
let that = this
|
||||
let list = []
|
||||
if (name != "") {
|
||||
that.$model.getFoodSearch({
|
||||
food_name: name
|
||||
}).then(res => {
|
||||
if (res.code != 0) {
|
||||
uni.showToast({
|
||||
title: res.msg,
|
||||
icon: 'error'
|
||||
})
|
||||
return
|
||||
}
|
||||
that.index = 3
|
||||
that.menu2 = []
|
||||
that.menu3 = res.data
|
||||
})
|
||||
}
|
||||
that.ActiveList.splice(that.ActiveList.indexOf(ite), 1);
|
||||
},
|
||||
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.tab_list {
|
||||
display: flex;
|
||||
top: 50px;
|
||||
width: 100%;
|
||||
.serachBox {
|
||||
height: 80rpx;
|
||||
position: fixed;
|
||||
z-index: 99;
|
||||
height: 45px;
|
||||
background: #FFF;
|
||||
justify-content: space-between;
|
||||
|
||||
.scroll-menu {
|
||||
width: 100%;
|
||||
|
||||
.tabbar {
|
||||
padding: 10px;
|
||||
display: inline-block;
|
||||
|
||||
view {
|
||||
display: inline-block;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.active {
|
||||
color: #fff;
|
||||
padding: 5px 8px;
|
||||
border-radius: 5px;
|
||||
background-color: #ff4c4f;
|
||||
}
|
||||
}
|
||||
|
||||
.menu {
|
||||
width: 100%;
|
||||
position: relative;
|
||||
margin-top: 101px;
|
||||
height: calc(100vh - 101px) !important;
|
||||
|
||||
.left {
|
||||
top: 101px !important;
|
||||
position: fixed;
|
||||
background-color: #f7f7f7;
|
||||
height: calc(100vh - 100px);
|
||||
}
|
||||
|
||||
.right {
|
||||
top: 0px !important;
|
||||
height: calc(100vh - 100px);
|
||||
|
||||
.list {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.item {
|
||||
width: 29%;
|
||||
border: 1px solid #dfdfdf;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
box-sizing: border-box;
|
||||
justify-content: space-between;
|
||||
height: 30px;
|
||||
border-radius: 5px;
|
||||
margin: 0 2% 10px;
|
||||
padding: 0 5px;
|
||||
|
||||
text {
|
||||
margin-bottom: 0 !important;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.icon-xuanzhong {
|
||||
color: $maincolor;
|
||||
}
|
||||
|
||||
.active0 {
|
||||
border: 1px solid $maincolor;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.activeList {
|
||||
position: fixed;
|
||||
bottom: 0px;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
z-index: 999;
|
||||
background: #fff;
|
||||
padding: 10px 0;
|
||||
border-radius: 10px 10px 0 0;
|
||||
box-shadow: 0px 1px 5px 2px #dfe2e1fc;
|
||||
padding: 30rpx 20rpx;
|
||||
z-index: 19;
|
||||
background-color: #efefef;
|
||||
|
||||
.list {
|
||||
height: 340rpx;
|
||||
overflow: scroll;
|
||||
padding-bottom: 55px;
|
||||
// display: flex;
|
||||
// flex-wrap: wrap;
|
||||
.serach-box {
|
||||
height: 80rpx;
|
||||
border-radius: 20rpx;
|
||||
position: relative;
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
.item {
|
||||
border: 1px solid $maincolor;
|
||||
.searchInput {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
right: 120rpx;
|
||||
height: 80rpx;
|
||||
|
||||
icon {
|
||||
position: absolute;
|
||||
right: 20rpx;
|
||||
top: 20rpx;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
height: 28px;
|
||||
box-sizing: border-box;
|
||||
border-radius: 5px;
|
||||
align-items: center;
|
||||
margin: 0 2% 10px;
|
||||
float: left;
|
||||
padding: 0 10px;
|
||||
z-index: 9;
|
||||
}
|
||||
|
||||
icon {
|
||||
color: $maincolor;
|
||||
font-size: 16px;
|
||||
margin-left: 10rpx;
|
||||
.voice {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
align-items: center;
|
||||
position: absolute;
|
||||
right: 20rpx;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
width: 150rpx;
|
||||
display: flex;
|
||||
z-index: 9;
|
||||
|
||||
.mic {
|
||||
margin-right: 10rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.groupbtn {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
.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;
|
||||
bottom: 0px;
|
||||
padding: 10px;
|
||||
background: #fff;
|
||||
border-top: 1px solid #f7f7f7;
|
||||
border-radius: 20rpx;
|
||||
|
||||
view {
|
||||
width: 40%;
|
||||
text-align: center;
|
||||
border: 1px solid #dfdfdf;
|
||||
border-radius: 10px;
|
||||
height: 31px;
|
||||
line-height: 31px;
|
||||
}
|
||||
|
||||
.icon {
|
||||
width: 100rpx;
|
||||
height: 80rpx;
|
||||
position: absolute;
|
||||
right: 30rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.content-box {
|
||||
border-radius: 20rpx 20rpx 0 0;
|
||||
position: relative;
|
||||
z-index: 9;
|
||||
width: 100%;
|
||||
margin: 65px 0 30rpx;
|
||||
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;
|
||||
margin-bottom: 80px;
|
||||
|
||||
.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 80%);
|
||||
|
||||
.food-title {
|
||||
font-size: 34rpx;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.subbtn {
|
||||
color: #fff;
|
||||
border-color: $maincolor;
|
||||
background-color: $maincolor;
|
||||
.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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.maxheight {
|
||||
.left {
|
||||
height: calc(100vh - 680rpx);
|
||||
.search_list {
|
||||
display: flex;
|
||||
padding: 0 20rpx;
|
||||
flex-wrap: wrap;
|
||||
margin: 75px 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;
|
||||
position: relative;
|
||||
|
||||
image {
|
||||
width: 80rpx;
|
||||
height: 80rpx;
|
||||
margin-right: 20rpx;
|
||||
border-radius: 20rpx;
|
||||
}
|
||||
|
||||
text {
|
||||
width: 100%;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.dui {
|
||||
position: absolute;
|
||||
right: 30rpx;
|
||||
}
|
||||
|
||||
:nth-child(2) text {
|
||||
margin-top: 5px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.auto-search-dialog {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
position: fixed;
|
||||
left: 0;
|
||||
top: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
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: 70%;
|
||||
height: 350rpx;
|
||||
padding: 80rpx 0;
|
||||
background-color: #fff;
|
||||
border-radius: 20rpx;
|
||||
box-shadow: 0 0 20rpx #ccc;
|
||||
|
||||
.close {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: -140rpx;
|
||||
width: 90rpx;
|
||||
margin: 0 auto;
|
||||
}
|
||||
}
|
||||
|
||||
text {
|
||||
font-size: 32rpx;
|
||||
width: 80%;
|
||||
}
|
||||
|
||||
.mic-icon {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
width: 150rpx;
|
||||
height: 150rpx;
|
||||
border-radius: 50%;
|
||||
border: 8rpx solid #777777;
|
||||
}
|
||||
|
||||
.btn-wrap {
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
width: 90%;
|
||||
|
||||
.retry,
|
||||
.confirm {
|
||||
width: 190rpx;
|
||||
height: 60rpx;
|
||||
line-height: 60rpx;
|
||||
text-align: center;
|
||||
font-size: 28rpx;
|
||||
border: 2rpx solid #777;
|
||||
border-radius: 15rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.activeList {
|
||||
z-index: 12;
|
||||
bottom: 100rpx;
|
||||
|
||||
.box2 {
|
||||
height: 500rpx;
|
||||
background: #fff;
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
bottom: 70px;
|
||||
padding-bottom: 90px;
|
||||
border-radius: 20rpx 20rpx 0 0;
|
||||
}
|
||||
|
||||
.list {
|
||||
padding-bottom: 55px;
|
||||
|
||||
.name {
|
||||
margin-right: 5px;
|
||||
}
|
||||
|
||||
icon {
|
||||
font-size: 22px;
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
.groupbtn {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 0 20rpx 40rpx;
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
height: 55px;
|
||||
z-index: 99;
|
||||
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;
|
||||
}
|
||||
|
||||
.che {
|
||||
width: 120rpx;
|
||||
height: 120rpx;
|
||||
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: 120rpx;
|
||||
height: 120rpx;
|
||||
border-radius: 50%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.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;
|
||||
}
|
||||
.right {
|
||||
height: calc(100vh - 680rpx);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -26,9 +26,9 @@
|
|||
<view class="food" v-if="isFood">
|
||||
<view class="h4">
|
||||
添加食材
|
||||
<text class="close" @click="handleClose" v-if="info.food_list.length">清空</text>
|
||||
<text class="close" @click="handleClose" v-if="info.tags.length">清空</text>
|
||||
</view>
|
||||
<view class="foodlist" v-for="(ite,ind) in info.food_list" :key="ind" v-if="info.food_list.length">
|
||||
<view class="foodlist" v-for="(ite,ind) in info.tags[0].list" :key="ind" v-if="info.tags.length">
|
||||
<view class="item">
|
||||
<view class="name">{{ite.name}}</view>
|
||||
<view class="input">
|
||||
|
|
@ -102,9 +102,9 @@
|
|||
}
|
||||
},
|
||||
computed: {
|
||||
...mapState(["menuList"]),
|
||||
...mapState(["configInfo"]),
|
||||
menu() {
|
||||
return this.menuList
|
||||
return this.configInfo.cookbook_label
|
||||
},
|
||||
},
|
||||
onLoad(options) {
|
||||
|
|
@ -355,25 +355,25 @@
|
|||
|
||||
<style scoped lang="scss">
|
||||
.content {
|
||||
padding: 0 15px;
|
||||
padding: 0 30rpx;
|
||||
}
|
||||
|
||||
.topimg {
|
||||
width: 100%;
|
||||
height: 320px;
|
||||
height: 340rpx;
|
||||
background: #fff;
|
||||
border-radius: 10px;
|
||||
border-radius: 20rpx;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
flex-wrap: wrap;
|
||||
flex-direction: column;
|
||||
margin-bottom: 10px;
|
||||
margin: 20rpx 0;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
|
||||
.iconfont {
|
||||
font-size: 30px;
|
||||
font-size: 60rpx;
|
||||
color: $maincolor;
|
||||
}
|
||||
|
||||
|
|
@ -381,7 +381,7 @@
|
|||
display: inline-block;
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
font-size: 12px;
|
||||
font-size: 24rpx;
|
||||
color: #999;
|
||||
}
|
||||
|
||||
|
|
@ -399,10 +399,10 @@
|
|||
|
||||
.step {
|
||||
.image {
|
||||
height: 320px;
|
||||
height: 340rpx;
|
||||
margin: auto;
|
||||
background: #f7f7f7;
|
||||
border-radius: 10px;
|
||||
border-radius: 20rpx;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
|
|
@ -417,7 +417,7 @@
|
|||
}
|
||||
|
||||
icon {
|
||||
font-size: 30px;
|
||||
font-size: 60rpx;
|
||||
color: #ff4c4f;
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
|
|
@ -432,18 +432,18 @@
|
|||
.title,
|
||||
.textarea {
|
||||
/deep/input {
|
||||
height: 40px;
|
||||
line-height: 40px;
|
||||
height: 80rpx;
|
||||
line-height: 80rpx;
|
||||
}
|
||||
|
||||
/deep/textarea {
|
||||
width: 100%;
|
||||
height: 6rem;
|
||||
line-height: 20px;
|
||||
line-height: 40rpx;
|
||||
background: none;
|
||||
border: none;
|
||||
font-size: 14px;
|
||||
padding-top: 10px;
|
||||
padding-top: 20rpx;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -454,8 +454,8 @@
|
|||
}
|
||||
|
||||
/deep/picker {
|
||||
height: 45px;
|
||||
line-height: 45px;
|
||||
height: 100rpx;
|
||||
line-height: 100rpx;
|
||||
|
||||
.uni-input {
|
||||
display: flex;
|
||||
|
|
|
|||
|
|
@ -180,10 +180,10 @@
|
|||
}
|
||||
},
|
||||
computed: {
|
||||
...mapState(["user", "menuList"]),
|
||||
menu() {
|
||||
return this.menuList
|
||||
},
|
||||
...mapState(["user", "configInfo"]),
|
||||
menu() {
|
||||
return this.configInfo.cookbook_label
|
||||
},
|
||||
},
|
||||
components: {
|
||||
blueTooth
|
||||
|
|
@ -366,7 +366,7 @@
|
|||
|
||||
<style lang="scss" scoped>
|
||||
.content {
|
||||
padding: 0 15px;
|
||||
padding: 0 30rpx;
|
||||
}
|
||||
|
||||
.maxheight {
|
||||
|
|
@ -376,20 +376,20 @@
|
|||
|
||||
.topimg {
|
||||
width: 100%;
|
||||
height: 320px;
|
||||
height: 340rpx;
|
||||
background: #fff;
|
||||
border-radius: 10px;
|
||||
border-radius: 20rpx;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
flex-wrap: wrap;
|
||||
flex-direction: column;
|
||||
margin-bottom: 10px;
|
||||
margin: 20rpx 0;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
|
||||
.iconfont {
|
||||
font-size: 30px;
|
||||
font-size: 60rpx;
|
||||
color: $maincolor;
|
||||
}
|
||||
|
||||
|
|
@ -414,10 +414,10 @@
|
|||
|
||||
.step {
|
||||
.image {
|
||||
height: 320px;
|
||||
height: 340rpx;
|
||||
margin: auto;
|
||||
background: #f7f7f7;
|
||||
border-radius: 10px;
|
||||
border-radius: 20rpx;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
|
|
@ -432,7 +432,7 @@
|
|||
}
|
||||
|
||||
icon {
|
||||
font-size: 30px;
|
||||
font-size: 60rpx;
|
||||
color: #ff4c4f;
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
|
|
@ -440,7 +440,7 @@
|
|||
}
|
||||
|
||||
.title {
|
||||
padding: 10px;
|
||||
padding: 20rpx;
|
||||
|
||||
.table {
|
||||
font-size: 16px;
|
||||
|
|
@ -451,15 +451,15 @@
|
|||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-top: 15px;
|
||||
margin-top: 30rpx;
|
||||
|
||||
.left {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
image {
|
||||
width: 25px;
|
||||
height: 25px;
|
||||
width: 50rpx;
|
||||
height: 50rpx;
|
||||
margin-right: 5px;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
|
@ -473,13 +473,13 @@
|
|||
|
||||
.desc {
|
||||
width: 100%;
|
||||
line-height: 25px;
|
||||
margin-bottom: 10px;
|
||||
line-height: 50rpx;
|
||||
margin-bottom: 20rpx;
|
||||
}
|
||||
|
||||
.h4 {
|
||||
margin: 10px 0;
|
||||
padding-top: 10px;
|
||||
margin: 20rpx 0;
|
||||
padding-top: 20rpx;
|
||||
border-top: 1px solid #f7f7f7;
|
||||
|
||||
.tags {
|
||||
|
|
@ -500,12 +500,12 @@
|
|||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border-radius: 10px;
|
||||
border-radius: 20rpx;
|
||||
background-color: $maincolor;
|
||||
|
||||
image {
|
||||
width: 25px;
|
||||
height: 25px;
|
||||
width: 50rpx;
|
||||
height: 50rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -515,7 +515,7 @@
|
|||
}
|
||||
|
||||
.foodlist {
|
||||
border-radius: 10px;
|
||||
border-radius: 20rpx;
|
||||
background: #fff;
|
||||
|
||||
.item {
|
||||
|
|
@ -537,8 +537,8 @@
|
|||
background: #fff;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
padding: 5px 0px 20px;
|
||||
border-radius: 10px 10px 0 0;
|
||||
padding: 5px 0px 40rpx;
|
||||
border-radius: 20rpx 20rpx 0 0;
|
||||
box-shadow: 0px 1px 5px 2px #dfe2e1fc;
|
||||
|
||||
.item {
|
||||
|
|
@ -561,7 +561,7 @@
|
|||
|
||||
//
|
||||
.weightBox {
|
||||
top: 32px;
|
||||
top: 64rpx;
|
||||
height: auto;
|
||||
border-radius: 0;
|
||||
|
||||
|
|
@ -574,12 +574,12 @@
|
|||
border-bottom: 1px solid #fff;
|
||||
|
||||
icon {
|
||||
font-size: 45px;
|
||||
margin-top: -30px;
|
||||
font-size: 100rpx;
|
||||
margin-top: -60rpx;
|
||||
background: #fff;
|
||||
border-radius: 50%;
|
||||
width: 45px;
|
||||
height: 45px;
|
||||
width: 100rpx;
|
||||
height: 100rpx;
|
||||
position: absolute;
|
||||
right: 16px;
|
||||
}
|
||||
|
|
@ -589,15 +589,15 @@
|
|||
border-radius: 0;
|
||||
height: 40%;
|
||||
overflow: scroll;
|
||||
margin-top: 15px;
|
||||
margin-top: 30rpx;
|
||||
|
||||
.text {
|
||||
width: 100%;
|
||||
font-weight: bold;
|
||||
font-size: 14px;
|
||||
display: flex;
|
||||
height: 40px;
|
||||
line-height: 40px;
|
||||
height: 80rpx;
|
||||
line-height: 80rpx;
|
||||
|
||||
text {
|
||||
width: 18%;
|
||||
|
|
@ -621,14 +621,14 @@
|
|||
display: flex;
|
||||
// justify-content: space-between;
|
||||
align-items: center;
|
||||
height: 40px;
|
||||
line-height: 40px;
|
||||
height: 80rpx;
|
||||
line-height: 80rpx;
|
||||
font-size: 16px;
|
||||
|
||||
view {
|
||||
width: 18%;
|
||||
text-align: center;
|
||||
font-size: 12px;
|
||||
font-size: 24rpx;
|
||||
}
|
||||
|
||||
:nth-child(5) {
|
||||
|
|
@ -647,7 +647,7 @@
|
|||
.name {
|
||||
width: auto;
|
||||
float: left;
|
||||
font-size: 12px;
|
||||
font-size: 24rpx;
|
||||
font-weight: 500;
|
||||
width: 28% !important;
|
||||
text-align: left !important;
|
||||
|
|
@ -659,26 +659,26 @@
|
|||
.title {
|
||||
width: 100%;
|
||||
padding: 0;
|
||||
margin-top: 10px;
|
||||
margin-top: 20rpx;
|
||||
overflow: hidden;
|
||||
position: absolute;
|
||||
bottom: 10px;
|
||||
bottom: 20rpx;
|
||||
top: 50%;
|
||||
left: 0;
|
||||
right: 0;
|
||||
|
||||
/deep/.weightPages {
|
||||
top: 15px;
|
||||
top: 30rpx;
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
.groupbtn {
|
||||
position: absolute;
|
||||
left: 15px;
|
||||
right: 15px;
|
||||
left: 30rpx;
|
||||
right: 30rpx;
|
||||
width: auto;
|
||||
bottom: 50px;
|
||||
bottom: 100rpx;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -1,10 +1,7 @@
|
|||
<template>
|
||||
<view class="content">
|
||||
<!-- 搜索 -->
|
||||
<view class="search">
|
||||
<input type="text" placeholder="请输入关键字快速搜索" v-model="name" />
|
||||
<image src="/static/28.png" @click="handleSearch"></image>
|
||||
</view>
|
||||
<search @handleSearch="handleSearch"></search>
|
||||
<!-- 食谱 -->
|
||||
<view class="footlist footbox" v-if="menuList.length">
|
||||
<view class="list" v-for="(it,id) in menuList" :key="it" @click="handleDetail(it.id)">
|
||||
|
|
@ -24,8 +21,8 @@
|
|||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="endtext" v-if="!lastPage || page >= lastPage">—— 到底了，看看别的吧 ——</view>
|
||||
</view>
|
||||
<view class="endtext" v-if="(!lastPage || page >= lastPage)&&menuList.length">—— 到底了，看看别的吧 ——</view>
|
||||
<view v-if="!menuList.length" class="nolist">
|
||||
<icon class="iconfont icon-wancan"></icon>
|
||||
<text>还没有记录哦</text>
|
||||
|
|
@ -98,9 +95,10 @@
|
|||
})
|
||||
},
|
||||
// 搜索
|
||||
handleSearch() {
|
||||
handleSearch(ite) {
|
||||
let that = this
|
||||
that.page = 1
|
||||
that.name = ite
|
||||
that.menuList = []
|
||||
that.lastPage = ""
|
||||
that.handleCooklist()
|
||||
|
|
@ -114,51 +112,25 @@
|
|||
background: #fff;
|
||||
}
|
||||
|
||||
.search {
|
||||
width: 100%;
|
||||
position: fixed;
|
||||
left: 0;
|
||||
top: 0;
|
||||
padding-bottom: 35px;
|
||||
padding-top: 10px;
|
||||
background-color: $maincolor;
|
||||
|
||||
|
||||
input {
|
||||
width: calc(100% - 40px);
|
||||
background: #fff;
|
||||
height: 39px;
|
||||
line-height: 38px;
|
||||
border-radius: 10px;
|
||||
padding: 0 10px;
|
||||
margin: 0 10px;
|
||||
}
|
||||
|
||||
.input:hover {
|
||||
box-shadow: 0 1rpx 20rpx #ccc;
|
||||
}
|
||||
|
||||
image {
|
||||
width: 25px;
|
||||
height: 25px;
|
||||
position: absolute;
|
||||
right: 20px;
|
||||
top: 18px;
|
||||
z-index: 99;
|
||||
}
|
||||
/deep/.serachBox {
|
||||
padding-top: 20rpx !important;
|
||||
}
|
||||
|
||||
.footlist {
|
||||
position: relative;
|
||||
margin-top: 68px;
|
||||
padding: 15px;
|
||||
width: calc(100% - 30px);
|
||||
padding: 30rpx;
|
||||
width: calc(100% - 60rpx);
|
||||
background: #fff;
|
||||
border-radius: 15px 15px 0 0;
|
||||
border-radius: 30rpx 30rpx 0 0;
|
||||
|
||||
.item {
|
||||
background: #f7f7f7 !important;
|
||||
border-top: 1px solid #f7f7f7;
|
||||
}
|
||||
}
|
||||
|
||||
.nolist {
|
||||
margin-top: 50%;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -30,14 +30,8 @@
|
|||
export default {
|
||||
data() {
|
||||
return {
|
||||
list: [],
|
||||
page: 1,
|
||||
lastPage: '',
|
||||
markDays: {
|
||||
warning: [],
|
||||
success: [],
|
||||
error: [],
|
||||
},
|
||||
infoList: []
|
||||
}
|
||||
},
|
||||
|
|
@ -53,7 +47,6 @@
|
|||
onLoad() {
|
||||
let that = this
|
||||
that.page = 1
|
||||
that.list = []
|
||||
that.handleList()
|
||||
},
|
||||
onReachBottom() {
|
||||
|
|
@ -76,56 +69,16 @@
|
|||
page: that.page,
|
||||
}).then(res => {
|
||||
if (res) {
|
||||
console.log("11111", res)
|
||||
that.list = res.content_list
|
||||
for (var i = 0; i < res.pkList.list.length; i++) {
|
||||
if (Date.parse(that.endDate) == Date.parse(res.pkList.list[i].time)) {
|
||||
that.infoList.push(res.pkList.list[i]);
|
||||
}
|
||||
if (res.pkList.list[i].describe=="超标") {
|
||||
that.markDays.error.push(res.pkList.list[i].time);
|
||||
}
|
||||
if (res.pkList.list[i].describe=="达标") {
|
||||
that.markDays.success.push(res.pkList.list[i].time);
|
||||
}
|
||||
if (res.pkList.list[i].describe=="不达标") {
|
||||
that.markDays.warning.push(res.pkList.list[i].time);
|
||||
}
|
||||
}
|
||||
that.infoList = that.infoList.concat(res.content_list)
|
||||
that.lastPage = res.page_total
|
||||
}
|
||||
})
|
||||
},
|
||||
// 日期选择
|
||||
maskClick(e) {
|
||||
let that = this
|
||||
console.log('maskClick事件:', e);
|
||||
that.infoList = []
|
||||
for (var i = 0; i < that.list.length; i++) {
|
||||
if (Date.parse(e.date) == Date.parse(that.list[i].time)) { //includes 检测数组是否有某个值
|
||||
that.infoList.push(that.list[i]);
|
||||
}
|
||||
}
|
||||
},
|
||||
onMonthClickPre(data) {
|
||||
let that = this
|
||||
console.log("上月", data)
|
||||
that.list = []
|
||||
that.infoList = []
|
||||
that.markDays = {
|
||||
warning: [],
|
||||
success: [],
|
||||
error: [],
|
||||
}
|
||||
that.startM = data.substring(0, 10)
|
||||
that.endM = data.substring(11, 21)
|
||||
that.handleList()
|
||||
},
|
||||
onMonthClickNext(data) {
|
||||
console.log("下月", data)
|
||||
},
|
||||
handleDetail(item) {
|
||||
let that = this
|
||||
uni.setStorageSync("startDay", item.time)
|
||||
this.$store.dispatch("getCountFoodInfo", {
|
||||
aud_id: this.user.aud_id,
|
||||
time: item.time
|
||||
})
|
||||
uni.switchTab({
|
||||
url: '/pages/count/count'
|
||||
});
|
||||
|
|
@ -137,7 +90,7 @@
|
|||
|
||||
<style scoped="scoped" lang="scss">
|
||||
.content {
|
||||
padding: 0 15px;
|
||||
padding: 0 30rpx;
|
||||
}
|
||||
|
||||
.calendar {
|
||||
|
|
@ -148,29 +101,29 @@
|
|||
left: 0;
|
||||
right: 0;
|
||||
z-index: 20;
|
||||
height: 40px;
|
||||
line-height: 40px;
|
||||
height: 80rpx;
|
||||
line-height: 80rpx;
|
||||
box-shadow: 0px 1px 5px 2px #dfe2e1fc;
|
||||
}
|
||||
|
||||
.box {
|
||||
margin-top: 15px;
|
||||
margin-top: 30rpx;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.list {
|
||||
color: #999;
|
||||
width: calc(100% - 30px);
|
||||
width: calc(100% - 60rpx);
|
||||
background: #fff;
|
||||
margin-bottom: 15px;
|
||||
border-radius: 15px;
|
||||
padding: 10px 15px;
|
||||
margin-bottom: 30rpx;
|
||||
border-radius: 30rpx;
|
||||
padding: 20rpx 30rpx;
|
||||
|
||||
|
||||
.time {
|
||||
width: 100%;
|
||||
height: 30px;
|
||||
line-height: 30px;
|
||||
height: 60rpx;
|
||||
line-height: 60rpx;
|
||||
}
|
||||
|
||||
.kcal {
|
||||
|
|
@ -190,8 +143,8 @@
|
|||
}
|
||||
|
||||
.quan0 {
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
width: 24rpx;
|
||||
height: 24rpx;
|
||||
background: $uni-color-warning;
|
||||
display: inline-block;
|
||||
border-radius: 50%;
|
||||
|
|
|
|||
|
|
@ -0,0 +1,617 @@
|
|||
<template>
|
||||
<view class="content">
|
||||
<view class="content_box">
|
||||
<view class="set">
|
||||
<view class="date">{{foodInfo.date}}</view>
|
||||
</view>
|
||||
<view class="box">
|
||||
<view class="kcal2">
|
||||
<view class="top">
|
||||
<view class="left ">
|
||||
<view class="center">
|
||||
可以吃
|
||||
<text>{{foodInfo.remaining_kcal}}</text>
|
||||
<view class="unit">Kcal</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="right">
|
||||
<view class="item border-bottom">
|
||||
<text class="name">已摄入</text>
|
||||
<text class="bold">
|
||||
{{foodInfo.today_intake.kcal}}千卡
|
||||
</text>
|
||||
</view>
|
||||
<view class="item">
|
||||
<text class="name">碳水</text>
|
||||
<text class="bold">
|
||||
{{foodInfo.today_intake.carbohydrate}}/{{foodInfo.suggestion.carbohydrate}}
|
||||
</text>
|
||||
</view>
|
||||
<view class="item">
|
||||
<text class="name">脂肪</text>
|
||||
<text class="bold">
|
||||
{{foodInfo.today_intake.fat}}/{{foodInfo.suggestion.fat}}
|
||||
</text>
|
||||
</view>
|
||||
<view class="item">
|
||||
<text class="name">蛋白</text>
|
||||
<text class="bold">
|
||||
{{foodInfo.today_intake.protein}}/{{foodInfo.suggestion.protein}}
|
||||
</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<!-- -->
|
||||
<view class="tabbar-box">
|
||||
<view class="list" v-if="foodInfo.list.length">
|
||||
<view class="listbox" v-for="(ite,ind) in foodInfo.list" :key="ind">
|
||||
<view class="left">
|
||||
<view class="title">{{ite.name}}</view>
|
||||
<view class="kcalval">
|
||||
<text>{{ite.val}}</text>{{ite.unit}}
|
||||
</view>
|
||||
</view>
|
||||
<view class="right">
|
||||
<view class="item" @click="showFoodDetail(it)" v-for="(it,id) in ite.list">
|
||||
<image :src="it.pic_url" mode="aspectFill"></image>
|
||||
<text>{{it.name}}</text>
|
||||
<text>{{it.weight}}</text>
|
||||
<text>{{it.val}}千卡</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<!-- 加餐 -->
|
||||
<!-- 营养含量分析 -->
|
||||
<uni-drawer ref="showRight" mode="right" width="300">
|
||||
<scroll-view style="height: 100%;" scroll-y="true">
|
||||
<view class="foodDetail">
|
||||
<view class="foodInfo">
|
||||
<image :src="activeFoodDetail.pic_url" mode="aspectFill"></image>
|
||||
<view class="info">
|
||||
<view class="name">{{activeFoodDetail.name}}</view>
|
||||
<view class="kcal">{{activeFoodDetail.val}}千卡</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="foodContent">
|
||||
<view class="title">热量和营养</view>
|
||||
<view class="progress">
|
||||
<div class="chart-wrap">
|
||||
<qiun-data-charts type="ring" :opts="opts" :canvas2d="true" canvasId="foodCharts"
|
||||
:chartData="chartData2" :cHeight="250" :cWidth="250" />
|
||||
<view class="uchart-kcal">{{activeFoodDetail.val}}</view>
|
||||
</div>
|
||||
<view class="info" v-if="activeFoodDetail.nutrients_four">
|
||||
<view class="info-item" v-for="(item,index) in activeFoodDetail.nutrients_four.slice(1)"
|
||||
:key="index">
|
||||
<view class="color" :style="{'background-color':`${item.color}`}"></view>
|
||||
<view>{{item.name}}：{{item.proportion}}%</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="tips">
|
||||
<text>营养素</text>
|
||||
<text>{{activeFoodDetail.weight}}含量</text>
|
||||
</view>
|
||||
<view class="foodDetailList">
|
||||
<view class="foodDetailItem" v-for="(item,index) in activeFoodDetail.nutrients_list"
|
||||
:key="index">
|
||||
<view class="name">{{item.name_ch}}</view>
|
||||
<view class="value">{{item.value}}{{item.unit}}
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</scroll-view>
|
||||
</uni-drawer>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {
|
||||
mapState
|
||||
} from "vuex";
|
||||
let next = 0
|
||||
import qiunDataCharts from '@/uni_modules/qiun-data-charts/components/qiun-data-charts.vue';
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
token: "",
|
||||
index: 0,
|
||||
opts: {
|
||||
dataLabel: false,
|
||||
color: ["#5180D8", "#ED7886", "#FFB169"],
|
||||
background: "transparent",
|
||||
canvas: {
|
||||
background: "transparent"
|
||||
},
|
||||
legend: {
|
||||
show: false // 这个设置将隐藏图例
|
||||
},
|
||||
title: {
|
||||
name: "",
|
||||
fontSize: 20,
|
||||
offsetY: -3,
|
||||
color: "#333333"
|
||||
},
|
||||
subtitle: {
|
||||
name: "千卡",
|
||||
fontSize: 14,
|
||||
offsetY: 12,
|
||||
color: "#888888"
|
||||
},
|
||||
extra: {
|
||||
ring: {
|
||||
ringWidth: 10,
|
||||
labelWidth: 0,
|
||||
border: false,
|
||||
// customRadius: 50
|
||||
}
|
||||
}
|
||||
},
|
||||
isShow: false,
|
||||
chartData2: {},
|
||||
activeFoodDetail: {},
|
||||
}
|
||||
},
|
||||
components: {
|
||||
qiunDataCharts
|
||||
},
|
||||
computed: {
|
||||
...mapState(["user", "countFoodInfo"]),
|
||||
userinfo() {
|
||||
return this.user.aud_id
|
||||
},
|
||||
foodInfo() {
|
||||
return this.countFoodInfo
|
||||
}
|
||||
},
|
||||
onLoad(options) {
|
||||
let that = this
|
||||
that.$store.dispatch("getCountFoodInfo", {
|
||||
aud_id: that.user.aud_id,
|
||||
time: options.time
|
||||
})
|
||||
},
|
||||
methods: {
|
||||
// 详情
|
||||
showFoodDetail(item) {
|
||||
console.log("item", item)
|
||||
let chart_data = []
|
||||
this.activeFoodDetail = item
|
||||
this.$refs.showRight.open();
|
||||
this.opts.color = []
|
||||
for (let i = 1; i < item.nutrients_four.length; ++i) {
|
||||
this.opts.color.push(item.nutrients_four[i].color)
|
||||
chart_data.push({
|
||||
name: item.nutrients_four[i].name,
|
||||
value: Number(item.nutrients_four[i].proportion),
|
||||
})
|
||||
}
|
||||
this.chartData2 = JSON.parse(JSON.stringify({
|
||||
series: [{
|
||||
data: chart_data
|
||||
}]
|
||||
}));
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.content {
|
||||
padding: 0 20rpx;
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
.content_box {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.box {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.set {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
margin-top: 20rpx;
|
||||
font-size: 16px;
|
||||
font-weight: bold;
|
||||
|
||||
.icon {
|
||||
background: #d1f2ed;
|
||||
border-radius: 50%;
|
||||
font-size: 56rpx;
|
||||
color: #66cccc;
|
||||
text-align: center;
|
||||
padding: 5px;
|
||||
}
|
||||
}
|
||||
|
||||
.kcal2 {
|
||||
width: calc(100% - 40rpx);
|
||||
margin-bottom: 30rpx;
|
||||
background: #fff;
|
||||
border-radius: 20rpx;
|
||||
padding: 20rpx;
|
||||
position: relative;
|
||||
margin-top: 30rpx;
|
||||
background: #f3fffd;
|
||||
box-shadow: 0px 1px 5px 2px #dfe2e1fc;
|
||||
|
||||
.left {
|
||||
width: 300rpx;
|
||||
height: 300rpx;
|
||||
position: relative;
|
||||
border-radius: 50%;
|
||||
background: #d1f2ed;
|
||||
border: 5px solid #66cccc;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
|
||||
.center {
|
||||
position: absolute;
|
||||
text-align: center;
|
||||
width: 260rpx;
|
||||
height: 260rpx;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background: #fff;
|
||||
border-radius: 50%;
|
||||
|
||||
text {
|
||||
display: inline-block;
|
||||
font-size: 22px;
|
||||
font-weight: bold;
|
||||
margin: 20rpx 0;
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
.right {
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
bottom: 0;
|
||||
top: 0px;
|
||||
right: 0;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
padding: 0 20rpx;
|
||||
border-radius: 0 20rpx 20rpx 0;
|
||||
justify-content: center;
|
||||
flex-direction: column;
|
||||
background: #d1f2ed;
|
||||
|
||||
.item {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
height: 35px;
|
||||
line-height: 35px;
|
||||
}
|
||||
|
||||
.border-bottom {
|
||||
border-bottom: 1px solid #dfdfdf;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.tools {
|
||||
width: 100%;
|
||||
background: #fff;
|
||||
border-radius: 20rpx;
|
||||
padding: 20rpx 0;
|
||||
display: flex;
|
||||
margin-bottom: 30rpx;
|
||||
justify-content: space-between;
|
||||
box-shadow: 0px 1px 5px 2px #dfe2e1fc;
|
||||
|
||||
.type {
|
||||
width: 20%;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
image {
|
||||
width: 100rpx;
|
||||
height: 100rpx;
|
||||
}
|
||||
|
||||
.text {
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
font-weight: bold;
|
||||
|
||||
icon {
|
||||
font-size: 14px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.list {
|
||||
width: 100%;
|
||||
padding-bottom: 100rpx;
|
||||
|
||||
.listbox {
|
||||
width: calc(100% - 40rpx);
|
||||
padding: 20rpx;
|
||||
border-radius: 20rpx;
|
||||
margin: 30rpx 0px;
|
||||
box-shadow: 0px 1px 5px 2px #dfe2e1fc;
|
||||
}
|
||||
|
||||
.left {
|
||||
width: 100%;
|
||||
margin-bottom: 20rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
.title {
|
||||
font-size: 16px;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
text {
|
||||
font-weight: bold;
|
||||
margin-right: 5px;
|
||||
margin-left: 30rpx;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.right {
|
||||
background: #f3fffd;
|
||||
padding: 20rpx;
|
||||
border-radius: 20rpx;
|
||||
|
||||
|
||||
.item {
|
||||
height: 80rpx;
|
||||
line-height: 80rpx;
|
||||
border-bottom: 1px solid #f7f7f7;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
|
||||
image {
|
||||
width: 60rpx;
|
||||
height: 60rpx;
|
||||
border-radius: 12rpx;
|
||||
margin-right: 10rpx;
|
||||
}
|
||||
|
||||
:nth-child(2) {
|
||||
width: 40%;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
:nth-child(3) {
|
||||
width: 20%;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
:nth-child(4) {
|
||||
width: 26%;
|
||||
margin-right: 6rpx;
|
||||
text-align: right;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.nolist {
|
||||
font-size: 24rpx;
|
||||
color: #999;
|
||||
padding: 60rpx 20rpx;
|
||||
text-align: center;
|
||||
width: auto;
|
||||
|
||||
image {
|
||||
width: 100rpx;
|
||||
height: 100rpx;
|
||||
color: #999;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
margin-bottom: 20rpx;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.list2 {
|
||||
margin-top: 45%;
|
||||
|
||||
.btn {
|
||||
color: #fff;
|
||||
height: 64rpx;
|
||||
line-height: 64rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.addfood {
|
||||
background-color: #fff;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
padding: 20rpx 20rpx 0 20rpx;
|
||||
border-radius: 20rpx 20rpx 0 0;
|
||||
|
||||
.iconfont {
|
||||
position: absolute;
|
||||
right: 7px;
|
||||
top: -20rpx;
|
||||
background: #f7f7f7;
|
||||
border-radius: 50%;
|
||||
font-size: 60rpx;
|
||||
}
|
||||
|
||||
.list {
|
||||
padding-bottom: 0px;
|
||||
|
||||
.item {
|
||||
height: 80rpx;
|
||||
line-height: 80rpx;
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
.name {
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
:nth-child(2).item {
|
||||
border-bottom: 1px solid #dfdfdf;
|
||||
border-top: 1px solid #dfdfdf;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.foodDetail {
|
||||
background-color: #F7F7F7;
|
||||
padding: 20rpx;
|
||||
box-sizing: border-box;
|
||||
|
||||
.foodInfo {
|
||||
display: flex;
|
||||
width: 100%;
|
||||
padding: 30rpx;
|
||||
border-radius: 20rpx;
|
||||
box-sizing: border-box;
|
||||
background-color: #fff;
|
||||
box-sizing: 0 0 20rpx #f1f1f1;
|
||||
|
||||
image {
|
||||
width: 90rpx;
|
||||
height: 90rpx;
|
||||
border-radius: 15rpx;
|
||||
}
|
||||
|
||||
.info {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
margin-left: 30rpx;
|
||||
|
||||
.name {
|
||||
font-size: 28rpx;
|
||||
font-weight: 700;
|
||||
margin-bottom: 10rpx;
|
||||
}
|
||||
|
||||
.kcal {
|
||||
width: 100% !important;
|
||||
font-size: 24rpx;
|
||||
color: #666;
|
||||
padding: 0 !important;
|
||||
margin: 0 !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.foodContent {
|
||||
width: 100%;
|
||||
padding: 30rpx;
|
||||
margin-top: 16rpx;
|
||||
box-sizing: border-box;
|
||||
border-radius: 20rpx;
|
||||
box-sizing: border-box;
|
||||
background-color: #fff;
|
||||
box-sizing: 0 0 20rpx #f1f1f1;
|
||||
|
||||
.title {
|
||||
font-size: 28rpx;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.progress {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
.chart-wrap {
|
||||
position: relative;
|
||||
width: 250rpx;
|
||||
height: 250rpx;
|
||||
margin-top: -30rpx;
|
||||
|
||||
.uchart-kcal {
|
||||
position: absolute;
|
||||
left: 60rpx;
|
||||
top: 120rpx;
|
||||
width: 130rpx;
|
||||
font-size: 40rpx;
|
||||
text-align: center;
|
||||
z-index: 9;
|
||||
}
|
||||
}
|
||||
|
||||
.info {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
font-size: 24rpx;
|
||||
|
||||
.info-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-top: 20rpx;
|
||||
|
||||
.color {
|
||||
width: 6rpx;
|
||||
height: 20rpx;
|
||||
margin-right: 10rpx;
|
||||
border-radius: 3rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.tips {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
border-bottom: 1px solid #f1f1f1;
|
||||
padding: 16rpx 0;
|
||||
font-size: 24rpx;
|
||||
margin-top: 10rpx;
|
||||
}
|
||||
|
||||
.foodDetailList {
|
||||
margin-top: 10rpx;
|
||||
|
||||
.foodDetailItem {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
padding: 20rpx 0;
|
||||
box-sizing: border-box;
|
||||
|
||||
.name {
|
||||
font-size: 24rpx;
|
||||
color: #777;
|
||||
}
|
||||
|
||||
.val {
|
||||
font-size: 24rpx;
|
||||
font-weight: 700;
|
||||
color: #333;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -166,15 +166,15 @@
|
|||
|
||||
<style scoped="scoped" lang="scss">
|
||||
.content {
|
||||
padding: 0 15px;
|
||||
padding: 0 30rpx;
|
||||
}
|
||||
|
||||
.lanBox {
|
||||
margin-top: 15px;
|
||||
padding: 15px 15px 0;
|
||||
width: calc(100% - 30px);
|
||||
margin-top: 30rpx;
|
||||
padding: 30rpx 30rpx 0;
|
||||
width: calc(100% - 60rpx);
|
||||
background: #fff;
|
||||
border-radius: 10px;
|
||||
border-radius: 20rpx;
|
||||
|
||||
.headbox {
|
||||
text-align: center;
|
||||
|
|
@ -182,7 +182,7 @@
|
|||
display: flex;
|
||||
justify-content: center;
|
||||
height: 65px;
|
||||
margin-bottom: 15px;
|
||||
margin-bottom: 30rpx;
|
||||
|
||||
.headimage {
|
||||
display: block;
|
||||
|
|
@ -198,8 +198,8 @@
|
|||
display: flex;
|
||||
align-items: center;
|
||||
font-size: 14px;
|
||||
height: 50px;
|
||||
line-height: 50px;
|
||||
height: 100rpx;
|
||||
line-height: 100rpx;
|
||||
border-bottom: 1px solid #f7f7f7;
|
||||
|
||||
.left {
|
||||
|
|
@ -213,21 +213,21 @@
|
|||
align-items: center;
|
||||
justify-content: flex-end;
|
||||
width: 76%;
|
||||
height: 50px;
|
||||
height: 100rpx;
|
||||
position: relative;
|
||||
text-align: right;
|
||||
|
||||
|
||||
/deep/input {
|
||||
height: 50px;
|
||||
line-height: 50px;
|
||||
height: 100rpx;
|
||||
line-height: 100rpx;
|
||||
border: none;
|
||||
background: inherit;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.name {
|
||||
padding-right: 25px;
|
||||
padding-right: 50rpx;
|
||||
}
|
||||
|
||||
picker {
|
||||
|
|
@ -245,7 +245,7 @@
|
|||
|
||||
text {
|
||||
display: inline-block;
|
||||
width: 30px;
|
||||
width: 60rpx;
|
||||
text-align: right;
|
||||
color: #828282;
|
||||
}
|
||||
|
|
@ -255,7 +255,7 @@
|
|||
position: absolute;
|
||||
right: 0px;
|
||||
top: 0;
|
||||
width: 30px;
|
||||
width: 60rpx;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -109,11 +109,11 @@
|
|||
}
|
||||
|
||||
.login {
|
||||
width: calc(100% - 30px);
|
||||
width: calc(100% - 60rpx);
|
||||
height: auto;
|
||||
background: #fff;
|
||||
border-radius: 10px;
|
||||
padding: 15px;
|
||||
border-radius: 20rpx;
|
||||
padding: 30rpx;
|
||||
|
||||
z-index: 99;
|
||||
|
||||
|
|
@ -122,7 +122,7 @@
|
|||
color: #333;
|
||||
font-size: 40rpx;
|
||||
font-weight: bold;
|
||||
margin-bottom: 15px;
|
||||
margin-bottom: 30rpx;
|
||||
}
|
||||
|
||||
|
||||
|
|
@ -140,12 +140,12 @@
|
|||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
margin-bottom: 15px;
|
||||
margin-bottom: 30rpx;
|
||||
|
||||
.text {
|
||||
width: 80px;
|
||||
height: 40px;
|
||||
line-height: 40px;
|
||||
height: 80rpx;
|
||||
line-height: 80rpx;
|
||||
font-size: 32rpx;
|
||||
}
|
||||
|
||||
|
|
@ -157,15 +157,15 @@
|
|||
position: relative;
|
||||
border: #dfdfdf 1px solid;
|
||||
border-radius: 5px;
|
||||
padding: 0 10px;
|
||||
padding: 0 20rpx;
|
||||
background-color: #f7f7f7;
|
||||
}
|
||||
|
||||
input {
|
||||
height: 40px;
|
||||
line-height: 40px;
|
||||
height: 80rpx;
|
||||
line-height: 80rpx;
|
||||
position: absolute;
|
||||
left: 10px;
|
||||
left: 20rpx;
|
||||
right: 0px;
|
||||
z-index: 88;
|
||||
font-size: 32rpx;
|
||||
|
|
@ -173,18 +173,18 @@
|
|||
|
||||
.yanzhengma {
|
||||
input {
|
||||
right: 120px;
|
||||
right: 140rpx;
|
||||
font-size: 32rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.code {
|
||||
width: 110px;
|
||||
width: 120rpx;
|
||||
background: #dfdfdf;
|
||||
font-size: 14px;
|
||||
margin: 0;
|
||||
line-height: 40px;
|
||||
line-height: 80rpx;
|
||||
border-radius: 5px;
|
||||
text-align: center;
|
||||
position: absolute;
|
||||
|
|
@ -199,12 +199,12 @@
|
|||
|
||||
.btnlogin {
|
||||
width: 100%;
|
||||
margin: 15px 0;
|
||||
margin: 30rpx 0;
|
||||
height: 42px;
|
||||
line-height: 42px;
|
||||
background: $btncolor;
|
||||
font-weight: 700;
|
||||
border-radius: 15px;
|
||||
border-radius: 30rpx;
|
||||
text-align: center;
|
||||
color: #fff !important;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -72,11 +72,11 @@
|
|||
}
|
||||
|
||||
.login {
|
||||
width: calc(100% - 30px);
|
||||
width: calc(100% - 60rpx);
|
||||
height: auto;
|
||||
background: #fff;
|
||||
border-radius: 10px;
|
||||
padding: 15px;
|
||||
border-radius: 20rpx;
|
||||
padding: 30rpx;
|
||||
z-index: 99;
|
||||
|
||||
.editem {
|
||||
|
|
@ -93,12 +93,12 @@
|
|||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
margin-bottom: 15px;
|
||||
margin-bottom: 30rpx;
|
||||
|
||||
.text {
|
||||
width: 80px;
|
||||
height: 40px;
|
||||
line-height: 40px;
|
||||
height: 80rpx;
|
||||
line-height: 80rpx;
|
||||
font-size: 32rpx;
|
||||
}
|
||||
|
||||
|
|
@ -110,15 +110,15 @@
|
|||
position: relative;
|
||||
border: #dfdfdf 1px solid;
|
||||
border-radius: 5px;
|
||||
padding: 0 10px;
|
||||
padding: 0 20rpx;
|
||||
background-color: #f7f7f7;
|
||||
}
|
||||
|
||||
input {
|
||||
height: 40px;
|
||||
line-height: 40px;
|
||||
height: 80rpx;
|
||||
line-height: 80rpx;
|
||||
position: absolute;
|
||||
left: 10px;
|
||||
left: 20rpx;
|
||||
right: 0px;
|
||||
z-index: 88;
|
||||
font-size: 28rpx;
|
||||
|
|
@ -128,12 +128,12 @@
|
|||
|
||||
.btnlogin {
|
||||
width: 100%;
|
||||
margin: 15px 0;
|
||||
margin: 30rpx 0;
|
||||
height: 42px;
|
||||
line-height: 42px;
|
||||
background: $btncolor;
|
||||
font-weight: 700;
|
||||
border-radius: 15px;
|
||||
border-radius: 30rpx;
|
||||
text-align: center;
|
||||
color: #fff !important;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -109,11 +109,11 @@
|
|||
}
|
||||
|
||||
.login {
|
||||
width: calc(100% - 30px);
|
||||
width: calc(100% - 60rpx);
|
||||
height: auto;
|
||||
background: #fff;
|
||||
border-radius: 10px;
|
||||
padding: 15px;
|
||||
border-radius: 20rpx;
|
||||
padding: 30rpx;
|
||||
z-index: 99;
|
||||
|
||||
.title {
|
||||
|
|
@ -121,7 +121,7 @@
|
|||
color: #333;
|
||||
font-size:40rpx;
|
||||
font-weight: bold;
|
||||
margin-bottom: 15px;
|
||||
margin-bottom: 30rpx;
|
||||
}
|
||||
|
||||
|
||||
|
|
@ -139,12 +139,12 @@
|
|||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
margin-bottom: 15px;
|
||||
margin-bottom: 30rpx;
|
||||
|
||||
.text {
|
||||
width: 80px;
|
||||
height: 40px;
|
||||
line-height: 40px;
|
||||
height: 80rpx;
|
||||
line-height: 80rpx;
|
||||
font-size:28rpx;
|
||||
}
|
||||
|
||||
|
|
@ -156,15 +156,15 @@
|
|||
position: relative;
|
||||
border: #dfdfdf 1px solid;
|
||||
border-radius: 5px;
|
||||
padding: 0 10px;
|
||||
padding: 0 20rpx;
|
||||
background-color: #f7f7f7;
|
||||
}
|
||||
|
||||
input {
|
||||
height: 40px;
|
||||
line-height: 40px;
|
||||
height: 80rpx;
|
||||
line-height: 80rpx;
|
||||
position: absolute;
|
||||
left: 10px;
|
||||
left: 20rpx;
|
||||
right: 0px;
|
||||
z-index: 88;
|
||||
font-size:28rpx;
|
||||
|
|
@ -172,18 +172,18 @@
|
|||
|
||||
.yanzhengma {
|
||||
input {
|
||||
right: 120px;
|
||||
right: 140rpx;
|
||||
font-size: 32rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.code {
|
||||
width: 110px;
|
||||
width: 120rpx;
|
||||
background: #dfdfdf;
|
||||
font-size: 14px;
|
||||
margin: 0;
|
||||
line-height: 40px;
|
||||
line-height: 80rpx;
|
||||
border-radius: 5px;
|
||||
text-align: center;
|
||||
position: absolute;
|
||||
|
|
@ -198,12 +198,12 @@
|
|||
|
||||
.btnlogin {
|
||||
width: 100%;
|
||||
margin: 15px 0;
|
||||
margin: 30rpx 0;
|
||||
height: 42px;
|
||||
line-height: 42px;
|
||||
background: $btncolor;
|
||||
font-weight: 700;
|
||||
border-radius: 15px;
|
||||
border-radius: 30rpx;
|
||||
text-align: center;
|
||||
color: #fff !important;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -93,14 +93,14 @@
|
|||
<style lang="scss" scoped>
|
||||
.content {
|
||||
background-color: #F3F4F6;
|
||||
padding: 15px;
|
||||
padding: 30rpx;
|
||||
min-height: 100vh;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.image {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
width: 80rpx;
|
||||
height: 80rpx;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
|
|
@ -112,7 +112,7 @@
|
|||
|
||||
text {
|
||||
text-align: right;
|
||||
width: calc(100% - 30px);
|
||||
width: calc(100% - 60rpx);
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
|
|
@ -125,23 +125,23 @@
|
|||
.btn {
|
||||
width: auto;
|
||||
background: #999;
|
||||
margin: 50px 15px 0 15px;
|
||||
margin: 100rpx 30rpx 0 30rpx;
|
||||
}
|
||||
|
||||
.caritem {
|
||||
height: 50px;
|
||||
line-height: 50px;
|
||||
height: 100rpx;
|
||||
line-height: 100rpx;
|
||||
background-color: #fff;
|
||||
border-radius: 10px;
|
||||
padding: 0 10px;
|
||||
margin-bottom: 15px;
|
||||
border-radius: 20rpx;
|
||||
padding: 0 20rpx;
|
||||
margin-bottom: 30rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
width: calc(100% - 20px);
|
||||
width: calc(100% - 40rpx);
|
||||
|
||||
.uni-icons {
|
||||
width: 30px;
|
||||
width: 60rpx;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
|
|
|
|||
53
pages.json
53
pages.json
|
|
@ -24,7 +24,7 @@
|
|||
}, {
|
||||
"path": "pages/count/count",
|
||||
"style": {
|
||||
"navigationBarTitleText": "测量",
|
||||
"navigationBarTitleText": "计食",
|
||||
"enablePullDownRefresh": false
|
||||
}
|
||||
|
||||
|
|
@ -43,17 +43,15 @@
|
|||
}
|
||||
},
|
||||
{
|
||||
"path" : "pages/search/search",
|
||||
"style" :
|
||||
{
|
||||
"navigationBarTitleText" : "搜索菜谱"
|
||||
}
|
||||
"path": "pages/search/search",
|
||||
"style": {
|
||||
"navigationBarTitleText": "搜索菜谱"
|
||||
}
|
||||
},
|
||||
{
|
||||
"path" : "pages/search/list",
|
||||
"style" :
|
||||
{
|
||||
"navigationBarTitleText" : ""
|
||||
"path": "pages/search/list",
|
||||
"style": {
|
||||
"navigationBarTitleText": ""
|
||||
}
|
||||
}
|
||||
],
|
||||
|
|
@ -93,6 +91,13 @@
|
|||
"enablePullDownRefresh": false
|
||||
}
|
||||
|
||||
}, {
|
||||
"path": "me/recordetail",
|
||||
"style": {
|
||||
"navigationBarTitleText": "饮食详情",
|
||||
"enablePullDownRefresh": false
|
||||
}
|
||||
|
||||
}, {
|
||||
"path": "me/mymenu",
|
||||
"style": {
|
||||
|
|
@ -127,15 +132,21 @@
|
|||
"enablePullDownRefresh": false
|
||||
}
|
||||
|
||||
}, {
|
||||
"path": "count/food",
|
||||
"style": {
|
||||
"navigationBarTitleText": "食材库",
|
||||
"enablePullDownRefresh": false
|
||||
}
|
||||
// }, {
|
||||
// "path": "count/food",
|
||||
// "style": {
|
||||
// "navigationBarTitleText": "食材库",
|
||||
// "enablePullDownRefresh": false
|
||||
// }
|
||||
|
||||
},
|
||||
{
|
||||
"path": "count/everyMeal",
|
||||
"style": {
|
||||
"navigationBarTitleText": "餐食详情",
|
||||
"enablePullDownRefresh": false
|
||||
}
|
||||
}, {
|
||||
"path": "count/search",
|
||||
"style": {
|
||||
"navigationBarTitleText": "食材搜索",
|
||||
|
|
@ -188,6 +199,12 @@
|
|||
"style": {
|
||||
"navigationBarTitleText": ""
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "count/everyDay",
|
||||
"style": {
|
||||
"navigationBarTitleText": "营养分析"
|
||||
}
|
||||
}
|
||||
]
|
||||
}],
|
||||
|
|
@ -195,7 +212,7 @@
|
|||
"navigationBarTextStyle": "black",
|
||||
"navigationBarTitleText": "uni-app",
|
||||
"navigationBarBackgroundColor": "#3CB383",
|
||||
"backgroundColor": "#efefef"
|
||||
"backgroundColor": "#f7f7f7"
|
||||
}, // 切换导航
|
||||
"tabBar": {
|
||||
"color": "#333",
|
||||
|
|
@ -223,7 +240,7 @@
|
|||
"pagePath": "pages/count/count",
|
||||
"iconPath": "static/ji.png",
|
||||
"selectedIconPath": "static/ji01.png",
|
||||
"text": "测量"
|
||||
"text": "计食"
|
||||
},
|
||||
{
|
||||
"pagePath": "pages/me/me",
|
||||
|
|
|
|||
|
|
@ -7,12 +7,6 @@
|
|||
<!-- 信息 -->
|
||||
<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> -->
|
||||
</view>
|
||||
<!-- -->
|
||||
<view class="title title2">
|
||||
|
|
@ -63,7 +57,7 @@
|
|||
data() {
|
||||
return {
|
||||
info: {
|
||||
FMimg:"",
|
||||
FMimg: "",
|
||||
cook_label: null,
|
||||
title: "",
|
||||
description: "",
|
||||
|
|
@ -75,9 +69,9 @@
|
|||
}
|
||||
},
|
||||
computed: {
|
||||
...mapState(["user", "menuList"]),
|
||||
...mapState(["user", "configInfo"]),
|
||||
menu() {
|
||||
return this.menuList
|
||||
return this.configInfo.cookbook_label
|
||||
},
|
||||
},
|
||||
onLoad(options) {
|
||||
|
|
@ -93,25 +87,25 @@
|
|||
|
||||
<style lang="scss" scoped>
|
||||
.content {
|
||||
padding: 0 15px;
|
||||
padding: 0 30rpx;
|
||||
}
|
||||
|
||||
.topimg {
|
||||
width: 100%;
|
||||
height: 320px;
|
||||
height: 340rpx;
|
||||
background: #fff;
|
||||
border-radius: 10px;
|
||||
border-radius: 20rpx;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
flex-wrap: wrap;
|
||||
flex-direction: column;
|
||||
margin-bottom: 10px;
|
||||
margin: 20rpx 0;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
|
||||
.iconfont {
|
||||
font-size: 30px;
|
||||
font-size: 60rpx;
|
||||
color: $maincolor;
|
||||
}
|
||||
|
||||
|
|
@ -119,7 +113,7 @@
|
|||
display: inline-block;
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
font-size: 12px;
|
||||
font-size: 24rpx;
|
||||
color: #999;
|
||||
}
|
||||
|
||||
|
|
@ -137,10 +131,10 @@
|
|||
|
||||
.step {
|
||||
.image {
|
||||
height: 320px;
|
||||
height: 340rpx;
|
||||
margin: auto;
|
||||
background: #f7f7f7;
|
||||
border-radius: 10px;
|
||||
border-radius: 20rpx;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
|
|
@ -155,7 +149,7 @@
|
|||
}
|
||||
|
||||
icon {
|
||||
font-size: 30px;
|
||||
font-size: 60rpx;
|
||||
color: #ff4c4f;
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
|
|
@ -163,7 +157,7 @@
|
|||
}
|
||||
|
||||
.title {
|
||||
padding: 10px;
|
||||
padding: 20rpx;
|
||||
|
||||
.table {
|
||||
font-size: 16px;
|
||||
|
|
@ -174,15 +168,15 @@
|
|||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-top: 15px;
|
||||
margin-top: 30rpx;
|
||||
|
||||
.left {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
image {
|
||||
width: 25px;
|
||||
height: 25px;
|
||||
width: 50rpx;
|
||||
height: 50rpx;
|
||||
margin-right: 5px;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
|
@ -196,13 +190,13 @@
|
|||
|
||||
.desc {
|
||||
width: 100%;
|
||||
line-height: 25px;
|
||||
margin-bottom: 10px;
|
||||
line-height: 50rpx;
|
||||
margin-bottom: 20rpx;
|
||||
}
|
||||
|
||||
.h4 {
|
||||
margin: 10px 0;
|
||||
padding-top: 10px;
|
||||
margin: 20rpx 0;
|
||||
padding-top: 20rpx;
|
||||
border-top: 1px solid #f7f7f7;
|
||||
|
||||
.close {
|
||||
|
|
@ -211,22 +205,22 @@
|
|||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border-radius: 10px;
|
||||
border-radius: 20rpx;
|
||||
background-color: $maincolor;
|
||||
|
||||
image {
|
||||
width: 25px;
|
||||
height: 25px;
|
||||
width: 50rpx;
|
||||
height: 50rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.step {
|
||||
margin-bottom: 60px;
|
||||
margin-bottom: 120rpx;
|
||||
}
|
||||
|
||||
.foodlist {
|
||||
border-radius: 10px;
|
||||
border-radius: 20rpx;
|
||||
background: #fff;
|
||||
|
||||
.item {
|
||||
|
|
@ -249,11 +243,11 @@
|
|||
display: flex;
|
||||
justify-content: space-between;
|
||||
padding: 5px 0px;
|
||||
border-radius: 10px 10px 0 0;
|
||||
border-radius: 20rpx 20rpx 0 0;
|
||||
box-shadow: 0px 1px 5px 2px #dfe2e1fc;
|
||||
|
||||
.item {
|
||||
width: 25%;
|
||||
width: 40%;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: center;
|
||||
|
|
|
|||
|
|
@ -355,26 +355,26 @@
|
|||
|
||||
<style scoped lang="scss">
|
||||
.content {
|
||||
padding: 0 15px;
|
||||
padding: 0 30rpx;
|
||||
}
|
||||
|
||||
.topimg {
|
||||
width: 100%;
|
||||
height: 320px;
|
||||
height: 340rpx;
|
||||
background: #fff;
|
||||
border-radius: 10px;
|
||||
border-radius: 20rpx;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
flex-wrap: wrap;
|
||||
flex-direction: column;
|
||||
margin-bottom: 10px;
|
||||
margin-bottom: 20rpx;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
margin-top: 15px;
|
||||
margin-top: 30rpx;
|
||||
|
||||
.iconfont {
|
||||
font-size: 30px;
|
||||
font-size: 60rpx;
|
||||
color: $maincolor;
|
||||
}
|
||||
|
||||
|
|
@ -382,7 +382,7 @@
|
|||
display: inline-block;
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
font-size: 12px;
|
||||
font-size: 24rpx;
|
||||
color: #999;
|
||||
}
|
||||
|
||||
|
|
@ -400,10 +400,10 @@
|
|||
|
||||
.step {
|
||||
.image {
|
||||
height: 320px;
|
||||
height: 340rpx;
|
||||
margin: auto;
|
||||
background: #f7f7f7;
|
||||
border-radius: 10px;
|
||||
border-radius: 20rpx;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
|
|
@ -418,7 +418,7 @@
|
|||
}
|
||||
|
||||
icon {
|
||||
font-size: 30px;
|
||||
font-size: 60rpx;
|
||||
color: #ff4c4f;
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
|
|
@ -433,24 +433,24 @@
|
|||
.title,
|
||||
.textarea {
|
||||
/deep/input {
|
||||
height: 40px;
|
||||
line-height: 40px;
|
||||
height: 80rpx;
|
||||
line-height: 80rpx;
|
||||
}
|
||||
|
||||
/deep/textarea {
|
||||
width: 100%;
|
||||
height: 6rem;
|
||||
line-height: 20px;
|
||||
line-height: 40rpx;
|
||||
background: none;
|
||||
border: none;
|
||||
font-size: 14px;
|
||||
padding: 10px 0;
|
||||
padding: 20rpx 0;
|
||||
}
|
||||
}
|
||||
|
||||
/deep/picker {
|
||||
height: 45px;
|
||||
line-height: 45px;
|
||||
height: 100rpx;
|
||||
line-height: 100rpx;
|
||||
|
||||
.uni-input {
|
||||
display: flex;
|
||||
|
|
|
|||
File diff suppressed because it is too large
Load Diff
|
|
@ -1,97 +1,111 @@
|
|||
<template>
|
||||
<view class="content">
|
||||
<!-- 个人资料 -->
|
||||
<view v-if="token" class="content-box">
|
||||
<view class="box" v-if="info.aud_id">
|
||||
<view class="header">
|
||||
<image :src="info.head_pic"></image>
|
||||
</view>
|
||||
<view class="info" @click="handleUserEdit">
|
||||
<view class="name">
|
||||
<text>{{info.nickname}}</text>
|
||||
<text>{{info.gender=='1'?'男':'女'}}</text>
|
||||
<image src="/static/26.png"></image>
|
||||
</view>
|
||||
<view class="age">
|
||||
<view>{{info.age}}岁</view>
|
||||
<view>{{info.weight}}kg</view>
|
||||
<view>{{info.height}}cm</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="box1 box" v-else @click="handleUserEdit">
|
||||
<view class="info2">
|
||||
完善资料后，记录更准确哦！
|
||||
</view>
|
||||
</view>
|
||||
<image src="/static/0.png" class="headerbgimg"></image>
|
||||
</view>
|
||||
<view class="box1 box" v-if="!token" @click="handleLogin">
|
||||
<view class="info2">
|
||||
未登录，点击登录
|
||||
</view>
|
||||
<image src="/static/0.png" class="headerbgimg"></image>
|
||||
</view>
|
||||
<!-- 计食器 -->
|
||||
<view class="jishiqi">
|
||||
<view class="left">
|
||||
<view class="time">
|
||||
<view class="quan"></view>
|
||||
<text v-if="today_intake.time">{{today_intake.time}}</text>
|
||||
<!-- 个人资料 -->
|
||||
<view v-if="token" class="content-box">
|
||||
<view class="box" v-if="info.aud_id">
|
||||
<view class="info">
|
||||
<!-- /pageTwo/me/userEdit -->
|
||||
<view class="name" @click="navTo('/pageTwo/count/setting')">
|
||||
<image :src="info.head_pic"></image>
|
||||
<text class="bold">{{info.nickname}}</text>
|
||||
<text>{{info.gender=='1'?'男':'女'}}</text>
|
||||
</view>
|
||||
<view class="edit">
|
||||
<image src="/static/26.png"></image>
|
||||
</view>
|
||||
</view>
|
||||
<view class="chart">
|
||||
<!-- <qiun-data-charts type="arcbar" :chartData="chartData" :canvas2d="true" :cHeight="300" :cWidth="300"
|
||||
canvasId="arcbar008" /> -->
|
||||
<view class="center">
|
||||
<view>{{today_intake.title}}</view>
|
||||
<view class="number">{{today_intake.kcal.value||0}}</view>
|
||||
<view>Kcal</view>
|
||||
<view>
|
||||
<text :style="{'backgroundColor':today_intake.kcal.color}"></text>
|
||||
{{today_intake.kcal.standard||''}}
|
||||
</view>
|
||||
<view class="age">
|
||||
<view class="age-item">
|
||||
<view><text>{{info.age}}</text>岁</view>
|
||||
<view>年龄</view>
|
||||
</view>
|
||||
<view class="age-item age-item2">
|
||||
<view><text>{{info.weight}}</text>kg</view>
|
||||
<view>体重</view>
|
||||
</view>
|
||||
<view class="age-item">
|
||||
<view><text>{{info.height}}</text>cm</view>
|
||||
<view>身高</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="right" @click="handleNavTo(today_intake.time)">
|
||||
<view class="detail">查看详情></view>
|
||||
<view>
|
||||
<text>碳水</text>
|
||||
<text>{{today_intake.other_elements.carbohydrate.value||0}}g</text>
|
||||
<view class="box1 box" v-else @click="navTo('/pageTwo/me/userEdit')">
|
||||
<view class="info2">
|
||||
完善资料后，记录更准确哦！
|
||||
</view>
|
||||
<view>
|
||||
<text>脂肪</text>
|
||||
<text>{{today_intake.other_elements.fat.value||0}}g</text>
|
||||
</view>
|
||||
</view>
|
||||
<!-- 计食器 -->
|
||||
<view class="jishiqi">
|
||||
<view class="top">
|
||||
<view class="date">{{foodInfo.date}}</view>
|
||||
<view class="detail" @click="handleEveryDay">查看详情</view>
|
||||
</view>
|
||||
<view class="left">
|
||||
<view class="chart-wrap">
|
||||
<qiun-data-charts type="arcbar" :chartData="chartData" :cHeight="280" :cWidth="280"
|
||||
:canvas2d="true" canvasId="home1"/>
|
||||
<view class="center">
|
||||
摄入
|
||||
<text>{{foodInfo.nutrients_four[0].today_intake}}</text>
|
||||
<view class="unit">Kcal</view>
|
||||
</view>
|
||||
</view>
|
||||
<view>
|
||||
<text>蛋白质</text>
|
||||
<text>{{today_intake.other_elements.protein.value||0}}g</text>
|
||||
<view class="mubiao">
|
||||
目标：<text>{{foodInfo.nutrients_four[0].suggestion}}</text>kcal
|
||||
</view>
|
||||
</view>
|
||||
<view class="right">
|
||||
<view class="item" v-for="(ite,ind) in foodInfo.nutrients_four.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="tools">
|
||||
<view class="tools-item" v-for="(ite,ind) in today_intake.list">
|
||||
<view class="tools-item" v-for="(ite,ind) in foodInfo.list">
|
||||
<view class="title">
|
||||
<image :src="ite.icon"></image>
|
||||
<text>{{ite.title}}</text>
|
||||
<text>{{ite.name}}</text>
|
||||
</view>
|
||||
<view class="kcal">
|
||||
<text>{{ite.value?ite.value:0}}</text>kcal
|
||||
<text>{{ite.val}}</text>kcal
|
||||
</view>
|
||||
<view class="tools-btn" @click="handleAddFood(ite.name)">添加</view>
|
||||
<view class="add" @click="handledetail(ind)">
|
||||
<!-- <uni-icons type="forward" size="18" color="#999"></uni-icons> -->
|
||||
<image src="/static/xiangqing.png"></image>
|
||||
</view>
|
||||
<view class="tools-btn" @click="handleListDetail(ite)">摄入</view>
|
||||
<view class="add" @click="handleAddFood(ind,ite.title)">+</view>
|
||||
<image :src="ite.bgimg" class="bgimg"></image>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 搜索 -->
|
||||
<view class="serachBox">
|
||||
<view class="title">
|
||||
<view class="quan"></view>教你做
|
||||
<view class="quan mr-5"></view>教你做
|
||||
</view>
|
||||
<view class="searchInput">
|
||||
<div class="search-wrap" @click="handleSearch">
|
||||
<div class="search-wrap" @click="navTo('/pages/search/search')">
|
||||
<text>输入食材快速搜索菜谱</text>
|
||||
<image src="/static/28.png"></image>
|
||||
</div>
|
||||
|
|
@ -106,45 +120,6 @@
|
|||
</swiper-item>
|
||||
</swiper>
|
||||
</view>
|
||||
|
||||
<!-- 加餐 -->
|
||||
<view class="wrapper activeList" v-if="isShow">
|
||||
<view class="bg" @click='isShow=false'>
|
||||
<view class="addfood" @click.stop>
|
||||
<icon class="iconfont icon-error" @click='isShow=false'></icon>
|
||||
<view class="list">
|
||||
<view class="item" v-for="(ite,ind) in addfoodList" :key="ind"
|
||||
@click="handleAddFood(ite.id,ite.name)">
|
||||
<text class="name">{{ite.name}}</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<!-- 摄入列表 -->
|
||||
<view class="wrapper activeList2" v-if="isFoodList">
|
||||
<view class="bg" @click='isFoodList=false'>
|
||||
<view class="addfood2" @click.stop>
|
||||
<view class="title">
|
||||
<text>{{ListDetail.title}}</text>
|
||||
<text>{{ListDetail.content.time}}</text>
|
||||
</view>
|
||||
<view class="foodbox">
|
||||
<view class="foodbox-list" v-for="(it,id) in ListDetail.content.list">
|
||||
<text>{{it.name}}</text>
|
||||
<text>{{it.weight}}</text>
|
||||
<text>{{it.kcal}}</text>
|
||||
<text>{{it.time}}</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="groupbtn">
|
||||
<view @click="handleNavTo(today_intake.time)">更多详情</view>
|
||||
<view @click='isFoodList=false'>取消</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
</view>
|
||||
</template>
|
||||
|
||||
|
|
@ -157,31 +132,12 @@
|
|||
data() {
|
||||
return {
|
||||
token: "",
|
||||
isShow: false,
|
||||
isFoodList: false,
|
||||
// today_intake: {
|
||||
// kcal: {},
|
||||
// list: [],
|
||||
// time: "",
|
||||
// title: "",
|
||||
// other_elements: {}
|
||||
// },
|
||||
chartData: {
|
||||
series: [{
|
||||
data: 1,
|
||||
color: "#ff4c4f"
|
||||
data: 0,
|
||||
color: "#3CB383"
|
||||
}]
|
||||
},
|
||||
ListDetail: {
|
||||
title: "",
|
||||
value: "",
|
||||
unit: "",
|
||||
content: {
|
||||
time: '',
|
||||
list: []
|
||||
}
|
||||
},
|
||||
addfoodList: [],
|
||||
}
|
||||
},
|
||||
components: {
|
||||
|
|
@ -195,13 +151,15 @@
|
|||
kcalVal() {
|
||||
return this.configInfo.kcal_data
|
||||
},
|
||||
today_intake() {
|
||||
return this.countFoodInfo.home_food_count.kcal_data
|
||||
}
|
||||
foodInfo() {
|
||||
let that = this
|
||||
that.chartData.series[0].data = that.user.aud_id ? that.user.food_count.nutrients_four[0].proportion /
|
||||
100 : 0
|
||||
return uni.getStorageSync('token') ? that.user.food_count : that.configInfo.food_count
|
||||
},
|
||||
},
|
||||
onLoad() {
|
||||
let that = this
|
||||
that.addfoodList = that.$json.addfoodList
|
||||
that.token = uni.getStorageSync('token')
|
||||
that.$store.dispatch("getHomeConfig")
|
||||
},
|
||||
|
|
@ -215,92 +173,49 @@
|
|||
}, 500);
|
||||
},
|
||||
methods: {
|
||||
//配置接口
|
||||
handleHomeConfig() {
|
||||
let that = this
|
||||
that.$model.getHomeConfig({}).then(res => {
|
||||
if (res.code != 0) return
|
||||
that.handleHomeUserInfo()
|
||||
that.$store.commit('changeConfig', res.data)
|
||||
})
|
||||
},
|
||||
// 获取账号信息
|
||||
handleHomeUserInfo() {
|
||||
let that = this
|
||||
that.$model.getHomeUserInfo({}).then(res => {
|
||||
if (res.code != 0) {
|
||||
that.$store.commit('changeUserInfo', {})
|
||||
console.log("11111")
|
||||
return
|
||||
}
|
||||
that.$store.commit('changeUserInfo', res.data)
|
||||
that.handleCountFoodInfo()
|
||||
})
|
||||
},
|
||||
// 计食器信息
|
||||
handleCountFoodInfo() {
|
||||
let that = this
|
||||
that.$model.getCountFoodInfo({
|
||||
aud_id: that.info.aud_id,
|
||||
time: that.$tools.getDate("start")
|
||||
}).then(res => {
|
||||
if (res.code != 0) return
|
||||
that.today_intake = res.data.home_food_count.kcal_data
|
||||
})
|
||||
},
|
||||
|
||||
// 搜索
|
||||
handleSearch() {
|
||||
uni.switchTab({
|
||||
url: '/pages/search/search'
|
||||
})
|
||||
},
|
||||
// 登录
|
||||
handleLogin() {
|
||||
uni.reLaunch({
|
||||
url: "/pageTwo/login/login"
|
||||
})
|
||||
},
|
||||
//个人资料
|
||||
handleUserEdit() {
|
||||
uni.navigateTo({
|
||||
url: '/pageTwo/me/userEdit'
|
||||
})
|
||||
},
|
||||
// 计食器详情
|
||||
handleNavTo(time) {
|
||||
this.isShow = false
|
||||
uni.setStorageSync("startDay", time)
|
||||
uni.switchTab({
|
||||
url: "/pages/count/count"
|
||||
})
|
||||
},
|
||||
// 添加食物
|
||||
handleAddFood(ind, name) {
|
||||
this.isShow = false
|
||||
if (ind != 3) {
|
||||
uni.navigateTo({
|
||||
url: "/pageTwo/count/search?name=" + name + '&ind=' + ind
|
||||
})
|
||||
} else {
|
||||
this.isShow = true
|
||||
}
|
||||
|
||||
},
|
||||
// 计食器列表详情
|
||||
handleListDetail(item) {
|
||||
handleAddFood(name) {
|
||||
let that = this
|
||||
console.log("item", item)
|
||||
if (item.content.list.length) {
|
||||
that.isFoodList = true
|
||||
that.ListDetail = item
|
||||
} else {
|
||||
that.$tools.msg("暂无摄入，快去添加吧")
|
||||
if (!that.token) {
|
||||
that.$tools.msg("登录后查看更多")
|
||||
return
|
||||
}
|
||||
uni.navigateTo({
|
||||
url: "/pageTwo/count/search?name=" + name + "&time=" + this.foodInfo.date
|
||||
})
|
||||
},
|
||||
// 餐食详情
|
||||
handledetail(ind) {
|
||||
let that = this
|
||||
if (!that.token) {
|
||||
that.$tools.msg("登录后查看更多")
|
||||
return
|
||||
}
|
||||
uni.navigateTo({
|
||||
url: "/pageTwo/count/everyMeal?page=home&index=" + ind
|
||||
})
|
||||
},
|
||||
handleEveryDay() {
|
||||
let that = this
|
||||
if (!that.token) {
|
||||
that.$tools.msg("登录后查看更多")
|
||||
return
|
||||
}
|
||||
uni.navigateTo({
|
||||
url: "/pageTwo/count/everyDay?page=home"
|
||||
})
|
||||
},
|
||||
|
||||
// 功能页面跳转
|
||||
navTo(url) {
|
||||
if (!this.token) {
|
||||
this.$tools.msg("登录后查看更多")
|
||||
return
|
||||
}
|
||||
uni.navigateTo({
|
||||
url
|
||||
})
|
||||
|
|
@ -313,22 +228,14 @@
|
|||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.content {
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
.headerbgimg {
|
||||
position: absolute;
|
||||
width: 200px;
|
||||
height: 180px;
|
||||
width: 400rpx;
|
||||
height: 360rpx;
|
||||
top: 0;
|
||||
right: -15%;
|
||||
}
|
||||
|
||||
.size22 {
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
|
||||
.content-box {
|
||||
width: 100%;
|
||||
position: relative;
|
||||
|
|
@ -336,74 +243,145 @@
|
|||
|
||||
}
|
||||
|
||||
.chart-wrap {
|
||||
position: relative;
|
||||
width: 250rpx;
|
||||
height: 250rpx;
|
||||
margin-top: -30rpx;
|
||||
margin-left: -5px;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
|
||||
.center {
|
||||
border: none;
|
||||
width: 280rpx;
|
||||
height: 210rpx;
|
||||
position: absolute;
|
||||
top: 64rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.box {
|
||||
width: calc(100% - 40rpx);
|
||||
width: calc(100% - 100rpx);
|
||||
background: $maincolor;
|
||||
display: flex;
|
||||
padding: 30rpx 20rpx;
|
||||
padding-bottom: 220rpx;
|
||||
align-items: center;
|
||||
overflow: hidden;
|
||||
|
||||
|
||||
|
||||
.header {
|
||||
width: 120rpx;
|
||||
height: 120rpx;
|
||||
margin-right: 30rpx;
|
||||
border: 1px solid #fff;
|
||||
border-radius: 50%;
|
||||
background-color: #dfdfdf;
|
||||
|
||||
image {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
margin: 15px 15px 0;
|
||||
border-radius: 10px;
|
||||
flex-wrap: wrap;
|
||||
|
||||
.info {
|
||||
color: #fff;
|
||||
position: absolute;
|
||||
left: 170rpx;
|
||||
right: 30rpx;
|
||||
z-index: 999;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
.name {
|
||||
width: 100%;
|
||||
width: 80%;
|
||||
display: flex;
|
||||
font-size: 32rpx;
|
||||
|
||||
:nth-child(1) {
|
||||
margin-right: 30rpx;
|
||||
max-width: 70%;
|
||||
font-weight: bold;
|
||||
}
|
||||
float: left;
|
||||
align-items: center;
|
||||
|
||||
text {
|
||||
margin-right: 30rpx;
|
||||
}
|
||||
|
||||
image {
|
||||
width: 50rpx;
|
||||
height: 40rpx;
|
||||
width: 35px;
|
||||
height: 35px;
|
||||
margin-right: 15px;
|
||||
}
|
||||
}
|
||||
|
||||
.age {
|
||||
margin-top: 30rpx;
|
||||
.edit {
|
||||
width: 20%;
|
||||
text-align: right;
|
||||
float: left;
|
||||
|
||||
view {
|
||||
background: #F5D2A4;
|
||||
border-radius: 5px;
|
||||
width: 75px;
|
||||
text-align: center;
|
||||
float: left;
|
||||
padding: 5px 0;
|
||||
margin-right: 10px;
|
||||
image {
|
||||
width: 22px;
|
||||
height: 22px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.age {
|
||||
display: flex;
|
||||
width: 100%;
|
||||
justify-content: space-between;
|
||||
color: #fff;
|
||||
margin-top: 15px;
|
||||
|
||||
.age-item {
|
||||
width: 33.3%;
|
||||
text-align: center;
|
||||
|
||||
text {
|
||||
font-size: 20px;
|
||||
margin-right: 5px;
|
||||
display: inline-block;
|
||||
}
|
||||
}
|
||||
|
||||
.age-item2 {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.age-item2::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 10px;
|
||||
bottom: 10px;
|
||||
width: 1px;
|
||||
background-color: #9CDCBF;
|
||||
}
|
||||
|
||||
.age-item2::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: 10px;
|
||||
bottom: 10px;
|
||||
width: 1px;
|
||||
background-color: #9CDCBF;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.jishiqi {
|
||||
width: calc(100% - 50px);
|
||||
background: #fff;
|
||||
padding: 10px 10px 15px;
|
||||
border-radius: 10px;
|
||||
margin: 15px;
|
||||
height: auto;
|
||||
overflow: hidden;
|
||||
box-shadow: 0px 1px 5px 2px #dfe2e1fc;
|
||||
|
||||
.top {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
|
||||
.date {
|
||||
font-size: 14px;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.detail {
|
||||
color: #fff;
|
||||
width: auto;
|
||||
padding: 5px 20px;
|
||||
background: $yellowcolor;
|
||||
border-radius: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
.box1 {
|
||||
|
|
@ -429,109 +407,8 @@
|
|||
}
|
||||
}
|
||||
|
||||
.jishiqi {
|
||||
width: calc(100% - 60rpx);
|
||||
background: #fff;
|
||||
margin: auto 30rpx;
|
||||
box-shadow: 0px 1px 5px 2px #dfe2e1fc;
|
||||
margin-top: -180rpx;
|
||||
border-radius: 20rpx;
|
||||
position: relative;
|
||||
|
||||
.left {
|
||||
width: 55%;
|
||||
float: left;
|
||||
height: auto;
|
||||
background: #ebf7f5;
|
||||
padding-bottom: 15px;
|
||||
box-shadow: 0px 1px 5px 2px #dfe2e1fc;
|
||||
border-radius: 20rpx 0 0 20rpx;
|
||||
|
||||
.time {
|
||||
width: 90%;
|
||||
margin: 20rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.chart {
|
||||
width: 320rpx;
|
||||
height: 320rpx;
|
||||
border-radius: 50%;
|
||||
background: $maincolor;
|
||||
border: 5px solid #9CDCBF;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
margin: auto;
|
||||
}
|
||||
|
||||
.center {
|
||||
text-align: center;
|
||||
width: 280rpx;
|
||||
height: 280rpx;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background: #fff;
|
||||
border-radius: 50%;
|
||||
|
||||
.number {
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
display: inline-block;
|
||||
font-size: 48rpx;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
view {
|
||||
width: 100%;
|
||||
height: 50rpx;
|
||||
line-height: 50rpx;
|
||||
text-align: center;
|
||||
|
||||
text {
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
border-radius: 50%;
|
||||
display: inline-block;
|
||||
margin-right: 5px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.right {
|
||||
width: calc(45% - 60rpx);
|
||||
float: left;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-around;
|
||||
height: 140px;
|
||||
margin: 40rpx 30rpx 0;
|
||||
|
||||
view {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
margin-top: 40rpx;
|
||||
}
|
||||
|
||||
.detail {
|
||||
text-align: center;
|
||||
justify-content: center;
|
||||
color: #fff;
|
||||
background: #F7931E;
|
||||
border-radius: 20rpx;
|
||||
padding: 6rpx 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.tools {
|
||||
margin: 30rpx 30rpx 0;
|
||||
margin: 0 30rpx 0;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
width: calc(100% - 60rpx);
|
||||
|
|
@ -541,35 +418,30 @@
|
|||
width: 42%;
|
||||
background: #fff;
|
||||
position: relative;
|
||||
padding: 20rpx;
|
||||
height: 120px;
|
||||
padding: 10rpx 20rpx;
|
||||
height: 240rpx;
|
||||
overflow: hidden;
|
||||
border-radius: 20rpx;
|
||||
margin-bottom: 30rpx;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-around;
|
||||
box-shadow: 0px 1px 5px 2px #dfe2e1fc;
|
||||
|
||||
.title {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
font-size: 28rpx;
|
||||
position: absolute;
|
||||
z-index: 99;
|
||||
width: 100%;
|
||||
top: 10px;
|
||||
|
||||
image {
|
||||
width: 40rpx;
|
||||
height: 40rpx;
|
||||
width: 50rpx;
|
||||
height: 50rpx;
|
||||
margin-right: 5px;
|
||||
}
|
||||
}
|
||||
|
||||
.kcal {
|
||||
text-align: center;
|
||||
position: absolute;
|
||||
top: 30%;
|
||||
left: 0;
|
||||
right: 0;
|
||||
|
||||
text {
|
||||
font-size: 56rpx;
|
||||
|
|
@ -579,33 +451,27 @@
|
|||
}
|
||||
|
||||
.tools-btn {
|
||||
border: 1px solid $maincolor;
|
||||
border: 1px solid #9CDCBF;
|
||||
text-align: center;
|
||||
border-radius: 20rpx;
|
||||
width: 60%;
|
||||
margin-left: 20%;
|
||||
margin-top: 10rpx;
|
||||
color: $maincolor;
|
||||
position: absolute;
|
||||
bottom: 10px;
|
||||
z-index: 99;
|
||||
padding: 3px 0;
|
||||
}
|
||||
|
||||
.add {
|
||||
width: 50rpx;
|
||||
height: 50rpx;
|
||||
width: 48rpx;
|
||||
height: 48rpx;
|
||||
position: absolute;
|
||||
top: 20rpx;
|
||||
right: 20rpx;
|
||||
background: $maincolor;
|
||||
border-radius: 50%;
|
||||
text-align: center;
|
||||
color: #fff;
|
||||
font-size: 36rpx;
|
||||
line-height: 48rpx;
|
||||
font-weight: bold;
|
||||
z-index: 999;
|
||||
|
||||
image {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.bgimg {
|
||||
|
|
@ -614,6 +480,7 @@
|
|||
position: absolute;
|
||||
top: 20rpx;
|
||||
right: -50rpx;
|
||||
opacity: 0.6;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -630,7 +497,7 @@
|
|||
|
||||
.searchInput {
|
||||
width: calc(100% - 60rpx);
|
||||
background-color: #f7f7f7;
|
||||
background-color: #fff;
|
||||
padding: 30rpx;
|
||||
margin-top: 20rpx;
|
||||
border-radius: 20rpx;
|
||||
|
|
@ -647,110 +514,8 @@
|
|||
background: #fff;
|
||||
|
||||
image {
|
||||
width: 25px;
|
||||
height: 25px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.addfood {
|
||||
background-color: #fff;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
padding: 10px 10px 0 10px;
|
||||
border-radius: 10px 10px 0 0;
|
||||
|
||||
.iconfont {
|
||||
position: absolute;
|
||||
right: 7px;
|
||||
top: -10px;
|
||||
background: #f7f7f7;
|
||||
border-radius: 50%;
|
||||
font-size: 30px;
|
||||
}
|
||||
|
||||
.list {
|
||||
padding-bottom: 0px;
|
||||
|
||||
.item {
|
||||
height: 40px;
|
||||
line-height: 40px;
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
.name {
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
:nth-child(2).item {
|
||||
border-bottom: 1px solid #dfdfdf;
|
||||
border-top: 1px solid #dfdfdf;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.addfood2 {
|
||||
top: 20%;
|
||||
left: 20px;
|
||||
right: 20px;
|
||||
position: absolute;
|
||||
border-radius: 10px;
|
||||
background: #fff;
|
||||
max-height: 720rpx;
|
||||
min-height: 400rpx;
|
||||
|
||||
|
||||
.title {
|
||||
color: $maincolor;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
width: calc(100% - 60rpx);
|
||||
font-weight: bold;
|
||||
font-size: 16px;
|
||||
margin-top: 15px;
|
||||
margin-left: 30rpx;
|
||||
}
|
||||
|
||||
.foodbox {
|
||||
margin: 15px;
|
||||
|
||||
.foodbox-list {
|
||||
height: 45px;
|
||||
line-height: 45px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
border-bottom: 1px solid #dfdfdf;
|
||||
|
||||
:nth-child(1) {
|
||||
font-size: 15px;
|
||||
font-weight: bold;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.groupbtn {
|
||||
position: absolute;
|
||||
bottom: 15px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
margin: auto;
|
||||
left: 15px;
|
||||
right: 15px;
|
||||
|
||||
view {
|
||||
width: 100px;
|
||||
padding: 5px 0;
|
||||
text-align: center;
|
||||
background: #dfdfdf;
|
||||
border-radius: 10px;
|
||||
}
|
||||
|
||||
:nth-child(1) {
|
||||
color: #fff;
|
||||
background-color: $maincolor;
|
||||
width: 50rpx;
|
||||
height: 50rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -758,7 +523,7 @@
|
|||
.f_banner {
|
||||
width: 100% !important;
|
||||
height: 450rpx;
|
||||
margin: 15px auto;
|
||||
margin: 30rpx auto;
|
||||
|
||||
/deep/swiper {
|
||||
height: 450rpx;
|
||||
|
|
|
|||
|
|
@ -127,9 +127,9 @@
|
|||
|
||||
<style scoped lang="scss">
|
||||
.content {
|
||||
min-height: calc(100vh - 20px);
|
||||
min-height: calc(100vh - 40rpx);
|
||||
background-color: #fff;
|
||||
padding-top: 20px;
|
||||
padding-top: 40rpx;
|
||||
}
|
||||
|
||||
.size22 {
|
||||
|
|
@ -146,26 +146,26 @@
|
|||
align-items: center;
|
||||
font-size: 16px;
|
||||
font-weight: bold;
|
||||
padding-bottom: 20px;
|
||||
margin-top: -20px;
|
||||
padding-bottom: 40rpx;
|
||||
margin-top: -40rpx;
|
||||
|
||||
.left {
|
||||
width: calc(100% - 30px);
|
||||
width: calc(100% - 60rpx);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
image {
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
margin: 0 15px;
|
||||
width: 100rpx;
|
||||
height: 100rpx;
|
||||
margin: 0 30rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.btnlogin {
|
||||
color: #fff;
|
||||
margin: auto;
|
||||
padding: 8px 15px;
|
||||
padding: 8px 30rpx;
|
||||
background: $btncolor;
|
||||
border-radius: 5px;
|
||||
font-weight: 500 !important;
|
||||
|
|
@ -174,19 +174,19 @@
|
|||
.list {
|
||||
width: 100%;
|
||||
background: #fff;
|
||||
margin: 15px;
|
||||
border-radius: 10px;
|
||||
line-height: 50px;
|
||||
margin-top: -20px;
|
||||
margin: 30rpx;
|
||||
border-radius: 20rpx;
|
||||
line-height: 100rpx;
|
||||
margin-top: -40rpx;
|
||||
|
||||
.item {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
margin: 0 15px;
|
||||
border-radius: 20px;
|
||||
margin: 0 30rpx;
|
||||
border-radius: 40rpx;
|
||||
background: #FEF9F4;
|
||||
margin-top: 15px;
|
||||
padding: 0 10px;
|
||||
margin-top: 30rpx;
|
||||
padding: 0 20rpx;
|
||||
|
||||
view {
|
||||
width: 80%;
|
||||
|
|
@ -195,9 +195,9 @@
|
|||
}
|
||||
|
||||
image {
|
||||
width: 25px;
|
||||
height: 25px;
|
||||
margin-right: 10px;
|
||||
width: 50rpx;
|
||||
height: 50rpx;
|
||||
margin-right: 20rpx;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -222,6 +222,6 @@
|
|||
width: calc(100% - 60rpx);
|
||||
margin-left: 30rpx;
|
||||
color: #fff;
|
||||
margin-bottom: 20px;
|
||||
margin-bottom: 40rpx;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -158,7 +158,7 @@
|
|||
.right_inner_list {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
margin-top: 10px;
|
||||
margin-top: 20rpx;
|
||||
// justify-content: space-between;
|
||||
}
|
||||
|
||||
|
|
@ -169,14 +169,14 @@
|
|||
margin: auto;
|
||||
width: 140rpx;
|
||||
height: 140rpx;
|
||||
border-radius: 10px;
|
||||
border-radius: 20rpx;
|
||||
}
|
||||
|
||||
text {
|
||||
width: 100%;
|
||||
display: inline-block;
|
||||
text-align: center;
|
||||
margin-bottom: 10px;
|
||||
margin-bottom: 20rpx;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,7 +1,7 @@
|
|||
<template>
|
||||
<view class="content">
|
||||
<search :name="search_value"></search>
|
||||
<view class="footbox footlist">
|
||||
<view class="footbox footlist" v-if="food_search_list.length">
|
||||
<view class="list" v-for="(it,ind) in food_search_list" :key="ind" @click="handleDetail(it.id)">
|
||||
<view class="topimg">
|
||||
<image :src="it.cover" class="img" mode="aspectFill"></image>
|
||||
|
|
@ -74,8 +74,8 @@
|
|||
page: that.Page,
|
||||
search_data: that.search_value
|
||||
}).then(res => {
|
||||
if (res.code != 0) return
|
||||
that.food_search_list = that.food_search_list.concat(res.data.content_list)
|
||||
if (res.code != 0 || res.data instanceof Array) return
|
||||
that.food_search_list = that.food_search_list.concat(res.data.content_list)
|
||||
that.lastPage = res.data.page_total
|
||||
})
|
||||
},
|
||||
|
|
@ -92,16 +92,16 @@
|
|||
<style scoped lang="scss">
|
||||
.content {
|
||||
background: #fff;
|
||||
min-height: calc(100vh - 20px);
|
||||
min-height: calc(100vh - 40rpx);
|
||||
}
|
||||
|
||||
.footlist {
|
||||
position: relative;
|
||||
margin-top: 68px;
|
||||
padding: 15px;
|
||||
width: calc(100% - 30px);
|
||||
padding: 30rpx;
|
||||
width: calc(100% - 60rpx);
|
||||
background: #fff;
|
||||
border-radius: 15px 15px 0 0;
|
||||
border-radius: 30rpx 30rpx 0 0;
|
||||
}
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -2,6 +2,7 @@
|
|||
<view class="content">
|
||||
<view class="search">
|
||||
<input type="text" v-model="search_value" placeholder="输入关键字匹配食谱" />
|
||||
<icon v-if="search_value" class="iconfont icon-error" @click="handlecolse"></icon>
|
||||
<image src="/static/28.png" @click="handleSearchHistory(search_value)"></image>
|
||||
</view>
|
||||
|
||||
|
|
@ -9,7 +10,7 @@
|
|||
<!-- 历史搜索 -->
|
||||
<view v-if="history_food.length" class="search-history">
|
||||
<view class="title">
|
||||
<view class="quan"></view>历史搜索
|
||||
<view class="quan mr-5"></view>历史搜索
|
||||
</view>
|
||||
<view class="button-container" @click="showAll =! showAll" v-if="history_food.length>8">
|
||||
<image :src="showAll?'/static/arrow-up.png':'/static/arrow-down.png'"></image>
|
||||
|
|
@ -25,7 +26,7 @@
|
|||
<!-- 猜你想搜 -->
|
||||
<view class="popular-container">
|
||||
<view class="title">
|
||||
<view class="quan"></view>猜你想搜
|
||||
<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>
|
||||
|
|
@ -38,7 +39,7 @@
|
|||
</view>
|
||||
</view>
|
||||
<!-- 语音描述 -->
|
||||
<view class="auto-search-dialog" v-if="showAutoSearchDlg">
|
||||
<!-- <view class="auto-search-dialog" v-if="showAutoSearchDlg">
|
||||
<view class="auto-search-inner">
|
||||
<text>{{autoSearchContent != '' ? `识别到你描述的菜谱为“${autoSearchContent}”,是否查找菜谱“${autoSearchContent}”` : "长安麦克风图标开始说话，松开后结束"}}</text>
|
||||
<view class="mic-icon" :style="{'border-color':mic_touch ? '#18bc37' : '#777777'}"
|
||||
|
|
@ -52,11 +53,12 @@
|
|||
<uni-icons class="close" type="close" color="#ffffff" size="45"
|
||||
@click="showAutoSearchDlg=false"></uni-icons>
|
||||
</view>
|
||||
</view>
|
||||
</view> -->
|
||||
<!-- 语音 -->
|
||||
<view class="footBtn">
|
||||
<view @click="showAutoSearchDlg = true">
|
||||
<uni-icons type="mic-filled" size="22" color="#fff"></uni-icons> 语音搜索
|
||||
<view class="mic-icon" @touchstart="onVoiceTouchStart" @touchend="onVoiceTouchEnd">
|
||||
<uni-icons type="mic-filled" size="20" :color="mic_touch ? '#777777' : '#fff'"></uni-icons>
|
||||
语音搜索
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
|
@ -76,8 +78,6 @@
|
|||
search_value: '',
|
||||
mic_touch: false,
|
||||
voiceManager: null,
|
||||
autoSearchContent: "",
|
||||
showAutoSearchDlg: false
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
|
|
@ -96,7 +96,7 @@
|
|||
let that = this
|
||||
that.voiceManager = plugin.getRecordRecognitionManager()
|
||||
that.voiceManager.onStop = function(res) {
|
||||
that.autoSearchContent = res.result.replace('。', '')
|
||||
that.handleSearchHistory(res.result.replace('。', ''))
|
||||
}
|
||||
that.voiceManager.onError = function(res) {
|
||||
console.error("error msg", res.retcode)
|
||||
|
|
@ -108,11 +108,6 @@
|
|||
toggleShowAll() {
|
||||
this.showAll = !this.showAll
|
||||
},
|
||||
// 重试
|
||||
retrySearch() {
|
||||
let that = this
|
||||
that.autoSearchContent = ''
|
||||
},
|
||||
onVoiceTouchStart() {
|
||||
let that = this
|
||||
that.mic_touch = true
|
||||
|
|
@ -126,11 +121,17 @@
|
|||
that.mic_touch = false
|
||||
that.voiceManager.stop()
|
||||
},
|
||||
handlecolse() {
|
||||
console.log("取消搜索")
|
||||
this.search_value = ""
|
||||
},
|
||||
// 历史搜索
|
||||
handleSearchHistory(text) {
|
||||
let that = this
|
||||
that.showAutoSearchDlg = false
|
||||
that.autoSearchContent = ''
|
||||
if (text == "") {
|
||||
that.$tools.msg("输入关键字后搜索")
|
||||
return
|
||||
}
|
||||
uni.navigateTo({
|
||||
url: "/pages/search/list?name=" + text
|
||||
})
|
||||
|
|
@ -155,18 +156,18 @@
|
|||
width: 100%;
|
||||
position: relative;
|
||||
padding-bottom: 35px;
|
||||
padding-top: 10px;
|
||||
padding-top: 20rpx;
|
||||
background-color: $maincolor;
|
||||
|
||||
|
||||
input {
|
||||
width: calc(100% - 40px);
|
||||
width: calc(100% - 80rpx);
|
||||
background: #fff;
|
||||
height: 39px;
|
||||
line-height: 38px;
|
||||
border-radius: 10px;
|
||||
padding: 0 10px;
|
||||
margin: 0 10px;
|
||||
border-radius: 20rpx;
|
||||
padding: 0 20rpx;
|
||||
margin: 0 20rpx;
|
||||
}
|
||||
|
||||
.input:hover {
|
||||
|
|
@ -174,10 +175,10 @@
|
|||
}
|
||||
|
||||
image {
|
||||
width: 25px;
|
||||
height: 25px;
|
||||
width: 50rpx;
|
||||
height: 50rpx;
|
||||
position: absolute;
|
||||
right: 20px;
|
||||
right: 40rpx;
|
||||
top: 18px;
|
||||
z-index: 99;
|
||||
}
|
||||
|
|
@ -185,12 +186,12 @@
|
|||
|
||||
.content-box {
|
||||
background: #fff;
|
||||
border-radius: 10px 10px 0 0;
|
||||
border-radius: 20rpx 20rpx 0 0;
|
||||
position: relative;
|
||||
z-index: 99;
|
||||
width: 100%;
|
||||
padding-top: -13px;
|
||||
margin: -20px 0 70px;
|
||||
margin: -40rpx 0 70px;
|
||||
}
|
||||
|
||||
.search-history {
|
||||
|
|
@ -200,26 +201,26 @@
|
|||
|
||||
uni-icons {
|
||||
color: #333333;
|
||||
font-size: 30px;
|
||||
font-size: 60rpx;
|
||||
position: absolute;
|
||||
top: 13px;
|
||||
right: 15px;
|
||||
right: 30rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.history-list {
|
||||
width: calc(100% - 20px);
|
||||
margin: 10px 10px 0;
|
||||
width: calc(100% - 40rpx);
|
||||
margin: 20rpx 20rpx 0;
|
||||
height: auto;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
|
||||
.history-list-item {
|
||||
border: 1px solid #dfdfdf;
|
||||
padding: 3px 12px;
|
||||
border-radius: 10px;
|
||||
margin-bottom: 10px;
|
||||
margin-right: 10px;
|
||||
padding: 3px 24rpx;
|
||||
border-radius: 20rpx;
|
||||
margin-bottom: 20rpx;
|
||||
margin-right: 20rpx;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -228,8 +229,8 @@
|
|||
font-size: 30rpx;
|
||||
font-weight: bold;
|
||||
color: #000;
|
||||
margin-top: 15px;
|
||||
margin-left: 15px;
|
||||
margin-top: 30rpx;
|
||||
margin-left: 30rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
|
@ -275,15 +276,15 @@
|
|||
|
||||
.search_list {
|
||||
display: flex;
|
||||
padding: 10px;
|
||||
padding: 20rpx;
|
||||
flex-wrap: wrap;
|
||||
margin-bottom: 90px;
|
||||
margin-top: 15px;
|
||||
margin-top: 30rpx;
|
||||
justify-content: space-between;
|
||||
|
||||
.search_list_item {
|
||||
width: 30%;
|
||||
margin-top: 15px;
|
||||
margin-top: 30rpx;
|
||||
text-align: center;
|
||||
|
||||
image {
|
||||
|
|
@ -366,34 +367,44 @@
|
|||
position: fixed;
|
||||
width: 100%;
|
||||
bottom: 0;
|
||||
padding-top: 15px;
|
||||
padding-top: 30rpx;
|
||||
background: #fff;
|
||||
display: flex;
|
||||
z-index: 999;
|
||||
z-index: 99;
|
||||
justify-content: space-around;
|
||||
|
||||
view {
|
||||
color: #fff;
|
||||
width: auto;
|
||||
padding: 5px 20px;
|
||||
width: 80%;
|
||||
padding: 8px 40rpx;
|
||||
background: $maincolor;
|
||||
margin-bottom: 15px;
|
||||
margin-bottom: 30rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
border-radius: 10px;
|
||||
justify-content: center;
|
||||
border-radius: 20rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.button-container {
|
||||
position: absolute;
|
||||
top: 10px;
|
||||
right: 15px;
|
||||
font-size: 20px;
|
||||
top: 20rpx;
|
||||
right: 30rpx;
|
||||
font-size: 40rpx;
|
||||
|
||||
image {
|
||||
width: 25px;
|
||||
height: 25px;
|
||||
width: 50rpx;
|
||||
height: 50rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.icon-error {
|
||||
color: #888484;
|
||||
position: absolute;
|
||||
right: 120rpx;
|
||||
top: 18px;
|
||||
z-index: 999;
|
||||
font-size: 24px;
|
||||
}
|
||||
</style>
|
||||
BIN
static/0.png
BIN
static/0.png
Binary file not shown.
|
Before Width: | Height: | Size: 94 KiB |
BIN
static/1.png
BIN
static/1.png
Binary file not shown.
|
Before Width: | Height: | Size: 3.2 KiB |
BIN
static/2.png
BIN
static/2.png
Binary file not shown.
|
Before Width: | Height: | Size: 56 KiB |
BIN
static/20.png
BIN
static/20.png
Binary file not shown.
|
Before Width: | Height: | Size: 4.2 KiB |
BIN
static/21.png
BIN
static/21.png
Binary file not shown.
|
Before Width: | Height: | Size: 4.1 KiB |
BIN
static/22.png
BIN
static/22.png
Binary file not shown.
|
Before Width: | Height: | Size: 3.6 KiB |
BIN
static/23.png
BIN
static/23.png
Binary file not shown.
|
Before Width: | Height: | Size: 4.2 KiB |
BIN
static/24.png
BIN
static/24.png
Binary file not shown.
|
Before Width: | Height: | Size: 2.5 KiB |
BIN
static/25.png
BIN
static/25.png
Binary file not shown.
|
Before Width: | Height: | Size: 3.4 KiB |
BIN
static/3.png
BIN
static/3.png
Binary file not shown.
|
Before Width: | Height: | Size: 3.0 KiB |
BIN
static/4.png
BIN
static/4.png
Binary file not shown.
|
Before Width: | Height: | Size: 50 KiB |
BIN
static/5.png
BIN
static/5.png
Binary file not shown.
|
Before Width: | Height: | Size: 2.3 KiB |
BIN
static/6.png
BIN
static/6.png
Binary file not shown.
|
Before Width: | Height: | Size: 35 KiB |
BIN
static/7.png
BIN
static/7.png
Binary file not shown.
|
Before Width: | Height: | Size: 4.5 KiB |
BIN
static/8.png
BIN
static/8.png
Binary file not shown.
|
Before Width: | Height: | Size: 48 KiB |
BIN
static/add.png
BIN
static/add.png
Binary file not shown.
|
Before Width: | Height: | Size: 9.4 KiB After Width: | Height: | Size: 9.7 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 6.7 KiB |
BIN
static/close.png
BIN
static/close.png
Binary file not shown.
|
Before Width: | Height: | Size: 4.9 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 5.3 KiB |
BIN
static/jia.png
BIN
static/jia.png
Binary file not shown.
|
Before Width: | Height: | Size: 63 KiB |
BIN
static/none.png
BIN
static/none.png
Binary file not shown.
|
Before Width: | Height: | Size: 542 KiB After Width: | Height: | Size: 3.8 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 3.7 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 3.8 KiB |
BIN
static/wan.png
BIN
static/wan.png
Binary file not shown.
|
Before Width: | Height: | Size: 57 KiB |
BIN
static/wu.png
BIN
static/wu.png
Binary file not shown.
|
Before Width: | Height: | Size: 88 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 6.5 KiB |
BIN
static/zao.png
BIN
static/zao.png
Binary file not shown.
|
Before Width: | Height: | Size: 100 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 4.9 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 5.7 KiB |
|
|
@ -18,7 +18,13 @@ export default new Vuex.Store({
|
|||
tel: "",
|
||||
token: "",
|
||||
weight: 0,
|
||||
birthday: ""
|
||||
birthday: "",
|
||||
food_count: {
|
||||
date: "",
|
||||
list: [],
|
||||
nutrients_four: [],
|
||||
remaining_kcal: ""
|
||||
}
|
||||
},
|
||||
// 配置
|
||||
configInfo: {
|
||||
|
|
@ -27,27 +33,31 @@ export default new Vuex.Store({
|
|||
cookbook: [],
|
||||
food_data: []
|
||||
},
|
||||
meal_list: [],
|
||||
search_history: {
|
||||
cookbook: [],
|
||||
food: []
|
||||
},
|
||||
default_count_foot: {},
|
||||
business_cooperation: {}
|
||||
},
|
||||
// 计食器
|
||||
countFoodInfo: {
|
||||
date: "",
|
||||
home_food_count: {},
|
||||
details: {},
|
||||
list: [],
|
||||
remaining_kcal: "",
|
||||
suggestion: {
|
||||
kcal: "",
|
||||
carbohydrate: "",
|
||||
protein: "",
|
||||
fat: ""
|
||||
},
|
||||
today_intake: {}
|
||||
nutrients_four: [],
|
||||
trace_elements_all_day: []
|
||||
},
|
||||
bleValue: {
|
||||
deviceId: "",
|
||||
serviceId: "",
|
||||
notify: "",
|
||||
write: "",
|
||||
unit: "",
|
||||
countWeight: 100,
|
||||
},
|
||||
isConnected: false,
|
||||
isBluetoothTyle: false,
|
||||
},
|
||||
// mutations: Store中更改state数据状态的唯一方法(必须是同步函数)
|
||||
|
|
@ -60,9 +70,9 @@ export default new Vuex.Store({
|
|||
changeBluetooth(state, newData) {
|
||||
state.isBluetoothTyle = newData
|
||||
},
|
||||
// 蓝牙连接状态
|
||||
changeConnected(state, newData) {
|
||||
state.isConnected = newData
|
||||
// 蓝牙信息
|
||||
changeBluetoothValue(state, newData) {
|
||||
Object.assign(state.bleValue, newData)
|
||||
},
|
||||
changeConfig(state, newData) {
|
||||
state.configInfo = newData
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
import tools from '@/tools/tools.js'
|
||||
import store from '../store'
|
||||
import config from '@/config.js'
|
||||
let baseUrl = "https://tc.pcxbc.com/"
|
||||
let baseUrl = "https://tc.pcxbc.com"
|
||||
const httpRequest = (url, method = "get", data) => {
|
||||
let httpDefaultOpts = {
|
||||
url: baseUrl + url,
|
||||
|
|
|
|||
|
|
@ -18,13 +18,13 @@ export default {
|
|||
return res
|
||||
})
|
||||
},
|
||||
getRegisterPhone(param) { // 手机号快捷登录
|
||||
return http.post("/kitchenscale2/wechat_quick_login", param).then(res => {
|
||||
getloginOut(param) { // 退出登录
|
||||
return http.post("/user_quit_account", param).then(res => {
|
||||
return res
|
||||
})
|
||||
},
|
||||
getloginOut(param) { // 退出登录
|
||||
return http.post("/kitchenscale2/user_quit_account", param).then(res => {
|
||||
getRegisterPhone(param) { // 手机号快捷登录
|
||||
return http.post("/kitchenscale2/wechat_quick_login", param).then(res => {
|
||||
return res
|
||||
})
|
||||
},
|
||||
|
|
|
|||
19
uni.scss
19
uni.scss
|
|
@ -39,14 +39,14 @@ $uni-border-color:#c8c7cc;
|
|||
/* 尺寸变量 */
|
||||
|
||||
/* 文字尺寸 */
|
||||
$uni-font-size-sm:12px;
|
||||
$uni-font-size-sm:24rpx;
|
||||
$uni-font-size-base:14px;
|
||||
$uni-font-size-lg:16;
|
||||
|
||||
/* 图片尺寸 */
|
||||
$uni-img-size-sm:20px;
|
||||
$uni-img-size-sm:40rpx;
|
||||
$uni-img-size-base:26px;
|
||||
$uni-img-size-lg:40px;
|
||||
$uni-img-size-lg:80rpx;
|
||||
|
||||
/* Border Radius */
|
||||
$uni-border-radius-sm: 2px;
|
||||
|
|
@ -56,27 +56,28 @@ $uni-border-radius-circle: 50%;
|
|||
|
||||
/* 水平间距 */
|
||||
$uni-spacing-row-sm: 5px;
|
||||
$uni-spacing-row-base: 10px;
|
||||
$uni-spacing-row-lg: 15px;
|
||||
$uni-spacing-row-base: 20rpx;
|
||||
$uni-spacing-row-lg: 30rpx;
|
||||
|
||||
/* 垂直间距 */
|
||||
$uni-spacing-col-sm: 4px;
|
||||
$uni-spacing-col-base: 8px;
|
||||
$uni-spacing-col-lg: 12px;
|
||||
$uni-spacing-col-lg: 24rpx;
|
||||
|
||||
/* 透明度 */
|
||||
$uni-opacity-disabled: 0.3; // 组件禁用态的透明度
|
||||
|
||||
/* 文章场景相关 */
|
||||
$uni-color-title: #2C405A; // 文章标题颜色
|
||||
$uni-font-size-title:20px;
|
||||
$uni-font-size-title:40rpx;
|
||||
$uni-color-subtitle: #555555; // 二级标题颜色
|
||||
$uni-font-size-subtitle:26px;
|
||||
$uni-color-paragraph: #3F536E; // 文章段落颜色
|
||||
$uni-font-size-paragraph:15px;
|
||||
$uni-font-size-paragraph:30rpx;
|
||||
|
||||
//
|
||||
$maincolor:#3CB383;
|
||||
$bgcolor:#efefef;
|
||||
$btncolor:#3CB383;
|
||||
$textcolor:#333
|
||||
$textcolor:#333;
|
||||
$yellowcolor:#F7931E
|
||||
|
|
|
|||
|
|
@ -0,0 +1,30 @@
|
|||
## 1.0.7（2025-03-17）
|
||||
修复vue3 bug
|
||||
## 1.0.6（2025-01-08）
|
||||
更新文档
|
||||
## 1.0.5（2024-12-26）
|
||||
优化显示
|
||||
## 1.0.4（2024-12-26）
|
||||
优化显示
|
||||
## 1.0.3（2024-12-25）
|
||||
- 更新依赖
|
||||
## 1.0.2（2024-12-25）
|
||||
- 优化滑块相近时tip显示
|
||||
|
||||
## 1.0.1（2024-12-25）
|
||||
- 优化逻辑
|
||||
|
||||
## 1.0.0（2024-12-25）
|
||||
新增:
|
||||
- 双滑块范围选择器基础功能
|
||||
- 支持设置最小值(min)和最大值(max)
|
||||
- 支持自定义步长(step)设置
|
||||
- 支持禁用状态(disabled)
|
||||
- 自定义样式功能:
|
||||
- 滑动条背景色(backgroundColor)
|
||||
- 选中范围颜色(activeColor)
|
||||
- 滑块大小(blockSize)
|
||||
- 滑块颜色(blockColor)
|
||||
- 值格式化功能(format)
|
||||
- 支持移动端触摸操作
|
||||
- v-model双向绑定支持
|
||||
|
|
@ -0,0 +1,467 @@
|
|||
<template>
|
||||
<!-- 滑块范围选择器容器 -->
|
||||
<view class="slider-range" :class="{disabled}" :style="sliderStyle">
|
||||
<view class="slider-range-inner">
|
||||
<!-- 滑块条 -->
|
||||
<view class="slider-bar">
|
||||
<!-- 背景条 -->
|
||||
<view class="slider-bar-bg" :style="{backgroundColor}" />
|
||||
<!-- 选中区域条 -->
|
||||
<view class="slider-bar-inner" :style="barInnerStyle" />
|
||||
</view>
|
||||
|
||||
<!-- 左右两个滑块按钮 -->
|
||||
<view
|
||||
v-for="block in ['lowerBlock', 'higherBlock']"
|
||||
:key="block"
|
||||
class="slider-handle-block"
|
||||
:style="block === 'lowerBlock' ? leftHandleStyle : rightHandleStyle"
|
||||
:data-tag="block"
|
||||
@touchstart="handleDragStart"
|
||||
@touchmove="handleDragMove"
|
||||
@touchend="onBlockTouchEnd"
|
||||
@mousedown="onMouseDown"
|
||||
/>
|
||||
|
||||
<!-- 滑块值提示 -->
|
||||
<!-- <view class="range-tip" :style="leftTipStyle">{{ formatValue(selectedRange[0]) }}</view>
|
||||
<view class="range-tip" :style="rightTipStyle">{{ formatValue(selectedRange[1]) }}</view> -->
|
||||
|
||||
<!-- 刻度线 -->
|
||||
<!-- <view
|
||||
v-for="n in scaleCount + 1"
|
||||
:key="n"
|
||||
class="slider-scale"
|
||||
:style="{left: `${(n / scaleCount) * 100}%`}"
|
||||
/> -->
|
||||
<!-- 最小最大值显示 -->
|
||||
<!-- <view class="slider-value" style="left: 0">{{ min }}</view>
|
||||
<view class="slider-value" style="right: 0">{{ max }}</view> -->
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import throttle from './throttle'
|
||||
// 默认刻度数量
|
||||
const DEFAULT_SCALE_COUNT = 24
|
||||
// 默认滑块大小(rpx)
|
||||
const DEFAULT_BLOCK_SIZE = 48
|
||||
|
||||
/**
|
||||
* 滑块范围选择器
|
||||
* @description 一个可以选择数值范围的滑块组件
|
||||
* @tutorial https://ext.dcloud.net.cn/plugin?id=21575
|
||||
* @property {Array} modelValue 双向绑定的值，默认[0, 100]
|
||||
* @property {Number} min 最小值，默认0
|
||||
* @property {Number} max 最大值，默认100
|
||||
* @property {Number} step 步长，默认1
|
||||
* @property {Function} format 格式化显示的值的函数
|
||||
* @property {Boolean} disabled 是否禁用，默认false
|
||||
* @property {String} backgroundColor 背景颜色，默认#F6F6F6
|
||||
* @property {String} activeColor 激活颜色，默认#4DB8F6
|
||||
* @property {Number} blockSize 滑块大小，默认48
|
||||
* @property {String} blockColor 滑块颜色，默认#fff
|
||||
* @event {Function} update:modelValue 值变化时触发
|
||||
*/
|
||||
|
||||
export default {
|
||||
name: 'llt-slider-range',
|
||||
// 支持v-model双向绑定
|
||||
model: {
|
||||
prop: 'modelValue',
|
||||
event: 'update:modelValue'
|
||||
},
|
||||
props: {
|
||||
modelValue: {
|
||||
type: Array,
|
||||
default: () => [0, 100]
|
||||
},
|
||||
min: {
|
||||
type: Number,
|
||||
default: 0
|
||||
},
|
||||
max: {
|
||||
type: Number,
|
||||
default: 100
|
||||
},
|
||||
step: {
|
||||
type: Number,
|
||||
default: 1
|
||||
},
|
||||
format: {
|
||||
type: Function,
|
||||
default: val => val
|
||||
},
|
||||
disabled: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
backgroundColor: {
|
||||
type: String,
|
||||
default: '#f0ae43'
|
||||
},
|
||||
activeColor: {
|
||||
type: String,
|
||||
default: '#3CB383'
|
||||
},
|
||||
blockSize: {
|
||||
type: Number,
|
||||
default: DEFAULT_BLOCK_SIZE
|
||||
},
|
||||
blockColor: {
|
||||
type: String,
|
||||
default: '#fff'
|
||||
}
|
||||
},
|
||||
|
||||
emits: ['update:modelValue', 'change'],
|
||||
|
||||
data() {
|
||||
return {
|
||||
selectedRange: this.modelValue, // 当前选中的值
|
||||
dragStartPosition: 0, // 开始拖动时的位置
|
||||
dragStartValue: 0, // 开始拖动时的值
|
||||
activeBlock: '', // 当前拖动的滑块
|
||||
scaleCount: DEFAULT_SCALE_COUNT, // 刻度数量
|
||||
isDragging: false // 是否正在拖动
|
||||
}
|
||||
},
|
||||
|
||||
computed: {
|
||||
// 计算左侧滑块位置
|
||||
leftHandlePosition() {
|
||||
return this.calculateHandlePosition(this.selectedRange[0])
|
||||
},
|
||||
|
||||
// 计算右侧滑块位置
|
||||
rightHandlePosition() {
|
||||
return this.calculateHandlePosition(this.selectedRange[1])
|
||||
},
|
||||
|
||||
// 左侧滑块样式
|
||||
leftHandleStyle() {
|
||||
return this.generateHandleStyle('lowerBlock')
|
||||
},
|
||||
|
||||
// 右侧滑块样式
|
||||
rightHandleStyle() {
|
||||
return this.generateHandleStyle('higherBlock')
|
||||
},
|
||||
|
||||
// 左侧提示样式
|
||||
leftTipStyle() {
|
||||
return this.generateTipStyle('lowerBlock')
|
||||
},
|
||||
|
||||
// 右侧提示样式
|
||||
rightTipStyle() {
|
||||
return this.generateTipStyle('higherBlock')
|
||||
},
|
||||
|
||||
// 滑块容器样式
|
||||
sliderStyle() {
|
||||
const padding = this.blockSize / 2
|
||||
return `padding-left: ${padding}rpx;padding-right: ${padding}rpx`
|
||||
},
|
||||
|
||||
// 选中区域样式
|
||||
barInnerStyle() {
|
||||
const width = ((this.selectedRange[1] - this.selectedRange[0]) / (this.max - this.min)) * 100
|
||||
return `width: ${width}%;left: ${this.leftHandlePosition}%;background-color: ${this.activeColor}`
|
||||
}
|
||||
},
|
||||
|
||||
watch: {
|
||||
// 监听modelValue变化
|
||||
modelValue: {
|
||||
deep: true,
|
||||
immediate: true,
|
||||
handler(val) {
|
||||
if (!this.valuesEqual(val)) {
|
||||
this.updateValues(val)
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
methods: {
|
||||
// 格式化显示值
|
||||
formatValue(val) {
|
||||
if (typeof this.format === 'function') {
|
||||
return this.format(val)
|
||||
}
|
||||
return val
|
||||
},
|
||||
|
||||
// 计算滑块位置百分比
|
||||
calculateHandlePosition(value) {
|
||||
return ((value - this.min) / (this.max - this.min)) * 100
|
||||
},
|
||||
|
||||
// 生成滑块样式
|
||||
generateHandleStyle(block) {
|
||||
const position = block === 'lowerBlock' ? this.leftHandlePosition : this.rightHandlePosition
|
||||
let zIndex = this.activeBlock === block ? 20 : 12
|
||||
|
||||
if ((position < 1 && block === 'lowerBlock') || (position > 99 && block === 'higherBlock')) {
|
||||
zIndex = 11
|
||||
}
|
||||
|
||||
return `background-color: ${this.blockColor};width: ${this.blockSize}rpx;height: ${this.blockSize}rpx;left: ${position}%;z-index:${zIndex}`
|
||||
},
|
||||
|
||||
// 生成提示样式
|
||||
generateTipStyle(type) {
|
||||
const position = type === 'lowerBlock' ? this.leftHandlePosition : this.rightHandlePosition
|
||||
// 计算最大显示距离,根据右侧值的字符长度乘以8得到基准距离
|
||||
const maxDistance = String(this.selectedRange[1]).length * 8
|
||||
// 计算实际距离,用最大距离减去两个滑块之间的距离
|
||||
const distance = maxDistance - (this.rightHandlePosition - this.leftHandlePosition)
|
||||
|
||||
// 如果实际距离大于0,说明两个滑块太近,需要调整提示位置避免重叠
|
||||
if (distance > 0) {
|
||||
// 根据滑块类型计算偏移量,左滑块向左偏移,右滑块向右偏移
|
||||
const diff = type === 'lowerBlock' ? -distance : distance
|
||||
return `left: calc(${position}% + ${diff}rpx)`
|
||||
}
|
||||
|
||||
return position < 90
|
||||
? `left: ${position}%`
|
||||
: `right: ${100 - position}%; transform: translate(50%, -100%)`
|
||||
},
|
||||
|
||||
// 更新选中值
|
||||
updateValues(newVal) {
|
||||
if (this.step >= this.max - this.min) {
|
||||
throw new RangeError('Invalid slider step or slider range')
|
||||
}
|
||||
|
||||
if (!this.isValidValues(newVal)) {
|
||||
this.selectedRange = []
|
||||
this.$emit('update:modelValue', [], 'update')
|
||||
this.$emit('change', [])
|
||||
return
|
||||
}
|
||||
|
||||
const newValues = this.calculateNewValues(newVal)
|
||||
if (this.valuesEqual(newValues)) return
|
||||
|
||||
this.selectedRange = this.validateValues(newValues)
|
||||
this.$emit('update:modelValue', [...this.selectedRange], 'update')
|
||||
this.$emit('change', [...this.selectedRange])
|
||||
},
|
||||
|
||||
// 计算新的值
|
||||
calculateNewValues(val) {
|
||||
return [
|
||||
Math.round((val[0] - this.min) / this.step) * this.step + this.min,
|
||||
Math.round((val[1] - this.min) / this.step) * this.step + this.min
|
||||
]
|
||||
},
|
||||
|
||||
// 验证并修正值的范围
|
||||
validateValues(values) {
|
||||
let [lower, higher] = values
|
||||
|
||||
lower = Math.max(lower, this.min)
|
||||
higher = Math.min(higher, this.max)
|
||||
|
||||
if (lower >= higher) {
|
||||
if (lower === this.selectedRange[0]) {
|
||||
higher = lower + this.step
|
||||
} else {
|
||||
lower = higher - this.step
|
||||
}
|
||||
}
|
||||
|
||||
return [lower, higher]
|
||||
},
|
||||
|
||||
// 判断两个值数组是否相等
|
||||
valuesEqual(newValues) {
|
||||
return Array.isArray(newValues) &&
|
||||
Array.isArray(this.selectedRange) &&
|
||||
newValues.length === this.selectedRange.length &&
|
||||
newValues.every((val, index) => val === this.selectedRange[index])
|
||||
},
|
||||
|
||||
// 开始拖动事件处理
|
||||
handleDragStart(event) {
|
||||
if (this.disabled) return
|
||||
|
||||
const tag = event.target.dataset.tag
|
||||
this.activeBlock = tag
|
||||
const { pageX } = event.changedTouches?.[0] || event
|
||||
this.dragStartPosition = pageX
|
||||
this.dragStartValue = tag === 'lowerBlock' ? this.selectedRange[0] : this.selectedRange[1]
|
||||
this.isDragging = true
|
||||
},
|
||||
|
||||
// 拖动移动事件处理
|
||||
handleDragMove(event) {
|
||||
if (!this.isDragging || this.disabled) return
|
||||
throttle(this.processDrag(event), 500)
|
||||
},
|
||||
|
||||
// 结束拖动事件处理
|
||||
onBlockTouchEnd() {
|
||||
this.isDragging = false
|
||||
},
|
||||
|
||||
// 拖动处理
|
||||
processDrag(event) {
|
||||
const view = uni.createSelectorQuery().in(this).select('.slider-range-inner')
|
||||
view.boundingClientRect(data => {
|
||||
const sliderWidth = data.width
|
||||
const { pageX } = event.changedTouches?.[0] || event
|
||||
const diff = ((pageX - this.dragStartPosition) / sliderWidth) * (this.max - this.min)
|
||||
const nextVal = this.dragStartValue + diff
|
||||
|
||||
const values = this.activeBlock === 'lowerBlock'
|
||||
? [nextVal, this.selectedRange[1]]
|
||||
: [this.selectedRange[0], nextVal]
|
||||
|
||||
this.updateValues(values)
|
||||
}).exec()
|
||||
},
|
||||
|
||||
// 验证值是否有效
|
||||
isValidValues(values) {
|
||||
return Array.isArray(values) && values.length === 2
|
||||
},
|
||||
|
||||
// 添加鼠标按下事件处理
|
||||
onMouseDown(event) {
|
||||
if (this.disabled) return
|
||||
|
||||
const tag = event.target.dataset.tag
|
||||
this.activeBlock = tag
|
||||
this.dragStartPosition = event.pageX
|
||||
this.dragStartValue = tag === 'lowerBlock' ? this.selectedRange[0] : this.selectedRange[1]
|
||||
this.isDragging = true
|
||||
|
||||
// 添加鼠标移动和抬起的事件监听
|
||||
document.addEventListener('mousemove', this.onMouseMove)
|
||||
document.addEventListener('mouseup', this.onMouseUp)
|
||||
},
|
||||
|
||||
// 添加鼠标移动事件处理
|
||||
onMouseMove(event) {
|
||||
if (!this.isDragging || this.disabled) return
|
||||
event.preventDefault() // 防止拖动时选中文本
|
||||
throttle(this.handleMouseDrag(event), 500)
|
||||
},
|
||||
|
||||
// 添加鼠标抬起事件处理
|
||||
onMouseUp() {
|
||||
this.isDragging = false
|
||||
// 移除事件监听
|
||||
document.removeEventListener('mousemove', this.onMouseMove)
|
||||
document.removeEventListener('mouseup', this.onMouseUp)
|
||||
},
|
||||
|
||||
// 处理鼠标拖动
|
||||
handleMouseDrag(event) {
|
||||
const view = uni.createSelectorQuery().in(this).select('.slider-range-inner')
|
||||
view.boundingClientRect(data => {
|
||||
const sliderWidth = data.width
|
||||
const diff = ((event.pageX - this.dragStartPosition) / sliderWidth) * (this.max - this.min)
|
||||
const nextVal = this.dragStartValue + diff
|
||||
|
||||
const values = this.activeBlock === 'lowerBlock'
|
||||
? [nextVal, this.selectedRange[1]]
|
||||
: [this.selectedRange[0], nextVal]
|
||||
|
||||
this.updateValues(values)
|
||||
}).exec()
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.slider-range {
|
||||
position: relative;
|
||||
padding-top: 40rpx;
|
||||
|
||||
&-inner {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 100rpx;
|
||||
}
|
||||
|
||||
&.disabled {
|
||||
.slider-bar-inner {
|
||||
opacity: 0.35;
|
||||
}
|
||||
|
||||
.slider-handle-block {
|
||||
cursor: not-allowed;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.slider-bar {
|
||||
position: absolute;
|
||||
top: 30%;
|
||||
left: 0;
|
||||
right: 0;
|
||||
height: 15rpx;
|
||||
transform: translateY(-30%);
|
||||
|
||||
&-inner,
|
||||
&-bg {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border-radius: 10000px;
|
||||
}
|
||||
|
||||
&-inner {
|
||||
z-index: 11;
|
||||
}
|
||||
|
||||
&-bg {
|
||||
z-index: 10;
|
||||
}
|
||||
}
|
||||
|
||||
.slider-handle-block {
|
||||
position: absolute;
|
||||
top: 30%;
|
||||
transform: translate(-50%, -50%);
|
||||
border-radius: 50%;
|
||||
box-shadow: 0rpx 0rpx 10rpx 0rpx rgba(91, 91, 91, 0.2);
|
||||
z-index: 12;
|
||||
cursor: pointer;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
.range-tip {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
font-family: Source Han Sans CN;
|
||||
font-weight: 400;
|
||||
font-size: 26rpx;
|
||||
color: #666666;
|
||||
transform: translate(-30%, -100%);
|
||||
}
|
||||
|
||||
.slider-scale {
|
||||
position: absolute;
|
||||
bottom: 30rpx;
|
||||
width: 1rpx;
|
||||
height: 14rpx;
|
||||
background: #e2e2e2;
|
||||
}
|
||||
|
||||
.slider-value {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
font-family: Source Han Sans CN;
|
||||
font-weight: 400;
|
||||
font-size: 21rpx;
|
||||
color: #bbbbbb;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,30 @@
|
|||
let timer; let
|
||||
flag
|
||||
/**
|
||||
* 节流原理：在一定时间内，只能触发一次
|
||||
*
|
||||
* @param {Function} func 要执行的回调函数
|
||||
* @param {Number} wait 延时的时间
|
||||
* @param {Boolean} immediate 是否立即执行
|
||||
* @return null
|
||||
*/
|
||||
function throttle(func, wait = 500, immediate = true) {
|
||||
if (immediate) {
|
||||
if (!flag) {
|
||||
flag = true
|
||||
// 如果是立即执行，则在wait毫秒内开始时执行
|
||||
typeof func === 'function' && func()
|
||||
timer = setTimeout(() => {
|
||||
flag = false
|
||||
}, wait)
|
||||
}
|
||||
} else if (!flag) {
|
||||
flag = true
|
||||
// 如果是非立即执行，则在wait毫秒内的结束处执行
|
||||
timer = setTimeout(() => {
|
||||
flag = false
|
||||
typeof func === 'function' && func()
|
||||
}, wait)
|
||||
}
|
||||
}
|
||||
export default throttle
|
||||
|
|
@ -0,0 +1,86 @@
|
|||
{
|
||||
"id": "llt-slider-range",
|
||||
"displayName": "slider range双滑块范围选择器",
|
||||
"version": "1.0.7",
|
||||
"description": "一个功能强大的双滑块范围选择器组件,可用于价格区间、数值范围等场景的选择。支持自定义样式、步长设置,具有良好的移动端适配性和交互体验。",
|
||||
"keywords": [
|
||||
"slider",
|
||||
"range",
|
||||
"slider-range",
|
||||
"区间滑块"
|
||||
],
|
||||
"repository": "",
|
||||
"engines": {
|
||||
"HBuilderX": "^3.8.6"
|
||||
},
|
||||
"dcloudext": {
|
||||
"sale": {
|
||||
"regular": {
|
||||
"price": "0.00"
|
||||
},
|
||||
"sourcecode": {
|
||||
"price": "0.00"
|
||||
}
|
||||
},
|
||||
"contact": {
|
||||
"qq": ""
|
||||
},
|
||||
"declaration": {
|
||||
"ads": "无",
|
||||
"data": "无",
|
||||
"permissions": "无"
|
||||
},
|
||||
"type": "component-vue"
|
||||
},
|
||||
"uni_modules": {
|
||||
"dependencies": [],
|
||||
"encrypt": [],
|
||||
"platforms": {
|
||||
"cloud": {
|
||||
"tcb": "y",
|
||||
"aliyun": "y",
|
||||
"alipay": "n"
|
||||
},
|
||||
"client": {
|
||||
"App": {
|
||||
"app-vue": "y",
|
||||
"app-nvue": "n",
|
||||
"app-uvue": "n",
|
||||
"app-harmony": "u"
|
||||
},
|
||||
"H5-mobile": {
|
||||
"Safari": "y",
|
||||
"Android Browser": "y",
|
||||
"微信浏览器(Android)": "y",
|
||||
"QQ浏览器(Android)": "y"
|
||||
},
|
||||
"H5-pc": {
|
||||
"Chrome": "y",
|
||||
"IE": "y",
|
||||
"Edge": "y",
|
||||
"Firefox": "y",
|
||||
"Safari": "y"
|
||||
},
|
||||
"小程序": {
|
||||
"微信": "y",
|
||||
"阿里": "y",
|
||||
"百度": "y",
|
||||
"字节跳动": "y",
|
||||
"QQ": "y",
|
||||
"钉钉": "y",
|
||||
"快手": "y",
|
||||
"飞书": "y",
|
||||
"京东": "y"
|
||||
},
|
||||
"快应用": {
|
||||
"华为": "y",
|
||||
"联盟": "y"
|
||||
},
|
||||
"Vue": {
|
||||
"vue2": "y",
|
||||
"vue3": "y"
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,153 @@
|
|||
# SliderRange 双滑块范围选择器
|
||||
|
||||
> 一个轻量级但功能强大的双滑块范围选择器组件，完美适配移动端和PC端，为您的项目提供直观的范围选择体验。
|
||||
|
||||
## 🌟 特性
|
||||
|
||||
- ✨ 灵活的范围设置 - 支持自定义最大最小值
|
||||
- 📏 精确的步长控制 - 可设置数值变化的最小单位
|
||||
- 🎨 丰富的样式定制 - 支持自定义滑块、轨道样式
|
||||
- 📱 完美的跨端适配 - 支持H5/App/小程序多端使用
|
||||
- 🔄 双向绑定支持 - 支持v-model语法
|
||||
- 🎯 刻度线显示 - 直观的数值参考
|
||||
- ⌨️ 键盘操作支持 - 提升无障碍体验
|
||||
- 🚫 禁用状态 - 支持只读模式
|
||||
|
||||
## 📦 安装
|
||||
|
||||
### 下载使用
|
||||
将 `llt-slider-range` 组件复制到你的项目中即可。
|
||||
|
||||
## 🚀 快速开始
|
||||
|
||||
### H5/App使用示例
|
||||
```vue
|
||||
<template>
|
||||
<llt-slider-range v-model="rangeValue" />
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
rangeValue: [30, 50] // 设置初始范围值
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
```
|
||||
|
||||
### 微信小程序使用示例
|
||||
```vue
|
||||
<template>
|
||||
<llt-slider-range
|
||||
:model-value="rangeValue"
|
||||
@change="handleChange"
|
||||
/>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
rangeValue: [30, 50]
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
handleChange(val) {
|
||||
this.rangeValue = val
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
```
|
||||
|
||||
## 📝 API文档
|
||||
|
||||
### Props 属性
|
||||
|
||||
| 属性名 | 类型 | 默认值 | 说明 |
|
||||
|--------|------|--------|------|
|
||||
| modelValue/v-model | Array | [0, 100] | 当前选中的范围值 |
|
||||
| min | Number | 0 | 最小可选值 |
|
||||
| max | Number | 100 | 最大可选值 |
|
||||
| step | Number | 1 | 步长，必须大于0 |
|
||||
| disabled | Boolean | false | 是否禁用 |
|
||||
| backgroundColor | String | '#F6F6F6' | 滑动条背景色 |
|
||||
| activeColor | String | '#4DB8F6' | 选中范围的颜色 |
|
||||
| blockSize | Number | 48 | 滑块大小(rpx) |
|
||||
| blockColor | String | '#fff' | 滑块颜色 |
|
||||
| format | Function | val => val | 数值格式化函数 |
|
||||
|
||||
### Events 事件
|
||||
|
||||
| 事件名 | 说明 | 回调参数 |
|
||||
|--------|------|----------|
|
||||
| update:modelValue | 值更新时触发 | (value: number[]) |
|
||||
| change | 值变化时触发 | (value: number[]) |
|
||||
|
||||
## 💡 高级用法
|
||||
|
||||
### 价格范围选择器
|
||||
```vue
|
||||
<template>
|
||||
<llt-slider-range
|
||||
v-model="priceRange"
|
||||
:min="0"
|
||||
:max="10000"
|
||||
:step="100"
|
||||
:format="formatPrice"
|
||||
active-color="#FF6B6B"
|
||||
/>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
priceRange: [1000, 5000]
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
formatPrice(val) {
|
||||
return `￥${val}`
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
```
|
||||
|
||||
### 温度选择器
|
||||
```vue
|
||||
<template>
|
||||
<llt-slider-range
|
||||
v-model="tempRange"
|
||||
:min="-20"
|
||||
:max="40"
|
||||
:format="val => `${val}°C`"
|
||||
active-color="#2196F3"
|
||||
/>
|
||||
</template>
|
||||
```
|
||||
|
||||
## ⚠️ 注意事项
|
||||
|
||||
1. 确保传入的范围值在 min 和 max 之间
|
||||
2. step 值必须为正数
|
||||
3. 移动端使用时建议适当增大 blockSize 以提升触控体验
|
||||
4. 小程序端需使用 model-value + change 事件方式实现双向绑定
|
||||
5. 建议在父容器设置合适的宽度，以获得最佳显示效果
|
||||
|
||||
## 🔗 相关链接
|
||||
|
||||
- [GitHub 仓库](https://github.com/llt3677/slider-range)
|
||||
- [插件市场](https://ext.dcloud.net.cn/plugin?id=21575)
|
||||
- [问题反馈](https://github.com/llt3677/slider-range/issues)
|
||||
|
||||
## 📄 License
|
||||
|
||||
[MIT](https://opensource.org/licenses/MIT)
|
||||
|
||||
---
|
||||
|
||||
如果这个组件对你有帮助，欢迎 star ⭐️ 支持一下！
|
||||
|
|
@ -18,20 +18,20 @@
|
|||
<template>
|
||||
<view class="chartsview" :id="'ChartBoxId'+cid">
|
||||
<block v-if="type2d">
|
||||
<view v-if="ontouch" @click="tap">
|
||||
<view v-if="ontouch" @tap="_tap">
|
||||
<canvas :id="cid" :canvasId="cid"
|
||||
:style="{ width: cWidth + 'rpx', height: cHeight + 'rpx', background: background }" type="2d"
|
||||
:disable-scroll="disScroll" @touchstart="_touchStart" @touchmove="_touchMove" @touchend="_touchEnd"
|
||||
@error="_error" v-show="showchart" />
|
||||
</view>
|
||||
<view v-if="!ontouch" @click="tap">
|
||||
<view v-if="!ontouch" @tap="_tap">
|
||||
<canvas :id="cid" :canvasId="cid"
|
||||
:style="{ width: cWidth + 'rpx', height: cHeight + 'rpx', background: background }" type="2d"
|
||||
:disable-scroll="disScroll" @error="_error" v-show="showchart" />
|
||||
</view>
|
||||
</block>
|
||||
<block v-if="!type2d">
|
||||
<view v-if="ontouch" @click="tap">
|
||||
<view v-if="ontouch" @tap="_tap">
|
||||
<canvas :id="cid" :canvasId="cid"
|
||||
:style="{ width: cWidth + 'rpx', height: cHeight + 'rpx', background: background }"
|
||||
@touchstart="_touchStart" @touchmove="_touchMove" @touchend="_touchEnd" :disable-scroll="disScroll"
|
||||
|
|
@ -40,7 +40,7 @@
|
|||
<view v-if="!ontouch">
|
||||
<canvas :id="cid" :canvasId="cid"
|
||||
:style="{ width: cWidth + 'rpx', height: cHeight + 'rpx', background: background }"
|
||||
:disable-scroll="disScroll" @click="tap" @error="_error" v-show="showchart" />
|
||||
:disable-scroll="disScroll" @tap="_tap" @error="_error" v-show="showchart" />
|
||||
</view>
|
||||
</block>
|
||||
</view>
|
||||
|
|
@ -261,7 +261,7 @@
|
|||
},
|
||||
cHeight: {
|
||||
type: Number,
|
||||
default: 700
|
||||
default: 600
|
||||
},
|
||||
cWidth: {
|
||||
type: Number,
|
||||
|
|
@ -357,8 +357,8 @@
|
|||
this.echarts = true;
|
||||
}
|
||||
// #endif
|
||||
this.cWidth = this.cWidth ? this.cWidth : uni.upx2px(640);
|
||||
this.cHeight = this.cHeight ? this.cHeight : uni.upx2px(500);
|
||||
this.cWidth = this.cWidth ? this.cWidth : uni.upx2px(600);
|
||||
this.cHeight = this.cHeight ? this.cHeight : uni.upx2px(600);
|
||||
this.$nextTick(() => {
|
||||
this.beforeInit();
|
||||
})
|
||||
|
|
@ -749,7 +749,6 @@
|
|||
}
|
||||
},
|
||||
init() {
|
||||
let that = this
|
||||
let cid = this.cid
|
||||
let chartdom = uni
|
||||
.createSelectorQuery()
|
||||
|
|
@ -808,15 +807,15 @@
|
|||
if (cfu.instance[cid]) {
|
||||
cfu.option[cid].context.restore();
|
||||
cfu.option[cid].context.save();
|
||||
that._updataUChart(cid)
|
||||
this._updataUChart(cid)
|
||||
} else {
|
||||
setTimeout(() => {
|
||||
that._newChart(cid)
|
||||
this._newChart(cid)
|
||||
}, 100)
|
||||
}
|
||||
} else {
|
||||
that.showchart = false;
|
||||
that.mixinDatacomErrorMessage =
|
||||
this.showchart = false;
|
||||
this.mixinDatacomErrorMessage =
|
||||
'参数错误：开启2d模式后，未获取到dom节点，canvas-id:' + cid;
|
||||
}
|
||||
});
|
||||
|
|
@ -829,7 +828,7 @@
|
|||
this._updataUChart(cid)
|
||||
} else {
|
||||
setTimeout(() => {
|
||||
that._newChart(cid)
|
||||
this._newChart(cid)
|
||||
}, 100)
|
||||
}
|
||||
}
|
||||
|
|
@ -966,7 +965,7 @@
|
|||
});
|
||||
}
|
||||
},
|
||||
tap(e, move) {
|
||||
_tap(e, move) {
|
||||
let cid = this.cid
|
||||
let currentIndex = null;
|
||||
let legendIndex = null;
|
||||
|
|
@ -1086,7 +1085,7 @@
|
|||
}
|
||||
});
|
||||
if (this.ontap === true && cfu.option[cid].enableScroll === false && this.onmovetip === true) {
|
||||
this.tap(e, true)
|
||||
this._tap(e, true)
|
||||
}
|
||||
},
|
||||
_touchEnd(e) {
|
||||
|
|
@ -1103,7 +1102,7 @@
|
|||
}
|
||||
});
|
||||
if (this.ontap === true && cfu.option[cid].enableScroll === false && this.onmovetip === true) {
|
||||
this.tap(e, true)
|
||||
this._tap(e, true)
|
||||
}
|
||||
},
|
||||
// #endif
|
||||
|
|
|
|||
|
|
@ -137,30 +137,31 @@ module.exports = {
|
|||
"color": color,
|
||||
"padding": [5, 5, 5, 5],
|
||||
"rotate": false,
|
||||
"dataLabel": true,
|
||||
"dataLabel": false,
|
||||
"legend": {
|
||||
"show": true,
|
||||
"show": false,
|
||||
"position": "right",
|
||||
"lineHeight": 25,
|
||||
},
|
||||
"title": {
|
||||
"name": "收益率",
|
||||
"fontSize": 15,
|
||||
"name": "",
|
||||
"fontSize": 22,
|
||||
"color": "#666666"
|
||||
},
|
||||
"subtitle": {
|
||||
"name": "70%",
|
||||
"fontSize": 25,
|
||||
"color": "#7cb5ec"
|
||||
"name": "kcal",
|
||||
"fontSize": 14,
|
||||
"offsetY": 8,
|
||||
"color": "#888888"
|
||||
},
|
||||
"extra": {
|
||||
"ring": {
|
||||
"ringWidth": 30,
|
||||
"ringWidth": 10,
|
||||
"activeOpacity": 0.5,
|
||||
"activeRadius": 10,
|
||||
"offsetAngle": 0,
|
||||
"labelWidth": 15,
|
||||
"border": true,
|
||||
"labelWidth": 0,
|
||||
"border": false,
|
||||
"borderWidth": 3,
|
||||
"borderColor": "#FFFFFF"
|
||||
},
|
||||
|
|
@ -247,8 +248,8 @@ module.exports = {
|
|||
},
|
||||
"extra": {
|
||||
"arcbar": {
|
||||
"type": "default",
|
||||
"width": 12,
|
||||
"type": "circle",
|
||||
"width": 8,
|
||||
"backgroundColor": "#E9E9E9",
|
||||
"startAngle": 0.75,
|
||||
"endAngle": 0.25,
|
||||
|
|
|
|||
|
|
@ -108,7 +108,7 @@
|
|||
<style lang="scss" scoped>
|
||||
$uni-mask: rgba($color: #000000, $alpha: 0.4) ;
|
||||
// 抽屉宽度
|
||||
$drawer-width: 220px;
|
||||
$drawer-width: 240rpx;
|
||||
|
||||
.uni-drawer {
|
||||
/* #ifndef APP-NVUE */
|
||||
|
|
|
|||
|
|
@ -634,7 +634,7 @@
|
|||
|
||||
.uni-file-picker__header {
|
||||
padding-top: 5px;
|
||||
padding-bottom: 10px;
|
||||
padding-bottom: 20rpx;
|
||||
/* #ifndef APP-NVUE */
|
||||
display: flex;
|
||||
/* #endif */
|
||||
|
|
@ -660,7 +660,7 @@
|
|||
}
|
||||
|
||||
.icon-add {
|
||||
width: 50px;
|
||||
width: 100rpx;
|
||||
height: 5px;
|
||||
background-color: #f1f1f1;
|
||||
border-radius: 2px;
|
||||
|
|
|
|||
|
|
@ -220,9 +220,9 @@
|
|||
display: flex;
|
||||
/* #endif */
|
||||
align-items: center;
|
||||
padding: 8px 10px;
|
||||
padding: 8px 20rpx;
|
||||
padding-right: 5px;
|
||||
padding-left: 10px;
|
||||
padding-left: 20rpx;
|
||||
}
|
||||
|
||||
.files-border {
|
||||
|
|
@ -233,7 +233,7 @@
|
|||
flex: 1;
|
||||
font-size: 14px;
|
||||
color: #666;
|
||||
margin-right: 25px;
|
||||
margin-right: 50rpx;
|
||||
/* #ifndef APP-NVUE */
|
||||
word-break: break-all;
|
||||
word-wrap: break-word;
|
||||
|
|
@ -249,7 +249,7 @@
|
|||
|
||||
// .icon-files .icon-del {
|
||||
// background-color: #333;
|
||||
// width: 12px;
|
||||
// width: 24rpx;
|
||||
// height: 1px;
|
||||
// }
|
||||
|
||||
|
|
@ -263,9 +263,9 @@
|
|||
}
|
||||
|
||||
.files__image {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
margin-right: 10px;
|
||||
width: 80rpx;
|
||||
height: 80rpx;
|
||||
margin-right: 20rpx;
|
||||
}
|
||||
|
||||
.header-image {
|
||||
|
|
@ -279,8 +279,8 @@
|
|||
}
|
||||
|
||||
.is-text-image {
|
||||
width: 25px;
|
||||
height: 25px;
|
||||
width: 50rpx;
|
||||
height: 50rpx;
|
||||
margin-left: 5px;
|
||||
}
|
||||
|
||||
|
|
@ -309,7 +309,7 @@
|
|||
}
|
||||
|
||||
.icon-del {
|
||||
width: 15px;
|
||||
width: 30rpx;
|
||||
height: 1px;
|
||||
background-color: #333;
|
||||
// border-radius: 1px;
|
||||
|
|
|
|||
|
|
@ -208,7 +208,7 @@
|
|||
left: 0;
|
||||
// margin: 5px;
|
||||
// border: 1px #eee solid;
|
||||
border-radius: 10px;
|
||||
border-radius: 20rpx;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
|
|
@ -237,7 +237,7 @@
|
|||
bottom: 0;
|
||||
left: 0;
|
||||
color: #fff;
|
||||
font-size: 12px;
|
||||
font-size: 24rpx;
|
||||
background-color: rgba(0, 0, 0, 0.4);
|
||||
}
|
||||
|
||||
|
|
@ -255,7 +255,7 @@
|
|||
}
|
||||
|
||||
.icon-add {
|
||||
width: 50px;
|
||||
width: 100rpx;
|
||||
height: 5px;
|
||||
background-color: #f1f1f1;
|
||||
border-radius: 2px;
|
||||
|
|
@ -284,7 +284,7 @@
|
|||
}
|
||||
|
||||
.icon-del {
|
||||
width: 15px;
|
||||
width: 30rpx;
|
||||
height: 2px;
|
||||
background-color: #fff;
|
||||
border-radius: 2px;
|
||||
|
|
|
|||
|
|
@ -0,0 +1,102 @@
|
|||
## 1.9.11（2025-08-20）
|
||||
- 修复 uni-popup-dialog组件设置 borderRadius 不生效的 Bug
|
||||
## 1.9.10（2025-07-18）
|
||||
- 修复 nvue 下弹窗样式错乱的问题 ，更新依赖 uni-transition 组件
|
||||
- 更新 示例取消 borderRadius 属性 ，如需内容圆角，用户应该直接在内容插槽中实现
|
||||
## 1.9.9（2025-06-11）
|
||||
- 修复 uni-popup-dialog 中 setVal 方法报错的问题
|
||||
- 修复 uni-popup-dialog 数据双向绑定问题。
|
||||
## 1.9.8（2025-04-16）
|
||||
- 修复 更新组件示例 ，解决更新数据或保存项目导致弹窗消失的问题
|
||||
## 1.9.7（2025-04-14）
|
||||
- 修复 uni-popup-dialog 弹出框在vue3中双向绑定问题
|
||||
## 1.9.6（2025-01-08）
|
||||
- 修复 示例中过期图片地址
|
||||
## 1.9.5（2024-10-15）
|
||||
- 修复 微信小程序中的getSystemInfo警告
|
||||
## 1.9.2（2024-09-21）
|
||||
- 修复 uni-popup在android上的重复点击弹出位置不正确的bug
|
||||
## 1.9.1（2024-04-02）
|
||||
- 修复 uni-popup-dialog vue3下使用value无法进行绑定的bug(双向绑定兼容旧写法)
|
||||
## 1.9.0（2024-03-28）
|
||||
- 修复 uni-popup-dialog 双向绑定时初始化逻辑修正
|
||||
## 1.8.9（2024-03-20）
|
||||
- 修复 uni-popup-dialog 数据输入时修正为双向绑定
|
||||
## 1.8.8（2024-02-20）
|
||||
- 修复 uni-popup 在微信小程序下出现文字向上闪动的bug
|
||||
## 1.8.7（2024-02-02）
|
||||
- 新增 uni-popup-dialog 新增属性focus：input模式下，是否自动自动聚焦
|
||||
## 1.8.6（2024-01-30）
|
||||
- 新增 uni-popup-dialog 新增属性maxLength:限制输入框字数
|
||||
## 1.8.5（2024-01-26）
|
||||
- 新增 uni-popup-dialog 新增属性showClose:控制关闭按钮的显示
|
||||
## 1.8.4（2023-11-15）
|
||||
- 新增 uni-popup 支持uni-app-x 注意暂时仅支持 `maskClick` `@open` `@close`
|
||||
## 1.8.3（2023-04-17）
|
||||
- 修复 uni-popup 重复打开时的 bug
|
||||
## 1.8.2（2023-02-02）
|
||||
- uni-popup-dialog 组件新增 inputType 属性
|
||||
## 1.8.1（2022-12-01）
|
||||
- 修复 nvue 下 v-show 报错
|
||||
## 1.8.0（2022-11-29）
|
||||
- 优化 主题样式
|
||||
## 1.7.9（2022-04-02）
|
||||
- 修复 弹出层内部无法滚动的bug
|
||||
## 1.7.8（2022-03-28）
|
||||
- 修复 小程序中高度错误的bug
|
||||
## 1.7.7（2022-03-17）
|
||||
- 修复 快速调用open出现问题的Bug
|
||||
## 1.7.6（2022-02-14）
|
||||
- 修复 safeArea 属性不能设置为false的bug
|
||||
## 1.7.5（2022-01-19）
|
||||
- 修复 isMaskClick 失效的bug
|
||||
## 1.7.4（2022-01-19）
|
||||
- 新增 cancelText \ confirmText 属性 ，可自定义文本
|
||||
- 新增 maskBackgroundColor 属性 ，可以修改蒙版颜色
|
||||
- 优化 maskClick属性 更新为 isMaskClick ，解决微信小程序警告的问题
|
||||
## 1.7.3（2022-01-13）
|
||||
- 修复 设置 safeArea 属性不生效的bug
|
||||
## 1.7.2（2021-11-26）
|
||||
- 优化 组件示例
|
||||
## 1.7.1（2021-11-26）
|
||||
- 修复 vuedoc 文字错误
|
||||
## 1.7.0（2021-11-19）
|
||||
- 优化 组件UI，并提供设计资源，详见:[https://uniapp.dcloud.io/component/uniui/resource](https://uniapp.dcloud.io/component/uniui/resource)
|
||||
- 文档迁移，详见:[https://uniapp.dcloud.io/component/uniui/uni-popup](https://uniapp.dcloud.io/component/uniui/uni-popup)
|
||||
## 1.6.2（2021-08-24）
|
||||
- 新增 支持国际化
|
||||
## 1.6.1（2021-07-30）
|
||||
- 优化 vue3下事件警告的问题
|
||||
## 1.6.0（2021-07-13）
|
||||
- 组件兼容 vue3，如何创建vue3项目，详见 [uni-app 项目支持 vue3 介绍](https://ask.dcloud.net.cn/article/37834)
|
||||
## 1.5.0（2021-06-23）
|
||||
- 新增 mask-click 遮罩层点击事件
|
||||
## 1.4.5（2021-06-22）
|
||||
- 修复 nvue 平台中间弹出后，点击内容，再点击遮罩无法关闭的Bug
|
||||
## 1.4.4（2021-06-18）
|
||||
- 修复 H5平台中间弹出后，点击内容，再点击遮罩无法关闭的Bug
|
||||
## 1.4.3（2021-06-08）
|
||||
- 修复 错误的 watch 字段
|
||||
- 修复 safeArea 属性不生效的问题
|
||||
- 修复 点击内容，再点击遮罩无法关闭的Bug
|
||||
## 1.4.2（2021-05-12）
|
||||
- 新增 组件示例地址
|
||||
## 1.4.1（2021-04-29）
|
||||
- 修复 组件内放置 input 、textarea 组件，无法聚焦的问题
|
||||
## 1.4.0 （2021-04-29）
|
||||
- 新增 type 属性的 left\right 值，支持左右弹出
|
||||
- 新增 open(String:type) 方法参数 ，可以省略 type 属性 ，直接传入类型打开指定弹窗
|
||||
- 新增 backgroundColor 属性，可定义主窗口背景色,默认不显示背景色
|
||||
- 新增 safeArea 属性，是否适配底部安全区
|
||||
- 修复 App\h5\微信小程序底部安全区占位不对的Bug
|
||||
- 修复 App 端弹出等待的Bug
|
||||
- 优化 提升低配设备性能，优化动画卡顿问题
|
||||
- 优化 更简单的组件自定义方式
|
||||
## 1.2.9（2021-02-05）
|
||||
- 优化 组件引用关系，通过uni_modules引用组件
|
||||
## 1.2.8（2021-02-05）
|
||||
- 调整为uni_modules目录规范
|
||||
## 1.2.7（2021-02-05）
|
||||
- 调整为uni_modules目录规范
|
||||
- 新增 支持 PC 端
|
||||
- 新增 uni-popup-message 、uni-popup-dialog扩展组件支持 PC 端
|
||||
|
|
@ -0,0 +1,45 @@
|
|||
// #ifdef H5
|
||||
export default {
|
||||
name: 'Keypress',
|
||||
props: {
|
||||
disable: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
}
|
||||
},
|
||||
mounted () {
|
||||
const keyNames = {
|
||||
esc: ['Esc', 'Escape'],
|
||||
tab: 'Tab',
|
||||
enter: 'Enter',
|
||||
space: [' ', 'Spacebar'],
|
||||
up: ['Up', 'ArrowUp'],
|
||||
left: ['Left', 'ArrowLeft'],
|
||||
right: ['Right', 'ArrowRight'],
|
||||
down: ['Down', 'ArrowDown'],
|
||||
delete: ['Backspace', 'Delete', 'Del']
|
||||
}
|
||||
const listener = ($event) => {
|
||||
if (this.disable) {
|
||||
return
|
||||
}
|
||||
const keyName = Object.keys(keyNames).find(key => {
|
||||
const keyName = $event.key
|
||||
const value = keyNames[key]
|
||||
return value === keyName || (Array.isArray(value) && value.includes(keyName))
|
||||
})
|
||||
if (keyName) {
|
||||
// 避免和其他按键事件冲突
|
||||
setTimeout(() => {
|
||||
this.$emit(keyName, {})
|
||||
}, 0)
|
||||
}
|
||||
}
|
||||
document.addEventListener('keyup', listener)
|
||||
this.$once('hook:beforeDestroy', () => {
|
||||
document.removeEventListener('keyup', listener)
|
||||
})
|
||||
},
|
||||
render: () => {}
|
||||
}
|
||||
// #endif
|
||||
|
|
@ -0,0 +1,330 @@
|
|||
<template>
|
||||
<view class="uni-popup-dialog" :style="{ borderRadius }">
|
||||
<view class="uni-dialog-title">
|
||||
<text class="uni-dialog-title-text" :class="['uni-popup__'+dialogType]">{{titleText}}</text>
|
||||
</view>
|
||||
<view v-if="mode === 'base'" class="uni-dialog-content">
|
||||
<slot>
|
||||
<text class="uni-dialog-content-text">{{content}}</text>
|
||||
</slot>
|
||||
</view>
|
||||
<view v-else class="uni-dialog-content">
|
||||
<slot>
|
||||
<input class="uni-dialog-input" :maxlength="maxlength" v-model="val" :type="inputType"
|
||||
:placeholder="placeholderText" :focus="focus">
|
||||
</slot>
|
||||
</view>
|
||||
<view class="uni-dialog-button-group">
|
||||
<view class="uni-dialog-button" v-if="showClose" @click="closeDialog">
|
||||
<text class="uni-dialog-button-text">{{closeText}}</text>
|
||||
</view>
|
||||
<view class="uni-dialog-button" :class="showClose?'uni-border-left':''" @click="onOk">
|
||||
<text class="uni-dialog-button-text uni-button-color">{{okText}}</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import popup from '../uni-popup/popup.js'
|
||||
import {
|
||||
initVueI18n
|
||||
} from '@dcloudio/uni-i18n'
|
||||
import messages from '../uni-popup/i18n/index.js'
|
||||
const {
|
||||
t
|
||||
} = initVueI18n(messages)
|
||||
/**
|
||||
* PopUp 弹出层-对话框样式
|
||||
* @description 弹出层-对话框样式
|
||||
* @tutorial https://ext.dcloud.net.cn/plugin?id=329
|
||||
* @property {String} value input 模式下的默认值
|
||||
* @property {String} placeholder input 模式下输入提示
|
||||
* @property {Boolean} focus input模式下是否自动聚焦，默认为true
|
||||
* @property {String} type = [success|warning|info|error] 主题样式
|
||||
* @value success 成功
|
||||
* @value warning 提示
|
||||
* @value info 消息
|
||||
* @value error 错误
|
||||
* @property {String} mode = [base|input] 模式、
|
||||
* @value base 基础对话框
|
||||
* @value input 可输入对话框
|
||||
* @showClose {Boolean} 是否显示关闭按钮
|
||||
* @property {String} content 对话框内容
|
||||
* @property {Boolean} beforeClose 是否拦截取消事件
|
||||
* @property {Number} maxlength 输入
|
||||
* @event {Function} confirm 点击确认按钮触发
|
||||
* @event {Function} close 点击取消按钮触发
|
||||
*/
|
||||
|
||||
export default {
|
||||
name: "uniPopupDialog",
|
||||
mixins: [popup],
|
||||
emits: ['confirm', 'close', 'update:modelValue', 'input'],
|
||||
props: {
|
||||
inputType: {
|
||||
type: String,
|
||||
default: 'text'
|
||||
},
|
||||
showClose: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
// #ifdef VUE2
|
||||
value: {
|
||||
type: [String, Number],
|
||||
default: ''
|
||||
},
|
||||
// #endif
|
||||
// #ifdef VUE3
|
||||
modelValue: {
|
||||
type: [Number, String],
|
||||
default: ''
|
||||
},
|
||||
// #endif
|
||||
|
||||
|
||||
placeholder: {
|
||||
type: [String, Number],
|
||||
default: ''
|
||||
},
|
||||
type: {
|
||||
type: String,
|
||||
default: 'error'
|
||||
},
|
||||
mode: {
|
||||
type: String,
|
||||
default: 'base'
|
||||
},
|
||||
title: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
content: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
beforeClose: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
cancelText: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
confirmText: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
maxlength: {
|
||||
type: Number,
|
||||
default: -1,
|
||||
},
|
||||
focus: {
|
||||
type: Boolean,
|
||||
default: true,
|
||||
},
|
||||
borderRadius: {
|
||||
type: String,
|
||||
default: '11px',
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
dialogType: 'error',
|
||||
val: ""
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
okText() {
|
||||
return this.confirmText || t("uni-popup.ok")
|
||||
},
|
||||
closeText() {
|
||||
return this.cancelText || t("uni-popup.cancel")
|
||||
},
|
||||
placeholderText() {
|
||||
return this.placeholder || t("uni-popup.placeholder")
|
||||
},
|
||||
titleText() {
|
||||
return this.title || t("uni-popup.title")
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
type(val) {
|
||||
this.dialogType = val
|
||||
},
|
||||
mode(val) {
|
||||
if (val === 'input') {
|
||||
this.dialogType = 'info'
|
||||
}
|
||||
},
|
||||
value(val) {
|
||||
this.setVal(val)
|
||||
},
|
||||
// #ifdef VUE3
|
||||
modelValue(val) {
|
||||
this.setVal(val)
|
||||
},
|
||||
// #endif
|
||||
val(val) {
|
||||
// #ifdef VUE2
|
||||
// TODO 兼容 vue2
|
||||
this.$emit('input', val);
|
||||
// #endif
|
||||
// #ifdef VUE3
|
||||
// TODO 兼容 vue3
|
||||
this.$emit('update:modelValue', val);
|
||||
// #endif
|
||||
}
|
||||
},
|
||||
created() {
|
||||
// 对话框遮罩不可点击
|
||||
this.popup.disableMask()
|
||||
// this.popup.closeMask()
|
||||
if (this.mode === 'input') {
|
||||
this.dialogType = 'info'
|
||||
this.val = this.value;
|
||||
// #ifdef VUE3
|
||||
this.val = this.modelValue;
|
||||
// #endif
|
||||
} else {
|
||||
this.dialogType = this.type
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
/**
|
||||
* 给val属性赋值
|
||||
*/
|
||||
setVal(val) {
|
||||
if (this.maxlength != -1 && this.mode === 'input') {
|
||||
this.val = val.slice(0, this.maxlength);
|
||||
} else {
|
||||
this.val = val
|
||||
}
|
||||
},
|
||||
/**
|
||||
* 点击确认按钮
|
||||
*/
|
||||
onOk() {
|
||||
if (this.mode === 'input') {
|
||||
this.$emit('confirm', this.val)
|
||||
} else {
|
||||
this.$emit('confirm')
|
||||
}
|
||||
if (this.beforeClose) return
|
||||
this.popup.close()
|
||||
},
|
||||
/**
|
||||
* 点击取消按钮
|
||||
*/
|
||||
closeDialog() {
|
||||
this.$emit('close')
|
||||
if (this.beforeClose) return
|
||||
this.popup.close()
|
||||
},
|
||||
close() {
|
||||
this.popup.close()
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.uni-popup-dialog {
|
||||
width: 300px;
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
.uni-dialog-title {
|
||||
/* #ifndef APP-NVUE */
|
||||
display: flex;
|
||||
/* #endif */
|
||||
flex-direction: row;
|
||||
justify-content: center;
|
||||
padding-top: 25px;
|
||||
}
|
||||
|
||||
.uni-dialog-title-text {
|
||||
font-size: 16px;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.uni-dialog-content {
|
||||
/* #ifndef APP-NVUE */
|
||||
display: flex;
|
||||
/* #endif */
|
||||
flex-direction: row;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
.uni-dialog-content-text {
|
||||
font-size: 14px;
|
||||
color: #6C6C6C;
|
||||
}
|
||||
|
||||
.uni-dialog-button-group {
|
||||
/* #ifndef APP-NVUE */
|
||||
display: flex;
|
||||
/* #endif */
|
||||
flex-direction: row;
|
||||
border-top-color: #f5f5f5;
|
||||
border-top-style: solid;
|
||||
border-top-width: 1px;
|
||||
}
|
||||
|
||||
.uni-dialog-button {
|
||||
/* #ifndef APP-NVUE */
|
||||
display: flex;
|
||||
/* #endif */
|
||||
|
||||
flex: 1;
|
||||
flex-direction: row;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
height: 45px;
|
||||
}
|
||||
|
||||
.uni-border-left {
|
||||
border-left-color: #f0f0f0;
|
||||
border-left-style: solid;
|
||||
border-left-width: 1px;
|
||||
}
|
||||
|
||||
.uni-dialog-button-text {
|
||||
font-size: 16px;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.uni-button-color {
|
||||
color: #007aff;
|
||||
}
|
||||
|
||||
.uni-dialog-input {
|
||||
flex: 1;
|
||||
font-size: 14px;
|
||||
border: 1px #eee solid;
|
||||
height: 40px;
|
||||
padding: 0 10px;
|
||||
border-radius: 5px;
|
||||
color: #555;
|
||||
}
|
||||
|
||||
.uni-popup__success {
|
||||
color: #4cd964;
|
||||
}
|
||||
|
||||
.uni-popup__warn {
|
||||
color: #f0ad4e;
|
||||
}
|
||||
|
||||
.uni-popup__error {
|
||||
color: #dd524d;
|
||||
}
|
||||
|
||||
.uni-popup__info {
|
||||
color: #909399;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,143 @@
|
|||
<template>
|
||||
<view class="uni-popup-message">
|
||||
<view class="uni-popup-message__box fixforpc-width" :class="'uni-popup__'+type">
|
||||
<slot>
|
||||
<text class="uni-popup-message-text" :class="'uni-popup__'+type+'-text'">{{message}}</text>
|
||||
</slot>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import popup from '../uni-popup/popup.js'
|
||||
/**
|
||||
* PopUp 弹出层-消息提示
|
||||
* @description 弹出层-消息提示
|
||||
* @tutorial https://ext.dcloud.net.cn/plugin?id=329
|
||||
* @property {String} type = [success|warning|info|error] 主题样式
|
||||
* @value success 成功
|
||||
* @value warning 提示
|
||||
* @value info 消息
|
||||
* @value error 错误
|
||||
* @property {String} message 消息提示文字
|
||||
* @property {String} duration 显示时间，设置为 0 则不会自动关闭
|
||||
*/
|
||||
|
||||
export default {
|
||||
name: 'uniPopupMessage',
|
||||
mixins:[popup],
|
||||
props: {
|
||||
/**
|
||||
* 主题 success/warning/info/error 默认 success
|
||||
*/
|
||||
type: {
|
||||
type: String,
|
||||
default: 'success'
|
||||
},
|
||||
/**
|
||||
* 消息文字
|
||||
*/
|
||||
message: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
/**
|
||||
* 显示时间，设置为 0 则不会自动关闭
|
||||
*/
|
||||
duration: {
|
||||
type: Number,
|
||||
default: 3000
|
||||
},
|
||||
maskShow:{
|
||||
type:Boolean,
|
||||
default:false
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {}
|
||||
},
|
||||
created() {
|
||||
this.popup.maskShow = this.maskShow
|
||||
this.popup.messageChild = this
|
||||
},
|
||||
methods: {
|
||||
timerClose(){
|
||||
if(this.duration === 0) return
|
||||
clearTimeout(this.timer)
|
||||
this.timer = setTimeout(()=>{
|
||||
this.popup.close()
|
||||
},this.duration)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style lang="scss" >
|
||||
.uni-popup-message {
|
||||
/* #ifndef APP-NVUE */
|
||||
display: flex;
|
||||
/* #endif */
|
||||
flex-direction: row;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.uni-popup-message__box {
|
||||
background-color: #e1f3d8;
|
||||
padding: 10px 15px;
|
||||
border-color: #eee;
|
||||
border-style: solid;
|
||||
border-width: 1px;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
@media screen and (min-width: 500px) {
|
||||
.fixforpc-width {
|
||||
margin-top: 20px;
|
||||
border-radius: 4px;
|
||||
flex: none;
|
||||
min-width: 380px;
|
||||
/* #ifndef APP-NVUE */
|
||||
max-width: 50%;
|
||||
/* #endif */
|
||||
/* #ifdef APP-NVUE */
|
||||
max-width: 500px;
|
||||
/* #endif */
|
||||
}
|
||||
}
|
||||
|
||||
.uni-popup-message-text {
|
||||
font-size: 14px;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.uni-popup__success {
|
||||
background-color: #e1f3d8;
|
||||
}
|
||||
|
||||
.uni-popup__success-text {
|
||||
color: #67C23A;
|
||||
}
|
||||
|
||||
.uni-popup__warn {
|
||||
background-color: #faecd8;
|
||||
}
|
||||
|
||||
.uni-popup__warn-text {
|
||||
color: #E6A23C;
|
||||
}
|
||||
|
||||
.uni-popup__error {
|
||||
background-color: #fde2e2;
|
||||
}
|
||||
|
||||
.uni-popup__error-text {
|
||||
color: #F56C6C;
|
||||
}
|
||||
|
||||
.uni-popup__info {
|
||||
background-color: #F2F6FC;
|
||||
}
|
||||
|
||||
.uni-popup__info-text {
|
||||
color: #909399;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,188 @@
|
|||
<template>
|
||||
<view class="uni-popup-share">
|
||||
<view class="uni-share-title"><text class="uni-share-title-text">{{shareTitleText}}</text></view>
|
||||
<view class="uni-share-content">
|
||||
<view class="uni-share-content-box">
|
||||
<view class="uni-share-content-item" v-for="(item,index) in bottomData" :key="index" @click.stop="select(item,index)">
|
||||
<image class="uni-share-image" :src="item.icon" mode="aspectFill"></image>
|
||||
<text class="uni-share-text">{{item.text}}</text>
|
||||
</view>
|
||||
|
||||
</view>
|
||||
</view>
|
||||
<view class="uni-share-button-box">
|
||||
<button class="uni-share-button" @click="close">{{cancelText}}</button>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import popup from '../uni-popup/popup.js'
|
||||
import {
|
||||
initVueI18n
|
||||
} from '@dcloudio/uni-i18n'
|
||||
import messages from '../uni-popup/i18n/index.js'
|
||||
const { t } = initVueI18n(messages)
|
||||
export default {
|
||||
name: 'UniPopupShare',
|
||||
mixins:[popup],
|
||||
emits:['select'],
|
||||
props: {
|
||||
title: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
beforeClose: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
// TODO 替换为自己的图标
|
||||
bottomData: [{
|
||||
text: '微信',
|
||||
icon: 'https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/unicloudlogo.png',
|
||||
name: 'wx'
|
||||
},
|
||||
{
|
||||
text: '支付宝',
|
||||
icon: 'https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/unicloudlogo.png',
|
||||
name: 'ali'
|
||||
},
|
||||
{
|
||||
text: 'QQ',
|
||||
icon: 'https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/unicloudlogo.png',
|
||||
name: 'qq'
|
||||
},
|
||||
{
|
||||
text: '新浪',
|
||||
icon: 'https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/unicloudlogo.png',
|
||||
name: 'sina'
|
||||
},
|
||||
// {
|
||||
// text: '百度',
|
||||
// icon: 'https://vkceyugu.cdn.bspapp.com/VKCEYUGU-dc-site/1ec6e920-50bf-11eb-8a36-ebb87efcf8c0.png',
|
||||
// name: 'copy'
|
||||
// },
|
||||
// {
|
||||
// text: '其他',
|
||||
// icon: 'https://vkceyugu.cdn.bspapp.com/VKCEYUGU-dc-site/2e0fdfe0-50bf-11eb-b997-9918a5dda011.png',
|
||||
// name: 'more'
|
||||
// }
|
||||
]
|
||||
}
|
||||
},
|
||||
created() {},
|
||||
computed: {
|
||||
cancelText() {
|
||||
return t("uni-popup.cancel")
|
||||
},
|
||||
shareTitleText() {
|
||||
return this.title || t("uni-popup.shareTitle")
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
/**
|
||||
* 选择内容
|
||||
*/
|
||||
select(item, index) {
|
||||
this.$emit('select', {
|
||||
item,
|
||||
index
|
||||
})
|
||||
this.close()
|
||||
|
||||
},
|
||||
/**
|
||||
* 关闭窗口
|
||||
*/
|
||||
close() {
|
||||
if(this.beforeClose) return
|
||||
this.popup.close()
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style lang="scss" >
|
||||
.uni-popup-share {
|
||||
background-color: #fff;
|
||||
border-top-left-radius: 11px;
|
||||
border-top-right-radius: 11px;
|
||||
}
|
||||
.uni-share-title {
|
||||
/* #ifndef APP-NVUE */
|
||||
display: flex;
|
||||
/* #endif */
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
height: 40px;
|
||||
}
|
||||
.uni-share-title-text {
|
||||
font-size: 14px;
|
||||
color: #666;
|
||||
}
|
||||
.uni-share-content {
|
||||
/* #ifndef APP-NVUE */
|
||||
display: flex;
|
||||
/* #endif */
|
||||
flex-direction: row;
|
||||
justify-content: center;
|
||||
padding-top: 10px;
|
||||
}
|
||||
|
||||
.uni-share-content-box {
|
||||
/* #ifndef APP-NVUE */
|
||||
display: flex;
|
||||
/* #endif */
|
||||
flex-direction: row;
|
||||
flex-wrap: wrap;
|
||||
width: 360px;
|
||||
}
|
||||
|
||||
.uni-share-content-item {
|
||||
width: 90px;
|
||||
/* #ifndef APP-NVUE */
|
||||
display: flex;
|
||||
/* #endif */
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
padding: 10px 0;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.uni-share-content-item:active {
|
||||
background-color: #f5f5f5;
|
||||
}
|
||||
|
||||
.uni-share-image {
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
}
|
||||
|
||||
.uni-share-text {
|
||||
margin-top: 10px;
|
||||
font-size: 14px;
|
||||
color: #3B4144;
|
||||
}
|
||||
|
||||
.uni-share-button-box {
|
||||
/* #ifndef APP-NVUE */
|
||||
display: flex;
|
||||
/* #endif */
|
||||
flex-direction: row;
|
||||
padding: 10px 15px;
|
||||
}
|
||||
|
||||
.uni-share-button {
|
||||
flex: 1;
|
||||
border-radius: 50px;
|
||||
color: #666;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.uni-share-button::after {
|
||||
border-radius: 50px;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,7 @@
|
|||
{
|
||||
"uni-popup.cancel": "cancel",
|
||||
"uni-popup.ok": "ok",
|
||||
"uni-popup.placeholder": "pleace enter",
|
||||
"uni-popup.title": "Hint",
|
||||
"uni-popup.shareTitle": "Share to"
|
||||
}
|
||||
|
|
@ -0,0 +1,8 @@
|
|||
import en from './en.json'
|
||||
import zhHans from './zh-Hans.json'
|
||||
import zhHant from './zh-Hant.json'
|
||||
export default {
|
||||
en,
|
||||
'zh-Hans': zhHans,
|
||||
'zh-Hant': zhHant
|
||||
}
|
||||
|
|
@ -0,0 +1,7 @@
|
|||
{
|
||||
"uni-popup.cancel": "取消",
|
||||
"uni-popup.ok": "确定",
|
||||
"uni-popup.placeholder": "请输入",
|
||||
"uni-popup.title": "提示",
|
||||
"uni-popup.shareTitle": "分享到"
|
||||
}
|
||||
|
|
@ -0,0 +1,7 @@
|
|||
{
|
||||
"uni-popup.cancel": "取消",
|
||||
"uni-popup.ok": "確定",
|
||||
"uni-popup.placeholder": "請輸入",
|
||||
"uni-popup.title": "提示",
|
||||
"uni-popup.shareTitle": "分享到"
|
||||
}
|
||||
|
|
@ -0,0 +1,45 @@
|
|||
// #ifdef H5
|
||||
export default {
|
||||
name: 'Keypress',
|
||||
props: {
|
||||
disable: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
}
|
||||
},
|
||||
mounted () {
|
||||
const keyNames = {
|
||||
esc: ['Esc', 'Escape'],
|
||||
tab: 'Tab',
|
||||
enter: 'Enter',
|
||||
space: [' ', 'Spacebar'],
|
||||
up: ['Up', 'ArrowUp'],
|
||||
left: ['Left', 'ArrowLeft'],
|
||||
right: ['Right', 'ArrowRight'],
|
||||
down: ['Down', 'ArrowDown'],
|
||||
delete: ['Backspace', 'Delete', 'Del']
|
||||
}
|
||||
const listener = ($event) => {
|
||||
if (this.disable) {
|
||||
return
|
||||
}
|
||||
const keyName = Object.keys(keyNames).find(key => {
|
||||
const keyName = $event.key
|
||||
const value = keyNames[key]
|
||||
return value === keyName || (Array.isArray(value) && value.includes(keyName))
|
||||
})
|
||||
if (keyName) {
|
||||
// 避免和其他按键事件冲突
|
||||
setTimeout(() => {
|
||||
this.$emit(keyName, {})
|
||||
}, 0)
|
||||
}
|
||||
}
|
||||
document.addEventListener('keyup', listener)
|
||||
// this.$once('hook:beforeDestroy', () => {
|
||||
// document.removeEventListener('keyup', listener)
|
||||
// })
|
||||
},
|
||||
render: () => {}
|
||||
}
|
||||
// #endif
|
||||
|
|
@ -0,0 +1,26 @@
|
|||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
|
||||
}
|
||||
},
|
||||
created(){
|
||||
this.popup = this.getParent()
|
||||
},
|
||||
methods:{
|
||||
/**
|
||||
* 获取父元素实例
|
||||
*/
|
||||
getParent(name = 'uniPopup') {
|
||||
let parent = this.$parent;
|
||||
let parentName = parent.$options.name;
|
||||
while (parentName !== name) {
|
||||
parent = parent.$parent;
|
||||
if (!parent) return false
|
||||
parentName = parent.$options.name;
|
||||
}
|
||||
return parent;
|
||||
},
|
||||
}
|
||||
}
|
||||
Some files were not shown because too many files have changed in this diff Show More
Loading…
Reference in New Issue