vue2-elm学习记录(Day9)

2019-12-04 admin
...
<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部分:

//引入评分组件: 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的数据格式:
![image.png](https://img.javascriptcn.com/1957e6e7091e2e892b2da0b67c2e5a05 "image.png")

##### 实现三:商品和评价切换

![image](https://img.javascriptcn.com/6c8707122e92b5257495b54a5b9fad65 "image")
**布局描述:**可划分为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>

[转载]原文链接:https://segmentfault.com/a/1190000021184566

本站文章除注明转载外,均为本站原创或编译。欢迎任何形式的转载,但请务必注明出处。

转载请注明:文章转载自 JavaScript中文网 [https://www.javascriptcn.com]

本文地址:https://www.javascriptcn.com/read-80370.html

文章标题:vue2-elm学习记录(Day9)

相关文章
Node.js 2014这一年发生了什么
Node.js 的 2014 年充满了不幸和争议. 这一年 Noder 们经历了太多的伤心事, 经历了漫长的等待, 经历了沉重的分裂之痛. 也许 Noder 们不想回忆14年 Node.js land 发生的事情, 但正因为痛才更有铭记的价...
2015-11-12
Angular2-primeNG文件上传模块FileUpload使用详解
近期在学习使用Angular2做小项目,期间用到很多primeNG的模块。 本系列将结合实战总结angular2-primeNG各个模块的使用经验。 文件上传模块FileUploadModule 首先要在使用该组件的模块内导入文件上传模块 ...
2017-03-09
Vue.js组件tab实现选项卡切换
本文实例为大家分享了vue插件tab选项卡的具体代码,供大家参考,具体内容如下 效果图: 代码如下: &lt;!DOCTYPE html&gt; &lt;html lang=&quot;en&quot;&gt; &lt;head&gt; ...
2017-03-13
Vue获取DOM元素样式和样式更改示例
在 vue 中用 document 获取 dom 节点进行节点样式更改的时候有可能会出现 ‘style’ is not definde的错误,这时候可以在 mounted 里用 $refs 来获取样式,并进行更改: &lt;template...
2017-03-13
从2014年的发展来展望JS的未来将会如何
&lt;font face=&quot;寰�杞�闆呴粦, Arial, sans-serif &quot;&gt;2014骞达紝杞�浠惰�屼笟鍙戝睍杩呴€燂紝鍚勭�嶈��瑷€灞傚嚭涓嶇┓锛屼互婊¤冻鐢ㄦ埛涓嶆柇鍙樺寲鐨勯渶姹傘€傝繖浜涜��...
2015-11-12
12个你未必知道的CSS小知识
虽然CSS并不是一种很复杂的技术,但就算你是一个使用CSS多年的高手,仍然会有很多CSS用法/属性/属性值你从来没使用过,甚至从来没听说过。 1.CSS的color属性并非只能用于文本显示 对于CSS的color属性,相信所有Web开发人员...
2015-11-12
21天学通javascript
简介: 本书是Javascript入门教程。Javascript是Web开发中应用最早、发展最成熟、用户最多的脚本语言。其语法简洁,代码可读性在众多脚本语言中最好,它在使用时不用考虑数据类型,是真正意义上的动态语言。本书总分为四篇,共21章...
2015-11-16
Node.js学习(1)----HTTP服务器与客户端
Node.js 标准库提供了 http 模块,其中封装了一个高效的 HTTP 服务器和一个简易的HTTP 客户端。http.Server 是一个基于事件的 HTTP 服务器,它的核心由 Node.js 下层 C++部分实现,而接口由 Jav...
2015-11-12
2014年最流行前端开发框架对比评测
如今,各种开发框架层出不穷,各有千秋。哪些是去年较受开发者关注的呢?前不久,云适配根据Github上的流行程度整理了2014年最受欢迎的6个前端开发框架,并进行对比说明,希望帮助有需要的朋友选择合适自己的前端框架。 1. Bootstrap...
2015-11-12
CSS2.0帮助文档(参考手册)chm下载
下载地址:CSS2.0帮助文档(参考手册)chm下载 友情提示:如果打开空白,在手册上右键属性解除锁定即可。 ...
2015-11-12
回到顶部