wanma-benteng
/
new-mshop-view
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

添加：邀请码激活及使用

This commit is contained in:
wuhui_zzw 2024-04-03 16:42:33 +08:00
parent 602714aafb
commit 2042a6d08b
5 changed files with 1114 additions and 37 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

17
api/user.js
View File

@ -715,7 +715,7 @@ export function writeOff(data) {
export function writeOffRecord(data) {
return request.get("coupon/write_off_record", data);
}
// 完成核销操作
// 兑换码 - 完成核销操作
export function vipExchangeCode(data) {
return request.post("sVip/vipExchangeCode", data);
}
@ -727,6 +727,15 @@ export function brokerageApplyFormalPost(data) {
export function brokerageApplyFormalGet() {
return request.get("user/brokerage_formal_info");
}
// 邀请码 - 信息获取
export function inviteCodeInfo(data) {
return request.get("sVip/getInviteInfo", data);
}
// 邀请码 - 信息获取
export function inviteCodePayment(data) {
return request.get("sVip/invitePayment", data);
}
// 邀请码 - 确认使用
export function inviteCodeConfirmUse(data) {
return request.get("sVip/inviteUse", data);
}

14
pages.json
View File

@ -598,7 +598,21 @@
"style": {
"navigationBarTitleText": "核销记录"
}
},
{
"path": "invitation_code/activation",
"style": {
"navigationBarTitleText": "邀请码激活"
}
},
{
"path": "invitation_code/use",
"style": {
"navigationBarTitleText": "邀请码使用"
}
}
]
},
{

104
pages/user/index.vue
View File

@ -342,7 +342,7 @@
import spread from "../../libs/spread";
let sysHeight = uni.getSystemInfoSync().statusBarHeight + 'px';
import { getMenuList, getUserInfo, setVisit, vipExchangeCode } from '@/api/user.js';
import { getMenuList, getUserInfo, setVisit, vipExchangeCode,inviteCodeInfo } from '@/api/user.js';
import { getVersion, getNavigation } from "@/api/public";
import { orderData } from '@/api/order.js'
import { mapGetters } from "vuex";
@ -842,37 +842,78 @@
wx.scanCode({
success(res) {
let result = res.result || '';
if(result){
uni.showModal({
title: '确认使用！',
content: '使用后当前兑换码将立即生效！是否确认使用？',
showCancel: true, // 是否显示取消按钮
cancelText: '取消', // 取消按钮文字
confirmText: '立即使用', // 确认按钮文字
success: (res) => {
if (res.confirm) {
vipExchangeCode({
exchange_code: result
}).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});
});
let params = result ? _this.$util.getUrlParams(result) : {};
let type = params.type || '';
// console.log("二维码内容", {result: result, params: params})
// 根据类型进行对应的处理
switch (type) {
// 邀请码
case 'invite':
inviteCodeInfo({
exchange_code: params.code
}).then(res => {
if (res.status == 200) {
let data = res.data || {};
let status = Number(data.status);
// 状态：0=未激活，1=已激活，2=已使用，3=作废
switch (status){
case 0:
uni.navigateTo({
url: '/pages/users/invitation_code/activation?code=' + params.code
})
break;
case 1:
uni.navigateTo({
url: '/pages/users/invitation_code/use?code=' + params.code
})
break;
case 2:
_this.$util.Tips({title: '邀请码已使用'});
break;
case 3:
_this.$util.Tips({title: '邀请码已作废'});
break;
default:
_this.$util.Tips({title: '无效的邀请码'});
}
}
if (res.cancel) {
console.log("取消")
}).catch(err => {
_this.$util.Tips({title: err});
});
break;
// 兑换码
case 'exchange':
uni.showModal({
title: '确认使用！',
content: '使用后当前兑换码将立即生效！是否确认使用？',
showCancel: true, // 是否显示取消按钮
cancelText: '取消', // 取消按钮文字
confirmText: '立即使用', // 确认按钮文字
success: (res) => {
if (res.confirm) {
vipExchangeCode({
exchange_code: result
}).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});
});
}
if (res.cancel) {
console.log("取消")
}
}
}
});
});
break;
}
},
fail(res) {
@ -881,9 +922,6 @@
})
},
},
onPullDownRefresh: function(){
this.getNav();

656
pages/users/invitation_code/activation.vue Normal file
View File

@ -0,0 +1,656 @@
<template>
<view class="page-content">
<!--主要内容-->
<view class="main-content">
<!--顶部内容-->
<view class="top">
<image class="top-img" :src="top_icon"></image>
<view class="top-title">{{ pay_info.money > 0 ? '确认支付' : '确认激活' }}</view>
</view>
<!-- 邀请码信息 -->
<view class="info">
<view class="bg-bar"></view>
<view class="info-content">
<view class="price" v-if="pay_info.money > 0">
<view class="price-unit">¥</view>
<view class="money">{{ pay_info.money || 0 }}</view>
</view>
<view class="coding">会员卡号：{{ code }}</view>
</view>
</view>
<!--支付相关-->
<view class="pay-info">
<!--支付方式-->
<view class="pay-type" v-if="pay_info.money > 0">
<view class="box-title">支付方式</view>
<view class="box-content">
<radio-group name="pay_type" @change="changePayType">
<view class="pay-label" v-for="(item,index) in pay_list" :key="index" v-if="item.payStatus==1">
<label>
<view class="pay-item">
<view class="left">
<view :class="['iconfont','animated',item.icon]"></view>
<view class="pay-item-info">
<view class="pay-name">{{ item.name }}</view>
<view class='tip'>
{{item.title}}
<block v-if="item.value == 'balance'">
{{now_money}}
</block>
</view>
</view>
</view>
<view class="right">
<radio :value="item.value" :checked="item.value == pay_info.pay_type ? true : false" />
</view>
</view>
</label>
</view>
</radio-group>
</view>
</view>
<!--支付按钮-->
<view class="pay-btn" v-if="pay_info.money > 0" @click="confirmPayment">确认支付</view>
<view class="pay-btn" v-else @click="confirmPayment">确认激活</view>
</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 {getUserInfo, inviteCodeInfo, inviteCodePayment} from "@/api/user";
export default {
name: 'business',
components: {
authorize,
},
computed: {
...mapGetters(['isLogin', 'uid', 'userInfo', 'viewColor'])
},
data() {
return {
code: '',
top_icon: '',
info: {},
// 登录相关
isAuto: false, //没有授权的不会自动授权
isShowAuth: false,//是否隐藏授权
// 支付相关
pay_info: {
money: 0.00,// 支付金额
pay_type: 'weixin',
// #ifdef H5
return_url: 'http://' + window.location.host + '/pages/users/order_list/index',
// #endif
},
//支付方式
pay_list: [
{
"name": "微信支付",
"icon": "icon-weixin2",
value: 'weixin',
title: '微信快捷支付',
payStatus: 1,
},
{
name: "支付宝支付",
icon: "icon-icon34",
// #ifdef H5 || APP-PLUS
value: 'alipay',
// #endif
// #ifdef MP
value: 'alipayQr',
// #endif
title: '支付宝支付',
payStatus: this.$store.getters.globalData.alipay_open
},
{
"name": "余额支付",
"icon": "icon-icon-test",
value: 'balance',
title: '可用余额:',
payStatus: this.$store.getters.globalData.yue_pay_status,
},
{
"name": "线下支付",
"icon": "icon-yinhangqia",
value: 'offline',
title: '线下支付',
payStatus: 2,
},
],
now_money: 0,
}
},
onReady() {
this.top_icon = `${HTTP_REQUEST_URL}/static/images/icon/invitation_code_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;
// 获取用户信息
getUserInfo().then(res => {
_this.now_money = res.data.now_money
});
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.pay_info.money = data.svip_price || 0;
break;
case 1:
this.errorAndBack('邀请码已支付并激活！');
break;
case 2:
this.errorAndBack('邀请码已使用！');
break;
case 3:
this.errorAndBack('邀请码已作废！');
break;
default:
this.errorAndBack('无有效邀请码！');
}
}
}).catch(err => {
_this.$util.Tips({title: err});
});
},
// 修改支付方式
changePayType(e){
this.pay_info.pay_type = e.detail.value || e.target.value;
},
// 确认付款
confirmPayment(){
let _this = this;
let payInfo = Object.assign({},_this.pay_info);
payInfo.code = _this.code;
console.log('支付类型',payInfo.pay_type)
if (payInfo.pay_type == 'weixin') {
// #ifdef H5
payInfo.pay_type = _this.$wechat.isWeixin() ? 'weixin' : 'h5'
// #endif
// #ifdef MP
payInfo.pay_type = 'routine'
// #endif
// #ifdef APP-PLUS
payInfo.pay_type = 'weixin'
// #endif
}
uni.showLoading({
title: '订单处理中...',
mask: true
});
inviteCodePayment(payInfo).then(res => {
if (res.status == 200) {
if(Number(_this.pay_info.money) > 0){
let status = res.data.status,
orderId = res.data.result.order_id,
callback_key = res.data.result.pay_key,
jsConfig = res.data.result.config;
// let goPages = '/pages/order_pay_status/index?order_id=' + orderId + '&msg=' + res.message;
let goPages = '/pages/user/index';
switch (status) {
case 'ORDER_EXIST':
case 'EXTEND_ORDER':
case 'PAY_ERROR':
case 'error':
return _this.$util.Tips({
title: res.message
}, {
tab: 1,
url: goPages
});
break;
case 'success':
return _this.$util.Tips({
title: res.message,
icon: 'success'
}, {
tab: 1,
url: goPages
});
break;
case 'alipay':
case "alipayQr":
uni.navigateTo({
url: '/pages/order_pay_back/index?keyCode=' + callback_key + '&url=' +
jsConfig
})
return;
break;
// #ifndef MP
case "wechat":
case "weixin":
case "weixinApp":
jsConfig.timeStamp = jsConfig.timestamp;
// #ifndef APP-PLUS
this.$wechat.pay(jsConfig).then(res => {
return _this.$util.Tips({
title: res.message,
icon: 'success'
}, {
tab: 1,
url: goPages
});
}).catch(res => {
if (res.errMsg == 'chooseWXPay:cancel') return _this.$util.Tips({
title: '取消支付'
}, {
tab: 1,
url: goPages + '&status=0'
});
})
// #endif
// #ifdef APP-PLUS
let mp_pay_name=''
if(uni.requestOrderPayment){
mp_pay_name='requestOrderPayment'
}else{
mp_pay_name='requestPayment'
}
uni[mp_pay_name]({
provider: 'wxpay',
orderInfo: jsConfig,
success: (e) => {
// let url = '/pages/order_pay_status/index?order_id=' + orderId + '&msg=支付成功';
let url = '/pages/user/index';
return _this.$util.Tips({
title: '支付成功',
icon: 'success'
}, {
tab: 1,
url: url
});
},
fail: (e) => {
// let url = '/pages/order_pay_status/index?order_id=' + orderId + '&msg=取消支付';
let url = '/pages/user/index';
return _this.$util.Tips({
title: '取消支付',
}, {
tab: 1,
url: url
});
},
complete: () => {
// let url = '/pages/order_pay_status/index?order_id=' + orderId + '&msg=取消支付';
let url = '/pages/user/index';
return _this.$util.Tips({
title: '',
}, {
tab: 1,
url: url
});
},
});
// #endif
break;
// #endif
// #ifdef MP
case "routine":
jsConfig.timeStamp = jsConfig.timestamp;
_this.toPay = true;
let mp_pay_name=''
if(uni.requestOrderPayment){
mp_pay_name='requestOrderPayment'
}else{
mp_pay_name='requestPayment'
}
uni[mp_pay_name]({
...jsConfig,
success: function(res) {
uni.hideLoading();
return _this.$util.Tips({
title: '支付成功',
icon: 'success'
}, {
tab: 1,
url: goPages
});
},
fail: function(e) {
// let pages = '/pages/order_pay_status/index?order_id=' + orderId + '&msg=取消支付'
let pages = '/pages/user/index';
return _this.$util.Tips({
title: '取消支付'
}, {
tab: 1,
// url: pages + '&status=0'
url: pages
});
},
})
break;
// #endif
case "balance":
//余额
return _this.$util.Tips({
title: res.msg
}, {
tab: 1,
url: goPages + '&status=1'
});
break;
// #ifdef H5
case 'h5':
let host = window.location.protocol + "//" + window.location.host;
// let url = `${host}/pages/order_pay_status/index?order_id=${orderId}&msg=${res.message}`
let url = '/pages/user/index';
let eUrl = encodeURIComponent(url)
let jsurl = jsConfig.mweb_url || jsConfig.h5_url
let locations = `${jsurl}&redirect_url=${eUrl}`
setTimeout(() => {
location.href = locations;
}, 100);
break;
// #endif
// #ifdef APP-PLUS
case 'alipayApp':
uni.requestPayment({
provider: 'alipay',
orderInfo: jsConfig,
success: (e) => {
return _this.$util.Tips({
title: '支付成功',
icon: 'success'
}, {
tab: 1,
url: goPages
});
},
fail: (e) => {
// let pages = '/pages/order_pay_status/index?order_id=' + orderId + '&msg=支付失败'
let pages = '/pages/user/index';
return _this.$util.Tips({
title: '支付失败'
}, {
tab: 1,
url: pages
});
},
complete: () => {
uni.hideLoading();
// let pages = '/pages/order_pay_status/index?order_id=' + orderId + '&msg=取消支付'
let pages = '/pages/user/index';
return _this.$util.Tips({
title: ''
}, {
tab: 1,
url: pages
});
},
});
break;
// #endif
default:
// let pages = '/pages/order_pay_status/index?order_id=' + orderId + '&msg=取消支付'
let pages = '/pages/user/index';
return _this.$util.Tips({
title: '取消支付'
}, {
tab: 1,
// url: pages + '&status=0'
url: pages
});
}
}else{
_this.$util.Tips({
title: '激活成功！',
},{
tab: 1,
url: '/pages/user/index'
});
}
}
}).catch(err => {
uni.hideLoading();
this.$util.Tips({
title: err
});
});
},
}
}
</script>
<style scoped lang="scss">
.page-content{
width: 100vw;
min-height: 100vh;
background-color: #f0f0f0;
// 顶部信息
.top{
width: 100%;
height: 300rpx;
background: #c10100;
display: inline-flex;
flex-direction: row;
flex-wrap: nowrap;
align-items: center;
justify-content: center;
padding-bottom: 30rpx;
.top-img{
width: 160rpx;
height: 160rpx;
margin-right: 15rpx;
}
.top-title{
font-size: 35rpx;
font-weight: bold;
color: #fcfdfb;
}
}
// 邀请码信息
.info{
padding: 0 10rpx;
position: relative;
top: -75rpx;
.bg-bar{
background: #a60807;
border-radius: 50rpx;
width: 100%;
height: 20rpx;
}
.info-content{
background: #ffffff;
margin: 0 20rpx;
position: relative;
top: calc(0rpx - (20rpx / 2));
.price{
display: inline-flex;
flex-direction: row;
flex-wrap: nowrap;
align-items: baseline;
justify-content: center;
width: 100%;
height: 130rpx;
border-bottom: 2rpx dashed #f8f8f8;
padding-top: 30rpx;
box-shadow: inset 0rpx 20rpx 30rpx 0rpx #feeeee;
.price-unit{
font-size: 28rpx;
}
.money{
font-size: 50rpx;
font-weight: bold;
}
}
.coding{
height: 90rpx;
line-height: 90rpx;
padding-left: 30rpx;
font-size: 26rpx;
color: #575757;
}
}
}
// 支付相关
.pay-info{
width: 100vw;
padding: 20rpx;
position: relative;
top: -75rpx;
.box-title{
margin: 30rpx 0;
height: 50rpx;
line-height: 50rpx;
font-size: 28rpx;
padding-left: 20rpx;
font-weight: bold;
position: relative;
}
.box-title:after{
content: "";
position: absolute;
left: 0;
top: calc((50rpx - 30rpx) / 2);
width: 10rpx;
height: 30rpx;
background: #1777ff;
}
// 支付方式
.pay-type{
.box-content{
.pay-label:not(:last-child){
margin-bottom: 20rpx;
}
.pay-item{
height: 120rpx;
padding: 20rpx;
width: 100%;
border: 2rpx solid #d9dce4;
border-radius: 15rpx;
display: inline-flex;
flex-direction: row;
flex-wrap: nowrap;
align-items: center;
justify-content: space-around;
.left{
width: calc(100% - 80rpx);
display: inline-flex;
flex-direction: row;
flex-wrap: nowrap;
align-items: center;
justify-content: flex-start;
.animated{
width: 44rpx;
height: 44rpx;
border-radius: 50%;
text-align: center;
line-height: 44rpx;
background-color: #fe960f;
color: #fff;
font-size: 30rpx;
margin-right: 15rpx;
}
.icon-weixin2 {
background-color: #41b035;
}
.icon-icon34 {
background-color: #4295D5;
}
.pay-item-info{
.pay-name{
text-align: left;
border-right: 1px solid #eee;
justify-content: left;
}
.tip{
text-align: left;
font-size: 26rpx;
color: #aaa;
}
}
}
.right{
width: 80rpx;
display: inline-flex;
flex-direction: row;
flex-wrap: nowrap;
align-items: center;
justify-content: flex-end;
}
}
}
}
// 确认支付
.pay-btn{
width: calc(100% - (20rpx * 2));
background: #1777ff;
color: #FFFFFF;
border-radius: 15rpx;
font-size: 30rpx;
text-align: center;
height: 70rpx;
line-height: 70rpx;
position: fixed;
left: 20rpx;
bottom: 150rpx;
}
.not-btn{
background-color: #909399;
color: #fff;
}
}
}
</style>

360
pages/users/invitation_code/use.vue Normal file
View File

@ -0,0 +1,360 @@
<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>