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.
651 lines
17 KiB
651 lines
17 KiB
<template>
|
|
<view class="bg">
|
|
<view class="kefu-box" @click="gotoPath('/subPackages/onlineService/index')">
|
|
<image src="https://static.ticket.sz-trip.com/tourist/daoyou/kefu.png" class="kefu-img"></image>
|
|
客服
|
|
</view>
|
|
|
|
<!-- 导游 -->
|
|
<view class="top-box" v-if="detail.guide_data">
|
|
<view class="daoyou-detail">
|
|
<swiper class="daoyou-imgs" :circular="true" :interval="6000" :current="current" @change="swiperChange"
|
|
:duration="800" :indicator-dots="false" :autoplay="true" v-if="detail.guide_data">
|
|
<swiper-item v-for="(item, index) in detail.guide_data.video_list" :key="index + 'T'" v-if="detail.guide_data.video_list">
|
|
<video :src="showImg(item)" class="daoyou-img" preload="metadata" :id="`fileList_${index}`"
|
|
:controls="false" :show-progress="false" :show-fullscreen-btn="false" @loadedmetadata="startVideo(`fileList_${index}`)"
|
|
:show-play-btn="false" :show-center-play-btn="false" :show-loading="false"></video>
|
|
<view class="daoyou-img" style="position: absolute;z-index: 5;top: 0;left: 0;">
|
|
|
|
</view>
|
|
<image src="https://static.ticket.sz-trip.com/tourist/daoyou/play.png" class="daoyou-play" @click="playVideo(item)"></image>
|
|
</swiper-item>
|
|
<swiper-item v-for="(item, index) in detail.guide_data.lingo_image_list" :key="index" v-if="detail.guide_data.lingo_image_list">
|
|
<image class="daoyou-img" :src="showImg(item)" mode="aspectFill"></image>
|
|
</swiper-item>
|
|
</swiper>
|
|
|
|
<view class="swiper-nums">
|
|
<view :class="['swiper-num', {'swiper-active': item == current + 1}]" v-for="item in imgLength" :key="item"></view>
|
|
</view>
|
|
</view>
|
|
|
|
<view class="top-content flex-column">
|
|
<view class="top-title text-overflow">
|
|
{{detail.guide_data.nickname}}
|
|
<view>{{detail.guide_data.group_data.name}}</view>
|
|
</view>
|
|
<view class="top-tags text-overflowRows">
|
|
从业{{detail.guide_data.duration}}年 丨
|
|
{{detail.guide_data.lingo_data.name}}
|
|
</view>
|
|
<view class="top-subtitle text-overflow">{{detail.scenic}}</view>
|
|
<view class="top-subtitle text-overflow" v-if="detail.guide_data.sparkle_text">
|
|
<span v-for="(text,taxtIndex) in detail.guide_data.sparkle_text" :key="taxtIndex">{{text.text}} </span>
|
|
</view>
|
|
<view class="top-subtitle text-overflow">{{detail.guide_data.bio}}</view>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 产品 -->
|
|
<view class="top-box" v-else>
|
|
<view class="daoyou-detail">
|
|
<swiper class="daoyou-imgs" :circular="true" :interval="6000" :current="current" @change="swiperChange"
|
|
:duration="800" :indicator-dots="false" :autoplay="true" v-if="detail.list_images">
|
|
<swiper-item v-for="(item, index) in detail.list_images" :key="index">
|
|
<image class="daoyou-img" :src="showImg(item)" mode="aspectFill"></image>
|
|
</swiper-item>
|
|
</swiper>
|
|
|
|
<view class="swiper-nums">
|
|
<view :class="['swiper-num', {'swiper-active': item == current + 1}]" v-for="item in imgLength" :key="item"></view>
|
|
</view>
|
|
</view>
|
|
|
|
<view class="top-content">
|
|
<view class="top-title text-overflow">
|
|
{{detail.title}}
|
|
</view>
|
|
<view class="top-tags text-overflow" style="margin: 10rpx 0 0;">
|
|
{{detail.goods_new_tag}}
|
|
</view>
|
|
<view class="top-subtitle text-overflowRows">{{detail.subtitle}}</view>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 日历 -->
|
|
<view class="calendar">
|
|
<view class="calendar-top">
|
|
<view @click="preNextDate(0)">
|
|
<img src="https://static.ticket.sz-trip.com/tourist/daoyou/left.png" class="iconfont"/>
|
|
</view>
|
|
<view>{{year}}年{{month}}月</view>
|
|
<view @click="preNextDate(1)">
|
|
<img src="https://static.ticket.sz-trip.com/tourist/daoyou/right.png" class="iconfont"/>
|
|
</view>
|
|
</view>
|
|
|
|
<view class="calendar-bottom">
|
|
<view class="week-item" v-for="(item,index) in weekList" :key="item + index">
|
|
{{item}}
|
|
</view>
|
|
|
|
<view v-for="(item, index) in everyDay" :key="item.day + index" class="day-box flex-center"
|
|
:class="(nowDay > item.date) ? 'grayDate' : ''">
|
|
<view :class="['day-item', selectDay == item.date ? 'daySelect' : '']"
|
|
@click="changeDate(item.date,item.day)">
|
|
{{ nowDay == item.date ? '今日' : item.day }}
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 规格 -->
|
|
<view class="sku-box" v-if="skus && skus.length > 0">
|
|
<view v-for="(item,index) in skus[selectIndex].info" :key="index">
|
|
<view class="sku-item flex-between" v-if="item.store > 0">
|
|
<view class="text-overflow">
|
|
<view class="sku-title">{{item.sku_info.title}}</view>
|
|
<view class="sku-subtitle">提前沟通讲解内容</view>
|
|
</view>
|
|
<view class="sku-price">{{item.money / 100}}</view>
|
|
<view class="sku-btn" @click="order(item)">预订</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
data() {
|
|
return {
|
|
current: 0,
|
|
imgLength: 0,
|
|
detail: {},
|
|
|
|
// 日历
|
|
weekList: ['日', '一', '二', '三', '四', '五', '六'],
|
|
year: 0,
|
|
month: 0,
|
|
day: 0,
|
|
week: '',
|
|
nowDay: '',
|
|
selectDay: '',
|
|
selectIndex: 0,
|
|
everyDay: [],
|
|
|
|
skus: [],
|
|
type: '',
|
|
id: ''
|
|
}
|
|
},
|
|
onLoad(option) {
|
|
this.id = option.id
|
|
this.year = Number(this.getNowTime(new Date(), 2).slice(0, 4));
|
|
this.month = Number(this.getNowTime(new Date(), 2).slice(5, 7));
|
|
this.day = Number(this.getNowTime(new Date(), 2).slice(8, 10));
|
|
this.nowDay = this.getNowTime(new Date())
|
|
this.selectDay = this.getNowTime(new Date())
|
|
this.getEveryDay(this.year + '/' + this.month + '/' + 1)
|
|
|
|
this.getDetail()
|
|
},
|
|
methods: {
|
|
// 预订
|
|
order(item) {
|
|
this.Post({}, '/api/user/getUserDetails').then(res => {
|
|
if(res.data) {
|
|
if (!this.selectDay) {
|
|
uni.showToast({
|
|
title: '请先选择日期',
|
|
icon: 'none'
|
|
});
|
|
return;
|
|
}
|
|
|
|
let data = {
|
|
sku: item,
|
|
selectDay: this.selectDay,
|
|
guide_id: this.type == 'tourist' ? this.detail.guide_data.id : ''
|
|
}
|
|
this.$store.commit('changeTouristInfo',data)
|
|
|
|
uni.navigateTo({
|
|
url: '/subPackages/daoyou/order'
|
|
})
|
|
}
|
|
})
|
|
},
|
|
// 获取商品详情
|
|
getDetail(id) {
|
|
this.Post({goods_id: this.id},'/api/goods/getGoodDetail').then(res => {
|
|
if (res.data.flag == 0) {
|
|
uni.showToast({title: '商品不存在或已下架',icon: 'none'})
|
|
setTimeout(() => {this.goBack()}, 2000)
|
|
}
|
|
|
|
// res.data.goods_new_tag = (res.data.goods_new_tag ? res.data.goods_new_tag.split(',') : []).splice(0, 3);
|
|
|
|
if(res.data.guide_data) {
|
|
// 导游
|
|
this.type = 'tourist'
|
|
res.data.guide_data.goods_new_tag = (res.data.guide_data.goods_new_tag ? res.data.guide_data.goods_new_tag.split(',') : []).splice(0, 3);
|
|
res.data.guide_data.video_list = (res.data.guide_data.video_list ? res.data.guide_data.video_list.split(',') : []);
|
|
res.data.guide_data.lingo_image_list = (res.data.guide_data.lingo_image_list ? res.data.guide_data.lingo_image_list.split(',') : []);
|
|
|
|
this.imgLength = res.data.guide_data.video_list.length + res.data.guide_data.lingo_image_list.length
|
|
}else {
|
|
// 线路
|
|
this.type = 'line'
|
|
res.data.list_images = (res.data.list_images ? res.data.list_images.split(',') : []);
|
|
|
|
this.imgLength = res.data.list_images.length
|
|
}
|
|
this.detail = res.data;
|
|
});
|
|
},
|
|
startVideo (id) {
|
|
let videoContext = uni.createVideoContext(id)
|
|
videoContext.play()
|
|
videoContext.pause()
|
|
},
|
|
// 选择日期
|
|
changeDate(item,index) {
|
|
// 只选择今日和之后的日期
|
|
if(item >= this.nowDay) {
|
|
this.selectDay = item
|
|
this.selectIndex = index - 1
|
|
}
|
|
},
|
|
// 根据日期判断库存
|
|
getStoreByDate() {
|
|
this.Post({
|
|
goods_id: this.id,
|
|
start_date: this.everyDay[0].date,
|
|
end_date: this.everyDay[this.everyDay.length - 1].date
|
|
},'/api/goods/get_product_sku_price_by_date').then(res => {
|
|
this.skus = res.data
|
|
})
|
|
},
|
|
// 播放视频
|
|
playVideo(item) {
|
|
uni.navigateTo({
|
|
url: '/subPackages/video/video?item=' + encodeURIComponent(JSON.stringify(item))
|
|
})
|
|
},
|
|
//轮播图左右滑动
|
|
swiperChange(e) {
|
|
this.current = e.detail.current;
|
|
},
|
|
// 获取当前日期
|
|
getNowTime(time, type) {
|
|
var date = time,
|
|
year = date.getFullYear(),
|
|
month = date.getMonth() + 1,
|
|
day = date.getDate(),
|
|
hour = date.getHours() < 10 ? "0" + date.getHours() : date.getHours(),
|
|
minute = date.getMinutes() < 10 ? "0" + date.getMinutes() : date.getMinutes(),
|
|
second = date.getSeconds() < 10 ? "0" + date.getSeconds() : date.getSeconds();
|
|
month >= 1 && month <= 9 ? (month = "0" + month) : "";
|
|
day >= 0 && day <= 9 ? (day = "0" + day) : "";
|
|
if (type == 1) {
|
|
if (uni.getSystemInfoSync().platform == 'ios') {
|
|
var timer = year + '/' + month + '/' + day + ' ' + hour + ':' + minute + ':' + second;
|
|
} else {
|
|
var timer = year + '-' + month + '-' + day + ' ' + hour + ':' + minute + ':' + second;
|
|
}
|
|
} else {
|
|
var timer = year + '-' + month + '-' + day;
|
|
}
|
|
|
|
return timer;
|
|
},
|
|
// 遍历月份日期
|
|
getEveryDay(data) {
|
|
let date = new Date(data);
|
|
let month = date.getMonth();
|
|
//设置月份
|
|
date.setMonth(month + 1);
|
|
//设置一个月的某一天-这里设置为零则取到的日期中的天就会是当月的最后一天（比如，二月份就是28或29，其他月份就是30或31），方便下边的循环
|
|
date.setDate(0);
|
|
let dayArry = [];
|
|
let day = date.getDate(); //获取当前月最后一天是几号
|
|
for (let i = 1; i <= day; i++) {
|
|
date.setDate(i); //如果只获取当前选择月份的每一天，则不需要date.setDate(i)只需dayArry.push(i)即可，其中date.setDate(i)是设置当前月份的每一天
|
|
dayArry.push({
|
|
day: i,
|
|
week: this.getWeekday(date.getDay()),
|
|
date: this.getNowTime(date),
|
|
flag: 0
|
|
}); //选中月份的每一天和当天是星期几
|
|
}
|
|
|
|
this.everyDay = dayArry;
|
|
this.selectDay = this.everyDay[0].date
|
|
this.selectIndex = this.everyDay[0].day - 1
|
|
// 如果月份日期包含今天的，默认选择今天
|
|
for (let i = 0; i < this.everyDay.length; i++) {
|
|
if(this.everyDay[i].date == this.getNowTime(new Date())) {
|
|
this.selectIndex = this.everyDay[i].day - 1
|
|
this.selectDay = this.everyDay[i].date
|
|
break;
|
|
}
|
|
}
|
|
this.getStoreByDate();
|
|
this.resetDay();
|
|
},
|
|
getWeekday(day) {
|
|
return ['日', '一', '二', '三', '四', '五', '六'][day];
|
|
},
|
|
//重置日期与顶部周期相对应
|
|
resetDay() {
|
|
let arr = this.weekList;
|
|
let w = this.everyDay[0].week;
|
|
arr.forEach((v, index) => {
|
|
if (v == w) {
|
|
let id = index;
|
|
if (id != 0) {
|
|
for (let i = 0; i < id; i++) {
|
|
this.everyDay.unshift({
|
|
day: '',
|
|
week: ''
|
|
});
|
|
}
|
|
}
|
|
}
|
|
});
|
|
},
|
|
// 切换上一月、下一月
|
|
preNextDate(e) {
|
|
let currentDate = new Date()
|
|
if (e) {
|
|
// 只能往后点三个月
|
|
let monthsToAdd = 3; // 三个月
|
|
let maxMonth = 0
|
|
currentDate.setMonth(currentDate.getMonth() + monthsToAdd);
|
|
maxMonth = Number(this.getNowTime(currentDate).slice(5, 7))
|
|
|
|
// if(this.month + 1 == maxMonth) return;
|
|
// 下一月
|
|
this.month += 1;
|
|
if (this.month > 12) {
|
|
this.year += 1;
|
|
this.month = 1;
|
|
}
|
|
if (uni.getSystemInfoSync().platform == 'ios') {
|
|
this.getEveryDay(this.year + '/' + this.month + '/' + 1);
|
|
} else {
|
|
this.getEveryDay(this.year + '-' + this.month);
|
|
}
|
|
} else {
|
|
currentDate.setMonth(currentDate.getMonth() - 1);
|
|
let minMonth = Number(this.getNowTime(currentDate).slice(5, 7))
|
|
if(this.month - 1 == minMonth) return;
|
|
// 上一月
|
|
this.month -= 1;
|
|
if (this.month == 0) {
|
|
this.year -= 1;
|
|
this.month = 12;
|
|
}
|
|
if (uni.getSystemInfoSync().platform == 'ios') {
|
|
this.getEveryDay(this.year + '/' + this.month + '/' + 1);
|
|
} else {
|
|
this.getEveryDay(this.year + '-' + this.month);
|
|
}
|
|
}
|
|
},
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.bg {
|
|
padding: 30rpx 26.67rpx 100rpx;
|
|
min-height: 100vh;
|
|
background: #F9F5F0;
|
|
}
|
|
|
|
.kefu-box {
|
|
font-weight: 500;
|
|
font-size: 27rpx;
|
|
color: #96684F;
|
|
display: flex;
|
|
align-items: center;
|
|
display: flex;
|
|
justify-content: flex-end;
|
|
|
|
.kefu-img {
|
|
width: 33.33rpx;
|
|
height: 33.33rpx;
|
|
margin-right: 7rpx;
|
|
}
|
|
}
|
|
|
|
.top-box {
|
|
height: 313rpx;
|
|
background: #FFFFFF;
|
|
border-radius: 7rpx;
|
|
position: relative;
|
|
margin-top: 18rpx;
|
|
padding-left: 300rpx;
|
|
|
|
.daoyou-detail {
|
|
width: 265rpx;
|
|
position: absolute;
|
|
top: -53rpx;
|
|
left: 13rpx;
|
|
|
|
.daoyou-imgs {
|
|
width: 265rpx;
|
|
height: 332rpx;
|
|
background-image: url('https://static.ticket.sz-trip.com/tourist/daoyou/dyImgBg.png');
|
|
background-size: 100% 100%;
|
|
padding: 6rpx;
|
|
box-sizing: border-box;
|
|
position: relative;
|
|
|
|
.daoyou-img {
|
|
width: 253rpx;
|
|
height: 320rpx;
|
|
}
|
|
|
|
.daoyou-play {
|
|
width: 49.33rpx;
|
|
height: 49.33rpx;
|
|
position: absolute;
|
|
top: 0;
|
|
bottom: 0;
|
|
left: 0;
|
|
right: 0;
|
|
margin: auto;
|
|
z-index: 6;
|
|
}
|
|
}
|
|
|
|
.swiper-nums {
|
|
display: flex;
|
|
justify-content: center;
|
|
margin-top: 10rpx;
|
|
|
|
.swiper-num {
|
|
width: 9rpx;
|
|
height: 9rpx;
|
|
background: rgba(150, 104, 79, .3);
|
|
border-radius: 50%;
|
|
margin: 0 3rpx;
|
|
}
|
|
|
|
.swiper-active {
|
|
background: #96684F;
|
|
}
|
|
}
|
|
}
|
|
|
|
.top-content {
|
|
width: 380rpx;
|
|
height: 313rpx;
|
|
padding: 25rpx 0 60rpx;
|
|
justify-content: space-between;
|
|
|
|
&>view {
|
|
width: 380rpx;
|
|
}
|
|
|
|
.top-title {
|
|
font-weight: bold;
|
|
font-size: 31rpx;
|
|
color: #010101;
|
|
display: flex;
|
|
align-items: center;
|
|
|
|
view {
|
|
line-height: 30.67rpx;
|
|
margin-left: 5rpx;
|
|
background-image: url('https://static.ticket.sz-trip.com/tourist/daoyou/rankBg.png');
|
|
background-size: 100% 100%;
|
|
padding: 0 8rpx;
|
|
font-weight: 500;
|
|
font-size: 23rpx;
|
|
color: #FFFFFF;
|
|
}
|
|
}
|
|
|
|
.top-tags {
|
|
width: 380rpx;
|
|
font-weight: 500;
|
|
font-size: 24rpx;
|
|
color: #96684F;
|
|
}
|
|
|
|
.top-subtitle {
|
|
font-weight: 500;
|
|
font-size: 24rpx;
|
|
color: #888888;
|
|
}
|
|
}
|
|
}
|
|
|
|
.calendar {
|
|
height: auto;
|
|
background: #FFFFFF;
|
|
border-radius: 13rpx;
|
|
margin-top: 28rpx;
|
|
|
|
.calendar-top {
|
|
padding: 32rpx 0 60rpx;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
|
|
view:nth-child(2) {
|
|
font-weight: bold;
|
|
font-size: 36rpx;
|
|
color: #010101;
|
|
margin: 0 50rpx;
|
|
}
|
|
|
|
.iconfont {
|
|
width: 24rpx;
|
|
height: 24rpx;
|
|
display: block;
|
|
margin-top: 3rpx;
|
|
}
|
|
}
|
|
|
|
.calendar-bottom {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
padding: 33rpx 0 40rpx;
|
|
width: 697rpx;
|
|
height: auto;
|
|
background: #FFFFFF;
|
|
border-radius: 20rpx;
|
|
position: relative;
|
|
|
|
.week-item {
|
|
width: 14%;
|
|
text-align: center;
|
|
font-size: 24rpx;
|
|
font-family: PingFang SC;
|
|
font-weight: 500;
|
|
color: #666666;
|
|
}
|
|
|
|
.day-box {
|
|
width: 14%;
|
|
height: 100rpx;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
|
|
.day-item {
|
|
font-size: 29rpx;
|
|
font-family: PingFang SC;
|
|
font-weight: 500;
|
|
color: #000000;
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: space-around;
|
|
text-align: center;
|
|
|
|
.day-lunar {
|
|
font-weight: 500;
|
|
font-size: 17rpx;
|
|
color: #999999;
|
|
text-align: center;
|
|
}
|
|
|
|
.day-point{
|
|
width: 5rpx;
|
|
height: 5rpx;
|
|
background: #FF3615;
|
|
border-radius: 50%;
|
|
margin: 5rpx auto 0;
|
|
}
|
|
}
|
|
|
|
.daySelect {
|
|
width: 80rpx;
|
|
height: 80rpx;
|
|
text-align: center;
|
|
background: #96684F;
|
|
border-radius: 27rpx;
|
|
color: #fff;
|
|
|
|
.day-lunar {
|
|
color: #fff;
|
|
}
|
|
}
|
|
}
|
|
|
|
.grayDate {
|
|
.day-item {
|
|
color: #999999;
|
|
|
|
.day-point{
|
|
background: #CCCCCC;
|
|
}
|
|
}
|
|
}
|
|
|
|
.iconfont {
|
|
width: 20rpx;
|
|
height: 20rpx;
|
|
display: block;
|
|
margin: 0 auto;
|
|
}
|
|
}
|
|
}
|
|
|
|
.sku-box {
|
|
border-radius: 13rpx;
|
|
background-color: #fff;
|
|
margin-top: 30rpx;
|
|
|
|
.sku-item {
|
|
height: 132rpx;
|
|
padding: 0 26rpx 0 28rpx;
|
|
|
|
&>view:first-child {
|
|
width: 375rpx;
|
|
}
|
|
|
|
.sku-title {
|
|
font-weight: bold;
|
|
font-size: 28rpx;
|
|
color: #111111;
|
|
}
|
|
|
|
.sku-subtitle {
|
|
font-weight: 500;
|
|
font-size: 24rpx;
|
|
color: #888888;
|
|
margin-top: 10rpx;
|
|
}
|
|
|
|
.sku-price {
|
|
font-weight: bold;
|
|
font-size: 34rpx;
|
|
color: #DC2525;
|
|
}
|
|
.sku-price::before {
|
|
font-size: 24rpx;
|
|
content: '￥';
|
|
}
|
|
|
|
.sku-btn {
|
|
width: 133.33rpx;
|
|
line-height: 50.67rpx;
|
|
background-image: url('https://static.ticket.sz-trip.com/tourist/daoyou/btnBg.png');
|
|
background-size: 100% 100%;
|
|
text-align: center;
|
|
font-weight: 500;
|
|
font-size: 31rpx;
|
|
color: #FFFFFF;
|
|
}
|
|
}
|
|
.sku-item:nth-child(n+2) {
|
|
border-top: 1rpx solid #D8D8D8;
|
|
}
|
|
}
|
|
</style>
|