[更新发现]
This commit is contained in:
zhangmanman
28
apis/interfaces/service.js
Normal file
28
apis/interfaces/service.js
Normal file
@@ -0,0 +1,28 @@
|
||||
/**
|
||||
* Web唐明明
|
||||
* 匆匆数载恍如梦，岁月迢迢华发增。
|
||||
* 碌碌无为枉半生，一朝惊醒万事空。
|
||||
* moduleName: 服务
|
||||
*/
|
||||
|
||||
import { request } from '../index'
|
||||
|
||||
// 首页
|
||||
const index = (data) =>{
|
||||
return request({
|
||||
url: 'health/halls',
|
||||
data:data
|
||||
})
|
||||
}
|
||||
|
||||
// 详情
|
||||
const hallsDet = (hall) =>{
|
||||
return request({
|
||||
url: 'health/halls/' + hall
|
||||
})
|
||||
}
|
||||
|
||||
export {
|
||||
index,
|
||||
hallsDet
|
||||
}
|
||||
22
pages.json
22
pages.json
@@ -324,6 +324,22 @@
|
||||
}
|
||||
}
|
||||
}
|
||||
},{
|
||||
"path": "pages/service/index",
|
||||
"name": "serviceIndex",
|
||||
"style": {
|
||||
"navigationBarTitleText": "",
|
||||
"navigationStyle": "custom",
|
||||
"enablePullDownRefresh": false
|
||||
}
|
||||
},{
|
||||
"path": "pages/service/details",
|
||||
"name": "serviceDetails",
|
||||
"style": {
|
||||
"navigationBarTitleText": "",
|
||||
"navigationBarBackgroundColor":"#FFFFFF",
|
||||
"enablePullDownRefresh": false
|
||||
}
|
||||
}],
|
||||
"tabBar": {
|
||||
"borderStyle": "white",
|
||||
@@ -337,7 +353,7 @@
|
||||
{
|
||||
"iconPath": "static/tabBar/tabBar_01.png",
|
||||
"selectedIconPath": "static/tabBar/tabBar_show_01.png",
|
||||
"pagePath": "pages/record/index",
|
||||
"pagePath": "pages/service/index",
|
||||
"text": "服务"
|
||||
},
|
||||
{
|
||||
@@ -347,8 +363,8 @@
|
||||
"text": "生活"
|
||||
},
|
||||
{
|
||||
"iconPath": "static/tabBar/tabBar_01.png",
|
||||
"selectedIconPath": "static/tabBar/tabBar_show_01.png",
|
||||
"iconPath": "static/tabBar/tabBar_04.png",
|
||||
"selectedIconPath": "static/tabBar/tabBar_show_04.png",
|
||||
"pagePath": "pages/im/index",
|
||||
"text": "聊聊"
|
||||
},
|
||||
|
||||
273
pages/service/details.vue
Normal file
273
pages/service/details.vue
Normal file
@@ -0,0 +1,273 @@
|
||||
<template>
|
||||
<view class="content">
|
||||
<!-- 图片 -->
|
||||
<view class="swiper">
|
||||
<swiper :indicator-dots="false" @change="current = $event.detail.current + 1">
|
||||
<swiper-item v-for="(item, index) in pictures" :key="index" @click="seeImg">
|
||||
<view class="swiper-cover">
|
||||
<image :src="item" mode="aspectFill" />
|
||||
</view>
|
||||
</swiper-item>
|
||||
</swiper>
|
||||
<view class="swiper-pages">
|
||||
{{ current }}/{{ pictures.length }}
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 标题 -->
|
||||
<view class="title">
|
||||
<view class="name">
|
||||
{{ hallsData.title}} · {{ hallsData.subtitle}}
|
||||
</view>
|
||||
<view class="address">
|
||||
<u-icon name="map" style="margin-right: 10rpx;"></u-icon>{{ hallsData.address}}
|
||||
</view>
|
||||
<view class="area">
|
||||
<u-icon name="home" style="margin-right: 10rpx;"></u-icon>{{ hallsData.areas}}㎡
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 场馆概况 -->
|
||||
<view class="survey">
|
||||
<view class="survey-title">
|
||||
场馆概况
|
||||
</view>
|
||||
<view class="survey-text">
|
||||
<rich-text :nodes="hallContent"></rich-text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 基础设施 -->
|
||||
<view class="survey">
|
||||
<view class="survey-title">
|
||||
基础设施
|
||||
</view>
|
||||
<u-scroll-list class="facilities" :indicator="false" v-if="facilities.length > 0">
|
||||
<view class="list" v-for="(item, index) in facilities" :key="index">
|
||||
<view class="label">
|
||||
<image class="label-img" :src="item.cover" mode=""></image>
|
||||
<view class="label-name">
|
||||
{{ item.name }}
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</u-scroll-list>
|
||||
</view>
|
||||
|
||||
<!-- 我是店长 -->
|
||||
<view class="survey">
|
||||
<view class="survey-title">
|
||||
我是店长
|
||||
</view>
|
||||
<view class="shopowner">
|
||||
<view class="shopowner-cont">
|
||||
<image class="shopowner-img" :src="user.contact_cover ? user.contact_cover : '/static/find/logo.png'" mode="aspectFill"></image>
|
||||
<view class="shopowner-name">
|
||||
{{ user.name }}
|
||||
</view>
|
||||
</view>
|
||||
<view class="shopowner-tel" @click="contact(user.contact_mobile)">
|
||||
联系他
|
||||
</view>
|
||||
</view>
|
||||
<view class="helper">
|
||||
HI，我是{{ hallsData.title}} · {{ hallsData.subtitle}}店长，有任何问题可电话交流哦，我将在第一时间回复您
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { hallsDet } from '@/apis/interfaces/service'
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
current : 1,
|
||||
hallsData : '',
|
||||
facilities : [],
|
||||
user : '',
|
||||
hallContent : '',
|
||||
pictures : []
|
||||
};
|
||||
},
|
||||
mounted() {
|
||||
uni.setNavigationBarTitle({
|
||||
title: this.$Route.query.title
|
||||
})
|
||||
|
||||
// 获取详情
|
||||
this.getService()
|
||||
},
|
||||
methods:{
|
||||
// 详情
|
||||
getService(){
|
||||
hallsDet(this.$Route.query.id).then(res => {
|
||||
this.hallsData = res
|
||||
this.facilities = res.facilities
|
||||
this.user = res.user
|
||||
this.pictures = res.pictures
|
||||
this.hallContent= res.content.replace(/\<img/gi, '<img style="max-width:100%;height:auto;display:block;"')
|
||||
})
|
||||
},
|
||||
|
||||
// 拨打电话
|
||||
contact(tel){
|
||||
uni.makePhoneCall({
|
||||
phoneNumber: tel
|
||||
})
|
||||
},
|
||||
|
||||
// 预览图片
|
||||
seeImg(){
|
||||
uni.previewImage({
|
||||
urls: this.pictures
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
page {
|
||||
background-color: $window-color;
|
||||
padding-bottom: $padding;
|
||||
}
|
||||
|
||||
/* 图片 */
|
||||
.swiper{
|
||||
position: relative;
|
||||
width: 100%;
|
||||
padding-top: 60%;
|
||||
background: $window-color;
|
||||
&> swiper{
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
.swiper-cover{
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
image{
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
.swiper-pages{
|
||||
position: absolute;
|
||||
bottom: 20rpx;
|
||||
right: 20rpx;
|
||||
z-index: 9;
|
||||
text-align: right;
|
||||
color: white;
|
||||
font-size: $title-size-m;
|
||||
text-shadow: 0 5rpx 5rpx rgba($color: #000000, $alpha: .02);
|
||||
}
|
||||
}
|
||||
|
||||
.title {
|
||||
padding: $padding;
|
||||
box-sizing: border-box;
|
||||
background-color: white;
|
||||
.name {
|
||||
font-size: $title-size + 6;
|
||||
font-weight: 600;
|
||||
}
|
||||
.address {
|
||||
font-size: $title-size-sm;
|
||||
margin: $margin - 10 0;
|
||||
display: flex;
|
||||
}
|
||||
.area {
|
||||
font-size: $title-size-sm;
|
||||
display: flex;
|
||||
}
|
||||
}
|
||||
|
||||
.survey {
|
||||
padding: $padding;
|
||||
box-sizing: border-box;
|
||||
background-color: white;
|
||||
margin: $margin 0;
|
||||
.survey-title {
|
||||
font-size: $title-size;
|
||||
margin-bottom: $margin - 10;
|
||||
font-weight: bold;
|
||||
}
|
||||
.survey-text {
|
||||
font-size: $title-size-m;
|
||||
line-height: 44rpx;
|
||||
color: $text-color;
|
||||
}
|
||||
.facilities {
|
||||
margin-top: $margin;
|
||||
.list {
|
||||
.label {
|
||||
width: 170rpx;
|
||||
text-align: center;
|
||||
font-size: $title-size-m;
|
||||
.label-img {
|
||||
width: 60rpx;
|
||||
height: 60rpx;
|
||||
}
|
||||
.label-name{
|
||||
color: $text-gray;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.shopowner {
|
||||
position: relative;
|
||||
.shopowner-cont {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
width: calc(100% - 200rpx);
|
||||
.shopowner-img {
|
||||
width: 74rpx;
|
||||
height: 74rpx;
|
||||
border-radius: 50%;
|
||||
}
|
||||
.shopowner-name {
|
||||
line-height: 74rpx;
|
||||
padding-left: $padding - 10;
|
||||
}
|
||||
}
|
||||
.shopowner-tel {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: 10rpx;
|
||||
display: inline-block;
|
||||
border: $main-color 2rpx solid;
|
||||
color: $main-color;
|
||||
font-size: $title-size-sm;
|
||||
padding: 0 $padding;
|
||||
line-height: 54rpx;
|
||||
border-radius: $radius-m;
|
||||
}
|
||||
}
|
||||
.helper {
|
||||
background-color: $window-color;
|
||||
padding: $padding;
|
||||
box-sizing: border-box;
|
||||
font-size: $title-size-m;
|
||||
border-radius: $radius;
|
||||
margin-top: $margin;
|
||||
position: relative;
|
||||
&::after{
|
||||
position: absolute;
|
||||
content: '';
|
||||
width: 0;
|
||||
height: 0;
|
||||
left: $margin;
|
||||
top: -14rpx;
|
||||
border-left: 14rpx solid transparent;
|
||||
border-right: 14rpx solid transparent;
|
||||
border-bottom: 14rpx solid $window-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
185
pages/service/index.vue
Normal file
185
pages/service/index.vue
Normal 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>
|
||||
@@ -85,34 +85,34 @@
|
||||
<!-- 功能块 -->
|
||||
<view class="btns-box">
|
||||
<view class="btns-box-item" @click="$Router.push({name: 'WalletAdd'})">
|
||||
<image class="icon" src="@/static/user/icon_00.png" mode="widthFix"></image>
|
||||
<image class="icon" src="@/static/user/userIcon_00.png" mode="widthFix"></image>
|
||||
ZH钱包(首次)
|
||||
<uni-icons class="forward" type="forward" color="#999"></uni-icons>
|
||||
</view>
|
||||
<view class="btns-box-item" @click="$Router.push({name: 'WalletProperty'})">
|
||||
<image class="icon" src="@/static/user/icon_00.png" mode="widthFix"></image>
|
||||
<image class="icon" src="@/static/user/userIcon_01.png" mode="widthFix"></image>
|
||||
ZH钱包（钱包）
|
||||
<uni-icons class="forward" type="forward" color="#999"></uni-icons>
|
||||
</view>
|
||||
<view class="btns-box-item">
|
||||
<image class="icon" src="@/static/user/icon_00.png" mode="widthFix"></image>
|
||||
<image class="icon" src="@/static/user/userIcon_02.png" mode="widthFix"></image>
|
||||
健康档案
|
||||
<uni-icons class="forward" type="forward" color="#999"></uni-icons>
|
||||
</view>
|
||||
<view class="btns-box-item" @click="$Router.push({name: 'Address', params: {type: 'edit'}})">
|
||||
<image class="icon" src="@/static/user/icon_02.png" mode="widthFix"></image>
|
||||
<image class="icon" src="@/static/user/userIcon_03.png" mode="widthFix"></image>
|
||||
地址管理
|
||||
<uni-icons class="forward" type="forward" color="#999"></uni-icons>
|
||||
</view>
|
||||
</view>
|
||||
<view class="btns-box">
|
||||
<view class="btns-box-item">
|
||||
<image class="icon" src="@/static/user/icon_03.png" mode="widthFix"></image>
|
||||
<image class="icon" src="@/static/user/userIcon_04.png" mode="widthFix"></image>
|
||||
设置
|
||||
<uni-icons class="forward" type="forward" color="#999"></uni-icons>
|
||||
</view>
|
||||
<view class="btns-box-item" @click="logOut">
|
||||
<image class="icon" src="@/static/user/icon_03.png" mode="widthFix"></image>
|
||||
<image class="icon" src="@/static/user/userIcon_05.png" mode="widthFix"></image>
|
||||
退出登录
|
||||
<uni-icons class="forward" type="forward" color="#999"></uni-icons>
|
||||
</view>
|
||||
@@ -352,8 +352,8 @@
|
||||
right: $margin;
|
||||
}
|
||||
.icon{
|
||||
width: 36rpx;
|
||||
height: 36rpx;
|
||||
width: 44rpx;
|
||||
height: 44rpx;
|
||||
vertical-align: middle;
|
||||
margin-right: $margin/2;
|
||||
margin-bottom: 8rpx;
|
||||
|
||||
BIN
static/tabBar/tabBar_04.png
Normal file
BIN
static/tabBar/tabBar_04.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.7 KiB |
BIN
static/tabBar/tabBar_show_04.png
Normal file
BIN
static/tabBar/tabBar_show_04.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.9 KiB |
BIN
static/user/userIcon_00.png
Normal file
BIN
static/user/userIcon_00.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 16 KiB |
BIN
static/user/userIcon_01.png
Normal file
BIN
static/user/userIcon_01.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.3 KiB |
BIN
static/user/userIcon_02.png
Normal file
BIN
static/user/userIcon_02.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.1 KiB |
BIN
static/user/userIcon_03.png
Normal file
BIN
static/user/userIcon_03.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.5 KiB |
BIN
static/user/userIcon_04.png
Normal file
BIN
static/user/userIcon_04.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 3.0 KiB |
BIN
static/user/userIcon_05.png
Normal file
BIN
static/user/userIcon_05.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 16 KiB |
Reference in New Issue
Block a user