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.
1297 lines
30 KiB
1297 lines
30 KiB
<template>
|
|
<view class="bg" v-if="info">
|
|
<view class="swipe-box">
|
|
<swiper class="swiper" :autoplay="true" :interval="3000" :duration="1000"
|
|
@change="swiperChange" circular>
|
|
<swiper-item v-for="(item, index) in info.listimg" :key="item.id">
|
|
<view class="swiper-item">
|
|
<image class="item-img" :src="showImg(item)" mode="aspectFill"></image>
|
|
</view>
|
|
</swiper-item>
|
|
</swiper>
|
|
|
|
<view class="swiper-pointer">
|
|
<view :class="['cricle',swiperCurrent==i?'active':'']" v-for="(item,i) in info.listimg" :key="i"></view>
|
|
</view>
|
|
</view>
|
|
|
|
<view class="detail-container">
|
|
<!-- 景点信息 -->
|
|
<view class="common-container info-container">
|
|
<view class="flex-between">
|
|
<view class="info-title text-overflowRows">{{info.title}}</view>
|
|
</view>
|
|
<view class="tags flex text-overflow" style="overflow: hidden" v-if="info.display_tags">
|
|
<view class="tag" v-for="(tagItem, tagIndex) in info.display_tags.split(',').slice(0, 2)"
|
|
:key="tagIndex">
|
|
<text>{{ tagItem }}</text>
|
|
<view class="tip"></view>
|
|
</view>
|
|
</view>
|
|
|
|
<view class="flex" style="margin: 30rpx 0;">
|
|
<text class="flex-shrink-0">开园时间：</text>
|
|
<text class="flex-1 w-1rpx">{{info.open_time}}</text>
|
|
</view>
|
|
|
|
<view class="flex-between" style="align-items: flex-start;">
|
|
<view class="flex flex-1 w-1rpx">
|
|
<text class="flex-shrink-0">地址：</text>
|
|
<text class="flex-1 w-1rpx">{{info.address}}</text>
|
|
</view>
|
|
<view @click="goMap" class="flex-shrink-0">
|
|
<img style="width: 34.67rpx;height: 34.67rpx;" src="https://static.ticket.sz-trip.com/uploads/20250610/aefe5ce619ba00f6f1906d229effd686.png">
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<!-- sku -->
|
|
<view class="w-full flex" style="margin-bottom: 20rpx;" v-if="sku.length>0">
|
|
<scroll-view class="left-container no-scrollbar" scroll-y scroll-with-animation>
|
|
<view :class="['type-item',current ==i?'active':'']"
|
|
v-for="(item,i) in sku" :key="i" @click="changeType(item,i)">
|
|
{{item.title}}
|
|
</view>
|
|
</scroll-view>
|
|
|
|
<scroll-view :scroll-top="scrollHeight" @scroll="skuScroll" @scrolltoupper="scrollSpecial('up')" @scrolltolower="scrollSpecial('low')"
|
|
class="right-container no-scrollbar" scroll-y scroll-with-animation>
|
|
<view style="height: 20rpx;" ></view>
|
|
<view class="scenic-list scenic-query-item" v-for="(item, index) in sku" :key="index">
|
|
<view class="scenic-title">{{item.title}}</view>
|
|
<view class="scenic-item " v-for="(itemSku, indexSku) in item.sku" :key="indexSku">
|
|
<view class="title text-overflow">{{ itemSku.sku_name }}</view>
|
|
<view class="flex flex-1 h-1rpx flex-between">
|
|
<view class="w-1rpx flex-1">
|
|
<view class="tags-box">
|
|
<view class="tags text-overflow" v-if="itemSku.display_tags">
|
|
{{ itemSku.display_tags.split(',').join(" | ") }}
|
|
</view>
|
|
</view>
|
|
|
|
<view style="color: #FF944C;" class="notice" @click="showSkuInfo(itemSku, item)">
|
|
预订须知 >>
|
|
</view>
|
|
</view>
|
|
<view class="item-right flex-shrink-0">
|
|
<view class="price">{{showNoPriceNew(itemSku.price)}}</view>
|
|
<view class="btn" @click="changeSku(itemSku, item)">预订</view>
|
|
</view>
|
|
</view>
|
|
|
|
</view>
|
|
</view>
|
|
<view style="height: 20rpx;"></view>
|
|
</scroll-view>
|
|
|
|
</view>
|
|
<!-- 优待政策 | 景点介绍 -->
|
|
<view class="common-container" style="padding: 30rpx 20rpx;background: white;">
|
|
<view class="box-title">优待政策<text class="box-title-line"></text>景点介绍</view>
|
|
<view class="box-content">
|
|
<view class="sm-box-title" style="padding-top: 0;">优待政策</view>
|
|
<view class="" v-html="formateRichText(info.extra_info)"></view>
|
|
<view class="sm-box-title">景点介绍</view>
|
|
<view class="" v-html="formateRichText(info.content)"></view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<!-- 底部按钮 -->
|
|
<view class="btn-box flex-center">
|
|
<view class="icon-container">
|
|
<view class="icon-item">
|
|
<image src="https://static.ticket.sz-trip.com/uploads/20250611/627d67e48ac41903c40c31f1613f2444.png"></image>
|
|
<text>客服</text>
|
|
</view>
|
|
</view>
|
|
<view class="btn" @click="showCartPopup">加入购物车</view>
|
|
</view>
|
|
<!-- 购物车图标 -->
|
|
<view class="add-cart-icon" @click="goCartPage()">
|
|
<uni-badge class="uni-badge-left-margin" :text="cartNum" absolute="rightTop" :offset="[-3, -3]" size="small"
|
|
:custom-style="{background:'#DC2525',color:'#ffffff'}">
|
|
<image src="https://static.ticket.sz-trip.com/uploads/20250611/f8c2078ad76754a0b0251f9b65784dc2.png"></image>
|
|
</uni-badge>
|
|
</view>
|
|
|
|
<!-- 预订须知的弹窗 -->
|
|
<uni-popup ref="popupRule" type="bottom" :safe-area="false">
|
|
<view class="popup-content-date flex-column flex" v-if="skuInfo">
|
|
<view class="popup-content-title flex">
|
|
<view class="flex-1 w-1rpx text-overflow">
|
|
{{skuInfo.sku_name}}
|
|
</view>
|
|
<img src="https://static.ticket.sz-trip.com/taizhou/images/cha.png"
|
|
@click="closePopupRule"
|
|
style="width: 20rpx;height: 20rpx;" class="flex-shrink-0">
|
|
</view>
|
|
<view class="content flex-1 h-1rpx no-scrollbar" >
|
|
<view v-if="skuInfo.sku_model" class="detail-content" v-html="formateRichText(skuInfo.sku_model.bookinfo)"></view>
|
|
</view>
|
|
</view>
|
|
</uni-popup>
|
|
|
|
<!-- 预定弹窗 -->
|
|
<uni-popup ref="popup" type="bottom" :safe-area="false">
|
|
<view class="popup-content-date" v-if="skuInfo">
|
|
<view class="popup-content-title flex">
|
|
<view class="flex-1 w-1rpx text-overflow">
|
|
{{skuInfo.sku_name}}
|
|
</view>
|
|
<img src="https://static.ticket.sz-trip.com/taizhou/images/cha.png" @click="closePopup"
|
|
style="width: 31rpx;height: 31rpx;" class="flex-shrink-0">
|
|
</view>
|
|
<view class="order-popup-detail">
|
|
<view style="position: relative;">
|
|
<view class="sku-title">使用日期</view>
|
|
<view class="date-content">
|
|
<view :class="['item', item.stock>0?'':'disabled',seldDateIndex===index?'active':'']"
|
|
v-for="(item,index) in allSeldDate" :key="index"
|
|
@click="clickTab(item,index)">
|
|
<view>{{ShowDateDay(new Date(item.date).getDay())}}</view>
|
|
<view>{{item.date.slice(-5)}}</view>
|
|
<view class="price" v-if="item.stock > 0">￥{{showNoPriceNew(item.price)}}</view>
|
|
<view v-else>不可定</view>
|
|
</view>
|
|
</view>
|
|
<view class="dateMore" @click="openCalendar">
|
|
<view style="width: 55rpx;">更多日期</view>
|
|
<view style="padding-left: 9rpx;">></view>
|
|
</view>
|
|
</view>
|
|
|
|
<view v-if="timesArr.length > 0 && skuInfo.sku_model&& skuInfo.sku_model.is_time_stock">
|
|
<view class="sku-title">选择场次</view>
|
|
<view class="time-box">
|
|
<view v-for="(item,index) in timesArr" :key="index"
|
|
:class="['time-item',{'time-disable': item.stock_number < 1, 'time-active': item.stock_number > 0 && index == seldTimeIndex}]"
|
|
@click="changeTime(item,index)">
|
|
{{ item.start_time }}-{{ item.end_time }}
|
|
{{item.stock_number < 10 ? (item.stock_number === -1 ? '不可定' : item.stock_number === 0 ? '无票' : '(余票' + item.stock_number + ')') : '有票'}}
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class="sku-bottom">
|
|
<view class="flex" style="align-items: baseline;">
|
|
合计：<view class="bottom-price">{{allSeldDate[seldDateIndex].price / 100 || 0}}</view>
|
|
</view>
|
|
<view class="bottom-btn" @click="order">
|
|
下一步
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
</uni-popup>
|
|
|
|
<uni-popup ref="popupCart" type="bottom" :safe-area="false" style="position: relative;z-index: 50;">
|
|
<view class="popup-content" v-if="trueSku.length>0">
|
|
<view style="padding: 0rpx 39rpx 50rpx 39rpx;">
|
|
<view @click="closeCartPopup" style="padding: 31rpx 0 0 639rpx;width: 50rpx;height: 80rpx;">
|
|
<uni-icons type="closeempty" size="24"></uni-icons>
|
|
</view>
|
|
<view class="bottom-productImg">
|
|
<img :src="showImg(trueSku[productIndex].headimg)" alt="">
|
|
<view class="right-content">
|
|
<view class="bottom-productPrice com-price">{{(trueSku[productIndex].price||0)/100}}</view>
|
|
<view class="bottom-content">已选择：{{trueSku[productIndex].sku_name}}</view>
|
|
</view>
|
|
</view>
|
|
<view>
|
|
<view class="sp">规格</view>
|
|
<view class="sp-container" style="">
|
|
<view style="position:relative;" v-for="(botItem,botIndex) in trueSku" :key="botIndex">
|
|
<view :class="['botProduct','text-overflow',{'noStore':botItem.store==0},{'botProducts':productIndex==botIndex}]"
|
|
@click="changeProduct(botItem,botIndex)">
|
|
{{botItem.sku_name}}
|
|
</view>
|
|
<view class="noStore-text" v-if="botItem.store==0">
|
|
不可购买
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class="buy-num com-flex-tao">
|
|
数量
|
|
<view class="number-btn">
|
|
<view>
|
|
<text @click="delNumber">-</text>
|
|
</view>
|
|
<view style="width: 96rpx;height: 69rpx;margin: 0 14rpx;">{{ buyNum }}</view>
|
|
<view>
|
|
<text @click="addNumber">+</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class="sp-bottom-btn">
|
|
<view class="btn" @click="addToCart">加入购物车</view>
|
|
</view>
|
|
</view>
|
|
</uni-popup>
|
|
|
|
<uni-calendar ref="calendar" class="uni-calendar--hook" :clear-date="true"
|
|
:date="allSeldDate[seldDateIndex].date" :insert="false" :startDate="calendarParam.startDate"
|
|
:endDate="calendarParam.endDate" @confirm="confirmCalendar" :selected="calendarParam.selected"/>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
data() {
|
|
return {
|
|
cartNum: 0,
|
|
headImg: null,
|
|
swiperCurrent: 0,
|
|
|
|
id: null,
|
|
info: null,
|
|
sku: [],
|
|
current: 0, // sku 选中的index
|
|
scrollHeight: 0, // sku滚动高度
|
|
skuDoms: [], // 节点Dom 做缓存
|
|
|
|
skuInfo: {}, // 预定门票
|
|
selectGoods: {}, // 预定的商品
|
|
minSeldDate: new Date().Format('yyyy-MM-dd'),
|
|
maxSeldDate: new Date((new Date()).getFullYear(), (new Date()).getMonth() + 1, 0).Format('yyyy-MM-dd'),
|
|
allSeldDate: [],
|
|
seldDateIndex: 0,
|
|
timesArr: [],
|
|
seldTimeIndex: -1,
|
|
calendarParam: {
|
|
stratDate:'',endDate: '', selected: []
|
|
},
|
|
|
|
trueSku: [],
|
|
productIndex: 0,
|
|
buyNum: 1,
|
|
|
|
}
|
|
},
|
|
onShow(options) {
|
|
|
|
},
|
|
onLoad(options) {
|
|
this.skuDoms = []
|
|
this.id = options.id;
|
|
this.getInfo();
|
|
this.getCartList()
|
|
// this.getGoodsList()
|
|
},
|
|
methods: {
|
|
swiperChange (e) {
|
|
this.swiperCurrent = e.detail.current
|
|
},
|
|
// 获取景点信息
|
|
getInfo() {
|
|
this.Post({id: this.id},'/api/scene/detail').then(res => {
|
|
this.info = res.data
|
|
this.sku = this.info.product || []
|
|
|
|
let trueSku = []
|
|
this.sku.forEach(v=>{
|
|
trueSku = trueSku.concat(v.sku)
|
|
})
|
|
this.trueSku = trueSku
|
|
|
|
if (this.info.title) {
|
|
uni.setNavigationBarTitle({
|
|
title: this.info.title
|
|
})
|
|
}
|
|
});
|
|
},
|
|
|
|
goMap () {
|
|
if (!this.info.lat || !this.info.lon) {
|
|
uni.showToast({
|
|
title: '暂未配置地理位置',
|
|
icon: 'none'
|
|
})
|
|
return
|
|
}
|
|
|
|
uni.openLocation({
|
|
latitude: Number(this.info.lat),
|
|
longitude: Number(this.info.lon),
|
|
name: this.info.title,
|
|
address: this.info.address,
|
|
success: function () {
|
|
console.log('success');
|
|
}
|
|
});
|
|
},
|
|
|
|
// ----------滚动联动-------------------
|
|
changeType (item,index) {
|
|
let that = this
|
|
if (Array.isArray(this.skuDoms) && this.skuDoms.length>0) {
|
|
console.log('进入暂存数据')
|
|
try {
|
|
let res = this.skuDoms
|
|
let target0 = res[0][0]
|
|
let targetDom = res[0][index]
|
|
let scrollTop = that.scrollHeight
|
|
console.log(targetDom)
|
|
if (target0&&targetDom) {
|
|
scrollTop = targetDom.top - target0.top // title高度87
|
|
}
|
|
console.log(scrollTop)
|
|
that.current = index
|
|
that.scrollHeight = scrollTop
|
|
} catch(e) {
|
|
console.log(e)
|
|
}
|
|
} else {
|
|
const query = uni.createSelectorQuery(); //创建节点查询器
|
|
query.selectAll(".scenic-query-item").boundingClientRect(); //选择toViewid获取位置信息
|
|
query.exec(function (res) {
|
|
try {
|
|
let target0 = res[0][0]
|
|
let targetDom = res[0][index]
|
|
let scrollTop = that.scrollHeight
|
|
console.log(targetDom)
|
|
|
|
if (target0&&targetDom) {
|
|
scrollTop = targetDom.top - target0.top // title高度87
|
|
}
|
|
that.current = index
|
|
that.scrollHeight = scrollTop
|
|
that.skuDoms = res
|
|
} catch(e) {
|
|
console.log(e)
|
|
}
|
|
});
|
|
|
|
}
|
|
|
|
},
|
|
skuScroll (e) {
|
|
let that = this
|
|
let domSctollTop = e.detail.scrollTop
|
|
if (Array.isArray(this.skuDoms) && this.skuDoms.length>0) {
|
|
console.log('进入暂存数据')
|
|
try {
|
|
let res = this.skuDoms
|
|
let target0 = res[0][0]
|
|
let topHeightArr = []
|
|
res[0].forEach(v=>{
|
|
topHeightArr.push(v.top - target0.top)
|
|
})
|
|
|
|
// 找到第一个大于domSctollTop的下标再-1 如果返回-1 就是最后一个
|
|
// 预留50px
|
|
let findIndex = topHeightArr.findIndex(v=>v-50>=domSctollTop)
|
|
if (findIndex<0) {
|
|
findIndex = topHeightArr.length-1
|
|
} else if(findIndex>=1) {
|
|
findIndex--
|
|
}
|
|
that.current = findIndex
|
|
} catch(e) {
|
|
console.log(e)
|
|
}
|
|
} else {
|
|
const query = wx.createSelectorQuery(); //创建节点查询器
|
|
query.selectAll(".scenic-query-item").boundingClientRect() //选择toViewid获取位置信息
|
|
query.exec(function (res) {
|
|
try {
|
|
let target0 = res[0][0]
|
|
let topHeightArr = []
|
|
res[0].forEach(v=>{
|
|
topHeightArr.push(v.top - target0.top)
|
|
})
|
|
// 找到第一个大于domSctollTop的下标再-1 如果返回-1 就是最后一个
|
|
// 预留50px
|
|
let findIndex = topHeightArr.findIndex(v=>v-50>=domSctollTop)
|
|
if (findIndex<0) {
|
|
findIndex = topHeightArr.length-1
|
|
} else if(findIndex>=1) {
|
|
findIndex--
|
|
}
|
|
that.current = findIndex
|
|
that.skuDoms = res
|
|
} catch(e) {
|
|
console.log(e)
|
|
}
|
|
})
|
|
}
|
|
},
|
|
scrollSpecial (type) {
|
|
if (type == 'up') {
|
|
this.current = 0
|
|
} else {
|
|
let length = this.sku.length-1
|
|
length = length>0?length:0
|
|
this.current = length
|
|
}
|
|
},
|
|
//-----------------------------------------
|
|
|
|
// 预定须知
|
|
showSkuInfo (itemSku,goods) {
|
|
this.skuInfo = itemSku
|
|
this.selectGoods = goods
|
|
console.log(itemSku,goods)
|
|
this.openPopRule()
|
|
},
|
|
|
|
// 预定选择日期分时
|
|
changeSku(itemSku,goods) {
|
|
this.skuInfo = itemSku
|
|
this.selectGoods = goods
|
|
this.getPriceCal(itemSku,goods)
|
|
},
|
|
// 获取价格日历列表
|
|
getPriceCal(itemSku,goods) {
|
|
this.Post({
|
|
start_date: this.minSeldDate,
|
|
end_date: this.maxSeldDate,
|
|
sku_id: itemSku.id
|
|
}, '/api/product/product_date_price').then(res => {
|
|
this.allSeldDate = res.data || []
|
|
this.seldDateIndex = this.allSeldDate.findIndex(item => item.stock > 0)
|
|
this.getTimeStock(this.allSeldDate[this.seldDateIndex].date)
|
|
this.openPop()
|
|
})
|
|
},
|
|
openCalendar () {
|
|
this.calendarParam = {
|
|
startDate: (this.allSeldDate.find(v=>v.stock>0) || {}).date,
|
|
endDate: (this.allSeldDate[this.allSeldDate.findLastIndex(v=>v.stock>0)]||{}).date,
|
|
selected: this.allSeldDate.filter(v=>v.stock>0).map(v=>{
|
|
return {
|
|
date: v.date,
|
|
info: '￥'+this.showNoPriceNew(v.price),
|
|
notNeedDot:true,
|
|
}
|
|
})
|
|
}
|
|
this.$refs.calendar.open();
|
|
},
|
|
|
|
|
|
// 获取规格分时库存
|
|
getTimeStock(date) {
|
|
if (!this.skuInfo.sku_model.is_time_stock || this.seldDateIndex<0) {
|
|
return
|
|
}
|
|
this.Post({
|
|
sku_id: this.skuInfo.id,
|
|
date: date,
|
|
}, '/api/product/product_timestock_price').then(res => {
|
|
if (Array.isArray(res.data)) {
|
|
this.timesArr = res.data || []
|
|
this.seldTimeIndex = -1
|
|
}
|
|
if (res.data.length > 0) {
|
|
this.seldTimeIndex = this.timesArr.findIndex(item => item.stock_number > 0)
|
|
}
|
|
})
|
|
},
|
|
|
|
|
|
// 选择日期
|
|
clickTab(item, index) {
|
|
if (item.stock>0) {
|
|
this.seldDateIndex = index
|
|
this.getTimeStock(item.date)
|
|
}
|
|
|
|
},
|
|
// 选择时段
|
|
changeTime(item, index) {
|
|
if(item.stock_number > 0) {
|
|
this.seldTimeIndex = index
|
|
}
|
|
},
|
|
|
|
confirmCalendar (val) {
|
|
let index = this.allSeldDate.findIndex(v=>v.date == val.fulldate)
|
|
if (index>=0) {
|
|
this.clickTab(this.allSeldDate[index],index)
|
|
}
|
|
},
|
|
|
|
// 购物车
|
|
getCartList () {
|
|
this.Post({},'/api/cart/get_list').then(res=>{
|
|
this.cartNum = (res.data || []).length
|
|
})
|
|
},
|
|
|
|
showCartPopup () {
|
|
this.$refs.popupCart.open()
|
|
},
|
|
closeCartPopup () {
|
|
this.$refs.popupCart.close()
|
|
},
|
|
changeProduct(item,index) {
|
|
if (item.store==0) {
|
|
uni.showToast({
|
|
title:"库存不足！",
|
|
icon:'none'
|
|
})
|
|
return
|
|
}
|
|
this.productIndex = index
|
|
},
|
|
//数量加减
|
|
addNumber() {
|
|
this.buyNum += 1;
|
|
},
|
|
delNumber() {
|
|
if (this.buyNum <= 1) {
|
|
return;
|
|
}
|
|
this.buyNum -= 1;
|
|
},
|
|
addToCart () {
|
|
let goods = this.trueSku[this.productIndex]
|
|
goods.buyNum = this.buyNum
|
|
this.Post({sku_id: goods.id,num: this.buyNum },'/api/cart/add_sku').then(res => {
|
|
if (res.code == 1) {
|
|
// uni.$emit("updateDataByConnect", {msgType:'updateCartDataInfo',data:null})
|
|
this.closeCartPopup()
|
|
// this.$refs.cartDataVueRef.openPop()
|
|
this.getCartList()
|
|
}
|
|
});
|
|
},
|
|
//-----------------------------
|
|
|
|
order() {
|
|
let that = this;
|
|
// 如果是分时，未选择分时
|
|
console.log(this.skuInfo)
|
|
if(that.skuInfo.is_time_stock && that.seldTimeIndex < 0) {
|
|
uni.showToast({title:'请选择分时',icon:'none'})
|
|
return;
|
|
}
|
|
|
|
let param = [{
|
|
sInfo: {...this.skuInfo, buyNum: 1},
|
|
pInfo: {id:this.selectGoods.id, type:this.selectGoods.type,title:this.selectGoods.title},
|
|
allSeldDate: this.allSeldDate,
|
|
seldDateIndex: this.seldDateIndex,
|
|
timesArr: this.timesArr,
|
|
seldTimeIndex: this.seldTimeIndex,
|
|
}];
|
|
|
|
console.log(param)
|
|
|
|
this.$store.commit("changeTicketOrderList", param);
|
|
|
|
uni.navigateTo({
|
|
url:'/subPackages/ticket/order',
|
|
})
|
|
},
|
|
|
|
closePopup() {
|
|
this.$refs.popup.close()
|
|
},
|
|
openPop(){
|
|
this.$refs.popup.open()
|
|
},
|
|
closePopupRule() {
|
|
this.$refs.popupRule.close()
|
|
},
|
|
openPopRule(){
|
|
this.$refs.popupRule.open()
|
|
},
|
|
// 价格格式
|
|
showNoPriceNew(price) {
|
|
if (price && price > 0) {
|
|
return (price / 100)
|
|
} else {
|
|
return '0'
|
|
}
|
|
},
|
|
|
|
|
|
|
|
getTime(time) {
|
|
let m = parseInt(time / 60);
|
|
let s = time % 60;
|
|
return this.towNum(m) + ':' + this.towNum(s);
|
|
},
|
|
towNum(num) {
|
|
if(num >= 10) {
|
|
return num;
|
|
}else {
|
|
return '0' + num;
|
|
}
|
|
},
|
|
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
*{
|
|
box-sizing: border-box;
|
|
}
|
|
::-webkit-scrollbar {
|
|
display: none;
|
|
width: 0 !important;
|
|
height: 0 !important;
|
|
-webkit-appearance: none;
|
|
background: transparent;
|
|
}
|
|
.bg{
|
|
min-height: 100vh;
|
|
background: #F8F8F8;
|
|
}
|
|
|
|
.swipe-box {
|
|
height: 413rpx;
|
|
position: relative;
|
|
.swiper {
|
|
height: 413rpx;
|
|
position: relative;
|
|
|
|
.swiper-item {
|
|
width: 100%;
|
|
height: 413rpx;
|
|
|
|
.item-img {
|
|
width: 750rpx;
|
|
height: 413rpx;
|
|
}
|
|
}
|
|
}
|
|
|
|
.swiper-pointer{
|
|
position: absolute;
|
|
right: 10rpx;
|
|
bottom: 40rpx;
|
|
display: flex;
|
|
}
|
|
.cricle{
|
|
width: 14rpx;
|
|
height: 14rpx;
|
|
background: rgba(255,255,255,0.3);
|
|
border-radius: 50%;
|
|
margin-left: 10rpx;
|
|
}
|
|
.cricle.active{
|
|
background: white;
|
|
}
|
|
}
|
|
|
|
.detail-container{
|
|
width: 100%;
|
|
z-index: 2;
|
|
padding: 26rpx 0;
|
|
position: relative;
|
|
top: -52rpx;
|
|
}
|
|
|
|
.common-container{
|
|
background: white;
|
|
border-radius: 20rpx;
|
|
margin-bottom: 20rpx;
|
|
padding: 22rpx 26rpx;
|
|
}
|
|
|
|
.info-container{
|
|
font-family: PingFang;
|
|
font-weight: 500;
|
|
font-size: 27rpx;
|
|
color: #666;
|
|
.info-title{
|
|
width: 100%;
|
|
font-family: PingFang SC;
|
|
font-size: 33rpx;
|
|
height: 80rpx;
|
|
font-weight: bold;
|
|
color: #000;
|
|
}
|
|
|
|
.tags .tag {
|
|
margin-right: 20rpx;
|
|
font-size: 24rpx;
|
|
color: #6A8A27;
|
|
display: inline-block;
|
|
position: relative;
|
|
.tip{
|
|
position: absolute;
|
|
left: 0;
|
|
bottom: 0rpx;
|
|
width: 100%;
|
|
background: #EFF7DF;
|
|
height: 8rpx;
|
|
z-index: 2;
|
|
}
|
|
text{
|
|
position: relative;
|
|
z-index: 5;
|
|
}
|
|
|
|
}
|
|
}
|
|
|
|
.left-container{
|
|
width: 147rpx;
|
|
flex-shrink: 0;
|
|
.type-item{
|
|
font-weight: 500;
|
|
font-size: 24rpx;
|
|
color: #000000;
|
|
width: 100%;
|
|
height: 133rpx;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
text-align: center;
|
|
}
|
|
.type-item.active{
|
|
font-weight: bold;
|
|
font-size: 24rpx;
|
|
color: #6A8A27;
|
|
background: #FFFFFF;
|
|
}
|
|
}
|
|
.right-container{
|
|
flex: 1;
|
|
width: 1rpx;
|
|
background: white;
|
|
max-height: 1000rpx;
|
|
}
|
|
|
|
|
|
.box-title {
|
|
font-weight: bold;
|
|
font-size: 35rpx;
|
|
padding-bottom: 20rpx;
|
|
border-bottom: 1px solid #D9D9D9;
|
|
display: flex;
|
|
align-items: center;
|
|
.box-title-line{
|
|
width: 2rpx;
|
|
height: 23rpx;
|
|
background: #000;
|
|
margin: 0 20rpx;
|
|
}
|
|
}
|
|
.box-content{
|
|
padding-top: 22rpx;
|
|
.sm-box-title{
|
|
font-weight: bold;
|
|
font-size: 29rpx;
|
|
color: #000000;
|
|
padding: 58rpx 0 25rpx;
|
|
}
|
|
}
|
|
|
|
.scenic-list{
|
|
padding: 10rpx 10rpx 0;
|
|
.scenic-title{
|
|
font-weight: bold;
|
|
font-size: 35rpx;
|
|
color: #000000;
|
|
padding-bottom: 20rpx;
|
|
}
|
|
.scenic-item {
|
|
width: 100%;
|
|
height: 187rpx;
|
|
background: rgba(239, 247, 223, 0.5);
|
|
border-radius: 13rpx;
|
|
margin-bottom: 20rpx;
|
|
padding: 19rpx 22rpx 10rpx;
|
|
display: flex;
|
|
font-family: PingFang SC;
|
|
font-weight: 500;
|
|
font-size: 23rpx;
|
|
color: #666666;
|
|
flex-direction: column;
|
|
justify-content: space-between;
|
|
|
|
.title {
|
|
width: 100%;
|
|
font-family: PingFang SC;
|
|
font-weight: 500;
|
|
font-size: 31rpx;
|
|
color: #000000;
|
|
}
|
|
.tags-box {
|
|
overflow: hidden;
|
|
padding-bottom: 17rpx;
|
|
padding-left: 6rpx;
|
|
font-weight: 500;
|
|
font-size: 23rpx;
|
|
color: #666666;
|
|
}
|
|
.item-right {
|
|
flex-shrink: 0;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
}
|
|
.price {
|
|
font-family: PingFangSC;
|
|
font-weight: 500;
|
|
font-size: 36rpx;
|
|
color: #D62828;
|
|
font-weight: bold;
|
|
&::before {
|
|
display: inline-block;
|
|
content: "￥";
|
|
font-size: 24rpx;
|
|
}
|
|
}
|
|
|
|
|
|
.btn {
|
|
width: 93rpx;
|
|
height: 80rpx;
|
|
background: #6A8A27;
|
|
border-radius: 13rpx;
|
|
text-align: center;
|
|
line-height: 80rpx;
|
|
font-weight: 500;
|
|
font-size: 31rpx;
|
|
color: #FFFFFF;
|
|
margin-left: 12rpx;
|
|
}
|
|
}
|
|
}
|
|
|
|
.btn-box {
|
|
width: 750rpx;
|
|
height: 133rpx;
|
|
background: #FFFFFF;
|
|
box-shadow: 0rpx 0rpx 16rpx 0rpx rgba(6,0,1,0.1);
|
|
position: fixed;
|
|
left: 0;
|
|
bottom: 0;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
z-index: 10;
|
|
padding: 0 46rpx;
|
|
.icon-container{
|
|
font-weight: 400;
|
|
font-size: 23rpx;
|
|
color: #666666;
|
|
text-align: center;
|
|
.icon-item{
|
|
display: flex;
|
|
align-items: center;
|
|
flex-direction: column;
|
|
width: 44rpx;
|
|
image{
|
|
width: 44rpx;
|
|
height: 42rpx;
|
|
margin-bottom: 8rpx;
|
|
}
|
|
}
|
|
}
|
|
|
|
.btn{
|
|
width: 200rpx;
|
|
height: 60rpx;
|
|
background: #6A8A27;
|
|
border-radius: 11rpx;
|
|
font-weight: 500;
|
|
font-size: 31rpx;
|
|
color: #FFFFFF;
|
|
line-height: 60rpx;
|
|
text-align: center;
|
|
}
|
|
|
|
}
|
|
|
|
.add-cart-icon{
|
|
width: 80rpx;
|
|
height: 80rpx;
|
|
background: #FFFFFF;
|
|
box-shadow: 0rpx 0rpx 20rpx 0rpx rgba(0,0,0,0.2);
|
|
border-radius: 50%;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
position: fixed;
|
|
bottom: 140rpx;
|
|
right: 20rpx;
|
|
z-index: 10;
|
|
image{
|
|
width: 43.33rpx;
|
|
height: 42rpx;
|
|
}
|
|
}
|
|
|
|
.popup-content-date {
|
|
background-color: white;
|
|
padding: 0rpx 28rpx 166rpx;
|
|
height: 70vh;
|
|
border-radius: 20rpx 20rpx 0 0 ;
|
|
.popup-content-title{
|
|
font-family: PingFang SC;
|
|
font-weight: bold;
|
|
font-size: 37rpx;
|
|
color: #000000;
|
|
padding: 39rpx 0;
|
|
display: flex;
|
|
align-items: center;
|
|
border-bottom: 1px solid #CCCCCC;
|
|
}
|
|
// 预定须知
|
|
.content{
|
|
padding-top: 48rpx;
|
|
overflow-y: auto;
|
|
}
|
|
|
|
.order-popup-detail{
|
|
.sku-title{
|
|
padding: 48rpx 0 26rpx;
|
|
font-family: PingFangSC;
|
|
font-weight: 500;
|
|
font-size: 31rpx;
|
|
color: #000000;
|
|
}
|
|
}
|
|
|
|
.dateMore{
|
|
width: 120rpx;
|
|
height: 133rpx;
|
|
background: white;
|
|
border-radius: 10rpx;
|
|
background: #FFFFFF;
|
|
font-family: PingFang SC;
|
|
font-weight: 500;
|
|
font-size: 27rpx;
|
|
color: #6A8A27;
|
|
display: flex;
|
|
flex-direction: row;
|
|
align-items: center;
|
|
justify-content: center;
|
|
flex-shrink: 0;
|
|
padding: 6rpx 0;
|
|
position: absolute;
|
|
bottom: 0;
|
|
right: 0;
|
|
}
|
|
|
|
.date-content{
|
|
width: 100%;
|
|
display: flex;
|
|
overflow-y: auto;
|
|
position: relative;
|
|
padding-right: 140rpx;
|
|
|
|
.item{
|
|
width: 120rpx;
|
|
height: 133rpx;
|
|
border-radius: 10rpx;
|
|
margin-right: 24rpx;
|
|
font-family: PingFang SC;
|
|
font-weight: 500;
|
|
font-size: 27rpx;
|
|
color: #000;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: space-around;
|
|
flex-shrink: 0;
|
|
padding: 6rpx 0;
|
|
background: #F5F5F5;
|
|
}
|
|
.item.active{
|
|
background: #6A8A27;
|
|
color: white;
|
|
.price{color: white;}
|
|
}
|
|
.item.disabled{
|
|
background: #F5F5F5;
|
|
color: #999999;
|
|
}
|
|
|
|
.price{
|
|
color: #EE3E3B;
|
|
}
|
|
|
|
}
|
|
.date-content::-webkit-scrollbar{
|
|
display: none;
|
|
}
|
|
}
|
|
|
|
.time-box {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
flex-wrap: wrap;
|
|
max-height: 340rpx;
|
|
overflow-y: auto;
|
|
|
|
.time-item {
|
|
width: 48%;
|
|
height: 60rpx;
|
|
border-radius: 10rpx;
|
|
text-align: center;
|
|
font-size: 34rpx;
|
|
margin-bottom: 23rpx;
|
|
font-family: PingFangSC;
|
|
font-weight: 400;
|
|
font-size: 25rpx;
|
|
line-height: 58rpx;
|
|
color: #000;
|
|
background: #F5F5F5;
|
|
}
|
|
.time-active {
|
|
background: #6A8A27;
|
|
color: white;
|
|
}
|
|
.time-disable {
|
|
background: #F5F5F5;
|
|
color: #999999;
|
|
}
|
|
}
|
|
|
|
.sku-bottom {
|
|
width: 100%;
|
|
height: 166rpx;
|
|
background: #FFFFFF;
|
|
box-shadow: 0rpx -3rpx 8rpx 0rpx rgba(71,71,71,0.1);
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
box-sizing: border-box;
|
|
padding: 50rpx 50rpx 85rpx;
|
|
font-family: PingFang SC;
|
|
font-weight: 500;
|
|
font-size: 28rpx;
|
|
color: #393B3E;
|
|
position: absolute;
|
|
bottom: 0;
|
|
left: 0;
|
|
right: 0;
|
|
|
|
.bottom-price {
|
|
font-size: 48rpx;
|
|
font-weight: bold;
|
|
color: #D62828;
|
|
}
|
|
.bottom-price::before {
|
|
font-size: 24rpx;
|
|
content: '￥';
|
|
}
|
|
|
|
.bottom-btn {
|
|
width: 250rpx;
|
|
height: 80rpx;
|
|
background: #6A8A27;
|
|
border-radius: 11rpx;
|
|
font-weight: bold;
|
|
font-size: 32rpx;
|
|
text-align: center;
|
|
color: #FFFFFF;
|
|
line-height: 80rpx;
|
|
}
|
|
}
|
|
|
|
::v-deep .uni-calendar-item--extra{
|
|
color: #EE3E3B !important;
|
|
}
|
|
::v-deep .uni-calendar-item--isDay{
|
|
background: #6A8A27 !important;
|
|
border-radius: 50%;
|
|
|
|
.uni-calendar-item--extra{
|
|
color: white !important;
|
|
}
|
|
}
|
|
|
|
::v-deep .uni-calendar-item--checked{
|
|
background: #6A8A27 !important;
|
|
border-radius: 50%;
|
|
|
|
.uni-calendar-item--extra{
|
|
color: white !important;
|
|
}
|
|
}
|
|
|
|
.popup-content {
|
|
background-color: white;
|
|
height: auto;
|
|
border-radius: 20rpx 20rpx 0 0;
|
|
|
|
.bottom-productImg {
|
|
display: flex;
|
|
margin-bottom: 23rpx;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.bottom-productImg img {
|
|
width: 218rpx;
|
|
height: 179rpx;
|
|
background: #666666;
|
|
border-radius: 13rpx;
|
|
}
|
|
|
|
.right-content {
|
|
margin: 10rpx 0 0 41rpx;
|
|
flex: 1;
|
|
width: 1rpx;
|
|
}
|
|
|
|
.bottom-productPrice {
|
|
font-size: 40rpx;
|
|
color: #FC524B;
|
|
|
|
&:before {
|
|
content: "￥";
|
|
font-size: 26rpx;
|
|
}
|
|
}
|
|
|
|
.bottom-content {
|
|
width: 100%;
|
|
font-size: 27rpx;
|
|
font-family: PingFang SC;
|
|
font-weight: 400;
|
|
color: #666666;
|
|
}
|
|
|
|
.botProduct {
|
|
width: 320rpx;
|
|
// height: 78rpx;
|
|
border-radius: 13rpx;
|
|
background-color: #F5F5F5;
|
|
font-size: 29rpx;
|
|
font-family: PingFang SC;
|
|
font-weight: 400;
|
|
color: #333333;
|
|
line-height: 78rpx;
|
|
text-align: center;
|
|
margin-bottom: 25rpx;
|
|
display: inline-block;
|
|
position: relative;
|
|
padding: 0 40rpx;
|
|
}
|
|
.noStore{
|
|
background-color: rgba(239, 239, 239, 1);
|
|
color: rgba(153, 153, 153, 1);
|
|
}
|
|
.noStore-text{
|
|
width: 113rpx;
|
|
height: 43rpx;
|
|
background: #C0C0C0;
|
|
border-radius: 7rpx 0rpx 7rpx 0rpx;
|
|
text-align: center;
|
|
line-height: 43rpx;
|
|
position: absolute;
|
|
right: -14rpx;
|
|
top: -20rpx;
|
|
font-size: 23rpx;
|
|
font-family: PingFangSC;
|
|
font-weight: 400;
|
|
color: #FFFFFF;
|
|
}
|
|
|
|
|
|
.botProducts {
|
|
background: #6A8A27;
|
|
color: #FFFFFF;
|
|
}
|
|
|
|
.buy-num {
|
|
font-size: 29rpx;
|
|
font-family: PingFang SC;
|
|
font-weight: 400;
|
|
color: #333333;
|
|
padding: 39rpx 0;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
}
|
|
|
|
.buy-num .number-btn {
|
|
display: flex;
|
|
}
|
|
|
|
.buy-num .number-btn view {
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
width: 69rpx;
|
|
height: 69rpx;
|
|
border: 1rpx solid #CCCCCC;
|
|
border-radius: 7rpx;
|
|
}
|
|
|
|
.buy-num .number-btn>view text {
|
|
font-size: 46rpx;
|
|
}
|
|
|
|
.buy-btn {
|
|
width: 670rpx;
|
|
height: 78rpx;
|
|
text-align: center;
|
|
line-height: 78rpx;
|
|
background: linear-gradient(90deg, #F84A56, #FF9834);
|
|
border-radius: 40rpx;
|
|
|
|
font-size: 34rpx;
|
|
font-family: PingFangSC;
|
|
font-weight: 500;
|
|
color: #FFFFFF;
|
|
}
|
|
|
|
.btn-box {
|
|
width: 750rpx;
|
|
height: 151rpx;
|
|
background: #FFFFFF;
|
|
box-shadow: 0rpx 0rpx 16rpx 0rpx rgba(6, 0, 1, 0.1);
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
|
|
.sp {
|
|
width: 100%;
|
|
height: 30rpx;
|
|
font-size: 32rpx;
|
|
font-family: PingFangSC;
|
|
font-weight: 400;
|
|
color: #060001;
|
|
line-height: 30rpx;
|
|
border-top: solid 2rpx #ccc;
|
|
margin: 32rpx 0 60rpx;
|
|
padding-top: 30rpx;
|
|
}
|
|
.sp-container{
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
flex-wrap: wrap;
|
|
max-height: 400rpx;
|
|
overflow-y: auto;
|
|
padding-top: 20rpx;
|
|
padding-right: 20rpx;
|
|
overflow-x: hidden;
|
|
}
|
|
.sp-bottom-btn{
|
|
width: 750rpx;
|
|
height: 151rpx;
|
|
background: #FFFFFF;
|
|
box-shadow: 0rpx 0rpx 16rpx 0rpx rgba(6, 0, 1, 0.1);
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
.btn{
|
|
width: 697rpx;
|
|
height: 73rpx;
|
|
background: #6A8A2D;
|
|
border-radius: 11rpx;
|
|
font-weight: bold;
|
|
font-size: 32rpx;
|
|
color: #FFFFFF;
|
|
text-align: center;
|
|
line-height: 73rpx;
|
|
}
|
|
}
|
|
|
|
}
|
|
|
|
</style>
|
|
|