pjingdongdaojia.git

全部页面如下

登陆界面.png

订单.png

首页.png

下单1.png

下单2.png

详情1.png

详情2.png

详情3.png

详情4.png

详情5.png

注册界面.png

上述几篇文章中的一些样式为了方便后期维护，将它们全部封装成一个文件在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小图标的使用

@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中数据获取和一些数据变更功能实现

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;}
      // 等价于
      // (pyload.num > 0) && (product.check = true);
    
      if(product.count < 0) {product.count = 0;}
      // 等价于
      // (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）路由实现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