TmOct5/ZhHealth
1
0
Fork 0
Code Issues Pull Requests Projects Releases 3 Wiki Activity

[更新发现]

Browse Source
This commit is contained in:
zhangmanman
2022-01-13 17:26:30 +08:00
parent 82667fa84b
commit 4d6031212d
13 changed files with 513 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files

185
pages/service/index.vue Normal file
View File

@@ -0,0 +1,185 @@
<template>
<view class="content">
<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>
<view class="list">
<view class="label" v-for="(item, index) in lists" @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 {
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: 99;
height: 180rpx;
background-color: white;
padding: $padding;
box-sizing: border-box;
border-bottom: $border-color 2rpx solid;
.top {
display: flex;
margin-bottom: $margin;
.top-name {
font-size: $title-size + 6;
}
.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>