微信小程序项目（SECTION B）
SECTION B首页部分
从上到下，依次是 搜索、轮播等
搜索就不用多说了，主要是数据库查询和变量更改
<view class="cu-bar search bg-blue">
<image wx:if="{{userInfo==null}}" class="cu-avatar round" src="/pages/user/user-unlogin.png"></image>
<image wx:else class="cu-avatar round" src="{{userInfo.avatarUrl}}" bindtap="goBackhome"></image>
<view class="search-form round">
<text class="cuIcon-search"></text>
<input type="text" placeholder="搜索食谱" confirm-type="search" bindfocus="giveMePlace" bindinput="getSearch"></input>
</view>
<view class="action" bindtap="searchGood">
<text>搜索</text>
</view>
</view>
左侧头像是通过image标签实现
点击搜索会调用后台JS函数，点击查询结果，会跳转到食谱的对应界面。
searchGood() {
var that = this
wx.cloud.init()
wx.cloud.callFunction({
name: 'searchRecipeByName',
data: {
recipeName: that.data.searchData
},
complete: res => {
if (res.result == null || res.result.data.length == 0) {
that.setData({ searchGoodsData: [] })
return
}
console.log("search result = ", res)
that.setData({ searchRecipeData: res.result.data })
}
})
},
goToRecipe(e){
wx.navigateTo({
url: '../recipes/recipeDetail/recipeDetail?id=' + e.currentTarget.dataset.id,
})
},
一键三餐算法
点击对应菜谱
<view class="cu-bar bg-white">
<view class="action">
<text class="cuIcon-titles text-green"></text>
<text class="text-xl text-bold" wx:if="{{!hasOneKey}}">温馨提示</text>
</view>
</view>
<view class="cu-bar bg-white">
<view class="action">
<text class="cuIcon-titles text-green"></text>
<text class="text-xl text-bold" wx:if="{{hasOneKey}}">营养三餐</text>
</view>
</view>
<view class="cu-timeline" wx:if="{{!hasOneKey}}">
<view class="cu-time">{{keyTime}}</view>
<view class="cu-item cur text-red">
<view class="content bg-red shadow-blur">
<view>{{keyTips}}</view>
</view>
</view>
</view>
<view class="cu-timeline" wx:if="{{hasOneKey}}">
<view class="cu-time">早餐</view>
<view class="cu-item cur text-blue">
<view class="content bg-blue shadow-blur" bindtap="goToDetail" data-id="{{foodsList[0].id}}">
<view>{{foodsList[0].name}}</view>
</view>
</view>
</view>
<view class="cu-timeline" wx:if="{{hasOneKey}}" bindtap="goToDetail" data-id="{{foodsList[1].id}}">
<view class="cu-time">午餐</view>
<view class="cu-item cur text-red">
<view class="content bg-red shadow-blur">
<view>{{foodsList[1].name}}</view>
</view>
</view>
</view>
<view class="cu-timeline" wx:if="{{hasOneKey}}" bindtap="goToDetail" data-id="{{foodsList[2].id}}">
<view class="cu-time">晚餐</view>
<view class="cu-item cur text-grey">
<view class="content bg-grey shadow-blur">
<view>{{foodsList[2].name}}</view>
</view>
</view>
</view>
<button class="cu-btn block bg-blue margin-tb-sm lg" bindtap="oneKeyFoods" wx:if="{{!hasOneKey}}">一键营养三餐</button>
<button class="cu-btn block bg-blue margin-tb-sm lg" bindtap="addEatHistory" wx:if="{{hasOneKey}}">确认三餐</button>
<view class='cu-load load-modal' wx:if="{{loadModal}}">
<image src='../../../icon/icon.png' class='png' mode='aspectFit'></image>
<view class='gray-text'>随机中...</view>
</view>
随机三餐算法（简陋版）
wx.cloud.callFunction({
name: 'searchRecipeByAll',
data: {
jmpCount: dk
},
complete: res => {
console.log("random res = ", res)
for (var i = 0; i < res.result.data.length; i++) {
var recipeIng = res.result.data[i].recipeIng
var isOk = true;
for (var j = 0; j < recipeIng.length; j++) {
for (var k = 0; k < recipeIng[j].length; k++) {
if (userSicks[0] == true && recipeIng[j][k] == '盐') {
isOk = false;
break
} else if (userSicks[1] == true && recipeIng[j][k] == '肉') {
isOk = false;
break
} else if (userSicks[2] == true && recipeIng[j][k] == '糖') {
isOk = false;
break
} else if (userSicks[3] == true && recipeIng[j][k] == '油') {
isOk = false;
break
}
}
if (isOk == false) {
break
}
}
if (isOk == true) {
foodsList[flag] = res.result.data[i]
this.setData({ foodsList: foodsList })
flag++
break
}
}
}
})
计算热力值!
onLoad: function (options) {
wx.cloud.init()
wx.cloud.callFunction({
name:'searchAllUser',
success: res => {
console.log("rank res = ",res)
var rankMan = res.result.data
var rankNum = res.result.data.length
for (var i = 0; i < rankNum; i++){
for (var j = i + 1; j < rankNum; j++){
var gradesA = rankMan[i].user_buynum * 500 + rankMan[i].user_loginnum * 50 + rankMan[i].user_readhelnum * 30 + rankMan[i].user_readrecnum * 30 ;
var gradesB = rankMan[j].user_buynum * 500 + rankMan[j].user_loginnum * 50 + rankMan[j].user_readhelnum * 30 + rankMan[j].user_readrecnum * 30;
if (gradesA < gradesB){
var tmp = rankMan[i]
rankMan[i] = rankMan[j]
rankMan[j] = tmp
}
}
}
var grades = []
for (var i = 0; i < rankNum; i++){
grades[i] = rankMan[i].user_buynum * 500 + rankMan[i].user_loginnum * 50 + rankMan[i].user_readhelnum * 30 + rankMan[i].user_readrecnum * 30;
}
this.setData({
userRankInfo: rankMan,
userGrade: grades,
userNum: rankNum
})
},
})
}
根据后台算法，进行排名。
<view class="cu-bar bg-white">
<view class="action">
<text class="cuIcon-titles text-green"></text>
<text class="text-xl text-bold">我的心情</text>
</view>
</view>
<view class="cu-timeline" wx:for="{{logsNum}}" wx:key="key">
<view class="cu-time">{{logsList[logsNum - index - 1].logs_time}}</view>
<view class="cu-item cur text-{{color[index % 17]}}">
<view class="content bg-{{color[index % 17]}} shadow-blur">
<view>{{logsList[logsNum - index - 1].logs_info}}</view>
</view>
</view>
</view>
<view>
<image src="../../home/images/bottom.png" mode="widthFix" style="width:100%;"/>
</view>
data: {
logsList: [],
color: ["red", "orange", "yellow", "olive", "green", "cyan", "blue", "purple", "mauve", "pink", "brown", "grey", "black", "darkGray", "gray", "ghostWhite", "white"],
logsNum:0
},
onLoad: function (options) {
var that = this
wx.cloud.init()
wx.cloud.callFunction({
name:'searchUserLogs',
complete: res => {
that.setData({
logsList: res.result.data,
logsNum: res.result.data.length
})
wx.showToast({
icon: 'success',
title: '加载成功'
});
}
})
}
相关知识
【网站项目】鲜花销售微信小程序
微信小程序识别花草方法步骤 微信小程序怎么识别花草
鲜花花店微信小程序—鲜花预定
【微信小程序开发实战项目】——如何制作一个属于自己的花店微信小程序（2）
微信小程序之植物识别demo(百度开发接口）
计算机毕业设计PHP基于微信小程序的花卉销售（源码+程序+uni+lw+部署）
三明大田花店微信小程序怎么做？
鲜花店微信小程序制作方法教程
探索未来家居：智能用电管理系统——微信小程序实践佳作
【全网首发】基于微信小程序的网上花店系统 鲜花销售小程序
网址: 微信小程序项目（SECTION B） https://m.huajiangbk.com/newsview474045.html
| 上一篇: 美尚园艺*安装 |
下一篇: 2019年一级建造师、通信与广电 |
