<view class="jiudian">
<uni-row v-for="(item,index) in filterlist" :key="index" class="jiudiana">
<uni-col :span="8">
<view class="jiudianaa">
<img :src="item.picture">
</view>
</uni-col>
<uni-col :span="16">
<view class="jiudianab">
<view class="h-name">
<text>
{{ item.name }}
</text>
</view>
<view class="h-volumn">
<text>
销量:{{ item.volumn }}
</text>
</view>
<view class="h-praise">
<text>
好评:{{ item.praise }}
</text>
</view>
<view class="h-distance">
<text>
距离:{{ item.distance }}
</text>
</view>
<view class="h-price">
<text>
价格:{{ item.price }}
</text>
</view>
</view>
</uni-col>
</uni-row>
</view>
<script>
export default {
data() {
return {
keyword:'',
orderTypeVolumn:0,
orderTypePrice:0,
orderTypeDistance:0,
list:[
{
name:"上海画一养生度假村",
volumn:500,
price:800,
praise:100,
distance:280,
picture:"/static/huayi11.jpg"
},
{
name:"上海联怡枇杷生态园",
volumn:400,
price:500,
praise:80,
distance:560,
picture:"/static/lianyi11.jpg"
},
{
name:"上海虹桥唯景酒店",
volumn:300,
price:600,
praise:300,
distance:300,
picture:"/static/weijing12.jpg"
},
{
name:"白玉兰酒店(上海北青公路店)",
volumn:1000,
price:400,
praise:150,
distance:250,
picture:"/static/baiyulan/baiyulan11.jpg"
}
]
}
},
computed:{
filterlist(){
// 取出相关的数据
var {keyword,orderTypeVolumn,orderTypePrice,orderTypeDistance,list} = this
// 过滤后显示的数据
var _filterlist
// 对list_sel进行过滤h
_filterlist =list.filter(p => p.name.indexOf(keyword)!==-1) // 搜索筛选
// 排序 0为默认 1按销量降序 2按销量降序
if(orderTypeVolumn!==0){
_filterlist.sort(function(a1,a2){
if(orderTypeVolumn == 1){
// 根据销量升序
return a1.volumn - a2.volumn
}else if(orderTypeVolumn == 2){
// 根据销量降序
return a2.volumn - a1.volumn
}
})
}
if(orderTypePrice!==0){
_filterlist.sort(function(b1,b2){
if(orderTypePrice == 1){
// 根据价格升序
return b1.price - b2.price
}else if(orderTypePrice == 2){
// 根据价格降序
return b2.price - b1.price
}
})
}
if(orderTypeDistance!==0){
_filterlist.sort(function(c1,c2){
if(orderTypeDistance == 1){
// 根据距离升序
return c1.distance - c2.distance
}else if(orderTypeDistance == 2){
// 根据距离降序
return c2.distance - c1.distance
}
})
}
return _filterlist //返回自定义的_filterlist
}
},
onLoad() {
},
methods: {
SetOrderTypeVolumn(){
if (this.orderTypeVolumn == 0){
this.orderTypeVolumn= 1
}else if (this.orderTypeVolumn ==1){
this.orderTypeVolumn= 2
}else if (this.orderTypeVolumn ==2){
this.orderTypeVolumn= 1
}
},
SetOrderTypePrice(){
if (this.orderTypePrice == 0){
this.orderTypePrice= 1
}else if (this.orderTypePrice ==1){
this.orderTypePrice= 2
}else if (this.orderTypePrice ==2){
this.orderTypePrice= 1
}
},
SetOrderTypeDistance(){
if (this.orderTypeDistance == 0){
this.orderTypeDistance= 1
}else if (this.orderTypeDistance ==1){
this.orderTypeDistance= 2
}else if (this.orderTypeDistance ==2){
this.orderTypeDistance= 1
}
}
}
}
</script>
麻烦帮忙看看，排序的效果是做出来了，但是有个问题，都设置的@click，如果依次点击，从前到后，都会执行排序显示，如果先点击最后那个排序，前面的排序点击都是无效的。点了SetOrderTypeVolumn升序降序有效之后，再点SetOrderTypePrice升序降序依然有效，再点SetOrderTypeDistance升序降序也是依然有效。但是如果先点击的是SetOrderTypeDistance（升序降序有效）再点击前面的SetOrderTypeVolumn和SetOrderTypePrice就无效了，页面无变化
