Commit 05a7cafa authored by 潘永坪's avatar 潘永坪

组合票页面优化

parent 5781f964
...@@ -15,12 +15,11 @@ ...@@ -15,12 +15,11 @@
<view class="merchant-name"> <view class="merchant-name">
{{currentMerchant.name||''}} {{currentMerchant.name||''}}
</view> </view>
<u-transition :show="showTransition" :duration='800'> <u-transition :show="showTransition" :duration='600'>
<view class="merchant-info-bottom" > <view class="merchant-info-bottom" >
<view class="merchant-bottom-left"> <view class="merchant-bottom-left">
<view> <view>
<text v-if="showBusiness" style="color: #00B42B;">营业中</text> <text style="color: #00B42B;">营业时间</text>
<text v-if="showPauseBusiness" style="color:#F53F3F;">暂停营业</text>
</view> </view>
<view> <view>
{{currentMerchant.businessStart?currentMerchant.businessStart.substr(0,5):''}}- {{currentMerchant.businessStart?currentMerchant.businessStart.substr(0,5):''}}-
...@@ -46,7 +45,6 @@ ...@@ -46,7 +45,6 @@
</view> </view>
</view> </view>
</u-transition> </u-transition>
</view> </view>
<!-- 列表部分 --> <!-- 列表部分 -->
<view class="middle-bottom" :style="middleBottomStyle"> <view class="middle-bottom" :style="middleBottomStyle">
...@@ -224,13 +222,12 @@ export default { ...@@ -224,13 +222,12 @@ export default {
chooseProduct: [], //选中的产品 chooseProduct: [], //选中的产品
showModal: false, //是否显示模态框 showModal: false, //是否显示模态框
chooseMerchantProduct: '', //不支持多产品购买时,选中的景区产品 chooseMerchantProduct: '', //不支持多产品购买时,选中的景区产品
showBusiness:false,//用于是否显示营业中
showPauseBusiness:false,//用于显示暂停营业
merchantIndex:0,//选中的商家下标 merchantIndex:0,//选中的商家下标
middleHeight:0,//中间列表盒子高度 middleHeight:0,//中间列表盒子高度
heightArr:[],//元素高度数组 heightArr:[],//元素高度数组
scrollHeight:0,//中间盒子滚动时的高度 scrollHeight:0,//中间盒子滚动时的高度
originHeight:0,//中间盒子原本高度 originHeight:0,//中间盒子原本高度
merchantInfoHeight:0,//商家信息高度
middleInfoStyle:'',//中间盒子上部分样式 middleInfoStyle:'',//中间盒子上部分样式
middleBottomStyle:'',//中间盒子下部分样式 middleBottomStyle:'',//中间盒子下部分样式
toViewRight:'',//右边滚动到某个元素 toViewRight:'',//右边滚动到某个元素
...@@ -395,20 +392,6 @@ export default { ...@@ -395,20 +392,6 @@ export default {
item.productListCopy = item.productList item.productListCopy = item.productList
//获取当前商家信息 //获取当前商家信息
this.currentMerchant=item this.currentMerchant=item
//判断是营业时间还是暂停营业时间
let times = new Date().Format('hh:mm:ss')
let nowNumber=parseInt(this.$commonjs.changeTime(times))||0
let startNumber=parseInt(this.$commonjs.changeTime(item.businessStart))||0
let endNumber=parseInt(this.$commonjs.changeTime(item.businessEnd))||0
if(startNumber<nowNumber<endNumber){
this.showBusiness=true
this.showPauseBusiness=false
}
//由于暂停营业有多种情况,所以另外用一个字段来区分显示隐藏
if(nowNumber<startNumber||nowNumber>endNumber){
this.showPauseBusiness=true
this.showBusiness=false
}
} else { } else {
// item.productListCopy = item.productList.slice(0, 2)不要更多,暂时注释 // item.productListCopy = item.productList.slice(0, 2)不要更多,暂时注释
item.productListCopy = item.productList item.productListCopy = item.productList
...@@ -444,7 +427,8 @@ export default { ...@@ -444,7 +427,8 @@ export default {
//获取中间盒子需要滚动时的高度 //获取中间盒子需要滚动时的高度
uni.createSelectorQuery().in(this).select('.merchant-info').boundingClientRect(data => { uni.createSelectorQuery().in(this).select('.merchant-info').boundingClientRect(data => {
if(data){ if(data){
this.scrollHeight=windowHeight-data.height this.merchantInfoHeight=data.height
this.scrollHeight=windowHeight-this.merchantInfoHeight
} }
}).exec() }).exec()
//获取中间盒子原本高度 //获取中间盒子原本高度
...@@ -536,11 +520,15 @@ export default { ...@@ -536,11 +520,15 @@ export default {
//点击左边,全屏先置顶 //点击左边,全屏先置顶
this.toViewFull='middle' this.toViewFull='middle'
//点击左边,右边可滚动 //点击左边,右边可滚动
this.middleHeight=this.scrollHeight
this.merchantIndex=index this.merchantIndex=index
//加个延时,防止第一次点击时无效果 this.middleHeight=this.scrollHeight
//加个延时,防止第一次点击时元素样式还未更新,导致不滑动到对应元素
this.$nextTick(()=>{ this.$nextTick(()=>{
this.toViewRight='merchant'+index //this.$nextTick解决苹果手机
//settimeout解决安卓手机
setTimeout(()=>{
this.toViewRight='merchant'+index
},100)
}) })
}, },
//---展示明细弹窗 //---展示明细弹窗
...@@ -557,15 +545,15 @@ export default { ...@@ -557,15 +545,15 @@ export default {
height=data.height-20 height=data.height-20
if(e.detail.scrollTop>=height){ if(e.detail.scrollTop>=height){
//商家信息固定,中间可滚动,全屏不滚动 //商家信息固定,中间可滚动,全屏不滚动
this.middleInfoStyle='top:0;position:fixed;' this.middleInfoStyle='top:0;position:fixed;height:0;padding:0;'
this.middleBottomStyle='margin-top:50px;'
this.middleHeight=this.scrollHeight this.middleHeight=this.scrollHeight
this.middleBottomStyle='margin-top:50px'
this.showTransition=false this.showTransition=false
}else{ }else{
//商家不固定,中间不可滚动,全屏滚动 //商家不固定,中间不可滚动,全屏滚动
this.middleInfoStyle='position:relative;' this.middleInfoStyle='position:relative;height:auto;padding:10px;'
this.middleBottomStyle='margin-top:0;'
this.middleHeight=this.originHeight this.middleHeight=this.originHeight
this.middleBottomStyle='margin-top:0'
this.showTransition=true this.showTransition=true
} }
} }
...@@ -784,10 +772,7 @@ export default { ...@@ -784,10 +772,7 @@ export default {
border-radius: 24rpx 24rpx 0 0; border-radius: 24rpx 24rpx 0 0;
padding:10px; padding:10px;
z-index: 1; z-index: 1;
transition-property: all; overflow: hidden;
transition-duration: 1s;
transition-timing-function: ease;
transition-delay: 0s;
} }
.merchant-name{ .merchant-name{
font-size: 18px; font-size: 18px;
...@@ -943,9 +928,11 @@ export default { ...@@ -943,9 +928,11 @@ export default {
font-weight: bold; font-weight: bold;
color: #191919; color: #191919;
display: flex; display: flex;
align-items: center;
justify-content: space-between; justify-content: space-between;
} }
.product-status { .product-status {
flex-shrink: 0;
padding: 6rpx 12rpx; padding: 6rpx 12rpx;
border: 2px solid #f40000; border: 2px solid #f40000;
color: #f40000; color: #f40000;
...@@ -954,7 +941,7 @@ export default { ...@@ -954,7 +941,7 @@ export default {
transform: rotate(-25deg); transform: rotate(-25deg);
position: relative; position: relative;
top: 30rpx; top: 30rpx;
right: 80rpx; right: 60rpx;
} }
.product-rule{ .product-rule{
font-size: 24rpx; font-size: 24rpx;
......
...@@ -16,19 +16,19 @@ ...@@ -16,19 +16,19 @@
告游客书 告游客书
</view> </view>
<view> <view>
尊敬的游客、广大市民: 尊敬的游客、广大市民
</view> </view>
<view> <view>
<text> <text>
景区开放时间: 开放时间:
</text> </text>
{{openTime}}(21:00停止售票入馆)。 {{openTime}}
</view> </view>
<view> <view>
<text> <text>
博物馆开放日多媒体设备运行时间: 博物馆开放日多功能设备运行时间:
</text> </text>
09:30 - 12:30;14:30 - 17:30;19:30-21:30(根据景区当天实际情况为准) 09:30 - 12:30;14:30 - 17:30(根据景区当天实际情况为准)
</view> </view>
<view> <view>
<text> <text>
...@@ -91,6 +91,7 @@ export default { ...@@ -91,6 +91,7 @@ export default {
this.$request('scenic/user/merchant/findDetailInfo',data).then((res)=>{ this.$request('scenic/user/merchant/findDetailInfo',data).then((res)=>{
if(res.code=='00'){ if(res.code=='00'){
let data=res.data.merchantTitleData||[] let data=res.data.merchantTitleData||[]
console.log(data)
data.forEach(item => { data.forEach(item => {
if (item.titleCode == 'scenic_base_info') { if (item.titleCode == 'scenic_base_info') {
//基本信息 //基本信息
......
...@@ -16,19 +16,19 @@ ...@@ -16,19 +16,19 @@
告游客书 告游客书
</view> </view>
<view> <view>
尊敬的游客、广大市民 尊敬的游客、广大市民:
</view> </view>
<view> <view>
<text> <text>
开放时间: 景区开放时间:
</text> </text>
{{openTime}}(18:00停止售票入馆) {{openTime}}
</view> </view>
<view> <view>
<text> <text>
博物馆开放日多功能设备运行时间: 博物馆开放日多媒体设备运行时间:
</text> </text>
09:30 - 12:30;14:30 - 17:30(根据景区当天实际情况为准) 09:30 - 12:30;14:30 - 17:30;19:30-21:30(根据景区当天实际情况为准)
</view> </view>
<view> <view>
<text> <text>
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment