184 lines
5.2 KiB
Vue
184 lines
5.2 KiB
Vue
<template>
|
|
<view class="content">
|
|
<u-sticky>
|
|
<view class="status">
|
|
<view class="top">
|
|
<view class="top-name">
|
|
ZH大家庭
|
|
</view>
|
|
<view class="top-card">
|
|
会员卡
|
|
</view>
|
|
</view>
|
|
<view class="site">
|
|
<view class="site-name">
|
|
<u-icon name="map" style="margin-right: 10rpx;"></u-icon>
|
|
全国
|
|
</view>
|
|
<view class="site-number">
|
|
共<text>{{ total }}</text>家
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</u-sticky>
|
|
<view class="list">
|
|
<view class="label" v-for="(item, index) in lists" :key="index" @click="$Router.push({name: 'serviceDetails', params: {id: item.hall_id, title: item.title + ' ' + item.subtitle}})">
|
|
<view class="labelImg">
|
|
<image :src="item.cover" mode="aspectFill"></image>
|
|
</view>
|
|
<view class="labelCont">
|
|
<view class="nowrap name">
|
|
{{ item.title }} · {{ item.subtitle }}
|
|
</view>
|
|
<view class="nowrap address">
|
|
{{ item.address }}
|
|
</view>
|
|
<view class="area">
|
|
{{ item.areas }} ㎡
|
|
</view>
|
|
<view class="see">
|
|
去看看<u-icon name="rewind-right" color="#34CE98" size="18" style="margin-left: 5rpx;"></u-icon>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import { index } from '@/apis/interfaces/service'
|
|
export default {
|
|
data() {
|
|
return {
|
|
lists : [],
|
|
total : '',
|
|
status : 'loadmore',
|
|
page : ''
|
|
};
|
|
},
|
|
mounted() {
|
|
// 获取首页
|
|
this.getService()
|
|
},
|
|
methods: {
|
|
// 首页
|
|
getService(pages){
|
|
index({page: pages}).then(res => {
|
|
if(res.data.page.current == 1){
|
|
this.lists = []
|
|
}
|
|
this.lists = this.lists.concat(res.data.data)
|
|
this.status = this.page.has_more ? 'loadmore': 'nomore'
|
|
this.page = res.data.page
|
|
this.total = res.total
|
|
})
|
|
}
|
|
},
|
|
// 下拉加载
|
|
onReachBottom() {
|
|
if(this.page.has_more){
|
|
this.status = 'loading'
|
|
let pages = this.page.current + 1
|
|
// 获取列表
|
|
this.getService(pages)
|
|
return
|
|
}
|
|
this.status = 'nomore'
|
|
}
|
|
};
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
page {
|
|
padding-top: calc(var(--status-bar-height) + 180rpx);
|
|
overflow: hidden;
|
|
background-color: $window-color;
|
|
}
|
|
|
|
.status {
|
|
background-color: white;
|
|
padding: 0 $padding $padding;
|
|
box-sizing: border-box;
|
|
border-bottom: $border-color 2rpx solid;
|
|
.top {
|
|
display: flex;
|
|
margin-bottom: $margin;
|
|
@extend .ios-top;
|
|
.top-name {
|
|
font-size: $title-size + 6;
|
|
font-weight: bold;
|
|
}
|
|
.top-card {
|
|
font-size: $title-size-m;
|
|
color: $text-gray;
|
|
padding: $padding - 18 0 0 $padding - 10;
|
|
}
|
|
}
|
|
.site {
|
|
display: flex;
|
|
color: $text-color;
|
|
font-size: $title-size-m;
|
|
.site-name {
|
|
display: flex;
|
|
flex: 1;
|
|
line-height: 40rpx;
|
|
}
|
|
.site-number {
|
|
text {
|
|
color: $main-color;
|
|
padding: 4rpx;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.list {
|
|
padding: $padding;
|
|
box-sizing: border-box;
|
|
.label {
|
|
background-color: white;
|
|
border-radius: $radius;
|
|
overflow: hidden;
|
|
margin-bottom: $margin - 10;
|
|
.labelImg {
|
|
position: relative;
|
|
padding-top: 60%;
|
|
image {
|
|
position: absolute;
|
|
left: 0;
|
|
top: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
}
|
|
.labelCont {
|
|
padding: $padding;
|
|
box-sizing: border-box;
|
|
position: relative;
|
|
.name {
|
|
font-weight: 600;
|
|
}
|
|
.address {
|
|
font-size: $title-size-m;
|
|
margin: $margin - 15 0;
|
|
color: $text-gray;
|
|
}
|
|
.area {
|
|
font-size: $title-size-m;
|
|
color: $text-gray;
|
|
}
|
|
.see {
|
|
position: absolute;
|
|
right: $padding;
|
|
bottom: $padding;
|
|
z-index: 9;
|
|
font-size: $title-size-m;
|
|
color: $main-color;
|
|
display: flex;
|
|
line-height: 38rpx;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</style>
|