【vue3.0】11.0 某东到家（十一）——商家详情页开发(一)

商家详情页开发

在开发之前准备好mock接口，返回mock如下:

{
  code: 200,
  data: [
    {
      id: '1',
      name: '某什么玛1',
      imgUrl: '/i18n/9_16/img/near.png',
      sales: 1000,
      expressLimit: 0,
      expressPrice: 5,
      slogon: 'VIP尊享xx元减x元运费券(每月x张)'
    },
    {
      id: '1',
      name: '某什么玛2',
      imgUrl: '/i18n/9_16/img/near.png',
      sales: 2000,
      expressLimit: 0,
      expressPrice: 5,
      slogon: 'VIP尊享xx元减x元运费券(每月x张)'
    },
    {
      id: '1',
      name: '某什么玛3',
      imgUrl: '/i18n/9_16/img/near.png',
      sales: 200,
      expressLimit: 0,
      expressPrice: 5,
      slogon: 'VIP尊享xx元减x元运费券(每月x张)'
    },
    {
      id: '1',
      name: '某什么玛4',
      imgUrl: '/i18n/9_16/img/near.png',
      sales: 100,
      expressLimit: 0,
      expressPrice: 5,
      slogon: 'VIP尊享xx元减x元运费券(每月x张)'
    }
  ],
  desc: '成功'
}

image.png

然后优化一下axios封装工具类src\utils\request.js：

import axios from 'axios'

const baseURL = 'https://www.fastmock.site/mock/xxxxxx/mock'
const timeout = 10000

/** axios初始化实例 */
const instance = axios.create({
  baseURL: baseURL,
  timeout: timeout
})

/** 封装的axios get请求方法 */
export const get = (url, params = {}) => {
  return new Promise((resolve, reject) => {
    instance.get(url, {
      params
    }).then((res) => {
      resolve(res.data)
    }, err => {
      reject(err)
    })
  })
}

/** 封装的axios post请求方法 */
export const post = (url, data = {}) => {
  return new Promise((resolve, reject) => {
    instance.post(url, data, {
      headers: {
        'Content-Tpye': 'application/json'
      }
    }).then((res) => {
      resolve(res.data)
    }, err => {
      reject(err)
    })
  })
}

修改src\views\home\Nearby.vue:

远程数据加载完毕。

商家详情界面开发

1.0 创建商检详情页面的路由

src\router\index.js:

import {
  createRouter,
  createWebHistory
} from 'vue-router'

const routes = [{
  path: '/',
  name: 'Home',
  component: () => import(/* webpackChunkName: "home" */ '../views/home/Home.vue')

}, {
  path: '/login',
  name: 'Login',
  component: () => import(/* webpackChunkName: "login" */ '../views/login/Login.vue'),
  beforeEnter: (to, from, next) => {
    // 只有访问Login页面之前才会执行次函数
    const {
      isLogin
    } = localStorage // 从本地存储中取isLogin
    // 如果登录，就跳到首页页面;否则跳转到登录页面
    isLogin
      ? next({
        name: 'Home'
      })
      : next()
  }
},
{
  path: '/register',
  name: 'Register',
  component: () => import(/* webpackChunkName: "register" */ '../views/register/Register.vue'),
  beforeEnter: (to, from, next) => {
    const {
      isLogin
    } = localStorage
    isLogin
      ? next({
        name: 'Home'
      })
      : next()
  }
}, {
  path: '/shop',
  name: 'Shop',
  component: () => import(/* webpackChunkName: "shop" */ '../views/shop/Shop.vue')

}
]

const router = createRouter({
  history: createWebHistory(process.env.BASE_URL),
  routes
})
// beforeEach:全局，每次做路由跳转之前都会执行这个操作。
router.beforeEach((to, from, next) => {
  // to and from are Route Object,
  // to:跳转的时候想要跳转的页面的信息
  // from :指从哪里跳过来的信息
  // next() must be called to resolve the hook}
  // 中间件继续执行的方法

  // 从本地存储中取isLogin
  const {
    isLogin
  } = localStorage

  console.log(to, from)
  /** 判断是否登录 */
  // 必须双循环，才能防止死循环
  // 如果没有登录，就跳到登录页面
  const {
    name
  } = to
  const
    isLoginOrRegister = (name === 'Login' || name === 'Register');
  (isLogin || isLoginOrRegister) ? next() : next({
    name: 'Login'
  })
})
export default router

将src\views\home\Nearby.vue中店铺的信息摘离成组件，因为要在商店详情页面中使用。
新建src\components\ShopInfo\ShopInfo.vue:

调整src\views\home\Nearby.vue:

商家详情页修改src\views\shop\Shop.vue：

为了控制下边的border划线，需要修改一下组件src\components\ShopInfo\ShopInfo.vue：

准备下图标：

image.png

src\views\shop\Shop.vue:

image.png

调整，主要是设置行高，并把字体大小放大：

进一步优化：

最终效果如下：

image.png

增加点击返回事件：

在Home首页，点击某个店铺跳到详情页，可以如下编写代码：
src\views\home\Nearby.vue:

image.png

这时候发现每个文字下都有下划线，路由的to属性会在最外层包裹一个a标签，解决方案如下：
src\views\home\Nearby.vue

image.png

这里继续摘离2种颜色：
修改src\style\viriables.scss:

/**
* 内容主体文字颜色
**/
$content-font-color: #333;
/**
* 无内容、背景灰、留白灰的颜色
**/
$content-bg-color: #f1f1f1;
/**
* 文字灰色字体
*
**/
$centent-notice-fontcolor: #777;
/**
* 搜索框的背景色
**/
$search-bg-color: #f5f5f5;
/**
* 搜索框内文字颜色
**/
$search-font-color: #b7b7b7;

修改用到的2个地方：
src\views\home\StaticPart.vue:

......
.search {
  margin-bottom: 0.12rem;
  line-height: 0.32rem; //行高：将会自动撑开
  background: $search-bg-color;
  color: $search-font-color;
  border-radius: 0.16rem;
  font-size: 0.14rem;
  &__icon {
    display: inline-block;
    padding: 0 0.05rem 0 0.16rem;
    font-size: 0.15rem;
  }
  &__text {
    display: inline-block;
    font-size: 0.14rem;
  }
}
......

src\views\shop\Shop.vue

......
  &__content {
    display: flex;
    flex: 1;
    background: $search-bg-color;
    border-radius: 0.16rem;
    &__icon {
      padding-left: 0.1rem;
      padding-right: 0.1rem;
      width: 0.44rem;
      text-align: center;
      color: $search-font-color;
    }
    &__input {
      padding-right: 0.2rem;
      width: 100%;
      display: block;
      border: none;
      outline: none;
      background: none;
      height: 0.32rem;
      font-size: 0.14rem;
      color: $content-font-color;
      &::placeholder {
        color: $content-font-color;
      }
    }
}
......