Skip to content

Commit

Permalink
modify and compelete ratings
Browse files Browse the repository at this point in the history
  • Loading branch information
Joker committed Oct 10, 2017
1 parent 5f62e9e commit 2abfc33
Show file tree
Hide file tree
Showing 5 changed files with 200 additions and 73 deletions.
2 changes: 0 additions & 2 deletions src/components/cartcontrol/cartcontrol.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -38,13 +38,11 @@ export default {
// 动态添加的属性
this.$set(this.food, 'count', 1);
} else {
// console.log(this.food);
this.food.count++;
}
},
decreaseFood() {
this.food.count--;
// console.log('decreaseCompeleted');
}
}
};
Expand Down
76 changes: 69 additions & 7 deletions src/components/food/food.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -34,7 +34,28 @@
<split v-if="food.ratings"></split>
<div class="food-ratings-wrapper">
<h2>商品评价</h2>
<food-ratings :desc="desc" :ratings="food.ratings" ref="foodRate"></food-ratings>
<food-ratings :desc="desc" @toggle="toggleContent" @select="selectRating" :ratings="food.ratings" :onlyContent="onlyContent"></food-ratings>
<div class="ratings-list">
<ul>
<li class="rating" v-if="needShow(rating.rateType,rating.text)" v-for="rating in food.ratings" :key="rating.username">
<div class="rating-header clearfix">
<div class="fl">
<span class="rateTime">{{moment(rating.rateTime).format('l')}}
</span>
</div>
<div class="fr">
<span class="username">{{rating.username}}</span>
<img :src="rating.avatar" width="24" height="24" alt="">
</div>
</div>
<div class="rating-text">
<i class="type" :class="{'icon-thumb_down':rating.rateType===1,'icon-thumb_up':rating.rateType===0}"></i>
<span class="text">{{rating.text}}</span>
</div>
</li>
</ul>
</div>

</div>
</div>
</div>
Expand All @@ -45,6 +66,7 @@ import BScroll from 'better-scroll';
import cartcontrol from 'components/cartcontrol/cartcontrol';
import split from 'components/split/split';
import FoodRatings from 'components/foodratings/foodratings';
const ALL = 2;
export default {
data() {
return {
Expand All @@ -53,9 +75,14 @@ export default {
negative: '吐槽',
positive: '推荐',
all: '全部'
}
},
selectType: ALL,
selectTypeRatings: [],
onlyContent: false
};
},
computed: {
},
props: {
food: {
type: Object,
Expand All @@ -73,11 +100,7 @@ export default {
showFlag() {
this.foodShow = true;
this.$nextTick(() => {
if (!this.scroll) {
this._initBS();
} else {
this.scroll.refresh();
}
this._initBS();
});
},
// 绑定betterscroll
Expand All @@ -92,6 +115,29 @@ export default {
} else {
this.food.count++;
}
},
selectRating(type) {
this.selectType = type;
console.log('selectType===' + this.selectType);
this.$nextTick(() => {
this._initBS();
});
},
toggleContent() {
this.onlyContent = !this.onlyContent;
this.$nextTick(() => {
this.scroll.refresh();
});
},
needShow(type, text) {
if (this.onlyContent && !text) {
return false;
}
if (this.selectType === ALL) {
return true;
} else {
return type === this.selectType;
}
}
}
};
Expand Down Expand Up @@ -182,4 +228,20 @@ export default {
.food-ratings-wrapper
h2
padding 18px 18px 6px 18px
.ratings-list
padding 12px 18px
.rating
padding 16px 18px
border-top 1px solid rgba(7,17,27,0.1)
.rating-header
padding 0 18px
.fl
float left
.fr
float right
.rating-text
padding 6px 0 16px 4px
.icon-thumb_up
color rgba(0,160,220,1)
</style>
67 changes: 16 additions & 51 deletions src/components/foodratings/foodratings.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,29 +6,9 @@
<span @click="selType('negative')" :class="{'active':selectedType===2}" class="negative">{{desc.negative}}{{count.negCount}}</span>
</div>
<div class="onlyContent">
<i @click="onlyContent" :class="{'active':selOnlyContent}" class="icon-check_circle"></i>
<i @click="toggleContent" :class="{'active':onlyContent}" class="icon-check_circle"></i>
<span>只看有内容的评价</span>
</div>
<div class="ratings-list">
<ul>
<li class="rating" v-for="rating in selectTypeRatings" :key="rating.username">
<div class="rating-header clearfix">
<div class="fl">
<span class="rateTime">{{moment(rating.rateTime).format('l')}}
</span>
</div>
<div class="fr">
<span class="username">{{rating.username}}</span>
<img :src="rating.avatar" width="24" height="24" alt="">
</div>
</div>
<div class="rating-text">
<i class="type" :class="{'icon-thumb_down':rating.rateType===1,'icon-thumb_up':rating.rateType===0}"></i>
<span class="text">{{rating.text}}</span>
</div>
</li>
</ul>
</div>
</div>
</template>
<script>
Expand All @@ -49,6 +29,10 @@ export default {
default() {
return [];
}
},
onlyContent: {
type: Boolean,
default: false
}
},
computed: {
Expand All @@ -73,8 +57,6 @@ export default {
positive: '推荐',
all: '全部',
negative: '吐槽',
selectTypeRatings: [],
selOnlyContent: false,
selectedType: 0
};
},
Expand All @@ -100,20 +82,18 @@ export default {
}
}, this);
}
this.selOnlyContent = false;
},
onlyContent() {
let arr = [];
if (!this.selectTypeRatings) {
return;
if (type === 'all') {
type = 2;
} else if (type === 'positive') {
type = 0;
} else {
type = 1;
}
this.selectTypeRatings.forEach(function(rating) {
if (rating.text) {
arr.push(rating);
}
}, this);
this.selectTypeRatings = arr;
this.selOnlyContent = !this.selOnlyContent;
this.$emit('select', type, this.selectTypeRatings);
},
toggleContent() {
// 通知父组件执行方法
this.$emit('toggle');
}
}
};
Expand Down Expand Up @@ -162,19 +142,4 @@ export default {
span
font-size 12px
vertical-align top
.ratings-list
padding 12px 18px
.rating
padding 16px 18px
border-top 1px solid rgba(7,17,27,0.1)
.rating-header
padding 0 18px
.fl
float left
.fr
float right
.rating-text
padding 6px 0 16px 4px
.icon-thumb_up
color rgba(0,160,220,1)
</style>
126 changes: 113 additions & 13 deletions src/components/ratings/ratings.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -29,14 +29,28 @@
<!-- 分割组件 -->
<split></split>
<!-- 分割组件 -->
<food-ratings :ratings="ratings">
<div class="rating-list">
<ul>
<li class="rating">
</li>
</ul>
</div>
</food-ratings>
<food-ratings @toggle="toggleContent" :ratings="ratings" :onlyContent="onlyContent" @select="selType"></food-ratings>
<div class="ratings-list">
<ul>
<li v-if="needShow(rating.rateType,rating.text)" v-for="rating in ratings" class="rating" :key="rating.username">
<div class="rating-left">
<img :src="rating.avatar" width="28" height="28" alt="">
</div>
<div class="rating-right">
<p class="username">{{rating.username}}</p>
<div class="star-wrapper">
<star :size="24" :score="rating.score" class="star"></star>
<span v-if="rating.deliveryTime" class="deliveryTime">{{rating.deliveryTime}}分钟送达</span>
</div>
<div class="text">{{rating.text}}</div>
<div class="recommend">
<i :class="{'icon-thumb_up':rating.rateType===0,'icon-thumb_down':rating.rateType===1}"></i>
<span v-for="recommend in rating.recommend" :key="recommend">{{recommend}}</span>
</div>
</div>
</li>
</ul>
</div>
</div>
</div>
</template>
Expand All @@ -46,6 +60,7 @@ import split from 'components/split/split';
import foodRatings from 'components/foodratings/foodratings';
import BScroll from 'better-scroll';
const ERR_OK = 0;
const ALL = 2;
export default {
props: {
seller: {
Expand All @@ -57,20 +72,54 @@ export default {
},
data() {
return {
ratings: []
ratings: [],
selectType: ALL,
onlyContent: false
};
},
methods: {
selType(type) {
this.selectType = type;
this.$nextTick(() => {
this._initBS();
});
},
_initBS() {
if (!this.scroll) {
this.scroll = new BScroll(this.$refs.bsHook, {
click: true
});
} else {
this.scroll.refresh();
}
},
needShow(type, text) {
console.log('type===' + type);
console.log('rating.text===' + type);
if (this.onlyContent && !text) {
return false;
}
if (this.selectType === ALL) {
return true;
} else {
return type === this.selectType;
}
},
toggleContent() {
this.onlyContent = !this.onlyContent;
this.$nextTick(() => {
this.scroll.refresh();
});
}
},
created() {
this.axios.get('api/ratings')
.then((res) => {
console.log(res.data);
if (res.data.errno === ERR_OK) {
this.ratings = res.data.data;
this.$nextTick(() => {
this.scroll = new BScroll(this.$refs.bsHook, {
click: true
});
console.log(this.scroll);
this._initBS();
});
}
})
Expand Down Expand Up @@ -136,4 +185,55 @@ export default {
line-height 18px
font-size 12px
color rgb(147,153,159)
.ratings-list
padding 0 18px
.rating
position relative
padding 18px 0
border-bottom 1px solid rgba(147,153,159,0.3)
.rating-left
position absolute
left 0
top 18px
img
border-radius 50%
.rating-right
padding-left 40px
.username
font-size 10px
line-height 12px
color rgb(7,17,27)
.star-wrapper
padding-top 4px
.star
display inline-block
vertical-align top
padding-top 2px
.deliveryTime
font-size 10px
line-height 12px
font-weight 200
color rgb(147,153,159)
.text
line-height 18px
font-size 12px
color rgb(7,17,27)
font-weight 400
padding 6px 0 8px 0
.recommend
.icon-thumb_up
font-size 12px
line-height 16px
color rgb(0,160,220)
.icon_thumb_down
font-size 12px
line-height 16px
span
font-size 9px
line-height 16px
color rgb(147,153,159)
border-radius 2px
border-width 3px
border-color rgba(7,17,27,1)
padding 0 6px
</style>
Loading

0 comments on commit 2abfc33

Please sign in to comment.