微信小程序在線點餐外賣系統 畢業設計 課程設計（2）點餐

默認

操作後效果圖

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;
}