274 lines
7.8 KiB
Vue
274 lines
7.8 KiB
Vue
<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>
|