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

数据流转

修改路由src\router\index.js:

······
 {
  path: '/shop/:id',
  name: 'Shop',
  component: () => import(/* webpackChunkName: "shop" */ '../views/shop/Shop.vue')

}
······

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

......
    
......

点击就会发现页面能够跳转详情页。

修改详情页代码，远程请求数据。
src\views\shop\Shop.vue:

新增src\views\shop\Content.vue:

优化全局，替换css:
src\style\viriables.scss:

/**
* 内容主体文字颜色
**/
$content-font-color: #333;
/**
* 无内容、背景灰、留白灰的颜色
**/
$content-bg-color: #f1f1f1;
/**
* 文字灰色字体
*
**/
$content-notice-font-color: #777;
/**
* 搜索框的背景色
**/
$search-bg-color: #f5f5f5;
/**
* 搜索框内文字颜色
**/
$search-font-color: #b7b7b7;
/**
* 默认背景颜色
**/
$bg-color: #fff;
/**
* 亮色主题高亮文字颜色
**/
$height-light-font-color: #e83b3b;
/**
* 中亮文字颜色
**/
$medium-font-color: #666;
/**
* 亮文字颜色
**/
$light-font-color: #999;
/**
* 按钮背景颜色
**/
$btn-bg-color: #0091ff;

优化stop.vue

结果如下：

image.png

其中接口/mock/api/shop/:id：
数据如下：

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