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.
169 lines
3.7 KiB
169 lines
3.7 KiB
<template>
|
|
<view class="">
|
|
<view class="top box">
|
|
<view class="img-play">
|
|
<image style="width: 100%; height: 100%; background-color: #eeeeee" :mode="item.mode" :src="baseUrl + datas.imgsl"></image>
|
|
<view class="play-stop" v-if="plays && datas.voiceurl" @click="play(datas.voiceurl)">
|
|
<image style="width: 50rpx; height: 50rpx; padding: 10rpx" src="../../static/img/icon_play.png"></image>
|
|
</view>
|
|
<view class="play-stop" v-if="!plays" @click="pause()"><image style="width: 50rpx; height: 50rpx; padding: 10rpx" src="../../static/img/icon_stop.png"></image></view>
|
|
</view>
|
|
<view class="top-right">
|
|
<view class="sencien-name">{{ datas.cname }}</view>
|
|
<view class="sencien-type">{{ datas.typename }}</view>
|
|
<view class="sencien-price">门票:{{ datas.ticketprice }}</view>
|
|
</view>
|
|
</view>
|
|
<view class="content box">
|
|
<view class="box-title">景区简介</view>
|
|
<mp-html :content="datas.content"></mp-html>
|
|
</view>
|
|
<view class="picture box">
|
|
<view class="box-title">景点图集</view>
|
|
<view class="img-box" v-for="(item, index) in imgs">
|
|
<image class="img" :src="baseUrl + item"></image>
|
|
</view>
|
|
</view>
|
|
<view class="bottom box">
|
|
<view>
|
|
<uni-icons class="icn" type="location" size="20" color="#989898"></uni-icons>
|
|
{{ datas.addr }}
|
|
</view>
|
|
<view>
|
|
<!-- <uni-icons class="icn" type="eye" size="20" color="#989898"></uni-icons> -->
|
|
<span class="iconfont"></span>
|
|
{{ datas.opentime }}
|
|
</view>
|
|
<view @click="callPhone('tel')">
|
|
<uni-icons class="icn" type="phone" size="20" color="#989898"></uni-icons>
|
|
{{ datas.tel }}
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
data() {
|
|
return {
|
|
datas: null,
|
|
imgs: null,
|
|
baseUrl: this.$config.ROOTPATH,
|
|
plays: true
|
|
};
|
|
},
|
|
onLoad(options) {
|
|
console.log(options);
|
|
this.getDetail(options.id);
|
|
},
|
|
methods: {
|
|
getDetail(val) {
|
|
let this_ = this;
|
|
uni.request({
|
|
url: this.$config.ROOTPATH + '/mobile/mapScenic/qylyScenicinfoById?userkey=' + this.$param.userkey + '&id=' + val,
|
|
method: 'get',
|
|
success: function (res) {
|
|
console.log(res);
|
|
this_.datas = res.data.data[0];
|
|
}
|
|
}),
|
|
uni.request({
|
|
url: this.$config.ROOTPATH + '/mobile/mapScenic/qylyScenicImgBySid?sid=' + val,
|
|
method: 'get',
|
|
success: function (res) {
|
|
console.log(res);
|
|
this_.imgs = res.data.data.urltj.split(',');
|
|
}
|
|
});
|
|
},
|
|
play(val) {
|
|
this.showMp3Title = true;
|
|
this.plays = false;
|
|
uni.playBackgroundAudio({
|
|
dataUrl: this.$config.ROOTPATH + val
|
|
});
|
|
},
|
|
pause() {
|
|
let this_ = this;
|
|
uni.stopBackgroundAudio({
|
|
success: function () {
|
|
this_.showMp3Title = false;
|
|
this_.plays = true;
|
|
}
|
|
});
|
|
},
|
|
callPhone() {
|
|
uni.makePhoneCall({
|
|
phoneNumber: '03193928888' //仅为示例，并非真实的电话号码
|
|
});
|
|
}
|
|
}
|
|
};
|
|
</script>
|
|
|
|
<style scoped>
|
|
.box {
|
|
padding: 20rpx 25rpx 60rpx 25rpx;
|
|
border-bottom: solid 10rpx #d8d8d8;
|
|
}
|
|
.box:last-child {
|
|
border: none;
|
|
}
|
|
.top {
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
.img-play {
|
|
width: 140rpx;
|
|
height: 140rpx;
|
|
border-radius: 50%;
|
|
position: relative;
|
|
overflow: hidden;
|
|
}
|
|
.play-stop {
|
|
position: absolute;
|
|
z-index: 9999;
|
|
left: 30%;
|
|
top: 27%;
|
|
}
|
|
.top-right {
|
|
margin-left: 40rpx;
|
|
}
|
|
.sencien-name {
|
|
font-size: 40rpx;
|
|
display: inline-flex;
|
|
}
|
|
.sencien-type {
|
|
text-align: center;
|
|
border-radius: 20rpx;
|
|
color: #5d5d5d;
|
|
padding: 5rpx 10rpx;
|
|
box-shadow: 0 0 2px 2px #b9b9b9;
|
|
display: inline-flex;
|
|
margin-left: 25rpx;
|
|
}
|
|
.sencien-price {
|
|
color: #b31414;
|
|
margin-top: 10rpx;
|
|
}
|
|
.content,
|
|
.picture {
|
|
margin-bottom: 40rpx;
|
|
}
|
|
.img-box {
|
|
margin-bottom: 20rpx;
|
|
}
|
|
.img {
|
|
width: 100%;
|
|
}
|
|
.bottom {
|
|
color: #444;
|
|
}
|
|
.icn {
|
|
margin-right: 15rpx;
|
|
}
|
|
.box-title {
|
|
font-size: 38rpx;
|
|
margin-bottom: 25rpx;
|
|
}
|
|
</style>
|
|
|