10205501407
/
yicanyishi
1
0
Fork 0
Code Issues 0 Pull Requests 0 Releases 0 Wiki Activity
Browse Source

上传文件至 '前端/miniprogram/pages/fridge'

master
李思涵 3 years ago
parent
0f7ce344f7
commit
77fd47dcda
4 changed files with 595 additions and 0 deletions
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. +225
    -0
      前端/miniprogram/pages/fridge/fridge.js
  2. +3
    -0
      前端/miniprogram/pages/fridge/fridge.json
  3. +50
    -0
      前端/miniprogram/pages/fridge/fridge.wxml
  4. +317
    -0
      前端/miniprogram/pages/fridge/fridge.wxss

+ 225
- 0
前端/miniprogram/pages/fridge/fridge.js View File

@ -0,0 +1,225 @@
const app = getApp();
Page({
data: {
userInfo: {},
shorter_nickname:null,
hasUserInfo: false,
multiArray_top:[['全部','蔬菜','豆/豆制品','肉禽蛋','水产海鲜','水果','乳品烘焙','粮油米面','调味品','酒水饮料','熟食卤味','速食冻品'],['新鲜优先','不新鲜优先']],
multiIndex_top:[0,0],
selected_kind:"全部",
fresh:"新鲜优先",
stock:null,
if_reverse:"column-reverse",
day_limit:3,
exists_outdated:false,
},
login(){
wx.login({
success: (res)=> {
if (res.code) {
this.setData({
code:res.code
})
} else {
console.log('登录失败！' + res.errMsg)
}
}
})
wx.showModal({
title: '一餐一食',
content: '请登录',
showCancel : false,
confirmText:"登录",
success: (res) =>{
wx.getUserProfile({
desc: '展示用户信息', // 声明获取用户个人信息后的用途，后续会展示在弹窗中，请谨慎填写
success: (res) => {
app.globalData.userInfo = res.userInfo
this.setData( {
userInfo:res.userInfo,
hasUserInfo:true,
shorter_nickname:res.userInfo.nickName.substring(0,10),
} );
console.log(res.userInfo)
wx.cloud.callContainer({
"config": {
"env": "prod-2g058voqbea31ecb"
},
"path": "/general/nickname/",
"header": {
"X-WX-SERVICE": "django-5198",
'content-type': 'application/x-www-form-urlencoded'
},
"method": "POST",
data: res.userInfo,
success(res){
console.log(res)
}
})
},
fail:(res)=>{
this.login()
}
})
}
})
},
get_food_stock(){
var that = this
wx.cloud.callContainer({
"config": {
"env": "prod-2g058voqbea31ecb"
},
"path": "fridge/food-stock/",
"header": {
"X-WX-SERVICE": "django-5198",
'content-type': 'application/x-www-form-urlencoded;charset=utf-8'
},
"method": "GET",
data:{day_limit:this.data.day_limit},
success(res){
let check = "\"outdated\": 1"
if(res.data.result.indexOf(check)>=0){
that.setData({
exists_outdated:true
})
}
let arr = app.parse_json(res)
that.setData({
stock:arr,
})
}
})
},
onLoad(){
this.login()
},
onShow(){
this.get_food_stock()
},
bindMultiPickerChange_top: function (e) {
console.log('picker发送选择改变，携带值为', e.detail.value)
this.setData({
selected_kind:this.data.multiArray_top[0][e.detail.value[0]],
fresh:this.data.multiArray_top[1][e.detail.value[1]]
})
if(e.detail.value[1]==1){
this.setData({
if_reverse:"column"
})
}
else{
this.setData({
if_reverse:"column-reverse"
})
}
},
bindMultiPickerColumnChange_top: function (e) {
console.log('修改的列为', e.detail.column, '，值为', e.detail.value);
var data = {
multiArray_top: this.data.multiArray_top,
multiIndex_top: this.data.multiIndex_top
};
data.multiIndex_top[e.detail.column] = e.detail.value;
this.setData(data);
},
onTapNewMeal(){
wx.navigateTo({
url: '../choices/choices',
})
},
onTapSpecificItem(e){
var item = JSON.stringify(e.currentTarget.dataset.product)
console.log(e)
wx.navigateTo({
url: '../change_stock/change_stock?item='+item,
})
},
test_GET(){
wx.cloud.callContainer({
"config": {
"env": "prod-2g058voqbea31ecb"
},
"path": "test_get_post/",
"header": {
"X-WX-SERVICE": "django-5198",
"content-type": "application/json"
},
"method": "GET",
data: {type:'vegewswswsws'},
success(res){
console.log(res.data)
}
})
},
test_POST(){
wx.cloud.callContainer({
"config": {
"env": "prod-2g058voqbea31ecb"
},
"path": "test_get_post/",
"header": {
"X-WX-SERVICE": "django-5198",
'content-type': 'application/x-www-form-urlencoded'
},
"method": "POST",
data: {name:'John',age:18,hobby:'golf'},
success(res){
console.log(res)
}
})
},
onTapNewFood(){
wx.navigateTo({
url: '../add_new_food/add_new_food',
})
},
stock_longpress(e){
var item = e.currentTarget.dataset.product
},
set_alarm_days(){
wx.showModal({
title: '需要提醒放置了多少天（含）以上的食物？',
showCancel : true,
confirmText:"确定",
cancelText:"取消",
editable:true,
placeholderText:"如：3，请输入阿拉伯数字",
success:(res)=>{
console.log(res)
if(res.confirm){
if(res.content&&!isNaN(Number(res.content))&&Number(res.content)>=1&&Number(res.content)%1==0){
this.setData({
day_limit:res.content,
})
this.get_food_stock()
}
else{
wx.showModal({
title: '错误',
content:"请输入正整数！",
showCancel : false,
confirmText:"确定",
})
}
}
}
})
}
})

+ 3
- 0
前端/miniprogram/pages/fridge/fridge.json View File

@ -0,0 +1,3 @@
{
"usingComponents": {}
}

+ 50
- 0
前端/miniprogram/pages/fridge/fridge.wxml View File

@ -0,0 +1,50 @@
<!--fridge.wxml-->
<view class="FridgeProfieContainer" >
<view wx:if="{{hasUserInfo}}" >
<image bindtap="haimeixie" class="userinfo-avatar" src="{{userInfo.avatarUrl}}" bindlongpress= "userinfo-avatar-hover" mode="cover"></image>
<text class="nickname">{{shorter_nickname}}的冰箱</text>
</view>
<view style="margin-bottom: 5%;">
<picker header-text="选择类别" mode="multiSelector" bindchange="bindMultiPickerChange_top" bindcolumnchange="bindMultiPickerColumnChange_top" value="{{multiIndex_top}}" range="{{multiArray_top}}">
<view class="selector">
<view style="margin-left: 7%;position: absolute;margin-top: 1%;">{{selected_kind}}</view>
<view style="margin-left: 50%;position: absolute;margin-top: 1%;">{{fresh}}</view>
<view style="margin-left: 40%;position: absolute;margin-top: 1%;">|</view>
</view>
</picker>
</view>
</view>
<view wx:if="{{exists_outdated&&hasUserInfo}}" bindtap="set_alarm_days" class="alarm">注意:标红食材存放时间≥{{day_limit}}天</view>
<scroll-view wx:if="{{hasUserInfo}}" scroll-y="true" style="height: 1100rpx;" class="DetailedFoodStockContainer">
<view style="padding-bottom: 40rpx;"></view>
<view style="flex-direction:{{if_reverse}};display: flex;">
<view wx:for="{{stock}}" bindtap="onTapSpecificItem" bindlongpress="stock_longpress" data-product="{{item}}">
<view wx:if="{{item.kind==selected_kind||selected_kind=='全部'}}">
<view wx:if="{{item.outdated}}" class="DetailedFoodStock_Important" hover-class="DetailedFoodStock_Important_tap">
{{item.name}} {{item.amount}}{{item.unit}} {{item.date}}
</view>
<view wx:else class="DetailedFoodStock" hover-class="DetailedFoodStock_tap">
{{item.name}} {{item.amount}}{{item.unit}} {{item.date}}
</view>
</view>
</view>
</view>
<view style="padding-bottom: 200rpx;"></view>
</scroll-view>
<view class="add_icon" bindtap="onTapNewFood" hover-class="add_icon_press">添加食材</view>
<view bindtap="onTapNewMeal" class="bottom_button" hover-class="bottom_button_press">
开启新的一餐
</view>
<view class="deco1"></view>
<view class="deco2"></view>
<view wx:if="{{!hasUserInfo}}" class="bg"></view>

+ 317
- 0
前端/miniprogram/pages/fridge/fridge.wxss View File

@ -0,0 +1,317 @@
/**fridge.wxss**/
.add_icon{
position: fixed;
bottom:5px;
right: 5px;
background: rgb(255, 255, 255);
box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
border-radius: 25px;
padding-top: 15px;
padding-bottom: 15px;
text-align: justify;
font-size: 17px;
font-weight: 800;
z-index: 3;
padding-left: 15px;
padding-right: 15px;
}
.selector{
position: relative;
z-index:1;
width: 75%;
color: rgba(0, 0, 0, 0.808);
font-size: 40rpx;
font-weight: bold;
padding-top: 2%;
margin-top: 25%;
padding-bottom: 10%;
background-color: rgba(253, 252, 252, 0.329);
box-shadow: 0px 0px 4px rgba(187, 135, 135, 0.25);
border-radius: 0px 40rpx 40rpx 0px;
}
.bottom_button{
position: fixed;
bottom: 0px;
text-align: center;
width: 100%;
padding-top: 5%;
padding-bottom: 5%;
z-index: 2;
margin: auto;
border-radius: 20px 20px 20px 20px;
font-weight:bold;
font-size: 20px;
background: rgba( 248, 138, 138, 0.3 );
backdrop-filter: blur( 20px );
}
.userinfo {
color: rgb(32, 30, 30);
}
.userinfo-avatar {
overflow: hidden;
width: 120rpx;
height: 120rpx;
left:78%;
top:60%;
border-radius: 100%;
border-style: solid;
border-width: 0px;
position: absolute;
box-shadow: 0px 0px 10px rgba(75, 71, 69, 0.247),inset 3px 3px 3px rgba(255, 255, 255, 0.15);
transition: transform 1s;
}
.usermotto {
margin-top: 0px;
}
.nickname{
width:75%;
position: absolute;
left:5%;
top:33%;
height: 40px;
font-weight:bold;
font-size: 30px;
line-height: 21px;
letter-spacing: 0px;
}
.FoodClassButton{
border-radius: 10px;
color: #ffffff;
padding-top: 50rpx;
padding-bottom: 50rpx;
font-weight:bold;
font-size: 20px;
width: 200rpx;
height: 100rpx;
margin-right: 30rpx;
text-align: center;
box-shadow: 0px 1px 4px rgba(26, 77, 160, 0.16),inset 3px 3px 3px rgba(255, 255, 255, 0.15);
background: rgba( 240, 10, 10, 0.55 );
border-radius: 10px;
border: 1px solid rgba( 255, 255, 255, 0.18 );
}
.FridgeProfieContainer{
padding-top: 5%;
z-index: 2;
margin: auto;
position: relative;
height: 300rpx;
}
.FoodClassButtonContainer{
margin-top: 30rpx;
z-index: 1;
}
Page{
background: white;
}
.DetailedFoodStockContainer{
width: 100%;
/*background: rgba(255, 208, 121, 0.329);*/
/*box-shadow: 3px 10px 40px rgba(26, 77, 160, 0.16),inset 0px 5px 0px rgba(187, 187, 187, 0.021);*/
border-radius: 54rpx;
background: rgba(255, 255, 255, 0.336);
box-shadow: 0 0px 32px 0 rgba(103, 104, 121, 0.37);
backdrop-filter: blur( 7px );
border: 1px solid rgba( 255, 255, 255, 0.18 );
z-index: 0;
margin-top: 2%;
}
.DetailedFoodStock{
width:80%;
height:10%;
margin: auto;
font-weight:bold;
font-size: 17px;
padding-left: 5%;
padding-right: 5%;
padding-top: 5%;
padding-bottom: 5%;
margin-bottom: 20rpx;
background: rgba( 255, 225, 225, 0.25 );
box-shadow: 0 0px 5px 0 rgba( 31, 38, 135, 0.37 );
border-radius: 10px;
transition:transform 0.2s;
-webkit-transition:transform 0.2s;
z-index: 1;
animation: show_up 1s;
}
.DetailedFoodStock_tap{
background: rgba(255, 255, 255, 0.25);
transform: scale(1.05,1.05);
}
.DetailedFoodStock_Important{
width:80%;
height:10%;
margin: auto;
font-weight:bold;
font-size: 17px;
padding-left: 5%;
padding-right: 5%;
padding-top: 5%;
padding-bottom: 5%;
margin-bottom: 20rpx;
background: rgba(190, 3, 3, 0.705);
box-shadow: 0 0px 5px 0 rgba( 31, 38, 135, 0.37 );
border-radius: 10px;
border: 1px solid rgba( 255, 255, 255, 0.18 );
z-index: 1;
color: white;
transition:transform 0.2s;
-webkit-transition:transform 0.2s;
animation: show_up 1s;
}
.DetailedFoodStock_Important_tap{
background: rgba(255, 0, 0, 0.5);
transform: scale(1.05,1.05);
}
@keyframes show_up{
0%{opacity: 0;}
100%{opacity: 1;}
}
.bg{
background:rgba(32, 30, 30, 0.747);
width:100%;
height: 100%;
position: fixed;
z-index: 4;
top: 0%;
backdrop-filter : blur(10rpx)
}
.deco1{
/* Rectangle 2 */
position: absolute;
width: 49.37px;
height: 321.5px;
top: -30rpx;
right:20rpx;
background: linear-gradient(rgba(245, 186, 173, 0.068)5%,rgba(231, 153, 139, 0.075) 50%);
transform: rotate(135deg);
border-radius: 20rpx;
z-index: -10;
}
.deco2{
/* Rectangle 2 */
position: absolute;
width: 49.37px;
height: 321.5px;
top: -30rpx;
right:250rpx;
background: linear-gradient(rgba(245, 186, 173, 0.075)5%,rgba(231, 153, 139, 0.075) 20%);
transform: rotate(135deg);
border-radius: 20rpx;
z-index: -10;
}
.addchange{
position: absolute;
margin-left:20%;
width: 60%;
margin-top: 0%;
/*background: rgba(255, 208, 121, 0.329);*/
/*box-shadow: 3px 10px 40px rgba(26, 77, 160, 0.16),inset 0px 5px 0px rgba(187, 187, 187, 0.021);*/
border-radius: 20rpx;
background: rgba(255, 255, 255, 0.75);
box-shadow: 0 8px 32px 0 rgba( 31, 38, 135, 0.37 );
backdrop-filter: blur( 7px );
border: 1px solid rgba( 255, 255, 255, 0.18 );
z-index: 5;
height: 35%;
}
.input_num{
position: fixed;
width: 38%;
margin-left: 10%;
margin-top: 4%;
height: 15%;
background-color: rgba(255, 255, 255, 0.473);
border-radius: 10rpx;
}
.input_unit{
position: fixed;
width: 38%;
margin-left: 52%;
margin-top: 4%;
height: 15%;
background-color: rgba(255, 255, 255, 0.473);
border-radius: 10rpx;
}
.alarm{
width:80%;
margin: auto;
font-weight:bold;
font-size: 17px;
padding-left: 5%;
padding-right: 5%;
padding-top: 1%;
padding-bottom: 1%;
margin-bottom: 20rpx;
margin-top: 3%;
background: rgba(255, 10, 10, 0.281);
box-shadow: 0 0px 3px 0 rgba(126, 44, 44, 0.432);
border-radius: 10px;
backdrop-filter: blur(20px);
z-index: 1;
color: white;
transition: transform 0.2s;
}
.add_icon_press{
background-color: rgba(255, 255, 255, 0.616);
transform: scale(1.01,1.01);
}
.bottom_button_press{
background: rgba(255, 0, 0, 0.055);
}
.userinfo-avatar-hover{
transform:scale(1.2,1.2)
}
.loading{
text-align: center;
width: 100%;
padding-top:40%;
z-index: 2;
margin: auto;
position: fixed;
font-weight:bold;
font-size: 20px;
background-color: rgba(0, 0, 0, 0.308);
color: white;
height: 100%;
}

Write Preview
Loading…
Cancel
Save