整個(gè)項(xiàng)目已經(jīng)傳到了gitee上面球及，https://gitee.com/malahaha/pjingdongdaojia.git
全部頁面如下
登陸界面.png
訂單.png
首頁.png
下單1.png
下單2.png
詳情1.png
詳情2.png
詳情3.png
詳情4.png
詳情5.png
注冊(cè)界面.png
上述幾篇文章中的一些樣式為了方便后期維護(hù)照捡，將它們?nèi)糠庋b成一個(gè)文件在style文件夾中，
（1）mixin.scss
//單行文本超出省略
@mixin ellipsis{
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
(2)variable.scss一些通用顏色樣式
$content-fontcolor:#333;
$light-fontColor:#999;
$medium-fontColor:#666;
$dark-fontColor:#000;
$content-bgcolor:#F1F1F1;
$content-notice-fontcolor:#777;
$search-bgColor:#f5f5f5;
$search-fontColor:#b7b7b7;
$bgColor:#fff;
$highlight-fontColor:#E93B3B;
$btn-bgColor:#0091ff;
（3）iconfont小圖標(biāo)的使用
@font-face {
font-family: 'iconfont'; /* Project id 3220603 */
src: url('//at.alicdn.com/t/font_3220603_9vci4ti956.woff2?t=1648890516449') format('woff2'),
url('//at.alicdn.com/t/font_3220603_9vci4ti956.woff?t=1648890516449') format('woff'),
url('//at.alicdn.com/t/font_3220603_9vci4ti956.ttf?t=1648890516449') format('truetype');
}
.iconfont {
font-family: "iconfont" !important;
font-size: .16rem;
font-style: normal;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
（4）vuex中數(shù)據(jù)獲取和一些數(shù)據(jù)變更功能實(shí)現(xiàn)
import { createStore } from 'vuex'
const setLocalCartList = (state)=>{
const { cartList } = state;
const cartListString = JSON.stringify(cartList);
localStorage.cartList = cartListString;
}
const getLocalCartList = ()=>{
try{
return JSON.parse(localStorage.cartList) || {}
}catch(e){
return {}
}
}
export default createStore({
state: {
// cartList:{
// shopId:{
// shopNme:'沃爾瑪',
// productList:{
// productId:{
// _id: "1",
// name: "番茄 250g / 份",
// imgUrl: "http://www.dell-lee.com/imgs/vue3/tomato.png",
// sales: 10,
// price: 33.6,
// oldPrice: 39.6,
// count:2
// }
// }
// }
// cartList:{}
cartList:getLocalCartList()
},
getters: {
},
mutations: {
changeCartItemInfo(state,pyload){
const {shopId,productId,productInfo} = pyload;
let shopInfo = state.cartList[shopId] || {
shopName:'',
productList:{}
};
// if(!shopInfo) {shopInfo={}}
let product = shopInfo.productList[productId];
if(!product) {
productInfo.count = 0;
product=productInfo;
// product.count = 0;
}
product.count = product.count +pyload.num;
if(pyload.num > 0){product.check = true;}
// 等價(jià)于
// (pyload.num > 0) && (product.check = true);
if(product.count < 0) {product.count = 0;}
// 等價(jià)于
// (product.count < 0) && (product.count = 0);
shopInfo.productList[productId] = product;
state.cartList[shopId] = shopInfo;
setLocalCartList(state);
},
changeShopName(state,pyload){
const {shopId,shopName} = pyload;
const shopInfo = state.cartList[shopId] || {
shopName:'',
productList:{}
}
shopInfo.shopName=shopName;
state.cartList[shopId] = shopInfo
setLocalCartList(state);
},
changeCartItemChecked(state,pyload){
const {shopId,productId} = pyload;
const product = state.cartList[shopId].productList[productId];
//console.log(product)
product.check = !product.check;
setLocalCartList(state);
},
cleanCartProducts(state,pyload){
const {shopId} = pyload;
state.cartList[shopId].productList={};
},
setCartItemsChecked(state,pyload){
const {shopId} = pyload;
const products = state.cartList[shopId].productList;
if(products){
for(let i in products){
const product =products[i];
product.check = true;
}
}
setLocalCartList(state);
},
clearCartData(state,pyload){
const {shopId} = pyload
state.cartList[shopId].productList=[];
}
},
})
（5）路由實(shí)現(xiàn)router文件夾下的index.js
import { createRouter, createWebHashHistory } from 'vue-router'
const routes = [
{
path: '/',
name: 'Home',
component: () => import(/* webpackChunkName: "home" */ '../views/home/HomeV')
},
{
path: '/cartList',
name: 'CartList',
component: () => import(/* webpackChunkName: "cartList" */ '../views/cartList/CartList')
},
{
path: '/orderConfirmation/:id',
name: 'OrderConfirmation',
component: () => import(/* webpackChunkName: "orderConfirmation" */ '../views/orderConfirmation/OrderConfirmation')
},
{
path: '/orderList',
name: 'OrderList',
component: () => import(/* webpackChunkName: "orderList" */ '../views/orderList/OrderList')
},
{
path: '/shop/:id',
name: 'Shop',
component: () => import(/* webpackChunkName: "shop" */ '../views/shop/ShopV')
},
{
path: '/login',
name: 'Login',
component: () => import(/* webpackChunkName: "login" */ '../views/login/LoginV'),
beforeEnter(to,from,next){
const {isLogin} =localStorage;
isLogin ? next({name:"Home"}) : next();
},
},
{
path: '/register',
name: 'Register',
component: () => import(/* webpackChunkName: "register" */ '../views/register/RegisterV'),
beforeEnter(to,from,next){
const {isLogin} =localStorage;
isLogin ? next({name:"Home"}) : next();
},
},
// {
// path: '/about',
// name: 'about',
// // route level code-splitting
// // this generates a separate chunk (about.[hash].js) for this route
// // which is lazy-loaded when the route is visited.
// component: () => import(/* webpackChunkName: "about" */ '../views/AboutView.vue')
// }
]
const router = createRouter({
history: createWebHashHistory(),
routes
})
router.beforeEach((to,from,next) => {
const {isLogin }= localStorage;
const {name} = to;
const isLoginOrRegister = (name === "Login" || name === "Register");
(isLogin || isLoginOrRegister) ? next() : next({name:'Login'});
})
export default router
