You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
164 lines
4.8 KiB
164 lines
4.8 KiB
<!DOCTYPE html> |
|
<html lang="en"> |
|
<head> |
|
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> |
|
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0"> |
|
<title>黑马点评</title> |
|
<!-- 引入样式 --> |
|
<link rel="stylesheet" href="./css/element.css"> |
|
|
|
<link href="./css/shop-list.css" rel="stylesheet"> |
|
<link href="./css/main.css" rel="stylesheet"> |
|
|
|
<style type="text/css"> |
|
|
|
</style> |
|
</head> |
|
<body> |
|
<div id="app"> |
|
<div class="header"> |
|
<div class="header-back-btn" @click="goBack"><i class="el-icon-arrow-left"></i></div> |
|
<div class="header-title">{{typeName}}</div> |
|
<div class="header-search"> |
|
<i class="el-icon-search"></i> |
|
</div> |
|
</div> |
|
<div class="sort-bar"> |
|
<div class="sort-item"> |
|
<el-dropdown trigger="click" @command="handleCommand"> |
|
<span class="el-dropdown-link"> |
|
{{typeName}}<i class="el-icon-arrow-down el-icon--right"></i> |
|
</span> |
|
<el-dropdown-menu slot="dropdown"> |
|
<el-dropdown-item v-for="t in types" :key="t.id" :command="t"> |
|
{{t.name}} |
|
</el-dropdown-item> |
|
</el-dropdown-menu> |
|
</el-dropdown> |
|
</div> |
|
<div class="sort-item" @click="sortAndQuery('')"> |
|
距离 <i class="el-icon-arrow-down el-icon--right"></i> |
|
</div> |
|
<div class="sort-item" @click="sortAndQuery('comments')"> |
|
人气 <i class="el-icon-arrow-down el-icon--right"></i> |
|
</div> |
|
<div class="sort-item" @click="sortAndQuery('score')"> |
|
评分 <i class="el-icon-arrow-down el-icon--right"></i> |
|
</div> |
|
</div> |
|
<div class="shop-list" @scroll="onScroll"> |
|
<div class="shop-box" v-for="s in shops" :key="s.id" @click="toDetail(s.id)"> |
|
<div class="shop-img"><img :src="s.images" alt=""></div> |
|
<div class="shop-info"> |
|
<div class="shop-title shop-item">{{s.name}}</div> |
|
<div class="shop-rate shop-item" > |
|
<el-rate |
|
disabled v-model="s.score/10" |
|
text-color="#F63" |
|
show-score |
|
></el-rate> |
|
<span>{{s.comments}}条</span> |
|
</div> |
|
<div class="shop-area shop-item"> |
|
<span>{{s.area}}</span> |
|
<span v-if="s.distance">{{s.distance < 1000 ? s.distance.toFixed(1) + 'm' : (s.distance/1000).toFixed(1) + 'km'}}</span> |
|
</div> |
|
<div class="shop-avg shop-item">￥{{s.avgPrice}}/人</div> |
|
<div class="shop-address shop-item"> |
|
<i class="el-icon-map-location"></i> |
|
<span>{{s.address}}</span> |
|
</div> |
|
</div> |
|
</div> |
|
</div> |
|
</div> |
|
<script src="./js/vue.js"></script> |
|
<script src="./js/axios.min.js"></script> |
|
<!-- 引入组件库 --> |
|
<script src="./js/element.js"></script> |
|
<script src="./js/common.js"></script> |
|
<script> |
|
|
|
const app = new Vue({ |
|
el: "#app", |
|
data: { |
|
util, |
|
isReachBottom: false, |
|
types: [], // 类型列表 |
|
shops: [], // 商店列表 |
|
typeName: "", |
|
params:{ |
|
typeId: 0, |
|
current: 1, |
|
sortBy: "", |
|
x: 120.149993, // 经度 |
|
y: 30.334229 // 纬度 |
|
} |
|
}, |
|
created() { |
|
// 获取参数 |
|
this.params.typeId = util.getUrlParam("type"); |
|
this.typeName = util.getUrlParam("name"); |
|
// 查询类型 |
|
this.queryTypes(); |
|
// 查询商店 |
|
this.queryShops(); |
|
}, |
|
methods: { |
|
queryTypes() { |
|
axios.get("/shop-type/list") |
|
.then(({data}) => { |
|
this.types = data; |
|
}) |
|
.catch(err => { |
|
console.log(err); |
|
this.$message.error(err) |
|
}) |
|
}, |
|
queryShops() { |
|
axios.get("/shop/of/type", { |
|
params: this.params |
|
}) |
|
.then(({data}) => { |
|
if (!data) { |
|
return |
|
} |
|
data.forEach(s => s.images = s.images.split(',')[0]); |
|
this.shops = this.shops.concat(data); |
|
}) |
|
.catch(err => { |
|
console.log(err); |
|
this.$message.error(err) |
|
}) |
|
}, |
|
handleCommand(t) { |
|
location.href = "/shop-list.html?type="+t.id+"&name="+t.name; |
|
}, |
|
sortAndQuery(sortBy) { |
|
this.params.sortBy = sortBy; |
|
this.queryShops(); |
|
}, |
|
goBack() { |
|
history.back(); |
|
}, |
|
toDetail(id) { |
|
location.href = "/shop-detail.html?id="+id |
|
}, |
|
onScroll(e) { |
|
let scrollTop = e.target.scrollTop; |
|
let offsetHeight = e.target.offsetHeight; |
|
let scrollHeight = e.target.scrollHeight; |
|
if(scrollTop + offsetHeight + 1 > scrollHeight && !this.isReachBottom){ |
|
this.isReachBottom = true |
|
console.log("触底") |
|
this.params.current++ |
|
this.queryShops(this.params.current, 5); |
|
}else{ |
|
this.isReachBottom = false |
|
} |
|
}, |
|
} |
|
}) |
|
</script> |
|
</body> |
|
</html> |