361 lines
9.7 KiB
Vue
361 lines
9.7 KiB
Vue
<template>
|
||
<view class="page-content">
|
||
<!--主要内容-->
|
||
<view class="main-content">
|
||
<!--顶部内容-->
|
||
<view class="top">
|
||
<view class="left">
|
||
<view class="title">领取奖励</view>
|
||
<view class="sub-title">领取你的<text class="sub-text">专属</text>奖励</view>
|
||
</view>
|
||
<image class="top-img" :src="use_invite_top_icon" mode="heightFix"></image>
|
||
</view>
|
||
<!--具体内容-->
|
||
<view class="main-box">
|
||
<!--邀请人信息-->
|
||
<view class="invite" v-if="info.activateUser">
|
||
<view class="title">我的邀请人</view>
|
||
<view class="user">
|
||
<image class="avatar" :src="info.activateUser.avatar"></image>
|
||
<view class="nickname">{{ info.activateUser.nickname || '' }}</view>
|
||
<view class="user-id">ID:{{ info.activateUser.uid }}</view>
|
||
</view>
|
||
</view>
|
||
<!--奖励列表-->
|
||
<view class="give-content" v-if="svip_info">
|
||
<view class="title">领取奖励</view>
|
||
<view class="give-list">
|
||
<view class="give-item" v-if="svip_info.vegetable_quota > 0">
|
||
<view class="left">
|
||
<image class="top-img" :src="use_invite_1" mode="heightFix"></image>
|
||
<view class="give-title">菜卡额度</view>
|
||
</view>
|
||
<view class="right">{{ svip_info.vegetable_quota }}</view>
|
||
</view>
|
||
<view class="give-item" v-if="svip_info.quota > 0">
|
||
<view class="left">
|
||
<image class="top-img" :src="use_invite_2" mode="heightFix"></image>
|
||
<view class="give-title">酒卡额度</view>
|
||
</view>
|
||
<view class="right">{{ svip_info.quota }}</view>
|
||
</view>
|
||
<view class="give-item" v-if="Object.values(svip_info.coupon || {}).length > 0">
|
||
<view class="left">
|
||
<image class="top-img" :src="use_invite_3" mode="heightFix"></image>
|
||
<view class="give-title">会员礼包</view>
|
||
</view>
|
||
<view class="right">{{ Object.values(svip_info.coupon || {}).length }}</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<!--领取按钮-->
|
||
<view class="confirm-btn" @click="confirmGet">确认领取</view>
|
||
</view>
|
||
<!-- 授权登录 -->
|
||
<authorize @onLoadFun="onLoadFun" :isAuto="isAuto" :isShowAuth="isShowAuth" @authColse="authClose"></authorize>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
import {mapGetters} from "vuex";
|
||
import authorize from '@/components/Authorize';
|
||
import { HTTP_REQUEST_URL } from '@/config/app.js';
|
||
import { inviteCodeInfo,inviteCodeConfirmUse } from "@/api/user";
|
||
|
||
export default {
|
||
name: 'business',
|
||
components: {
|
||
authorize,
|
||
},
|
||
computed: {
|
||
...mapGetters(['isLogin', 'uid', 'userInfo', 'viewColor'])
|
||
},
|
||
data() {
|
||
return {
|
||
code: '',
|
||
info: {},
|
||
svip_info: {},
|
||
// 登录相关
|
||
isAuto: false, //没有授权的不会自动授权
|
||
isShowAuth: false,//是否隐藏授权
|
||
// 图标
|
||
use_invite_1: '',
|
||
use_invite_2: '',
|
||
use_invite_3: '',
|
||
use_invite_top_icon: '',
|
||
}
|
||
},
|
||
onReady() {
|
||
this.use_invite_1 = `${HTTP_REQUEST_URL}/static/images/icon/use_invite_1.png`;
|
||
this.use_invite_2 = `${HTTP_REQUEST_URL}/static/images/icon/use_invite_2.png`;
|
||
this.use_invite_3 = `${HTTP_REQUEST_URL}/static/images/icon/use_invite_3.png`;
|
||
this.use_invite_top_icon = `${HTTP_REQUEST_URL}/static/images/icon/use_invite_top_icon.png`;
|
||
},
|
||
onLoad(options) {
|
||
this.code = options.code || '';
|
||
// 判断：如果不存在邀请码 返回个人中心
|
||
if(this.code.length <= 0){
|
||
this.errorAndBack('无有效邀请码！');
|
||
return false;
|
||
}
|
||
// 判断：是否登录
|
||
if (!this.isLogin) {
|
||
// 未登录 授权登录
|
||
this.isAuto = true;
|
||
this.isShowAuth = true
|
||
}else{
|
||
// 已登录 获取信息
|
||
this.init();
|
||
}
|
||
},
|
||
methods: {
|
||
// 授权回调
|
||
onLoadFun() {
|
||
if(this.isLogin){
|
||
this.isShowAuth = false;
|
||
this.init();
|
||
}
|
||
},
|
||
// 授权关闭
|
||
authClose(e) {
|
||
this.isShowAuth = e
|
||
},
|
||
// 授权成功 初始化
|
||
init () {
|
||
let _this = this;
|
||
_this.getInviteCodeInfo();
|
||
},
|
||
// 错误提示 并且返回个人中心
|
||
errorAndBack(tips){
|
||
this.$util.Tips({
|
||
title: tips,
|
||
},{tab:1,url:'/pages/user/index'});
|
||
},
|
||
// 获取邀请码信息
|
||
getInviteCodeInfo(){
|
||
let _this = this;
|
||
inviteCodeInfo({
|
||
exchange_code: _this.code
|
||
}).then(res => {
|
||
if (res.status == 200) {
|
||
let data = res.data || {};
|
||
let status = Number(data.status);
|
||
// 状态：0=未激活，1=已激活，2=已使用，3=作废
|
||
switch (status){
|
||
case 0:
|
||
this.errorAndBack('邀请码未激活！');
|
||
break;
|
||
case 1:
|
||
_this.info = data || {};
|
||
_this.svip_info = data.svip_info || {};
|
||
break;
|
||
case 2:
|
||
this.errorAndBack('邀请码已使用！');
|
||
break;
|
||
case 3:
|
||
this.errorAndBack('邀请码已作废！');
|
||
break;
|
||
default:
|
||
this.errorAndBack('无有效邀请码！');
|
||
}
|
||
}
|
||
}).catch(err => {
|
||
_this.$util.Tips({title: err});
|
||
});
|
||
},
|
||
// 确认领取
|
||
confirmGet(){
|
||
let _this = this;
|
||
inviteCodeConfirmUse({
|
||
exchange_code: _this.code
|
||
}).then(res => {
|
||
if (res.status == 200) {
|
||
uni.showModal({
|
||
title: '领取成功',
|
||
success: (res) => {
|
||
uni.navigateTo({
|
||
url: '/pages/annex/vip_center/index'
|
||
});
|
||
}
|
||
});
|
||
}
|
||
}).catch(err => {
|
||
_this.$util.Tips({title: err});
|
||
});
|
||
}
|
||
|
||
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style scoped lang="scss">
|
||
.page-content{
|
||
width: 100vw;
|
||
min-height: 100vh;
|
||
background-color: #f0f0f0;
|
||
// 顶部信息
|
||
.top{
|
||
background: #c10100;
|
||
width: 100%;
|
||
height: 300rpx;
|
||
border-bottom-left-radius: 50rpx;
|
||
border-bottom-right-radius: 50rpx;
|
||
display: inline-flex;
|
||
flex-direction: row;
|
||
flex-wrap: nowrap;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
padding: 0 60rpx 30rpx 60rpx;
|
||
.left{
|
||
display: inline-flex;
|
||
flex-direction: column;
|
||
flex-wrap: nowrap;
|
||
align-items: flex-start;
|
||
justify-content: center;
|
||
.title{
|
||
font-size: 40rpx;
|
||
font-weight: bold;
|
||
color: #ffffff;
|
||
}
|
||
.sub-title{
|
||
font-size: 26rpx;
|
||
color: #fcfcfc;
|
||
height: 50rpx;
|
||
line-height: 60rpx;
|
||
.sub-text{
|
||
color: #f9e70b!important;
|
||
}
|
||
}
|
||
}
|
||
.top-img{
|
||
height: 180rpx;
|
||
}
|
||
}
|
||
// 具体内容
|
||
.main-box{
|
||
padding: 0 30rpx;
|
||
position: relative;
|
||
top: -75rpx;
|
||
|
||
// 邀请人信息
|
||
.invite{
|
||
padding: 20rpx;
|
||
background: #ffffff;
|
||
border-radius: 15rpx;
|
||
margin-bottom: 30rpx;
|
||
.title{
|
||
width: 100%;
|
||
height: 70rpx;
|
||
line-height: 50rpx;
|
||
font-size: 30rpx;
|
||
font-weight: bold;
|
||
}
|
||
.user{
|
||
width: 100%;
|
||
display: inline-flex;
|
||
flex-direction: row;
|
||
justify-content: flex-start;
|
||
align-items: center;
|
||
padding: 20rpx;
|
||
border-radius: 10rpx;
|
||
background: #efbdbe;
|
||
.avatar{
|
||
width: 80rpx!important;
|
||
height: 80rpx!important;
|
||
border-radius: 50%;
|
||
border: 3rpx solid #ffffff;
|
||
}
|
||
.nickname{
|
||
width: calc(100% - (80rpx + 150rpx));
|
||
white-space: nowrap;
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
padding-left: 20rpx;
|
||
font-size: 28rpx;
|
||
font-weight: bold;
|
||
}
|
||
.user-id{
|
||
background: #c10100;
|
||
color: #f8efee;
|
||
height: 50rpx;
|
||
line-height: 50rpx;
|
||
border-radius: 10rpx;
|
||
font-size: 26rpx;
|
||
width: 150rpx;
|
||
text-align: center;
|
||
}
|
||
}
|
||
}
|
||
// 奖励信息
|
||
.give-content{
|
||
padding: 20rpx;
|
||
background: #ffffff;
|
||
border-radius: 15rpx;
|
||
.title{
|
||
width: 100%;
|
||
height: 70rpx;
|
||
line-height: 50rpx;
|
||
font-size: 30rpx;
|
||
font-weight: bold;
|
||
}
|
||
.give-list{
|
||
width: 100%;
|
||
display: inline-flex;
|
||
flex-direction: column;
|
||
flex-wrap: nowrap;
|
||
justify-content: flex-start;
|
||
align-items: center;
|
||
.give-item{
|
||
width: 100%;
|
||
display: inline-flex;
|
||
flex-direction: row;
|
||
flex-wrap: nowrap;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
.left{
|
||
display: inline-flex;
|
||
flex-direction: row;
|
||
flex-wrap: nowrap;
|
||
justify-content: flex-start;
|
||
align-items: center;
|
||
.top-img{
|
||
width: 60rpx;
|
||
height: 60rpx;
|
||
border-radius: 50%;
|
||
}
|
||
.give-title{
|
||
font-size: 28rpx;
|
||
padding-left: 30rpx;
|
||
}
|
||
}
|
||
.right{
|
||
color: #c40000;
|
||
width: 150rpx;
|
||
text-align: right;
|
||
}
|
||
}
|
||
.give-item:not(:last-child){
|
||
margin-bottom: 30rpx;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
// 提交按钮
|
||
.confirm-btn{
|
||
width: calc(100% - (30rpx * 2));
|
||
background: #c10100;
|
||
color: #FFFFFF;
|
||
border-radius: 15rpx;
|
||
font-size: 30rpx;
|
||
text-align: center;
|
||
height: 70rpx;
|
||
line-height: 70rpx;
|
||
position: fixed;
|
||
left: 20rpx;
|
||
bottom: 150rpx;
|
||
}
|
||
}
|
||
</style>
|