前言： 此项目系本人2022年期末作品，采用了mui（Mui官网），vue框架（Vue官网），node环境（node官网）。
作业要求
我选的是网上商城
效果图
首页
购物车页
订单列表页面
使用前
1.您需要安装Node环境，需要到Node官网下载安装即可！
2.然后使用npm命令行窗口（win+r输入cmd运行即可）下载webpack工具
npm install webpack -g
3.下载安装vue.js
输入 npm install vue -g
这里的-g是指安装到global全局目录去
4.安装vue脚手架npm install vue-cli -g
创建vue项目
输入vue init webpack app创建项目其中app是你的项目名称！
安装Mint UI
Mint UI 是基于 Vue.js 的移动端组件库，使用 Vue 技术封装出来了成套的组件，可以无
缝的和 Vue 项目进行集成开发。考虑到在项目中用到了该框架，所以需要先安装 Mint UI，
安装命令如下。
npm install mint-ui@2.2 --save
将 Mint UI 安装完成后，在 src\main.js 中引入，代码放置在 new Vue 前面，示例代码如
下。
import MintUI from 'mint-ui'
import 'mint-ui/lib/style.css'
Vue.use(MintUI)
上述代码完成了 Mint UI 的引入，其中， style.css 样式文件需要单独引入。引入后，在
页面中使用“mt-”前缀来定义标签名，如< mt-button>、< mt-header>等。
安装Mui
打开 MUI 官方网站 https://github.com/dcloudio/mui，找到 MUI 下载地址下载到本地，或
者直接使用源码包里的文件。在本项目中，把 MUI 相关的 css、js 等资源放置在 src/lib 目录
下，如下图所示。
然后在 main.js 文件中的 import router 下面添加代码，引入 MUI 的样式文件。
import './lib/mui/css/mui.css'
import './lib/mui/css/icons-extra.css'
编写代码
使用HBuilder X（推荐使用，Vue与HBuilder X绝配）工具打开项目，路径选到app下。
main.js项目的入口文件部分代码
import Vue from 'vue'
import App from './App'
import router from './router'
import MintUI from 'mint-ui'
import newslist from 'mint-ui'
import 'mint-ui/lib/style.css'
Vue.use(MintUI)
import './lib/mui/css/mui.css'
import './lib/mui/css/animate.min.css'
import './lib/mui/css/icons-extra.css'
Vue.config.productionTip = false
/* eslint-disable no-new */
new Vue({
el: '#app',
router,
components: { App },
template: '<App/>'
})
swiper组件部分代码轮播图
<template>
<div>
<swiper :imgList="imgList"></swiper> // 封装 swiper 组件
</div>
</template>
<script>
import swiper from '../components/swiper.vue' // 引入轮播图组件
export default {
data () {
return {
imgList: [
{id: 1, src: 'http://…'},
{id: 2, src: 'http://…'}
]
}
},
components: {
swiper // 创建轮播图节点
}
}
</script>
<template>
<mt-swipe :auto="4000">
<mt-swipe-item v-for="item in imgList" :key="item.id">
<img :src="item.img">
标签页切换
router下的index.js 部分
import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'
import Home from '@/pages/Home'
import Category from '@/pages/Category.vue'
import Shopcart from '@/pages/Shopcart'
import My from '@/pages/My'
import more from '@/pages/more'
Vue.use(Router)
var router= new Router({
linkActiveClass:'mui-active',
routes: [
{
path: '/',
redirect:'/home',
},
{
path:'/home',
component:Home,
name:'home',
meta:{title:'首页'}
},
{
path:'/shopcart',
component:Category,
name:'shopcart',
meta:{title:'购物车'}
},
{
path:'/category',
component:Shopcart,
name:'category',
meta:{title:'订单列表'}
},
{
path:'/my',
component:My,
name:'my',
meta:{title:'我的'}
},
{
path:'/more',
component:more,
name:'more',
meta:{title:'更多'}
},
{
path:'/*',
redirect:'/home',
}
]
})
router.beforeEach((to,from,next)=>{
if(to.meta.title){
document.title=to.meta.title;
}
next();
})
export default router
在 src\router.js 文件中将相关路由创建出来，示例代码如下。
import Home from './pages/Home.vue'
import Category from './pages/Category.vue'
import Shopcart from './pages/Shopcart.vue'
import User from './pages/User.vue'
显示首页轮播图
< swiper :imgdata="imgList" class="swip"></ swiper>
< ul class="mui-table-view mui-grid-view mui-grid-9">
< li class="mui-table-view-cell mui-media mui-col-xs-3 mui-col-sm-3">
< a class="title">
< img src=" ../assets/images/menu1.png" />
< div class="mui-media-body">天猫新品</ div>
</a >
</li>
<li class="mui-table-view-cell mui-media mui-col-xs-3 mui-col-sm-3">
<a href="#">
<img src="../assets/images/menu2.png">
<!-- <span class="mui-badge"></span> -->
<div class="mui-media-body">今日爆款</div>
</a>
</li>
<li class="mui-table-view-cell mui-media mui-col-xs-3 mui-col-sm-3">
<a href="#">
<img src="../assets/images/menu3.png">
<!-- <span class="mui-badge"></span> -->
<div class="mui-media-body">天猫国际</div>
</a>
</li>
<li class="mui-table-view-cell mui-media mui-col-xs-3 mui-col-sm-3">
<a href="#">
<img src="../assets/images/menu4.png">
<div class="mui-media-body">饿了么</div>
</a>
</li>
<li class="mui-table-view-cell mui-media mui-col-xs-3 mui-col-sm-3">
<a href="#">
<img src="../assets/images/menu5.png">
<div class="mui-media-body">充值中心</div>
</a>
</li>
<li class="mui-table-view-cell mui-media mui-col-xs-3 mui-col-sm-3">
<a href="#">
<img src="../assets/images/menu6.png">
<div class="mui-media-body">机票酒店</div>
</a>
</li>
<li class="mui-table-view-cell mui-media mui-col-xs-3 mui-col-sm-3">
<a href="#">
<img src="../assets/images/menu7.png">
<div class="mui-media-body">金币庄园</div>
</a>
</li>
<li class="mui-table-view-cell mui-media mui-col-xs-3 mui-col-sm-3">
<a href="#">
<img src="../assets/images/menu8.png">
<div class="mui-media-body">阿里拍卖</div>
</a>
</li>
</ul>
图片数据
data() {
return {
imgList: [
{
id: 1,
img:
"http://xxxx.gitee.io/vuezy/banner1.jpg"
},
{
id: 2,
img:
"http://xxxx.gitee.io/vuezy/banner2.jpg"
},
{
id: 3,
img:
"http://xxxx.gitee.io/vuezy/banner3.jpg"
},
{
id: 4,
img:
"http://xxxx.gitee.io/vuezy/banner4.jpg"
},
{
id: 5,
img:
"http://xxxx.gitee.io/vuezy/banner5.jpg"
},
{
id: 6,
img:
"http://xxxx.gitee.io/vuezy/banner7.jpg"
},
{
id: 7,
img:
"http://xxxx.gitee.io/vuezy/banner7.jpg"
}
]
};
首页搜索框
<div style="margin: 5px;">
<div class="mui-input-row mui-search" id="searchForm">
<input type="search" id="searchInput" onkeyup="enterSearch(event)" class="mui-input-clear" placeholder="搜索商品">
</div>
</div>
组件注册
import swiper from "../components/swiper";
components: {
swiper: swiper
}
样式
<style scoped>
.mui-grid-view{
background-color: #fff;
}
.mui-grid-view .mui-table-view-cell img{
width:60px;
height:30px;
}
.swip img{
padding-top: 0px;
height: 70%;
}
</style>
首页九宫格
<div class="mui-row mui-content">
<div class="mui-card-content mui-col-xs-6">
<img src="http://xxxx.gitee.io/vuezy/index/1.jpg" alt="" width="90%">
<div class="mui-card-footer" style="background-color: #fff;">
清仓特价 加厚纯棉老粗布凉席三件套 空调席
</div>
</div>
<div class="mui-card-content mui-col-xs-6">
<img src="http://xxxx.gitee.io/vuezy/index/2.jpg" alt="" width="90%">
<div class="mui-card-footer" style="background-color: #fff;">
自然而然 手工编织海草编环保桌面杂物化妆品收纳
</div>
</div>
<div class="mui-card-content mui-col-xs-6">
<img src="http://xxx.gitee.io/vuezy/index/3.jpg" alt="" width="90%">
<div class="mui-card-footer" style="background-color: #fff;">
定做儿童被套单件纯棉1.2m1.5米婴儿宝宝小
</div>
</div>
<div class="mui-card-content mui-col-xs-6">
<img src="http://xxx.gitee.io/vuezy/index/4.jpg" alt="" width="90%">
<div class="mui-card-footer" style="background-color: #fff;">
陶瓷公鸡摆设打鸣公鸡工艺装饰生肖鸡鸡年吉祥物
</div>
</div>
<div class="mui-card-content mui-col-xs-6">
<img src="http://xxx.gitee.io/vuezy/index/5.jpg" alt="" width="90%">
<div class="mui-card-footer" style="background-color: #fff;">
日式下午茶具陶瓷咖啡杯具套装客厅创意冷水壶茶壶
</div>
</div>
<div class="mui-card-content mui-col-xs-6">
<img src="http://xxx.gitee.io/vuezy/index/6.jpg" alt="" width="90%">
<div class="mui-card-footer" style="background-color: #fff;">
朗汀家用实用陶瓷碗8寸大面碗汤碗牛肉拉面碗和
</div>
</div>
订单列表页面
每个订单采用了循环的方式显示出来
<div class="container">
<header class="mui-bar mui-bar-nav">
<router-link to="/home" class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left mback"></router-link>
<h1 class="mui-title">订单列表</h1>
</header>
<div class="mui-content">
<div id="slider" class="mui-slider">
<div id="sliderSegmentedControl" class="mui-slider-indicator mui-segmented-control mui-segmented-control-inverted">
<a class="mui-control-item">
待发货
</a>
<a class="mui-control-item">
已发货
</a>
<a class="mui-control-item">
已取消
</a>
</div>
<div id="sliderProgressBar" class="mui-slider-progress-bar mui-col-xs-4"></div>
<div class="mui-slider-group orderlist">
<div id="item1mobile" class="mui-slider-item mui-control-content mui-active">
<div id="scroll1" class="mui-scroll-wrapper">
<div class="mui-scroll">
<ul class="mui-table-view">
<li class="mui-table-view-cell" v-for="item in items" key="item">
<div class="dangping" v-show="item.show">
<div class="mui-table">
<div class="mui-table-cell mui-col-xs-5">
<p class="mui-h6 mui-ellipsis">订单号：{{item.danhao}} </p>
</div>
<div class="mui-table-cell mui-col-xs-7 mui-text-right">
<p class="mui-h6 mui-ellipsis">签收：{{item.qssj}}</p>
</div>
</div>
<div class="mui-table">
<div class="mui-table-cell mui-col-xs-12">
<h4 class="mui-ellipsis-2">{{item.chufa}}-{{item.mdd}}</h4>
</div>
</div>
<div class="mui-table">
<div class="mui-table-cell mui-col-xs-12">
<a class="mui-btn mui-btn-primary mui-pull-right">评价</a>
<a class="mui-btn mui-btn-default mui-pull-right" @click="toggle(item)">删除订单</a>
</div>
</div></div>
</li>
</ul>
</div>
</div>
</div>
<div id="item2mobile" class="mui-slider-item mui-control-content">
<div id="scroll2" class="mui-scroll-wrapper">
<div class="mui-scroll">
<div class="mui-loading">
<div class="mui-spinner">
</div>
</div>
</div>
</div>
</div>
<div id="item3mobile" class="mui-slider-item mui-control-content">
<div id="scroll3" class="mui-scroll-wrapper">
<div class="mui-scroll">
<div class="mui-loading">
<div class="mui-spinner">
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div></div>
css样式
<style scoped>
.mui-control-content {
background-color: white;
min-height: 415px;
}
.mui-control-content .mui-loading {
margin-top: 50px;
}
.orderlist input, .orderlist button, .orderlist .mui-btn {
margin-left: 10px;
}
</style>
定义了一个方法，一个变量
methods: {
toggle: function(item) {
item.show = !item.show;
}}
其中item.show = !item.show;的作用就是取倒，如果item的show是true就变成false，主要就是控制他是否显示，默认是true，当按钮点击删除订单是则改成不显示，并隐藏这个订单！
订单数据
data(){
return{
items: [{
content: '1 item',
show: true,
danhao:28336424324,
chufa:'厦门',
mdd:'莆田',
qssj:'2022年5月31日 14:25:47'
}, {
content: '2 item',
show: true,
danhao:2829387442,
chufa:'福州',
mdd:'三明',
qssj:'2022年5月29日 12:24:23'
}, {
content: '3 item',
show: true,
danhao:22384243423,
chufa:'龙岩',
mdd:'泉州',
qssj:'2022年5月23日 08:43:23'
}],
购物车页面
实现了商品的计算，同样也是通过for来显示数据中的商品
<div class="container">
<header class="mui-bar mui-bar-nav">
<router-link to="/home" class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left mback"></router-link>
<button id="opt" class="mui-btn mui-btn-blue mui-btn-link mui-pull-right"></button>
<h1 class="mui-title">购物车</h1>
</header>
<div id="gwc">
<div class="mui-content mui-scroll-wrapper content">
<div class="mui-scroll uld">
<ul id="OA_task_1" class="mui-table-view">
<li class="mui-table-view-cell" v-for="item in gwcnr" :key="index">
<div class="mui-slider-right mui-disabled">
<a class="mui-btn mui-btn-red">删除</a>
</div>
<div class="mui-slider-handle cartinfo">
<div class="checkbox mui-checkbox">
<input name="checkbox" type="checkbox" v-model="item.state" @change="CheckItem(item)">
</div>
<div class="bookinfo">
<div class="left">
<div class="bookcover">
<img :src="item.tpsrc" style="width:40px;height: 40px;"/>
</div>
<div class="bookdate">
<div class="cname">{{item.name}}</div>
<div class="stage">{{item.jiontime}}</div>
</div>
</div>
<div class="price">
￥{{item.jiage}}元
</div>
</div>
</div>
</li>
</ul>
</div>
</div>
<div class="footer">
<div class="left">
<div class="mui-input-row mui-checkbox mui-left">
<label style="color:#EF4343;font-size: 16px;" class="mui-left">全选</label>
<input type="checkbox" @change="allxuan(aaa)" v-model="allxuanz"/>
</div>
<div class="heji">
<div class="hejititle">合计：</div>
<div class="allprice">{{addall}}元</div>
</div>
</div>
<div class="jiesuanbtn" >结算</div>
</div>
</div>
</div>
数据如下，其中shul是无用的，addall是代表总价格allxuanz是全部选择的值有
gwcnr代表的是购物车的数据其中name是商品名称jiontime是指加入购物车的时间，jiage是指商品的价格state是指对应的按钮状态tpsrc指的是图片路径
data(){
return{
shul:3,
addall:0,
allxuanz:false,
gwcnr: [{
name:"清仓特价 加厚纯棉老粗布凉席三件套 空调席",
jiontime:"2022年5月19日 14:32:11",
jiage:21,
state:false,
tpsrc:'http://xxx.gitee.io/vuezy/index/1.jpg'
}, {
name:"自然而然 手工编织海草编环保桌面杂物化妆品收纳",
jiontime:"2022年5月30日 12:23:42",
jiage:13,
tpsrc:'http://xxxx.gitee.io/vuezy/index/2.jpg',
state:false
}, {
name:"陶瓷公鸡摆设打鸣公鸡工艺装饰生肖鸡鸡年吉祥物",
jiontime:"2022年5月18日 08:12:54",
jiage:51,
tpsrc:'http://xxxx.gitee.io/vuezy/index/3.jpg',
state:false
}],
}
定义的方法有
methods:{
CheckItem(jjj){
if(jjj.state===true){
this.addall+=jjj.jiage;
console.log(jjj.jiage)
}else{
this.addall-=jjj.jiage;
}
},
allxuan(aaa){
console.log(this.allxuanz)
if(this.allxuanz==true){
//此部分不会写
}
}
}
其中CheckItem方法作用是计算总价格，allxuan方法是全部选择并计算总价的，but我不会写哈哈哈哈！
样式如下
<style>
.uld{
padding-top: 45px;
}
.mui-bar{
background: #2B2C2F;
}
.mui-title{
color: #fff;
}
.mright,.mback{
color: #fff;
}
.ipx header{
height: 80px;
}
.ipx>header>.mui-action-back{
top:35px
}
.ipx>header>.mui-title{
top:35px
}
.ipx>header>.mui-pull-right{
top:35px
}
.ipx>.mui-content{
margin-top: 53px;
}
.cartinfo{
display: flex;
flex-direction: row;
align-items: center;
}
.cartinfo .bookinfo{
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-between;
flex: 1;
}
.cartinfo .bookinfo .left{
display: flex;
flex-direction: row;
align-items: center;
}
.cartinfo .checkbox{
width: 30px;
height: 30px;
}
.cartinfo .checkbox input{
position: initial;
}
.cartinfo .bookinfo .price{
color:#EF4343 ;
}
.bookdate{
padding-left: 10px;
}
.bookdate>.cname{
font-size: 20px;
font-weight: bold;
color: #507783;
}
.bookdate>.stage{
color: #507783;
font-size: 14px;
}
.mui-checkbox input[type=checkbox]:before{
color: #EF4343;
}
.mui-checkbox input[type=checkbox]:checked:before{
color: #EF4343;
}
.footer{
position: fixed;
bottom: 50px;
right: 0;
left: 0;
height: 60px;
border-top: 1px solid #f0f0f0;
background: #fff;
line-height: 60px;
display: flex;
flex-direction: row;
}
.footer input{
top:16px!important
}
.footer>.jiesuanbtn{
width: 100px;
text-align: center;
background: #EF4343;
color: #fff;
}
.footer>.left{
flex: 1;
}
.footer>.left>.heji{
position: absolute;
right: 110px;
top: 0;
display: flex;
flex-direction: row;
}
.allprice{
color: #EF4343;
}
.mui-content{
margin-bottom: 110px;
}
</style>
运行
在根目录下输入npm run dev即可运行
总结
不足
由于时间比较匆忙与本人没有学习过tp的具体使用方法，并没有使用tp框架（thinkphp）做后端，整个项目只有前端源码！以及没有实现全选的功能
创作首页源于淘宝触屏版
免责声明
本文章所有的图片以及代码等仅作为学习使用，不作为商业目的，如有侵权请联系我删除！
所提供的代码仅供参考，有很多不足请自行补充！
2042
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
