133 lines
2.8 KiB
Vue
133 lines
2.8 KiB
Vue
|
<template>
|
||
|
|
<div class="StoreDetail">
|
||
|
|
<div class="header" :class="[isFixed ? 'header-active' : '']">
|
||
|
|
<div class="status-bar" :style="{height: statusBarHeight + 'px'}"></div>
|
||
|
|
<div class="nav-bar">
|
||
|
|
<image src="/static/img/left.png" @click="back"/>
|
||
|
|
<h2>优惠详情</h2>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="back-wrapper" @click="back" v-show="!isFixed" :style="{marginTop : statusBarHeight + 'px'}">
|
||
|
|
<image src="/static/img/left.png"/>
|
||
|
|
</div>
|
||
|
|
<div class="photo-header">
|
||
|
|
<image class="bg-img" src="https://cdn.cunwuyun.cn/wxmp/tianfuxing/photo-bg.png" />
|
||
|
|
<h2>随手拍</h2>
|
||
|
|
<p>将身边文明或不文明行为拍照上传即可获得积分奖励</p>
|
||
|
|
<image class="right-icon" src="https://cdn.cunwuyun.cn/wxmp/tianfuxing/right2.png" />
|
||
|
|
</div>
|
||
|
|
<div class="wrapper">
|
||
|
|
<h2>我上传的</h2>
|
||
|
|
<div class="list">
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
export default {
|
||
|
|
name: 'StoreDetail',
|
||
|
|
appName: '优惠详情',
|
||
|
|
customNavigation: true,
|
||
|
|
|
||
|
|
data () {
|
||
|
|
return {
|
||
|
|
isFixed: false,
|
||
|
|
statusBarHeight: 20,
|
||
|
|
list: [],
|
||
|
|
hideStatus: false,
|
||
|
|
pageShow: false,
|
||
|
|
current: 1,
|
||
|
|
isMore: false,
|
||
|
|
isChoose: true
|
||
|
|
}
|
||
|
|
},
|
||
|
|
|
||
|
|
onLoad () {
|
||
|
|
this.statusBarHeight = uni.getSystemInfoSync().statusBarHeight
|
||
|
|
},
|
||
|
|
methods: {
|
||
|
|
back () {
|
||
|
|
uni.navigateBack({
|
||
|
|
delta: 1
|
||
|
|
})
|
||
|
|
},
|
||
|
|
|
||
|
|
preview (url) {
|
||
|
|
let imgs = this.list.map(v => v.accessUrl)
|
||
|
|
|
||
|
|
uni.previewImage({
|
||
|
|
urls: imgs,
|
||
|
|
current: url
|
||
|
|
})
|
||
|
|
}
|
||
|
|
},
|
||
|
|
|
||
|
|
onPageScroll (params) {
|
||
|
|
this.isFixed = params.scrollTop > 60
|
||
|
|
},
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<style lang="scss" socped>
|
||
|
|
.StoreDetail {
|
||
|
|
width: 100vw;
|
||
|
|
overflow-x: hidden;
|
||
|
|
padding-bottom: 200px;
|
||
|
|
|
||
|
|
div {
|
||
|
|
box-sizing: border-box;
|
||
|
|
}
|
||
|
|
|
||
|
|
.back-wrapper {
|
||
|
|
position: fixed;
|
||
|
|
z-index: 11;
|
||
|
|
left: 20px;
|
||
|
|
top: 24px;
|
||
|
|
width: 40px;
|
||
|
|
height: 40px;
|
||
|
|
|
||
|
|
image {
|
||
|
|
width: 40px;
|
||
|
|
height: 40px;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
.header {
|
||
|
|
position: fixed;
|
||
|
|
left: 0;
|
||
|
|
top: 0;
|
||
|
|
z-index: 0;
|
||
|
|
width: 100%;
|
||
|
|
opacity: 0;
|
||
|
|
transition: all 0.2s ease;
|
||
|
|
|
||
|
|
&.header-active {
|
||
|
|
z-index: 1111;
|
||
|
|
opacity: 1;
|
||
|
|
background: linear-gradient(180deg, #2D7DFF 0%, #2D7DFF 40%);
|
||
|
|
}
|
||
|
|
|
||
|
|
.nav-bar {
|
||
|
|
position: relative;
|
||
|
|
height: 88px;
|
||
|
|
line-height: 88px;
|
||
|
|
color: #fff;
|
||
|
|
font-size: 32px;
|
||
|
|
text-align: center;
|
||
|
|
|
||
|
|
image {
|
||
|
|
position: absolute;
|
||
|
|
top: 0;
|
||
|
|
left: 0;
|
||
|
|
z-index: 1;
|
||
|
|
width: 40px;
|
||
|
|
height: 40px;
|
||
|
|
padding: 24px 20px 0 20px;
|
||
|
|
box-sizing: content-box;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</style>
|