【套餐】基于微信小程序外卖点餐订餐系统 毕业设计 源代码下载地址:https://ke.qq.com/course/package/28654?tuin=2b10d56 有需要的请添加QQ 45157718(微信同号) 咨询
wxml代码
<view class='fenlei'>
<!-- 左侧分类 -->
<view class="zuo" style="height:{{winHeight-40}}px">
<block wx:for="{{navList}}" wx:key="*this">
<view class="type-nav {{curNav == item.id ? 'selected' : ''}}" bindtap="selectNav" data-index="{{index}}" data-id="{{item.id}}">
{{item.name}}
</view>
</block>
</view>
<scroll-view
scroll-y style="height: {{winHeight-40}}px;" class='zuixin'
>
<block wx:for="{{zuixins}}" wx:key="*this">
<view class='paihang-item'>
<navigator url='/pages/chanpin/xiangxi?cpid={{item.cp_id}}&cpmc={{item.cp_mingcheng}}' class='paihang-tupian'>
<image class='paihang-img' src='{{item.cp_tupian}}' mode='widthFix'></image>
</navigator>
<view class='paihang-xinxi'>
<text class='paihang-mingcheng'>{{item.cp_mingcheng}}</text>
<text class='paihang-jianjie'>{{item.jianjie}}</text>
<text class='paihang-xiaoshou'> 月销售:134 份 </text>
<view class="diancan">
<view class="diancan_zuo">
<text class='paihang-jiage0'> ¥</text>
<text class='paihang-jiage1'> {{item.jiage}}</text>
</view>
<view class="diancan_you">
<image class="diancan_you1" src="/img/jian.png" mode="widthFix" wx:if="{{item.num>0}}"
data-gwcid="{{item.gwc_id}}" data-shuliang="{{item.num}}" data-jiage="{{item.jiage}}" bindtap="myremove"
></image>
<view class="diancan_you2" wx:if="{{item.num>0}}">{{item.num}}</view>
<image class="diancan_you3" src="/img/jia.png" mode="widthFix"
data-gwcid="{{item.gwc_id}}" data-shuliang="{{item.num}}" data-jiage="{{item.jiage}}"
data-cpid="{{item.cp_id}}" data-cpmc="{{item.cp_mingcheng}}"
bindtap="myadd"
></image>
</view>
</view>
</view>
</view>
</block>
</scroll-view>
<view class='dibu'>
<view class='feiyong' style='width:70%;'>
<view class='feiyong-tupian'>
<image class='feiyong-img' src='/img/sp02.png'></image>
</view>
<view class='feiyong-shu'>¥:{{zongfeiyong}}</view>
</view>
<view class='caozuo' bindtap='jiesuan' style='width:30%'>
去结算
</view>
</view>
</view>
wxss代码 .fenlei{
height: 100%;
box-sizing: border-box;
background-color: #f4f4f4;
display: flex;
flex-direction: row;
width: 100%;
}
.zuo{
width:20%;
border-right: 1px solid #ddd;
font-size: .85rem; height: 100%;
display: flex;
flex-direction: column;
}
.type-nav{
position: relative;
text-align: center;
padding: 10px 0;
border-bottom: 1px solid #ddd;
z-index: 10;
}
.selected{
margin-right: -1px;
padding-left:-1px;
color: #333;
background-color: #fff;
}
/*销售排行*/
.zuixin{width: 80%; background-color: white;}
.paihang-item {
display: flex;
padding: 5px;
width: 100%;
}
.paihang-tupian {
width: 30%;
}
.paihang-img {
width: 100%;
border: 1px solid gainsboro;
border-radius: 5px;
box-shadow: 0px 2px 2px gainsboro;
}
.paihang-xinxi {
width: 70%;
margin-left: 5px;
margin-right: 10px;
display: flex;
flex-direction: column;
}
.paihang-mingcheng {
font-size: 15px;
font-weight: bold;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
.paihang-jianjie {
font-size: 13px;
color: gray;
margin: 5px 0px;
}
.paihang-xuhao {
color: green;
font-size: 13px;
}
.paihang-xiaoshou {
font-size: 11px;
color: gray;
}
.paihang-jiage0 {
font-size: 10px;
color: red;
}
.paihang-jiage1 {
font-size: 13px;
color: red;
}
.diancan{display: flex;}
.diancan_zuo{flex-grow: 1;}
.diancan_you{display: flex;align-items: center; padding-right: 10px;}
.diancan_you1{width: 20px;}
.diancan_you2{width: 2em; text-align: center;}
.diancan_you3{width: 20px;}
/*底部菜单*/
.dibu {
border-top: 1px solid rgb(212, 212, 212);
position: absolute;
bottom: 0;
background-color: #f7f7f7;
display: flex;
width: 100%;
align-items: center;
justify-content: center;
height: 40px;
}
.feiyong {
display: flex;
position: relative;
align-items: center;
justify-content: center;
}
.feiyong-tupian {
position: absolute;
top: -30px;
left: 10px;
background-color: antiquewhite;
padding: 5px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
border: 1px dotted gainsboro;
}
.feiyong-img {
width: 30px;
height: 30px;
}
.feiyong-shu {
color: red;
}
.caozuo {
background-color: orangered;
color: white;
height: 40px;
text-align: center;
line-height: 40px;
}
有需要的请添加QQ 45157718(微信同号) 咨询
|