补课一
五一放假，太松懈了，到现在也没怎么认真学习整理，趁着星期天补一补。
本篇完成：
--- 异步显示首页数据
--- 开发star（星星评价）组件
--- 实现首页数据加载完成
0. 其它
vue实战（1）：准备与资料整理
vue实战（2）：初始化项目、搭建底部导航路由
vue实战（3）：底部导航显示、搭建各模块静态页面、添加登录页页面与路由
vue实战（4）：postman测试数据、封装ajax、使用vuex管理状态
vue实战（5）：总结一
vue实战（6）：异步显示数据、开发Star组件
vue实战（7）：完整开发登录页面（一）
vue实战（8）：完整开发登录页面（二）
vue实战（9）：总结二
vue实战（10）：开发店铺详情（一）
1. 异步显示食品轮播列表
获取数据
相同的，在 Msite.vue 页，加载食物分类列表数据，...mapActions('msite', [ 'getCategorys']), // 获取食物分类列表- 重组数据
获取的数据为一维数组，根据swiper的格式，需要分组，分8个一组
<div class="swiper-container" v-if="categorysArr.length">
<div class="swiper-wrapper">
<div class="swiper-slide" v-for="(categorys, index) in categorysArr" :key="index">
<a href="javascript:" class="link_to_food" v-for="(category, index) in categorys" :key="index">
<div class="food_container">
<img :src="baseImg + category.image_url">
</div>
<span>{{category.title}}</span>
</a>
</div>
</div>
<!-- Add Pagination -->
<div class="swiper-pagination"></div>
</div> categorysArr () { // 返回二维数组
const { categorys } = this
// 创建大数组
const arr = []
// 创建小数组
let minarr = []
// 循环数据
categorys.forEach(c => {
if (minarr.length === 8) { // 如果小数组长度为8，则创建一个新小数组
minarr = []
}
if (minarr.length === 0) { // 如果小数组长度为0，则push进大数组
arr.push(minarr)
}
// 把数据push进小数组
minarr.push(c)
})
// 返回大数组
return arr
}
- 解决无翻页bug
// 使用监视，这里对监视还不是特别明白，还是先用起来，后面再细研究
// 这边还使用了 $nextTick
watch: { // 监视
categorys (value) { // 数组中有数据了，在异步更新界面之前执行
this.$nextTick(() => { // 界面更新就立即创建swiper对象
new Swiper('.swiper-container', {
loop: true, // 循环模式选项
pagination: {
el: '.swiper-pagination'
}
})
})
}
}
2. 异步显示商家列表
获取数据
相同的，在 Msite.vue 页，加载食物分类列表数据，...mapActions('msite', [ 'getShops']) // 获取商家列表
- 显示数据
同时，在 ShopList.vue 页，进行数据加载显示，computed: { ...mapState('msite', ['shops'])} //获取数据
<ul class="shop_list" v-if="shops.length">
<li class="shop_li border-1px" v-for="(shop, index) in shops" :key="index">
<a>
<div class="shop_left">
<img class="shop_img" :src="baseImg + shop.image_path">
</div>
<div class="shop_right">
<section class="shop_detail_header">
<h4 class="shop_title ellipsis">{{shop.name}}</h4>
<ul class="shop_detail_ul">
<li class="supports" v-for="(sup, index) in shop.supports"
:key="index">
{{sup.icon_name}}
</li>
</ul>
</section>
<section class="shop_rating_order">
<section class="shop_rating_order_left">
<Star :score="shop.rating" :size="24"/>
<div class="rating_section">
{{shop.rating}}
</div>
<div class="order_section">
月售{{shop.rating_count}}单
</div>
</section>
<section class="shop_rating_order_right">
<span class="delivery_style delivery_right">
{{shop.delivery_mode.text}}
</span>
</section>
</section>
<section class="shop_distance">
<p class="shop_delivery_msg">
<span>¥{{shop.float_minimum_order_amount}}起送</span>
<span class="segmentation">/</span>
<span>配送费约¥{{shop.float_delivery_fee}}</span>
</p>
</section>
</div>
</a>
</li>
</ul>3. 开发Star组件
星级评价需要提取出来，多个地方用到了评价，无过多的交互，是根据获取的分数，进行星星图片显示。
- 提取代码，重组页面，添 css
在 components 文件夹添加 Star 文件夹 ，并且新建 Star.vue 文件
<template>
<div class="star" :class="'star-' + size">
<span class="star-item on" v-for="(sc, index) in starclassArr" :key="index"
:class="sc"></span>
</div>
</template>
<script>
// class常量
const CLASS_ON = 'on'
const CLASS_HALF = 'half'
const CLASS_OFF = 'off'
export default {
name: 'Star',
props: {
score: Number, // 评分
size: Number // 图片
},
computed: {
starclassArr () {
const { score } = this
// 创建一个装星星图片class的数组
const scarr = []
// 计算全星个数，push进数组，取分数的整数部分
const scoreAll = Math.floor(score)
for (let i = 0; i < scoreAll; i++) {
scarr.push(CLASS_ON)
}
// 向数组中push半星图片class,0/1个
if (score * 10 - scoreAll * 10 >= 5) {
scarr.push(CLASS_HALF)
}
// 如果数组长度小于5，则push剩下的灰星个数
while (scarr.length < 5) {
scarr.push(CLASS_OFF)
}
return scarr
}
}
}
</script>- 引用
在 ShopList.vue 中添加组件import Star from '@/components/Star/Star'
5. 结束
下一篇整理登录页面，登录页面分成账号登录与电话短信验证登录
