小程序外賣訂單界面的示例代碼
更新時間：2019年12月30日 16:14:32 作者：愛宜淡寫Vivan
這篇文章主要介紹了小程序外賣訂單界面的示例代碼，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
1.效果界面
2.涉及功能
*左側(cè)商品類型、右側(cè)商品可以相互控制；
*商品列表加減及購物車商品加減icon消失、顯示；
*商品每一次加減，頁面視圖變化（數(shù)量、價格變化、購物車置灰）；
3.貼上所有代碼
1.wxml
<view class="container">
<view class="index-cont">
<!-- 左邊類型 -->
<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>
<!-- 右邊產(chǎn)品 -->
<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" catchtap="reduceNum(index, ind, itm)"><image src="../../../static/images/reduce-icon.png" alt=""></image></view>
<input wx:if="{{itm.num !== 0}}" type="text" disabled wx:model="{{itm.num}}"/>
<view class="icon" catchtap="addNum(index, ind, itm)"><image src="../../../static/images/add-icon.png" alt=""></image></view>
</view>
</view>
</block>
</view>
</scroll-view>
</view>
<view class="index-cart">
<view class="left">
<view class="cart-num" wx:if="{{cartList.length === 0}}">
<image src="../../../static/images/cart.png"></image>
</view>
<view class="cart-num on" wx:else bindtap="showCartMask">
<image src="../../../static/images/cart.png"></image>
<text>{{totalNum}}</text>
</view>
<view class="cart-money">¥{{totalMoney}}</view>
</view>
<view class="order-btn" bindtap="submitOrder">去結(jié)算</view>
</view>
<!--購物車彈窗-->
<view class="dialog" wx:if="{{isShowCartMask && cartList.length !== 0}}" bindtap="hiddenCartMak()">
<view class="boxs" catchtap="stopMaopao()">
<view class="title-block">
<text>已選商品</text>
<view class="clear" bindtap="clearCart"><image src="../../../static/images/del.png"></image>清空</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="tit">{{item.name}}</view>
<view class="right">
<text>¥{{item.price}}</text>
<view class="box">
<view class="icon" bindtap="reduceCart(index, item)"><image src="../../../static/images/reduce-icon.png" alt=""></image></view>
<input type="text" disabled wx:model="{{item.num}}"/>
<view class="icon" bindtap="addCart(index, item)"><image src="../../../static/images/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="../../../static/images/close_ico.png"></image></view>
</scroll-view>
</view>
</view>
2.script
createPage({
data: {
foodsList: [], // 商品數(shù)據(jù)
cartList: [], // 購物車數(shù)據(jù)
isShowCartMask: false,
totalNum: 0,
totalMoney: 0,
initView: 'item0', // 根據(jù)此變量的變化，控制左側(cè)選中狀態(tài)、右側(cè)滑動
curId: 'item0',
isShowDetail: false,
goodDetail: {},
screenWidth: 0, // 手機屏幕寬度
heightArray: [0] // 右側(cè)每一個類型的高度區(qū)間數(shù)組
},
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()
},
// 設(shè)置高度區(qū)間 所有單位轉(zhuǎn)化為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)
}
},
// 獲取高度區(qū)間的下標(biāo)
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 + '].num'
this.setData({
[val]: item.num - 1
})
// 如果商品為0，就把當(dāng)前商品在購物車清除
// 如果不為0， 就將當(dāng)前商品數(shù)量減1
if (that.foodsList[index].list[ind].num === 0) {
that.removeAarry(that.cartList, item.id)
} else {
that.cartList.forEach((itm, i) => {
if (itm.id === item.id) {
let value = 'cartList[' + i + '].num'
that.setData({
[value]: itm.num - 1
})
}
})
}
this.computed()
},
// 商品列表的加號點擊
addNum(index, ind, item) {
const that = this
let val = 'foodsList[' + index + '].list[' + ind + '].num'
this.setData({
[val]: item.num + 1
})
// 如果商品為1，就把當(dāng)前商品加入購物車
// 否則， 就將當(dāng)前商品數(shù)量加1
if (that.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 }
that.cartList.push(val)
} else {
that.cartList.forEach((itm, i) => {
if (itm.id === item.id) {
let value = 'cartList[' + i + '].num'
that.setData({
[value]: itm.num + 1
})
}
})
}
this.computed()
},
// 購物車的減號點擊
reduceCart(index, item) {
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，就把當(dāng)前商品在購物車清除
// 如果不為0， 就將當(dāng)前商品數(shù)量減1
if (that.cartList[index].num === 0) {
that.removeAarry(that.cartList, item.id)
}
this.computed()
},
// 購物車的加號點擊
addCart(index, item) {
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.foodsList.forEach((item, i) => {
item.list.forEach((itm, j) => {
let value = 'foodsList[' + i + '].list[' + j + '].num'
that.setData({
[value]: 0
})
})
})
that.computed()
}
}
})
},
// 計算選擇商品總價格和總數(shù)量
computed() {
const that = this
let num = 0
let money = 0
that.cartList.forEach(item => {
num += item.num
money += parseFloat(item.price) * item.num
})
that.setData({
totalNum: num,
totalMoney: money
})
},
// 將數(shù)量為0的時候，對應(yīng)商品在購物車中刪除
removeAarry(arr, id) {
arr.forEach((item, index) => {
if (item.id === id) {
arr.splice(index, 1)
}
})
return arr
},
showCartMask() {
this.isShowCartMask = !this.isShowCartMask
},
hiddenCartMak() {
this.isShowCartMask = false
},
stopMaopao() {
},
showGoodDetail(item) {
this.goodDetail = item
this.isShowDetail = true
},
hideDetail() {
this.isShowDetail = false
},
// 訂單提交
submitOrder() {
}
}
})
3.css
<style lang='scss'>
@import '../../style/base.scss';
page {
height: 100%;
}
.container {
height: 100vh;
background-color: #fff;
box-sizing: border-box;
overflow: hidden;
.dialog1{
width: 100%;
height: 100vh;
position: fixed;
top: 0;
left: 0;
background-color: rgba(0,0,0, 0.5);
z-index: 4;
.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;
.img{
width: 100%;
height: 375rpx;
background: rgba(0,0,0,0.6);
}
.box{
padding: 20rpx 30rpx 40rpx;
box-sizing: border-box;
.tit{
font-size: 28rpx;
color: #333;
font-weight: bold;
}
.money{
font-size: 26rpx;
color: #f00;
margin: 10rpx 0;
}
.desc{
font-size: 22rpx;
color: #666;
line-height: 32rpx;
}
}
.close{
width: 50rpx;
height: 50rpx;
position: absolute;
right: 20rpx;
top: 20rpx;
display: flex;
align-items: center;
justify-content: center;
image{
width: 40rpx;
height: 40rpx;
}
}
}
}
.dialog{
width: 100%;
height: 100vh;
position: fixed;
top: 0;
left: 0;
background-color: rgba(0,0,0, 0.5);
z-index: 2;
.boxs{
position: fixed;
bottom: 80rpx;
left: 0;
right: 0;
z-index: 6;
background-color: #fff;
width: 100%;
max-height: 600rpx;
color: #333;
.title-block{
padding: 0 30rpx;
box-sizing: border-box;
display: flex;
align-items: center;
justify-content: space-between;
height: 70rpx;
background: #EEF0F1;
text{
font-size: 26rpx;
color: #666;
}
.clear{
font-size: 22rpx;
color: #888;
display: flex;
align-items: center;
image{
width: 24rpx;
height: 24rpx;
margin-right: 10rpx;
}
}
}
.content{
width: 100%;
max-height: 530rpx;
overflow-y: auto;
padding-bottom: 30rpx;
box-sizing: border-box;
.item{
width: 690rpx;
height: 80rpx;
line-height: 80rpx;
margin: 0 auto;
position: relative;
display: flex;
align-items: center;
justify-content: space-between;
&::after{
position: absolute;
width: 100%;
height: 1rpx;
background: #f2f2f2;
content: '';
bottom: 1rpx;
left: 0;
}
.tit{
width: 400rpx;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
font-size: 28rpx;
color: #333;
}
.right{
display: flex;
justify-content: flex-start;
align-items: center;
height: 80rpx;
text{
font-size: 26rpx;
color: #f00;
}
.box{
display: flex;
justify-content: flex-start;
align-items: center;
flex-wrap: nowrap;
margin-left: 20rpx;
height: 80rpx;
.icon{
width: 34rpx;
height: 34rpx;
display: flex;
align-items: center;
justify-content: center;
image{
width: 34rpx;
height: 34rpx;
}
}
input{
width: 60rpx;
height: 34rpx;
border: none;
color: #333;
text-align: center;
font-size: 26rpx;
}
}
}
}
}
}
}
.index-cont{
height: calc(100vh - 80rpx);
display: flex;
justify-content: space-between;
.index-left{
width: 160rpx;
height: 100%;
background: #efefef;
.item{
font-size: 26rpx;
color: #333;
border-bottom: 1rpx dashed #666;
height: 80rpx;
line-height: 80rpx;
padding: 0 20rpx;
box-sizing: border-box;
&.on{
background: #fff;
}
}
}
.index-right{
width: 590rpx;
height: 100%;
.boxs{
padding: 0 30rpx;
box-sizing: border-box;
width: 100%;
}
.index-title{
height: 70rpx;
line-height: 70rpx;
background: #f7f7f7;
padding-left: 30rpx;
font-size: 26rpx;
color: #666;
box-sizing: border-box;
}
.item{
padding: 30rpx 0;
box-sizing: border-box;
display: flex;
justify-content: space-between;
position: relative;
height: 212rpx;
&::after{
position: absolute;
top: 0rpx;
left: 0;
background: #ccc;
width: 100%;
height: 1rpx;
content: '';
}
.pic{
width: 150rpx;
height: 150rpx;
image{
width: 100%;
height: 100%;
}
}
.main{
width: 380rpx;
padding-left: 30rpx;
box-sizing: border-box;
.tit{
font-size: 26rpx;
color: #333;
font-weight: bold;
}
.desc{
font-size: 22rpx;
color: #999;
line-height: 30rpx;
margin: 5rpx 0 10rpx;
min-height: 65rpx;
}
.money{
font-size: 28rpx;
color: #f00;
}
}
.box{
display: flex;
justify-content: flex-start;
align-items: center;
flex-wrap: nowrap;
margin-left: 10rpx;
height: 34rpx;
position: absolute;
right: 0;
bottom: 30rpx;
.icon{
width: 34rpx;
height: 34rpx;
display: flex;
align-items: center;
justify-content: center;
image{
width: 34rpx;
height: 34rpx;
}
}
input{
width: 60rpx;
height: 34rpx;
border: none;
color: #333;
text-align: center;
font-size: 26rpx;
}
}
}
}
}
.index-cart{
width: 100%;
height: 80rpx;
display: flex;
align-items: center;
justify-content: flex-start;
position: relative;
z-index: 3;
.left{
width: 470rpx;
height: 100%;
background: #3e3a39;
display: flex;
align-items: center;
justify-content: flex-start;
.cart-num{
width: 100rpx;
height: 100rpx;
background: #6E6D6C;
position: relative;
padding:25rpx;
box-sizing: border-box;
border-radius: 100%;
top: -30rpx;
left: 22rpx;
&.on{
background: $base-color;
}
image{
width: 50rpx;
height: 50rpx;
}
text{
font-size: 20rpx;
color: #fff;
display: inline-block;
padding: 0 9rpx;
box-sizing: border-box;
position: absolute;
right: 3rpx;
top: -3rpx;
height: 30rpx;
line-height: 30rpx;
border-radius: 30rpx;
background: #f00;
}
}
.cart-money{
color: #fff;
font-size: 30rpx;
margin-left: 50rpx;
}
}
.order-btn{
width: 280rpx;
height: 100%;
background: $base-color;
font-size: 28rpx;
color: #fff;
display: flex;
align-items: center;
justify-content: center;
}
}
}
4.ps
小程序使用mpx為框架；
商品列表數(shù)據(jù)根據(jù)接口獲取，測試數(shù)據(jù)可以根據(jù)mock數(shù)據(jù)測試
實際數(shù)據(jù)類型是
goodLists: [
{
id: 'xx',
name: 'xx', // 商品類型
list: [ // 當(dāng)前商品類型對應(yīng)的所有商品
{
id: 'xx',
title: 'xx'，
pic: 'xx',
price: 'xx',
detail: 'xx',
num: '' // num是為了我方便對商品加減操作，讓后端加的
}
]
}
]
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要介紹了JavaScript定時器和優(yōu)化的取消定時器方法,本文著重講解一個優(yōu)化的取消定時器的方法,需要的朋友可以參考下2015-07-07
這篇文章主要為大家詳細(xì)介紹了javascript實現(xiàn)京東快遞單號的查詢效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-11-11
這篇文章主要為大家詳細(xì)介紹了js完整倒計時代碼,具有一定的參考價值，感興趣的小伙伴們可以參考一下2016-09-09
JS實現(xiàn)頁面跳轉(zhuǎn)參數(shù)不丟失的方法
這篇文章主要介紹了JS實現(xiàn)頁面跳轉(zhuǎn)參數(shù)不丟失的方法,結(jié)合實例形式對比分析了javascript URL加密函數(shù)escape()、encodeURI()與encodeURIComponent()的功能與相關(guān)使用技巧,需要的朋友可以參考下2016-11-11
uni-app 自定義底部導(dǎo)航欄的實現(xiàn)
這篇文章主要介紹了uni-app 自定義底部導(dǎo)航欄的實現(xiàn)，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-12-12
這篇文章主要為大家詳細(xì)介紹了Openlayers學(xué)習(xí)之地圖比例尺控件，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-09-09
這篇文章主要為大家詳細(xì)介紹了JS使用base64格式上傳文件，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-07-07
這篇文章主要為大家詳細(xì)介紹了JavaScript實現(xiàn)簡單音樂播放器，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2018-11-11
微信小程序wx.getUserInfo授權(quán)獲取用戶信息(頭像、昵稱)的實現(xiàn)
這篇文章主要介紹了微信小程序wx.getUserInfo授權(quán)獲取用戶信息(頭像、昵稱)的實現(xiàn)，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-08-08
