5.项目代码

5.1.前端代码

5.1.1.Index组件

注意点：

  1. 修改图片路径，包括css中背景图片路径。
  2. style中添加scoped。
  3. 将静态工程中的 icon.css内容添加到style中。
  1. <template>
  2.     <div class="wrapper">
  3.         <!-- header部分 -->
  4.         <header>
  5.             <div class="icon-location-box">
  6.                 <div class="icon-location"></div>
  7.             </div>
  8.             <div class="location-text">沈阳市规划大厦<i class="fa fa-caret-down"></i></div>
  9.         </header>
  11.         <!-- search部分 -->
  12.         <!-- 
  13.                     搜索框部分（此块与search-fixed-top块宽度高度一致，用于当
  14.                     search-fixed-top块固定后，挡住下面块不要窜上去） 
  15.                 -->
  16.         <div class="search">
  17.             <!-- 当滚动条超过上面的定位块时，search-fixed-top块变成固定在顶部。 -->
  18.             <div class="search-fixed-top" ref="fixedBox">
  19.                 <!-- 搜索框部分中间的白框 -->
  20.                 <div class="search-box">
  21.                     <i class="fa fa-search"></i>搜索饿了么商家、商品名称
  22.                 </div>
  23.             </div>
  24.         </div>
  26.         <!-- 点餐分类部分 -->
  27.         <ul class="foodtype">
  28.             <li @click="toBusinessList(1)">
  29.                 <img src="../assets/dcfl01.png">
  30.                 <p>美食</p>
  31.             </li>
  32.             <li @click="toBusinessList(2)">
  33.                 <img src="../assets/dcfl02.png">
  34.                 <p>早餐</p>
  35.             </li>
  36.             <li @click="toBusinessList(3)">
  37.                 <img src="../assets/dcfl03.png">
  38.                 <p>跑腿代购</p>
  39.             </li>
  40.             <li @click="toBusinessList(4)">
  41.                 <img src="../assets/dcfl04.png">
  42.                 <p>汉堡披萨</p>
  43.             </li>
  44.             <li @click="toBusinessList(5)">
  45.                 <img src="../assets/dcfl05.png">
  46.                 <p>甜品饮品</p>
  47.             </li>
  48.             <li @click="toBusinessList(6)">
  49.                 <img src="../assets/dcfl06.png">
  50.                 <p>速食简餐</p>
  51.             </li>
  52.             <li @click="toBusinessList(7)">
  53.                 <img src="../assets/dcfl07.png">
  54.                 <p>地方小吃</p>
  55.             </li>
  56.             <li @click="toBusinessList(8)">
  57.                 <img src="../assets/dcfl08.png">
  58.                 <p>米粉面馆</p>
  59.             </li>
  60.             <li @click="toBusinessList(9)">
  61.                 <img src="../assets/dcfl09.png">
  62.                 <p>包子粥铺</p>
  63.             </li>
  64.             <li @click="toBusinessList(10)">
  65.                 <img src="../assets/dcfl10.png">
  66.                 <p>炸鸡炸串</p>
  67.             </li>
  68.         </ul>
  70.         <!-- 横幅广告部分（注意：此处有背景图片） -->
  71.         <div class="banner">
  72.             <h3>品质套餐</h3>
  73.             <p>搭配齐全吃得好</p>
  74.             <a>立即抢购 &gt;</a>
  75.         </div>
  77.         <!-- 超级会员部分 -->
  78.         <div class="supermember">
  79.             <div class="left">
  80.                 <img src="../assets/super_member.png">
  81.                 <h3>超级会员</h3>
  82.                 <p>&#8226; 每月享超值权益</p>
  83.             </div>
  84.             <div class="right">
  85.                 立即开通 &gt;
  86.             </div>
  87.         </div>
  89.         <!-- 推荐商家部分 -->
  90.         <div class="recommend">
  91.             <div class="recommend-line"></div>
  92.             <p>推荐商家</p>
  93.             <div class="recommend-line"></div>
  94.         </div>
  96.         <!-- 推荐方式部分 -->
  97.         <ul class="recommendtype">
  98.             <li>综合排序<i class="fa fa-caret-down"></i></li>
  99.             <li>距离最近</li>
  100.             <li>销量最高</li>
  101.             <li>筛选<i class="fa fa-filter"></i></li>
  102.         </ul>
  104.         <!-- 推荐商家列表部分 -->
  105.         <ul class="business">
  106.             <li>
  107.                 <img src="../assets/sj01.png">
  108.                 <div class="business-info">
  109.                     <div class="business-info-h">
  110.                         <h3>万家饺子（软件园E18店）</h3>
  111.                         <div class="business-info-like">&#8226;</div>
  112.                     </div>
  113.                     <div class="business-info-star">
  114.                         <div class="business-info-star-left">
  115.                             <i class="fa fa-star"></i>
  116.                             <i class="fa fa-star"></i>
  117.                             <i class="fa fa-star"></i>
  118.                             <i class="fa fa-star"></i>
  119.                             <i class="fa fa-star"></i>
  120.                             <p>4.9 月售345单</p>
  121.                         </div>
  122.                         <div class="business-info-star-right">
  123.                             蜂鸟专送
  124.                         </div>
  125.                     </div>
  126.                     <div class="business-info-delivery">
  127.                         <p>&#165;15起送 | &#165;3配送</p>
  128.                         <p>3.22km | 30分钟</p>
  129.                     </div>
  130.                     <div class="business-info-explain">
  131.                         <div>各种饺子</div>
  132.                     </div>
  133.                     <div class="business-info-promotion">
  134.                         <div class="business-info-promotion-left">
  135.                             <div class="business-info-promotion-left-incon">新</div>
  136.                             <p>饿了么新用户首单立减9元</p>
  137.                         </div>
  138.                         <div class="business-info-promotion-right">
  139.                             <p>2个活动</p>
  140.                             <i class="fa fa-caret-down"></i>
  141.                         </div>
  142.                     </div>
  143.                     <div class="business-info-promotion">
  144.                         <div class="business-info-promotion-left">
  145.                             <div class="business-info-promotion-left-incon" style="background-color: #F1884F;">特</div>
  146.                             <p>特价商品5元起</p>
  147.                         </div>
  148.                     </div>
  149.                 </div>
  150.             </li>
  151.             <li>
  152.                 <img src="../assets/sj02.png">
  153.                 <div class="business-info">
  154.                     <div class="business-info-h">
  155.                         <h3>小锅饭豆腐馆（全运店）</h3>
  156.                         <div class="business-info-like">&#8226;</div>
  157.                     </div>
  158.                     <div class="business-info-star">
  159.                         <div class="business-info-star-left">
  160.                             <i class="fa fa-star"></i>
  161.                             <i class="fa fa-star"></i>
  162.                             <i class="fa fa-star"></i>
  163.                             <i class="fa fa-star"></i>
  164.                             <i class="fa fa-star"></i>
  165.                             <p>4.9 月售345单</p>
  166.                         </div>
  167.                         <div class="business-info-star-right">
  168.                             蜂鸟专送
  169.                         </div>
  170.                     </div>
  171.                     <div class="business-info-delivery">
  172.                         <p>&#165;15起送 | &#165;3配送</p>
  173.                         <p>3.22km | 30分钟</p>
  174.                     </div>
  175.                     <div class="business-info-explain">
  176.                         <div>各种饺子</div>
  177.                     </div>
  178.                     <div class="business-info-promotion">
  179.                         <div class="business-info-promotion-left">
  180.                             <div class="business-info-promotion-left-incon">新</div>
  181.                             <p>饿了么新用户首单立减9元</p>
  182.                         </div>
  183.                         <div class="business-info-promotion-right">
  184.                             <p>2个活动</p>
  185.                             <i class="fa fa-caret-down"></i>
  186.                         </div>
  187.                     </div>
  188.                     <div class="business-info-promotion">
  189.                         <div class="business-info-promotion-left">
  190.                             <div class="business-info-promotion-left-incon">特</div>
  191.                             <p>特价商品5元起</p>
  192.                         </div>
  193.                     </div>
  194.                 </div>
  195.             </li>
  196.             <li>
  197.                 <img src="../assets/sj03.png">
  198.                 <div class="business-info">
  199.                     <div class="business-info-h">
  200.                         <h3>麦当劳麦乐送（全运路店）</h3>
  201.                         <div class="business-info-like">&#8226;</div>
  202.                     </div>
  203.                     <div class="business-info-star">
  204.                         <div class="business-info-star-left">
  205.                             <i class="fa fa-star"></i>
  206.                             <i class="fa fa-star"></i>
  207.                             <i class="fa fa-star"></i>
  208.                             <i class="fa fa-star"></i>
  209.                             <i class="fa fa-star"></i>
  210.                             <p>4.9 月售345单</p>
  211.                         </div>
  212.                         <div class="business-info-star-right">
  213.                             蜂鸟专送
  214.                         </div>
  215.                     </div>
  216.                     <div class="business-info-delivery">
  217.                         <p>&#165;15起送 | &#165;3配送</p>
  218.                         <p>3.22km | 30分钟</p>
  219.                     </div>
  220.                     <div class="business-info-explain">
  221.                         <div>各种饺子</div>
  222.                     </div>
  223.                     <div class="business-info-promotion">
  224.                         <div class="business-info-promotion-left">
  225.                             <div class="business-info-promotion-left-incon">新</div>
  226.                             <p>饿了么新用户首单立减9元</p>
  227.                         </div>
  228.                         <div class="business-info-promotion-right">
  229.                             <p>2个活动</p>
  230.                             <i class="fa fa-caret-down"></i>
  231.                         </div>
  232.                     </div>
  233.                     <div class="business-info-promotion">
  234.                         <div class="business-info-promotion-left">
  235.                             <div class="business-info-promotion-left-incon">特</div>
  236.                             <p>特价商品5元起</p>
  237.                         </div>
  238.                     </div>
  239.                 </div>
  240.             </li>
  241.             <li>
  242.                 <img src="../assets/sj04.png">
  243.                 <div class="business-info">
  244.                     <div class="business-info-h">
  245.                         <h3>米村拌饭（浑南店）</h3>
  246.                         <div class="business-info-like">&#8226;</div>
  247.                     </div>
  248.                     <div class="business-info-star">
  249.                         <div class="business-info-star-left">
  250.                             <i class="fa fa-star"></i>
  251.                             <i class="fa fa-star"></i>
  252.                             <i class="fa fa-star"></i>
  253.                             <i class="fa fa-star"></i>
  254.                             <i class="fa fa-star"></i>
  255.                             <p>4.9 月售345单</p>
  256.                         </div>
  257.                         <div class="business-info-star-right">
  258.                             蜂鸟专送
  259.                         </div>
  260.                     </div>
  261.                     <div class="business-info-delivery">
  262.                         <p>&#165;15起送 | &#165;3配送</p>
  263.                         <p>3.22km | 30分钟</p>
  264.                     </div>
  265.                     <div class="business-info-explain">
  266.                         <div>各种饺子</div>
  267.                     </div>
  268.                     <div class="business-info-promotion">
  269.                         <div class="business-info-promotion-left">
  270.                             <div class="business-info-promotion-left-incon">新</div>
  271.                             <p>饿了么新用户首单立减9元</p>
  272.                         </div>
  273.                         <div class="business-info-promotion-right">
  274.                             <p>2个活动</p>
  275.                             <i class="fa fa-caret-down"></i>
  276.                         </div>
  277.                     </div>
  278.                     <div class="business-info-promotion">
  279.                         <div class="business-info-promotion-left">
  280.                             <div class="business-info-promotion-left-incon">特</div>
  281.                             <p>特价商品5元起</p>
  282.                         </div>
  283.                     </div>
  284.                 </div>
  285.             </li>
  286.             <li>
  287.                 <img src="../assets/sj05.png">
  288.                 <div class="business-info">
  289.                     <div class="business-info-h">
  290.                         <h3>申记串道（中海康城店）</h3>
  291.                         <div class="business-info-like">&#8226;</div>
  292.                     </div>
  293.                     <div class="business-info-star">
  294.                         <div class="business-info-star-left">
  295.                             <i class="fa fa-star"></i>
  296.                             <i class="fa fa-star"></i>
  297.                             <i class="fa fa-star"></i>
  298.                             <i class="fa fa-star"></i>
  299.                             <i class="fa fa-star"></i>
  300.                             <p>4.9 月售345单</p>
  301.                         </div>
  302.                         <div class="business-info-star-right">
  303.                             蜂鸟专送
  304.                         </div>
  305.                     </div>
  306.                     <div class="business-info-delivery">
  307.                         <p>&#165;15起送 | &#165;3配送</p>
  308.                         <p>3.22km | 30分钟</p>
  309.                     </div>
  310.                     <div class="business-info-explain">
  311.                         <div>各种饺子</div>
  312.                     </div>
  313.                     <div class="business-info-promotion">
  314.                         <div class="business-info-promotion-left">
  315.                             <div class="business-info-promotion-left-incon">新</div>
  316.                             <p>饿了么新用户首单立减9元</p>
  317.                         </div>
  318.                         <div class="business-info-promotion-right">
  319.                             <p>2个活动</p>
  320.                             <i class="fa fa-caret-down"></i>
  321.                         </div>
  322.                     </div>
  323.                     <div class="business-info-promotion">
  324.                         <div class="business-info-promotion-left">
  325.                             <div class="business-info-promotion-left-incon">特</div>
  326.                             <p>特价商品5元起</p>
  327.                         </div>
  328.                     </div>
  329.                 </div>
  330.             </li>
  331.         </ul>
  333.         <!-- 底部菜单部分 -->
  334.         <Footer></Footer>
  335.     </div>
  336. </template>
  338. <script>
  339.     //导入共通组件
  340.     import Footer from '../components/Footer.vue';
  342.     export default {
  343.         name: 'Index',
  344.         mounted() {
  345.             document.onscroll = ()=> {
  346.                 //获取滚动条位置
  347.                 let s1 = document.documentElement.scrollTop;
  348.                 let s2 = document.body.scrollTop;
  349.                 let scroll = s1 == 0 ? s2 : s1;
  350.                 //获取视口宽度
  351.                 let width = document.documentElement.clientWidth;
  353.                 //获取顶部固定块
  354.                 let search = this.$refs.fixedBox;
  356.                 //判断滚动条超过视口宽度的12%时，搜索块变固定定位
  357.                 if (scroll > width * 0.12) {
  358.                     search.style.position = 'fixed';
  359.                     search.style.left = '0';
  360.                     search.style.top = '0';
  361.                 } else {
  362.                     search.style.position = 'static';
  363.                 }
  364.             }
  365.         },
  366.         destroyed() {
  367.             //当切换到其他组件时，就不需要document滚动条事件，所以将此事件去掉
  368.             document.onscroll = null;
  369.         },
  370.         components:{
  371.             Footer
  372.         },
  373.         methods:{
  374.             toBusinessList(orderTypeId){
  375.                 this.$router.push({path:'/businessList',query:{orderTypeId:orderTypeId}});
  376.             }
  377.         }
  378.     }
  379. </script>
  381. <style scoped>
  382.     /****************** 总容器 ******************/
  383.     .wrapper {
  384.         width: 100%;
  385.         height: 100%;
  386.     }
  388.     /****************** header ******************/
  389.     .wrapper header {
  390.         width: 100%;
  391.         height: 12vw;
  392.         background-color: #0097FF;
  394.         display: flex;
  395.         align-items: center;
  396.     }
  398.     .wrapper header .icon-location-box {
  399.         width: 3.5vw;
  400.         height: 3.5vw;
  401.         margin: 0 1vw 0 3vw;
  402.     }
  404.     .wrapper header .location-text {
  405.         font-size: 4.5vw;
  406.         font-weight: 700;
  407.         color: #fff;
  408.     }
  410.     .wrapper header .location-text .fa-caret-down {
  411.         margin-left: 1vw;
  412.     }
  414.     /****************** search ******************/
  415.     .wrapper .search {
  416.         width: 100%;
  417.         height: 13vw;
  418.     }
  420.     .wrapper .search .search-fixed-top {
  421.         width: 100%;
  422.         height: 13vw;
  423.         background-color: #0097FF;
  424.         display: flex;
  425.         justify-content: center;
  426.         align-items: center;
  427.     }
  429.     .wrapper .search .search-fixed-top .search-box {
  430.         width: 90%;
  431.         height: 9vw;
  432.         background-color: #fff;
  433.         border-radius: 2px;
  435.         display: flex;
  436.         justify-content: center;
  437.         align-items: center;
  439.         font-size: 3.5vw;
  440.         color: #AEAEAE;
  441.         font-family: "宋体";
  442.         /*此样式是让文本选中状态无效*/
  443.         user-select: none;
  444.     }
  446.     .wrapper .search .search-fixed-top .search-box .fa-search {
  447.         margin-right: 1vw;
  448.     }
  450.     /****************** 点餐分类部分 ******************/
  451.     .wrapper .foodtype {
  452.         width: 100%;
  453.         height: 48vw;
  455.         display: flex;
  456.         flex-wrap: wrap;
  457.         justify-content: space-around;
  458.         /*要使用align-content。10个子元素将自动换行为两行，而且两行作为一个整体垂直居中*/
  459.         align-content: center;
  460.     }
  462.     .wrapper .foodtype li {
  463.         /*一共10个子元素，通过计算，子元素宽度在16.7 ~ 20 之间，才能保证换两行*/
  464.         width: 18vw;
  465.         height: 20vw;
  467.         display: flex;
  468.         /*弹性盒子主轴方向设为column，然后仍然是垂直水平方向居中*/
  469.         flex-direction: column;
  470.         justify-content: center;
  471.         align-items: center;
  473.         user-select: none;
  474.         cursor: pointer;
  475.     }
  477.     .wrapper .foodtype li img {
  478.         width: 12vw;
  479.         /*视频讲解时高度设置为12vw，实际上设置为10.3vw更佳*/
  480.         height: 10.3vw;
  481.     }
  483.     .wrapper .foodtype li p {
  484.         font-size: 3.2vw;
  485.         color: #666;
  486.     }
  488.     /****************** 横幅广告部分 ******************/
  489.     .wrapper .banner {
  490.         /**
  491.          * 设置容器宽度95%，然后水平居中，这样两边留白; 
  492.          * 这里不能用padding，因为背景图片也会覆盖padding
  493.          */
  494.         width: 95%;
  495.         margin: 0 auto;
  496.         height: 29vw;
  498.         /*此三个样式组合，可以保证背景图片充满整个容器*/
  499.         background-image: url(../assets/index_banner.png);
  500.         background-repeat: no-repeat;
  501.         background-size: cover;
  503.         box-sizing: border-box;
  504.         padding: 2vw 6vw;
  505.     }
  507.     .wrapper .banner h3 {
  508.         font-size: 4.2vw;
  509.         margin-bottom: 1.2vw;
  510.     }
  512.     .wrapper .banner p {
  513.         font-size: 3.4vw;
  514.         color: #666;
  515.         margin-bottom: 2.4vw;
  516.     }
  518.     .wrapper .banner a {
  519.         font-size: 3vw;
  520.         color: #C79060;
  521.         font-weight: 700;
  522.     }
  524.     /****************** 超级会员部分 ******************/
  525.     .wrapper .supermember {
  526.         /*这里也设置容器宽度95%，不能用padding，因为背景色也会充满padding*/
  527.         width: 95%;
  528.         margin: 0 auto;
  529.         height: 11.5vw;
  530.         background-color: #FEEDC1;
  531.         margin-top: 1.3vw;
  532.         border-radius: 2px;
  533.         color: #644F1B;
  535.         display: flex;
  536.         justify-content: space-between;
  537.         align-items: center;
  538.     }
  540.     .wrapper .supermember .left {
  541.         display: flex;
  542.         align-items: center;
  543.         margin-left: 4vw;
  544.         user-select: none;
  545.     }
  547.     .wrapper .supermember .left img {
  548.         width: 6vw;
  549.         height: 6vw;
  550.         margin-right: 2vw;
  551.     }
  553.     .wrapper .supermember .left h3 {
  554.         font-size: 4vw;
  555.         margin-right: 2vw;
  556.     }
  558.     .wrapper .supermember .left p {
  559.         font-size: 3vw;
  560.     }
  562.     .wrapper .supermember .right {
  563.         font-size: 3vw;
  564.         margin-right: 4vw;
  565.         cursor: pointer;
  566.     }
  568.     /****************** 推荐商家部分 ******************/
  569.     .wrapper .recommend {
  570.         width: 100%;
  571.         height: 14vw;
  572.         display: flex;
  573.         justify-content: center;
  574.         align-items: center;
  575.     }
  577.     .wrapper .recommend .recommend-line {
  578.         width: 6vw;
  579.         height: 0.2vw;
  580.         background-color: #888;
  581.     }
  583.     .wrapper .recommend p {
  584.         font-size: 4vw;
  585.         margin: 0 4vw;
  586.     }
  588.     /****************** 推荐方式部分 ******************/
  589.     .wrapper .recommendtype {
  590.         width: 100%;
  591.         height: 5vw;
  592.         margin-bottom: 5vw;
  594.         display: flex;
  595.         justify-content: space-around;
  596.         align-items: center;
  597.     }
  599.     .wrapper .recommendtype li {
  600.         font-size: 3.5vw;
  601.         color: #555;
  602.     }
  604.     /****************** 推荐商家列表部分 ******************/
  605.     .wrapper .business {
  606.         width: 100%;
  607.         margin-bottom: 14vw;
  608.     }
  610.     .wrapper .business li {
  611.         width: 100%;
  612.         box-sizing: border-box;
  613.         padding: 2.5vw;
  614.         user-select: none;
  615.         border-bottom: solid 1px #DDD;
  617.         display: flex;
  618.     }
  620.     .wrapper .business li img {
  621.         width: 18vw;
  622.         height: 18vw;
  623.     }
  625.     .wrapper .business li .business-info {
  626.         width: 100%;
  627.         box-sizing: border-box;
  628.         padding-left: 3vw;
  629.     }
  631.     .wrapper .business li .business-info .business-info-h {
  632.         display: flex;
  633.         justify-content: space-between;
  634.         align-items: center;
  635.         margin-bottom: 2vw;
  636.     }
  638.     .wrapper .business li .business-info .business-info-h h3 {
  639.         font-size: 4vw;
  640.         color: #333;
  641.     }
  643.     .wrapper .business li .business-info .business-info-h .business-info-like {
  644.         width: 1.6vw;
  645.         height: 3.4vw;
  646.         background-color: #666;
  647.         color: #fff;
  648.         font-size: 4vw;
  649.         margin-right: 4vw;
  651.         display: flex;
  652.         justify-content: center;
  653.         align-items: center;
  654.     }
  656.     .wrapper .business li .business-info .business-info-star {
  657.         display: flex;
  658.         justify-content: space-between;
  659.         align-items: center;
  660.         margin-bottom: 2vw;
  661.         font-size: 3.1vw;
  662.     }
  664.     .wrapper .business li .business-info .business-info-star .business-info-star-left {
  665.         display: flex;
  666.         align-items: center;
  667.     }
  669.     .wrapper .business li .business-info .business-info-star .business-info-star-left .fa-star {
  670.         color: #FEC80E;
  671.         margin-right: 0.5vw;
  672.     }
  674.     .wrapper .business li .business-info .business-info-star .business-info-star-left p {
  675.         color: #666;
  676.         margin-left: 1vw;
  677.     }
  679.     .wrapper .business li .business-info .business-info-star .business-info-star-right {
  680.         background-color: #0097FF;
  681.         color: #fff;
  682.         font-size: 2.4vw;
  683.         border-radius: 2px;
  684.         padding: 0 0.6vw;
  685.     }
  687.     .wrapper .business li .business-info .business-info-delivery {
  688.         display: flex;
  689.         justify-content: space-between;
  690.         align-items: center;
  691.         margin-bottom: 2vw;
  693.         color: #666;
  694.         font-size: 3.1vw;
  695.     }
  697.     .wrapper .business li .business-info .business-info-explain {
  698.         display: flex;
  699.         align-items: center;
  700.         margin-bottom: 3vw;
  701.     }
  703.     .wrapper .business li .business-info .business-info-explain div {
  704.         border: solid 1px #DDD;
  705.         font-size: 2.8vw;
  706.         color: #666;
  707.         border-radius: 3px;
  708.         padding: 0 0.1vw;
  709.     }
  711.     .wrapper .business li .business-info .business-info-promotion {
  712.         display: flex;
  713.         justify-content: space-between;
  714.         align-items: center;
  715.         margin-bottom: 1.8vw;
  716.     }
  718.     .wrapper .business li .business-info .business-info-promotion .business-info-promotion-left {
  719.         display: flex;
  720.         align-items: center;
  721.     }
  723.     .wrapper .business li .business-info .business-info-promotion .business-info-promotion-left .business-info-promotion-left-incon {
  724.         width: 4vw;
  725.         height: 4vw;
  726.         background-color: #70BC46;
  727.         border-radius: 3px;
  728.         font-size: 3vw;
  729.         color: #fff;
  731.         display: flex;
  732.         justify-content: center;
  733.         align-items: center;
  734.     }
  736.     .wrapper .business li .business-info .business-info-promotion .business-info-promotion-left p {
  737.         color: #666;
  738.         font-size: 3vw;
  739.         margin-left: 2vw;
  740.     }
  742.     .wrapper .business li .business-info .business-info-promotion .business-info-promotion-right {
  743.         display: flex;
  744.         align-items: center;
  745.         font-size: 2.5vw;
  746.         color: #999;
  747.     }
  749.     .wrapper .business li .business-info .business-info-promotion .business-info-promotion-right p {
  750.         margin-right: 2vw;
  751.     }
  752. </style>

5.1.2.BusinessList组件

  1. <template>
  2.     <div class="wrapper">
  4.         <!-- header部分 -->
  5.         <header>
  6.             <p>商家列表</p>
  7.         </header>
  9.         <!-- 商家列表部分 -->
  10.         <ul class="business">
  11.             <li v-for="item in businessArr" @click="toBusinessInfo(item.businessId)">
  12.                 <div class="business-img">
  13.                     <img :src="item.businessImg">
  14.                     <div class="business-img-quantity" v-show="item.quantity>0">{{item.quantity}}</div>
  15.                 </div>
  16.                 <div class="business-info">
  17.                     <h3>{{item.businessName}}</h3>
  18.                     <p>&#165;{{item.starPrice}}起送 | &#165;{{item.deliveryPrice}}配送</p>
  19.                     <p>{{item.businessExplain}}</p>
  20.                 </div>
  21.             </li>
  22.         </ul>
  24.         <!-- 底部菜单部分 -->
  25.         <Footer></Footer>
  27.     </div>
  28. </template>
  30. <script>
  31.     import Footer from '../components/Footer.vue';
  33.     export default{
  34.         name:'BusinessList',
  35.         data(){
  36.             return {
  37.                 orderTypeId: this.$route.query.orderTypeId,
  38.                 businessArr:[],
  39.                 user:{}
  40.             }
  41.         },
  42.         created() {
  43.             this.user = this.$getSessionStorage('user');
  45.             //根据orderTypeId查询商家信息
  46.             this.$axios.post('BusinessController/listBusinessByOrderTypeId',this.$qs.stringify({
  47.                 orderTypeId:this.orderTypeId
  48.             })).then(response=>{
  49.                 this.businessArr = response.data;
  50.                 //判断是否登录
  51.                 if(this.user!=null){
  52.                     this.listCart();
  53.                 }
  54.             }).catch(error=>{
  55.                 console.error(error);
  56.             });
  57.         },
  58.         components:{
  59.             Footer
  60.         },
  61.         methods:{
  62.             listCart(){
  63.                 this.$axios.post('CartController/listCart',this.$qs.stringify({
  64.                     userId:this.user.userId
  65.                 })).then(response=>{
  66.                     let cartArr = response.data;
  67.                     //遍历所有食品列表
  68.                     for(let businessItem of this.businessArr){
  69.                         businessItem.quantity = 0;
  70.                         for(let cartItem of cartArr){
  71.                             if(cartItem.businessId==businessItem.businessId){
  72.                                 businessItem.quantity += cartItem.quantity;
  73.                             }
  74.                         }
  75.                     }
  76.                     this.businessArr.sort();
  77.                 }).catch(error=>{
  78.                     console.error(error);
  79.                 });
  80.             },
  81.             toBusinessInfo(businessId){
  82.                 this.$router.push({path:'/businessInfo',query:{businessId:businessId}});
  83.             }
  84.         }
  85.     }
  86. </script>
  88. <style scoped>
  89.     /****************** 总容器 ******************/
  90.     .wrapper {
  91.         width: 100%;
  92.         height: 100%;
  93.     }
  95.     /****************** header部分 ******************/
  96.     .wrapper header {
  97.         width: 100%;
  98.         height: 12vw;
  99.         background-color: #0097FF;
  100.         color: #fff;
  101.         font-size: 4.8vw;
  103.         position: fixed;
  104.         left: 0;
  105.         top: 0;
  106.         z-index: 1000;
  108.         display: flex;
  109.         justify-content: center;
  110.         align-items: center;
  111.     }
  113.     /****************** 商家列表部分 ******************/
  114.     .wrapper .business {
  115.         width: 100%;
  116.         margin-top: 12vw;
  117.         margin-bottom: 14vw;
  118.     }
  120.     .wrapper .business li {
  121.         width: 100%;
  122.         box-sizing: border-box;
  123.         padding: 2.5vw;
  124.         border-bottom: solid 1px #DDD;
  125.         user-select: none;
  126.         cursor: pointer;
  128.         display: flex;
  129.         align-items: center;
  130.     }
  132.     .wrapper .business li .business-img {
  133.         /*这里设置为相当定位，成为business-img-quantity元素的父元素*/
  134.         position: relative;
  135.     }
  137.     .wrapper .business li .business-img img {
  138.         width: 20vw;
  139.         height: 20vw;
  140.     }
  142.     .wrapper .business li .business-img .business-img-quantity {
  143.         width: 5vw;
  144.         height: 5vw;
  145.         background-color: red;
  146.         color: #fff;
  147.         font-size: 3.6vw;
  148.         border-radius: 2.5vw;
  150.         display: flex;
  151.         justify-content: center;
  152.         align-items: center;
  154.         /*设置成绝对定位，不占文档流空间*/
  155.         position: absolute;
  156.         right: -1.5vw;
  157.         top: -1.5vw;
  158.     }
  160.     .wrapper .business li .business-info {
  161.         margin-left: 3vw;
  162.     }
  164.     .wrapper .business li .business-info h3 {
  165.         font-size: 3.8vw;
  166.         color: #555;
  167.     }
  169.     .wrapper .business li .business-info p {
  170.         font-size: 3vw;
  171.         color: #888;
  172.         margin-top: 2vw;
  173.     }
  174. </style>

5.1.3.BusinessInfo组件

  1. <template>
  2.     <div class="wrapper">
  4.         <!-- header部分 -->
  5.         <header>
  6.             <p>商家信息</p>
  7.         </header>
  9.         <!-- 商家logo部分 -->
  10.         <div class="business-logo">
  11.             <img :src="business.businessImg">
  12.         </div>
  14.         <!-- 商家信息部分 -->
  15.         <div class="business-info">
  16.             <h1>{{business.businessName}}</h1>
  17.             <p>&#165;{{business.starPrice}}起送 &#165;{{business.deliveryPrice}}配送</p>
  18.             <p>{{business.businessExplain}}</p>
  19.         </div>
  21.         <!-- 食品列表部分 -->
  22.         <ul class="food">
  23.             <li v-for="(item,index) in foodArr">
  24.                 <div class="food-left">
  25.                     <img :src="item.foodImg">
  26.                     <div class="food-left-info">
  27.                         <h3>{{item.foodName}}</h3>
  28.                         <p>{{item.foodExplain}}</p>
  29.                         <p>&#165;{{item.foodPrice}}</p>
  30.                     </div>
  31.                 </div>
  32.                 <div class="food-right">
  33.                     <div>
  34.                         <i class="fa fa-minus-circle" @click="minus(index)" v-show="item.quantity!=0"></i>
  35.                     </div>
  36.                     <p><span v-show="item.quantity!=0">{{item.quantity}}</span></p>
  37.                     <div>
  38.                         <i class="fa fa-plus-circle" @click="add(index)"></i>
  39.                     </div>
  40.                 </div>
  41.             </li>
  42.         </ul>
  44.         <!-- 购物车部分 -->
  45.         <div class="cart">
  46.             <div class="cart-left">
  47.                 <div class="cart-left-icon" :style="totalQuantity==0?'background-color:#505051;':'background-color:#3190E8;'">
  48.                     <i class="fa fa-shopping-cart"></i>
  49.                     <div class="cart-left-icon-quantity" v-show="totalQuantity!=0">{{totalQuantity}}</div>
  50.                 </div>
  51.                 <div class="cart-left-info">
  52.                     <p>&#165;{{totalPrice}}</p>
  53.                     <p>另需配送费{{business.deliveryPrice}}元</p>
  54.                 </div>
  55.             </div>
  56.             <div class="cart-right">
  57.                 <!-- 不够起送费 -->
  58.                 <div class="cart-right-item" v-show="totalSettle<business.starPrice" style="background-color: #535356;cursor: default;">
  59.                     &#165;{{business.starPrice}}起送
  60.                 </div>
  61.                 <!-- 达到起送费 -->
  62.                 <div class="cart-right-item" @click="toOrder" v-show="totalSettle>=business.starPrice">
  63.                     去结算
  64.                 </div>
  65.             </div>
  66.         </div>
  68.     </div>
  69. </template>
  71. <script>
  72.     export default {
  73.         name: 'BusinessInfo',
  74.         data() {
  75.             return {
  76.                 businessId: this.$route.query.businessId,
  77.                 business: {},
  78.                 foodArr: [],
  79.                 user: {}
  80.             }
  81.         },
  82.         created() {
  83.             this.user = this.$getSessionStorage('user');
  85.             //根据businessId查询商家信息
  86.             this.$axios.post('BusinessController/getBusinessById', this.$qs.stringify({
  87.                 businessId: this.businessId
  88.             })).then(response => {
  89.                 this.business = response.data;
  90.             }).catch(error => {
  91.                 console.error(error);
  92.             });
  94.             //根据businessId查询所属食品信息
  95.             this.$axios.post('FoodController/listFoodByBusinessId', this.$qs.stringify({
  96.                 businessId: this.businessId
  97.             })).then(response => {
  98.                 this.foodArr = response.data;
  99.                 for (let i = 0; i < this.foodArr.length; i++) {
  100.                     this.foodArr[i].quantity = 0;
  101.                 }
  103.                 //如果已登录，那么需要去查询购物车中是否已经选购了某个食品
  104.                 if (this.user != null) {
  105.                     this.listCart();
  106.                 }
  107.             }).catch(error => {
  108.                 console.error(error);
  109.             });
  110.         },
  111.         methods: {
  112.             listCart() {
  113.                 this.$axios.post('CartController/listCart', this.$qs.stringify({
  114.                     businessId: this.businessId,
  115.                     userId: this.user.userId
  116.                 })).then(response => {
  117.                     let cartArr = response.data;
  118.                     //遍历所有食品列表
  119.                     for (let foodItem of this.foodArr) {
  120.                         foodItem.quantity = 0;
  121.                         for (let cartItem of cartArr) {
  122.                             if (cartItem.foodId == foodItem.foodId) {
  123.                                 foodItem.quantity = cartItem.quantity;
  124.                             }
  125.                         }
  126.                     }
  127.                     this.foodArr.sort();
  128.                 }).catch(error => {
  129.                     console.error(error);
  130.                 });
  131.             },
  132.             add(index) {
  133.                 //首先做登录验证
  134.                 if (this.user == null) {
  135.                     this.$router.push({
  136.                         path: '/login'
  137.                     });
  138.                     return;
  139.                 }
  141.                 if (this.foodArr[index].quantity == 0) {
  142.                     //做insert
  143.                     this.savaCart(index);
  144.                 } else {
  145.                     //做update
  146.                     this.updateCart(index, 1);
  147.                 }
  148.             },
  149.             minus(index) {
  150.                 //首先做登录验证
  151.                 if (this.user == null) {
  152.                     this.$router.push({
  153.                         path: '/login'
  154.                     });
  155.                     return;
  156.                 }
  158.                 if (this.foodArr[index].quantity > 1) {
  159.                     //做update
  160.                     this.updateCart(index, -1);
  161.                 } else {
  162.                     //做delete
  163.                     this.removeCart(index);
  164.                 }
  165.             },
  166.             savaCart(index) {
  167.                 this.$axios.post('CartController/saveCart', this.$qs.stringify({
  168.                     businessId: this.businessId,
  169.                     userId: this.user.userId,
  170.                     foodId: this.foodArr[index].foodId
  171.                 })).then(response => {
  172.                     if (response.data == 1) {
  173.                         //此食品数量要更新为1；
  174.                         this.foodArr[index].quantity = 1;
  175.                         this.foodArr.sort();
  176.                     } else {
  177.                         alert('向购物车中添加食品失败！');
  178.                     }
  179.                 }).catch(error => {
  180.                     console.error(error);
  181.                 });
  182.             },
  183.             updateCart(index, num) {
  184.                 this.$axios.post('CartController/updateCart', this.$qs.stringify({
  185.                     businessId: this.businessId,
  186.                     userId: this.user.userId,
  187.                     foodId: this.foodArr[index].foodId,
  188.                     quantity: this.foodArr[index].quantity + num
  189.                 })).then(response => {
  190.                     if (response.data == 1) {
  191.                         //此食品数量要更新为1或-1；
  192.                         this.foodArr[index].quantity += num;
  193.                         this.foodArr.sort();
  194.                     } else {
  195.                         alert('向购物车中更新食品失败！');
  196.                     }
  197.                 }).catch(error => {
  198.                     console.error(error);
  199.                 });
  200.             },
  201.             removeCart(index) {
  202.                 this.$axios.post('CartController/removeCart', this.$qs.stringify({
  203.                     businessId: this.businessId,
  204.                     userId: this.user.userId,
  205.                     foodId: this.foodArr[index].foodId
  206.                 })).then(response => {
  207.                     if (response.data == 1) {
  208.                         //此食品数量要更新为0；视图的减号和数量要消失
  209.                         this.foodArr[index].quantity = 0;
  210.                         this.foodArr.sort();
  211.                     } else {
  212.                         alert('从购物车中删除食品失败！');
  213.                     }
  214.                 }).catch(error => {
  215.                     console.error(error);
  216.                 });
  217.             },
  218.             toOrder() {
  219.                 this.$router.push({
  220.                     path: '/orders',
  221.                     query: {
  222.                         businessId: this.business.businessId
  223.                     }
  224.                 });
  225.             }
  226.         },
  227.         computed: {
  228.             //食品总价格
  229.             totalPrice() {
  230.                 let total = 0;
  231.                 for (let item of this.foodArr) {
  232.                     total += item.foodPrice * item.quantity;
  233.                 }
  234.                 return total;
  235.             },
  236.             //食品总数量
  237.             totalQuantity() {
  238.                 let quantity = 0;
  239.                 for (let item of this.foodArr) {
  240.                     quantity += item.quantity;
  241.                 }
  242.                 return quantity;
  243.             },
  244.             //结算总价格
  245.             totalSettle() {
  246.                 return this.totalPrice + this.business.deliveryPrice;
  247.             }
  248.         }
  249.     }
  250. </script>
  252. <style scoped>
  253.     /****************** 总容器 ******************/
  254.     .wrapper {
  255.         width: 100%;
  256.         height: 100%;
  257.     }
  259.     /****************** header部分 ******************/
  260.     .wrapper header {
  261.         width: 100%;
  262.         height: 12vw;
  263.         background-color: #0097FF;
  264.         color: #fff;
  265.         font-size: 4.8vw;
  267.         position: fixed;
  268.         left: 0;
  269.         top: 0;
  270.         z-index: 1000;
  272.         display: flex;
  273.         justify-content: center;
  274.         align-items: center;
  275.     }
  277.     /****************** 商家logo部分 ******************/
  278.     .wrapper .business-logo {
  279.         width: 100%;
  280.         height: 35vw;
  281.         /*使用上外边距避开header部分*/
  282.         margin-top: 12vw;
  284.         display: flex;
  285.         justify-content: center;
  286.         align-items: center;
  287.     }
  289.     .wrapper .business-logo img {
  290.         width: 40vw;
  291.         height: 30vw;
  292.         border-radius: 5px;
  293.     }
  295.     /****************** 商家信息部分 ******************/
  296.     .wrapper .business-info {
  297.         width: 100%;
  298.         height: 20vw;
  300.         display: flex;
  301.         flex-direction: column;
  302.         justify-content: center;
  303.         align-items: center;
  304.     }
  306.     .wrapper .business-info h1 {
  307.         font-size: 5vw;
  308.     }
  310.     .wrapper .business-info p {
  311.         font-size: 3vw;
  312.         color: #666;
  313.         margin-top: 1vw;
  314.     }
  316.     /****************** 食品列表部分 ******************/
  317.     .wrapper .food {
  318.         width: 100%;
  319.         /*使用下外边距避开footer部分*/
  320.         margin-bottom: 14vw;
  321.     }
  323.     .wrapper .food li {
  324.         width: 100%;
  325.         box-sizing: border-box;
  326.         padding: 2.5vw;
  327.         user-select: none;
  329.         display: flex;
  330.         justify-content: space-between;
  331.         align-items: center;
  332.     }
  334.     .wrapper .food li .food-left {
  335.         display: flex;
  336.         align-items: center;
  337.     }
  339.     .wrapper .food li .food-left img {
  340.         width: 20vw;
  341.         height: 20vw;
  342.     }
  344.     .wrapper .food li .food-left .food-left-info {
  345.         margin-left: 3vw;
  346.     }
  348.     .wrapper .food li .food-left .food-left-info h3 {
  349.         font-size: 3.8vw;
  350.         color: #555;
  351.     }
  353.     .wrapper .food li .food-left .food-left-info p {
  354.         font-size: 3vw;
  355.         color: #888;
  356.         margin-top: 2vw;
  357.     }
  359.     .wrapper .food li .food-right {
  360.         width: 16vw;
  361.         display: flex;
  362.         justify-content: space-between;
  363.         align-items: center;
  364.     }
  366.     .wrapper .food li .food-right .fa-minus-circle {
  367.         font-size: 5.5vw;
  368.         color: #999;
  369.         cursor: pointer;
  370.     }
  372.     .wrapper .food li .food-right p {
  373.         font-size: 3.6vw;
  374.         color: #333;
  375.     }
  377.     .wrapper .food li .food-right .fa-plus-circle {
  378.         font-size: 5.5vw;
  379.         color: #0097EF;
  380.         cursor: pointer;
  381.     }
  383.     /****************** 购物车部分 ******************/
  384.     .wrapper .cart {
  385.         width: 100%;
  386.         height: 14vw;
  388.         position: fixed;
  389.         left: 0;
  390.         bottom: 0;
  392.         display: flex;
  393.     }
  395.     .wrapper .cart .cart-left {
  396.         flex: 2;
  397.         background-color: #505051;
  398.         display: flex;
  399.     }
  401.     .wrapper .cart .cart-left .cart-left-icon {
  402.         width: 16vw;
  403.         height: 16vw;
  404.         box-sizing: border-box;
  405.         border: solid 1.6vw #444;
  406.         border-radius: 8vw;
  407.         background-color: #3190E8;
  408.         font-size: 7vw;
  409.         color: #fff;
  411.         display: flex;
  412.         justify-content: center;
  413.         align-items: center;
  415.         margin-top: -4vw;
  416.         margin-left: 3vw;
  418.         position: relative;
  419.     }
  421.     .wrapper .cart .cart-left .cart-left-icon-quantity {
  422.         width: 5vw;
  423.         height: 5vw;
  424.         border-radius: 2.5vw;
  425.         background-color: red;
  426.         color: #fff;
  427.         font-size: 3.6vw;
  429.         display: flex;
  430.         justify-content: center;
  431.         align-items: center;
  433.         position: absolute;
  434.         right: -1.5vw;
  435.         top: -1.5vw;
  436.     }
  438.     .wrapper .cart .cart-left .cart-left-info p:first-child {
  439.         font-size: 4.5vw;
  440.         color: #fff;
  441.         margin-top: 1vw;
  442.     }
  444.     .wrapper .cart .cart-left .cart-left-info p:last-child {
  445.         font-size: 2.8vw;
  446.         color: #AAA;
  447.     }
  449.     .wrapper .cart .cart-right {
  450.         flex: 1;
  451.     }
  453.     /*达到起送费时的样式*/
  454.     .wrapper .cart .cart-right .cart-right-item {
  455.         width: 100%;
  456.         height: 100%;
  457.         background-color: #38CA73;
  458.         color: #fff;
  459.         font-size: 4.5vw;
  460.         font-weight: 700;
  461.         user-select: none;
  462.         cursor: pointer;
  464.         display: flex;
  465.         justify-content: center;
  466.         align-items: center;
  467.     }
  469.     /*不够起送费时的样式（只有背景色和鼠标样式的区别）*/
  470.     /*
  471.     .wrapper .cart .cart-right .cart-right-item{
  472.         width: 100%;
  473.         height: 100%;
  474.         background-color: #535356;
  475.         color: #fff;
  476.         font-size: 4.5vw;
  477.         font-weight: 700;
  478.         user-select: none;
  480.         display: flex;
  481.         justify-content: center;
  482.         align-items: center;
  483.     }
  484.     */
  485. </style>

5.1.4.Order组件

  1. <template>
  2.     <div class="wrapper">
  4.         <!-- header部分 -->
  5.         <header>
  6.             <p>确认订单</p>
  7.         </header>
  9.         <!-- 订单信息部分 -->
  10.         <div class="order-info">
  11.             <h5>订单配送至：</h5>
  12.             <div class="order-info-address" @click="toUserAddress">
  13.                 <p>{{deliveryaddress!=null?deliveryaddress.address:'请选择送货地址'}}</p>
  14.                 <i class="fa fa-angle-right"></i>
  15.             </div>
  16.             <p>{{user.userName}}{{user.userSex | sexFilter}} {{user.userId}}</p>
  17.         </div>
  19.         <h3>{{business.businessName}}</h3>
  21.         <!-- 订单明细部分 -->
  22.         <ul class="order-detailed">
  23.             <li v-for="item in cartArr">
  24.                 <div class="order-detailed-left">
  25.                     <img :src="item.food.foodImg">
  26.                     <p>{{item.food.foodName}} x {{item.quantity}}</p>
  27.                 </div>
  28.                 <p>&#165;{{item.food.foodPrice*item.quantity}}</p>
  29.             </li>
  30.         </ul>
  31.         <div class="order-deliveryfee">
  32.             <p>配送费</p>
  33.             <p>&#165;{{business.deliveryPrice}}</p>
  34.         </div>
  36.         <!-- 合计部分 -->
  37.         <div class="total">
  38.             <div class="total-left">
  39.                 &#165;{{totalPrice}}
  40.             </div>
  41.             <div class="total-right" @click="toPayment">
  42.                 去支付
  43.             </div>
  44.         </div>
  45.     </div>
  46. </template>
  48. <script>
  49.     export default{
  50.         name:'Orders',
  51.         data(){
  52.             return {
  53.                 businessId:this.$route.query.businessId,
  54.                 business:{},
  55.                 user:{},
  56.                 cartArr:[],
  57.                 deliveryaddress:{}
  58.             }
  59.         },
  60.         created() {
  61.             this.user = this.$getSessionStorage('user');
  62.             this.deliveryaddress = this.$getLocalStorage(this.user.userId);
  64.             //查询当前商家
  65.             this.$axios.post('BusinessController/getBusinessById',this.$qs.stringify({
  66.                 businessId:this.businessId
  67.             })).then(response=>{
  68.                 this.business = response.data;
  69.             }).catch(error=>{
  70.                 console.error(error);
  71.             });
  73.             //查询当前用户在购物车中的当前商家食品列表
  74.             this.$axios.post('CartController/listCart',this.$qs.stringify({
  75.                 userId:this.user.userId,
  76.                 businessId:this.businessId
  77.             })).then(response=>{
  78.                 this.cartArr = response.data;
  79.             }).catch(error=>{
  80.                 console.error(error);
  81.             });
  82.         },
  83.         computed:{
  84.             totalPrice(){
  85.                 let totalPrice = 0;
  86.                 for(let cartItem of this.cartArr){
  87.                     totalPrice += cartItem.food.foodPrice*cartItem.quantity;
  88.                 }
  89.                 totalPrice += this.business.deliveryPrice;
  90.                 return totalPrice;
  91.             }
  92.         },
  93.         filters:{
  94.             sexFilter(value){
  95.                 return value==1?'先生':'女士';
  96.             }
  97.         },
  98.         methods:{
  99.             toUserAddress(){
  100.                 this.$router.push({path:'/userAddress',query:{businessId:this.businessId}});
  101.             },
  102.             toPayment(){
  103.                 if(this.deliveryaddress==null){
  104.                     alert('请选择送货地址！');
  105.                     return;
  106.                 }
  108.                 //创建订单
  109.                 this.$axios.post('OrdersController/createOrders',this.$qs.stringify({
  110.                     userId:this.user.userId,
  111.                     businessId:this.businessId,
  112.                     daId:this.deliveryaddress.daId,
  113.                     orderTotal:this.totalPrice
  114.                 })).then(response=>{
  115.                     let orderId = response.data;
  116.                     if(orderId>0){
  117.                         this.$router.push({path:'/payment',query:{orderId:orderId}});
  118.                     }else{
  119.                         alert('创建订单失败！');
  120.                     }
  121.                 }).catch(error=>{
  122.                     console.error(error);
  123.                 });
  124.             }
  125.         }
  126.     }
  127. </script>
  129. <style scoped>
  130.     /****************** 总容器 ******************/
  131.     .wrapper {
  132.         width: 100%;
  133.         height: 100%;
  134.     }
  136.     /****************** header部分 ******************/
  137.     .wrapper header {
  138.         width: 100%;
  139.         height: 12vw;
  140.         background-color: #0097FF;
  141.         color: #fff;
  142.         font-size: 4.8vw;
  144.         position: fixed;
  145.         left: 0;
  146.         top: 0;
  147.         z-index: 1000;
  149.         display: flex;
  150.         justify-content: center;
  151.         align-items: center;
  152.     }
  154.     /****************** 订单信息部分 ******************/
  155.     .wrapper .order-info {
  156.         /*注意这里，不设置高，靠内容撑开。因为地址有可能折行*/
  157.         width: 100%;
  158.         margin-top: 12vw;
  159.         background-color: #0097EF;
  160.         box-sizing: border-box;
  161.         padding: 2vw;
  162.         color: #fff;
  163.     }
  165.     .wrapper .order-info h5 {
  166.         font-size: 3vw;
  167.         font-weight: 300;
  168.     }
  170.     .wrapper .order-info .order-info-address {
  171.         width: 100%;
  172.         display: flex;
  173.         justify-content: space-between;
  174.         align-items: center;
  176.         font-weight: 700;
  177.         user-select: none;
  178.         cursor: pointer;
  179.         margin: 1vw 0;
  180.     }
  182.     .wrapper .order-info .order-info-address p {
  183.         width: 90%;
  184.         font-size: 5vw;
  185.     }
  187.     .wrapper .order-info .order-info-address i {
  188.         font-size: 6vw;
  189.     }
  191.     .wrapper .order-info p {
  192.         font-size: 3vw;
  193.     }
  195.     .wrapper h3 {
  196.         box-sizing: border-box;
  197.         padding: 3vw;
  198.         font-size: 4vw;
  199.         color: #666;
  200.         border-bottom: solid 1px #DDD;
  201.     }
  203.     /****************** 订单明细部分 ******************/
  204.     .wrapper .order-detailed {
  205.         width: 100%;
  206.     }
  208.     .wrapper .order-detailed li {
  209.         width: 100%;
  210.         height: 16vw;
  211.         box-sizing: border-box;
  212.         padding: 3vw;
  213.         color: #666;
  215.         display: flex;
  216.         justify-content: space-between;
  217.         align-items: center;
  218.     }
  220.     .wrapper .order-detailed li .order-detailed-left {
  221.         display: flex;
  222.         align-items: center;
  223.     }
  225.     .wrapper .order-detailed li .order-detailed-left img {
  226.         width: 10vw;
  227.         height: 10vw;
  228.     }
  230.     .wrapper .order-detailed li .order-detailed-left p {
  231.         font-size: 3.5vw;
  232.         margin-left: 3vw;
  233.     }
  235.     .wrapper .order-detailed li p {
  236.         font-size: 3.5vw;
  237.     }
  239.     .wrapper .order-deliveryfee {
  240.         width: 100%;
  241.         height: 16vw;
  242.         box-sizing: border-box;
  243.         padding: 3vw;
  244.         color: #666;
  245.         display: flex;
  246.         justify-content: space-between;
  247.         align-items: center;
  248.         font-size: 3.5vw;
  249.     }
  251.     /****************** 订单合计部分 ******************/
  252.     .wrapper .total {
  253.         width: 100%;
  254.         height: 14vw;
  256.         position: fixed;
  257.         left: 0;
  258.         bottom: 0;
  260.         display: flex;
  261.     }
  263.     .wrapper .total .total-left {
  264.         flex: 2;
  265.         background-color: #505051;
  266.         color: #fff;
  267.         font-size: 4.5vw;
  268.         font-weight: 700;
  269.         user-select: none;
  271.         display: flex;
  272.         justify-content: center;
  273.         align-items: center;
  274.     }
  276.     .wrapper .total .total-right {
  277.         flex: 1;
  278.         background-color: #38CA73;
  279.         color: #fff;
  280.         font-size: 4.5vw;
  281.         font-weight: 700;
  282.         user-select: none;
  283.         cursor: pointer;
  285.         display: flex;
  286.         justify-content: center;
  287.         align-items: center;
  288.     }
  289. </style>

5.1.5.Payment组件

  1. <template>
  2.     <div class="wrapper">
  4.         <!-- header部分 -->
  5.         <header>
  6.             <p>在线支付</p>
  7.         </header>
  9.         <!-- 订单信息部分 -->
  10.         <h3>订单信息：</h3>
  11.         <div class="order-info">
  12.             <p>
  13.                 {{orders.business.businessName}}
  14.                 <i class="fa fa-caret-down" @click="detailetShow"></i>
  15.             </p>
  16.             <p>&#165;{{orders.orderTotal}}</p>
  17.         </div>
  19.         <!-- 订单明细部分 -->
  20.         <ul class="order-detailet" v-show="isShowDetailet">
  21.             <li v-for="item in orders.list">
  22.                 <p>{{item.food.foodName}} x {{item.quantity}}</p>
  23.                 <p>&#165;{{item.food.foodPrice*item.quantity}}</p>
  24.             </li>
  25.             <li>
  26.                 <p>配送费</p>
  27.                 <p>&#165;{{orders.business.deliveryPrice}}</p>
  28.             </li>
  29.         </ul>
  31.         <!-- 支付方式部分 -->
  32.         <ul class="payment-type">
  33.             <li>
  34.                 <img src="../assets/alipay.png">
  35.                 <i class="fa fa-check-circle"></i>
  36.             </li>
  37.             <li>
  38.                 <img src="../assets/wechat.png">
  39.             </li>
  40.         </ul>
  41.         <div class="payment-button">
  42.             <button>确认支付</button>
  43.         </div>
  45.         <!-- 底部菜单部分 -->
  46.         <Footer></Footer>
  47.     </div>
  48. </template>
  50. <script>
  51.     import Footer from '../components/Footer.vue';
  53.     export default {
  54.         name: 'Payment',
  55.         data(){
  56.             return {
  57.                 orderId:this.$route.query.orderId,
  58.                 orders:{
  59.                     business:{}
  60.                 },
  61.                 isShowDetailet:false
  62.             }
  63.         },
  64.         created() {
  65.             this.$axios.post('OrdersController/getOrdersById',this.$qs.stringify({
  66.                 orderId:this.orderId
  67.             })).then(response=>{
  68.                 this.orders = response.data;
  69.             }).catch(error=>{
  70.                 console.error(error);
  71.             });
  72.         },
  73.         mounted() {
  74.             //这里的代码是实现：一旦路由到在线支付组件，就不能回到订单确认组件。
  75.             //先将当前url添加到history对象中
  76.             history.pushState(null,null,document.URL);
  77.             //popstate事件能够监听history对象的变化
  78.             window.onpopstate = () => {
  79.                 this.$router.push({path:'/index'});
  80.             }
  81.         },
  82.         destroyed() {
  83.             window.onpopstate = null;
  84.         },
  85.         methods:{
  86.             detailetShow(){
  87.                 this.isShowDetailet = !this.isShowDetailet;
  88.             }
  89.         },
  90.         components: {
  91.             Footer
  92.         }
  93.     }
  94. </script>
  96. <style scoped>
  97.     /****************** 总容器 ******************/
  98.     .wrapper {
  99.         width: 100%;
  100.         height: 100%;
  101.     }
  103.     /****************** header部分 ******************/
  104.     .wrapper header {
  105.         width: 100%;
  106.         height: 12vw;
  107.         background-color: #0097FF;
  108.         color: #fff;
  109.         font-size: 4.8vw;
  111.         position: fixed;
  112.         left: 0;
  113.         top: 0;
  114.         z-index: 1000;
  116.         display: flex;
  117.         justify-content: center;
  118.         align-items: center;
  119.     }
  121.     /****************** 订单信息部分 ******************/
  122.     .wrapper h3 {
  123.         margin-top: 12vw;
  124.         box-sizing: border-box;
  125.         padding: 4vw 4vw 0;
  127.         font-size: 4vw;
  128.         font-weight: 300;
  129.         color: #999;
  130.     }
  132.     .wrapper .order-info {
  133.         box-sizing: border-box;
  134.         padding: 4vw;
  135.         font-size: 4vw;
  136.         color: #666;
  138.         display: flex;
  139.         justify-content: space-between;
  140.         align-items: center;
  141.     }
  143.     .wrapper .order-info p:last-child {
  144.         color: orangered;
  145.     }
  147.     /****************** 订单明细部分 ******************/
  148.     .wrapper .order-detailet {
  149.         width: 100%;
  150.     }
  152.     .wrapper .order-detailet li {
  153.         width: 100%;
  154.         box-sizing: border-box;
  155.         padding: 1vw 4vw;
  157.         display: flex;
  158.         justify-content: space-between;
  159.         align-items: center;
  160.     }
  162.     .wrapper .order-detailet li p {
  163.         font-size: 3vw;
  164.         color: #666;
  165.     }
  167.     /****************** 支付方式部分 ******************/
  168.     .wrapper .payment-type {
  169.         width: 100%;
  170.     }
  172.     .wrapper .payment-type li {
  173.         width: 100%;
  174.         box-sizing: border-box;
  175.         padding: 4vw;
  177.         display: flex;
  178.         justify-content: space-between;
  179.         align-items: center;
  180.     }
  182.     .wrapper .payment-type li img {
  183.         width: 33vw;
  184.         height: 8.9vw;
  185.     }
  187.     .wrapper .payment-type li .fa-check-circle {
  188.         font-size: 5vw;
  189.         color: #38CA73;
  190.     }
  192.     .wrapper .payment-button {
  193.         width: 100%;
  194.         box-sizing: border-box;
  195.         padding: 4vw;
  196.     }
  198.     .wrapper .payment-button button {
  199.         width: 100%;
  200.         height: 10vw;
  201.         border: none;
  202.         /*去掉外轮廓线*/
  203.         outline: none;
  204.         border-radius: 4px;
  205.         background-color: #38CA73;
  206.         color: #fff;
  207.     }
  208. </style>

5.1.6.UserAddress组件

  1. <template>
  2.     <div class="wrapper">
  4.         <!-- header部分 -->
  5.         <header>
  6.             <p>地址管理</p>
  7.         </header>
  9.         <!-- 地址列表部分 -->
  10.         <ul class="addresslist">
  11.             <li v-for="item in deliveryAddressArr">
  12.                 <div class="addresslist-left" @click="setDeliveryAddress(item)">
  13.                     <h3>{{item.contactName}}{{item.contactSex | sexFilter}} {{item.contactTel}}</h3>
  14.                     <p>{{item.address}}</p>
  15.                 </div>
  16.                 <div class="addresslist-right">
  17.                     <i class="fa fa-edit" @click="editUserAddress(item.daId)"></i>
  18.                     <i class="fa fa-remove" @click="removeUserAddress(item.daId)"></i>
  19.                 </div>
  20.             </li>
  21.         </ul>
  23.         <!-- 新增地址部分 -->
  24.         <div class="addbtn" @click="toAddUserAddress">
  25.             <i class="fa fa-plus-circle"></i>
  26.             <p>新增收货地址</p>
  27.         </div>
  29.         <!-- 底部菜单部分 -->
  30.         <Footer></Footer>
  31.     </div>
  32. </template>
  34. <script>
  35.     import Footer from '../components/Footer.vue';
  37.     export default{
  38.         name:'UserAddress',
  39.         data(){
  40.             return {
  41.                 businessId:this.$route.query.businessId,
  42.                 user:{},
  43.                 deliveryAddressArr:[]
  44.             }
  45.         },
  46.         created() {
  47.             this.user = this.$getSessionStorage('user');
  49.             this.listDeliveryAddressByUserId();
  50.         },
  51.         components:{
  52.             Footer
  53.         },
  54.         filters:{
  55.             sexFilter(value){
  56.                 return value==1?'先生':'女士';
  57.             }
  58.         },
  59.         methods:{
  60.             listDeliveryAddressByUserId(){
  61.                 //查询送货地址
  62.                 this.$axios.post('DeliveryAddressController/listDeliveryAddressByUserId',this.$qs.stringify({
  63.                     userId:this.user.userId
  64.                 })).then(response=>{
  65.                     this.deliveryAddressArr = response.data;
  66.                 }).catch(error=>{
  67.                     console.error(error);
  68.                 });
  69.             },
  70.             setDeliveryAddress(deliveryAddress){
  71.                 //把用户选择的默认送货地址存储到localStorage中
  72.                 this.$setLocalStorage(this.user.userId,deliveryAddress);
  73.                 this.$router.push({path:'/orders',query:{businessId:this.businessId}});
  74.             },
  75.             toAddUserAddress(){
  76.                 this.$router.push({path:'/addUserAddress',query:{businessId:this.businessId}});
  77.             },
  78.             editUserAddress(daId){
  79.                 this.$router.push({path:'/editUserAddress',query:{businessId:this.businessId,daId:daId}});
  80.             },
  81.             removeUserAddress(daId){
  82.                 if(!confirm('确认要删除此送货地址吗？')){
  83.                     return;
  84.                 }
  86.                 this.$axios.post('DeliveryAddressController/removeDeliveryAddress',this.$qs.stringify({
  87.                     daId:daId
  88.                 })).then(response=>{
  89.                     if(response.data>0){
  90.                         let deliveryAddress = this.$getLocalStorage(this.user.userId);
  91.                         if(deliveryAddress!=null&&deliveryAddress.daId==daId){
  92.                             this.$removeLocalStorage(this.user.userId);
  93.                         }
  94.                         this.listDeliveryAddressByUserId();
  95.                     }else{
  96.                         alert('删除地址失败！');
  97.                     }
  98.                 }).catch(error=>{
  99.                     console.error(error);
  100.                 });
  101.             }
  102.         }
  103.     }
  104. </script>
  106. <style scoped>
  107.     /*************** 总容器 ***************/
  108.     .wrapper {
  109.         width: 100%;
  110.         height: 100%;
  111.         background-color: #F5F5F5;
  112.     }
  114.     /*************** header ***************/
  115.     .wrapper header {
  116.         width: 100%;
  117.         height: 12vw;
  118.         background-color: #0097FF;
  119.         display: flex;
  120.         justify-content: space-around;
  121.         align-items: center;
  122.         color: #fff;
  123.         font-size: 4.8vw;
  124.         position: fixed;
  125.         left: 0;
  126.         top: 0;
  127.         /*保证在最上层*/
  128.         z-index: 1000;
  129.     }
  131.     /*************** addresslist ***************/
  132.     .wrapper .addresslist {
  133.         width: 100%;
  134.         margin-top: 12vw;
  135.         background-color: #fff;
  136.     }
  138.     .wrapper .addresslist li {
  139.         width: 100%;
  140.         box-sizing: border-box;
  141.         border-bottom: solid 1px #DDD;
  142.         padding: 3vw;
  144.         display: flex;
  145.     }
  147.     .wrapper .addresslist li .addresslist-left {
  148.         flex: 5;
  149.         /*左边这块区域是可以点击的*/
  150.         user-select: none;
  151.         cursor: pointer;
  152.     }
  154.     .wrapper .addresslist li .addresslist-left h3 {
  155.         font-size: 4.6vw;
  156.         font-weight: 300;
  157.         color: #666;
  158.     }
  160.     .wrapper .addresslist li .addresslist-left p {
  161.         font-size: 4vw;
  162.         color: #666;
  163.     }
  165.     .wrapper .addresslist li .addresslist-right {
  166.         flex: 1;
  167.         font-size: 5.6vw;
  168.         color: #999;
  169.         cursor: pointer;
  171.         display: flex;
  172.         justify-content: space-around;
  173.         align-items: center;
  174.     }
  176.     /*************** 新增地址部分 ***************/
  177.     .wrapper .addbtn {
  178.         width: 100%;
  179.         height: 14vw;
  180.         border-top: solid 1px #DDD;
  181.         border-bottom: solid 1px #DDD;
  182.         background-color: #fff;
  183.         margin-top: 4vw;
  185.         display: flex;
  186.         justify-content: center;
  187.         align-items: center;
  189.         font-size: 4.5vw;
  190.         color: #0097FF;
  191.         user-select: none;
  192.         cursor: pointer;
  193.     }
  195.     .wrapper .addbtn p {
  196.         margin-left: 2vw;
  197.     }
  198. </style>

5.1.7.AddUserAddress组件

  1. <template>
  2.     <div class="wrapper">
  4.         <!-- header部分 -->
  5.         <header>
  6.             <p>新增送货地址</p>
  7.         </header>
  9.         <!-- 表单部分 -->
  10.         <ul class="form-box">
  11.             <li>
  12.                 <div class="title">
  13.                     联系人：
  14.                 </div>
  15.                 <div class="content">
  16.                     <input type="text" v-model="deliveryAddress.contactName" placeholder="联系人姓名">
  17.                 </div>
  18.             </li>
  19.             <li>
  20.                 <div class="title">
  21.                     性别：
  22.                 </div>
  23.                 <div class="content" style="font-size: 3vw;">
  24.                     <input type="radio" v-model="deliveryAddress.contactSex" value="1" style="width:6vw;height:3.2vw;">男
  25.                     <input type="radio" v-model="deliveryAddress.contactSex" value="0" style="width:6vw;height:3.2vw;">女
  26.                 </div>
  27.             </li>
  28.             <li>
  29.                 <div class="title">
  30.                     电话：
  31.                 </div>
  32.                 <div class="content">
  33.                     <input type="tel" v-model="deliveryAddress.contactTel" placeholder="电话">
  34.                 </div>
  35.             </li>
  36.             <li>
  37.                 <div class="title">
  38.                     收货地址：
  39.                 </div>
  40.                 <div class="content">
  41.                     <input type="text" v-model="deliveryAddress.address" placeholder="收货地址">
  42.                 </div>
  43.             </li>
  44.         </ul>
  46.         <div class="button-add">
  47.             <button @click="addUserAddress">保存</button>
  48.         </div>
  50.         <!-- 底部菜单部分 -->
  51.         <Footer></Footer>
  53.     </div>
  54. </template>
  56. <script>
  57.     import Footer from '../components/Footer.vue';
  59.     export default {
  60.         name: 'AddUserAddress',
  61.         data() {
  62.             return {
  63.                 businessId:this.$route.query.businessId,
  64.                 user:{},
  65.                 deliveryAddress:{
  66.                     contactName:'',
  67.                     contactSex:1,
  68.                     contactTel:'',
  69.                     address:''
  70.                 }
  71.             }
  72.         },
  73.         created() {
  74.             this.user = this.$getSessionStorage('user');
  75.         },
  76.         components: {
  77.             Footer
  78.         },
  79.         methods: {
  80.             addUserAddress(){
  81.                 if(this.deliveryAddress.contactName==''){
  82.                     alert('联系人姓名不能为空！');
  83.                     return;
  84.                 }
  85.                 if(this.deliveryAddress.contactTel==''){
  86.                     alert('联系人电话不能为空！');
  87.                     return;
  88.                 }
  89.                 if(this.deliveryAddress.address==''){
  90.                     alert('联系人地址不能为空！');
  91.                     return;
  92.                 }
  93.                 this.deliveryAddress.userId = this.user.userId;
  94.                 this.$axios.post('DeliveryAddressController/saveDeliveryAddress', this.$qs.stringify(
  95.                     this.deliveryAddress
  96.                 )).then(response => {
  97.                     if(response.data>0){
  98.                         this.$router.push({path:'/userAddress',query:{businessId:this.businessId}});
  99.                     }else{
  100.                         alert('新增地址失败！');
  101.                     }
  102.                 }).catch(error => {
  103.                     console.error(error);
  104.                 });
  105.             }
  106.         }
  107.     }
  108. </script>
  110. <style scoped>
  111.     /*************** 总容器 ***************/
  112.     .wrapper {
  113.         width: 100%;
  114.         height: 100%;
  115.     }
  117.     /*************** header ***************/
  118.     .wrapper header {
  119.         width: 100%;
  120.         height: 12vw;
  121.         background-color: #0097FF;
  122.         display: flex;
  123.         justify-content: space-around;
  124.         align-items: center;
  125.         color: #fff;
  126.         font-size: 4.8vw;
  127.         position: fixed;
  128.         left: 0;
  129.         top: 0;
  130.         /*保证在最上层*/
  131.         z-index: 1000;
  132.     }
  134.     /*************** （表单信息） ***************/
  135.     .wrapper .form-box {
  136.         width: 100%;
  137.         margin-top: 12vw;
  138.     }
  140.     .wrapper .form-box li {
  141.         box-sizing: border-box;
  142.         padding: 4vw 3vw 0vw 3vw;
  143.         display: flex;
  144.     }
  146.     .wrapper .form-box li .title {
  147.         flex: 0 0 18vw;
  148.         font-size: 3vw;
  149.         font-weight: 700;
  150.         color: #666;
  151.     }
  153.     .wrapper .form-box li .content {
  154.         flex: 1;
  156.         display: flex;
  157.         align-items: center;
  158.     }
  160.     .wrapper .form-box li .content input {
  161.         border: none;
  162.         outline: none;
  163.         width: 100%;
  164.         height: 4vw;
  165.         font-size: 3vw;
  166.     }
  168.     .wrapper .button-add {
  169.         box-sizing: border-box;
  170.         padding: 4vw 3vw 0vw 3vw;
  171.     }
  173.     .wrapper .button-add button {
  174.         width: 100%;
  175.         height: 10vw;
  176.         font-size: 3.8vw;
  177.         font-weight: 700;
  179.         border: none;
  180.         outline: none;
  181.         border-radius: 4px;
  182.         color: #fff;
  183.         background-color: #38CA73;
  184.     }
  186. </style>

5.1.8.EditUserAddress组件

  1. <template>
  2.     <div class="wrapper">
  4.         <!-- header部分 -->
  5.         <header>
  6.             <p>编辑送货地址</p>
  7.         </header>
  9.         <!-- 表单部分 -->
  10.         <ul class="form-box">
  11.             <li>
  12.                 <div class="title">
  13.                     联系人：
  14.                 </div>
  15.                 <div class="content">
  16.                     <input type="text" v-model="deliveryAddress.contactName" placeholder="联系人姓名">
  17.                 </div>
  18.             </li>
  19.             <li>
  20.                 <div class="title">
  21.                     性别：
  22.                 </div>
  23.                 <div class="content" style="font-size: 3vw;">
  24.                     <input type="radio" v-model="deliveryAddress.contactSex" value="1" style="width:6vw;height:3.2vw;" checked>男
  25.                     <input type="radio" v-model="deliveryAddress.contactSex" value="0" style="width:6vw;height:3.2vw;">女
  26.                 </div>
  27.             </li>
  28.             <li>
  29.                 <div class="title">
  30.                     电话：
  31.                 </div>
  32.                 <div class="content">
  33.                     <input type="tel" v-model="deliveryAddress.contactTel" placeholder="电话">
  34.                 </div>
  35.             </li>
  36.             <li>
  37.                 <div class="title">
  38.                     收货地址：
  39.                 </div>
  40.                 <div class="content">
  41.                     <input type="text" v-model="deliveryAddress.address" placeholder="收货地址">
  42.                 </div>
  43.             </li>
  44.         </ul>
  46.         <div class="button-add">
  47.             <button @click="editUserAddress">更新</button>
  48.         </div>
  50.         <!-- 底部菜单部分 -->
  51.         <Footer></Footer>
  52.     </div>
  53. </template>
  55. <script>
  56.     import Footer from '../components/Footer.vue';
  58.     export default {
  59.         name: 'EditUserAddress',
  60.         data() {
  61.             return {
  62.                 businessId: this.$route.query.businessId,
  63.                 daId: this.$route.query.daId,
  64.                 user: {},
  65.                 deliveryAddress: {}
  66.             }
  67.         },
  68.         created() {
  69.             this.user = this.$getSessionStorage('user');
  71.             this.$axios.post('DeliveryAddressController/getDeliveryAddressById', this.$qs.stringify({
  72.                 daId:this.daId
  73.             })).then(response => {
  74.                 this.deliveryAddress = response.data;
  75.             }).catch(error => {
  76.                 console.error(error);
  77.             });
  78.         },
  79.         components: {
  80.             Footer
  81.         },
  82.         methods: {
  83.             editUserAddress() {
  84.                 if (this.deliveryAddress.contactName == '') {
  85.                     alert('联系人姓名不能为空！');
  86.                     return;
  87.                 }
  88.                 if (this.deliveryAddress.contactTel == '') {
  89.                     alert('联系人电话不能为空！');
  90.                     return;
  91.                 }
  92.                 if (this.deliveryAddress.address == '') {
  93.                     alert('联系人地址不能为空！');
  94.                     return;
  95.                 }
  97.                 this.$axios.post('DeliveryAddressController/updateDeliveryAddress', this.$qs.stringify(
  98.                     this.deliveryAddress
  99.                 )).then(response => {
  100.                     if (response.data > 0) {
  101.                         this.$router.push({
  102.                             path: '/userAddress',
  103.                             query: {
  104.                                 businessId: this.businessId
  105.                             }
  106.                         });
  107.                     } else {
  108.                         alert('更新地址失败！');
  109.                     }
  110.                 }).catch(error => {
  111.                     console.error(error);
  112.                 });
  113.             }
  114.         }
  115.     }
  116. </script>
  118. <style scoped>
  119.     /*************** 总容器 ***************/
  120.     .wrapper {
  121.         width: 100%;
  122.         height: 100%;
  123.     }
  125.     /*************** header ***************/
  126.     .wrapper header {
  127.         width: 100%;
  128.         height: 12vw;
  129.         background-color: #0097FF;
  130.         display: flex;
  131.         justify-content: space-around;
  132.         align-items: center;
  133.         color: #fff;
  134.         font-size: 4.8vw;
  135.         position: fixed;
  136.         left: 0;
  137.         top: 0;
  138.         /*保证在最上层*/
  139.         z-index: 1000;
  140.     }
  142.     /*************** （表单信息） ***************/
  143.     .wrapper .form-box {
  144.         width: 100%;
  145.         margin-top: 12vw;
  146.     }
  148.     .wrapper .form-box li {
  149.         box-sizing: border-box;
  150.         padding: 4vw 3vw 0vw 3vw;
  151.         display: flex;
  152.     }
  154.     .wrapper .form-box li .title {
  155.         flex: 0 0 18vw;
  156.         font-size: 3vw;
  157.         font-weight: 700;
  158.         color: #666;
  159.     }
  161.     .wrapper .form-box li .content {
  162.         flex: 1;
  164.         display: flex;
  165.         align-items: center;
  166.     }
  168.     .wrapper .form-box li .content input {
  169.         border: none;
  170.         outline: none;
  171.         width: 100%;
  172.         height: 4vw;
  173.         font-size: 3vw;
  174.     }
  176.     .wrapper .button-add {
  177.         box-sizing: border-box;
  178.         padding: 4vw 3vw 0vw 3vw;
  179.     }
  181.     .wrapper .button-add button {
  182.         width: 100%;
  183.         height: 10vw;
  184.         font-size: 3.8vw;
  185.         font-weight: 700;
  187.         border: none;
  188.         outline: none;
  189.         border-radius: 4px;
  190.         color: #fff;
  191.         background-color: #38CA73;
  192.     }
  193. </style>

5.1.9.OrderList组件

  1. <template>
  2.     <div class="wrapper">
  4.         <!-- header部分 -->
  5.         <header>
  6.             <p>我的订单</p>
  7.         </header>
  9.         <!-- 订单列表部分 -->
  10.         <h3>未支付订单信息：</h3>
  11.         <ul class="order">
  12.             <li v-for="item in orderArr" v-if="item.orderState==0">
  13.                 <div class="order-info">
  14.                     <p>
  15.                         {{item.business.businessName}}
  16.                         <i class="fa fa-caret-down" @click="detailetShow(item)"></i>
  17.                     </p>
  18.                     <div class="order-info-right">
  19.                         <p>&#165;{{item.orderTotal}}</p>
  20.                         <div class="order-info-right-icon">去支付</div>
  21.                     </div>
  22.                 </div>
  23.                 <ul class="order-detailet" v-show="item.isShowDetailet">
  24.                     <li v-for="odItem in item.list">
  25.                         <p>{{odItem.food.foodName}} x {{odItem.quantity}}</p>
  26.                         <p>&#165;{{odItem.food.foodPrice*odItem.quantity}}</p>
  27.                     </li>
  28.                     <li>
  29.                         <p>配送费</p>
  30.                         <p>&#165;{{item.business.deliveryPrice}}</p>
  31.                     </li>
  32.                 </ul>
  33.             </li>
  34.         </ul>
  36.         <h3>已支付订单信息：</h3>
  37.         <ul class="order">
  38.             <li v-for="item in orderArr" v-if="item.orderState==1">
  39.                 <div class="order-info">
  40.                     <p>
  41.                         {{item.business.businessName}}
  42.                         <i class="fa fa-caret-down" @click="detailetShow(item)"></i>
  43.                     </p>
  44.                     <div class="order-info-right">
  45.                         <p>&#165;{{item.orderTotal}}</p>
  46.                     </div>
  47.                 </div>
  48.                 <ul class="order-detailet" v-show="item.isShowDetailet">
  49.                     <li v-for="odItem in item.list">
  50.                         <p>{{odItem.food.foodName}} x {{odItem.quantity}}</p>
  51.                         <p>&#165;{{odItem.food.foodPrice*odItem.quantity}}</p>
  52.                     </li>
  53.                     <li>
  54.                         <p>配送费</p>
  55.                         <p>&#165;{{item.business.deliveryPrice}}</p>
  56.                     </li>
  57.                 </ul>
  58.             </li>
  59.         </ul>
  61.         <!-- 底部菜单部分 -->
  62.         <Footer></Footer>
  64.     </div>
  65. </template>
  67. <script>
  68.     import Footer from '../components/Footer.vue';
  70.     export default{
  71.         name:'OrderList',
  72.         data(){
  73.             return {
  74.                 orderArr:[],
  75.                 user:{}
  76.             }
  77.         },
  78.         created() {
  79.             this.user = this.$getSessionStorage('user');
  81.             this.$axios.post('OrdersController/listOrdersByUserId',this.$qs.stringify({
  82.                 userId:this.user.userId
  83.             })).then(response=>{
  84.                 let result = response.data;
  85.                 for(let orders of result){
  86.                     orders.isShowDetailet = false;
  87.                 }
  88.                 this.orderArr = result;
  89.             }).catch(error=>{
  90.                 console.error(error);
  91.             });
  92.         },
  93.         methods:{
  94.             detailetShow(orders){
  95.                 orders.isShowDetailet = !orders.isShowDetailet;
  96.             }
  97.         },
  98.         components:{
  99.             Footer
  100.         }
  101.     }
  102. </script>
  104. <style scoped>
  105.     /****************** 总容器 ******************/
  106.     .wrapper {
  107.         width: 100%;
  108.         height: 100%;
  109.     }
  111.     /****************** header部分 ******************/
  112.     .wrapper header {
  113.         width: 100%;
  114.         height: 12vw;
  115.         background-color: #0097FF;
  116.         color: #fff;
  117.         font-size: 4.8vw;
  119.         position: fixed;
  120.         left: 0;
  121.         top: 0;
  122.         z-index: 1000;
  124.         display: flex;
  125.         justify-content: center;
  126.         align-items: center;
  127.     }
  129.     /****************** 历史订单列表部分 ******************/
  130.     .wrapper h3 {
  131.         margin-top: 12vw;
  132.         box-sizing: border-box;
  133.         padding: 4vw;
  134.         font-size: 4vw;
  135.         font-weight: 300;
  136.         color: #999;
  137.     }
  139.     .wrapper .order {
  140.         width: 100%;
  141.     }
  143.     .wrapper .order li {
  144.         width: 100%;
  145.     }
  147.     .wrapper .order li .order-info {
  148.         box-sizing: border-box;
  149.         padding: 2vw 4vw;
  150.         font-size: 4vw;
  151.         color: #666;
  153.         display: flex;
  154.         justify-content: space-between;
  155.         align-items: center;
  156.     }
  158.     .wrapper .order li .order-info .order-info-right {
  159.         display: flex;
  160.     }
  162.     .wrapper .order li .order-info .order-info-right .order-info-right-icon {
  163.         background-color: #f90;
  164.         color: #fff;
  165.         border-radius: 3px;
  166.         margin-left: 2vw;
  167.         user-select: none;
  168.         cursor: pointer;
  169.     }
  171.     .wrapper .order li .order-detailet {
  172.         width: 100%;
  173.     }
  175.     .wrapper .order li .order-detailet li {
  176.         width: 100%;
  177.         box-sizing: border-box;
  178.         padding: 1vw 4vw;
  179.         color: #666;
  180.         font-size: 3vw;
  182.         display: flex;
  183.         justify-content: space-between;
  184.         align-items: center;
  185.     }
  186. </style>

5.1.10.Login组件

  1. <template>
  2.     <div class="wrapper">
  4.         <!-- header部分 -->
  5.         <header>
  6.             <p>用户登陆</p>
  7.         </header>
  9.         <!-- 表单部分 -->
  10.         <ul class="form-box">
  11.             <li>
  12.                 <div class="title">
  13.                     手机号码：
  14.                 </div>
  15.                 <div class="content">
  16.                     <input type="text" v-model="userId" placeholder="手机号码">
  17.                 </div>
  18.             </li>
  19.             <li>
  20.                 <div class="title">
  21.                     密码：
  22.                 </div>
  23.                 <div class="content">
  24.                     <input type="password" v-model="password" placeholder="密码">
  25.                 </div>
  26.             </li>
  27.         </ul>
  29.         <div class="button-login">
  30.             <button @click="login">登陆</button>
  31.         </div>
  32.         <div class="button-register">
  33.             <button @click="register">去注册</button>
  34.         </div>
  36.         <!-- 底部菜单部分 -->
  37.         <Footer></Footer>
  38.     </div>
  39. </template>
  41. <script>
  42.     import Footer from '../components/Footer.vue';
  44.     export default{
  45.         name:'Login',
  46.         data(){
  47.             return {
  48.                 userId:'',
  49.                 password:''
  50.             }
  51.         },
  52.         methods:{
  53.             login(){
  54.                 if(this.userId==''){
  55.                     alert('手机号码不能为空！');
  56.                     return;
  57.                 }
  58.                 if(this.password==''){
  59.                     alert('密码不能为空！');
  60.                     return;
  61.                 }
  63.                 //登录请求
  64.                 this.$axios.post('UserController/getUserByIdByPass',this.$qs.stringify({
  65.                     userId:this.userId,
  66.                     password:this.password
  67.                 })).then(response=>{
  68.                     let user = response.data;
  69.                     if(user==null){
  70.                         alert('用户名或密码不正确！');
  71.                     }else{
  72.                         //sessionstorage有容量限制，为了防止数据溢出，所以不将userImg数据放入session中
  73.                         user.userImg = '';
  74.                         this.$setSessionStorage('user',user);
  75.                         this.$router.go(-1);
  76.                     }
  77.                 }).catch(error=>{
  78.                     console.error(error);
  79.                 });
  80.             },
  81.             register(){
  82.                 this.$router.push({path:'register'});
  83.             }
  84.         },
  85.         components:{
  86.             Footer
  87.         }
  88.     }
  89. </script>
  91. <style scoped>
  92.     /****************** 总容器 ******************/
  93.     .wrapper {
  94.         width: 100%;
  95.         height: 100%;
  96.     }
  98.     /****************** header部分 ******************/
  99.     .wrapper header {
  100.         width: 100%;
  101.         height: 12vw;
  102.         background-color: #0097FF;
  103.         color: #fff;
  104.         font-size: 4.8vw;
  106.         position: fixed;
  107.         left: 0;
  108.         top: 0;
  109.         z-index: 1000;
  111.         display: flex;
  112.         justify-content: center;
  113.         align-items: center;
  114.     }
  116.     /****************** 表单部分 ******************/
  117.     .wrapper .form-box {
  118.         width: 100%;
  119.         margin-top: 12vw;
  120.     }
  122.     .wrapper .form-box li {
  123.         box-sizing: border-box;
  124.         padding: 4vw 3vw 0 3vw;
  125.         display: flex;
  126.         align-items: center;
  127.     }
  129.     .wrapper .form-box li .title {
  130.         flex: 0 0 18vw;
  131.         font-size: 3vw;
  132.         font-weight: 700;
  133.         color: #666;
  134.     }
  136.     .wrapper .form-box li .content {
  137.         flex: 1;
  138.     }
  140.     .wrapper .form-box li .content input {
  141.         border: none;
  142.         outline: none;
  143.         width: 100%;
  144.         height: 4vw;
  145.         font-size: 3vw;
  146.     }
  148.     .wrapper .button-login {
  149.         width: 100%;
  150.         box-sizing: border-box;
  151.         padding: 4vw 3vw 0 3vw;
  152.     }
  154.     .wrapper .button-login button {
  155.         width: 100%;
  156.         height: 10vw;
  157.         font-size: 3.8vw;
  158.         font-weight: 700;
  159.         color: #fff;
  160.         background-color: #38CA73;
  161.         border-radius: 4px;
  163.         border: none;
  164.         outline: none;
  165.     }
  167.     .wrapper .button-register {
  168.         width: 100%;
  169.         box-sizing: border-box;
  170.         padding: 4vw 3vw 0 3vw;
  171.     }
  173.     .wrapper .button-register button {
  174.         width: 100%;
  175.         height: 10vw;
  176.         font-size: 3.8vw;
  177.         font-weight: 700;
  178.         /*与上面登陆按钮不同的只有颜色、背景色、边框不同*/
  179.         color: #666;
  180.         background-color: #EEE;
  181.         border: solid 1px #DDD;
  182.         border-radius: 4px;
  184.         border: none;
  185.         outline: none;
  186.     }
  188.     /****************** 底部菜单部分 ******************/
  189.     .wrapper .footer {
  190.         width: 100%;
  191.         height: 14vw;
  192.         border-top: solid 1px #DDD;
  193.         background-color: #fff;
  195.         position: fixed;
  196.         left: 0;
  197.         bottom: 0;
  199.         display: flex;
  200.         justify-content: space-around;
  201.         align-items: center;
  202.     }
  204.     .wrapper .footer li {
  205.         display: flex;
  206.         flex-direction: column;
  207.         justify-content: center;
  208.         align-items: center;
  210.         color: #999;
  211.         user-select: none;
  212.         cursor: pointer;
  213.     }
  215.     .wrapper .footer li p {
  216.         font-size: 2.8vw;
  217.     }
  219.     .wrapper .footer li i {
  220.         font-size: 5vw;
  221.     }
  222. </style>

5.1.11.Register组件

  1. <template>
  2.     <div class="wrapper">
  4.         <!-- header部分 -->
  5.         <header>
  6.             <p>用户注册</p>
  7.         </header>
  9.         <!-- 表单部分 -->
  10.         <ul class="form-box">
  11.             <li>
  12.                 <div class="title">
  13.                     手机号码：
  14.                 </div>
  15.                 <div class="content">
  16.                     <input type="text" @blur="checkUserId" v-model="user.userId" placeholder="手机号码">
  17.                 </div>
  18.             </li>
  19.             <li>
  20.                 <div class="title">
  21.                     密码：
  22.                 </div>
  23.                 <div class="content">
  24.                     <input type="password" v-model="user.password" placeholder="密码">
  25.                 </div>
  26.             </li>
  27.             <li>
  28.                 <div class="title">
  29.                     确认密码：
  30.                 </div>
  31.                 <div class="content">
  32.                     <input type="password" v-model="confirmPassword" placeholder="确认密码">
  33.                 </div>
  34.             </li>
  35.             <li>
  36.                 <div class="title">
  37.                     用户名称：
  38.                 </div>
  39.                 <div class="content">
  40.                     <input type="text" v-model="user.userName" placeholder="用户名称">
  41.                 </div>
  42.             </li>
  43.             <li>
  44.                 <div class="title">
  45.                     性别：
  46.                 </div>
  47.                 <div class="content" style="font-size: 3vw;">
  48.                     <input type="radio" v-model="user.userSex" value="1" style="width:6vw;height: 3.2vw;">男
  49.                     <input type="radio" v-model="user.userSex" value="0" style="width:6vw;height: 3.2vw;">女
  50.                 </div>
  51.             </li>
  52.         </ul>
  54.         <div class="button-login">
  55.             <button @click="register">注册</button>
  56.         </div>
  58.         <!-- 底部菜单部分 -->
  59.         <Footer></Footer>
  60.     </div>
  61. </template>
  63. <script>
  64.     import Footer from '../components/Footer.vue';
  66.     export default {
  67.         name: 'Register',
  68.         data() {
  69.             return {
  70.                 user:{
  71.                     userId:'',
  72.                     password:'',
  73.                     userName:'',
  74.                     userSex:1
  75.                 },
  76.                 confirmPassword:''
  77.             }
  78.         },
  79.         methods: {
  80.             checkUserId(){
  81.                 this.$axios.post('UserController/getUserById', this.$qs.stringify({
  82.                     userId: this.user.userId,
  83.                 })).then(response => {
  84.                     if(response.data==1){
  85.                         this.user.userId = '';
  86.                         alert('此手机号码已存在！')
  87.                     }
  88.                 }).catch(error => {
  89.                     console.error(error);
  90.                 });
  91.             },
  92.             register() {
  93.                 if (this.user.userId == '') {
  94.                     alert('手机号码不能为空！');
  95.                     return;
  96.                 }
  97.                 if (this.user.password == '') {
  98.                     alert('密码不能为空！');
  99.                     return;
  100.                 }
  101.                 if (this.user.password != this.confirmPassword) {
  102.                     alert('两次输入的密码不一致！');
  103.                     return;
  104.                 }
  105.                 if (this.user.userName == '') {
  106.                     alert('用户名不能为空！');
  107.                     return;
  108.                 }
  110.                 //注册请求
  111.                 this.$axios.post('UserController/saveUser', this.$qs.stringify(
  112.                     this.user
  113.                 )).then(response => {
  114.                     if(response.data>0){
  115.                         alert('注册成功！');
  116.                         this.$router.go(-1);
  117.                     }else{
  118.                         alert('注册失败！');
  119.                     }
  120.                 }).catch(error => {
  121.                     console.error(error);
  122.                 });
  123.             }
  124.         },
  125.         components: {
  126.             Footer
  127.         }
  128.     }
  129. </script>
  131. <style scoped>
  132.     /****************** 总容器 ******************/
  133.     .wrapper {
  134.         width: 100%;
  135.         height: 100%;
  136.     }
  138.     /****************** header部分 ******************/
  139.     .wrapper header {
  140.         width: 100%;
  141.         height: 12vw;
  142.         background-color: #0097FF;
  143.         color: #fff;
  144.         font-size: 4.8vw;
  146.         position: fixed;
  147.         left: 0;
  148.         top: 0;
  149.         z-index: 1000;
  151.         display: flex;
  152.         justify-content: center;
  153.         align-items: center;
  154.     }
  156.     /****************** 表单部分 ******************/
  157.     .wrapper .form-box {
  158.         width: 100%;
  159.         margin-top: 12vw;
  160.     }
  162.     .wrapper .form-box li {
  163.         box-sizing: border-box;
  164.         padding: 4vw 3vw 0 3vw;
  165.         display: flex;
  166.         align-items: center;
  167.     }
  169.     .wrapper .form-box li .title {
  170.         flex: 0 0 18vw;
  171.         font-size: 3vw;
  172.         font-weight: 700;
  173.         color: #666;
  174.     }
  176.     .wrapper .form-box li .content {
  177.         flex: 1;
  178.     }
  180.     .wrapper .form-box li .content input {
  181.         border: none;
  182.         outline: none;
  183.         width: 100%;
  184.         height: 4vw;
  185.         font-size: 3vw;
  186.     }
  188.     .wrapper .button-login {
  189.         width: 100%;
  190.         box-sizing: border-box;
  191.         padding: 4vw 3vw 0 3vw;
  192.     }
  194.     .wrapper .button-login button {
  195.         width: 100%;
  196.         height: 10vw;
  197.         font-size: 3.8vw;
  198.         font-weight: 700;
  199.         color: #fff;
  200.         background-color: #38CA73;
  201.         border-radius: 4px;
  203.         border: none;
  204.         outline: none;
  205.     }
  207.     .wrapper .button-register {
  208.         width: 100%;
  209.         box-sizing: border-box;
  210.         padding: 4vw 3vw 0 3vw;
  211.     }
  213.     .wrapper .button-register button {
  214.         width: 100%;
  215.         height: 10vw;
  216.         font-size: 3.8vw;
  217.         font-weight: 700;
  218.         color: #666;
  219.         background-color: #EEE;
  220.         border-radius: 4px;
  222.         border: none;
  223.         outline: none;
  224.         border: solid 1px #DDD;
  225.     }
  226. </style>

5.1.12.Footer共通组件

  1. <template>
  2.     <ul class="footer">
  3.         <li @click="toIndex">
  4.             <i class="fa fa-home"></i>
  5.             <p>首页</p>
  6.         </li>
  7.         <li>
  8.             <i class="fa fa-compass"></i>
  9.             <p>发现</p>
  10.         </li>
  11.         <li @click="toOrderList">
  12.             <i class="fa fa-file-text-o"></i>
  13.             <p>订单</p>
  14.         </li>
  15.         <li>
  16.             <i class="fa fa-user-o"></i>
  17.             <p>我的</p>
  18.         </li>
  19.     </ul>
  20. </template>
  22. <script>
  23.     export default{
  24.         name:'Footer',
  25.         methods:{
  26.             toIndex(){
  27.                 this.$router.push({path:'/index'});
  28.             },
  29.             toOrderList(){
  30.                 this.$router.push({path:'/orderList'});
  31.             }
  32.         }
  33.     }
  34. </script>
  36. <style>
  37.     .wrapper .footer {
  38.         width: 100%;
  39.         height: 14vw;
  40.         border-top: solid 1px #DDD;
  41.         background-color: #fff;
  43.         position: fixed;
  44.         left: 0;
  45.         bottom: 0;
  47.         display: flex;
  48.         justify-content: space-around;
  49.         align-items: center;
  50.     }
  52.     .wrapper .footer li {
  53.         /*li本身的尺寸完全由内容撑起*/
  54.         display: flex;
  55.         flex-direction: column;
  56.         justify-content: center;
  57.         align-items: center;
  59.         color: #999;
  60.         user-select: none;
  61.         cursor: pointer;
  62.     }
  64.     .wrapper .footer li p {
  65.         font-size: 2.8vw;
  66.     }
  68.     .wrapper .footer li i {
  69.         font-size: 5vw;
  70.     }
  71. </style>