公司演示版e鹿悦游
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.
 
 
 
 
 
CjyTravel/subPageA/scenic/scenicdetial/scenicdetial.vue

894 lines
22 KiB

<template>
<view class="scenic_warp" :class="showNotice == false ? 'scenic_warp' : 'scenic_warp active'">
<!-- 轮播图 -->
<view class="mmd_scol">
<view v-if="!showPic" class="video-box">
<!-- :poster="info.videopath" 视频封面 -->
<video id="myVideo" :src="videoSrc" @error="videoErrorCallback" :controls="false" v-if="videoSrc"></video>
</view>
<view class="uni-margin-wrap" v-if="showPic">
<swiper class="swiper_jqu" :indicator-dots="indicatorDots_sce" :autoplay="autoplay_sce" :interval="interval_sce"
:duration="duration_sce">
<swiper-item v-for="(item, index) in pic_list" :key="index">
<view class="">
<image :src="item" mode="aspectFill" class="swiper_tup br_radius"></image>
</view>
</swiper-item>
</swiper>
</view>
<view class="picVdeo">
<view :class="['tab-btn', showPic == false ? 'curr' : '']" @click="showPic = false">视频</view>
<view :class="['tab-btn', showPic == true ? 'curr' : '']" @click="showPic = true">图片</view>
</view>
<view class="glass-container"></view>
</view>
<view class="info-card">
<view class="cur-input">
<view class="senice-name-box">
<view class="senice-name">
{{ info.sname ? info.sname : "暂无" }}
</view>
<view class="dl_1">
<text class="sp-blue">{{ info.slevel ? info.slevel : "暂无" }}</text>
</view>
</view>
<view class="pub-right" @click="goJianJie">简介攻略<uni-icons type="right" size="13"></uni-icons></view>
</view>
<view class="senice-charac" v-if="info.charac != null">
<view class="border sp-default" v-for="(item, index) in info.charac">{{ item }}
</view>
</view>
<view class="secdt_adr dly_flex">
<text class="w_adr">开放时间</text>
<text class="cot_adr">{{ info.businesstime }}</text>
</view>
<view class="dly_flex_c secdt_tck mt_1">
<view class="sec_name_unit">
<text class="cot_adr" style="margin-right: 20rpx">{{ info.saddress }}</text>
</view>
<view class="agn_right sec_whe_unit"><button class="btn_com btn_daoh" @click="daohang">导航</button></view>
</view>
</view>
<!-- 门票 -->
<view class="ticket-list-box mode_com mt_1">
<view class="m-ticket-sort" v-for="items in ticketList" v-show="items.ticketList.length > 0">
<view class="m-sort-name">{{ items.sortName }}</view>
<view class="ticket-item" v-for="item in items.ticketList">
<view class="ticket-name">
<span>{{ item.ticketname }}</span>
<span class="ticket-rule">{{ item.refundRulesName }}</span>
</view>
<view class="ticket-tips">
<view class="ticket-price">{{ item.settlementPrice | money }} <span class="m-danwei">元</span></view>
</view>
<view class="btn-box">
<view class="m-btn" hover-class="m-btn-hover" @click="bookIt(item)">立即预定</view>
</view>
</view>
</view>
</view>
<!-- 攻略 -->
<view class="mode_com mt_1 gl" v-if="wanleList.length > 0 && wanleList != undefined">
<text class="tit_com">附近玩乐</text>
<text v-if="wanleList.length == 0 || wanleList == undefined" class="mssj_adr">暂无数据</text>
<view class="category-content">
<view class="product-item" v-for="(p_item, p_index) in wanleList">
<image class="product-img" :src="p_item.thumb"></image>
<view class="m-content">
<text class="product-title1">{{ p_item.cname }}</text>
<text class="product-title m-blue border blue-border">{{
p_item.slevel
}}</text>
<text class="product-title">{{ p_item.address }}</text>
</view>
</view>
</view>
</view>
<f-login></f-login>
</view>
</template>
<script>
import { mapState, mapMutations } from "vuex";
import uniIcons from "@/uni_modules/uni-icons/components/uni-icons/uni-icons.vue";
import uParse from "@/components/gaoyia-parse/parse.vue";
import aes from "@/common/aes.js";
export default {
components: {
uParse,
uniIcons,
},
onLoad(options) {
var that = this;
this.$util.getNetworkType(
function (res) {
if (res.networkType === "none") {
uni.showToast({
title: that.$param.netMsg,
icon: "none",
duration: 2000,
});
that.netType = false;
}
},
function () {
uni.showToast({
title: that.$param.netMsg,
icon: "none",
duration: 2000,
});
that.netType = false;
}
);
if (!that.netType) {
return;
}
this.$util.hideLoadingByTime();
let oMeta;
if (typeof document !== "undefined") {
oMeta = document.createElement("meta");
oMeta.httpEquiv = "Cache-Control";
oMeta.content = "no-cache, no-store, must-revalidate";
document.getElementsByTagName("head")[0].appendChild(oMeta);
} else {
// 微信小程序环境下的替代逻辑
// 例如使用微信小程序的 API
console.log("Running in WeChat Mini Program environment");
}
that.$util.saveOperatorLog(that, "SCENIC", options.guid);
//正常进入详情
uni.showLoading({
title: "加载中",
mask: true,
});
this.guid = options.guid;
if (options.list != "" && options.list != null) {
const arr = JSON.parse(options.list).filter((item) => item.cid != this.guid);
if (arr.length <= 2) {
this.wanleList = arr;
} else {
this.wanleList = arr.slice(0, 2);
}
}
this.detailInfo(options.guid);
this.getIsShow();
// #ifdef H5
if (this.$wechat.isWechat()) {
this.isZb = false;
}
// #endif
},
onUnload() { },
onShow() {
this.param.page = 1;
this.detailInfo(this.guid)
},
onReady() {
// setTimeout(function() {
// uni.hideLoading();
// }, 500);
this.videoContext = uni.createVideoContext("myVideo");
},
data() {
return {
showPic: true,
videoContext: "",
wanleList: [],
guid: "",
indicatorDots_sce: false,
zhankai: 0,
shouqi: 1,
open: 0,
stop: 1,
autoplay_sce: true,
interval_sce: 4000,
duration_sce: 500,
pic_url: this.$config.ROOTPATH,
rootPaht: this.$config.ROOTPATH,
comments: [],
pic_list: [],
videoSrc: "",
info: {},
weather: {},
listDatas: [],
ticketList: [],
ticketSortList: [],
param: {
page: 1,
noData: !1,
loading: !1,
finished: !1,
},
peoplesnum: {},
logo: "",
soundlength: 0,
AudioContext: uni.createInnerAudioContext(),
isShow: true,
weatherImgUrl: "",
flag: true,
total: "00:00",
current: "--",
seektime: 0,
audioTime: 0,
isZb: true,
isShowBuy: "YES",
// // 门票
showNotice: false,
markers: [],
notice: "",
ticketSellprice: "",
ticketPrice: "",
suitid: "",
isspecial: "",
isToDingDanType: false,
tapDate: "",
showSever: false,
score: "", //评论分数 数据初始化
showContact: false,
sid: "",
scenicDetail: {},
isShowLink_st: "YES",
isShowFlow: false,
flowImg: "",
flowState: "",
flowStyle: "agn_center liu_txt amt_30",
netType: true,
scenicList: [],
};
},
watch: {
showPic: {
handler: function (value) {
if (value == true) {
this.videoContext.stop();
}
console.log(this.videoContext);
},
deep: true,
},
},
computed: {
...mapState(["PrimaryColor", "userInfo"]),
freeSpecsButtonBackground() {
return this.$u.colorToRgba(this.$u.rgbToHex(this.PrimaryColor), 0.75);
},
},
methods: {
bookIt(val) {
this.judgeLogin((resa) => {
const obj = {
mobile: this.userInfo.phone,
ticketId: val.id,
tenantId: this.info.controlInfo.cyjcScenicId,
};
const tenantId = this.info.controlInfo.cyjcScenicId;
console.log(
this.info.controlInfo.cyjcScenicId,
"this.info.controlInfo.cyjcScenicId"
);
if (val.buyticketlimit == 1) {
const ticket = encodeURIComponent(JSON.stringify(val));
uni.navigateTo({
url:
"/subPageC/bookTicket/bookTicket?ticket=" + ticket + "&tentId=" + tenantId,
});
} else {
this.$Request
.get(this.$config.isQuota, obj, null, null, false, false)
.then((res) => {
console.log(res, "是否有余票");
if (res.data > 0) {
const ticket = encodeURIComponent(JSON.stringify(val));
uni.navigateTo({
url:
"/subPageC/bookTicket/bookTicket?ticket=" +
ticket +
"&maxNum=" +
res.data +
"&tentId=" +
tenantId,
});
} else {
uni.showToast({
title: "超过购买上限",
icon: "none",
});
}
});
}
});
},
//门票列表
getTicketList(val) {
this.$Request
.get(
this.$config.getTicketList,
{
tenantId: val,
},
null,
null,
false,
false
)
.then((res) => {
console.log(res, "门票");
this.ticketList = res.data;
});
},
//攻略简介
goJianJie() {
const obj = {
playtime: this.info.businesstime,
smobile: this.info.smobile,
tips: this.info.tips,
sdescribe: this.info.sdescribe,
};
const str = JSON.stringify(obj);
uni.navigateTo({
url: "/subPageA/scenic/gonglve/gonglve?data=" + encodeURIComponent(str),
});
},
getIsShow: function () {
this.$Request.post(this.$config.getYbsjSysParam, {}).then((res) => {
var d = res.data;
this.isShowBuy = d.is_show_buy;
});
},
detailInfo: function (guid) {
/* var that = this;
var data = {
key: this.$param.userkey+'_scenic_' + guid
};
this.$Request.post(this.$config.getRedisData, data).then(res => {
console.log("Redis景区")
console.log(res);
if(res.status == 200){
//所有的数据
var initData = res.data;
}else{ */
this.getScDetail(guid);
/* }
}); */
},
getScDetail: function (guid) {
var data = {
guid: guid,
userkey: this.$param.userkey,
};
this.$Request.post(this.$config.scenicDetial, data).then((res) => {
this.info = res.data;
// this.tickeTlist = res.data.ticketlist;
this.logo = this.$config.ROOTPATH + res.data.slogo;
var pic_list = res.data.imgList;
var videolist = res.data.videolist;
if (pic_list != null) {
for (var i = 0; i < pic_list.length; i++) {
pic_list[i] = "" + this.pic_url + pic_list[i];
}
}
if (videolist != null) {
this.videoSrc = this.pic_url + videolist[0];
}
if (res.data.videopath != "" && res.data.videopath != null) {
this.info.videopath = this.pic_url + res.data.videopath.split("#")[1];
}
this.pic_list = pic_list;
if (
res.data.controlInfo.cyjcScenicUuid != "" &&
res.data.controlInfo.cyjcScenicUuid != null
) {
//this.comment(res.data.controlInfo.cyjcScenicUuid);
if (res.data.controlInfo.isPeopleFlow == "YES") {
this.isShowFlow = true;
}
} else {
this.isShow = false;
}
if (res.data.charac != null && res.data.charac != "") {
if (res.data.charac.includes(",")) {
this.info.charac = res.data.charac.split(",");
} else {
this.info.charac = [res.data.charac];
}
} else {
this.info.charac = null;
}
this.getDuration(this.info.soundpath, res.data.sfunc);
this.getTicketList(this.info.controlInfo.cyjcScenicId);
uni.hideLoading();
});
},
getDuration: function (soundpath, dur) {
if (soundpath == "" || soundpath == null) {
this.total = "--";
} else {
this.total = this.$util.secsToStr(Number(dur));
this.AudioContext.autoplay = false;
this.AudioContext.src = this.$config.ROOTPATH + soundpath;
/* this.AudioContext.duration=Number(dur); */
}
},
daohang() {
uni.openLocation({
latitude: Number(this.info.lat),
longitude: Number(this.info.lng),
name: this.info.sname,
address: this.info.saddress,
complete: function (result) {
console.log(result);
},
});
// #ifdef H5
if (this.$wechat.isWechat()) {
var mapParam = {
latitude: this.info.lat,
longitude: this.info.lng,
scale: 18,
name: this.info.sname,
address: this.info.saddress,
};
this.$util.openLocation(mapParam);
return;
}
window.location.href =
"https://uri.amap.com/navigation?from=" +
this.$param.clng +
"," +
this.$param.clat +
",我的位置&to=" +
this.info.lng +
"," +
this.info.lat +
"," +
this.info.saddress +
"&mode=walk&src=sjz_uniapp&callnative=1";
// #endif
},
tel: function (tels) {
uni.makePhoneCall({
phoneNumber: tels, //仅为示例
});
},
/**
* 拨打客服电话 函数
*/
getTel: function () {
uni.makePhoneCall({
phoneNumber: "0311-83886677",
});
},
},
};
</script>
<style scoped lang="scss">
@import "/static/css/common.css";
@import "/subPageA/food/fooddetial/fooddetial.css";
@import "/subPageA/ceshiLive/destination.css";
@import url("/pages/index/index.css");
@import url("/subPageA/ceshiLive/scenicdetail.css");
@import url("/subPageA/scenic/scenicdetial/scenicdetial.css");
body {
background: #f6f7fb;
}
.liu_hui {
color: #cbcbcb !important;
}
.liu_green {
color: #07b800 !important;
}
.liu_red {
color: #ef0a0a !important;
}
.slider_sec {
width: 450rpx;
height: 100%;
}
.slider_sec slider {
width: 95%;
margin-left: 2%;
margin-right: 0;
margin-top: 10rpx;
margin-bottom: 0;
}
/* 景区门票 */
.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);
}
.scenic_warp {
position: relative;
.cur-input {
color: #333;
}
.dl_1 {
color: #333;
}
/* This was made with GlassGenerator.netlify.app */
.glass-container {
width: 100%;
height: 100rpx;
position: absolute;
bottom: -70rpx;
left: 0;
z-index: 1;
color: white;
display: flex;
justify-content: center;
align-items: center;
gap: 20px;
border-radius: 0px;
backdrop-filter: blur(20px);
background-image: linear-gradient(to bottom, transparent, #f5f5f5);
border: 0px rgba(255, 255, 255, 0.4) solid;
border-bottom: 0px rgba(40, 40, 40, 0.35) solid;
border-right: 0px rgba(40, 40, 40, 0.35) solid;
}
.mmd_scol {
position: relative;
.picVdeo {
background-color: rgba(0, 0, 0, 0.5);
border-radius: 24rpx;
display: flex;
width: fit-content;
position: absolute;
bottom: 150rpx;
left: 50rpx;
z-index: 9;
.tab-btn {
transition: all ease-in-out 0.3s;
width: fit-content;
padding: 5rpx 20rpx;
color: #fff;
background-color: transparent;
font-size: 24rpx;
}
.tab-btn.curr {
background-color: #fff;
border-radius: 24rpx;
color: #333;
}
}
}
.video-box {
width: 100%;
height: 540rpx;
background-image: url("https://eluyou.ailuquan.cn:80/pda/index/no_video.png");
background-repeat: no-repeat;
background-size: contain;
::v-deep #myVideo {
width: 100%;
height: 100%;
.uni-video-cover-duration {
display: none;
}
}
}
.info-card {
position: relative;
z-index: 9;
top: -80rpx;
background: #ffffff;
border-radius: 20rpx;
margin: 0 24rpx;
padding: 40rpx 25rpx;
.cur-input {
display: flex;
align-items: center;
justify-content: space-between;
.senice-name-box {
display: flex;
align-items: center;
justify-content: start;
.senice-name {
font-family: Source Han Sans SC;
font-weight: bold;
font-size: 44rpx;
color: #1b1b1b;
margin-right: 20rpx;
}
}
}
.secdt_adr {
margin-top: 12rpx;
.w_adr {
width: fit-content;
margin-right: 20rpx;
color: #1b1b1b;
}
}
.secdt_tck {
margin-top: 27rpx;
background-color: #fff;
padding: 0;
justify-content: space-between;
align-items: center;
.agn_right {
width: fit-content;
.btn_daoh {
background: #f8f9fd;
border-radius: 28rpx;
color: #333;
position: relative;
padding-left: 40rpx;
}
.btn_daoh::before {
content: "";
width: 20rpx;
height: 20rpx;
position: absolute;
left: 10rpx;
top: 50%;
transform: translateY(-50%);
background-image: url("../../animg/daohang_ico.png");
background-repeat: no-repeat;
background-position: center;
background-size: contain;
}
}
}
}
.uni-margin-wrap {
.swiper_jqu {
height: 540rpx;
.swiper_tup {
height: 540rpx;
border-radius: 0;
}
}
}
}
.uni-margin-wrap {
width: 100%;
}
/* 景区列表 图片背景色块填充*/
.category-content .product-item:nth-child(4n) .product-img {
background-color: #f2dedc !important;
}
.category-content .product-item:nth-child(4n + 1) .product-img {
background-color: #e6f2dc !important;
}
.category-content .product-item:nth-child(4n + 2) .product-img {
background-color: #dcf0f2 !important;
}
.category-content .product-item:nth-child(4n + 3) .product-img {
background-color: #e9dcf2 !important;
}
.category-content {
display: flex;
flex-direction: row;
flex-flow: wrap;
padding-top: 30rpx;
margin: 0 20rpx;
justify-content: space-between;
.product-item {
width: 100%;
display: flex;
justify-content: start;
margin-bottom: 30rpx;
.product-img {
width: 200rpx;
height: 200rpx;
margin-bottom: 10rpx;
border-radius: 14rpx;
}
.m-content {
margin-left: 15rpx;
display: flex;
flex-direction: column;
.product-title1 {
font-size: 32rpx;
padding-bottom: 12rpx;
padding-top: 10rpx;
}
.product-title {
width: fit-content;
font-size: 24rpx;
padding: 3rpx 10rpx;
margin-bottom: 20rpx;
}
}
}
}
.gl {
margin-top: -50rpx;
background-color: #fff;
}
.senice-charac {
display: flex;
flex-wrap: wrap;
.border {
margin-right: 10rpx;
}
}
.ticket-list-box {
margin-top: -80rpx;
padding-top: 40rpx;
padding: 50rpx 0;
.m-ticket-sort {
padding: 0 25rpx;
margin-bottom: 30rpx;
background-color: #fff;
padding-bottom: 30rpx;
.m-sort-name {
font-family: Source Han Sans SC;
font-weight: bold;
font-size: 40rpx;
color: #1b1b1b;
margin-bottom: 35rpx;
padding: 50rpx 20rpx 0;
}
.ticket-item {
background: #f8f9fd;
border-radius: 20rpx;
padding: 40rpx;
margin-bottom: 25rpx;
.ticket-name {
display: flex;
justify-content: space-between;
flex-direction: column;
// align-items: center;
margin-bottom: 20rpx;
font-family: Source Han Sans SC;
font-weight: 500;
font-size: 32rpx;
color: #1b1b1b;
.ticket-type {
font-family: Source Han Sans SC;
font-weight: 400;
font-size: 20rpx;
color: #666666;
padding: 3rpx 5rpx;
border-radius: 8rpx;
border: 1px solid #e9e9e9;
}
.ticket-rule {
font-size: 24rpx;
color: rgb(43, 137, 226);
background-color: rgb(215, 238, 250);
width: fit-content;
padding: 5rpx 10rpx;
border-radius: 10rpx;
margin-top: 20rpx;
}
}
.ticket-tag {
font-family: Source Han Sans SC;
font-weight: 500;
font-size: 24rpx;
color: #0983ff;
margin-bottom: 20rpx;
}
.ticket-tips {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 15rpx;
.left {
font-family: Source Han Sans SC;
font-weight: 500;
font-size: 24rpx;
color: #ff7f00;
}
.ticket-price {
font-family: Source Han Sans SC;
font-weight: bold;
font-size: 38rpx;
color: #ff404c;
.m-danwei {
font-size: 32rpx;
}
}
}
.btn-box {
display: flex;
justify-content: flex-end;
.m-btn {
width: 160rpx;
height: 64rpx;
background: linear-gradient(-90deg, #0983ff, #57abff);
border-radius: 32rpx;
text-align: center;
line-height: 64rpx;
font-family: Source Han Sans SC;
font-weight: 500;
font-size: 26rpx;
color: #ffffff;
}
.m-btn-hover {
background: linear-gradient(-90deg, #57abff, #0983ff);
}
}
}
}
}
</style>