295 lines
6.3 KiB
Vue
295 lines
6.3 KiB
Vue
<template>
|
||
<view class="container">
|
||
<view class="me" v-if="status == 'me'">
|
||
<image class="topImg" mode="widthFix" src="https://czg-qr-order.oss-cn-beijing.aliyuncs.com/InviteFriends/index_bg.png"></image>
|
||
<view class="contentBox">
|
||
<view class="content">
|
||
<view class="title">邀请1人可得，双方各得10元优惠券</view>
|
||
<view class="btn">邀请好友</view>
|
||
<view class="label o">新用户获得</view>
|
||
<view class="card">
|
||
<view class="left">
|
||
<view class="num"><text>￥</text>10.00</view>
|
||
<view class="mnum">满￥100.00可用</view>
|
||
</view>
|
||
<view class="right">
|
||
<view class="rtitle">邀新10元优惠券×1张</view>
|
||
<view class="time">领取后30天内有效</view>
|
||
</view>
|
||
</view>
|
||
<view class="label t">每邀请1个用户可获得</view>
|
||
<view class="card">
|
||
<view class="left">
|
||
<view class="num"><text>￥</text>10.00</view>
|
||
<view class="mnum">满￥100.00可用</view>
|
||
</view>
|
||
<view class="right">
|
||
<view class="rtitle">邀新10元优惠券×1张</view>
|
||
<view class="time">领取后30天内有效</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="number">
|
||
<view class="tab">
|
||
<view class="tabItem"
|
||
@click="tabClick(item)"
|
||
:class="{active:tabAcitve == item.type}"
|
||
v-for="(item,index) in tabList" :key="index"
|
||
>{{item.label}}{{item.num||0}}人</view>
|
||
</view>
|
||
<view class="tabContent">
|
||
<viwe class="tabContent_item">
|
||
<view class="top">
|
||
<view class="name">草莓大福</view>
|
||
<view class="status">草莓大福</view>
|
||
</view>
|
||
<view class="time">2023-22-33 17:33:99</view>
|
||
</viwe>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="he" v-else>
|
||
<image class="topImg" mode="widthFix" src="https://czg-qr-order.oss-cn-beijing.aliyuncs.com/InviteFriends/draw_bg.png"></image>
|
||
<view class="contentBox">
|
||
<view class="content">
|
||
<view class="title">此用户已死，勿Call</view>
|
||
<view class="label">[邀请你领取新人专享优惠券！]</view>
|
||
<view class="card">
|
||
<view class="left">
|
||
<view class="num"><text>￥</text>10.00</view>
|
||
<view class="mnum">满￥100.00可用</view>
|
||
</view>
|
||
<view class="right">
|
||
<view class="rtitle">邀新10元优惠券×1张</view>
|
||
<view class="time">领取后30天内有效</view>
|
||
</view>
|
||
</view>
|
||
<view class="btn">领券</view>
|
||
|
||
|
||
</view>
|
||
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
|
||
|
||
export default {
|
||
data() {
|
||
return {
|
||
show: false,
|
||
status: "he",
|
||
tabList: [
|
||
{label: '已邀请', type: 1, num: 0},
|
||
{label: '无效' ,type: 2, num: 0}
|
||
],
|
||
tabAcitve: 1,
|
||
};
|
||
},
|
||
onLoad(options) {
|
||
|
||
},
|
||
onShow() {
|
||
},
|
||
|
||
|
||
methods: {
|
||
tabClick(item) {
|
||
this.tabAcitve = item.type;
|
||
},
|
||
/**
|
||
* 解码
|
||
* @param {Object} url
|
||
* @param {Object} name
|
||
*/
|
||
getQueryString(url, name) {
|
||
var reg = new RegExp('(^|&|/?)' + name + '=([^&|/?]*)(&|/?|$)', 'i')
|
||
var r = url.substr(1).match(reg)
|
||
if (r != null) {
|
||
return r[2]
|
||
}
|
||
return null;
|
||
},
|
||
|
||
|
||
|
||
}
|
||
};
|
||
</script>
|
||
|
||
<style scoped lang="scss">
|
||
.container{
|
||
.topImg{
|
||
width: 100%;
|
||
}
|
||
.contentBox{
|
||
padding: 0 20rpx;
|
||
}
|
||
|
||
.content{
|
||
background: #FFFFFF;
|
||
border-radius: 18rpx 18rpx 18rpx 18rpx;
|
||
position: relative;
|
||
padding: 0 24rpx 32rpx 24rpx;
|
||
.title{
|
||
font-weight: bold;
|
||
font-size: 32rpx;
|
||
color: #333333;
|
||
text-align: center;
|
||
height: 112rpx;
|
||
line-height: 112rpx;
|
||
}
|
||
.btn{
|
||
width: 100%;
|
||
height: 84rpx;
|
||
line-height: 84rpx;
|
||
text-align: center;
|
||
background: #E3AD7F;
|
||
border-radius: 12rpx 12rpx 12rpx 12rpx;
|
||
font-weight: bold;
|
||
font-size: 32rpx;
|
||
color: #FFFFFF;
|
||
margin: 0 auto;
|
||
}
|
||
.label{
|
||
font-weight: bold;
|
||
font-size: 32rpx;
|
||
color: #333333;
|
||
margin-bottom: 32rpx;
|
||
}
|
||
.label.o{
|
||
margin-top: 66rpx;
|
||
}
|
||
.label.t{
|
||
margin-top: 48rpx;
|
||
}
|
||
.card{
|
||
display: flex;
|
||
align-items: flex-start;
|
||
padding: 32rpx 32rpx;
|
||
background: #FCF9F4;
|
||
border-radius: 18rpx 18rpx 18rpx 18rpx;
|
||
border: 2rpx solid #333333;
|
||
.left{
|
||
border-right: 1rpx dashed #333;
|
||
padding-right: 34rpx;
|
||
margin-right: 46rpx;
|
||
.num{
|
||
font-weight: 500;
|
||
font-size: 56rpx;
|
||
color: #333333;
|
||
margin-bottom: 30rpx;
|
||
text{
|
||
font-size: 32rpx;
|
||
}
|
||
}
|
||
.mnum{
|
||
font-weight: 400;
|
||
font-size: 24rpx;
|
||
color: #666666;
|
||
}
|
||
}
|
||
.right{
|
||
.rtitle{
|
||
font-weight: 500;
|
||
font-size: 28rpx;
|
||
color: #333333;
|
||
margin-bottom: 16rpx;
|
||
}
|
||
.time{
|
||
font-weight: 400;
|
||
font-size: 24rpx;
|
||
color: #999999;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
.me{
|
||
.content{
|
||
margin-top: -112rpx;
|
||
}
|
||
.number{
|
||
background: #FFFFFF;
|
||
border-radius: 18rpx 18rpx 18rpx 18rpx;
|
||
padding: 32rpx 24rpx 32rpx 24rpx;
|
||
.tab{
|
||
background: #333333;
|
||
border-radius: 12rpx 12rpx 12rpx 12rpx;
|
||
padding: 8rpx 16rpx;
|
||
display: flex;
|
||
align-items: center;
|
||
.tabItem{
|
||
width: 100%;
|
||
height: 100%;
|
||
font-weight: 500;
|
||
font-size: 28rpx;
|
||
color: #FFFFFF;
|
||
text-align: center;
|
||
padding: 8rpx 0;
|
||
}
|
||
.tabItem.active{
|
||
color: #333333;
|
||
background: #FFFFFF;
|
||
border-radius: 8rpx 8rpx 8rpx 8rpx;
|
||
}
|
||
}
|
||
.tabContent{
|
||
display: flex;
|
||
flex-direction: column;
|
||
padding-top: 32rpx;
|
||
.tabContent_item{
|
||
margin-bottom: 32rpx;
|
||
.top{
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
font-size: 28rpx;
|
||
color: #333333;
|
||
.name{
|
||
font-weight: bold;
|
||
}
|
||
.status{
|
||
|
||
}
|
||
}
|
||
.time{
|
||
font-weight: 400;
|
||
font-size: 24rpx;
|
||
color: #666666;
|
||
margin-top: 16rpx;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
.he{
|
||
.content{
|
||
margin-top: -210rpx;
|
||
padding-top: 48rpx;
|
||
.title{
|
||
padding-left: 32rpx;
|
||
font-weight: 500;
|
||
font-size: 28rpx;
|
||
color: #666666;
|
||
text-align: left;
|
||
height: initial;
|
||
line-height: initial;
|
||
margin-bottom: 18rpx;
|
||
}
|
||
.label{
|
||
padding-left: 32rpx;
|
||
font-weight: bold;
|
||
font-size: 28rpx;
|
||
color: #333333;
|
||
}
|
||
}
|
||
.btn{
|
||
margin-top: 64rpx;
|
||
}
|
||
}
|
||
}
|
||
</style> |