Vue-項目之免費課和購物車實現

時間  2019-11-21
標籤 vue 項目 免費 購物車 實現 简体版
原文   原文鏈接

調整首頁細節

  1. 固定頭部
    App.vue中代碼

<style>
  body{
    padding: 0;
    margin:0;
    margin-top: 80px;
  }
  
</style>


Header中代碼：

<style scoped>
  .header{
    top:0;
    left:0;
    right:0;
    margin: auto;
    background-color: #fff;
    height: 80px;
    z-index: 1000;
    position: fixed;
    box-shadow: 0 0.5px 0.5px 0 #c9c9c9;
  }

</style>

     

  2. 調整輪播圖左右兩邊的按鈕
    注意，style標籤中要設置全局樣式，因此不須要scoped
    <style>
.el-carousel__arrow{
  width: 100px!important;
  height: 100px!important;
}
.el-icon-arrow-left{
  font-size: 35px;
  margin-left: 50px;
}
.el-carousel__arrow--left{
  left: -50px;
}
</style>

     

免費課

在組件目錄components下建立Course.vue組件文件,代碼以下:vue

  1. <template>
  <div class="course">

  </div>
</template>

<script>
export default {
  name: "Course",
  data(){
    return {

    }
  },
}
</script>


<style scoped>
  
</style>

     

  2. 在routers/index.js路由中註冊路由
    import Vue from "vue"
import Router from "vue-router"

// 導入能夠被用戶訪問的組件
import Home from "@/components/Home"
import Course from "@/components/Course"

Vue.use(Router);

export default new Router({
  mode: "history",
  routes:[
    // 路由列表
    {
      path: "/",
      name: "Home",
      component:Home,
    },
    {
      path: "/home",
      name: "Home",
      component:Home,
    },
    {
      path: "/course",
      name: "Course",
      component:Course,
    },

  ]
})

     

  3. 完成免費課課程列表
    文件代碼結構，Course.vue代碼 
    <template>
  <div class="course">
    <Header/>
    <div class="main">
      <!-- 篩選功能 -->
      <div class="top">
        <ul class="condition condition1">
          <li class="cate-condition">課程分類:</li>
          <li class="item current">所有</li>
          <li class="item">Python</li>
          <li class="item">Linux運維</li>
          <li class="item">Python進階</li>
          <li class="item">開發工具</li>
          <li class="item">Go語言</li>
          <li class="item">機器學習</li>
          <li class="item">技術生涯</li>
        </ul>
        <ul class="condition condition2">
          <li class="cate-condition">篩&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;選:</li>
          <li class="item current">默認</li>
          <li class="item">人氣</li>
          <li class="item price">價格</li>
          <li class="course-length">共21個課程</li>
        </ul>
      </div>
      <!-- 課程列表 --->
      <div class="list">
        <ul>
          <li class="course-item">
            <div class="course-cover">
              <img src="../../static/course/Python.jpeg" alt="">
            </div>
            <div class="course-info">
              <div class="course-title">
                <h3>Python開發21天入門</h3>
                <span>46520人已加入學習</span>
              </div>
              <p class="teacher">
                <span class="info">Alex 金角大王 老男孩Python教學總監</span>
                <span class="lesson">共154課時/更新完成</span>
              </p>
              <ul class="lesson-list">
                <li>
                  <p class="lesson-title">01 | 經常使用模塊學習-模塊的種類和導入方法</p>
                  <span class="free">免費</span>
                </li>
                <li>
                  <p class="lesson-title">02 | 編程語言介紹（三）高級語言</p>
                  <span class="free">免費</span>
                </li>
                <li>
                  <p class="lesson-title">03 | 編程語言介紹（一）</p>
                  <span class="free">免費</span>
                </li>
                <li>
                  <p class="lesson-title">04 | 課程介紹（二）-Python與其餘語言的區別</p>
                  <span class="free">免費</span>
                </li>
              </ul>
              <div class="buy-info">
                <span class="discount">限時免費</span>
                <span class="present-price">￥0.00元</span>
                <span class="original-price">原價：29.00元</span>
                <button class="buy-now">當即購買</button>
              </div>
            </div>
          </li>
          <li class="course-item">
            <div class="course-cover">
              <img src="../../static/course/Linux.jpeg" alt="">
            </div>
            <div class="course-info">
              <div class="course-title">
                <h3>Linux系統基礎5周入門</h3>
                <span>23213人已加入學習</span>
              </div>
              <p class="teacher">
                <span class="info">李泳誼 老男孩Linux學科帶頭人</span>
                <span class="lesson">共148課時/已更新147課時</span>
              </p>
              <ul class="lesson-list">
                <li>
                  <p class="lesson-title">01 | 服務器頭部介紹 </p>
                  <span class="free">免費</span>
                </li>
                <li>
                  <p class="lesson-title">02 | 第一章總結 </p>
                  <span class="free">免費</span>
                </li>
                <li>
                  <p class="lesson-title">03 | 服務器硬件詳解 </p>
                  <span class="free">免費</span>
                </li>
                <li>
                  <p class="lesson-title">04 | 服務器核心硬件-raid卡-光驅</p>
                  <span class="free">免費</span>
                </li>
              </ul>
              <div class="buy-info">
                <span class="discount">限時免費</span>
                <span class="present-price">￥0.00元</span>
                <span class="original-price">原價：9.00元</span>
                <button class="buy-now">當即購買</button>
              </div>
            </div>
          </li>
          <li class="course-item">
            <div class="course-cover">
              <img src="../../static/course/pycharm.jpeg" alt="">
            </div>
            <div class="course-info">
              <div class="course-title">
                <h3>Pycharm</h3>
                <span>2247人已加入學習</span>
              </div>
              <p class="teacher">
                <span class="info">李文周 前段搜狗自身工程師</span>
                <span class="lesson">共1課時/更新完成</span>
              </p>
              <ul class="lesson-list">
                <li>
                  <p class="lesson-title">01 | Pycharm使用祕籍視頻課程</p>
                  <span class="free">免費</span>
                </li>
              </ul>
              <div class="buy-info">
                <span class="discount">限時免費</span>
                <span class="present-price">￥0.00元</span>
                <span class="original-price">原價：9.00元</span>
                <button class="buy-now">當即購買</button>
              </div>
            </div>
          </li>
          <li class="course-item">
            <div class="course-cover">
              <img src="../../static/course/PC列表頁.jpeg" alt="">
            </div>
            <div class="course-info">
              <div class="course-title">
                <h3>網管到CEO的10年逆襲之路</h3>
                <span>4580人已加入學習</span>
              </div>
              <p class="teacher">
                <span class="info">Alex 金角大王 老男孩Python教學總監</span>
                <span class="lesson">共10課時/更新完成</span>
              </p>
              <ul class="lesson-list">
                <li>
                  <p class="lesson-title">01 | 技術人員如何度過經濟寒冬</p>
                  <span class="free">免費</span>
                </li>
                <li>
                  <p class="lesson-title">02 | 7天集訓營開班直播</p>
                  <span class="free">免費</span>
                </li>
                <li>
                  <p class="lesson-title">03 | 失敗性人格剖析</p>
                </li>
                <li>
                  <p class="lesson-title">04 | 焦慮改變命運</p>
                </li>
              </ul>
              <div class="buy-info">
                <span class="discount">限時折扣</span>
                <span class="present-price">￥1.00元</span>
                <span class="original-price">原價：100.00元</span>
                <button class="buy-now">當即購買</button>
              </div>
            </div>
          </li>
        </ul>
      </div>
    </div>
    <Footer/>
  </div>
</template>

<script>
import Header from "./common/Header"
import Footer from "./common/Footer"
export default {
  name: "Course",
  data(){
    return {

    }
  },
  components:{Header,Footer}
}
</script>

<style scoped>
.main{
    width: 1100px;
    height: auto;
    margin: 0 auto;
    padding-top: 35px;
}
.main .top{
    margin-bottom: 35px;
    padding: 25px 30px 25px 20px;
    background: #fff;
    border-radius: 4px;
    box-shadow: 0 2px 4px 0 #f0f0f0;
}
.condition{
    border-bottom: 1px solid #333;
    border-bottom-color: rgba(51,51,51,.05);
    padding-bottom: 18px;
    margin-bottom: 17px;
    overflow: hidden;
}
.condition li{
    float: left;
}
.condition .cate-condition{
    color: #888;
    font-size: 16px;
}
.condition .item{
    padding: 6px 16px;
    line-height: 16px;
    margin-left: 14px;
    position: relative;
    transition: all .3s ease;
    cursor: pointer;
    color: #4a4a4a;
}
.condition1 .current{
    color: #ffc210;
    border: 1px solid #ffc210!important;
    border-radius: 30px;
}
.condition2 .current{
  color: #ffc210;
}
.condition .price:before{
    content: "";
    width: 0;
    border: 5px solid transparent;
    border-top-color: #d8d8d8;
    position: absolute;
    right: 0;
    bottom: 2.5px;
}
.condition .price:after{
    content: "";
    width: 0;
    border: 5px solid transparent;
    border-bottom-color: #ffc210;
    position: absolute;
    right: 0;
    top: 2.5px;
}
.condition2 .course-length{
    float: right;
    font-size: 14px;
    color: #9b9b9b;
}
.course-item{
    background: #fff;
    padding: 20px 30px 20px 20px;
    margin-bottom: 35px;
    border-radius: 2px;
    cursor: pointer;
    box-shadow: 2px 3px 16px rgba(0,0,0,.1);
    transition: all .2s ease;
    overflow: hidden;
    cursor:pointer;
}
.course-cover {
    width: 423px;
    height: 210px;
    margin-right: 30px;
    float: left;
}
.course-info{
    width: 597px;
    float: left;
}
.course-title{
  margin-bottom: 8px;
  overflow: hidden;

}
.course-title h3{
  font-size: 26px;
  color: #333;
  float: left;
}
.course-title span {
  float: right;
  font-size: 14px;
  color: #9b9b9b;
  margin-top: 12px;
  text-indent: 1em; /* 縮進 2字符寬度 */
  background: url("../assets/people.svg") no-repeat 0px 3px;
}
.teacher{
    justify-content: space-between;
    font-size: 14px;
    color: #9b9b9b;
    margin-bottom: 14px;
    padding-bottom: 14px;
    border-bottom: 1px solid #333;
    border-bottom-color: rgba(51,51,51,.05);
}
.teacher .lesson{
    float: right;
}
.lesson-list{
  overflow: hidden;
}
.lesson-list li{
    width: 49%;
    margin-bottom: 15px;
    cursor: pointer;
    float: left;
    margin-right:1%;
}
.lesson-list li .player{
    width: 16px;
    height: 16px;
    vertical-align: text-bottom;
}
.lesson-list li .lesson-title {
  display: inline-block;
  max-width: 227px;
  text-overflow: ellipsis; /* 若是字體太多超出元素的寬度，則添加省略符號 */
  color: #666;
  overflow: hidden;
  white-space: nowrap;
  font-size: 14px;
  vertical-align: text-bottom; /* 文本的垂直對齊方式： text-botton 文本底部對齊 */
  text-indent: 1.5em;
  background: url(../../static/player.svg) no-repeat 0px 3px;
}

.lesson-list .free{
    width: 34px;
    height: 20px;
    color: #fd7b4d;
    margin-left: 10px;
    border: 1px solid #fd7b4d;
    border-radius: 2px;
    text-align: center;
    font-size: 13px;
    white-space: nowrap;
}
.lesson-list li:hover .lesson-title{
    color: #ffc210;
    background-image: url(../../static/player2.svg);
}
.lesson-list li:hover .free{
    border-color: #ffc210;
    color: #ffc210;
}

.buy-info .discount{
    padding: 0px 10px;
    font-size: 16px;
    color: #fff;
    display: inline-block;
    height: 36px;
    text-align: center;
    margin-right: 8px;
    background: #fa6240;
    border: 1px solid #fa6240;
    border-radius: 10px 0 10px 0;
    line-height: 36px;
}
.present-price{
    font-size: 24px;
    color: #fa6240;
}
.original-price{
    text-decoration: line-through;
    font-size: 14px;
    color: #9b9b9b;
    margin-left: 10px;
}
.buy-now{
    width: 120px;
    height: 38px;
    background: transparent;
    color: #fa6240;
    font-size: 16px;
    border: 1px solid #fd7b4d;
    border-radius: 3px;
    transition: all .2s ease-in-out; /* 過渡動畫 */
    float: right;
    margin-top: 5px;
}
.buy-now:hover{
    color: #fff;
    background: #ffc210;
    border: 1px solid #ffc210;
    cursor: pointer;
}
</style>
    View Code
  4. 針對頁面頭部部分增長高亮和登錄按鈕，根據登錄狀態顯示登錄註冊按鈕
    <template>
  <div class="header">
    <el-container>
      <el-header>
        <el-row>
          <el-col class="logo" :span="3">
            <a href="/">
              <img src="@/assets/head-logo.svg" alt="">
            </a>
          </el-col>
          <el-col class="nav" :span="16">
              <el-row>
                <el-col :span="3"><router-link class="current" to="/">免費課</router-link></el-col>
                <el-col :span="3"><router-link to="/">輕課</router-link></el-col>
                <el-col :span="3"><router-link to="/">學位課</router-link></el-col>
                <el-col :span="3"><router-link to="/">題庫</router-link></el-col>
                <el-col :span="3"><router-link to="/">教育</router-link></el-col>
              </el-row>
          </el-col>
          <el-col class="login-bar" :span="5">
            <el-row v-if="token">
              <el-col class="cart-ico" :span="9">
                <router-link to="">
                  <b class="goods-number">0</b>
                  <img class="cart-icon" src="@/assets/cart.svg" alt="">
                  <span>購物車</span>
                </router-link>
              </el-col>
              <el-col class="study" :span="8" :offset="2"><router-link to="">學習中心</router-link></el-col>
              <el-col class="member" :span="5">
                <el-menu class="el-menu-demo" mode="horizontal">
                  <el-submenu index="2">
                    <template slot="title"><router-link to=""><img src="@/assets/logo@2x.png" alt=""></router-link></template>
                    <el-menu-item index="2-1">個人帳戶</el-menu-item>
                    <el-menu-item index="2-2">個人訂單</el-menu-item>
                    <el-menu-item index="2-3">個人優惠卷</el-menu-item>
                    <el-menu-item index="2-3">退出登陸</el-menu-item>
                  </el-submenu>
                </el-menu>
              </el-col>
            </el-row>
            <el-row v-else>
              <el-col class="cart-ico" :span="9">
                <router-link to="">
                  <img class="cart-icon" src="@/assets/cart.svg" alt="">
                  <span>購物車</span>
                </router-link>
              </el-col>
              <el-col :span="10" :offset="5">
                <span class="register">
                  <router-link to="/login">登陸</router-link>
                  &nbsp;&nbsp;|&nbsp;&nbsp;
                  <router-link to="/register">註冊</router-link>
                </span>
              </el-col>
            </el-row>
          </el-col>
        </el-row>
      </el-header>
    </el-container>
  </div>
</template>

<script>
  export default {
    name: "Header",
    data(){
      return {
        // 設置一個登陸標識，表示是否登陸
        token: true,
      };
    }
  }
</script>

<style scoped>
  .header{
    top:0;
    left:0;
    right:0;
    margin: auto;
    background-color: #fff;
    height: 80px;
    z-index: 1000;
    position: fixed;
    box-shadow: 0 0.5px 0.5px 0 #c9c9c9;
  }
  .header .el-container{
    width: 1200px;
    margin: 0 auto;
  }
  .el-header{
    height: 80px!important;
    padding:0;
  }
  .logo{

  }
  .logo img{
    padding-top: 22px;
  }

  .nav{
    margin-top: 22px;
  }

  .nav .el-col a{
    display: inline-block;
    text-align: center;
    padding-bottom: 16px;
    padding-left: 5px;
    padding-right: 5px;
    position: relative;
    font-size: 16px;
    margin-left: 20px;
  }

  .nav .el-col .current{
    color: #4a4a4a;
    border-bottom: 4px solid #ffc210;
  }

  .login-bar{
    margin-top: 22px;
  }
  .cart-ico{
    position: relative;
    border-radius: 17px;
  }
  .cart-ico:hover{
    background: #f0f0f0;
  }
  .goods-number{
    width: 16px;
    height: 16px;
    line-height: 17px;
    font-size: 12px;
    color: #fff;
    text-align: center;
    background: #fa6240;
    border-radius: 50%;
    transform: scale(.8);
    position: absolute;
    left: 16px;
    top: -1px;
  }
  .cart-icon{
    width: 15px;
    height: auto;
    margin-left: 6px;
  }
  .cart-ico span{
    margin-left: 12px;
  }
  .member img{
    width: 26px;
    height: 26px;
    border-radius: 50%;
    display: inline-block;
  }
  .member img:hover{
    border: 1px solid yellow;
  }
  .el-menu.el-menu--horizontal{
    border-bottom: None;
  }
</style>
    View Code

購物車頁面

  1. 在頭部公共組件中打通購物車的連接地址，Header.vue
    <span><router-link to="/cart">購物車</router-link></span>
  2.  建立購物車頁面組件
    在components/建立Cart.vue組件文件
    3.  
 
  3. 註冊路由地址
    routers/index.js代碼
     
  
     
   
    import Cart from "@/components/Cart"

export default new Router({
  // 路由跳轉模式，注意使用 history
  mode: "history",

  // 路由規則
  routes:[
    。。。
    ,{
      name:"Cart",
      path: "/cart",
      component: Cart,
    },
  ]
})
     
  
     
    4.  
 
  4. 顯示錶格數據
     
  
     
   
    <template>
    <div class="cart">
      <Header/>
      <div class="main">
        <div class="cart-title">
          <h3>個人購物車 <span> 共2門課程</span></h3>
          <el-table :data="courseData" style="width:100%">
            <el-table-column type="selection" label="" width="87"></el-table-column>
            <el-table-column prop="title" label="課程" width="540"></el-table-column>
            <el-table-column prop="expire" label="有效期" width="216"></el-table-column>
            <el-table-column prop="price" label="單價" width="162"></el-table-column>
            <el-table-column label="操做" width="162"></el-table-column>
          </el-table>
        </div>
        <div calss="cart-info"></div>
      </div>
      <Footer/>
    </div>
</template>

<script>
import Header from "./common/Header"
import Footer from "./common/Footer"
export default {
    name: "Cart",
    data(){
      return{
        courseData:[
          {title:"課程標題一",expire:"2016",price:"12.00"},
          {title:"課程標題一",expire:"2016",price:"12.00"},
          {title:"課程標題一",expire:"2016",price:"12.00"},
          {title:"課程標題一",expire:"2016",price:"12.00"},
          {title:"課程標題一",expire:"2016",price:"12.00"},
          {title:"課程標題一",expire:"2016",price:"12.00"},
          {title:"課程標題一",expire:"2016",price:"12.00"},
          {title:"課程標題一",expire:"2016",price:"12.00"},
        ]
      }
    },
    components:{Header,Footer}
}
</script>

<style scoped>
.main{
  width: 1200px;
  margin: 0 auto;
  overflow: hidden; /* 解決body元素和標題之間的上下外邊距的塌陷問題 */
}
.cart-title h3{
  font-size: 18px;
  color: #666;
  margin: 25px 0;
}
.cart-title h3 span{
  font-size: 12px;
  color: #d0d0d0;
  display: inline-block;
}
</style>
     
  
      
    5.  



        

            

        	





    

		

            
相關文章

            

                

                

                    

                

            


            
相關標籤/搜索

            
        


    

        

            

        

        

        
        

        

        

    




	

    





    

    	

    

        每日一句
    

    
    
    	每一个你不满意的现在，都有一个你没有努力的曾经。
    







    

    


    



    

        本站公眾號
    

    

           歡迎關注本站公眾號,獲取更多信息

        
    




    

    




	


	







    

        聯繫我們
        最近搜索
        最新文章
        
        沪ICP备13005482号-10

            MyBatis教程
            SQL 教程
            MySQL教程
            Java 教程
            Thymeleaf 教程
            Hibernate教程
            Spring教程 
            Redis教程