vue2-elm学习记录（Day9）

时间 2021-04-21

标签 vue git github babel 数据结构 app async svg 布局栏目 Git 繁體版

原文原文链接

问题描述：

今天启动项目的时候忽然出现的问题，作以记录：
(1)报错信息：16% building modules 52/71 modules 19{ parser: "babylon" } is deprecated; we now treat it as { parser: "babel" }.
查了一下是prettier版本的问题what???什么鬼嘛

用上图的方法貌似能够处理掉这个报错信息。而后新的问题又出现啦(可真"开心")
(2)报错信息：：There are multiple modules with names that only differ in casing. This can lead to unexpected behavior when compiling on a filesystem with other case-semantic.
参考
找到了问题，
项目中两处引用shopList.vue的引用方式不一样形成的：
msite.vue中的引用方式:
import shopList from "@/components/common/shopList";
food.vue中的引用方式：
import shopList from "../../components/common/shoplist.vue";
解决方法是,两处改为相同的引入方式就能够了。vue

"商铺"详情页面：

实现二：店铺详情页header部分（续）

存在"满减活动"的须要展现出来"满减活动"，不存在此，不作显示。
点击"满减活动"能够查看详情。
git

<section v-if="!showLoading" class="shop_container">
    ...
    <header  class="shop_detail_header">
    ...
    <section class="description_header">
        <router-link class="description_top">...</router-link>
        <!--店铺活动 s 存在"活动"的时候显示，不存在"活动"的时候隐藏-->
        <!--showActivitiesFun方法控制活动详情的隐藏和显示-->
        <footer class="description_footer" 
         v-if="shopDetailData.activities.length" 
         @click="showActivitiesFun">
            <p class="ellipsis">
                <span class="tip_icon" :style="{backgroundColor:'#'+shopDetailData.activities[0].icon_color,
 borderColor:'#'+shopDetailData.activities[0].icon_color}">
                    {{shopDetailData.activities[0].icon_name}}
                </span>
                <span>{{shopDetailData.activities.length}}个活动</span>
            </p>
            <!--绘制右侧的箭头 s-->
            <svg class="footer_arrow">
                 <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#arrow-left"></use>
            </svg>
            <!--绘制右侧的箭头 e-->
        </footer>
        <!--店铺活动 e-->
    </section>
    </header>
    <!--活动详情 s 点击description_footer时控制showActivities进而控制"活动详情"的展开和隐藏-->
    <transition name="fade">
        <section class="activities_details" v-if="showActivities">
            <h2 class="activities_shoptitle">{{shopDetailData.name}}</h2>
            <!--小星星 s 要引入评分组件-->
            <h3 class="activities_ratingstar">
                <rating-star :rating='shopDetailData.rating'></rating-star>
            </h3>
            <!--小星星 e-->
            <!--活动列表 s-->
            <section class="activities_list">
                <header class="activities_title_style">
                    <span>优惠信息</span>
                </header>
                <ul>
                    <li v-for="item in shopDetailData.activities" :key="item.id">
                        <!--name-->
                        <span class="activities_icon" :style="{
                            backgroundColor:'#'+item.icon_color,
                            borderColor:'#'+item.icon_color}">
                            {{item.icon_name}}
                        </span>
                        <!--名字-->
                        <span>{{item.description}}(APP专享)</span>
                    </li>
                </ul>
            </section>
            <!--活动列表 e-->
            <!--商家活动 s-->
            <section class="activities_shopinfo">
                <header class="activities_title_style">
                    <span>商家公告</span>
                </header>
                <p>{{promotionInfo}}</p>
            </section>
            <!--商家活动 e-->
            <!--绘制关闭图标 s-->
            <svg width="60" height="60" class="close_activities" @click.stop="showActivitiesFun">
                <circle cx="30" cy="30" r="25" stroke="#555" stroke-width="1" fill="none"/>
                <line x1="22" y1="38" x2="38" y2="22" style="stroke:#999;stroke-width:2"/>
                <line x1="22" y1="22" x2="38" y2="38" style="stroke:#999;stroke-width:2"/>
            </svg>
            <!--绘制关闭图标 e-->
        </section>
    </transition>
    <!--活动详情 e-->

</section>

JS部分：github

//引入评分组件：
import ratingStar from "../../components/common/ratingStar";
export default{
    data(){
        return{
            //是否显示活动详情
            showActivities: false,
             //商铺详情数据
            shopDetailData: null,
            //商店id值
            shopId: null
        }
    },
    components:{
        ratingStar
    },
    computed:{
        ...mapState(["latitude","longitude"]),
        //公告
        promotionInfo:function(){
            return (
                this.shopDetailData.promotion_info||
                "欢迎光临，用餐高峰期请提早下单，谢谢♪(･ω･)ﾉ"
            );
        },
        created(){
            this.shopId=this.$route.query.id;
        },
        mounted(){
            this.initData();
        },
        methods:{
            //初始化
            async initData(){
                 this.shopDetailData = await shopDetails(
                    this.shopId,
                    this.latitude,
                    this.longitude
                );
                ...
            },
            //控制活动详情页的显示和隐藏
            showActivitiesFun(){
                this.showActivities = !this.showActivities;
            }
        }
    }
}

说明：
存在活动的shopDetailData的数据格式：
babel

实现三：商品和评价切换

布局描述：可划分为3部分
(1)切换Tab
(2)两个Tab分别对应的详情页面数据结构

这部分划分为：
1>左侧menu
2>右侧food(包含有标题和详情列表)

<section v-if="!showLoading" class="shop_container">
    ...
    <!--tabBar s-->
    <section class="change_show_type" ref="chooseType">
        <div>
            <span :class='{activity_show:changeShowType=="food"}'
             @click="changeShowType='food'">商品</span>
        </div>
        <div>
            <span :class='{activity_show:changeShowType=="rating"}'
            @click="changeShowType='rating'">
               评价 
            </span>
        </div>
    </section>
    <!--tabBar e-->
    <!--商品详情 s-->
    <transition name="fade-choose">
        <section class="food_container" v-show="changeShowType=='food'">
           <!--menu-->
           <section class="menu_container">
                <!--左侧menu s-->
                <section class="menu_left" id="wrapper_menu" ref="wrapperMenu">
                    <ul>
                        <li class="menu_left_li" v-for="(item,index) in menuList" :key="index" :class="{activity_menu:index==menuIndex}" @click="chooseMenu(index)">
                            <img :src="getImgPath(item.icon_url)" v-if="item.icon_url" />
                            <span>{{item.name}}</span>
                          <span
                            class="category_num"
                            v-if="categoryNum[index]&&item.type==1"
                          >{{categoryNum[index]}}</span>
                        </li>
                    </ul>
                </section>
                <!--左侧menu e-->
                <!--右侧food s-->
                <section class="menu_right" ref="menuFoodList">
                    <ul>
                        <li v-for="(item,index) in menuList" :key="index">
                            <!--header s-->
                            <header class="menu_detail_header">
                                <section class="menu_detail_header_left">
                                    <strong class="menu_item_title">
                                        {{item.name}}
                                     </strong>
                                    <span class="menu_item_description">
                                        {{item.description}}
                                    </span>
                                </section>
                            </header>
                            <!--header e-->
                            <!--detail-list s-->
                            <section class="menu_detail_list">
                                ...
                            </section>
                            <!--detail-list e-->
                        </li>
                    </ul>
                
                </section>
                <!--右侧food e-->
           </section>
        </section>
    </transition>
    <!--商品详情 e-->
    <transition name="fade-choose">
        <section class="rating_container" v-show="changeShowType=='rating'"></section>
    </transition>
</div>

JS部分：app

//引入foodMenu获取食品列表的方法
import {foodMenu} from "../../../src/service/getData";
//引入转换图片路径的方法
import { getImgPath } from "../../components/common/mixin";
export default{
    data(){
        return{
            ...
             //切换显示商品或评价
              changeShowType: "food",
              //食品列表
              menuList: [],
              //已选菜单索引值，默认为0
              menuIndex: 0,
              //商品类型右上角已加入购物车的数量
              categoryNum: []
        }
    },
    mixins:[getImgPath],
    mounted() {
        this.initData();
    },
    methods:{
        async initData(){
             //获取商铺食品列表
            this.menuList = await foodMenu(this.shopId);
        
        }
    
    }
}

说明：
menuList的数据结构：

每一条food的结构：

activity结构：

specfoods结构：
async

参照项目地址：地址svg