vue2-elm学习记录(Day9)

...

... ... <footer class="description_footer" v-if="shopDetailData.activities.length" @click="showActivitiesFun">

{{shopDetailData.activities[0].icon_name}} {{shopDetailData.activities.length}}个活动

{{shopDetailData.name}}

优惠信息
  • {{item.icon_name}} {{item.description}}(APP专享)
商家公告

{{promotionInfo}}

<svg width="60" height="60" class="close_activities" @click.stop="showActivitiesFun">

```

JS部分:

//引入评分组件:
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的数据格式:

实现三:商品和评价切换

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

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

```

...
商品
评价
  • {{item.name}}{{categoryNum[index]}}
  • {{item.name}} {{item.description}} ...
</section>
            <!--右侧food e-->
       </section>
    </section>
</transition>
<!--商品详情 e-->
<transition name="fade-choose">
    <section class="rating_container" v-show="changeShowType=='rating'"></section>
</transition>
原文链接:segmentfault.com

上一篇:帧同步坦克大战开篇
下一篇:都9012年了,我还不理解VUE生命周期?

相关推荐

官方社区

扫码加入 JavaScript 社区