html页面

.

<view class="container"><view class="store-box"><view class="st-bg"></view><view class=" flex justify-between store-info"><view class=" flex flex-direction justify-start" style="width:530rpx"><view class="name">热门热门热门</view><view class="start-box flex"><image wx:for="{{4}}" class="st-img" src="../../../images/store/start.png"></image><image class="st-img" src="../../../images/store/unstart.png"></image><view class="text">4.2分数</view></view><view class="tiem">营业时间:9:00~22:00营业</view><view class="msg">公告：可随时联系我们，我们提供外卖服务</view></view><image class="store-logo" src="../../../images/store/logo.png" alt="" /></view><view class="flex justify-start align-center tabs-box"><view bindtap="changeCenten" data-id="1" class="tabs-item {{tabs==1?'active':''}}">商品</view><view bindtap="changeCenten" data-id="2" class="tabs-item {{tabs==2?'active':''}}">评价<textclass="num">(241)</text></view><view bindtap="changeCenten" data-id="3" class="tabs-item {{tabs==3?'active':''}}">商家</view></view></view><!-- 商品下单页面 --><view class="index-cont" wx:if="{{tabs==1}}"><!-- 左边类型 --><view class="index-left"><view wx:for="{{foodsList}}" wx:key="index" class="item {{curId === 'item'+index?'on':''}}"data-id="item{{index}}" bindtap="scrollToViewFn">{{item.name}}</view></view><!-- 右边产品 --><scroll-view class="index-right" scroll-y="{{true}}" scroll-into-view="{{initView}}" scroll-with-animation="true"bindscroll="onPageScroll"><view class="boxs"><block wx:for="{{foodsList}}" wx:key="index"><view class="index-title" id="item{{index}}">{{item.name}}</view><view class="item" wx:for="{{item.list}}" wx:key="ind" wx:for-item="itm" wx:for-index="ind"bindtap="showGoodDetail(itm)"><view class="pic"><image src="{{itm.pic}}" mode="aspectFill"></image></view><view class="main"><view class="tit">{{itm.title}}</view><view class="desc">{{itm.info}}</view><view class="money">¥{{itm.price}}</view></view><view class="box"><view wx:if="{{itm.num !== 0}}" class="icon" data-index="{{index}}" data-ind="{{ind}}" data-item="{{itm}}"catchtap="reduceNum"><image src="../../../images/store/reduce-icon.png" alt=""></image></view><input wx:if="{{itm.num !== 0}}" type="text" disabled value="{{itm.num}}" /><view class="icon" data-index="{{index}}" data-ind="{{ind}}" data-item="{{itm}}" catchtap="addNum"><image src="../../../images/store/add-icon.png" alt=""></image></view></view></view></block></view></scroll-view></view><view class="index-cart" wx:if="{{tabs==1}}"><view class="left"><view class="cart-num" wx:if="{{cartList.length === 0}}"><image src="../../../images/store/cart.png"></image></view><view class="cart-num on" wx:else bindtap="showCartMask"><image src="../../../images/store/cart.png"></image><view class="total-box"><text class="mon">{{totalNum}}</text></view></view><view class="cart-money flex flex-direction content"><view class="mon">¥{{totalMoney}}</view><view class="lable">本单合计</view></view></view><view class="order-btn" bindtap="submitOrder">去结算</view></view><!--购物车弹窗--><!-- wx:if="{{isShowCartMask && cartList.length !== 0}}" --><view class="dialog {{isShowCartMask && cartList.length !== 0?'':'hide'}}" bindtap="hiddenCartMak"><view class="boxs" catchtap="stopMaopao()"><view class="title-block"><text>已选商品</text><view class="clear" bindtap="clearCart">X</view></view><scroll-view class="content" scroll-y="{{true}}" scroll-with-animation="true"><block wx:for="{{cartList}}" wx:key="index"><view class="item" id="{{item.view}}"><view class="pic"><image src="{{item.pic}}" mode="aspectFill"></image></view><view class="main"><view class="tit">{{item.name}}</view><view class="desc">{{item.info}}</view><view class="money">¥{{item.price}}</view></view><view class="right"><view class="box"><view class="icon" data-index="{{index}}" data-item="{{item}}" bindtap="reduceCart"><image src="../../../images/store/reduce-icon.png" alt=""></image></view><input type="text" disabled value="{{item.num}}" /><view class="icon" data-index="{{index}}" data-item="{{item}}" bindtap="addCart"><image src="../../../images/store/add-icon.png" alt=""></image></view></view></view></view></block></scroll-view></view></view><!--商品详情弹窗--><view class="dialog1" wx:if="{{isShowDetail}}"><scroll-view class="detbox" scroll-y="{{true}}" scroll-with-animation="true"><image class="img" src="{{goodDetail.pic}}" mode="aspectFit"></image><view class="box"><view class="tit">{{goodDetail.title}}</view><view class="money">¥{{goodDetail.price}}</view><view class="desc">{{goodDetail.info}}</view></view><view class="close" bindtap="hideDetail"><image src="../../../images/store/close_ico.png"></image></view></scroll-view></view><!-- 评价内容 --><view class="comment-box" wx:if="{{tabs==2}}"><view class="flex justify-between com-item"><image class="avatar" src="../../../images/store/logo.png"></image><view class="con-content"><view class="flex justify-between tit-box"><view class="l-box"><view class="tit">学习使我快乐</view><view class="start-box flex"><image wx:for="{{4}}" class="st-img" src="../../../images/store/start.png"></image><image class="st-img" src="../../../images/store/unstart.png"></image></view></view><view class="r-box">2020.11.14</view></view><view class="c-info">不错不错，吃的很快就完成上菜了，而且价格也比我预想的要便宜，味道也不错</view><view class=" store-img-box de-item"><view class="img-scroll-box" style="width: {{10*200}}rpx;"><image class="store-img" wx:for="{{10}}" src="../../../images/store/logo.png"></image></view></view></view></view></view><!-- 商家内容 --><view class="store-detail"  wx:if="{{tabs==3}}"><view class="flex de-item"><image class="a-icon" src="../../../images/store/location.png"></image><view class="text">深圳市宝安区西乡街道预约社区轻铁花园820栋129</view><view class="line">|</view><image class="r-icon" src="../../../images/store/phone.png"></image></view><view class=" store-img-box de-item"><view class="img-scroll-box" style="width: {{10*209}}rpx;"><image class="store-img" wx:for="{{10}}" src="../../../images/store/logo.png"></image></view></view><view class="flex de-item"><image class="l-icon" src="../../../images/store/date.png"></image><view class="text">营业时间：9:00-22:00</view></view><view class="flex de-item"><image class="l-icon" src="../../../images/store/msg.png"></image><view class="text">公告：可随时联系我们，我们提供外卖服务</view></view></view>
</view>

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 = reswx.getSystemInfo({success: (ress) => {that.screenWidth = ress.windowWidth}})this.getHeightSection()},// 设置高度区间 所有单位转化为rpxgetHeightSection() {const that = thislet hg = 0for (let index = 0; index < that.data.foodsList.length - 1; index++) {hg += 70 + that.data.foodsList[index].list.length * 212that.data.heightArray.push(hg)}},// 获取高度区间的下标getHeightIndex(arr, hg) {const that = thisarr.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 = thislet scrollTop = e.detail.scrollTop * 750 / that.screenWidththis.getHeightIndex(that.data.heightArray, scrollTop)},// 商品列表的减号点击reduceNum(e) {const that = thislet {ind,index,item} =e.currentTarget.datasetvar cartList = that.data.cartListlet val = 'foodsList[' + index + '].list[' + ind + '].num'this.setData({[val]: item.num - 1})// 如果商品为0，就把当前商品在购物车清除// 如果不为0， 就将当前商品数量减1if (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 - 1that.setData({cartList: cartList})}})}this.computed()},// 商品列表的加号点击addNum(e) {let {ind,index,item} =e.currentTarget.datasetconst that = thislet cartList=that.data.cartListlet val = 'foodsList[' + index + '].list[' + ind + '].num'console.log("val",val)this.setData({[val]: item.num + 1})// 如果商品为1，就把当前商品加入购物车// 否则， 就将当前商品数量加1if (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.datasetconst that = thislet 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， 就将当前商品数量减1if (that.data.cartList[index].num === 0) {that.removeAarry(that.data.cartList, item.id)}this.computed()},// 购物车的加号点击addCart(e) {let {index,item} =e.currentTarget.datasetconsole.log("ee",e.currentTarget.dataset)const that = thislet val = 'cartList[' + index + '].num'that.setData({[val]: item.num + 1})this.computed()},// 清空购物车clearCart() {const that = thiswx.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 = thislet num = 0let money = 0console.log("computed:",that.data.cartList)that.data.cartList.forEach(item => {num += item.nummoney += 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.isShowCartMaskthis.setData({"cartList":this.data.cartList,'isShowCartMask':!this.data.isShowCartMask})},hiddenCartMak() {this.setData({'isShowCartMask':false})//  this.isShowCartMask = false},stopMaopao() {},showGoodDetail(item) {this.goodDetail = itemthis.isShowDetail = true},hideDetail() {this.setData({'isShowDetail':false})},// 订单提交submitOrder() {},changeCenten(e){console.log(e)let tabs=e.currentTarget.dataset.idthis.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;

小程序外卖订单界面的 代码相关推荐

1. 外卖订单详情界面android,小程序外卖订单界面

   1.效果界面 2.涉及功能 *左侧商品类型.右侧商品可以相互控制: *商品列表加减及购物车商品加减icon消失.显示: *商品每一次加减,页面视图变化(数量.价格变化.购物车置灰): 3.贴上所有代码 ...

2. 构建外卖系统小程序，订单管理功能实现步骤详解

   外卖系统小程序是近年来越来越受欢迎的一种订餐方式,方便快捷,并且可以减少人与人之间的接触,更加卫生安全.为了搭建一个完善的外卖系统小程序,订单管理功能是必不可少的一部分.在本文中,我们将详细介绍如何实 ...

3. 微信点餐小程序(外卖配送)解决方案

   点餐小程序.餐厅小程序,连接线下服务场景,使用方便体验好,打造营销+会员+点餐+支付+外卖等一体化服务开发解决方案 一.开发成本低,用户易获取,流程体验好 ● 商家无需高昂的开发费用,简单几步授权绑定 ...

4. 微信小程序的订单评论页面-仿淘宝

   微信小程序的订单评论页面-仿淘宝 在网上搜了下,大部分都挺麻烦的,所以自己写了个,感觉还可以 先看效果图: 需要用到的图片: 上代码: wxml: <view class='contains'& ...

5. 在微信小程序上,帮助中心界面实现类似手风琴案例

   在微信小程序上,帮助中心界面实现类似手风琴案例 wxml <view class="container"><block wx:for="{{arrdat ...

6. 微信小程序上线订单管理功能：实现订单管理、售后维权一体化

   [TechWeb]3月13日消息,微信小程序正式上线订单管理功能,可支持用户统一查看小程序交易订单并进行管理. 如今在小程序"云逛街"早已成了微信用户的新潮流.为了方便用户对小程序 ...

7. 外卖返利系统,外卖返利系统小程序,外卖系统,返利系统

   咕咕驴外卖返利系统,外卖返利系统小程序,外卖系统.包含淘客公众号+淘客小程序+淘客返利机器人+淘客共享APP+外卖返利小程序. 外卖返利系统|外卖返利系统小程序,外卖系统,返利系统 外卖CPS系统之小 ...

8. 微信小程序汇率计算界面

   微信小程序汇率计算界面 最近在学习微信小程序,自己制作了一个自己想制作的小应用--汇率计算界面(真不知道为什么自己对汇率那么感兴趣XD ) 数据接入 在获取数据之前先在data里面添加几个参数 mon ...

9. 小程序的支付的完整代码(php)

   小程序的支付的完整代码(php) 下面为后台代码 function pay(){$openid = "用户的openid" $money ="需要支付的金额" ...

最新文章

1. 【C++】C/C++ 中的单例模式
2. win11 WSL centos7安装docker命令整理
3. Linux中DD命令详解
4. 音视频技术开发周刊 | 225
5. Java抽象类、接口、类的特殊成员
6. php 爬数据库,php爬虫爬取数据并存储至数据库
7. 什么是华为数通？ 华为数通HCIE学些什么？
8. 抽象代数的代码实现（1） 置换群
9. 走进大数据丨 一条让我虎躯一震的SQL
10. app开发者帐号（个人开发帐号、团队帐号、企业帐号、教育帐号）
11. JavaScript写一个虚拟软键盘，可拼音输入
12. [转]中国将建口径8米巨型太阳望远镜
13. NOIP复习篇———动态规划
14. 佳能 Canon *.CR2 檔案格式 外部資源
15. psapi.lib,psapi.h,psapi.dll下载
16. 网上惊现刘翔等30位明星QQ号.
17. Cris 的 Scala 笔记整理（九）：面向对象高级
18. java如何调用微信功能_Java编程调用微信分享功能示例
19. R语言中的数学计算（转载）
20. 三星mzvlb1t0hblr是什么固态_三星MZVLB512HAJQ-000L7 SSD固态硬盘开机卡死在LOGO界面数据恢复成功...

热门文章

1. php用rectangle长方形的面积,PHP中长方形的面积怎样求【php问题】,PHP
2. # Monaco Editor 使用
3. android -------- 颜色的半透明效果配置
4. Unicode字碼分佈表(zz)
5. Android获取手机联系人匹配用户表并按字母A Z排序展示
6. SQL中round()函数的使用
7. redux——阮一峰
8. 【记录日常】解决Mac M1录屏带系统声音的方法（Quicktime Player+Blackhole）
9. 文本分类的特征提取算法
10. 手机节省流量的小妙招，2种方法都能够节省不少，看完记得分享哦