用mysql写外卖订单程序_小程序外卖订单界面的示例代码

1.效果界面

2.涉及功能

*左侧商品类型、右侧商品可以相互控制；

*商品列表加减及购物车商品加减icon消失、显示；

*商品每一次加减，页面视图变化(数量、价格变化、购物车置灰)；

3.贴上所有代码

1.wxml

{ {item.name}}

{ {item.name}}

{ {itm.title}}

{ {itm.info}}

¥{ {itm.price}}

{ {totalNum}}

¥{ {totalMoney}}

去结算

已选商品

清空

{ {item.name}}

¥{ {item.price}}

{ {goodDetail.title}}

¥{ {goodDetail.price}}

{ {goodDetail.info}}

2.script

createPage({

data: {

foodsList: [], // 商品数据

cartList: [], // 购物车数据

isShowCartMask: false,

totalNum: 0,

totalMoney: 0,

initView: 'item0', // 根据此变量的变化，控制左侧选中状态、右侧滑动

curId: 'item0',

isShowDetail: false,

goodDetail: {},

screenWidth: 0, // 手机屏幕宽度

heightArray: [0] // 右侧每一个类型的高度区间数组

},

onLoad() {

this.getGoodsData()

},

methods: {

async getGoodsData() {

const that = this

const res = await getGoodsInfo({})

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.foodsList.length - 1; index++) {

hg += 70 + that.foodsList[index].list.length * 212

that.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.heightArray, scrollTop)

},

// 商品列表的减号点击

reduceNum(index, ind, item) {

const that = this

let val = 'foodsList[' + index + '].list[' + ind &