Repository: getweapp/weapp-diancan
Branch: master
Commit: e38aae92a920
Files: 11
Total size: 16.9 KB
Directory structure:
gitextract_hyylxvx4/
├── README.md
├── app.js
├── app.json
├── app.wxss
├── pages/
│ ├── home/
│ │ ├── home.js
│ │ ├── home.wxml
│ │ └── home.wxss
│ └── order/
│ ├── order.js
│ ├── order.wxml
│ └── order.wxss
└── utils/
└── util.js
================================================
FILE CONTENTS
================================================
================================================
FILE: README.md
================================================
# 微信小程序－点餐
### 说明：
实现了点餐功能，包括菜品展示，分类筛选，加入购物车，提交订单等功能。
### 数据接口:
使用本地数据
### 目录结构：
- res — 存放项目图片
- pages — 存放项目页面相关文件，包括home,order等页面
- utils — 存放时间处理文件，可require引入
### 开发环境：
微信web开发者工具 v0.10.102800
### 项目截图：
https://www.getweapp.com/project?projectId=583291e9bb2538f8186c706d
================================================
FILE: app.js
================================================
//app.js
App({
// onLaunch: function () {
// //调用API从本地缓存中获取数据
// var logs = wx.getStorageSync('logs') || []
// logs.unshift(Date.now())
// wx.setStorageSync('logs', logs)
// },
getUserInfo:function(cb){
var that = this
if(this.globalData.userInfo){
typeof cb == "function" && cb(this.globalData.userInfo)
}else{
//调用登录接口
wx.login({
success: function () {
wx.getUserInfo({
success: function (res) {
that.globalData.userInfo = res.userInfo
typeof cb == "function" && cb(that.globalData.userInfo)
}
})
}
})
}
},
globalData:{
userInfo: null,
foodList: [
{
id: 1,
title: "黑胡椒意酱面",
cost: 45,
desc: "进口意大利通心粉制作，搭配有机番茄秘制酱汁。",
icon: "https://fuss10.elemecdn.com/8/05/0b0f3719bf1c9c1673ed69e262888jpeg.jpeg",
num: 0
},
{
id: 2,
title: "吉士意大利虾仁面",
cost: 40,
desc: "进口意大利通心粉制作，搭配进口地中海大虾仁。",
icon: "https://fuss10.elemecdn.com/4/df/ff64bc5b06893a12aafb1e94f8b31jpeg.jpeg",
num: 0
},
{
id: 3,
title: "牛排意大利面",
cost: 38,
desc: "进口意大利通心粉制作，搭配新鲜酱汁牛排和甜糯玉米。",
icon: "https://fuss10.elemecdn.com/3/42/70aae8406958d22657c5772e2412ejpeg.jpeg",
num: 0
},
{
id: 4,
title: "香炸鸡翅",
cost: 12,
desc: "有机食品，绿色农场放心肉源",
icon: "https://fuss10.elemecdn.com/e/0e/df4f9d07b191d34ceddc3fedd88dcjpeg.jpeg",
num: 0
},
{
id: 5,
title: "一品寿司",
cost: 22,
desc: "百分百手工，百分百口味，来自东海岸的问候。",
icon: "https://fuss10.elemecdn.com/8/53/353cf146fc9cab79479efcfb6e88ajpeg.jpeg",
num: 0
},
{
id: 6,
title: "水果拼盘",
cost: 16,
desc: "新鲜时蔬，源自生活的百味奇珍。",
icon: "https://fuss10.elemecdn.com/0/b9/42b68495a09ec2e501ec3eaa36c6ejpeg.jpeg",
num: 0
},
{
id: 7,
title: "巧手三明治",
cost: 22,
desc: "好吃不贵，明治选择。",
icon: "https://fuss10.elemecdn.com/a/fe/0d647946855f76e9dcdfbedfcad61jpeg.jpeg",
num: 0
},
{
id: 8,
title: "培根焗饭",
cost: 26,
desc: "好吃不解释，真的不解释。",
icon: "https://fuss10.elemecdn.com/9/de/30676686cf98d88961eb69f1f3083jpeg.jpeg",
num: 0
}
]
}
})
================================================
FILE: app.json
================================================
{
"pages":[
"pages/home/home",
"pages/order/order"
],
"window":{
"backgroundTextStyle":"light",
"backgroundColor": "#fbf9fe",
"navigationBarBackgroundColor": "#000",
"navigationBarTitleText": "餐厅",
"navigationBarTextStyle":"white"
}
}
================================================
FILE: app.wxss
================================================
/**app.wxss**/
.container {
height: 100%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: space-between;
padding: 200rpx 0;
box-sizing: border-box;
}
================================================
FILE: pages/home/home.js
================================================
Page({
data:{
foodList:[],
detailFood:{},
modalHidden: true,
//订单数据
orderList: {},
orderNum: 0,
orderCost: 0,
toastHidden: true,
//轮播图
imgUrls: [
'https://fuss10.elemecdn.com/d/c0/56cfcdabba9fec97a3307b571ca8cjpeg.jpeg',
'https://fuss10.elemecdn.com/6/f2/5cd85b966281a8d545c34019d0fd1jpeg.jpeg',
'https://fuss10.elemecdn.com/e/55/b00aef689cb424aaaeae9d50d3e76jpeg.jpeg',
'https://fuss10.elemecdn.com/a/88/98d10d5580ce28db07673e28726ccjpeg.jpeg'
],
indicatorDots: true,
autoplay: true,
interval: 4000,
duration: 1000,
//picker
foodTypes: ['全部菜品', '披萨', '面条', '水果', '寿司', '三明治'],
foodTypesIndex: 0,
rankTypes: ['综合排序', '热度', '价格', '好评', '时间'],
rankTypesIndex: 0
},
// 页面初始化 options为页面跳转所带来的参数
onLoad:function(options){
//全局数据中获得食品列表
var appInstance = getApp();
var t_foodList = appInstance.globalData.foodList;
var t_arr;
for(var i=0; i<t_foodList.length; i++){
if(i%2 == 0){
t_arr = [];
this.data.foodList.push(t_arr); //整理成二维数据，方便显示
}
t_arr.push(t_foodList[i]);
}
},
//关闭食品详情弹窗
closeModal: function(e) {
this.setData({
modalHidden: true
})
},
//展示食品详情弹窗
imageClick:function(e){
var dataset = e.currentTarget.dataset;
var appInstance = getApp();
var t_foodList = appInstance.globalData.foodList;
//设置数据，自动刷新界面
this.setData({
modalHidden: false,
detailFood: t_foodList[dataset.index],
detailIndex: dataset.index
})
},
//提交订单
sublimitClick:function(e){
//订单列表 传参
var agrs = JSON.stringify(this.data.orderList);
wx.navigateTo({
url: '../order/order?order=' + agrs
})
},
//加入到购物车
addCartClick:function(e){
var dataset = e.currentTarget.dataset;
this.changeNum(dataset.index, true);
this.setData({
toastHidden: false
});
//1s后关闭
var _this = this;
setTimeout(function(){
_this.setData({
toastHidden: true
});
}, 1000);
//关闭商品详情面板
this.closeModal();
},
//增加数量
addClick:function(e){
var dataset = e.currentTarget.dataset;
this.changeNum(dataset.index, true);
},
//减少数量
reduceClick:function(e){
var dataset = e.currentTarget.dataset;
this.changeNum(dataset.index, false);
},
changeNum:function(index, bool){
var appInstance = getApp();
var t_food = appInstance.globalData.foodList[index];
var orderList = this.data.orderList;
var obj = orderList[t_food.id];
//如果存在，则数量变化
if(obj){
if(bool){
obj.num = obj.num + 1;
}else{
if(obj.num > 0){
obj.num = obj.num - 1;
}else{
return;//已经减少为0
}
}
}else{
if(bool){
//不存在，点击增加，则写入一条订单数据，数量默认1
obj = {
id: t_food.id,
num: 1,
cost: t_food.cost,
title: t_food.title
};
this.data.orderList[t_food.id] = obj;
}else{
return;//不存在，并且点击的是减少
}
}
var order_num = 0;
var order_cost = 0;
for(var k in orderList){
order_num = orderList[k].num + order_num; //计算总数量
order_cost = order_cost + orderList[k].cost * orderList[k].num; //计算总价格
}
this.setData({
orderList: orderList,
orderNum: order_num,
orderCost: order_cost
});
},
//食品类型
foodTypeChange: function(e) {
console.log('picker发送选择改变，携带值为', e.detail.value)
this.setData({
foodTypesIndex: e.detail.value
})
},
//排序类型
rankTypeChange: function(e) {
console.log('picker发送选择改变，携带值为', e.detail.value)
this.setData({
rankTypesIndex: e.detail.value
})
},
})
================================================
FILE: pages/home/home.wxml
================================================
<view class="section">
<!-- banner -->
<view class="banner" >
<swiper indicator-dots="{{indicatorDots}}"
autoplay="{{autoplay}}" interval="{{interval}}" duration="{{duration}}">
<block wx:for="{{imgUrls}}" wx:key="item.id">
<swiper-item>
<image src="{{item}}" mode="scaleToFill" class="slide-image" />
</swiper-item>
</block>
</swiper>
</view>
<!-- picker -->
<view class="memu">
<picker style="flex: 1;" bindchange="foodTypeChange" value="0" range="{{foodTypes}}">
<view class="memu-bt">{{foodTypes[foodTypesIndex]}}<span style="font-size:22px;">﹀</span></view>
</picker>
<picker style="flex: 1;" bindchange="rankTypeChange" value="0" range="{{rankTypes}}">
<view class="memu-bt">{{rankTypes[rankTypesIndex]}}<span style="font-size:22px;">﹀</span></view>
</picker>
</view>
<!-- 食品列表 -->
<view>
<scroll-view style="height: 100%;" scroll-y="true">
<view class="fooditem" wx:for="{{foodList}}" wx:key="item.id">
<view class="fooditem-l" >
<image mode="scaleToFill" src="{{item[0].icon}}" data-index="{{index*2}}" bindtap="imageClick"></image>
<view class="foodtitle">{{item[0].title}}</view>
<view class="fooditem-handle">
<span class="fooditem-jia" data-index="{{index*2}}" bindtap="addClick" >+</span>
<span class="fooditem-num">{{orderList[item[0].id].num ? orderList[item[0].id].num : 0}}</span>
<span class="fooditem-jia" data-index="{{index*2}}" bindtap="reduceClick">-</span>
<span class="fooditem-cost">￥{{item[0].cost}}</span>
</view>
</view>
<view class="fooditem-r" >
<image mode="scaleToFill" src="{{item[1].icon}}" data-index="{{index*2 + 1}}" bindtap="imageClick"></image>
<view class="foodtitle">{{item[1].title}}</view>
<view class="fooditem-handle">
<span class="fooditem-jia" data-index="{{index*2 + 1}}" bindtap="addClick">+</span>
<span class="fooditem-num">{{orderList[item[1].id].num ? orderList[item[1].id].num : 0}}</span>
<span class="fooditem-jia" data-index="{{index*2 + 1}}" bindtap="reduceClick">-</span>
<span class="fooditem-cost">￥{{item[1].cost}}</span>
</view>
</view>
</view>
</scroll-view>
</view>
<!-- toast -->
<toast hidden="{{toastHidden}}">已加入购物车</toast>
<!-- 弹出面板 -->
<view class="detail" style="display:{{modalHidden ? 'none' : 'block'}};">
<view class="detail-top" bindtap="closeModal"></view>
<view class="detail-bottom">
<image src="{{detailFood.icon}}"></image>
<view class="detail-title">{{detailFood.title}}</view>
<view class="detail-cost">￥{{detailFood.cost}}</view>
<view class="detail-desc">{{detailFood.desc}}</view>
</view>
<view class="detail-buybt" data-index="{{detailIndex}}" bindtap="addCartClick">加入购物车</view>
</view>
<view style="height:45px;" ><view>
<!-- 提交订单 -->
<view class="order-view" style="display:{{modalHidden ? 'flex' : 'none'}};">
<view class="order-number">
<image mode="scaleToFill" src="/res/img/cart.png"></image>
<span class="order-num-txt">{{orderNum}}</span>
<span>￥{{orderCost}}</span>
</view>
<view class="order-bt" bindtap="sublimitClick">提交订单</view>
<view>
</view>
================================================
FILE: pages/home/home.wxss
================================================
/* banner image */
.slide-image{
width: 96%;
height: 250px;
margin: 0 auto;
margin-left: 2%;
}
/* 下拉菜单 */
.memu{
display: flex;
flex-direction: row;
text-align: center;
border-bottom: 1px solid #ccc;
}
.memu-bt{
display: block;
flex: 1;
padding: 10px 0px;
}
.memu-bt span{
position: relative;
top: 7px;
left: 5px;
}
/* 食品列表 */
.fooditem{
flex-direction: row;
display: flex;
margin: 15px 0px;
}
.fooditem-l,.fooditem-r{
flex: 1;
}
.fooditem-l{
margin-left: 5%;
}
.fooditem-r{
margin-left: 0%;
}
.fooditem image{
width: 90%;
height: 100px;
}
.foodtitle{
font-size: 14px;
margin-top: 10px;
}
.fooditem-handle{
margin-top: 12px;
}
.fooditem-jia{
font-size: 20px;
width: 18px;
height: 18px;
display: inline-block;
border: 1px solid #ff2d2d;
color: #ff2d2d;
border-radius: 10px;
text-align: center;
line-height: 20px;
}
.fooditem-num{
font-size: 14px;
display: inline-block;
color: #ff2d2d;
width: 28px;
text-align: center;
margin-top: -3px;
}
.fooditem-cost{
font-size: 14px;
color: #ff2d2d;
width: 40px;
float: right;
margin-top: 5px;
}
/* 提交订单 */
.order-view{
position: fixed;
display: flex;
bottom: 0px;
left: 0px;
right: 0px;
height: 45px;
}
.order-number{
width: 50%;
background-color: #eee;
color: #ff2d2d;
text-align: center;
line-height: 45px;
}
.order-number image{
position: absolute;
width: 20px;
height: 20px;
left: 19px;
top: 13px;
}
.order-num-txt{
position: absolute;
width: 20px;
height: 20px;
display: block;
font-size: 14px;
border-radius: 10px;
background-color: #ff2d2d;
color: #fff;
line-height: 22px;
left: 35px;
top: 5px;
}
.order-bt{
width: 50%;
background-color: #09bb07;
color: #fff;
text-align: center;
line-height: 45px;
}
/* 食品详情-弹出面板 */
.detail{
width: 100%;
position: fixed;
bottom: 0px;
top: 0px;
left: 0px;
right: 0px;
}
.detail-top{
height: 16%;
background-color: #000;
opacity: 0.75;
}
.detail-bottom{
height: 84%;
background-color: #fff;
}
.detail-bottom image{
width: 100%;
}
.detail-title{
font-size: 14px;
margin: 20px 0px 0px 20px;
}
.detail-cost{
font-size: 14px;
color: #ff2d2d;
margin: 10px 0px 20px 20px;
}
.detail-desc{
font-size: 14px;
color: #aaa;
padding: 20px 0px 0px 20px;
border-top: 1px solid #999;
}
.detail-buybt{
position: absolute;
bottom: 0px;
left: 0px;
right: 0px;
height: 50px;
background-color: #09bb07;
line-height: 50px;
text-align: center;
color: #fff;
font-size: 20px;
}
================================================
FILE: pages/order/order.js
================================================
Page({
data:{
orderList: [],
total: 0, //总价格
toastHidden: true,
toastTxt: "",
tables: ["1号", "2号", "3号", "4号", "5号", "6号", "7号", "8号", "9号"], //桌号
tableIndex: 0
},
// 页面初始化 options为页面跳转所带来的参数
onLoad:function(options){
//object 转 array
var order = JSON.parse(options.order);
var t_order = [];
var t_total = 0;
for(var k in order){
if(order[k].num > 0){
t_order.push(order[k]);
t_total = t_total + order[k].cost*order[k].num; //计算总价格
}
}
this.setData({
orderList: t_order,
total: t_total
});
},
//修改标题
onReady:function(){
wx.setNavigationBarTitle({
title: '确认菜品'
})
},
//返回修改
returnClick:function(){
wx.navigateBack();
},
//确认提交
okClick:function(){
//1s后关闭
var _this = this;
setTimeout(function(){
_this.setData({
toastHidden: true
});
}, 1000);
if(this.data.orderList.length == 0){
this.setData({
toastHidden: false,
toastTxt: "没有选择商品"
});
}else{
this.setData({
toastHidden: false,
toastTxt: "提交成功"
});
}
},
bindPickerChange: function(e) {
console.log('picker发送选择改变，携带值为', e.detail.value)
this.setData({
tableIndex: e.detail.value
})
},
})
================================================
FILE: pages/order/order.wxml
================================================
<view>
<view class="table">
<view class="table-num">桌号</view>
<picker bindchange="bindPickerChange" value="{{tableIndex}}" range="{{tables}}">
<view class="table-input">{{tables[tableIndex]}}</view>
<span class="table-arrow">﹀</span>
</picker>
</view>
<view class="beizhu">
<view class="beizhu-txt">备注</view>
<input class="beizhu-input" placeholder="" />
</view>
<view class="order">
<view class="cost">总价：<span>￥{{total}}</span></view>
<view class="orderlist" wx:for="{{orderList}}" wx:key="item.id">
<span>{{item.title}}</span><span style="float:right;">￥{{item.cost}} * {{item.num}}</span>
</view>
</view>
<view class="bt-area">
<view class="bt-return" bindtap="returnClick">返回修改</view>
<view class="bt-ok" bindtap="okClick">确定提交</view>
</view>
<toast hidden="{{toastHidden}}">{{toastTxt}}</toast>
</view>
================================================
FILE: pages/order/order.wxss
================================================
.table{
padding: 40px 0px 0px 30px;
}
.table-num{
margin-right: 20px;
font-size: 16px;
margin-top: 4px;
float: left;
}
.table-input{
width: 50px;
height: 25px;
display: inline-block;
border: 1px solid #ccc;
vertical-align: middle;
text-align: center;
line-height: 25px;
font-size: 14px;
}
.table-arrow{
width: 30px;
height: 25px;
margin-left: -1px;
display: inline-block;
border: 1px solid #ccc;
text-align: center;
line-height: 35px;
vertical-align: middle;
}
.beizhu{
padding: 30px 40px 40px 30px;
border-bottom: 1px solid #aaa;
}
.beizhu-txt{
margin-top: 4px;
margin-right: 20px;
font-size: 16px;
float: left;
}
.beizhu-input{
padding-left: 10px;
border: 1px solid #ccc;
font-size: 14px;
}
.order{
padding: 20px 20px 48px 30px;
}
.cost{
font-size: 16px;
margin-bottom: 20px;
}
.cost span{
color: #ff2d2d;
margin-left: 12px;
}
.orderlist{
margin-top: 20px;
}
.orderlist span{
font-size: 15px;
}
.bt-area{
position: fixed;
bottom: 0px;
left: 0px;
right: 0px;
}
.bt-return{
width: 50%;
height: 48px;
display: inline-block;
background-color: #eee;
text-align: center;
line-height: 48px;
font-size: 20px;
}
.bt-ok{
width: 50%;
height: 48px;
display: inline-block;
background-color: #09bb07;
text-align: center;
line-height: 48px;
font-size: 20px;
color: #fff;
}
================================================
FILE: utils/util.js
================================================
function formatTime(date) {
var year = date.getFullYear()
var month = date.getMonth() + 1
var day = date.getDate()
var hour = date.getHours()
var minute = date.getMinutes()
var second = date.getSeconds()
return [year, month, day].map(formatNumber).join('/') + ' ' + [hour, minute, second].map(formatNumber).join(':')
}
function formatNumber(n) {
n = n.toString()
return n[1] ? n : '0' + n
}
module.exports = {
formatTime: formatTime
}
gitextract_hyylxvx4/
├── README.md
├── app.js
├── app.json
├── app.wxss
├── pages/
│ ├── home/
│ │ ├── home.js
│ │ ├── home.wxml
│ │ └── home.wxss
│ └── order/
│ ├── order.js
│ ├── order.wxml
│ └── order.wxss
└── utils/
└── util.js
SYMBOL INDEX (2 symbols across 1 files)
FILE: utils/util.js
function formatTime (line 1) | function formatTime(date) {
function formatNumber (line 14) | function formatNumber(n) {
Condensed preview — 11 files, each showing path, character count, and a content snippet. Download the .json file or copy for the full structured content (20K chars).
[
{
"path": "README.md",
"chars": 285,
"preview": "# 微信小程序－点餐\n\n### 说明：\n\n实现了点餐功能，包括菜品展示，分类筛选，加入购物车，提交订单等功能。\n\n### 数据接口:\n\n使用本地数据\n\n### 目录结构：\n\n- res — 存放项目图片\n- pages — 存放项目页面相关"
},
{
"path": "app.js",
"chars": 2439,
"preview": "//app.js\nApp({\n // onLaunch: function () {\n // //调用API从本地缓存中获取数据\n // var logs = wx.getStorageSync('logs') || []\n "
},
{
"path": "app.json",
"chars": 271,
"preview": "{\n \"pages\":[\n \"pages/home/home\",\n \"pages/order/order\"\n ],\n \"window\":{\n \"backgroundTextStyle\":\"light\",\n \"b"
},
{
"path": "app.wxss",
"chars": 194,
"preview": "/**app.wxss**/\n.container {\n height: 100%;\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-"
},
{
"path": "pages/home/home.js",
"chars": 3782,
"preview": "Page({\n data:{\n \n foodList:[],\n detailFood:{},\n modalHidden: true,\n\n //订单数据\n orderList: {},\n order"
},
{
"path": "pages/home/home.wxml",
"chars": 3399,
"preview": "<view class=\"section\">\n\n <!-- banner -->\n <view class=\"banner\" >\n <swiper indicator-dots=\"{{indicatorDots}}\"\n "
},
{
"path": "pages/home/home.wxss",
"chars": 2770,
"preview": "\n/* banner image */\n.slide-image{\n width: 96%;\n height: 250px;\n margin: 0 auto;\n margin-left: 2%;\n}\n\n/* 下拉菜单"
},
{
"path": "pages/order/order.js",
"chars": 1346,
"preview": "Page({\n data:{\n orderList: [],\n total: 0, //总价格\n toastHidden: true,\n toastTxt: \"\",\n tables: [\"1号\", \"2号\","
},
{
"path": "pages/order/order.wxml",
"chars": 897,
"preview": "<view>\n <view class=\"table\">\n <view class=\"table-num\">桌号</view>\n \n <picker bindchange=\"bindPickerChange\" value"
},
{
"path": "pages/order/order.wxss",
"chars": 1489,
"preview": "\n.table{\n padding: 40px 0px 0px 30px;\n}\n.table-num{\n margin-right: 20px;\n font-size: 16px;\n margin-top: 4px;"
},
{
"path": "utils/util.js",
"chars": 460,
"preview": "function formatTime(date) {\n var year = date.getFullYear()\n var month = date.getMonth() + 1\n var day = date.getDate()"
}
]
About this extraction
This page contains the full source code of the getweapp/weapp-diancan GitHub repository, extracted and formatted as plain text for AI agents and large language models (LLMs). The extraction includes 11 files (16.9 KB), approximately 5.9k tokens, and a symbol index with 2 extracted functions, classes, methods, constants, and types. Use this with OpenClaw, Claude, ChatGPT, Cursor, Windsurf, or any other AI tool that accepts text input. You can copy the full output to your clipboard or download it as a .txt file.
Extracted by GitExtract — free GitHub repo to text converter for AI. Built by Nikandr Surkov.