【套餐】基于微信小程序外卖点餐订餐系统 毕业设计

源代码下载地址：https://ke.qq.com/course/package/28654?tuin=2b10d56

有需要的请添加QQ 45157718（微信同号） 咨询

wxml代码

<!--顶部切换菜单-->
<view class='swiper-tab'>
  <view class='swiper-tab-list {{currentTab==0 ? "xuanzhong" : ""}}' data-current='0' bindtap='swichNav'>
    待付款
  </view>
  <view class='swiper-tab-list {{currentTab==1 ? "xuanzhong" : ""}}' data-current='1' bindtap='swichNav'>
    待发货
  </view>
  <view class='swiper-tab-list {{currentTab==2 ? "xuanzhong" : ""}}' data-current='2' bindtap='swichNav'>
    待收货
  </view>
  <view class='swiper-tab-list {{currentTab==3 ? "xuanzhong" : ""}}' data-current='3' bindtap='swichNav'>
    全部菜单
  </view>
</view>
<swiper current='{{currentTab}}' class='swiper-box' duration='300' style='height:{{winHeight -50}}px' bindchange='huadong'>
  
  <!--待付款-->
  <swiper-item>
    <scroll-view scroll-y style='height:{{winHeight-40}}px' class='cps'>
      <block wx:for="{{ddcps}}" wx:key="key" wx:if="{{item.zt==2}}">
        <view class='cp-danhao'>
          单号：{{item.danhao}} | 时间：{{item.shijian}}
        </view>
        <block wx:for="{{item.cps}}"  wx:key="key" wx:for-item="item2">
          <view class='cp'>
            <view class='cp-tupian'>
              <image class='cp-img' src='{{item2.tupian}}' mode='widthFix'></image>
            </view>
            <view class='cp-xinxi'>
              <view class="cp-mingcheng">{{item2.mingcheng}}</view>
              <view class="cp-xiaoshou">库存：{{item2.kucun}} | 限购：{{item2.xiangou}}</view>
              <view class="cp-jiage">￥：{{item2.jiage}}</view>
            </view>
            <view class='cp-shuliang'>
              {{item2.shuliang}} 件
            </view>
          </view>
        </block>
        <view class='cp-jiesuan'>
          共{{item.chanpinshu}}件商品， 产品金额：¥{{item.feiyong}}
        </view>
        <view class='cp-caozou'>
          <button size='mini' bindtap='quxiao' data-danhao='{{item.danhao}}'>取消订单</button>
          <button size='mini' bindtap='fukuan' data-danhao='{{item.danhao}}'>去付款</button>
        </view>
      </block>
    </scroll-view>
  </swiper-item>
  <!--待发货-->
  <swiper-item>
    <scroll-view scroll-y style='height:{{winHeight-40}}px' class='cps'>
      <block wx:for="{{ddcps}}"  wx:key="key" wx:if="{{item.zt==3}}">
        <view class='cp-danhao'>
          {{item.zt}}单号：{{item.danhao}} | 时间：{{item.shijian}}
        </view>
        <block wx:for="{{item.cps}}"  wx:key="key" wx:for-item="item2">
          <view class='cp'>
            <view class='cp-tupian'>
              <image class='cp-img' src='{{item2.tupian}}' mode='widthFix'></image>
            </view>
            <view class='cp-xinxi'>
              <view class="cp-mingcheng">{{item2.mingcheng}}</view>
              <view class="cp-xiaoshou">库存：{{item2.kucun}} | 限购：{{item2.xiangou}}</view>
              <view class="cp-jiage">￥：{{item2.jiage}}</view>
            </view>
            <view class='cp-shuliang'>
              {{item2.shuliang}} 件
            </view>
          </view>
        </block>
        <view class='cp-jiesuan'>
          共{{item.chanpinshu}}件商品， 产品金额：¥{{item.feiyong}} 【待发货】
        </view>
      </block>
    </scroll-view>
  </swiper-item>
  <!--待收货-->
  <swiper-item>
    <scroll-view scroll-y style='height:{{winHeight-40}}px' class='cps'>
      <block wx:for="{{ddcps}}"  wx:key="key" wx:if="{{item.zt==4}}">
        <view class='cp-danhao'>
          单号：{{item.danhao}} | 时间：{{item.shijian}}
        </view>
        <block wx:for="{{item.cps}}"  wx:key="key" wx:for-item="item2">
          <view class='cp'>
            <view class='cp-tupian'>
              <image class='cp-img' src='{{item2.tupian}}' mode='widthFix'></image>
            </view>
            <view class='cp-xinxi'>
              <view class="cp-mingcheng">{{item2.mingcheng}}</view>
              <view class="cp-xiaoshou">库存：{{item2.kucun}} | 限购：{{item2.xiangou}}</view>
              <view class="cp-jiage">￥：{{item2.jiage}}</view>
            </view>
            <view class='cp-shuliang'>
              {{item2.shuliang}} 件
            </view>
          </view>
        </block>
        <view class='cp-jiesuan'>
          共{{item.chanpinshu}}件商品， 产品金额：¥{{item.feiyong}}
        </view>
        <view class='cp-caozou'>
          <button size='mini' bindtap='shouhuo' data-danhao='{{item.danhao}}'>确认收货</button>
        </view>
      </block>
    </scroll-view>
  </swiper-item>
  <!--全部-->
  <swiper-item>
    <scroll-view scroll-y style='height:{{winHeight-40}}px' class='cps'>
      <block wx:for="{{ddcps}}"  wx:key="key">
        <view class='cp-danhao'>
          单号：{{item.danhao}} | 时间：{{item.shijian}}
        </view>
        <block wx:for="{{item.cps}}"  wx:key="key" wx:for-item="item2">
          <view class='cp'>
            <view class='cp-tupian'>
              <image class='cp-img' src='{{item2.tupian}}' mode='widthFix'></image>
            </view>
            <view class='cp-xinxi'>
              <view class="cp-mingcheng">{{item2.mingcheng}}</view>
              <view class="cp-xiaoshou">库存：{{item2.kucun}} | 限购：{{item2.xiangou}}</view>
              <view class="cp-jiage">
              ￥：{{item2.jiage}}             
              </view>
            </view>
            <view class='cp-shuliang'>
              <view>{{item2.shuliang}} 件</view>
              <view wx:if="{{item.zt==5}}">
               <block wx:if="{{item2.yn_pinglun_gwc=='是'}}" class="myred">已评</block>
               <block wx:else>
                  <navigator class="myred" url="/pages/chanpin/pingjia?danhao={{item.danhao}}&gwc_id={{item2.gwc_id}}&cp_id={{item2.cp_id}}">评论</navigator>
                </block>      
              </view>         
            </view>
          </view>
        </block>
        <view class='cp-jiesuan'>
          共{{item.chanpinshu}}件商品， 产品金额：¥{{item.feiyong}}
        </view>
        <view class='cp-caozou' wx:if="{{item.zt==2}}">
          <button size='mini' bindtap='quxiao' data-danhao='{{item.danhao}}'>取消订单</button>
          <button size='mini' bindtap='fukuan' data-danhao='{{item.danhao}}'>去付款</button>
        </view>
        <view class='cp-caozou' wx:if="{{item.zt==3}}">
          已经付款，等待发货
        </view>
        <view class='cp-caozou' wx:if="{{item.zt==4}}">
          <button size='mini' bindtap='shouhuo' data-danhao='{{item.danhao}}'>确认收货</button>
        </view>
        <view class='cp-caozou' wx:if="{{item.zt==5}}">
          订单已经完结
        </view>
      </block>
    </scroll-view>
  </swiper-item>
</swiper>
<view style="height:55px;"></view>
 
<view class='sys_caidan'>
  <navigator class='sys_caidan_xiangmu' url='/pages/index/index' open-type='switchTab'>
    <image src='/images/a-on.png' class='sys_caidan_xiangmu_img'></image>
    <view class='sys_caidan_xiangmu_txt sys_caidan_xiangmu_xuanzhong'>首页</view>
  </navigator>
  <navigator class='sys_caidan_xiangmu'  url='/pages/fenlei/index' open-type='switchTab'>
    <image src='/images/b-off.png' class='sys_caidan_xiangmu_img'></image>
    <view class='sys_caidan_xiangmu_txt'>分类</view>
  </navigator>
  <navigator class='sys_caidan_xiangmu' url='/pages/huiyuan/gouwuche/che_list'  open-type='switchTab'>
    <image src='/images/c-off.png' class='sys_caidan_xiangmu_img'></image>
    <view class='sys_caidan_xiangmu_txt'>购物车</view>
  </navigator>
  <navigator class='sys_caidan_xiangmu' url='/pages/huiyuan/index'  open-type='switchTab'>
    <image src='/images/d-off.png' class='sys_caidan_xiangmu_img'></image>
    <view class='sys_caidan_xiangmu_txt'>会员</view>
  </navigator>
     
</view>

wxss代码

/*菜单切换样式*/ 
.swiper-tab {
  width: 100%;
  border-bottom: 1px solid gray;
  text-align: center;
  line-height: 31px;
  display: flex;
}
.swiper-tab-list {
  display: inline-block;
  width: 33%;
  color: gray;
}
.xuanzhong {
  color: tomato;
  border-bottom: 3px solid tomato;
}
.swiper-box {
  width: 100%;
  height: 100%;
  display: block;
  overflow: scroll;
}
/*订单产品样式*/
.cps{
  display: flex;
  flex-direction: ;
  box-sizing: border-box;
  padding: 3px;
}
.cp-danhao{
  background-color: #f2f2f2;
  font-size: 12px;
  color: gray;
  height: 30px;
  line-height: 30px;
}
.cp{
  display: flex;
  padding: 5px;
  border-bottom: 1px solid gainsboro;
}
.cp-tupian{
  width: 20%;
}
.cp-img{
  width: 100%;
}
.cp-xinxi{
  width: 65%;
  margin-left: 5px;
  display: flex;
  flex-direction: column;
  flex:1;
}
.cp-mingcheng{
  font-size: 14px;
  width: 95%;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.cp-xiaoshou{
  font-size: 12px;
  color: gray;
  padding: 3px 0;
}
.cp-jiage{
  font-size: 13px;
  color: red;
  display: inline;
}
.cp-shuliang{
  width: 15%;
}
.myred{ color: red; font-weight: bold;}
.cp-jiesuan{
  font-size: 13px;
  color: gray;
  height: 30px; line-height: 30px; text-align: center;
  border-bottom: 1px solid gainsboro;
}
.cp-caozou{
   height: 40px;
   display: flex;
   align-items: center;
   justify-content: center;
  
}

有需要的请添加QQ 45157718（微信同号） 咨询