时味苏州
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.
 
 
 
 

1242 lines
29 KiB

<template>
<view class="bg">
<view class="order-goods-container" v-for="(item,i) in orderList" :key="i">
<view class="top-box1" >
<view class="top-left">
<view class="title text-overflow">{{ item.pInfo.title }}</view>
<view>
<view style="padding: 20rpx 0 10rpx;" v-if="item.allSeldDate.length > 0">
{{item.showDate.date}} {{ShowDateDay(new Date(item.showDate.date).getDay())}}</view>
<view v-if="item.showDate.startTime">{{ item.showDate.startTime }}-{{ item.showDate.endTime }} 入园</view>
</view>
</view>
<view class="top-edit" @click="changeSku(item)">修改 <uni-icons style="height: 20rpx;" color="#6A8A27" type="right" size="12"></uni-icons></view>
</view>
<view class="tickets-box">
<view class="w-full num-box">
<view class="flex-between num-left">
<view class="left-title text-overflow">{{item.sInfo.sku_name}}</view>
<view class="left-price">{{item.sInfo.price / 100}}</view>
<view class="num-right">
<view :class="['btn-num',item.sInfo.buyNum<=1?'disabled':'']" @click="delNumber(item.sInfo)" >-</view>
<view class="num-span">{{ item.sInfo.buyNum }}</view>
<view class="btn-num" @click="addNumber(item.sInfo)" >+</view>
</view>
</view>
<view style="padding: 30rpx 0 20rpx;" class="num-subtitle text-overflow" @click="showpopRule(true, item.sInfo)">
<view class="flex" v-if="item.sInfo.display_tags">
{{item.sInfo.display_tags.split(',').join(" | ")}}
<text style="padding:0 4rpx">|</text>
</view>
<view > 预订须知 ></view>
</view>
</view>
</view>
</view>
<view class="people-box" >
<view class="people-box-title">出行人信息</view>
<view style="padding: 42rpx 0 10rpx;">
<view class="people-box-sku">
<view class="w-full flex flex-items-center" style="padding-bottom: 33rpx;font-size: 29rpx;">
<view style="width: 170rpx;" class="flex-shrink-0">联系手机</view>
<view class="flex flex-between flex-1 w-1rpx" >
<input class="input" type="text" placeholder="请输入手机号" v-model="phone" />
<uni-icons v-if="phone&&phone.length>0"
type="closeempty" size="14" @click="clearTel()"></uni-icons>
</view>
</view>
</view>
</view>
</view>
<!-- 优惠券 -->
<view @click="goOrderCoupon" class="tickets-container flex-between top-line" v-if="!isShoppingCart">
<view class="order-title">优惠券</view>
<view class="coupon-btn" v-if="coupon==''">
<view class="select">选择优惠券</view>
<uni-icons style="height: 42rpx;" color="#999999" type="right" size="18"></uni-icons>
</view>
<div class="coupon-price" v-else>
<span v-if="coupon.activity.fold == 0">-¥{{coupon.activity.money/100}}</span>
<span v-else>-{{coupon.activity.fold*10}}%</span>
<span style="margin:0 31rpx 0 8rpx;color: #6C7A94;">></span>
</div>
</view>
<view class="btn-list">
<view class="price-box">
<view class="text">合计:</view>
<view class="price">{{ total() }}</view>
</view>
<view class="btn" @click="order()">去支付</view>
</view>
<!-- 预订须知的弹窗 -->
<uni-popup ref="popupRule" type="bottom" :safe-area="false">
<view class="popup-content-date flex-column flex" >
<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="showpopRule(null)"
style="width: 20rpx;height: 20rpx;" class="flex-shrink-0">
</view>
<view class="content flex-1 h-1rpx no-scrollbar" v-if="skuInfo && skuInfo.sku_model">
<view 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 calendar-edit" v-if="singleOrder.sInfo && singleOrder.sInfo.id">
<view class="popup-content-title flex">
<view class="flex-1 w-1rpx text-overflow">
{{singleOrder.sInfo.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',singleOrder.seldDateIndex===index?'active':'']"
v-for="(item,index) in singleOrder.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">¥{{item.price/100}}</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="singleOrder.timesArr.length > 0 && singleOrder.sInfo.sku_model.is_time_stock">
<view class="sku-title">选择场次</view>
<view class="time-box">
<view v-for="(item,index) in singleOrder.timesArr" :key="index"
:class="['time-item',{'time-disable': item.stock_number < 1, 'time-active': item.stock_number > 0 && index == singleOrder.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">{{singleOrder.allSeldDate[singleOrder.seldDateIndex].price / 100 || 0}}</view>
</view>
<view class="bottom-btn" @click="addBuyCard">
确定
</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 {
components: {},
data() {
return {
// 下单产品
orderList: [],
phone: '',
minSeldDate: new Date().Format('yyyy-MM-dd'),
maxSeldDate: new Date((new Date()).getFullYear(), (new Date()).getMonth() + 1, 0).Format('yyyy-MM-dd'),
calendarParam: {
stratDate:'',endDate: '', selected: []
},
coupon:'',
singleOrderForChange: {}, // 浅拷贝
singleOrder: {}, // 深拷贝修改的数据
skuInfo: {}, // 预定须知当前点击的sku
isShoppingCart: false,
}
},
onLoad(options) {
if (options.isShoppingCart) {
this.isShoppingCart = options.isShoppingCart
}
// this.getList();
this.$store.commit("choseCoupon", "");
this.initPageData()
this.getUserInfo()
},
onShow() {
if (!this.isShoppingCart) {
this.coupon = this.$store.state.user.coupon
}
},
methods: {
goOrderCoupon () {
let allPrice = 0
let skuIds= []
this.orderList.forEach(v=>{
allPrice+= v.sInfo.price*v.sInfo.buyNum
if (v.sInfo.buyNum>0) {
skuIds.push(v.sInfo.id)
}
})
uni.navigateTo({
url: `/subPackages/order/orderCoupon?allprice=${allPrice}&sku_ids=${skuIds.join(',')}`
})
},
// 获取最大优惠券
async getMaxCouponData () {
let allPrice = 0
let skuIds= []
this.orderList.forEach(v=>{
allPrice+= v.sInfo.price*v.sInfo.buyNum
if (v.sInfo.buyNum>0) {
skuIds.push(v.sInfo.id)
}
})
let param = {sku_ids: skuIds.join(','), money: allPrice}
let res = await this.getMaxCoupon(param)
if (res.id) {
this.coupon = res
}
},
initPageData () {
let data = this.$store.state.user.ticketOrderList;
try{
data.forEach(v=>{
v.allSeldDate = v.allSeldDate || [];
v.seldDateIndex = v.seldDateIndex>=0?v.seldDateIndex:-1
v.timesArr = v.timesArr || []
v.seldTimeIndex = v.seldTimeIndex>=0?v.seldTimeIndex:-1
v.showDate = {
date: ((v.allSeldDate[v.seldDateIndex])||{}).date,
startTime: (v.timesArr[v.seldTimeIndex]||{}).start_time,
endTime: (v.timesArr[v.seldTimeIndex]||{}).end_time
}
})
this.orderList = data
console.log(this.orderList)
} catch(e){
console.log(e)
}
if (!this.isShoppingCart) {
this.getMaxCouponData()
}
},
clearTel () {this.phone = ''},
// 减少数量
delNumber(skuItem) {
if (skuItem.buyNum <= 1) {
return
}
skuItem.buyNum -= 1
this.$store.commit("choseCoupon","");
this.coupon = ''
},
// 增加数量
addNumber(skuItem) {
skuItem.buyNum += 1
this.$store.commit("choseCoupon","");
this.coupon = ''
},
// 计算总价
total() {
let price = 0
let allPrice = 0
this.orderList.forEach(v=>{
allPrice+= v.sInfo.price*v.sInfo.buyNum
})
this.allprice = allPrice
if (this.coupon) {
if (this.coupon.activity.fold == 0) {
if (this.coupon.activity.money>allPrice) {
price =0
}else{
price = allPrice - (this.coupon.activity.money)
}
} else{
price = allPrice - allPrice * (this.coupon.activity.fold*10/100)
}
} else {
price = allPrice
}
return price < 0 ? 0 : (price/100).toFixed(2)
},
// 预定须知
showpopRule(flag, item) {
if (item) {
this.skuInfo = item
}
if (flag) {
this.$refs.popupRule.open('bottom');
} else {
this.$refs.popupRule.close();
}
},
/*---------------------------价格日历-----------------------------------*/
// 选择列表规格
changeSku(item) {
this.singleOrderForChange = item
this.singleOrder = JSON.parse(JSON.stringify(item))
// 重新获取分时
this.getPriceCal()
},
// 获取价格日历列表
getPriceCal() {
this.Post({
start_date: this.minSeldDate,
end_date: this.maxSeldDate,
sku_id: this.singleOrder.sInfo.id
}, '/api/product/product_date_price').then(res => {
this.singleOrder.allSeldDate = res.data || []
if (this.singleOrder.seldDateIndex<0) {
this.singleOrder.seldDateIndex = this.singleOrder.allSeldDate.findIndex(item => item.stock > 0)
}
if (this.singleOrder.seldDateIndex) {
uni.showToast({
title: '暂无库存'
})
return
}
this.getTimeStock(this.singleOrder.allSeldDate[this.singleOrder.seldDateIndex].date)
this.openPop()
})
},
// 获取规格分时库存
getTimeStock(date) {
if (!this.singleOrder.sInfo.sku_model.is_time_stock || this.singleOrder.seldDateIndex<0) {
return
}
this.Post({
sku_id: this.singleOrder.sInfo.id,
date: date,
}, '/api/product/product_timestock_price').then(res => {
this.singleOrder.timesArr = res.data || []
if (this.singleOrder.seldTimeIndex<0) {
this.singleOrder.seldTimeIndex = this.singleOrder.timesArr.findIndex(item => item.stock_number > 0)
}
})
},
openCalendar () {
this.calendarParam = {
startDate: (this.singleOrder.allSeldDate.find(v=>v.stock>0) || {}).date,
endDate: (this.singleOrder.allSeldDate[this.singleOrder.allSeldDate.findLastIndex(v=>v.stock>0)]||{}).date,
selected: this.singleOrder.allSeldDate.filter(v=>v.stock>0).map(v=>{
return {
date: v.date,
info: '¥'+v.price/100,
notNeedDot:true,
}
})
}
this.$refs.calendar.open();
},
// 选择日期
clickTab(item, index) {
if (item.stock>0) {
this.singleOrder.seldDateIndex = index
this.getTimeStock(item.date)
}
},
// 选择时段
changeTime(item, index) {
if(item.stock_number > 0) {
this.singleOrder.seldTimeIndex = index
}
},
confirmCalendar (val) {
let index = this.singleOrder.allSeldDate.findIndex(v=>v.date == val.fulldate)
if (index>=0) {
this.clickTab(this.singleOrder.allSeldDate[index],index)
}
},
closePopup() {
this.$refs.popup.close()
},
openPop(){
this.$refs.popup.open()
},
addBuyCard () {
// 如果是分时,未选择分时
if(this.singleOrder.sInfo.is_time_stock && this.singleOrder.seldTimeIndex < 0) {
uni.showToast({title:'请选择分时',icon:'none'})
return;
}
this.singleOrder.showDate = {
date: ((this.singleOrder.allSeldDate[this.singleOrder.seldDateIndex])||{}).date,
startTime: (this.singleOrder.timesArr[this.singleOrder.seldTimeIndex]||{}).start_time,
endTime: (this.singleOrder.timesArr[this.singleOrder.seldTimeIndex]||{}).end_time
}
// 修改原本的数据
this.singleOrderForChange.allSeldDate = this.singleOrder.allSeldDate
this.singleOrderForChange.timesArr = this.singleOrder.timesArr
this.singleOrderForChange.seldDateIndex = this.singleOrder.seldDateIndex
this.singleOrderForChange.seldTimeIndex = this.singleOrder.seldTimeIndex
this.singleOrderForChange.showDate = this.singleOrder.showDate
this.closePopup()
},
/*---------------------------价格日历-----------------------------------*/
order() {
let goods = []
if (this.orderList.some(v=>v.allSeldDate).length<=0) {
uni.showToast({title: '请选择价格日历',icon:'none'})
return
}
if (this.orderList.some(v=>v.sInfo.is_time_stock && v.seldTimeIndex < 0)) {
uni.showToast({title:'请选择分时',icon:'none'})
return;
}
// 设置参数
this.orderList.filter(v=>v.sInfo.buyNum>0).forEach(item=>{
let sku = item.sInfo
let use_date = item.allSeldDate[item.seldDateIndex].date
let start_time =(item.timesArr[item.seldTimeIndex]||{}).start_time
let end_time = (item.timesArr[item.seldTimeIndex]||{}).end_time
let param = {
type: item.pInfo.type,
product_id: item.pInfo.id,
sku_id: sku.id,
product_num: sku.buyNum,
use_date: use_date,
start_time: start_time||'',
end_time: end_time||'',
phone: this.phone,
remark: item.remark,
}
goods.push(param)
})
// 如果是购物车下单
if (this.isShoppingCart) {
this.$store.commit("changeTicketOrderList", this.orderList);
uni.setStorageSync("ticketOrderList", this.orderList)
this.goCartNextPage(2)
return
}
let data = {
product_list: goods,
coupon_id: this.coupon ? this.coupon.id : null,
}
console.log('data数据',data);
this.Post({
method: 'POST',
data: JSON.stringify(data)
}, '/api/order/create').then(res => {
if (res.code == 1) {
console.log(res.data.order_id);
let order_id = res.data.order_id
this.$store.commit("choseCoupon", "");
this.Post({
order_id: order_id,
type: "miniprogram",
platform: 'miniprogram'
}, '/api/pay/unify').then(res => {
if (res.data) {
uni.requestPayment({
nonceStr: res.data.nonceStr,
package: res.data.package,
paySign: res.data.paySign,
signType: res.data.signType,
timeStamp: res.data.timeStamp,
success: () => {
this.getSubscribeMessage()
},
fail() {
uni.navigateTo({
url: '/subPackages/order/trades'
})
}
})
}
})
}
})
},
// 获取默认手机号
getUserInfo () {
this.Post({},'/api/uservice/user/getMyInfo').then(res=>{
if (res.code==1 && res.data &&res.data.mobile) {
this.phone = res.data.mobile
}
})
},
}
}
</script>
<style scoped lang="scss">
*{
box-sizing: border-box;
}
.bg{
min-height: 100vh;
padding: 20rpx;
padding-bottom: 200rpx;
background-color: rgb(247, 247, 247);
}
.top-box1 {
width: 100%;
background: #FFFFFF;
border-radius: 13rpx;
padding: 32rpx 20rpx;
display: flex;
justify-content: space-between;
align-items: center;
font-weight: 500;
font-size: 25rpx;
color: #999999;
.top-left {
display: flex;
flex-direction: column;
justify-content: space-between;
flex: 1;
width: 1rpx;
.title{
font-weight: bold;
font-size: 36rpx;
color: #000000;
}
}
.top-edit{
font-family: PingFang SC;
font-weight: bold;
font-size: 27rpx;
color: #6A8A27;
}
}
.tickets-box{
background: #FFFFFF;
border-radius: 13rpx;
width: 100%;
margin: 20rpx 0;
.num-box {
display: flex;
justify-content: space-between;
flex-direction: column;
padding: 40rpx 20rpx;
.num-left {
width: 100%;
box-sizing: border-box;
display: flex;
justify-content: space-between;
.left-title {
font-family: PingFang SC;
font-weight: bold;
font-size: 31rpx;
color: #000000;
width: 450rpx;
}
.left-price {
font-weight: bold;
font-size: 36rpx;
color: #D62828;
padding-right: 27rpx;
}
.left-price::before {
font-size: 24rpx;
content: '';
}
}
.num-subtitle {
display: flex;
align-items: center;
width: 100%;
font-family: PingFang SC;
font-weight: 500;
font-size: 23rpx;
color: #6A8A27;
}
.num-right {
display: flex;
align-items: center;
font-weight: bold;
font-size: 29rpx;
color: #000000;
text-align: center;
.num-span {
width: 67rpx;
line-height: 63rpx;
}
.btn-num {
width: 46rpx;
height: 46rpx;
line-height: 40rpx;
background: #6A8A27;
border-radius: 50%;
font-weight: 500;
font-size: 45rpx;
font-size: 34rpx;
color: #FFFFFF;
}
.btn-num.disabled{
color: #999999;
background: white;
border: 1px solid #999;
}
}
}
.buyMore{
height: 118rpx;
font-family: PingFang SC;
font-weight: bold;
font-size: 31rpx;
color: #000000;
display: flex;
align-items: center;
justify-content: space-between;
padding:0 20rpx;
.buyMore-btn{
height: 47rpx;
width: 148rpx;
text-align: center;
border-radius: 23rpx;
border: 1px solid #515150;
font-family: PingFang SC;
font-weight: bold;
font-size: 25rpx;
color: #515150;
line-height: 45rpx;
}
}
}
.people-box{
width: 100%;
background: #FFFFFF;
border-radius: 13rpx;
.people-box-title{
font-family: PingFangSC;
font-weight: 600;
font-size: 31rpx;
color: #000000;
padding: 42rpx 18rpx;
border-bottom: 1px solid #CCCCCC;
}
.person-scroll{
display: flex;
flex-wrap: nowrap;
position: relative;
padding-bottom: 50rpx;
overflow-y: auto;
.person-item-container{
width: 167rpx;
height: 73rpx;
background: #F1F1F1;
border-radius: 11rpx;
font-family: PingFangSC;
font-weight: 400;
font-size: 27rpx;
color: #000000;
padding: 2rpx;
margin-right: 14rpx;
position: relative;
&.active{
background: #515150
}
.disabled{
font-weight: 400;
font-size: 23rpx;
color: #999999;
}
.selected{
width: 28rpx;
height: 28rpx;
background: #515150;
border-radius: 10rpx 0rpx 10rpx 0rpx;
position: absolute;
bottom: 0;
right: 0;
display: flex;
justify-content: center;
line-height: 28rpx;
}
}
.person-item{
width: 163rpx;
height: 69rpx;
border-radius: 11rpx;
background: #F1F1F1;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
}
.people-box-sku{
width: 100%;
background: #FFFFFF;
border-radius: 18rpx;
padding: 0rpx 20rpx;
.sku-title{
font-weight: 400;
font-size: 29rpx;
color: #060001;
padding-bottom: 25rpx;
}
.person-info{
display: flex;
align-items: center;
justify-content: space-between;
font-weight: 400;
font-size: 27rpx;
color: #000000;
margin-bottom: 33rpx;
.person-info-detail{
font-weight: 400;
font-size: 24rpx;
color: #666666;
width: 400rpx;
}
}
.person-need{
width: 100%;
height: 80rpx;
background: #F2F2F2;
border-radius: 13rpx;
display: flex;
align-items: center;
justify-content: space-between;
font-family: PingFang SC;
font-weight: 500;
font-size: 27rpx;
color: #515150;
padding: 0 20rpx;
}
.person-item-more{
width: 110rpx;
height: 73rpx;
background: #F2F2F2;
border-radius: 11rpx;
text-align: center;
font-family: PingFang SC;
font-weight: 500;
font-size: 29rpx;
color: #515150;
line-height: 73rpx;
position: absolute;
right: 0;
top: 0;
}
}
}
.people-popup {
padding: 26rpx;
min-height: 800rpx;
.top-box {
height: 80rpx;
.top {
position: fixed;
left: 0;
right: 0;
color: #000;
height: 80rpx;
font-size: 0;
overflow: hidden;
padding: 0 26rpx;
text {
text-align: left;
font-size: 35rpx;
font-weight: 400;
color: #000000;
}
.confirm {
font-weight: 400;
color: #000000;
}
}
}
.popup-list {
height: 666rpx;
overflow: scroll;
.popup-item {
border-radius: 12rpx;
padding: 2rpx;
margin-top: 24rpx;
font-size: 24rpx;
color: #333333;
font-weight: 400;
background-color: #ffffff;
.item-top {
border-radius: 12rpx;
padding: 30rpx 40rpx;
background-color: #ffffff;
img {
color: #666666;
width: 40rpx;
height: 40rpx;
}
.name {
overflow: hidden;
font-family: PingFang SC;
font-weight: 400;
font-size: 32rpx;
text {
color: #666;
font-size: 25rpx;
}
.tag {
padding: 0 8rpx;
height: 32rpx;
border-radius: 7rpx;
line-height: 30rpx;
text-align: center;
font-size: 23rpx;
font-family: PingFang SC;
font-weight: 500;
color: #ffffff;
background: #515150;
margin-left: 10rpx;
}
}
.com-flex-start {
margin: 0 0 30rpx;
}
.subtitle {
font-weight: 400;
flex: 1;
text-align: left;
margin-top: 33rpx;
color: #666666;
font-size: 25rpx;
.mobile {
margin-bottom: 36rpx;
}
}
.status {
width: 40rpx;
height: 40rpx;
line-height: 40rpx;
border-radius: 50%;
text-align: center;
box-sizing: border-box;
img {
width: 27rpx;
height: 21rpx;
}
}
.statuss {
background: linear-gradient(90deg, #fa2b66, #ff9834);
border: none;
}
.noSelect {
border: 1rpx solid #999999;
}
}
.item-site {
color: #666666;
display: flex;
align-items: center;
padding: 36rpx 0;
view {
width: 23rpx;
height: 23rpx;
margin-right: 10rpx;
border: 1rpx solid #999999;
border-radius: 50%;
view {
width: 8rpx;
height: 8rpx;
background: #000000;
border-radius: 50%;
margin: auto;
}
}
}
}
.popup-item.active{
background: #515150
}
.popup-item.disabled{
.item-top {
background-color: #CCC;
}
}
}
.button {
text-align: center;
width: 100%;
height: 80rpx;
line-height: 80rpx;
background-color: #ffffff;
border-radius: 40rpx;
font-family: PingFang SC;
font-weight: 400;
font-size: 33rpx;
color: #000000;
}
.add-edit-content{
background: #FFFFFF;
border-radius: 13rpx;
min-height: 800rpx;
}
}
.tickets-container {
width: 100%;
background: #fff;
height: 120rpx;
margin-top: 22rpx;
.order-title {
margin: 31rpx 0 31rpx 30rpx;
font-size: 31rpx;
font-family: PingFang SC;
font-weight: bold;
color: #000000;
}
.coupon-price {
color:#DD0000;
font-size: 30rpx;
font-weight: bold;
}
}
.btn-list {
width: 100%;
height: 166rpx;
background: #ffffff;
box-shadow: 0rpx -3rpx 9rpx 1rpx rgba(227, 229, 232, 0.5);
display: flex;
position: fixed;
bottom: 0;
left: 0;
right:0;
padding: 20rpx 50rpx;
align-items: center;
justify-content: space-between;
z-index: 99;
.btn {
width: 250rpx;
height: 80rpx;
background: #6A8A27;
border-radius: 11rpx;
text-align: center;
line-height: 80rpx;
font-size: 32rpx;
font-family: PingFang SC;
font-weight: bold;
color: #FFFFFF;
}
.price-box {
display: flex;
align-items: baseline;
.text {
font-size: 28rpx;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #393b3e;
}
.price {
margin-left: 15rpx;
font-size: 48rpx;
font-weight: bold;
color: #D62828;
&:before {
content: '';
display: inline-block;
color: #D62828;
font-size: 24rpx;
}
}
}
}
.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;
}
}
.calendar-edit{
.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-size: 32rpx;
text-align: center;
font-weight: bold;
color: #FFFFFF;
line-height: 80rpx;
}
}
}
.coupon-btn {
color: #999999;;
display: flex;
align-items: center;
.select {
display: block;
width: 153rpx;
height: 40rpx;
background: #6A8A27;
border-radius: 9rpx;
font-weight: 500;
font-size: 24rpx;
color: #FFFFFF;
text-align: center;
line-height: 40rpx;
font-family: PingFang SC;
margin-right: 20rpx;
}
}
::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;
}
}
</style>