Skip to content

Commit

Permalink
商品评论
Browse files Browse the repository at this point in the history
  • Loading branch information
@yunchuan10
yunchuan10 committed Jun 25, 2018
1 parent fb9074f commit b9de050
Show file tree
Hide file tree
Showing 4 changed files with 501 additions and 22 deletions.
2 changes: 1 addition & 1 deletion package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@
"author": "yunchuan10 <[email protected]>",
"private": true,
"scripts": {
"dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js --open",
"dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js --open --host 192.168.20.200",
"start": "npm run dev",
"unit": "jest --config test/unit/jest.conf.js --coverage",
"e2e": "node test/e2e/runner.js",
Expand Down
1 change: 0 additions & 1 deletion src/pages/Shop/ShopGoods/ShopGoods.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,6 @@
<img v-if="good.icon" class="icon" :src="good.icon">
{{good.name}}
</span>

</li>
</ul>
</div>
Expand Down
229 changes: 215 additions & 14 deletions src/pages/Shop/ShopInfo/ShopInfo.vue
View file
Original file line number Diff line number Diff line change
@@ -1,37 +1,237 @@
<template>
<div class="home-section">
5325345
<div class="shop-info">
<div class="info-content">
<section class="section">
<h3 class="section-title">配送信息</h3>
<div class="delivery">
<div>
<span class="delivery-icon">{{info.description}}</span>
<span>由商家配送提供配送，约{{info.deliveryTime}}分钟送达，距离{{info.distance}}</span>
</div>
<div class="delivery-money">配送费￥{{info.deliveryPrice}}</div>
</div>
</section>

<div class="split"></div>

<section class="section">
<h3 class="section-title">活动与服务</h3>
<div class="activity">
<div class="activity-item" v-for="(support, index) in info.supports" :key="index"
:class="supportClasses[support.type]">
<span class="content-tag">
<span class="mini-tag">{{support.name}}</span>
</span>
<span class="activity-content">{{support.content}}</span>
</div>
</div>
</section>

<div class="split"></div>

<section class="section">
<h3 class="section-title">商家实景</h3>
<div class="pic-wrapper">
<ul class="pic-list" ref="picsUl">
<li class="pic-item" v-for="(pic, index) in info.pics" :key="index">
<img width="120" height="90" :src="pic"/>
</li>
</ul>
</div>
</section>

<div class="split"></div>

<section class="section">
<h3 class="section-title">商家信息</h3>
<ul class="detail">
<li><span class="bold">品类</span> <span>{{info.category}}</span></li>
<li><span class="bold">商家电话</span> <span>{{info.phone}}</span></li>
<li><span class="bold">地址</span> <span>{{info.address}}</span></li>
<li><span class="bold">营业时间</span> <span>{{info.workTime}}</span></li>
</ul>
</section>
</div>
</div>

</template>

<script>
import BScroll from 'better-scroll'
import {mapState} from 'vuex'
export default {
data() {
return {
supportClasses: ['activity-green', 'activity-red', 'activity-orange'],
picScroll: null,
shopScroll: null
};
},
components: {
computed:{
...mapState(['info'])
},
mounted(){
if(!this.info.pics) {
return
}
// 数据有了, 可以创建BScroll对象形成滑动
this._initScroll()
},
created() {
watch: {
info () {// 刷新流程--> 更新数据
this.$nextTick(() => {
this._initScroll()
})
}
},
methods: {
_initScroll () {
if(this.shopScroll){
this.shopScroll.refresh();
}else{
this.shopScroll = new BScroll('.shop-info');
}
// 动态计算ul的宽度
const ul = this.$refs.picsUl
const liWidth = 120
const space = 6
const count = this.info.pics.length
ul.style.width = (liWidth + space) * count -space + 'px'
if(this.picScroll){
this.picScroll.refresh();
}else{
this.picScroll = new BScroll('.pic-wrapper', {
scrollX: true // 水平滑动
})
}
}
}
};
</script>

<style lang="stylus" rel="stylesheet/stylus">
@import "../../../common/stylus/mixins.styl"
.shop-info
position: absolute
top: 195px
bottom: 0
left: 0
width: 100%
background: #fff;
overflow: hidden
.section
padding 16px 14px 14px
font-size 16px
background-color #fff
color #666
border-bottom 1px solid #eee
position relative
.section-title
color #000
font-weight 700
line-height 16px
> .iconfont
float right
color #ccc
.delivery
margin-top 16px
font-size 13px
line-height 18px
.delivery-icon
width 55px
font-size 11px
margin-right 10px
display inline-block
text-align center
color #fff
background-color #0097ff
padding 1px 0
border-radius 4px
.delivery-money
margin-top 5px
.activity
margin-top 16px
.activity-item
margin-bottom 12px
display flex
font-size 13px
align-items center
&.activity-green
.content-tag
background-color rgb(112, 188, 70)
&.activity-red
.content-tag
background-color rgb(240, 115, 115)
&.activity-orange
.content-tag
background-color: rgb(241, 136, 79)
.content-tag
display inline-block
border-radius 2px
width 36px
height: 18px
margin-right 10px
color #fff
font-style normal
position relative
.mini-tag
position absolute
left 0
top 0
right -100%
bottom -100%
font-size 24px
transform scale(.5)
transform-origin 0 0
display flex
align-items center
justify-content center
.pic-wrapper
width: 100%
overflow: hidden
white-space: nowrap
margin-top 16px
.pic-list
font-size: 0
.pic-item
display: inline-block
margin-right: 6px
width: 120px
height: 90px
&:last-child
margin: 0
.detail
margin-bottom -16px
> li
display flex
justify-content space-between
align-items center
margin-right -10px
padding 16px 12px 16px 0
line-height 16px
bottom-border-1px(#ddd)
font-size 13px
> .bold
font-weight 700
color #333
&:last-child
border-none()
.split
width: 100%
height: 16px
border-top: 1px solid rgba(7, 17, 27, 0.1)
border-bottom: 1px solid rgba(7, 17, 27, 0.1)
background: #f3f5f7
</style>


Expand All @@ -44,3 +244,4 @@ export default {




Loading

0 comments on commit b9de050

Please sign in to comment.