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