|
【套餐】基于微信小程序外卖点餐订餐系统 毕业设计 源代码下载地址：https://ke.qq.com/course/package/28654?tuin=2b10d56 有需要的请添加QQ 45157718（微信同号） 咨询
 
wxml代码
<!--广告图：直接显示（”够正够全够低价“这张图）；学习所用，正式使用可以删除-->
<view class="ad01" wx:if="{{jieguo2}}">
<!--图片的模式设置为widthFix，则按宽度自动缩放-->
<!--这里的图片地址是小程序根目录图片文件夹内，如果是服务器地址必须是带https的绝对地址-->
<!--测试的时候（不校验域名）可以是http或者localhost之类，上线运行必须是https-->
<!--https需要安装ssl证书-->
<image mode="widthFix" class='ad01-img' src="/tupian/ad01.png"></image>
</view>
<!--广告图：根据if语句中的条件(true 或 false)显示 “欢迎大家学习”这张图；学习所用，正式使用可以删除-->
<!--这里的变量jieguo的值在JS代码中的data区块定义为：true (注意没有单或者双引号)-->
<view class="ad01" wx:if="{{jieguo2}}"> <!--我们设置了jieguo=true; jieguo2=false-->
<!--下面的图片地址是正式上线所用的标准，带https的图片的网络绝对地址-->
<!--因为小程序的大小限制在2M以内，所以产品图片都需要放服务器上，通过绝对地址引用-->
<image mode="widthFix" class='ad01-img' src="https://www.yaoyiwangluo.com/wx/ad02.png"></image>
</view>
<!--下面的图片地址通过变量来代替，和上面图片显示一样的结果-->
<view class="ad01" wx:if="{{jieguo2}}">
<!--ad_img2的值和上一张图片的src一致https://www.yaoyiwangluo.com/wx/ad02.png，所以显示的是一样-->
<image mode="widthFix" class='ad01-img' src="{{ad_img2}}"></image>
</view>
<!--广告图结束-->
<!--纯静态轮播-->
<!--
indicator-dots:是否显示面板指示点(默认false);
autoplay:是否自动切换(默认false);
vertical：滑动方向是否为纵向(默认false);
interval:自动切换时间间隔(毫秒，纯数字，无需后面跟上单位)；
duration：滑动动画时长(毫秒，纯数字，无需后面跟上单位)；
*注意：swiper 滑动切换会有一个默认的高度 150px，如果需要改变搞定在swiper开始添加style样式；
-->
<swiper
indicator-dots="{{true}}"
vertical="{{false}}"
autoplay="{{true}}"
interval="3000"
duration="500"
style='height:120px;' wx:if="{{jieguo2}}"
>
<!--第一个滑动选项-->
<swiper-item>
<!--这里给第一张图片添加链接，注意url后面的地址是/开头（根目录）-->
<navigator url='/pages/01jichu/scroll-view'>
<!--本地图片地址src后面也是/开头（根目录）-->
<image src="/tupian/1.jpg" class="slide-image" />
</navigator>
</swiper-item>
<!--第2个滑动选项，每个swiper-item表示一个滑动，而不是将很多图片写在一个swiper-item里面-->
<swiper-item>
<image src="/tupian/2.jpg" class="slide-image" />
</swiper-item>
<swiper-item>
<image src="/tupian/3.jpg" class="slide-image" />
</swiper-item>
</swiper>
<!--轮播1：远程数据（图片地址）【简易数组】-->
<!--远程数据地址：http://www.yaoyiwangluo.com/wxshop/100-lunbotupian.html 模拟数据-->
<swiper indicator-dots="{{indicatorDots}}" vertical="{{vertical}}" autoplay="{{autoplay}}"
interval="{{interval}}" duration="{{duration}}" wx:if="{{jieguo2}}">
<!--循环显示获取的数组images：图片-->
<block wx:for="{{images}}" wx:key="a001">
<swiper-item>
<image src="{{item}}" class="slide-image2" />
</swiper-item>
</block>
</swiper>
<!--轮播：远程数据（图片地址+连接地址）【对象数组，数组中的每个元素包含图片地址+链接地址】-->
<view ><!--swiper属性里面的设置相比上面，多了个if判断是否显示，jieguo=true; jieguo2=false-->
<!--远程数据地址：http://www.yaoyiwangluo.com/wxshop/100-lunbotupian-link.html 模拟数据-->
<swiper indicator-dots="{{indicatorDots}}" vertical="{{vertical}}" autoplay="{{autoplay}}"
interval="{{interval}}" duration="{{duration}}" wx:if="{{jieguo}}">
<block wx:for="{{images2}}" wx:key="a002" style='height:120px;'>
<!--给每个swiper-item外围添加了链接-->
<navigator url='{{item.dizhi}}'>
<swiper-item>
<image src="{{item.tupian}}" class="slide-image2" />
</swiper-item>
</navigator>
</block>
</swiper>
</view>
<!--快捷菜单-->
<view class='menu'>
<navigator url='/pages/gongyong/chanpin_list' class='menu-item'>
<image src='/img/menu01.png' mode='widthFix' class='menu-img'></image>
<text class='menu-mc'>所有菜品</text>
</navigator>
<navigator url='/pages/fenlei/index' open-type="switchTab" class='menu-item'>
<image src='/img/menu02.png' mode='widthFix' class='menu-img'></image>
<text class='menu-mc'>我要点餐</text>
</navigator>
<navigator url='/pages/gongyong/xinxi_list?cs_lxid=236' class='menu-item'>
<image src='/img/menu06.png' mode='widthFix' class='menu-img'></image>
<text class='menu-mc'>活动列表</text>
</navigator>
<navigator url='/pages/guanyu/fangkui' class='menu-item'>
<image src='/img/menu05.png' mode='widthFix' class='menu-img'></image>
<text class='menu-mc'>留言反馈</text>
</navigator>
</view>
<!--获取web网站后台发布的最新3条信息-->
<!--远程地址：http://www.yaoyiwangluo.com/wx_news_list.asp 【对象数组】-->
<block wx:for="{{xinxis}}" wx:key="{{item.myid}}">
<navigator url='/pages/gongyong/xinxi_info?cs_xxid={{item.myid}}' class='xinxi'>
<image class='xinxi-icon' src='/img/news.png'></image>
<text class='xinxi-text'>{{item.myshijian}} {{item.mybiaoti}}</text>
<image class='xinxi-arrow' src='/img/right.png'></image>
</navigator>
</block>
<!--区块标题-最新上架产品; 更多链接到所有产品页面-->
<view class='qukuai'>
<view class='y01'></view>
<text class='t01'>最新上架菜品</text>
<navigator url="/pages/gongyong/chanpin_list" class='m01'>更多></navigator>
</view>
<view class='zuixin'>
<!--navigator url='' class='zuixin-item'>
<image src='/tupian/cp01.jpg' mode='widthFix' class='zuixin-img'></image>
<text class='zuixin-mc'>产品名称0123456789788111aaaa</text>
<view>
<text class='zuixin-jiage0'>¥</text>
<text class='zuixin-jiage1'>188.00</text>
<text class='zuixin-jiage2'>456人付款</text>
</view>
</navigator>
<navigator url='' class='zuixin-item'>
<image src='/tupian/cp02.jpg' mode='widthFix' class='zuixin-img'></image>
<text class='zuixin-mc'>产品名称2</text>
<view>
<text class='zuixin-jiage0'>¥</text>
<text class='zuixin-jiage1'>166.00</text>
<text class='zuixin-jiage2'>536人付款</text>
</view>
</navigator-->
<!--远程数据（对象数组）：http://www.yaoyiwangluo.com/wx_CpList_top4.asp-->
<!--获取的远程数据赋值给数组变量：zuixins；然后循环显示该数组的内容-->
<block wx:for="{{zuixins}}" wx:key="{{item.cp_id}}">
<!--每个产品会链接到详细页面，需要的参数：产品id+产品名称-->
<navigator url='/pages/chanpin/xiangxi?cpid={{item.cp_id}}&cpmc={{item.cp_mingcheng}}' class='zuixin-item'>
<image src='{{item.cp_tupian}}' mode='widthFix' class='zuixin-img'></image>
<text class='zuixin-mc'>{{item.cp_mingcheng}}</text>
<view>
<text class='zuixin-jiage0'>价格：¥</text>
<text class='zuixin-jiage1'>{{item.jiage}}</text>
<text class='zuixin-jiage2'></text>
</view>
</navigator>
</block>
</view>
<!--销售排行-->
<view class='qukuai'>
<view class='y01'></view>
<text class='t01'>菜品排行</text>
<navigator url="/pages/gongyong/chanpin_list" class='m01'>更多></navigator>
</view>
<!--navigator url='' class='paihang-item'>
<view class='paihang-tupian'>
<image class='paihang-img' src='/tupian/cp01.jpg' mode='widthFix'></image>
</view>
<view class='paihang-xinxi'>
<text class='paihang-mingcheng'>产品名称</text>
<text class='paihang-jianjie'>产品简介</text>
<view>
<text class='paihang-xuhao'>No.1</text>
<text class='paihang-xiaoshou'> | 456人付款 | </text>
<text class='paihang-jiage0'> ¥</text>
<text class='paihang-jiage1'> 188.00</text>
</view>
</view>
</navigator-->
<block wx:for="{{zuixins}}" wx:key="key">
<navigator url='/pages/chanpin/xiangxi?cpid={{item.cp_id}}&cpmc={{item.cp_mingcheng}}' class='paihang-item'>
<view class='paihang-tupian'>
<image class='paihang-img' src='{{item.cp_tupian}}' mode='widthFix'></image>
</view>
<view class='paihang-xinxi'>
<text class='paihang-mingcheng'>{{item.cp_mingcheng}}</text>
<text class='paihang-jianjie'>{{item.jianjie}}</text>
<view>
<text class='paihang-xuhao'>No.{{index+1}}</text>
<text class='paihang-xiaoshou'> | 已销 {{item.yixiaoshou}} 件 | </text>
<text class='paihang-jiage0'> ¥</text>
<text class='paihang-jiage1'> {{item.jiage}}</text>
</view>
</view>
</navigator>
</block>
wxss代码
/*广告图样式*/
.ad01 {
box-shadow: 0px 2px 2px gainsboro; /*阴影*/
margin: 2px; /*外边距*/
}
.ad01-img {
width: 100%;
}
/*轮播图样式*/
.slide-image {
height: 120px;
width: 100%;
display: inline-block;
overflow: hidden;
}
.slide-image2 {
height: 100%;
width: 100%;
display: inline-block;
overflow: hidden;
}
/*快捷菜单*/
.menu {
display: flex;
flex-wrap: wrap; /*换行*/
border-bottom: 1px solid gainsboro; /*菜单最下面线条*/
}
.menu-item {
width: 25%; /*1行4个菜单*/
padding: 5px; /*内边距*/
box-sizing: border-box;
display: flex;
justify-content: center; /*左右居中*/
flex-direction: column; /*从上到下*/
}
.menu-img {
width: 66%;
align-self: center;
}
.menu-mc {
font-size: 14px;
align-self: center;
}
.xinxi {
display: flex;
align-items: center;
padding: 5px;
border-bottom: 1px solid #f2f2f2;
}
.xinxi-icon {
width: 22px;
height: 22px;
}
.xinxi-text {
flex-grow: 1;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
.xinxi-arrow {
width: 13px;
height: 13px;
}
/*区块标题*/
.qukuai {
display: flex;
background-color: aliceblue;
align-items: center;
}
.y01 {
width: 3px;
height: 18px;
background-color: green;
margin: 5px;
box-shadow: 2px 2px 2px gainsboro;
}
.t01 {
color: gray;
flex-grow: 1;
text-shadow: 1px 1px 1px gainsboro;
}
.m01 {
color: gray;
margin-right: 5px;
text-shadow: 2px 2px 2px gainsboro;
}
.zuixin {
display: flex;
flex-wrap: wrap;
}
.zuixin-item {
width: 50%;
display: flex;
flex-direction: column;
padding: 5px;
box-sizing: border-box;
border-bottom: 1px dotted gainsboro;
}
.zuixin-img {
width: 100%;
border: 1px solid #fcfafa;
border-radius: 5px;
box-shadow: 0px 2px 2px gainsboro;
padding: 5px;
box-sizing: border-box;
}
.zuixin-mc {
font-size: 12px;
padding: 3px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.zuixin-jiage0 {
font-size: 10px;
padding: 3px;
color: red;
}
.zuixin-jiage1 {
font-size: 14px;
padding: 3px;
color: red;
}
.zuixin-jiage2 {
font-size: 11px;
padding: 3px;
color: gray;
}
/*销售排行*/
.paihang-item {
display: flex;
padding: 5px;
width: 100%;
}
.paihang-tupian {
width: 25%;
}
.paihang-img {
width: 100%;
border: 1px solid gainsboro;
border-radius: 5px;
box-shadow: 0px 2px 2px gainsboro;
}
.paihang-xinxi {
width: 75%;
margin-left: 5px;
margin-right: 10px;
display: flex;
flex-direction: column;
}
.paihang-mingcheng {
font-size: 13px;
font-weight: bold;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
.paihang-jianjie {
font-size: 11px;
color: gray;
margin: 3px 0;
}
.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;
}
有需要的请添加QQ 45157718（微信同号） 咨询
| 
欢迎您的到来！
