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.
138 lines
2.9 KiB
138 lines
2.9 KiB
10 months ago
|
<template>
|
||
|
|
<view
|
||
|
|
ref="rebate"
|
||
|
|
class="rebate-guide"
|
||
|
|
:style="{ top: top + 'px' }"
|
||
|
|
@touchmove.prevent="touchMove"
|
||
|
|
>
|
||
|
|
<i
|
||
|
|
ref="close"
|
||
|
|
class="iconfont2 iconguanbi1 close-icon"
|
||
|
|
@click="rebateAction('close')"
|
||
|
|
></i>
|
||
|
|
<view class="bottom">
|
||
|
|
<view class="title">分享返佣</view>
|
||
|
|
<view class="money">¥{{ rebateMoney }}</view>
|
||
|
|
</view>
|
||
|
|
<view class="top">
|
||
|
|
<view class="share-btn" @click="rebateAction('share')">立即分享</view>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
export default {
|
||
|
|
props: ["rebateMoney"],
|
||
|
|
data() {
|
||
|
|
const systemInfo = this.$util.getSystemInfo();
|
||
|
|
|
||
|
|
return {
|
||
|
|
top: 0,
|
||
|
|
ticking: false,
|
||
|
|
innerHeight: systemInfo.windowHeight,
|
||
|
|
maxHeight: 0,
|
||
|
|
};
|
||
|
|
},
|
||
|
|
mounted() {
|
||
|
|
const task1 = this.$util.getClientRect(".rebate-guide", this);
|
||
|
|
const task2 = this.$util.getClientRect(".close-icon", this);
|
||
|
|
|
||
|
|
Promise.all([task1, task2]).then(([rebate, close]) => {
|
||
|
|
this.top = this.maxHeight =
|
||
|
|
this.innerHeight - rebate.height - close.height + close.top;
|
||
|
|
});
|
||
|
|
},
|
||
|
|
methods: {
|
||
|
|
rebateAction(value) {
|
||
|
|
this.$emit("rebate-action", value);
|
||
|
|
},
|
||
|
|
touchMove(event) {
|
||
|
|
const clientY = event.changedTouches[0].clientY;
|
||
|
|
this.$util.getClientRect(".close-icon", this).then(({ top, height }) => {
|
||
|
|
if (clientY < height - top) {
|
||
|
|
this.top = height - top;
|
||
|
|
} else if (clientY > this.maxHeight) {
|
||
|
|
this.top = this.maxHeight;
|
||
|
|
} else {
|
||
|
|
this.top = clientY;
|
||
|
|
}
|
||
|
|
});
|
||
|
|
},
|
||
|
|
},
|
||
|
|
};
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<style scoped lang="scss">
|
||
|
|
.rebate-guide {
|
||
|
|
position: fixed;
|
||
|
|
right: 0;
|
||
|
|
z-index: 5;
|
||
|
|
width: 171rpx;
|
||
|
|
height: 215rpx;
|
||
|
|
padding: 70rpx 6rpx 0 2rpx;
|
||
|
|
background: url(@/static/svg/adpz4-tcyzn.png) left top/100% 100% no-repeat;
|
||
|
|
cursor: pointer;
|
||
|
|
}
|
||
|
|
|
||
|
|
.rebate-guide .iconfont2 {
|
||
|
|
position: absolute;
|
||
|
|
top: -73rpx;
|
||
|
|
left: 50%;
|
||
|
|
transform: translateX(-50%);
|
||
|
|
font-size: 39rpx;
|
||
|
|
line-height: 1;
|
||
|
|
color: #999999;
|
||
|
|
cursor: pointer;
|
||
|
|
}
|
||
|
|
|
||
|
|
.rebate-guide .iconfont2::after {
|
||
|
|
content: "";
|
||
|
|
position: absolute;
|
||
|
|
bottom: -46rpx;
|
||
|
|
left: 50%;
|
||
|
|
width: 1px;
|
||
|
|
height: 51rpx;
|
||
|
|
background-color: #999999;
|
||
|
|
transform: translateX(-50%);
|
||
|
|
}
|
||
|
|
|
||
|
|
.rebate-guide .bottom .title {
|
||
|
|
font-size: 18rpx;
|
||
|
|
line-height: 25rpx;
|
||
|
|
text-align: center;
|
||
|
|
color: #ff6b00;
|
||
|
|
}
|
||
|
|
|
||
|
|
.rebate-guide .bottom .money {
|
||
|
|
margin-top: 2rpx;
|
||
|
|
font-weight: bold;
|
||
|
|
font-size: 30rpx;
|
||
|
|
line-height: 42rpx;
|
||
|
|
text-align: center;
|
||
|
|
color: #e76021;
|
||
|
|
}
|
||
|
|
|
||
|
|
.rebate-guide .top {
|
||
|
|
position: absolute;
|
||
|
|
right: 6rpx;
|
||
|
|
bottom: 0;
|
||
|
|
left: 2rpx;
|
||
|
|
height: 79rpx;
|
||
|
|
padding-top: 38rpx;
|
||
|
|
background: url(@/static/svg/am33n-r78lf.png) left top/100% 100% no-repeat;
|
||
|
|
text-align: center;
|
||
|
|
font-size: 0;
|
||
|
|
}
|
||
|
|
|
||
|
|
.rebate-guide .share-btn {
|
||
|
|
display: inline-block;
|
||
|
|
padding: 5rpx 18rpx;
|
||
|
|
border-radius: 13rpx;
|
||
|
|
background-color: #ffe8bb;
|
||
|
|
font-weight: bold;
|
||
|
|
font-size: 16rpx;
|
||
|
|
line-height: 1;
|
||
|
|
color: #dd2c1a;
|
||
|
|
}
|
||
|
|
</style>
|