146 lines
3.5 KiB
Plaintext
146 lines
3.5 KiB
Plaintext
<style lang="less">
|
|
.invite-btn{
|
|
width: 152rpx;
|
|
height: 364rpx;
|
|
border: 4rpx solid #ffa841;
|
|
background-color: white;
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: center;
|
|
align-items: center;
|
|
}
|
|
.invite-btn .top-title {
|
|
color: #ffa841;
|
|
font-size: 12px;
|
|
margin-bottom: 20rpx;
|
|
}
|
|
.invite-btn .top-btn {
|
|
width: 82rpx;
|
|
height: 82rpx;
|
|
padding-left: 0;
|
|
padding-right: 0;
|
|
border: none;
|
|
position: relative;
|
|
}
|
|
.invite-btn .top-btn image {
|
|
width: 82rpx;
|
|
height: 82rpx;
|
|
}
|
|
.invite-btn .top-btn .avatar {
|
|
width: 82rpx;
|
|
height: 82rpx;
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
}
|
|
.invite-btn .top-btn .accept {
|
|
width: 42rpx;
|
|
height: 42rpx;
|
|
position: absolute;
|
|
top: 20rpx;
|
|
left: 20rpx;
|
|
}
|
|
.invite-btn .bottom-btn {
|
|
width: 105rpx;
|
|
height: 55rpx;
|
|
color: white;
|
|
font-size: 14px;
|
|
position: relative;
|
|
padding-left: 0;
|
|
padding-right: 0;
|
|
border: none;
|
|
}
|
|
.invite-btn .bottom-btn image{
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
.invite-btn .bottom-btn text{
|
|
width: 105rpx;
|
|
height: 40rpx;
|
|
line-height: 20px;
|
|
text-align: center;
|
|
color: #fff;
|
|
position: absolute;
|
|
top: 50%;
|
|
left: 50%;
|
|
margin-top: -20rpx;
|
|
margin-left: -50rpx;
|
|
}
|
|
.invite-btn .center-content{
|
|
height: 130rpx;
|
|
font-size: 14px;
|
|
color: #ffa841;
|
|
width: 118rpx;
|
|
line-height:1.2;
|
|
display: flex;
|
|
flex-flow: column;
|
|
align-items: center;
|
|
justify-content: center;
|
|
white-space: pre-line;
|
|
text-align:center;
|
|
}
|
|
button::after{ border: none;}
|
|
.gray {
|
|
-webkit-filter: grayscale(100%);
|
|
-moz-filter: grayscale(100%);
|
|
-ms-filter: grayscale(100%);
|
|
-o-filter: grayscale(100%);
|
|
filter: grayscale(100%);
|
|
filter: gray;
|
|
}
|
|
</style>
|
|
<template>
|
|
<view class="invite-btn">
|
|
<text class="top-title">邀请{{btnObj.index}}人</text>
|
|
<button class="top-btn {{ btnObj.status > 0 ? 'hidden' : ''}}" open-type="share">
|
|
<image src="{{btnImg}}"></image>
|
|
</button>
|
|
<view class="top-btn {{ btnObj.status === 0 ? 'hidden' : ''}}" @tap="inviteBtnClick">
|
|
<image src="{{btnImgBlank}}" ></image>
|
|
<image class="avatar {{ !btnObj.avatar ? 'hidden' : ''}}" src="{{btnObj.avatar}}" ></image>
|
|
<image class="accept {{ btnObj.avatar ? 'hidden' : ''}}" src="{{acceptImg}}" ></image>
|
|
</view>
|
|
<view class="center-content">
|
|
{{btnObj.contentTxt}}
|
|
</view>
|
|
<button class="bottom-btn {{ btnObj.status > 0 ? 'hidden' : ''}}" open-type="share">
|
|
<image src="{{bottomBtnImg}}"></image>
|
|
<text>{{btnObj.btnTitle}}</text>
|
|
</button>
|
|
<view class="bottom-btn {{ btnObj.status === 0 ? 'hidden' : ''}} {{btnObj.status === 2 ? 'gray': ''}}" @tap="inviteBtnClick">
|
|
<image src="{{bottomBtnActive}}"></image>
|
|
<text>{{btnObj.btnTitle}}</text>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
<script>
|
|
import wepy from 'wepy'
|
|
import images from '../common/images';
|
|
export default class InviteBtn extends wepy.component {
|
|
props = {
|
|
btnObj: {
|
|
index: 0,
|
|
btnTitle: '',
|
|
contentTxt: '',
|
|
avatar: '',
|
|
status: 0
|
|
}
|
|
}
|
|
data = {
|
|
btnImg: images.invite_btn,
|
|
btnImgBlank: images.invite_btn_back,
|
|
bottomBtnImg: images.invite_bottom,
|
|
bottomBtnActive: images.invite_bottom_active,
|
|
acceptImg: images.accept_img,
|
|
}
|
|
|
|
methods = {
|
|
inviteBtnClick () {
|
|
if (this.btnObj.status === 1) {
|
|
this.$emit('inviteBtnClick', this.index)
|
|
}
|
|
}
|
|
};
|
|
}
|
|
</script>
|