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.
484 lines
18 KiB
484 lines
18 KiB
<template>
|
|
<view :class="showNotice==false ? '':'active'" >
|
|
<!-- <import src="/wxParse/wxParse.wxml" />
|
|
<wxs src="../../app.wxs" module="app" /> -->
|
|
<!-- 数据分隔调用 -->
|
|
<scroll-view scroll-y="true" bindscroll="scrollPage" scroll-into-view="">
|
|
|
|
<!-- 门票详情 广告 -->
|
|
<view class='inx_lbt'>
|
|
<swiper :autoplay="autoplay" class="lh-swiper" :duration="duration" :indicator-dots="indicatorDots" :interval="interval">
|
|
<swiper-item v-for="(item,index) in scenicDetail.piclist" :key="index">
|
|
<image class="slide-image" height="200upx" :src="item" width="100%" mode="scaleToFill"></image>
|
|
</swiper-item>
|
|
</swiper>
|
|
<view class="slide-dots">
|
|
<!-- <block wx:for="{{imgUrls}}" wx:key="*this"> -->
|
|
<view class="dotactive"></view>
|
|
<!-- </block> -->
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 门票详情 门票信息 -->
|
|
<view class="container doc-layer ticketInfo">
|
|
<view class="layer-all clearfix">
|
|
<view class="info-mainTit">{{scenicDetail.title}}</view>
|
|
<view class="info-subTit">{{scenicDetail.sellpoint}}</view>
|
|
<view class="info-date">营业时间：
|
|
<text v-if="scenicDetail.business_time == null"></text>
|
|
<text v-else>{{scenicDetail.business_time}}</text>
|
|
</view>
|
|
<view class="info-add">{{scenicDetail.address}}
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 门票详情 联系我们 -->
|
|
<view class="container doc-layer content" @tap="showContactBtn">
|
|
<view class="layer-all clearfix">
|
|
<text class='contentTit'>联系我们</text>
|
|
<text class='contentTel'>0311-87885822</text>
|
|
<icon class='codeIcon'></icon>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 门票详情 服务保障 -->
|
|
<view class="container doc-layer guarantee" @tap="showSeverBtn">
|
|
<view class="layer-all clearfix">
|
|
<text class='guaranteeTit'>服务保障</text>
|
|
<view class='guaranteeDes'>
|
|
<text>如实描述</text>
|
|
<text>入园保障</text>
|
|
<text>特殊退订保障</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<cover-view class="order-filter" style="height:100upx">
|
|
<cover-view class="filter-item active">
|
|
景区详情
|
|
<cover-view class='linep'></cover-view>
|
|
</cover-view>
|
|
</cover-view>
|
|
|
|
<!-- 门票详情 门票列表 -->
|
|
<view class="container doc-layer location ticketList" id='orderFilter'>
|
|
<view class='anchor' id="view-ticket"></view>
|
|
<view class="layer-all clearfix">
|
|
<view class="layer-tit">景点门票</view>
|
|
<view class="layer-list">
|
|
<view class='list-item' v-for="(item,index) in scenicDetail.ticketinfo" :key="index" :item-id="index" :data-year="index">
|
|
<view class='item-left'>
|
|
<view class='name'>{{item.kindname}}</view>
|
|
<view class='tags'>
|
|
<text v-for="(items,indexs) in item.attrs" :key="indexs" :item-id="indexs" :data-year="indexs">{{items.attrname}}</text>
|
|
</view>
|
|
<view class='info'>
|
|
<text>剩余{{item.number}}</text>
|
|
<text @tap="showNoticeBtn" :data-notice="item.newdescription" :data-price="item.price" :data-sellprice="item.sellprice" :data-suitid="item.id" :data-isspecial="item.isspecialprice">购买须知></text>
|
|
</view>
|
|
<!-- <view class="gain">
|
|
<text>一级佣金¥{{item.preson_distribution}}</text>
|
|
<text>二级佣金¥{{item.preson_distribution_two}} </text>
|
|
<text>三级佣金¥{{item.preson_distribution_three}}</text>
|
|
</view> -->
|
|
</view>
|
|
<view class='item-right'>
|
|
<view class='price'>
|
|
<text class="sym">¥</text>
|
|
<text class="cur">{{item.price}}</text>
|
|
<text class="txt">起</text>
|
|
<text class="old">¥{{item.sellprice}}</text>
|
|
</view>
|
|
<view class='payBtn' :data-notice="item.newdescription" :data-price="item.price" :data-sellprice="item.sellprice" :data-suitid="item.id" :data-isspecial="item.isspecialprice" :data-productid="scenicDetail.id" @tap="showNoticeBtn">立即预定</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 门票详情 景区介绍 -->
|
|
<view class="container doc-layer location introduction">
|
|
<view class='anchor' id="view-introduction"></view>
|
|
<view class="layer-all clearfix">
|
|
<view class="layer-tit">景区介绍</view>
|
|
<view class="layer-con">
|
|
<u-parse :content="scenicDetail.content" :loading="loading" @preview="preview" @navigate="navigate" />
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 门票详情 交通指南 -->
|
|
<view class="container doc-layer location traffic">
|
|
<view class='anchor' id="view-traffic"></view>
|
|
<view class="layer-all clearfix">
|
|
<view class="layer-tit">交通指南</view>
|
|
<view class="layer-con">
|
|
<map id="map" :longitude="scenicDetail.lng" :latitude="scenicDetail.lat" scale="14" :markers="markers" show-location
|
|
style="width: 100%; height: 300px;">
|
|
</map>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 门票详情 用户点评 -->
|
|
<view class="container doc-layer location comment">
|
|
<view class='anchor' id="view-comment"></view>
|
|
<view class="layer-all clearfix">
|
|
<view class="layer-tit">用户点评
|
|
<text class='label'>{{scenicDetail.comment.num}}条评论</text>
|
|
</view>
|
|
<view class="layer-con">
|
|
<view class="comment-scores">
|
|
<view class="name">总体评分：</view>
|
|
<view class='userStar'>
|
|
<text class="star onStar" v-for="(items,indexs) in score|int" :key="indexs"></text>
|
|
</view>
|
|
</view>
|
|
<view class="comment-list">
|
|
<!-- item start -->
|
|
<view class="list-item" v-for="(item,index) in scenicDetail.comment.info" :key="index">
|
|
<view class="item-top clearfix">
|
|
<view class="userImg">
|
|
<image :style="'background-image:url('+item.wx_imgurl+');background-size:cover;'" />
|
|
</view>
|
|
<view class="userName">
|
|
<text class="name">{{item.wx_nickname}}</text>
|
|
<view class='userStar'>
|
|
<text class="star onStar" v-for="(items,indexs) in item.score1|int" :key="indexs"></text>
|
|
<text class="star " v-for="(items,indexs) in 5-item.score1|int" :key="indexs"></text>
|
|
</view>
|
|
</view>
|
|
<view class="userDate">{{item.addtime}}</view>
|
|
</view>
|
|
<view :class="'item-pic '+item.piclist.length?'show':'hide'">
|
|
<view v-for="(items,indexs) in item.piclist" :key="indexs">
|
|
<view :data-srcs="items.piclist" @tap="previewImage">
|
|
<image :src='api_url+items' />
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class="item-con">{{item.content}}</view>
|
|
</view>
|
|
<!-- item end -->
|
|
</view>
|
|
<navigator class="commentBtn" :url="'/pages/pay/order/order?id='+scenicDetail.aid">查看全部用户评论</navigator>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<!-- 公共 内容底 -->
|
|
<view class="hb-botTips">
|
|
<text>亲，拉到最底啦~</text>
|
|
</view>
|
|
|
|
</scroll-view>
|
|
|
|
<!-- 联系我们 弹框 -->
|
|
<view class='dialog-container' v-if="showContact">
|
|
<view class='dialog-mask' @tap="closeContactBtn"></view>
|
|
<view class='dialog-info J-contact'>
|
|
<view class='contact-box'>
|
|
<!-- <button class='closeBtn' @tap="closeContactBtn"></button> -->
|
|
<view class='contact-top'>
|
|
<view class='time'>客服服务时间：9:00~21:00</view>
|
|
<view class='exp'>河北旅游网客服竭诚为您服务！</view>
|
|
</view>
|
|
<!-- <view class='contact-code'>
|
|
<button open-type="contact" bindcontact="handleContact">在线客服</button>
|
|
</view> -->
|
|
<view class='contact-tel'>
|
|
<view class='tel-box'>
|
|
<view class='tel' @tap='getMobile'>
|
|
<text>客服手机</text ><text class='samll'>点击拨打电话</text>
|
|
</view>
|
|
</view>
|
|
<view class='tel-box'>
|
|
<view class='tel' @tap='getTel'>
|
|
<text>客服座机</text ><text class='samll'>点击拨打电话</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 服务保障 弹框 -->
|
|
<view class='dialog-container' v-if="showSever">
|
|
<view class='dialog-info J-sever'>
|
|
<button class='closeBtn' @tap="closeSeverBtn"></button>
|
|
<view class='sever-tit'>服务保障
|
|
<text>多重保障，让您购票无忧</text>
|
|
</view>
|
|
<view class='line'></view>
|
|
<view class='sever-con'>
|
|
<view class='title'> 如实描述</view>
|
|
<view class='conP'>河北旅游网保证提供的产品信息真实有效,如出现页面描述与实际情况不相符,提供有效凭证后,平台将承担不低于订单金额的30%补偿。</view>
|
|
<view class='line' style='margin-left:40rpx;'></view>
|
|
<view class='title'>入园保障</view>
|
|
<view class='conP'>成功预订景区门票并按产品规则使用,出游当日无法按照原订单入园,联系河北旅游网客服后10分钟内未解决问题,客户可在景区购买当日门市票入园,平台将赔付差价。</view>
|
|
<view class='line' style='margin-left:40rpx;'></view>
|
|
<view class='title'>特殊退订保障：</view>
|
|
<view class='conP'>为了分担河北旅游网客户因自身不能预期和控制的特殊原因退订产生的损失,平台设立“特殊原因退订保障”。 </view>
|
|
<view class='conP'>如果客户遇到“航班延误或取消”、“不可抗力(自然灾害—政府官方机构发布橙色或红色预警级别、政府行为或社会异常事件—政府官方机构发布不宜或禁止前往预警)”、“怀孕”、“身故”、“住院”、“骨折”的情况,发生时间晚于预订时间的，,提供材料并审核通过后,河北旅游网将退还客户支付的费用。 </view>
|
|
<view class='conP'>【具体材料说明】 </view>
|
|
<view class='conP'> 航班问题:航班延误说明或其他可以证明的材料; </view>
|
|
<view class='conP'>怀孕及骨折:出具三级甲等医院病历诊断书、包含“不宜出行”字样的病假单和收费证明;住院:出具三级甲等医院病历诊断书、住院证明(住院期间与出行期间重叠)和收费证明;身故:死亡证明。</view>
|
|
<view class='noCon'></view>
|
|
</view>
|
|
<view class='sever-btn'>
|
|
<button class='readBtn' @tap="closeSeverBtn">已经阅读</button>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 优惠券 弹框 -->
|
|
<!-- <view class='dialog-container' wx:if="{{showCoupon}}">
|
|
<view class='dialog-mask' bindtap="closeCouponBtn"></view>
|
|
<view class='dialog-info J-coupon'>
|
|
<view class='coupon-tit'>请领取优惠券</view>
|
|
<scroll-view class='coupon-list' scroll-y="true" style="height:{{scrHeight}}px">
|
|
<view class='list-item' wx:for="{{couponData}}" wx:key="">
|
|
<view class='price'>
|
|
<text class="sym">¥</text>
|
|
<text class="cur">{{item.price}}</text>
|
|
</view>
|
|
<view class='name'>{{item.name}}</view>
|
|
<view class='date'>{{item.startDate}}至{{item.endDate}}</view>
|
|
</view>
|
|
</scroll-view>
|
|
<view class='coupon-btn'>
|
|
<button class='getBtn' bindtap="closeSeverBtn">一键领取</button>
|
|
</view>
|
|
</view>
|
|
</view> -->
|
|
|
|
<!-- 购买须知 弹框 -->
|
|
<view class='dialog-container' v-if="showNotice">
|
|
<view class='dialog-mask' @tap="closeNoticeBtn"></view>
|
|
<view class='dialog-info J-notice'>
|
|
<button class='closeBtn' @tap="closeNoticeBtn"></button>
|
|
<view class='notice-con'>
|
|
<view class='con-box'>
|
|
<u-parse :content="notice" :loading="loading" @preview="preview" @navigate="navigate" />
|
|
</view>
|
|
</view>
|
|
<view class="notice-pay">
|
|
<view class='pay-box'>
|
|
<view class='price'>
|
|
<text class="name">单价：</text>
|
|
<text class="sym">¥</text>
|
|
<text class="cur">{{ticketPrice}}</text>
|
|
<text class="txt">起</text>
|
|
<text class="old">¥{{ticketSellprice}}</text>
|
|
</view>
|
|
<view class='payBtn' @tap="paybtn">立即预定</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import uParse from '@/components/gaoyia-parse/parse.vue'
|
|
import aes from "@/common/aes.js"
|
|
export default {
|
|
components: {
|
|
uParse
|
|
},
|
|
data() {
|
|
return {
|
|
/* 轮播图 swiper */
|
|
autoplay: true,
|
|
duration: 1000,
|
|
interval: 3000,
|
|
indicatorDots: true,
|
|
scenicDetail:{},
|
|
api_url: 'https://www.aitto.net/', // 图片地址合并
|
|
showNotice:false,
|
|
markers:[],
|
|
notice:"",
|
|
ticketSellprice:"",
|
|
ticketPrice:"",
|
|
suitid:"",
|
|
isspecial:"",
|
|
isToDingDanType:false,
|
|
tapDate:"",
|
|
showSever:false,
|
|
score: '',//评论分数 数据初始化
|
|
showContact:false,
|
|
sid:""
|
|
}
|
|
},
|
|
onLoad:function(option){
|
|
var that = this;
|
|
this.sid = option.sid;
|
|
//正常进入详情
|
|
if(option.unionid == undefined || option.unionid == null || option.unionid == ""){
|
|
this.getScenicDetail(option.sid);
|
|
}else{ //授权重定向回来的页面
|
|
this.getScenicDetail(option.sid);
|
|
uni.setStorageSync("oauthTime",new Date().getTime())
|
|
uni.setStorageSync("nickname",aes.aesMinEncrypt(option.nickname));
|
|
uni.setStorageSync("openid",aes.aesMinEncrypt(option.openid));
|
|
uni.setStorageSync("unionid",aes.aesMinEncrypt(option.unionid));
|
|
uni.setStorageSync("headimgurl",aes.aesMinEncrypt(option.headimgurl));
|
|
this.suitid = option.suitid;
|
|
this.$util.getUserInfo(that,option.unionid,function(){
|
|
that.paybtn();
|
|
});
|
|
}
|
|
},
|
|
onShow:function(){
|
|
if(this.isToDingDanType){
|
|
this.goDingDan();
|
|
}
|
|
},
|
|
methods:{
|
|
getScenicDetail:function(sid){
|
|
var api_token = this.$MD5.hexMD5("APIgetSpotInfolvyou");
|
|
var sendData = {
|
|
api_token: api_token,
|
|
productaid: sid
|
|
}
|
|
var data = {
|
|
data:JSON.stringify(sendData),
|
|
url:this.$config.getSpotInfo
|
|
}
|
|
console.log(sendData);
|
|
this.$Request.post(this.$config.getAittoData, data).then(res => {
|
|
console.log(res)
|
|
var data = res.data;
|
|
for (var i = 0; i < data.piclist.length; i++) {
|
|
data.piclist[i] = this.api_url + data.piclist[i];
|
|
}
|
|
this.scenicDetail = data;
|
|
var item = {
|
|
latitude: this.scenicDetail.lat,
|
|
longitude: this.scenicDetail.lng,
|
|
}
|
|
this.markers.push(item);
|
|
this.score=res.data.comment.score / res.data.comment.num;
|
|
this.latitude=res.data.lat; //要去的纬度-地址
|
|
this.longitude=res.data.lng; //要去的经度-地址
|
|
this.address= res.data.address;
|
|
this.title= res.data.title;
|
|
this.noticeData=res.data.ticketinfo;
|
|
this.couponData=res.data.discountInfo ? res.data.discountInfo : [];
|
|
this.showCoupon=res.data.userDiscount ? true : false;
|
|
})
|
|
},
|
|
preview(src, e) {
|
|
// do something
|
|
},
|
|
navigate(href, e) {
|
|
// do something
|
|
},
|
|
showNoticeBtn:function(e){
|
|
this.showNotice = true;
|
|
var view = e.currentTarget.dataset;
|
|
this.notice = view.notice;
|
|
this.ticketSellprice = view.sellprice,
|
|
this.ticketPrice = view.price,
|
|
this.suitid = view.suitid,
|
|
this.isspecial = view.isspecial
|
|
},
|
|
paybtn:function(){
|
|
var that = this;
|
|
if(aes.aesDecrypt(uni.getStorageSync("unionid")) == undefined || aes.aesDecrypt(uni.getStorageSync("unionid")) == null || aes.aesDecrypt(uni.getStorageSync("unionid")) == ""){
|
|
if(this.$wechat.isWechat()){
|
|
//weixin 调用授权
|
|
this.$util.getUser(that,"scenicdetail",that.suitid,that.sid);
|
|
}else{
|
|
//Android
|
|
|
|
}
|
|
return;
|
|
}
|
|
that.showNotice = false;
|
|
var api_token = that.$MD5.hexMD5("APIgetSpotSuitVilTimelvyou");
|
|
var sendData = {
|
|
api_token: api_token,
|
|
suitid: that.suitid //套餐id
|
|
}
|
|
var data = {
|
|
data:JSON.stringify(sendData),
|
|
url:that.$config.getSpotSuitVilTime
|
|
}
|
|
that.$Request.post(that.$config.getAittoData, data).then(re => {
|
|
if (re.code == 0 && re.msg == 'Success') {
|
|
uni.navigateTo({
|
|
url: '/pages/pay/calendar/index?date2='+re.data[0].maxday,
|
|
});
|
|
}
|
|
})
|
|
},
|
|
closeNoticeBtn:function(){
|
|
this.showNotice = false;
|
|
},
|
|
showSeverBtn: function () {
|
|
this.showSever = true;
|
|
},
|
|
closeSeverBtn: function () {
|
|
this.showSever = false;
|
|
},
|
|
showContactBtn: function () {
|
|
this.showContact = true;
|
|
},
|
|
closeContactBtn: function () {
|
|
this.showContact = false;
|
|
},
|
|
/**
|
|
* 拨打客服电话 函数
|
|
*/
|
|
getMobile: function () {
|
|
uni.makePhoneCall({
|
|
phoneNumber: "18630172332"
|
|
})
|
|
},
|
|
getTel: function () {
|
|
uni.makePhoneCall({
|
|
phoneNumber: "0311-87885822"
|
|
})
|
|
},
|
|
goDingDan:function(){
|
|
let productid = this.scenicDetail.id;
|
|
let suitid = this.suitid;
|
|
let dismid = 0;
|
|
let substation = 0;
|
|
var sendData = {
|
|
productid: productid,
|
|
day: this.tapDate,
|
|
suitid: suitid,
|
|
dismid: dismid,
|
|
substation: substation
|
|
}
|
|
this.isToDingDanType = false;
|
|
uni.navigateTo({
|
|
url: '/pages/pay/book/book?sendData='+encodeURIComponent(JSON.stringify(sendData)),
|
|
});
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style>
|
|
@import url("scenicdetail.css");
|
|
.content {
|
|
/* padding-left: 1.5em;
|
|
padding-right: 1.5em;
|
|
font-size: 35upx; */
|
|
}
|
|
.active{
|
|
overflow: hidden;
|
|
height:100vh !important;
|
|
}
|
|
.dialog-mask{position: fixed;
|
|
top:0;
|
|
left:0;
|
|
z-index:999;
|
|
width:100%;
|
|
height:100%;
|
|
background:rgba(0,0,0,0.4);
|
|
}
|
|
</style>
|
|
|