Skip to content

W
wly-APP
Commit 0471b28a authored by chuan.liu's avatar chuan.liu
Browse files
Options

ios模拟器兼容性处理

parent 46ce3f1c
Expand all Hide whitespace changes
Inline Side-by-side
Showing with 666 additions and 563 deletions
pages/logistics/logistics.nvue
View file @ 0471b28a
......@@ -77,7 +77,7 @@
this.navHeight = `height:${this.sysinfo.safeArea.top + 44}px`;
},
onBackPress() {
uni.navigateBack()
}
}
</script>
......
pages/my-order/my-order.nvue
View file @ 0471b28a
<template>
<view class="ticket-order-page">
<view class="status_bar" :style="navHeight"></view>
<view class="tabs">
<scroll-view ref="tabbar1" id="tab-bar" class="tab-bar" :scroll="false" :scroll-x="true"
:scroll-into-view="scrollInto">
<view class="tab-bar-list">
<view class="tab-bar-list-wrapper">
<view class="uni-tab-item" v-for="(tab,index) in tabList" :key="tab.id" :ref="'tabitem'+index">
<text :id="tab.id" :data-id="index" :data-current="index" class="uni-tab-item-title"
:class="{'uni-tab-item-title-active':tabIndex==index}" @click="ontabtap">{{tab.name}}</text>
</view>
</view>
<view class="scroll-view-indicator">
<view ref="underline" class="scroll-view-underline" :class="{'scroll-view-animation':isTap}"
:style="underlineStyle"></view>
</view>
</view>
</scroll-view>
<view class="conditon-block" :class="{'conditon-block-auto':ishowDetail}">
<view class="filter-title">
<button type="default" class="filter-btn filter-btn-active">一周内</button>
<button type="default" @click="handleFilter(item)" :class="{'filter-btn-active':item === filterActiveIndex}" class="filter-btn" v-for="item in 3" :key='item'>{{item}}月内</button>
<image @click="handleShowDetail" class="icon-arrow" :class="{'icon-arrow-rotate':ishowDetail}"
src="@/static/image/arrow_up@3x.png" mode="aspectFit"></image>
</view>
<view class="filter-content">
<button type="default" @click="handleFilter(item+3)" class="filter-btn" :class="{'filter-btn-active':item+3 === filterActiveIndex}" v-for="item in 9" :key='item'>{{item+3}}月内</button>
</view>
</view>
<swiper ref="swiper1" class="tab-box" :current="tabIndex" :duration="300" @change="onswiperchange"
@transition="onswiperscroll" @animationfinish="animationfinish" @onAnimationEnd="animationfinish">
<swiper-item class="swiper-item" v-for="(page, index) in tabList" :key="index">
<orderPage :ref="'page' + index" class="page-item" :nid="page.newsid"></orderPage>
</swiper-item>
</swiper>
</view>
<view class="ticket-order-page">
<view class="status_bar" :style="navHeight"></view>
<view class="tabs">
<scroll-view ref="tabbar1" id="tab-bar" class="tab-bar" :scroll="false" :scroll-x="true"
:scroll-into-view="scrollInto">
<view class="tab-bar-list">
<view class="tab-bar-list-wrapper">
<view class="uni-tab-item" v-for="(tab,index) in tabList" :key="tab.id" :ref="'tabitem'+index">
<text :id="tab.id" :data-id="index" :data-current="index" class="uni-tab-item-title"
:class="{'uni-tab-item-title-active':tabIndex==index}"
@click="ontabtap">{{tab.name}}</text>
</view>
</view>
<view class="scroll-view-indicator">
<view ref="underline" class="scroll-view-underline" :class="{'scroll-view-animation':isTap}"
:style="underlineStyle"></view>
</view>
</view>
</scroll-view>
<view class="conditon-block" :style="conditionTop" :class="{'conditon-block-auto':ishowDetail}">
<view class="filter-title">
<button type="default" class="filter-btn filter-btn-active"><text
class="filter-btn__text filter-btn-active__text">一周内</text></button>
<button type="default" @click="handleFilter(item)"
:class="{'filter-btn-active':item === filterActiveIndex}" class="filter-btn" v-for="item in 3"
:key='item'>
<text class="filter-btn__text"
:class="{'filter-btn-active__text':item === filterActiveIndex}">{{item}}月内</text></button>
<image @click="handleShowDetail" class="icon-arrow" :class="{'icon-arrow-rotate':ishowDetail}"
src="@/static/image/arrow_up@3x.png" mode="aspectFit"></image>
</view>
<view class="filter-content">
<button type="default" @click="handleFilter(item+3)" class="filter-btn"
:class="{'filter-btn-active':item+3 === filterActiveIndex}" v-for="item in 9" :key='item'><text
class="filter-btn__text"
:class="{'filter-btn-active__text':item+3 === filterActiveIndex}">{{item+3}}月内</text></button>
</view>
</view>
<view class="empty"></view>
<swiper ref="swiper1" class="tab-box" :current="tabIndex" :duration="300" @change="onswiperchange"
@transition="onswiperscroll" @animationfinish="animationfinish" @onAnimationEnd="animationfinish">
<swiper-item class="swiper-item" v-for="(page, index) in tabList" :key="index">
<orderPage :ref="'page' + index" class="page-item" :nid="page.newsid"></orderPage>
</swiper-item>
</swiper>
</view>
</view>
</template>
......@@ -64,23 +75,24 @@
data() {
return {
tabList: [{
id: "tab01",
name: '全部',
newsid: 0
}, {
id: "tab02",
name: '配额',
newsid: 23
}, {
id: "tab03",
name: '非配额',
newsid: 223
},
{
id: "tab04",
name: '公关团购',
newsid: 224
}],
id: "tab01",
name: '全部',
newsid: 0
}, {
id: "tab02",
name: '配额',
newsid: 23
}, {
id: "tab03",
name: '非配额',
newsid: 223
},
{
id: "tab04",
name: '公关团购',
newsid: 224
}
],
tabIndex: 0,
cacheTab: [],
scrollInto: "",
......@@ -93,9 +105,9 @@
swiperWidth: 0,
tabbarWidth: 0,
tabListSize: {},
_touchTabIndex: 0,
ishowDetail:false,
filterActiveIndex:0,
_touchTabIndex: 0,
ishowDetail: false,
filterActiveIndex: 0,
}
},
computed: {
......@@ -104,11 +116,16 @@
left: this.indicatorLineLeft + 'px',
width: this.indicatorLineWidth + 'px'
}
},
navHeight() {
return {
'height': `${this.sysinfo.safeArea.top + 44}px`
}
},
navHeight() {
return {
'height': `${this.sysinfo.safeArea.top + 44}px`
}
},
conditionTop() {
return {
'top': `${this.sysinfo.safeArea.top + 44 + 42}px`
}
},
...mapState(['sysinfo'])
},
......@@ -290,22 +307,23 @@
},
clearTabData(index) {
this.pageList[index].clear();
},
handleShowDetail() {
this.ishowDetail = !this.ishowDetail
},
handleFilter(item){
this.filterActiveIndex = item
},
handleShowDetail() {
this.ishowDetail = !this.ishowDetail
},
handleFilter(item) {
this.filterActiveIndex = item
}
}
}
</script>
<style lang="scss">
.ticket-order-page{
flex-direction: column;
}
<style lang="scss">
.ticket-order-page {
flex-direction: column;
flex: 1;
}
/* #ifndef APP-PLUS */
page {
width: 100%;
......@@ -324,7 +342,7 @@
flex: 1;
flex-direction: column;
overflow: hidden;
background-color: #ffffff;
background-color: #ffffff;
}
.tab-bar {
......@@ -333,7 +351,7 @@
flex-direction: row;
/* #ifndef APP-PLUS */
white-space: nowrap;
/* #endif */
/* #endif */
border-bottom: 0.5px solid #eeeeee;
}
......@@ -375,62 +393,86 @@
.scroll-view-animation {
transition-duration: 0.2s;
transition-property: left;
}
.conditon-block{
width: 750rpx;
height: 124rpx;
overflow:hidden;
background-color: #fff;
display: flex;
flex-direction: column;
padding: 40rpx 32rpx 0 16rpx;
}
.conditon-block-auto{
height: auto;
overflow:auto;
max-height:230px;
}
.icon-arrow {
width: 28rpx;
height: 16rpx;
margin-left: 16rpx;
margin-top: 24rpx;
transition-property: transform;
transition-duration: 0.15s;
transform: rotate(0deg);
}
.icon-arrow-rotate {
transform: rotate(180deg);
}
.filter-btn{
flex: 0 0 148rpx;
height: 68rpx;
line-height: 68rpx;
background: #f8f8f8;
border-radius: 16rpx;
color: #8e8e8e;
font-size: 24rpx;
margin-right: 20rpx;
margin-bottom: 20rpx;
border: 2rpx solid #f8f8f8;
}
.filter-btn-active{
background: #f61d30;
color: #fff;
border: 2rpx solid #f61d30;
box-shadow: 0px 4rpx 12rpx 0px rgba(255,29,50,0.56);
}
.filter-content{
display: flex;
flex-wrap: wrap;
}
.conditon-block {
position: fixed;
left: 0;
top: 172rpx;
right: 0;
bottom: 0;
z-index: 10;
width: 750rpx;
height: 124rpx;
overflow: hidden;
background-color: #fff;
display: flex;
flex-direction: column;
padding: 40rpx 32rpx 0 16rpx;
}
.conditon-block-auto {
height: 460rpx;
overflow: auto;
max-height: 230px;
}
.icon-arrow {
width: 28rpx;
height: 16rpx;
margin-left: 16rpx;
margin-top: 24rpx;
transition-property: transform;
transition-duration: 0.15s;
transform: rotate(0deg);
}
.icon-arrow-rotate {
transform: rotate(180deg);
}
.filter-btn {
flex: 1;
min-width: 148rpx;
max-width: 148rpx;
height: 68rpx;
line-height: unset;
background: #f8f8f8;
border-radius: 16rpx;
color: #8e8e8e;
font-size: 24rpx;
margin-right: 20rpx;
margin-bottom: 20rpx;
margin-left: 0;
border: 2rpx solid #f8f8f8;
}
.filter-btn__text {
height: 68rpx;
line-height: 68rpx;
color: #8e8e8e;
font-size: 24rpx;
}
.filter-btn-active {
background: #f61d30;
color: #fff;
border: 2rpx solid #f61d30;
box-shadow: 0px 4rpx 12rpx 0px rgba(255, 29, 50, 0.56);
}
.filter-btn-active__text {
color: #fff;
}
.filter-content {
display: flex;
flex-wrap: wrap;
}
.empty {
height: 124rpx;
}
.tab-box {
......@@ -477,9 +519,9 @@
flex: 1;
flex-direction: row;
position: absolute;
left: 0;
left: 16rpx;
top: 0;
right: 0;
right: 16rpx;
bottom: 0;
}
</style>
pages/my-order/order-item.nvue
View file @ 0471b28a
......@@ -3,7 +3,8 @@
<view class="top">
<text class="title-no">订单编号：TP10000021</text>
<view class="title-info">
<button class="title-info__status title-info__status-done" type="default">待审批</button>
<button class="title-info__status title-info__status-done" type="default"><text
class="item-block-btn__text">待审批</text></button>
</view>
</view>
<view class="middle view">
......@@ -37,8 +38,7 @@
}
},
data() {
return {
}
return {}
},
methods: {
click() {
......@@ -69,7 +69,7 @@
height: 72rpx;
align-items: center;
justify-content: space-between;
padding: 0 32rpx;
padding: 0 48rpx;
}
.title-no {
......@@ -87,21 +87,28 @@
height: 48rpx;
line-height: 48rpx;
background: #f61d30;
border-radius: 8rpx 200rpx 200rpx 8rpx;
border:1px solid #f61d30;
border-radius: 80rpx 200rpx 200rpx 80rpx;
border: 1px solid #f61d30;
font-size: 12px;
color: #fff;
text-align: center;
}
.title-info__status:after {
border: 0;
}
.title-info__status-done {
background: #f8f8f8;
color: #888888;
border: 1px solid #f8f8f8;
}
.title-info__status:after {
border:0;
}
.title-info__status-done{
background: #f8f8f8;
.item-block-btn__text {
height: 48rpx;
line-height: 48rpx;
font-size: 12px;
color: #888888;
border:1px solid #f8f8f8;
}
.middle {
......@@ -146,7 +153,7 @@
.middle-date-des {
font-size: 24rpx;
color: #999;
color: #999;
}
.text-block-box {
......@@ -157,7 +164,7 @@
.middle-date-right {
display: flex;
align-items: center;
justify-content: flex-end;
justify-content: flex-end;
text-align: right;
}
</style>
pages/my-purchase/order-item.nvue
View file @ 0471b28a
......@@ -71,7 +71,7 @@
</view>
</view>
<view class="receive-info" ref='receiveInfo'
<view class="receive-info" ref='receiveInfo' :style="receiveInfoHeightComputed"
:class="{'receive-info-auto':ishowReceiveDetail}">
<view class="block-detal-item">
<text class="detal-item-label detal-item-title">收货信息</text>
......@@ -122,6 +122,10 @@
</template>
<script>
// #ifdef APP-NVUE
const dom = weex.requireModule('dom')
// #endif
export default {
props: {
newsItem: {
......@@ -134,28 +138,37 @@
data() {
return {
ishowDetail: true,
ishowReceiveDetail: true,
receiveInfoHeight:'24px'
ishowReceiveDetail: false,
receiveInfoHeight: '132',
receiveInfoDetailSize: {},
}
},
// watch:{
// ishowReceiveDetail(val){
// if(val === true){
// this.receiveInfoHeight = `${this.$refs.receiveInfo.$el.clientHeight}px`
// }else{
// this.receiveInfoHeight = '24px'
// }
// }
// },
// computed: {
// receiveInfoHeight() {
// let height = 0
// height = this.ishowReceiveDetail ? this.$refs.receiveInfo.$el.clientHeight : '0'
// return {
// "height": `${height}px`
},
// watch:{
// ishowReceiveDetail(val){
// if(val === true){
// this.receiveInfoHeight = `${this.$refs.receiveInfo.$el.clientHeight}px`
// }else{
// this.receiveInfoHeight = '24px'
// }
// }
// }
// },
computed: {
receiveInfoHeightComputed() {
return {
"height": `${this.receiveInfoHeight}px`
}
}
},
mounted() {
// setTimeout(() => {
// const result = dom.getComponentRect(this.$refs.receiveInfo, option => {
// console.log('getComponentRect:', option)
// this.receiveInfoDetailSize = option.size
// })
// console.log('return value2:', result)
// console.log('viewport:', dom.getComponentRect('viewport'))
// }, 100);
},
methods: {
click() {
this.$emit('click');
......@@ -169,6 +182,11 @@
},
handleShowReceiveDetail() {
this.ishowReceiveDetail = !this.ishowReceiveDetail
if (this.ishowReceiveDetail === true) {
this.receiveInfoHeight = '480'
} else {
this.receiveInfoHeight = '132'
}
},
checkLogistics() {
uni.navigateTo({
......@@ -377,7 +395,7 @@
padding-bottom: 60rpx;
}
.receive-info-auto {
.receive-info-auto {
height: auto;
}
......
unpackage/dist/dev/app-plus/pages/apply-delivery/apply-delivery.js
View file @ 0471b28a
This source diff could not be displayed because it is too large. You can view the blob instead.
unpackage/dist/dev/app-plus/pages/apply-order/apply-order.js
View file @ 0471b28a
This source diff could not be displayed because it is too large. You can view the blob instead.
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