jiazhipeng
4 months ago
11 changed files with 2546 additions and 593 deletions
@ -0,0 +1,835 @@ |
|||
<template> |
|||
<view class="bg" v-if="info"> |
|||
<view class="swipe-box"> |
|||
<swiper class="swiper" :autoplay="true" :interval="3000" :duration="1000" 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> |
|||
|
|||
<view class="detail-container"> |
|||
<!-- 景点信息 --> |
|||
<view class="info-container"> |
|||
<view class="wineScene-price"> |
|||
<view class="price"> |
|||
{{info.price / 100}} |
|||
<text class="old-price">￥{{info.market_price/100}}</text> |
|||
</view> |
|||
<view>已售{{info.sales_number||0}}份</view> |
|||
</view> |
|||
|
|||
<view class="info-data"> |
|||
<view class="text-overflowRows">{{info.title}}</view> |
|||
<view style="padding-top: 27rpx;" v-if="info.is_package"> |
|||
<view class="wineScene-subtitle" v-for="(item,key,index) in info.product_data || []" :key="index"> |
|||
<view>{{ key[0] }}</view> |
|||
<view class="wineScene-item"> |
|||
<view class="flex-between" v-for="(data,dataI) in item" :key="dataI"> |
|||
{{ data.title }} |
|||
<text>{{ data.unit }}</text> |
|||
</view> |
|||
</view> |
|||
<view class="wineScene-line"></view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
|
|||
<view style="margin: 16rpx 0;"> |
|||
<view class="map-container flex-between"> |
|||
<view class="flex flex-column flex-1 w-1rpx" style="padding-right: 20rpx;"> |
|||
<text class="text-overflow" style="font-size: 28rpx;color: #000000;">{{info.scene_name}}</text> |
|||
<text class="text-overflow" style="margin-top: 14rpx;">{{info.scene_address}}</text> |
|||
</view> |
|||
<view @click="goMap" class="flex flex-column flex-between flex-shrink-0"> |
|||
<image style="width: 29rpx;height: 29rpx;" src="https://static.ticket.sz-trip.com/jundaosuzhou/images/wineScene/navigation.png"></image> |
|||
<text style="margin-top: 14rpx;">去这里</text> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
|
|||
<view class="scroll-all-box" id="menus"> |
|||
<view :class="'scroll-menus' + (fixed ? ' fixed-menus' : '')"> |
|||
<view :class="'scroll-menu-item' + (type == 1 ? ' active' : '')" @click="changeMenu(1)">产品特色</view> |
|||
<view :class="'scroll-menu-item' + (type == 2 ? ' active' : '')" @click="changeMenu(2)">费用说明</view> |
|||
<view :class="'scroll-menu-item' + (type == 3 ? ' active' : '')" @click="changeMenu(3)">预定须知</view> |
|||
</view> |
|||
<view style="height: 85rpx" v-if="fixed"></view> |
|||
<view class="info-box info-box-query" id="box1"> |
|||
<view class="info-title">产品特色</view> |
|||
<view class="info-content" v-html="formateRichText(info.content)"></view> |
|||
</view> |
|||
<view class="info-box info-box-query" id="box2"> |
|||
<view class="info-title">费用说明</view> |
|||
<view class="info-content" v-html="formateRichText(info.expense_info)"></view> |
|||
</view> |
|||
<view class="info-box info-box-query" id="box3"> |
|||
<view class="info-title">预定须知</view> |
|||
<view class="info-content" v-html="formateRichText(info.book_info)"></view> |
|||
</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="flex"> |
|||
<view class="btn" @click="openPop(true)">加入购物车</view> |
|||
<view class="btn" @click="openPop(false)">立即购买</view> |
|||
</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="popup" type="bottom" :safe-area="false" @change="changPopShow" style="position: relative;z-index: 50;"> |
|||
<view class="popup-content" v-if="sku.length>0"> |
|||
<view style="padding: 0rpx 39rpx 50rpx 39rpx;"> |
|||
<view @click="closePopup" 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(sku[productIndex].headimg)" alt=""> |
|||
<view class="right-content"> |
|||
<view class="bottom-productPrice com-price">{{(sku[productIndex].price||0)/100}}</view> |
|||
<view class="bottom-content">已选择：{{sku[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 sku" :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="openPop">{{addCart?"加入购物车":"立即购买"}}</view> |
|||
</view> |
|||
</view> |
|||
</uni-popup> |
|||
|
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
export default { |
|||
data() { |
|||
return { |
|||
headImg: null, |
|||
id: null, |
|||
info: null, |
|||
|
|||
down: false, |
|||
type: 1, |
|||
fixed: false, |
|||
|
|||
sku: [], |
|||
productIndex: 0, // sku 选中的index |
|||
buyNum: 1, |
|||
popShow: false, |
|||
addCart: false, // 加入购物车、购买 |
|||
|
|||
skuInfo: {}, // 预定门票 |
|||
selectGoods: {}, // 预定的商品 |
|||
|
|||
cartNum: 0, |
|||
|
|||
|
|||
} |
|||
}, |
|||
onShow(options) { |
|||
this.getCartList() |
|||
}, |
|||
onLoad(options) { |
|||
this.id = options.id; |
|||
this.getInfo(); |
|||
// this.getGoodsList() |
|||
}, |
|||
onPageScroll(e){ |
|||
let query = uni.createSelectorQuery() |
|||
query.select("#menus").boundingClientRect(res => { |
|||
if(res.top < 0){ |
|||
this.fixed = true |
|||
}else{ |
|||
this.fixed = false |
|||
} |
|||
}).exec() |
|||
|
|||
if (this.down) { |
|||
return |
|||
}else{ |
|||
this.down = true |
|||
query.selectAll(".info-box-query").boundingClientRect(res=>{ |
|||
let i = res.findLastIndex(v=>v.top-100<=0) |
|||
console.log(res, i) |
|||
if (i>=0) { |
|||
this.type = i+1 |
|||
} |
|||
}).exec() |
|||
this.down = false |
|||
} |
|||
}, |
|||
methods: { |
|||
|
|||
// 获取景点信息 |
|||
getInfo() { |
|||
this.Post({id: this.id},'/api/product/get_product_detail').then(res => { |
|||
if (res.data.title) { |
|||
uni.setNavigationBarTitle({ |
|||
title: res.data.title |
|||
}) |
|||
} |
|||
let resData = res.data |
|||
try { |
|||
if (resData.product_data && resData.is_package==1) { |
|||
for(let key in resData.product_data) { |
|||
resData.product_data[key] = JSON.parse(resData.product_data[key]) |
|||
} |
|||
} |
|||
} catch(e) {} |
|||
this.info = resData |
|||
this.sku = resData.sku |
|||
}); |
|||
}, |
|||
|
|||
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'); |
|||
} |
|||
}); |
|||
}, |
|||
|
|||
changeProduct(item,index) { |
|||
if (item.store==0) { |
|||
uni.showToast({ |
|||
title:"库存不足！", |
|||
icon:'none' |
|||
}) |
|||
return |
|||
} |
|||
this.productIndex = index |
|||
}, |
|||
|
|||
getCartList () { |
|||
this.Post({},'/api/cart/get_list').then(res=>{ |
|||
this.cartNum = (res.data || []).length |
|||
}) |
|||
}, |
|||
|
|||
|
|||
|
|||
order() { |
|||
let goods = this.sku[this.productIndex] |
|||
goods.buyNum = this.buyNum |
|||
|
|||
let orderInfo = [{ |
|||
pInfo: this.info, |
|||
sInfo: goods, |
|||
}] |
|||
|
|||
uni.setStorageSync('foodOrder', JSON.stringify(orderInfo)); //规格 |
|||
uni.navigateTo({ |
|||
url: '/subPackages/food/order' |
|||
}); |
|||
}, |
|||
addToCart () { |
|||
let goods = this.sku[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.closePopup() |
|||
// this.$refs.cartDataVueRef.openPop() |
|||
} |
|||
}); |
|||
|
|||
}, |
|||
|
|||
closePopup() { |
|||
this.$refs.popup.close() |
|||
}, |
|||
openPop(flag) { |
|||
if (!this.sku||this.sku.length<=0) { |
|||
uni.showToast({ |
|||
title:'暂无可选规格', |
|||
icon:'none' |
|||
}) |
|||
return |
|||
} |
|||
if (!this.popShow) { |
|||
this.addCart = flag |
|||
this.$refs.popup.open() |
|||
} else { |
|||
if (this.addCart) { |
|||
this.addToCart() |
|||
} else { |
|||
this.order() |
|||
} |
|||
|
|||
} |
|||
}, |
|||
//数量加减 |
|||
addNumber() { |
|||
this.buyNum += 1; |
|||
}, |
|||
delNumber() { |
|||
if (this.buyNum <= 1) { |
|||
return; |
|||
} |
|||
this.buyNum -= 1; |
|||
}, |
|||
// 价格格式 |
|||
showNoPriceNew(price) { |
|||
if (price && price > 0) { |
|||
return (price / 100) |
|||
} else { |
|||
return '0' |
|||
} |
|||
}, |
|||
changPopShow (e) { |
|||
this.popShow = e.show |
|||
}, |
|||
|
|||
changeMenu(e) { |
|||
this.down = true |
|||
let index = e; |
|||
let that = this |
|||
const query = uni.createSelectorQuery(); //创建节点查询器 |
|||
query.select('#box'+index).boundingClientRect(); //选择toViewid获取位置信息 |
|||
query.selectViewport().scrollOffset(); //获取页面查询位置的 |
|||
query.exec(function (res) { |
|||
console.log(res) |
|||
let scrollTop = res[0].top + res[1].scrollTop; |
|||
uni.pageScrollTo({ |
|||
scrollTop: scrollTop-50, |
|||
duration: 200, |
|||
fail: (e)=>{ |
|||
console.log(e) |
|||
}, |
|||
complete: ()=>{ |
|||
that.type = index |
|||
setTimeout(()=>{that.down = false},1000) |
|||
} |
|||
}); |
|||
}); |
|||
}, |
|||
|
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style scoped lang="scss"> |
|||
*{ |
|||
box-sizing: border-box; |
|||
} |
|||
|
|||
.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; |
|||
} |
|||
} |
|||
} |
|||
} |
|||
|
|||
.detail-container{ |
|||
width: 100%; |
|||
z-index: 2; |
|||
padding: 26rpx 0; |
|||
position: relative; |
|||
top: -52rpx; |
|||
} |
|||
|
|||
.info-container{ |
|||
font-family: PingFang; |
|||
font-weight: 500; |
|||
font-size: 27rpx; |
|||
color: #666; |
|||
|
|||
.wineScene-price{ |
|||
font-weight: 500; |
|||
font-size: 24rpx; |
|||
color: #FFFFFF; |
|||
display: flex; |
|||
align-items: flex-end; |
|||
justify-content: space-between; |
|||
width: 750rpx; |
|||
background: linear-gradient(-90deg, #FF413B, #FFAB2E); |
|||
border-radius: 20rpx 20rpx 0rpx 0rpx; |
|||
padding: 32rpx 26rpx; |
|||
.price{ |
|||
font-size: 48rpx; |
|||
font-weight: bold; |
|||
&::before{ |
|||
content: '￥'; |
|||
font-size: 24rpx; |
|||
} |
|||
} |
|||
.old-price{ |
|||
font-weight: 500; |
|||
font-size: 24rpx; |
|||
color: #FFFFFF; |
|||
text-decoration-line: line-through; |
|||
padding-left: 14rpx; |
|||
} |
|||
} |
|||
|
|||
.info-data{ |
|||
background: white; |
|||
width: 100%; |
|||
padding: 26rpx; |
|||
font-weight: bold; |
|||
font-size: 32rpx; |
|||
color: #000000; |
|||
|
|||
.wineScene-subtitle { |
|||
display: flex; |
|||
font-weight: 500; |
|||
font-size: 24rpx; |
|||
color: #666666; |
|||
position: relative; |
|||
margin-bottom: 16rpx; |
|||
|
|||
&>view:first-child { |
|||
width: 33rpx; |
|||
height: 33rpx; |
|||
background: #6A8A27; |
|||
border-radius: 50%; |
|||
line-height: 33rpx; |
|||
text-align: center; |
|||
font-weight: 500; |
|||
font-size: 23rpx; |
|||
color: #FFFFFF; |
|||
|
|||
|
|||
margin-right: 8rpx; |
|||
position: relative; |
|||
z-index: 2; |
|||
} |
|||
|
|||
.wineScene-item { |
|||
flex: 1; |
|||
|
|||
view:nth-child(n+2) { |
|||
margin-top: .3rem; |
|||
} |
|||
} |
|||
|
|||
.wineScene-line { |
|||
width: 11rpx; |
|||
|
|||
background: #D3E8A7; |
|||
border-radius: 5rpx; |
|||
height: 100%; |
|||
position: absolute; |
|||
left: 11rpx; |
|||
} |
|||
} |
|||
|
|||
} |
|||
|
|||
.map-container{ |
|||
width: 100%; |
|||
height: 128rpx; |
|||
padding: 30rpx 27rpx; |
|||
font-weight: 500; |
|||
font-size: 24rpx; |
|||
color: #666666; |
|||
background-image: url("https://static.ticket.sz-trip.com/jundaosuzhou/images/wineScene/locationBg.png"); |
|||
background-size: 100% 100%; |
|||
background-repeat: no-repeat; |
|||
} |
|||
} |
|||
|
|||
.scroll-all-box { |
|||
margin: 20rpx 0; |
|||
background-color: #fff; |
|||
|
|||
.scroll-menus { |
|||
padding: 0 40rpx; |
|||
display: flex; |
|||
justify-content: space-between; |
|||
align-items: center; |
|||
font-size: 29rpx; |
|||
color: #333; |
|||
height: 84rpx; |
|||
border-bottom: 1rpx solid #d9d9d9; |
|||
|
|||
.scroll-menu-item { |
|||
position: relative; |
|||
line-height: 84rpx; |
|||
&.active{ |
|||
font-weight: bold; |
|||
font-size: 33rpx; |
|||
color: #000000; |
|||
} |
|||
} |
|||
|
|||
.scroll-menu-item.active::after { |
|||
content: '1'; |
|||
font-size: 0; |
|||
display: block; |
|||
position: absolute; |
|||
width: 46rpx; |
|||
height: 6rpx; |
|||
border-radius: 3rpx; |
|||
background: #6A8A27; |
|||
left: 50%; |
|||
margin-left: -23rpx; |
|||
bottom: 0rpx; |
|||
} |
|||
} |
|||
|
|||
.fixed-menus { |
|||
position: fixed; |
|||
top: 0; |
|||
left: 0; |
|||
right: 0; |
|||
background: white; |
|||
z-index: 1; |
|||
} |
|||
|
|||
.info-box { |
|||
padding: 20rpx 0; |
|||
margin: 0 40rpx; |
|||
border-bottom: 1px solid #CCCCCC; |
|||
box-sizing: border-box; |
|||
.info-title { |
|||
font-size: 35rpx; |
|||
font-weight: bold; |
|||
color: #000; |
|||
} |
|||
|
|||
.info-content { |
|||
width: 697rpx; |
|||
background: #FFFFFF; |
|||
border-radius: 20rpx; |
|||
padding: 22rpx 14rpx; |
|||
margin-top: 20rpx; |
|||
} |
|||
} |
|||
} |
|||
.fixed-menus { |
|||
position: fixed; |
|||
top: 0; |
|||
left: 0; |
|||
right: 0; |
|||
background: white; |
|||
z-index: 1; |
|||
} |
|||
|
|||
.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; |
|||
font-weight: 500; |
|||
font-size: 31rpx; |
|||
color: #FFFFFF; |
|||
line-height: 60rpx; |
|||
text-align: center; |
|||
background: #6A8A27; |
|||
border-radius: 0rpx 11rpx 11rpx 0rpx; |
|||
&:first-of-type{ |
|||
background: #D3E8A7; |
|||
border-radius: 11rpx 0rpx 0rpx 11rpx; |
|||
color: #6A8A27; |
|||
} |
|||
} |
|||
|
|||
} |
|||
|
|||
.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 { |
|||
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> |
|||
@ -0,0 +1,150 @@ |
|||
<template> |
|||
<view class="bg"> |
|||
<view class="topImg relative"> |
|||
<img v-if="headImg" :src="showImg(headImg)" class="topImg" mode="aspectFill"> |
|||
</view> |
|||
|
|||
|
|||
<view class="goodBox"> |
|||
<view @click="viewDetail(item)" class="goodItem" v-for="(item,index) in list" :key="index"> |
|||
<image class="left-image" :src="showImg(item.headimg||'')" mode="aspectFill"></image> |
|||
<view class="contentBox flex-column flex-1 w-1rpx"> |
|||
<view class="title text-overflowRows">{{item.title}}</view> |
|||
<view class="subtitle text-overflow" v-if="item.display_tags" style="font-size: 24rpx;color: #6A8A27;"> |
|||
{{item.display_tags.split(',').join(" | ")}} |
|||
</view> |
|||
<view class="subtitle text-overflowRows">{{item.address}}</view> |
|||
|
|||
<view class="price price-money"> |
|||
{{item.price/100}} |
|||
</view> |
|||
|
|||
</view> |
|||
</view> |
|||
</view> |
|||
<!-- <view class="finished-text" v-if="finished">没有更多数据了</view> --> |
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
export default{ |
|||
data(){ |
|||
return { |
|||
headImg:null, |
|||
|
|||
list: [], |
|||
finished: false, |
|||
|
|||
type_id: 391,//景点分类id |
|||
} |
|||
}, |
|||
onShow() { |
|||
this.finished = false |
|||
}, |
|||
onReady() { |
|||
this.getHeadImg(2366).then(res => {this.headImg = res}) |
|||
this.getList() |
|||
}, |
|||
onLoad(options) { |
|||
}, |
|||
|
|||
methods: { |
|||
|
|||
// 根据景点标签获取景点列表 |
|||
getList(){ |
|||
this.Post({tag_id: this.type_id,offset: this.list.length,limit: 10}, |
|||
'/api/product/get_product_by_tag').then(res => { |
|||
this.list = [...this.list, ...res.data.list]; |
|||
if (res.data.length < 10) { |
|||
this.finished = true |
|||
} |
|||
}) |
|||
}, |
|||
|
|||
viewDetail (item) { |
|||
uni.navigateTo({ |
|||
url:'/subPackages/food/detail?id='+item.id |
|||
}) |
|||
}, |
|||
}, |
|||
onReachBottom() { |
|||
setTimeout(() => { |
|||
if (!this.finished) this.getList() |
|||
},1000) |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style scoped lang="scss"> |
|||
*{ |
|||
box-sizing: border-box; |
|||
font-family: PingFangSC; |
|||
} |
|||
.bg{ |
|||
min-height: 100vh; |
|||
background: #F9FCF3; |
|||
} |
|||
.topImg{ |
|||
width: 100%; |
|||
height: 386rpx; |
|||
} |
|||
|
|||
|
|||
.goodBox{ |
|||
width: 100%; |
|||
z-index: 2; |
|||
padding: 26rpx; |
|||
|
|||
.goodItem{ |
|||
width: 100%; |
|||
height: 240rpx; |
|||
margin-bottom: 30rpx; |
|||
display: flex; |
|||
.left-image{ |
|||
width: 240rpx; |
|||
height: 100%; |
|||
border-radius: 20rpx; |
|||
flex-shrink: 0; |
|||
} |
|||
|
|||
.contentBox{ |
|||
padding: 10rpx 20rpx 0; |
|||
height: 100%; |
|||
justify-content: space-between; |
|||
|
|||
.title{ |
|||
width: 100%; |
|||
font-weight: bold; |
|||
font-size: 31rpx; |
|||
color: #333333; |
|||
} |
|||
|
|||
.subtitle{ |
|||
font-weight: 400; |
|||
font-size: 23rpx; |
|||
color: #999999; |
|||
} |
|||
|
|||
|
|||
.price{ |
|||
font-family: PingFang SC; |
|||
font-weight: bold; |
|||
font-size: 33rpx; |
|||
color: #DC2525; |
|||
text-align: right; |
|||
} |
|||
.price-money::before{ |
|||
content: '￥'; |
|||
font-size: 24rpx; |
|||
} |
|||
.price-money::after{ |
|||
content: '起'; |
|||
color: #999; |
|||
font-size: 24rpx; |
|||
font-weight: normal; |
|||
} |
|||
|
|||
} |
|||
} |
|||
} |
|||
</style> |
|||
@ -0,0 +1,669 @@ |
|||
<template> |
|||
<view class="bg"> |
|||
<view class="order-goods-container" v-for="(item,i) in orderList" :key="i"> |
|||
<view class="top-box1" >{{ item.pInfo.title }}</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 0rpx;" class="num-subtitle" @click="showpopRule(true, item.sInfo)"> |
|||
<view style="padding-left:4rpx">预订须知 ></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;font-weight: bold;font-size: 29rpx;" 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"> |
|||
<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.percent == 0">-￥{{coupon.discounts/100}}</span> |
|||
<span v-else>-{{coupon.percent}}%</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> |
|||
|
|||
|
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
|
|||
export default { |
|||
components: {}, |
|||
data() { |
|||
return { |
|||
// 下单产品 |
|||
orderList: [], |
|||
phone: '', |
|||
coupon:'', |
|||
|
|||
skuInfo: {}, // 预定须知当前点击的sku |
|||
} |
|||
}, |
|||
onLoad(options) { |
|||
// this.getList(); |
|||
this.$store.commit("choseCoupon", ""); |
|||
this.initPageData() |
|||
}, |
|||
|
|||
onShow() { |
|||
this.coupon = this.$store.state.user.coupon |
|||
}, |
|||
|
|||
methods: { |
|||
goOrderCoupon () { |
|||
let allPrice = 0 |
|||
let skuIds= [] |
|||
this.pInfo.specifications.forEach(v=>{ |
|||
allPrice+= v.price*v.buyNum |
|||
if (v.buyNum>0) { |
|||
skuIds.push(v.id) |
|||
} |
|||
}) |
|||
uni.navigateTo({ |
|||
url: `/subPackages/order/orderCoupon?allprice=${allPrice}&sku_ids=${skuIds.join(',')}` |
|||
}) |
|||
}, |
|||
|
|||
// 获取最大优惠券 |
|||
async getMaxCouponData () { |
|||
let allPrice = 0 |
|||
this.pInfo.specifications.forEach(v=>{ |
|||
allPrice+= v.price*v.buyNum |
|||
}) |
|||
let param = {money:allPrice,sku_ids:this.sInfo.id} |
|||
let res = await this.getMaxCoupon(param) |
|||
if (res.id) { |
|||
this.coupon = res |
|||
} |
|||
}, |
|||
|
|||
initPageData () { |
|||
let data = uni.getStorageSync('foodOrder'); |
|||
try{ |
|||
data = JSON.parse(data) |
|||
this.orderList = data |
|||
console.log(this.orderList) |
|||
|
|||
} catch(e){ |
|||
console.log(e) |
|||
} |
|||
// 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.percent == 0) { |
|||
if (this.coupon.discounts>allPrice) { |
|||
price =0 |
|||
}else{ |
|||
price = allPrice - (this.coupon.discounts) |
|||
} |
|||
|
|||
} else{ |
|||
price = allPrice - allPrice * (this.coupon.percent/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(); |
|||
} |
|||
}, |
|||
|
|||
|
|||
|
|||
/*---------------------------价格日历-----------------------------------*/ |
|||
order() { |
|||
let goods = [] |
|||
// 设置参数 |
|||
let canSubmit = true |
|||
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 = { |
|||
specifications_id: sku.id, |
|||
num: sku.buyNum, |
|||
date: use_date, |
|||
start_time: start_time||'', |
|||
end_time: end_time||'', |
|||
reserve_mobile: this.phone, |
|||
} |
|||
goods.push(param) |
|||
}) |
|||
|
|||
|
|||
let data = { |
|||
goods: goods, |
|||
coupon: this.coupon ? this.coupon.id : "", |
|||
} |
|||
console.log('data数据',data); |
|||
this.Post({ |
|||
method: 'POST', |
|||
data: JSON.stringify(data) |
|||
}, '/api/order/create').then(res => { |
|||
if (res.code == 1) { |
|||
uni.removeStorageSync('ticketOrder') |
|||
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' |
|||
}) |
|||
} |
|||
}) |
|||
} |
|||
}) |
|||
} |
|||
}) |
|||
} |
|||
|
|||
} |
|||
} |
|||
</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: 28rpx 20rpx; |
|||
font-weight: bold; |
|||
font-size: 33rpx; |
|||
color: #000000; |
|||
} |
|||
|
|||
.tickets-box{ |
|||
background: #FFFFFF; |
|||
border-radius: 13rpx; |
|||
width: 100%; |
|||
margin: 20rpx 0; |
|||
|
|||
.num-box { |
|||
display: flex; |
|||
justify-content: space-between; |
|||
flex-direction: column; |
|||
padding: 30rpx 20rpx 40rpx; |
|||
|
|||
.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; |
|||
} |
|||
|
|||
|
|||
.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; |
|||
} |
|||
|
|||
} |
|||
} |
|||
|
|||
|
|||
.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; |
|||
.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: #C3282E; |
|||
&:before { |
|||
content: '￥'; |
|||
display: inline-block; |
|||
color: #C3282E; |
|||
font-size: 24rpx; |
|||
} |
|||
} |
|||
.post-text { |
|||
margin-left: 15rpx; |
|||
color: #C3282E; |
|||
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; |
|||
} |
|||
} |
|||
|
|||
|
|||
.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; |
|||
|
|||
} |
|||
} |
|||
</style> |
|||
Loading…
Reference in new issue