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.
582 lines
12 KiB
582 lines
12 KiB
7 months ago
|
<template>
|
||
|
|
<view>
|
||
|
|
<back :info="info"></back>
|
||
|
|
<view class="container">
|
||
|
|
<swiper-page :imgList="detailInfo.imgList&&detailInfo.imgList.length===0?$getimg('lx-jd.png'):detailInfo.imgList"></swiper-page>
|
||
|
|
<view class="info-container">
|
||
|
|
<view class="introduction">
|
||
|
|
<view class="content">
|
||
|
|
<view class="title-container">
|
||
|
|
<image :src="$getimg('icon-jdmp.png')" mode="widthFix"></image>
|
||
|
|
<view class="name">{{ detailInfo.name }}</view>
|
||
|
|
<view class="level" v-if="[1, 2, 3, 4, 5].includes(detailInfo.level)">
|
||
|
|
{{ detailInfo.level }}星</view>
|
||
|
|
</view>
|
||
|
|
<tags-list v-if="detailInfo.labels!=''" :list="detailInfo.labels" style="margin-top: 40rpx;">
|
||
|
|
</tags-list>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
<view class="line"></view>
|
||
|
|
<view class="address-container">
|
||
|
|
<view>
|
||
|
|
<view class="address">{{ detailInfo.address || '' }}</view>
|
||
|
|
<view class="distance">距离您的位置{{detailInfo.distance}}</view>
|
||
|
|
</view>
|
||
|
|
<view class="address-img-container">
|
||
|
|
<view @click="goAddress(detailInfo.lagoff, detailInfo.lngoff)">
|
||
|
|
<image :src="$getimg('icon-map.png')" mode="widthFix"></image>
|
||
|
|
<view class="text">地图</view>
|
||
|
|
</view>
|
||
|
|
<!-- <view @click="handleClick(2)" v-if="detailInfo.telConsult!=''">
|
||
|
|
<image :src="$getimg('icon-iphone.png')" mode="widthFix"></image>
|
||
|
|
<view class="text">电话</view>
|
||
|
|
</view> -->
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
<!-- 基本信息 -->
|
||
|
|
<view class="slotContent" style="padding: 20rpx 30rpx;">
|
||
|
|
<view class="title">基本信息</view>
|
||
|
|
<jbxx-page @goMoreDetail="goMoreDetail" :detailInfo="detailInfo"></jbxx-page>
|
||
|
|
</view>
|
||
|
|
<pingjia :infoid="roomId" zytype="2" type="1"></pingjia>
|
||
|
|
<view class="slotContent" v-if="detailInfo.ctgList">
|
||
|
|
<view class="title">搜周边</view>
|
||
|
|
<view class="list_container">
|
||
|
|
<view class="card-menu" v-for="(item, index) in detailInfo.ctgList" :key="item.uid"
|
||
|
|
:style="{ borderTop: index == 0 ? '1rpx solid #eeeeee' : '' }">
|
||
|
|
<view class="img-container">
|
||
|
|
<u-image width="194rpx" height="194rpx" border-radius="10rpx"
|
||
|
|
:src="item.thumbImg==''?$getimg('noimg.png'):$geturl(item.thumbImg)"></u-image>
|
||
|
|
<view class="img-mask">
|
||
|
|
<image :src="$getimg('icon-juli.png')" mode="widthFix"></image>
|
||
|
|
<text>{{ item.distanceStr }}</text>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
<view class="detail-container" >
|
||
|
|
<view class="title-container">
|
||
|
|
<view class="content">
|
||
|
|
<text class="title" style="margin-top: 0;">{{ item.name }}</text>
|
||
|
|
<view class="level" v-if="[1, 2, 3, 4, 5].includes(item.level)">{{ item.level }}A</view>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
<view class="info-container">
|
||
|
|
<view class="info">
|
||
|
|
<view class="gradePrice">
|
||
|
|
<view class="lbradd">{{item.address}}</view>
|
||
|
|
</view>
|
||
|
|
<tags-list :list="item.scapeType"></tags-list>
|
||
|
|
<!-- <view class="price-container" v-if="item.ticketPrice!=''">
|
||
|
|
<text v-if="item.ticketPrice!=0">
|
||
|
|
<text class="symbol">¥</text>
|
||
|
|
<text class="price">{{item.ticketPrice}}</text>
|
||
|
|
<text class="qi">起</text>
|
||
|
|
</text>
|
||
|
|
</view> -->
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
import {
|
||
|
|
httpPost
|
||
|
|
} from '@/components/utils/request';
|
||
|
|
import ydmpPage from './components/ydmp-page';
|
||
|
|
import jbxxPage from './components/jbxx-page';
|
||
|
|
import swiperPage from './components/swiper-page';
|
||
|
|
import listPage from './components/list-page';
|
||
|
|
import tagsList from './components/tags-list';
|
||
|
|
import pingjia from '@/components/utils/zixunpj.vue';
|
||
|
|
import back from '@/components/html/back.vue';
|
||
|
|
export default {
|
||
|
|
components: {
|
||
|
|
ydmpPage,
|
||
|
|
jbxxPage,
|
||
|
|
swiperPage,
|
||
|
|
listPage,
|
||
|
|
tagsList,
|
||
|
|
pingjia,
|
||
|
|
back
|
||
|
|
},
|
||
|
|
data() {
|
||
|
|
return {
|
||
|
|
info: {
|
||
|
|
color: true,num:false
|
||
|
|
},
|
||
|
|
url: {
|
||
|
|
detail: '/waresdetail.jspx',
|
||
|
|
},
|
||
|
|
detailInfo: {},
|
||
|
|
customStyle: {
|
||
|
|
width: '170rpx',
|
||
|
|
height: '64rpx',
|
||
|
|
lineHeight: '64rpx',
|
||
|
|
background: '#FF9445',
|
||
|
|
fontSize: '24rpx'
|
||
|
|
},
|
||
|
|
ticketsIndex: 0,
|
||
|
|
surround: [],
|
||
|
|
roomId: 0,
|
||
|
|
roomType: 0,
|
||
|
|
roomlength:1,
|
||
|
|
longitude: '',
|
||
|
|
latitude:''
|
||
|
|
};
|
||
|
|
},
|
||
|
|
onLoad(options) {
|
||
|
|
console.log(options)
|
||
|
|
this.roomId = options.uid;
|
||
|
|
this.roomType = options.type;
|
||
|
|
var that = this;
|
||
|
|
uni.getLocation({
|
||
|
|
type: 'wgs84',
|
||
|
|
success: function (res) {
|
||
|
|
that.longitude = res.longitude;
|
||
|
|
that.latitude = res.latitude;
|
||
|
|
that.getDetail(options.id,options.type);
|
||
|
|
}
|
||
|
|
});
|
||
|
|
},
|
||
|
|
methods: {
|
||
|
|
getRoom(e){
|
||
|
|
this.roomlength=e.length;
|
||
|
|
},
|
||
|
|
getDetail(id,type) {
|
||
|
|
httpPost(this, this.url.detail, {
|
||
|
|
id,
|
||
|
|
type: Number(type),
|
||
|
|
longitude: this.longitude,
|
||
|
|
latitude: this.latitude
|
||
|
|
}, res => {
|
||
|
|
let json = res.data.data;
|
||
|
|
this.detailInfo = json;
|
||
|
|
});
|
||
|
|
},
|
||
|
|
|
||
|
|
clickMore() {
|
||
|
|
uni.showToast({
|
||
|
|
title: '点击更多',
|
||
|
|
icon: 'none'
|
||
|
|
});
|
||
|
|
},
|
||
|
|
goAddress(latitude, longitude) {
|
||
|
|
console.log(latitude + ',' + longitude);
|
||
|
|
uni.openLocation({
|
||
|
|
latitude: Number(latitude),
|
||
|
|
longitude: Number(longitude)
|
||
|
|
});
|
||
|
|
},
|
||
|
|
// handleClick(type) {
|
||
|
|
// if (type == 1) {
|
||
|
|
// let url = '/pages/daohang?lat=' + this.detailInfo.latGd + '&lng=' + this.detailInfo.lngGd +
|
||
|
|
// '&name=' + this.detailInfo.name + '&address=' + this.detailInfo.address;
|
||
|
|
// uni.navigateTo({
|
||
|
|
// url: url
|
||
|
|
// })
|
||
|
|
|
||
|
|
// } else {
|
||
|
|
// let phone = this.detailInfo.telConsult;
|
||
|
|
// uni.makePhoneCall({
|
||
|
|
// phoneNumber: phone,
|
||
|
|
// success: (res) => {
|
||
|
|
// console.log('调用成功!')
|
||
|
|
// },
|
||
|
|
// });
|
||
|
|
// }
|
||
|
|
// },
|
||
|
|
handleTickets(item) {
|
||
|
|
this.ticketsIndex = item;
|
||
|
|
},
|
||
|
|
lookMore(name) {
|
||
|
|
let path = '';
|
||
|
|
if (name == '景区') path = '../scenic';
|
||
|
|
if (name == '酒店') path = '../hotel';
|
||
|
|
uni.navigateTo({
|
||
|
|
url: path
|
||
|
|
});
|
||
|
|
},
|
||
|
|
gotoDetail(name, id) {
|
||
|
|
let path = '';
|
||
|
|
if (name == '酒店') {
|
||
|
|
this.getDetail(id);
|
||
|
|
uni.pageScrollTo({
|
||
|
|
scrollTop: 0,
|
||
|
|
duration: 500
|
||
|
|
});
|
||
|
|
return
|
||
|
|
}
|
||
|
|
|
||
|
|
if (name == '景区') path = `../scenic-detail/scenic-detail?id=${id}`;
|
||
|
|
uni.navigateTo({
|
||
|
|
url: path
|
||
|
|
});
|
||
|
|
},
|
||
|
|
bookingTicket() {
|
||
|
|
uni.navigateTo({
|
||
|
|
url: '../booking-ticket/booking-ticket'
|
||
|
|
});
|
||
|
|
},
|
||
|
|
goMoreDetail(anchor) {
|
||
|
|
uni.navigateTo({
|
||
|
|
url: `../more-detail/more-detailjd?anchor=${anchor}&id=`+this.roomId
|
||
|
|
});
|
||
|
|
},
|
||
|
|
|
||
|
|
getListImg(imgs) {
|
||
|
|
if (!imgs) return this.$getImg('/ouhai_xcx/home/map.png');
|
||
|
|
return imgs.split(',')[0];
|
||
|
|
}
|
||
|
|
}
|
||
|
|
};
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<style lang="scss">
|
||
|
|
.container {
|
||
|
|
width: 100%;
|
||
|
|
}
|
||
|
|
|
||
|
|
.info-container {
|
||
|
|
position: relative;
|
||
|
|
top: -50rpx;
|
||
|
|
|
||
|
|
.introduction {
|
||
|
|
// height: 200rpx;
|
||
|
|
background: #fff;
|
||
|
|
border-radius: 30rpx 30rpx 0rpx 0rpx;
|
||
|
|
padding: 47rpx 34rpx 5rpx 30rpx;
|
||
|
|
display: flex;
|
||
|
|
justify-content: space-between;
|
||
|
|
|
||
|
|
.content {
|
||
|
|
display: flex;
|
||
|
|
flex-direction: column;
|
||
|
|
|
||
|
|
.title-container {
|
||
|
|
display: flex;
|
||
|
|
align-items: center;
|
||
|
|
|
||
|
|
image {
|
||
|
|
width: 54rpx;
|
||
|
|
height: 40rpx;
|
||
|
|
}
|
||
|
|
|
||
|
|
.name {
|
||
|
|
font-size: 30rpx;
|
||
|
|
font-family: PingFang SC;
|
||
|
|
font-weight: bold;
|
||
|
|
color: #333333;
|
||
|
|
margin-left: 17rpx;
|
||
|
|
margin-right: 18rpx;
|
||
|
|
}
|
||
|
|
|
||
|
|
.level {
|
||
|
|
width: 60rpx;
|
||
|
|
height: 40rpx;
|
||
|
|
text-align: center;
|
||
|
|
background: #fff1eb;
|
||
|
|
border-radius: 4rpx;
|
||
|
|
font-size: 28rpx;
|
||
|
|
font-family: DIN;
|
||
|
|
font-weight: bold;
|
||
|
|
color: #ff540b;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
.businessInformation {
|
||
|
|
display: flex;
|
||
|
|
align-items: center;
|
||
|
|
justify-content: space-between;
|
||
|
|
padding: 0 30rpx 30rpx 30rpx;
|
||
|
|
font-size: 26rpx;
|
||
|
|
font-weight: 400;
|
||
|
|
font-family: PingFang SC;
|
||
|
|
|
||
|
|
.isBusiness {
|
||
|
|
font-weight: bold;
|
||
|
|
color: #04bb6d;
|
||
|
|
margin-right: 21rpx;
|
||
|
|
}
|
||
|
|
|
||
|
|
.businessTime {
|
||
|
|
flex: 1;
|
||
|
|
color: #333333;
|
||
|
|
}
|
||
|
|
|
||
|
|
.moreMore {
|
||
|
|
font-size: 22rpx;
|
||
|
|
color: #666666;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
.line {
|
||
|
|
width: 690rpx;
|
||
|
|
height: 1rpx;
|
||
|
|
margin: auto;
|
||
|
|
background: #000000;
|
||
|
|
opacity: 0.1;
|
||
|
|
}
|
||
|
|
|
||
|
|
.address-container {
|
||
|
|
display: flex;
|
||
|
|
justify-content: space-between;
|
||
|
|
font-family: PingFang SC;
|
||
|
|
font-weight: 400;
|
||
|
|
padding: 30rpx;
|
||
|
|
font-size: 22rpx;
|
||
|
|
|
||
|
|
image {
|
||
|
|
width: 48rpx;
|
||
|
|
height: 48rpx;
|
||
|
|
}
|
||
|
|
|
||
|
|
.address {
|
||
|
|
font-size: 28rpx;
|
||
|
|
color: #333333;
|
||
|
|
margin-bottom: 19rpx;
|
||
|
|
}
|
||
|
|
|
||
|
|
.distance {
|
||
|
|
color: #999999;
|
||
|
|
}
|
||
|
|
|
||
|
|
.address-img-container {
|
||
|
|
width: 20%;
|
||
|
|
display: flex;
|
||
|
|
text-align: center;
|
||
|
|
justify-content: space-between;
|
||
|
|
|
||
|
|
.text {
|
||
|
|
color: #666666;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
.slotContent {
|
||
|
|
padding: 30rpx;
|
||
|
|
|
||
|
|
.title {
|
||
|
|
margin-top: 25rpx;
|
||
|
|
font-size: 36rpx;
|
||
|
|
font-family: PingFang SC;
|
||
|
|
font-weight: 600;
|
||
|
|
color: #333333;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
.card-menu {
|
||
|
|
// width: 750rpx;
|
||
|
|
height: 207rpx;
|
||
|
|
background: #ffffff;
|
||
|
|
padding: 25rpx;
|
||
|
|
margin-bottom: 20rpx;
|
||
|
|
display: flex;
|
||
|
|
|
||
|
|
.img-container {
|
||
|
|
position: relative;
|
||
|
|
color: #ffffff;
|
||
|
|
font-weight: 400;
|
||
|
|
font-family: Microsoft YaHei;
|
||
|
|
|
||
|
|
image {
|
||
|
|
width: 194rpx;
|
||
|
|
height:184rpx;
|
||
|
|
border-radius: 10rpx;
|
||
|
|
}
|
||
|
|
|
||
|
|
.img-mask {
|
||
|
|
position: absolute;
|
||
|
|
width: 180rpx;
|
||
|
|
height: 50rpx;
|
||
|
|
border-radius: 0rpx 0rpx 10rpx 10rpx;
|
||
|
|
bottom: 25rpx;
|
||
|
|
display: flex;
|
||
|
|
align-items: center;
|
||
|
|
padding-left: 20rpx;
|
||
|
|
background: linear-gradient(right, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.5));
|
||
|
|
font-size: 24rpx;
|
||
|
|
|
||
|
|
image {
|
||
|
|
width: 30rpx;
|
||
|
|
height: 30rpx;
|
||
|
|
}
|
||
|
|
|
||
|
|
text {
|
||
|
|
margin-left: 9rpx;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
.detail-container {
|
||
|
|
margin-left: 15rpx;
|
||
|
|
width: 100%;
|
||
|
|
display: flex;
|
||
|
|
flex-direction: column;
|
||
|
|
|
||
|
|
.for20Seconds {
|
||
|
|
background: #fff5f5;
|
||
|
|
border: 1rpx solid #ff948e;
|
||
|
|
border-radius: 4rpx;
|
||
|
|
font-size: 20rpx;
|
||
|
|
font-family: PingFang SC;
|
||
|
|
font-weight: 400;
|
||
|
|
color: #ff0c00;
|
||
|
|
text-align: center;
|
||
|
|
margin-left: 10rpx;
|
||
|
|
padding: 2rpx 9rpx 2rpx 10rpx;
|
||
|
|
}
|
||
|
|
|
||
|
|
.info-container {
|
||
|
|
display: flex;
|
||
|
|
justify-content: space-between;
|
||
|
|
margin-top: 67rpx;
|
||
|
|
|
||
|
|
.info {
|
||
|
|
display: flex;
|
||
|
|
flex-direction: column;
|
||
|
|
|
||
|
|
.gradePrice {
|
||
|
|
display: flex;
|
||
|
|
justify-content: space-between;
|
||
|
|
align-items: center;
|
||
|
|
font-family: PingFang SC;
|
||
|
|
font-weight: 400;
|
||
|
|
font-size: 24rpx;
|
||
|
|
.lbradd{
|
||
|
|
font-size: 24upx;
|
||
|
|
color: #666666;
|
||
|
|
overflow: hidden;
|
||
|
|
white-space: nowrap;
|
||
|
|
text-overflow: ellipsis;
|
||
|
|
&::before{
|
||
|
|
content: '';
|
||
|
|
display: inline-block;
|
||
|
|
width: 18upx;
|
||
|
|
height: 22upx;
|
||
|
|
background: url('https://cs.tour-ma.com/r/cms/www/m/changshu/ra-liebiao-icon-dizhi.png') no-repeat;
|
||
|
|
background-size: 100%;
|
||
|
|
margin-right: 12upx;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
.content {
|
||
|
|
display: flex;
|
||
|
|
align-items: center;
|
||
|
|
|
||
|
|
.review,
|
||
|
|
.collection {
|
||
|
|
color: #666666;
|
||
|
|
|
||
|
|
text {
|
||
|
|
font-size: 25rpx;
|
||
|
|
font-family: DIN;
|
||
|
|
font-weight: 500;
|
||
|
|
color: #333333;
|
||
|
|
margin-right: 10rpx;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
.divider {
|
||
|
|
width: 3rpx;
|
||
|
|
height: 17rpx;
|
||
|
|
background: #cccccc;
|
||
|
|
margin-left: 15rpx;
|
||
|
|
margin-right: 13rpx;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
.price {
|
||
|
|
text-decoration: line-through;
|
||
|
|
color: #979797;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
.tags-container {
|
||
|
|
margin-top: 16rpx;
|
||
|
|
}
|
||
|
|
|
||
|
|
.price-container {
|
||
|
|
line-height: 50rpx;
|
||
|
|
margin-top: 5rpx;
|
||
|
|
color: #ff540b;
|
||
|
|
font-size: 24rpx;
|
||
|
|
|
||
|
|
.symbol {
|
||
|
|
margin-right: 5rpx;
|
||
|
|
}
|
||
|
|
|
||
|
|
.price {
|
||
|
|
font-size: 42rpx;
|
||
|
|
}
|
||
|
|
.qi {
|
||
|
|
color: #666666;
|
||
|
|
font-size: 20rpx;
|
||
|
|
margin-left: 10rpx;
|
||
|
|
}
|
||
|
|
|
||
|
|
.price-name {
|
||
|
|
color: #66666670;
|
||
|
|
font-size: 22rpx;
|
||
|
|
font-weight: 400;
|
||
|
|
}
|
||
|
|
|
||
|
|
.oldPrice {
|
||
|
|
margin-left: 9rpx;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
.title-container {
|
||
|
|
display: flex;
|
||
|
|
align-items: center;
|
||
|
|
|
||
|
|
image {
|
||
|
|
width: 54rpx;
|
||
|
|
height: 40rpx;
|
||
|
|
}
|
||
|
|
|
||
|
|
.name {
|
||
|
|
font-size: 48rpx;
|
||
|
|
font-family: PingFang SC;
|
||
|
|
font-weight: bold;
|
||
|
|
color: #333333;
|
||
|
|
margin-left: 17rpx;
|
||
|
|
margin-right: 18rpx;
|
||
|
|
}
|
||
|
|
|
||
|
|
.level {
|
||
|
|
width: 60rpx;
|
||
|
|
height: 40rpx;
|
||
|
|
text-align: center;
|
||
|
|
background: #fff1eb;
|
||
|
|
border-radius: 4rpx;
|
||
|
|
font-size: 28rpx;
|
||
|
|
font-family: DIN;
|
||
|
|
font-weight: bold;
|
||
|
|
color: #ff540b;
|
||
|
|
margin-left: 10rpx;
|
||
|
|
}
|
||
|
|
|
||
|
|
.content {
|
||
|
|
display: flex;
|
||
|
|
align-items: center;
|
||
|
|
|
||
|
|
.title {
|
||
|
|
color: #2a2a2a;
|
||
|
|
font-weight: bold;
|
||
|
|
font-size: 36rpx;
|
||
|
|
font-family: PingFang SC;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</style>
|