小程序外卖订单界面的 代码
html页面
.
热门热门热门
4.2分数
营业时间:9:00~22:00营业
公告：可随时联系我们，我们提供外卖服务
商品
评价(241)
商家
{{item.name}}
{{item.name}}
{{itm.title}}
{{itm.info}}
¥{{itm.price}}
{{totalNum}}
¥{{totalMoney}}
本单合计
去结算
已选商品
X
{{item.name}}
{{item.info}}
¥{{item.price}}
{{goodDetail.title}}
¥{{goodDetail.price}}
{{goodDetail.info}}
学习使我快乐
2020.11.14
不错不错，吃的很快就完成上菜了，而且价格也比我预想的要便宜，味道也不错
深圳市宝安区西乡街道预约社区轻铁花园820栋129
|
营业时间：9:00-22:00
公告：可随时联系我们，我们提供外卖服务
JS
const goods = require("goods.js");
Page({
data: {
foodsList: [], // 商品数据
cartList: [], // 购物车数据
isShowCartMask: false,
totalNum: 0,
totalMoney: 0,
initView: 'item0', // 根据此变量的变化，控制左侧选中状态、右侧滑动
curId: 'item0',
isShowDetail: false,
goodDetail: {},
screenWidth: 0, // 手机屏幕宽度
heightArray: [0], // 右侧每一个类型的高度区间数组
tabs:2,
},
onLoad() {
console.log("goods:", goods)
this.setData({
foodsList:goods.goods
})
this.getGoodsData()
},
// 方法
async getGoodsData() {
const that = this
// const res = await getGoodsInfo({})
let res=[]
// this.foodsList = res
wx.getSystemInfo({
success: (ress) => {
that.screenWidth = ress.windowWidth
}
})
this.getHeightSection()
},
// 设置高度区间 所有单位转化为rpx
getHeightSection() {
const that = this
let hg = 0
for (let index = 0; index < that.data.foodsList.length - 1; index++) {
hg += 70 + that.data.foodsList[index].list.length * 212
that.data.heightArray.push(hg)
}
},
// 获取高度区间的下标
getHeightIndex(arr, hg) {
const that = this
arr.forEach((item, index) => {
if (hg >= item) {
that.setData({
curId: 'item' + index
})
}
})
},
// 左边菜单控制右边
scrollToViewFn(e) {
this.setData({
initView: e.target.dataset.id,
curId: e.target.dataset.id
})
},
// 右边滚动控制左边
onPageScroll(e) {
const that = this
let scrollTop = e.detail.scrollTop * 750 / that.screenWidth
this.getHeightIndex(that.data.heightArray, scrollTop)
},
// 商品列表的减号点击
reduceNum(e) {
const that = this
let {ind,index,item} =e.currentTarget.dataset
var cartList = that.data.cartList
let val = 'foodsList[' + index + '].list[' + ind + '].num'
this.setData({
[val]: item.num - 1
})
// 如果商品为0，就把当前商品在购物车清除
// 如果不为0， 就将当前商品数量减1
if (that.data.foodsList[index].list[ind].num === 0) {
that.removeAarry(that.data.cartList, item.id)
} else {
cartList.forEach((itm, i) => {
if (itm.id === item.id) {
// let value = 'cartList[' + i + '].num'
// that.setData({
// [value]: itm.num - 1
// })
cartList[i].num=itm.num - 1
that.setData({
cartList: cartList
})
}
})
}
this.computed()
},
// 商品列表的加号点击
addNum(e) {
let {ind,index,item} =e.currentTarget.dataset
const that = this
let cartList=that.data.cartList
let val = 'foodsList[' + index + '].list[' + ind + '].num'
console.log("val",val)
this.setData({
[val]: item.num + 1
})
// 如果商品为1，就把当前商品加入购物车
// 否则， 就将当前商品数量加1
if (that.data.foodsList[index].list[ind].num === 1) {
let val = {
id: item.id,
name: item.title,
price: item.price,
num: 1,
index: index,
ind: ind,
pic: item.pic
}
cartList.push(val)
console.log("cartList",cartList)
that.setData({
cartList:cartList
})
} else {
cartList.forEach((itm, i) => {
if (itm.id === item.id) {
// let value = 'cartList[' + i + '].num'
// that.setData({
// [value]: itm.num + 1
// })
let value = cartList[i].num=itm.num + 1
}
})
}
that.setData({
'cartList': cartList
})
// that.setData({
// cartList: that.data.cartList
// })
this.computed()
},
// 购物车的减号点击
reduceCart(e) {
let {index,item} =e.currentTarget.dataset
const that = this
let val = 'foodsList[' + item.index + '].list[' + item.ind + '].num'
let val1 = 'cartList[' + index + '].num'
this.setData({
[val]: item.num - 1,
[val1]: item.num - 1
})
// 如果商品为0，就把当前商品在购物车清除
// 如果不为0， 就将当前商品数量减1
if (that.data.cartList[index].num === 0) {
that.removeAarry(that.data.cartList, item.id)
}
this.computed()
},
// 购物车的加号点击
addCart(e) {
let {index,item} =e.currentTarget.dataset
console.log("ee",e.currentTarget.dataset)
const that = this
let val = 'cartList[' + index + '].num'
that.setData({
[val]: item.num + 1
})
this.computed()
},
// 清空购物车
clearCart() {
const that = this
wx.showModal({
title: '提示',
content: '清空购物车？',
success: function (res) {
if (res.confirm) {
that.setData({
cartList: []
})
that.data.foodsList.forEach((item, i) => {
item.data.list.forEach((itm, j) => {
let value = 'foodsList[' + i + '].list[' + j + '].num'
that.setData({
[value]: 0
})
})
})
that.computed()
}
}
})
},
// 计算选择商品总价格和总数量
computed() {
const that = this
let num = 0
let money = 0
console.log("computed:",that.data.cartList)
that.data.cartList.forEach(item => {
num += item.num
money += parseFloat(item.price) * item.num
})
that.setData({
totalNum: num,
totalMoney: money.toFixed(2)
})
},
// 将数量为0的时候，对应商品在购物车中删除
removeAarry(arr, id) {
arr.forEach((item, index) => {
if (item.id === id) {
arr.splice(index, 1)
}
})
this.setData({
"cartList":arr
})
// return arr
},
showCartMask() {
// this.isShowCartMask = !this.isShowCartMask
this.setData({
"cartList":this.data.cartList,
'isShowCartMask':!this.data.isShowCartMask
})
},
hiddenCartMak() {
this.setData({
'isShowCartMask':false
})
// this.isShowCartMask = false
},
stopMaopao() {},
showGoodDetail(item) {
this.goodDetail = item
this.isShowDetail = true
},
hideDetail() {
this.setData({
'isShowDetail':false
})
},
// 订单提交
submitOrder() {},
changeCenten(e){
console.log(e)
let tabs=e.currentTarget.dataset.id
this.setData({
tabs:tabs
})
}
})CSS
page {
height: 100%;
}
.container {
height: 100vh;
background-color: #fff;
box-sizing: border-box;
overflow: hidden;
}
.container .dialog1 {
width: 100%;
height: 100vh;
position: fixed;
top: 0;
left: 0;
background-color: rgba(0, 0, 0, 0.5);
z-index: 4;
}
.container .dialog1 .detbox {
position: fixed;
bottom: 0;
left: 0;
right: 0;
background-color: #fff;
width: 100%;
max-height: 700rpx;
overflow-y: auto;
color: #333;
border-radius: 40rpx 40rpx 0 0;
}
.container .dialog1 .detbox .img {
width: 100%;
height: 375rpx;
background: rgba(0, 0, 0, 0.6);
}
.container .dialog1 .detbox .box {
padding: 20rpx 30rpx 40rpx;
box-sizing: border-box;
}
.container .dialog1 .detbox .box .tit {
font-size: 28rpx;
color: #333;
font-weight: bold;
}
.container .dialog1 .detbox .box .money {
font-size: 26rpx;
color: #f00;
margin: 10rpx 0;
}
.container .dialog1 .detbox .box .desc {
font-size: 22rpx;
color: #666;
line-height: 32rpx;
}
.container .dialog1 .detbox .close {
width: 50rpx;
height: 50rpx;
position: absolute;
right: 20rpx;
top: 20rpx;
display: flex;
align-items: center;
justify-content: center;
}
.container .dialog1 .detbox .close image {
width: 40rpx;
height: 40rpx;
}
.container .dialog {
width: 100%;
height: 100vh;
position: fixed;
top: 0;
left: 0;
background-color: rgba(0, 0, 0, 0.5);
z-index: 2;
}
.container .dialog .boxs {
position: fixed;
bottom: 100rpx;
left: 0;
right: 0;
z-index: 6;
background-color: #fff;
width: 100%;
max-height: 600rpx;
color: #333;
border-radius: 20px 20px 0px 0px;
}
.container .dialog .boxs .title-block {
margin: 30rpx 30rpx 10rpx;
box-sizing: border-box;
display: flex;
align-items: center;
justify-content: space-between;
height: 45rpx;
font-size: 32Rpx;
font-weight: 400;
color: #333333;
}
.container .dialog .boxs .title-block text {
font-size: 26rpx;
color: #666;
}
.container .dialog .boxs .title-block .clear {
font-size: 22rpx;
color: rgba(112, 112, 112, 1);
display: flex;
align-items: center;
}
.container .dialog .boxs .title-block .clear image {
width: 24rpx;
height: 24rpx;
margin-right: 10rpx;
}
.container .dialog .boxs .content {
width: 100%;
max-height: 530rpx;
overflow-y: auto;
padding-bottom: 30rpx;
box-sizing: border-box;
}
/* .container .dialog .boxs .content .item {
width: 690rpx;
height: 80rpx;
line-height: 80rpx;
margin: 0 auto;
position: relative;
display: flex;
align-items: center;
justify-content: space-between;
} */
.container .dialog .boxs .content .item{
margin: 20rpx 30rpx;
width: 690rpx;
box-sizing: border-box;
display: flex;
justify-content: space-between;
position: relative;
height: 120rpx;
}
.container .dialog .boxs .content .item .tit {
width: 400rpx;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
font-size: 28rpx;
color: #333;
}
.container .dialog .boxs .content .item .main {
width: 565rpx;
padding-left: 30rpx;
box-sizing: border-box;
}
.container .dialog .boxs .content .item .right {
display: flex;
justify-content: flex-start;
align-items: center;
height: 80rpx;
}
.container .dialog .boxs .content .item .right text {
font-size: 26rpx;
color: #f00;
}
.container .dialog .boxs .content .item .right .box {
display: flex;
justify-content: flex-start;
align-items: center;
flex-wrap: nowrap;
margin-left: 20rpx;
height: 80rpx;
}
.container .dialog .boxs .content .item .right .box .icon {
width: 34rpx;
height: 34rpx;
display: flex;
align-items: center;
justify-content: center;
}
.container .dialog .boxs .content .item .right .box .icon image {
width: 34rpx;
height: 34rpx;
}
.container .dialog .boxs .content .item .right .box input {
width: 60rpx;
height: 34rpx;
border: none;
color: #333;
text-align: center;
font-size: 26rpx;
}
.store-box{
position: relative;
width: 750;
overflow: hidden;
height: 342rpx;
}
.st-bg{
width: 100%;
height: 116rpx;
background: rgba(53, 212, 171, 1);
}
.container .index-cont {
height: calc(100vh - 442rpx);
display: flex;
justify-content: space-between;
}
.container .index-cont .index-left {
width: 150rpx;
height: 100%;
background: rgba(246, 248, 251, 1);
}
.container .index-cont .index-left .item {
font-size: 26rpx;
color: rgba(153, 153, 153, 1);
/* border-bottom: 1rpx dashed #666; */
height: 72rpx;
line-height: 72rpx;
padding: 0 20rpx;
box-sizing: border-box;
}
.container .index-cont .index-left .item.on {
background: #fff;
color: rgba(51, 51, 51, 1);
}
.container .index-cont .index-right {
width: 600rpx;
height: 100%;
}
.container .index-cont .index-right .boxs {
margin: 0 30rpx;
box-sizing: border-box;
width: 100%;
}
.container .index-cont .index-right .index-title {
margin: 30rpx 0;
height: 40rpx;
line-height: 40rpx;
/* background: #f7f7f7; */
font-size: 28rpx;
font-weight: 800;
color: #333333;
box-sizing:content-box;
}
.item {
margin: 20rpx 0;
width: 540rpx;
box-sizing: border-box;
display: flex;
justify-content: space-between;
position: relative;
height: 120rpx;
}
.item::after {
position: absolute;
top: 0rpx;
left: 0;
/* background: #ccc;
width: 100%;
height: 1rpx;
content: ""; */
}
.item .pic {
width: 120rpx;
height: 120rpx;
}
.item .pic image {
width: 100%;
height: 100%;
}
.item .main {
width: 380rpx;
padding-left: 30rpx;
box-sizing: border-box;
}
.item .main .tit {
font-size: 26rpx;
color: #333;
font-weight: bold;
}
.item .main .desc {
color: #999;
min-height: 28rpx;
line-height: 28rpx;
margin: 4rpx 0 3rpx;
font-size: 20px;
font-weight: 500;
color: #999999;
}
.item .main .money {
font-size: 28rpx;
color: #f00;
}
.item .box {
display: flex;
justify-content: flex-start;
align-items: center;
flex-wrap: nowrap;
margin-left: 10rpx;
height: 34rpx;
position: absolute;
right: 0;
bottom: 30rpx;
}
.item .box .icon {
width: 34rpx;
height: 34rpx;
display: flex;
align-items: center;
justify-content: center;
}
.item .box .icon image {
width: 34rpx;
height: 34rpx;
}
.item .box input {
width: 60rpx;
height: 34rpx;
border: none;
color: #333;
text-align: center;
font-size: 26rpx;
}
.container .index-cart {
width: 100%;
height: 100rpx;
display: flex;
align-items: center;
justify-content: flex-start;
position: relative;
z-index: 3;
}
.container .index-cart .left {
width: 470rpx;
height: 100%;
color: rgba(51, 51, 51, 1);
display: flex;
align-items: center;
justify-content: flex-start;
background: #fff;
border-top: 1rpx solid rgba(230, 230, 230, 1);
}
.container .index-cart .left .cart-num {
width: 100rpx;
height: 100rpx;
position: relative;
padding-top: 15rpx;
box-sizing: border-box;
border-radius: 100%;
left: 30rpx;
text-align: center;
}
.container .index-cart .left .cart-num.on {
/* background: #ffa800; */
}
.container .index-cart .left .cart-num image {
width: 69rpx;
height: 69rpx;
}
.container .index-cart .left .cart-num text {
font-size: 20rpx;
color: #fff;
display: inline-block;
padding: 0 8rpx;
box-sizing: border-box;
position: absolute;
right: 13rpx;
top: 11rpx;
height: 30rpx;
line-height: 30rpx;
border-radius: 30rpx;
background: #f00;
}
.container .index-cart .left .cart-money {
color: rgba(51, 51, 51, 1);
font-size: 30rpx;
margin-left: 30rpx;
}
.cart-money .mon{
height: 50rpx;
font-size: 36rpx;
line-height: 50rpx;
color: #333333;
}
.cart-money .lable{
height: 28rpx;
line-height: 28rpx;
font-size: 28rpx;
color: #333333;
}
.container .index-cart .order-btn {
width: 282rpx;
height: 100%;
background: rgba(53, 212, 172, 1);
font-size: 32rpx;
color: #fff;
display: flex;
align-items: center;
justify-content: center;
}
.hide{
display: none;
}
/* 店铺信息 */
.store-info{
position: absolute;
top: 26rpx;
left: 30rpx;
padding: 20rpx;
width: 690rpx;
height: 227rpx;
border-radius: 16rpx;
background: #fff;
overflow: hidden;
box-shadow: 0px 2rpx 16rpx rgba(0, 0, 0, 0.08);
}
.store-info .start-box{
margin: 10rpx 0 20rpx;
}
.store-info .name{
height: 50rpx;
font-size: 36rpx;
font-weight: bold;
line-height: 50rpx;
color: #333333;
}
.store-info .tiem{
height: 30rpx;
font-size: 22rpx;
font-weight: 500;
line-height: 30rpx;
color: #333333;
}
.store-info .msg{
margin-top: 16rpx;
font-size: 22rpx;
font-weight: 500;
line-height: 30rpx;
color: #999999;
}
.store-info .name .hot-tag{
margin-right: 16rpx;
display: inline-block;
min-width: 60rpx;
height: 32rpx;
background: #FE4B26;
border-radius: 6px;
font-size: 20rpx;
text-align: center;
font-weight: 500;
line-height: 32rpx;
color: #FFFFFF;
}
.start-box{
margin: 22rpx 0;
height: 33rpx;
line-height: 33rpx;
font-size: 24rpx;
font-weight: 500;
color: #999999;
}
.start-box .st-img{
margin-right: 5rpx;
width: 25rpx;
height: 25rpx;
}
.store-logo{
width: 140rpx;
height: 140rpx;
}
.tabs-box{
position: absolute;
bottom: 0;
padding: 0 30rpx;
width: 100%;
height: 80rpx;
border-bottom: 1px solid #E6E6E6;
}
.tabs-box .tabs-item{
padding: 0 40rpx;
height: 40rpx;
font-size: 28rpx;
font-weight: bold;
line-height: 26px;
line-height: 40rpx;
color: rgba(153, 153, 153, 1);
opacity: 1;
}
.tabs-box .active{
color: #333;
}
.active::after{
position: relative;
bottom: -9rpx;
margin: 0 auto;
content: '';
display: block;
width: 40rpx;
height: 8rpx;
background: #49C0A2;
border-radius: 200rpx;
}
.tabs-item .num{
font-size: 20rpx;
}
.tabs-item:nth-child(1){
padding: 0 40rpx 0 0;
}
/* 评论页面 */
.comment-box{
margin: 0 auto;
width: 690rpx;
}
.comment-box .com-item{
margin-top: 30rpx;
}
.con-content .start-box{
margin: 10rpx 0 0;
}
.l-box .tit{
height: 45rpx;
font-size: 32rpx;
font-weight: bold;
line-height: 45rpx;
color: #333333;
}
.con-content .r-box{
height: 33rpx;
font-size: 24rpx;
font-weight: 400;
line-height: 33rpx;
color: #999999;
}
.com-item .con-content{
width: 580rpx;
}
.com-item .avatar{
width: 80rpx;
height: 80rpx;
border-radius: 50%;
}
.com-item .c-info{
padding: 20rpx 0;
font-size: 24rpx;
font-weight: 500;
line-height: 30rpx;
color: #333333;
}
.com-item .store-img-box{
margin: 0rpx;
padding: 0;
width: 580rpx;
height: 200rpx;
overflow-y: hidden;
overflow-x: scroll;
}
.com-item .img-scroll-box{
height: 180rpx;
}
.com-item .store-img-box .store-img{
width: 180rpx;
height: 180rpx;
}
/* 商家详情页 */
.de-item{
margin: 0 30rpx;
padding: 30rpx 0;
border-bottom: 1px solid #E6E6E6;
}
.de-item .l-icon,.de-item .r-icon{
width: 40rpx;
height: 40rpx;
}
.de-item .a-icon{
width: 48rpx!important;
height: 48rpx!important;
}
.de-item .text{
flex: 1;
padding: 0 30rpx;
font-size: 28rpx;
font-weight: 500;
line-height: 40rpx;
color: #333333;
}
.de-item .line{
margin: 0 40rpx;
color: rgba(153, 153, 153, 1);
}
.store-img-box{
width: 690rpx;
height: 204rpx;
}
.img-scroll-box{
width: auto;
overflow-x: scroll;
height: 144rpx;
}
.de-item .store-img{
display: inline-block;
margin-right: 20rpx;
width: 188rpx;
height: 144rpx;
}goods.js 产品假数据
var goods=[
{
id: '111',
name: '商品类1', // 商品类型
list: [ // 当前商品类型对应的所有商品
{
id: '010',
title: '商品类型title11',
pic: 'http://n.sinaimg.cn/translate/200/w1080h720/20180724/-_fe-hftenhz3076352.jpg',
price: '1.55',
detail: 'detail',
num: 0 // num是为了我方便对商品加减操作，让后端加的
},
{
id: '011',
title: '商品类型title12',
pic: 'http://n.sinaimg.cn/translate/200/w1080h720/20180724/-_fe-hftenhz3076352.jpg',
price: '1.55',
detail: 'detail',
num: 0 // num是为了我方便对商品加减操作，让后端加的
},
{
id: '012',
title: '商品类型title13',
pic: 'http://n.sinaimg.cn/translate/200/w1080h720/20180724/-_fe-hftenhz3076352.jpg',
price: '1.55',
detail: 'detail',
num: 0 // num是为了我方便对商品加减操作，让后端加的
}
]
},
{
id: '221',
name: '商类22', // 商品类型
list: [ // 当前商品类型对应的所有商品
{
id: '021',
title: '商品类型title22',
pic: 'http://n.sinaimg.cn/translate/200/w1080h720/20180724/-_fe-hftenhz3076352.jpg',
price: '1.55',
detail: 'detail',
num: 0 // num是为了我方便对商品加减操作，让后端加的
},
{
id: '022',
title: '商品类型title23',
pic: 'http://n.sinaimg.cn/translate/200/w1080h720/20180724/-_fe-hftenhz3076352.jpg',
price: '1.55',
detail: 'detail',
num: 0 // num是为了我方便对商品加减操作，让后端加的
},
{
id: '023',
title: '商品类型title24',
pic: 'http://n.sinaimg.cn/translate/200/w1080h720/20180724/-_fe-hftenhz3076352.jpg',
price: '1.55',
detail: 'detail',
num: 0 // num是为了我方便对商品加减操作，让后端加的
}
]
},
{
id: '331',
name: '商品33', // 商品类型
list: [ // 当前商品类型对应的所有商品
{
id: '031',
title: '商品类型title31',
pic: 'http://n.sinaimg.cn/translate/200/w1080h720/20180724/-_fe-hftenhz3076352.jpg',
price: '1.55',
detail: 'detail',
num: 0 // num是为了我方便对商品加减操作，让后端加的
},
{
id: '032',
title: '商品类型title32',
pic: 'http://n.sinaimg.cn/translate/200/w1080h720/20180724/-_fe-hftenhz3076352.jpg',
price: '1.55',
detail: 'detail',
num: 0 // num是为了我方便对商品加减操作，让后端加的
},
{
id: '033',
title: '商品类型title33',
pic: 'http://n.sinaimg.cn/translate/200/w1080h720/20180724/-_fe-hftenhz3076352.jpg',
price: '1.55',
detail: 'detail',
num: 0 // num是为了我方便对商品加减操作，让后端加的
}
]
},
]
exports.goods = goods;