391 lines
9.2 KiB
Vue
391 lines
9.2 KiB
Vue
<template>
|
||
<view class="container">
|
||
<view class="me" v-if="is_type == 'me'">
|
||
<image class="topImg" mode="widthFix" :src="InviteFriendsData.invitedImg"></image>
|
||
<view class="contentBox">
|
||
<view class="content">
|
||
<view class="title">{{InviteFriendsData.title}}</view>
|
||
<button class="btn" open-type="share" @click="onShareAppMessage">邀请好友</button>
|
||
<view class="label o">新用户获得</view>
|
||
<view class="card" v-for="(item,index) in InviteFriendsData.newCoupons">
|
||
<view class="left">
|
||
<view class="num"><text>￥</text>{{item.discountAmount}}</view>
|
||
<view class="mnum">满￥{{item.fullAmount}}可用</view>
|
||
</view>
|
||
<view class="right">
|
||
<view class="rtitle">{{item.couponName}}</view>
|
||
<view class="time">{{item.useDetail}}</view>
|
||
</view>
|
||
</view>
|
||
<view class="label t">每邀请{{InviteFriendsData.invitedNum}}个用户可获得</view>
|
||
<view class="card" v-for="(item,index) in InviteFriendsData.rewardCoupons">
|
||
<view class="left">
|
||
<view class="num"><text>￥</text>{{item.discountAmount}}</view>
|
||
<view class="mnum">满￥{{item.fullAmount}}可用</view>
|
||
</view>
|
||
<view class="right">
|
||
<view class="rtitle">{{item.couponName}}</view>
|
||
<view class="time">{{item.useDetail}}</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" v-for="(item,index) in shareRecordData.list" :key="index">
|
||
<view class="top">
|
||
<view class="name">{{item.invitedName}}</view>
|
||
<view class="status" :style="{color: isSuccess ? '#333' : '#FF534B'}">{{
|
||
isSuccess ? '邀请成功' : '未邀请成功'
|
||
}}</view>
|
||
</view>
|
||
<view class="time">{{item.createTime}}</view>
|
||
</viwe>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="he" v-else>
|
||
<image class="topImg" mode="widthFix" :src="InviteFriendsData.beInvitedImg"></image>
|
||
<view class="contentBox">
|
||
<view class="content">
|
||
<view class="title">{{userInfo.nickName}}</view>
|
||
<view class="label">[邀请你领取新人专享优惠券！]</view>
|
||
<view class="card" v-for="(item,index) in shareOpenData.newCoupons">
|
||
<view class="left">
|
||
<view class="num"><text>￥</text>{{item.discountAmount}}</view>
|
||
<view class="mnum">满￥{{item.fullAmount}}可用</view>
|
||
</view>
|
||
<view class="right">
|
||
<view class="rtitle">{{item.couponName}}</view>
|
||
<view class="time">{{item.useDetail}}</view>
|
||
</view>
|
||
</view>
|
||
<view class="btn" v-if="shareOpenData.status == 1" @click="shareReceive">领券</view>
|
||
<view class="btn" v-else style="background-color: #999;">领券</view>
|
||
|
||
|
||
</view>
|
||
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
|
||
|
||
export default {
|
||
data() {
|
||
return {
|
||
show: false,
|
||
is_type: "",
|
||
tabList: [
|
||
{label: '已邀请', type: 1, num: 0},
|
||
{label: '无效' ,type: 2, num: 0}
|
||
],
|
||
tabAcitve: 1,
|
||
userInfo: uni.cache.get('userInfo'),
|
||
shopId: null,
|
||
shareId: null,
|
||
invitedId: null,
|
||
InviteFriendsData: null,
|
||
shareRecordData: null,
|
||
shareOpenData: null,
|
||
isSuccess: true,
|
||
share: {
|
||
title: "",
|
||
path: "",
|
||
imageUrl: ""
|
||
}
|
||
};
|
||
},
|
||
onLoad(options) {
|
||
console.log(options)
|
||
if ( options.shopId ) { this.shopId = options.shopId; }
|
||
if ( options.is_type ) { this.is_type = options.is_type; }
|
||
if ( options.shareId ) { this.shareId = options.shareId; }
|
||
if ( options.invitedId ) { this.invitedId = options.invitedId; }
|
||
this.is_type = 'he'
|
||
this.invitedId = "113"
|
||
this.shareId = "1"
|
||
this.shopId = "11"
|
||
if ( this.is_type == 'he') {
|
||
this.shareHeOpen()
|
||
}
|
||
this.getByShopId();
|
||
},
|
||
onShow() {
|
||
},
|
||
|
||
|
||
methods: {
|
||
onShareAppMessage(res) {
|
||
if (res.from === 'button') {// 来自页面内分享按钮
|
||
console.log(res.target)
|
||
}
|
||
return this.share
|
||
},
|
||
async getByShopId() {
|
||
let params = {
|
||
shopId : this.shopId
|
||
}
|
||
let res = await this.api.getByShopId(params)
|
||
if ( res.code == 0 ) {
|
||
this.InviteFriendsData = res.data;
|
||
this.share.title = res.data.title
|
||
this.share.path = `/pagesInviteFriends/index/index?shopId=${this.shopId}&is_type=he&shareId=${this.InviteFriendsData.id}&invitedId=${uni.cache.get('userInfo').id}`
|
||
this.share.imageUrl = res.data.shareImg
|
||
this.shareRecord();
|
||
}
|
||
},
|
||
|
||
/**
|
||
* 邀请记录
|
||
*/
|
||
async shareRecord() {
|
||
let params = {
|
||
shareId : this.InviteFriendsData.id,
|
||
invitedId : uni.cache.get('userInfo').id,
|
||
shopId : this.shopId,
|
||
isSuccess : this.isSuccess,
|
||
}
|
||
let res = await this.api.shareRecord(params)
|
||
if ( res.code == 0 ) {
|
||
this.shareRecordData = res.data;
|
||
this.tabList[0].num = res.data.isSuccess;
|
||
this.tabList[1].num = res.data.isFail;
|
||
}
|
||
},
|
||
|
||
/**
|
||
* 被邀请人进入页面调用接口
|
||
*/
|
||
async shareHeOpen() {
|
||
let params = {
|
||
shareId : this.shareId,
|
||
invitedId : this.invitedId,
|
||
// beInvitedId : uni.cache.get('userInfo').id,
|
||
beInvitedId : 119,
|
||
shopId : this.shopId,
|
||
}
|
||
let res = await this.api.shareHeOpen(params)
|
||
if ( res.code == 0 ) {
|
||
this.shareOpenData = res.data;
|
||
}
|
||
},
|
||
|
||
/**
|
||
* 领取优惠券
|
||
*/
|
||
async shareReceive() {
|
||
let params = {
|
||
shareId : this.shareId,
|
||
invitedId : this.invitedId,
|
||
beInvitedId : uni.cache.get('userInfo').id,
|
||
shopId : this.shopId,
|
||
}
|
||
let res = await this.api.shareReceive(params)
|
||
if ( res.code == 0 ) {
|
||
uni.showToast({
|
||
title: "领取成功",
|
||
icon: "none",
|
||
})
|
||
setTimeout(()=>{
|
||
uni.pro.redirectTo('/pages/user/coupon', {
|
||
type: 1
|
||
})
|
||
},1000)
|
||
}
|
||
},
|
||
tabClick(item) {
|
||
this.tabAcitve = item.type;
|
||
},
|
||
|
||
|
||
|
||
}
|
||
};
|
||
</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;
|
||
margin-bottom: 32rpx;
|
||
.left{
|
||
border-right: 1rpx dashed #333;
|
||
padding-right: 34rpx;
|
||
margin-right: 46rpx;
|
||
flex-shrink: 0;
|
||
.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;
|
||
margin-top: 32rpx;
|
||
.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> |