You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
855 lines
22 KiB
855 lines
22 KiB
<!-- 佣金中心 -->
|
|
<template>
|
|
<view style="width:100%;height: 100%;">
|
|
<view class="commission-wrap" :class="{ blur: !hasAuth }">
|
|
<!-- 标题栏 -->
|
|
<shopro-navbar back-icon-color="#fff" :background="{}"></shopro-navbar>
|
|
|
|
<!-- 用户资料 -->
|
|
<view class="user-card">
|
|
<view class="card-top u-flex u-row-between">
|
|
<view class="u-flex">
|
|
<view class="head-img-box"><image class="head-img" :src="userInfo.avatar" mode=""></image></view>
|
|
<view class="u-flex-col">
|
|
<view class="user-name">{{ userInfo.nickname }}</view>
|
|
<view class="user-info-box u-flex">
|
|
<view class="tag-box u-flex" v-if="commissionLv">
|
|
<image v-if="commissionLv.image" class="tag-img" :src="commissionLv.image" mode=""></image>
|
|
<text class="tag-title">{{ commissionLv.name }}</text>
|
|
<view v-show="showLv" class="u-iconfont uicon-arrow-right" style="color: #fff;font-size: 28rpx;"></view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class="u-flex-col">
|
|
<view class="u-flex-col u-col-center">
|
|
<button class="u-reset-button log-btn u-m-b-20" @tap="jump('/pages/app/commission/commission-log')">明细</button>
|
|
<button class="u-reset-button look-btn" @tap="showMoney = !showMoney">
|
|
<view class="u-iconfont" :class="showMoney ? 'uicon-eye-fill' : 'uicon-eye-off'" style="color: #fff;font-size: 50rpx;"></view>
|
|
</button>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 收益 -->
|
|
<view class="card-bottom u-flex" v-if="commissionWallet">
|
|
<view class="u-flex-1 ">
|
|
<view class="item-title">总收益</view>
|
|
<view class="item-detail">{{ showMoney ? commissionWallet.total_income || '0.00' : '***' }}</view>
|
|
</view>
|
|
<view class="u-flex-1 u-col-center">
|
|
<view class="item-title">待入账佣金</view>
|
|
<view class="item-detail">{{ showMoney ? commissionWallet.delay_money || '0.00' : '***' }}</view>
|
|
</view>
|
|
<view class="u-flex-1 u-col-center">
|
|
<view class="item-title">我的消费</view>
|
|
<view class="item-detail">{{ showMoney ? userInfo.total_consume || '0.00' : '***' }}</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 滚动明细 -->
|
|
<view class="commission-log" v-if="false">
|
|
<scroll-view scroll-y="true" @scrolltolower="loadMore" class="scroll-box log-scroll">
|
|
<view class="log-item-box u-flex u-row-between" v-for="item in commissionLog" :key="item.id" @tap="$u.toast(item.remark)">
|
|
<view class="log-item-wrap">
|
|
<view class="log-item u-flex u-ellipsis-1 u-col-center">
|
|
<view class="u-flex u-col-center ">
|
|
<image
|
|
class="log-img"
|
|
:src="item.oper_type !== 'user' ? logMap[item.oper_type] : item.oper ? item.oper.avatar : logMap['admin']"
|
|
mode=""
|
|
></image>
|
|
</view>
|
|
<view class="log-text u-ellipsis-1">{{ item.remark }}</view>
|
|
</view>
|
|
</view>
|
|
<text class="log-time">{{ $u.timeFrom(item.createtime) }}</text>
|
|
</view>
|
|
<!-- 更多 -->
|
|
<view class="loadmore-wrap" v-if="commissionLog.length"><u-loadmore :status="loadStatus" icon-type="flower" color="#f6f6f6" /></view>
|
|
</scroll-view>
|
|
</view>
|
|
|
|
<!-- 功能菜单 -->
|
|
<view class="menu-box u-flex">
|
|
<view class="menu-item u-flex-col u-col-center" v-for="(menu, index) in menuList" v-if="!menu.isAgentFrom" :key="index" @tap="jump(menu.path)">
|
|
<image class="item-img" :src="menu.img" mode=""></image>
|
|
<view class="item-title">{{ menu.title }}</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 分享组件 -->
|
|
<shopro-share v-model="showShare" posterType="user"></shopro-share>
|
|
|
|
<!-- 佣金中心权限验证 -->
|
|
<u-popup v-if="showAuthModal" class="auth-box" :mask="false" v-model="showAuthModal" mode="center" :mask-close-able="false" close-icon-pos="top-left" border-radius="20">
|
|
<view class="notice-box">
|
|
<view class="img-wrap"><image class="notice-img" :src="authNotice.img" mode=""></image></view>
|
|
<view class="notice-title">{{ authNotice.title }}</view>
|
|
<view class="notice-detail">{{ authNotice.detail }}</view>
|
|
<button class="u-reset-button notice-btn" @tap="onAuthBtn(authNotice.btnPath)">{{ authNotice.btnText }}</button>
|
|
<button class="u-reset-button back-btn" @tap="$Router.back()" v-if="!authNotice.hideBtn">返回</button>
|
|
<button class="u-reset-button back-btn" @tap="hasAuth = true" v-else>取消</button>
|
|
</view>
|
|
</u-popup>
|
|
|
|
<!-- 成为分销商条件 -->
|
|
<u-popup
|
|
v-if="showTerm"
|
|
class="into-agent-modal"
|
|
:bgStyle="{
|
|
background: 'none'
|
|
}"
|
|
v-model="showTerm"
|
|
mode="center"
|
|
:mask="false"
|
|
:mask-close-able="false"
|
|
>
|
|
<view class="condition-box u-flex u-row-center u-col-center">
|
|
<!-- 商品 -->
|
|
<view class="goods-condition u-flex-col u-col-center" v-if="showGoodsTerm">
|
|
<scroll-view class="card-wrap" scroll-y="true">
|
|
<view class="card-box u-flex u-m-x-10 u-m-y-10" v-for="item in goodsTermList" :key="item.id" @tap="jump('/pages/goods/detail', { id: item.id })">
|
|
<view class="img-wrap"><image class="goods-img" :src="item.image" mode=""></image></view>
|
|
<view class="detail u-fle u-row-between">
|
|
<view class="title u-ellipsis-2 u-m-b-10">{{ item.title }}</view>
|
|
<view class="sub u-ellipsis-1">{{ item.subtitle }}</view>
|
|
</view>
|
|
</view>
|
|
|
|
<view class="hack" style="height: 100rpx;"></view>
|
|
</scroll-view>
|
|
<view class="btn-box u-flex-col u-col-center u-p-20">
|
|
<button class="u-reset-button buy-btn u-m-b-20" @tap="$Router.back()">知道了</button>
|
|
<view class="tips">* 购买指定商品即可成为分销商</view>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 金额人数 -->
|
|
<view class="goods-condition u-flex u-row-between" v-if="showMoneyTerm">
|
|
<scroll-view class="card-wrap" scroll-y="true">
|
|
<view class="card-box u-flex u-m-x-10 u-m-y-10" :class="{ 'filter-card': userInfo.total_consume == moneyTermNum }">
|
|
<view class="img-wrap"><image class="goods-img" :src="$IMG_URL + '/imgs/user/commission_task_card.png'" mode=""></image></view>
|
|
<view class="detail">
|
|
<view class="title u-ellipsis-2 u-m-l-10">满足以下消费金额</view>
|
|
|
|
<!-- 进度条 -->
|
|
<view class="u-flex modal-progress ">
|
|
<view class="progress-box u-m-l-30 u-flex u-col-bottom">
|
|
<view class="cu-progress" style="width:150rpx ;">
|
|
<!-- 圆环 -->
|
|
<view
|
|
class="round-wrap"
|
|
v-if="userInfo.total_consume != moneyTermNum"
|
|
:style="[{ left: getProgress(userInfo.total_consume, moneyTermNum) + '%' }]"
|
|
>
|
|
<view class="round-inner"></view>
|
|
</view>
|
|
<u-line-progress
|
|
height="12"
|
|
:show-percent="false"
|
|
inactive-color="#7430EE"
|
|
:percent="getProgress(userInfo.total_consume, moneyTermNum)"
|
|
active-color="#C6A6FF"
|
|
></u-line-progress>
|
|
<!-- 已完成数 -->
|
|
<view
|
|
class="progress-num u-m-t-10"
|
|
v-if="userInfo.total_consume != moneyTermNum"
|
|
:style="[{ left: getProgress(userInfo.total_consume, moneyTermNum) + '%' }]"
|
|
>
|
|
{{ userInfo.total_consume }}
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class="progress-tip" v-if="userInfo.total_consume != moneyTermNum">{{ moneyTermNum }}</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</scroll-view>
|
|
<view class="btn-box u-flex-col u-p-20 u-col-center">
|
|
<button class="u-reset-button buy-btn u-m-b-10" @tap="$Router.back()">知道了</button>
|
|
<view class="tips">* 满足指定消费金额即可成为分销商</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</u-popup>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import { mapMutations, mapActions, mapState, mapGetters } from 'vuex';
|
|
import share from '@/shopro/share';
|
|
export default {
|
|
components: {},
|
|
data() {
|
|
return {
|
|
showShare: false, //是否显示分享海报
|
|
showMoney: true, //是否显示金额
|
|
hasAuth: true, //是否有权限
|
|
commissionLv: null, //分销商等级
|
|
commissionWallet: null, //分销商钱包
|
|
agentFrom: null, //是否显示我的资料
|
|
showLv: true,
|
|
commissionLog: [], //动态
|
|
loadStatus: 'loadmore', //loadmore-加载前的状态，loading-加载中的状态，nomore-没有更多的状态
|
|
currentPage: 1,
|
|
lastPage: 1,
|
|
logMap: {
|
|
system: this.$IMG_URL + '/imgs/commission/commission_base_notice.png',
|
|
admin: this.$IMG_URL + '/imgs/commission/commission_base_avatar.png'
|
|
},
|
|
showTerm: false, //条件弹窗
|
|
showGoodsTerm: false, //商品条件
|
|
showMoneyTerm: false, //金额条件
|
|
goodsTermList: [],
|
|
moneyTermNum: 0,
|
|
authNotice: {},
|
|
menuList: [
|
|
//menu
|
|
{
|
|
img: this.$IMG_URL + '/imgs/commission/commission_icon1.png',
|
|
title: '我的团队',
|
|
path: '/pages/app/commission/team'
|
|
},
|
|
{
|
|
img: this.$IMG_URL + '/imgs/commission/commission_icon2.png',
|
|
title: '佣金明细',
|
|
path: '/pages/app/commission/commission-log'
|
|
},
|
|
{
|
|
img: this.$IMG_URL + '/imgs/commission/commission_icon3.png',
|
|
title: '佣金订单',
|
|
path: '/pages/app/commission/order'
|
|
},
|
|
{
|
|
img: this.$IMG_URL + '/imgs/commission/commission_icon4.png',
|
|
title: '推广商品',
|
|
path: '/pages/app/commission/goods'
|
|
},
|
|
{
|
|
img: this.$IMG_URL + '/imgs/commission/commission_icon5.png',
|
|
title: '我的资料',
|
|
path: '/pages/app/commission/apply',
|
|
isAgentFrom: true
|
|
},
|
|
// {
|
|
// img: this.$IMG_URL + '/imgs/commission/commission_icon6.png',
|
|
// title: '分销排行',
|
|
// path: '/pages/app/commission/rankings'
|
|
// },
|
|
// {
|
|
// img: this.$IMG_URL + '/imgs/commission/commission_icon7.png',
|
|
// title: '邀请海报',
|
|
// path: ''
|
|
// },
|
|
// {
|
|
// img: this.$IMG_URL + '/imgs/commission/commission_icon8.png',
|
|
// title: '分享记录',
|
|
// path: '/pages/app/commission/share-log'
|
|
// }
|
|
]
|
|
};
|
|
},
|
|
computed: {
|
|
...mapGetters(['userInfo', 'agentInfo']),
|
|
showAuthModal: {
|
|
get() {
|
|
return !!this.authNotice.title && !this.hasAuth;
|
|
},
|
|
set(val) {
|
|
return val;
|
|
}
|
|
}
|
|
},
|
|
onShow() {
|
|
this.init();
|
|
},
|
|
onHide() {
|
|
this.commissionLog = [];
|
|
this.lastPage = 1;
|
|
this.currentPage = 1;
|
|
},
|
|
onLoad() {},
|
|
onPullDownRefresh() {
|
|
this.currentPage = 1;
|
|
this.lastPage = 1;
|
|
this.commissionLog = [];
|
|
this.init();
|
|
},
|
|
methods: {
|
|
...mapActions(['getAgent', 'getUserInfo']),
|
|
init() {
|
|
return Promise.all([this.getStatus(), this.getUserInfo()]).then(() => {
|
|
uni.stopPullDownRefresh();
|
|
});
|
|
},
|
|
|
|
// 跳转
|
|
jump(path, query) {
|
|
if (!path) {
|
|
this.showShare = true;
|
|
} else {
|
|
this.$Router.push({
|
|
path: path,
|
|
query: query
|
|
});
|
|
}
|
|
},
|
|
|
|
// 百分比
|
|
getProgress(sales, stock) {
|
|
let unit = '';
|
|
if (stock + sales > 0) {
|
|
let num = (sales / stock) * 100;
|
|
unit = num.toFixed(2);
|
|
} else {
|
|
unit = '0';
|
|
}
|
|
return Number(unit);
|
|
},
|
|
|
|
// 身份认证
|
|
getStatus() {
|
|
let that = this;
|
|
this.getAgent().then(res => {
|
|
uni.stopPullDownRefresh();
|
|
if (res.code === 1) {
|
|
that.authStatus(res.data);
|
|
that.commissionWallet = res.data.data;
|
|
that.commissionLv = res.data.data?.agent_level;
|
|
that.showLv = res.data.upgrade_display;
|
|
that.menuList.map(item => {
|
|
if (item.title === '我的资料') {
|
|
item.isAgentFrom = !res.data.agent_form;
|
|
}
|
|
});
|
|
that.commissionWallet && that.getLog();
|
|
}
|
|
});
|
|
},
|
|
|
|
// 分销动态
|
|
getLog() {
|
|
let that = this;
|
|
that.loadStatus = 'loading';
|
|
this.$http('commission.log', {
|
|
page: that.currentPage,
|
|
per_page: 5
|
|
}).then(res => {
|
|
if (res.code === 1) {
|
|
that.commissionLog = [...that.commissionLog, ...res.data.data];
|
|
that.lastPage = res.data.last_page;
|
|
that.loadStatus = that.currentPage < res.data.last_page ? 'loadmore' : 'nomore';
|
|
}
|
|
});
|
|
},
|
|
|
|
// 加载更多
|
|
loadMore() {
|
|
if (this.currentPage < this.lastPage) {
|
|
this.currentPage += 1;
|
|
this.getLog();
|
|
}
|
|
},
|
|
|
|
// 状态鉴权
|
|
authStatus(data) {
|
|
switch (data.status) {
|
|
case 'forbidden':
|
|
this.hasAuth = false;
|
|
this.showTerm = false;
|
|
this.authNotice = {
|
|
img: this.$IMG_URL + '/imgs/commission/auth_stop.png',
|
|
title: '抱歉！你的账户已被禁用',
|
|
detail: data.msg,
|
|
btnText: '联系客服',
|
|
btnPath: '/pages/public/chat/index'
|
|
};
|
|
break;
|
|
case 'pending':
|
|
this.hasAuth = false;
|
|
this.showTerm = false;
|
|
this.authNotice = {
|
|
img: this.$IMG_URL + '/imgs/commission/auth_stop.png',
|
|
title: '正在审核中！',
|
|
detail: data.msg,
|
|
btnText: '知道了',
|
|
btnPath: ''
|
|
};
|
|
break;
|
|
case 'needinfo':
|
|
this.hasAuth = false;
|
|
this.authNotice = {
|
|
img: this.$IMG_URL + '/imgs/commission/auth_perfect.png',
|
|
title: '待完善信息',
|
|
detail: data.msg,
|
|
btnText: '去完善',
|
|
btnPath: '/pages/app/commission/apply'
|
|
};
|
|
break;
|
|
case 'reject':
|
|
this.hasAuth = false;
|
|
this.showTerm = false;
|
|
this.authNotice = {
|
|
img: this.$IMG_URL + '/imgs/commission/auth_reject.png',
|
|
title: '申请驳回',
|
|
detail: data.msg,
|
|
btnText: '修改资料',
|
|
btnPath: '/pages/app/commission/apply'
|
|
};
|
|
break;
|
|
case 'close':
|
|
this.hasAuth = false;
|
|
this.showTerm = false;
|
|
this.authNotice = {
|
|
img: this.$IMG_URL + '/imgs/commission/auth_close.png',
|
|
title: '分销中心已关闭',
|
|
detail: data.msg,
|
|
btnText: '我知道了',
|
|
btnPath: ''
|
|
};
|
|
break;
|
|
case 'freeze':
|
|
this.hasAuth = false;
|
|
this.showTerm = false;
|
|
this.authNotice = {
|
|
img: this.$IMG_URL + '/imgs/commission/auth_freeze.png',
|
|
title: '抱歉！你的账户已被冻结',
|
|
detail: data.msg,
|
|
btnText: '联系客服',
|
|
btnPath: '/pages/public/chat/index',
|
|
hideBtn: true
|
|
};
|
|
break;
|
|
case null:
|
|
this.hasAuth = false;
|
|
this.showTerm = true;
|
|
if (data.become_agent) {
|
|
if (data.become_agent.type === 'goods') {
|
|
this.showGoodsTerm = true;
|
|
this.getGoodsTermList(data.become_agent.value);
|
|
}
|
|
if (data.become_agent.type === 'consume') {
|
|
this.showMoneyTerm = true;
|
|
this.moneyTermNum = data.become_agent.value;
|
|
}
|
|
}
|
|
break;
|
|
default:
|
|
this.hasAuth = true;
|
|
this.showTerm = false;
|
|
}
|
|
},
|
|
|
|
// 成为分销商，商品列表
|
|
getGoodsTermList(ids) {
|
|
let that = this;
|
|
that.$http('goods.lists', {
|
|
goods_ids: ids
|
|
}).then(res => {
|
|
if (res.code === 1) {
|
|
that.goodsTermList = res.data.data;
|
|
}
|
|
});
|
|
},
|
|
|
|
// 权限
|
|
onAuthBtn(path) {
|
|
path
|
|
? this.$Router.push({
|
|
path: path
|
|
})
|
|
: this.$Router.back();
|
|
}
|
|
}
|
|
};
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.commission-wrap {
|
|
background: url($IMG_URL+'/imgs/commission/commission_bg1.jpg') no-repeat;
|
|
background-size: cover;
|
|
height: 100%;
|
|
width: 100%;
|
|
background-position: center center;
|
|
transition: all 0.3s ease-in-out 0s;
|
|
overflow: hidden;
|
|
}
|
|
// 进度条
|
|
.progress-box {
|
|
.progress-tip {
|
|
font-size: 24rpx;
|
|
font-weight: 500;
|
|
color: #c7b2ff;
|
|
}
|
|
.progress-num {
|
|
font-size: 24rpx;
|
|
position: absolute;
|
|
color: #c7b2ff;
|
|
bottom: -30rpx;
|
|
white-space: nowrap;
|
|
}
|
|
.round-wrap {
|
|
width: 30rpx;
|
|
height: 30rpx;
|
|
border: 2rpx solid #5c3cff;
|
|
background: linear-gradient(0deg, #a36fff 0%, #846fff 100%);
|
|
border-radius: 50%;
|
|
position: absolute;
|
|
bottom: -6rpx;
|
|
transform: translateY(-50%);
|
|
left: 0;
|
|
margin-left: -15rpx;
|
|
.round-inner {
|
|
width: 20rpx;
|
|
height: 20rpx;
|
|
border: 2rpx solid #5c3cff;
|
|
background: linear-gradient(0deg, #a36fff 0%, #846fff 100%);
|
|
border-radius: 50%;
|
|
position: absolute;
|
|
top: 50%;
|
|
left: 50%;
|
|
transform: translate(-50%, -50%);
|
|
}
|
|
}
|
|
}
|
|
|
|
// 佣金中心权限验证蒙层
|
|
.blur {
|
|
filter: blur(20rpx);
|
|
transition: all 0.3s ease-in-out 0s;
|
|
}
|
|
|
|
.auth-box {
|
|
width: 100%;
|
|
height: 100%;
|
|
background: none;
|
|
.notice-box {
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: center;
|
|
align-items: center;
|
|
background-color: #fff;
|
|
width: 612rpx;
|
|
min-height: 658rpx;
|
|
background: #ffffff;
|
|
padding: 30rpx;
|
|
border-radius: 20rpx;
|
|
.img-wrap {
|
|
margin-bottom: 50rpx;
|
|
.notice-img {
|
|
width: 180rpx;
|
|
height: 170rpx;
|
|
}
|
|
}
|
|
.notice-title {
|
|
font-size: 35rpx;
|
|
font-weight: bold;
|
|
color: #46351b;
|
|
margin-bottom: 28rpx;
|
|
}
|
|
.notice-detail {
|
|
font-size: 28rpx;
|
|
font-weight: 400;
|
|
color: #999999;
|
|
line-height: 36rpx;
|
|
margin-bottom: 50rpx;
|
|
}
|
|
.notice-btn {
|
|
width: 492rpx;
|
|
line-height: 70rpx;
|
|
background: linear-gradient(-90deg, #a36fff, #5336ff);
|
|
box-shadow: 0px 7rpx 11rpx 2rpx rgba(124, 103, 214, 0.34);
|
|
border-radius: 35rpx;
|
|
font-size: 28rpx;
|
|
font-weight: 500;
|
|
color: #ffffff;
|
|
margin-bottom: 10rpx;
|
|
}
|
|
.back-btn {
|
|
width: 492rpx;
|
|
line-height: 70rpx;
|
|
font-size: 28rpx;
|
|
font-weight: 500;
|
|
color: #c5b8fb;
|
|
background: none;
|
|
}
|
|
}
|
|
}
|
|
|
|
// 成为分销商
|
|
.into-agent-modal {
|
|
.condition-box {
|
|
width: 640rpx;
|
|
height: 786rpx;
|
|
background: url($IMG_URL+'/imgs/commission/into_commission.png') no-repeat;
|
|
background-size: 100% 100%;
|
|
}
|
|
.goods-condition {
|
|
width: 484rpx;
|
|
height: 580rpx;
|
|
padding: 80rpx 0 30rpx;
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: center;
|
|
align-items: center;
|
|
position: relative;
|
|
.card-wrap {
|
|
width: 484rpx;
|
|
height: 460rpx;
|
|
padding: 10rpx;
|
|
padding-bottom: 30rpx;
|
|
}
|
|
.modal-progress {
|
|
.progress-tip {
|
|
font-size: 24rpx;
|
|
}
|
|
.progress-box {
|
|
margin-right: 10rpx;
|
|
.cu-progress {
|
|
width: 200rpx;
|
|
position: relative;
|
|
.round-wrap {
|
|
width: 20rpx;
|
|
height: 20rpx;
|
|
}
|
|
.round-inner {
|
|
width: 10rpx;
|
|
height: 10rpx;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
.card-box {
|
|
background: rgba(#c3b6ff, 0.3);
|
|
padding: 10rpx;
|
|
border-radius: 10rpx;
|
|
.img-wrap {
|
|
background: #fff;
|
|
width: 110rpx;
|
|
height: 110rpx;
|
|
border-radius: 10rpx;
|
|
margin-right: 20rpx;
|
|
|
|
.goods-img {
|
|
width: 110rpx;
|
|
height: 110rpx;
|
|
border-radius: 10rpx;
|
|
}
|
|
}
|
|
.detail {
|
|
height: 110rpx;
|
|
width: 280rpx;
|
|
align-items: flex-start;
|
|
.title {
|
|
font-size: 20rpx;
|
|
font-weight: 500;
|
|
color: #333333;
|
|
line-height: 35rpx;
|
|
text-align: left;
|
|
}
|
|
.sub {
|
|
font-size: 16rpx;
|
|
font-weight: 500;
|
|
color: #9281e2;
|
|
text-align: left;
|
|
width: 280rpx;
|
|
}
|
|
}
|
|
}
|
|
.filter-card {
|
|
filter: grayscale(100%);
|
|
filter: gray;
|
|
}
|
|
.btn-box {
|
|
background-color: #fff;
|
|
width: 100%;
|
|
position: absolute;
|
|
bottom: 0;
|
|
.buy-btn {
|
|
width: 390rpx;
|
|
line-height: 60rpx;
|
|
background: linear-gradient(-90deg, #a36fff, #5336ff);
|
|
box-shadow: 0px 7rpx 11rpx 2rpx rgba(124, 103, 214, 0.34);
|
|
border-radius: 35rpx;
|
|
font-size: 24rpx;
|
|
font-weight: 500;
|
|
color: #ffffff;
|
|
}
|
|
.tips {
|
|
font-size: 20rpx;
|
|
font-weight: 500;
|
|
color: #9281e2;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
// 用户资料卡片
|
|
.user-card {
|
|
width: 690rpx;
|
|
min-height: 350rpx;
|
|
border-radius: 14rpx;
|
|
margin: 30rpx;
|
|
background: url($IMG_URL+'/imgs/commission/commission_card_bg.png') no-repeat;
|
|
background-size: 100% 100%;
|
|
padding-top: 10rpx;
|
|
.card-top {
|
|
padding: 40rpx 40rpx 30rpx;
|
|
margin-bottom: 30rpx;
|
|
border-bottom: 1px solid rgba(#fff, 0.12);
|
|
.user-name {
|
|
font-size: 26rpx;
|
|
font-weight: 500;
|
|
color: #ffffff;
|
|
line-height: 30rpx;
|
|
margin-bottom: 20rpx;
|
|
}
|
|
.log-btn {
|
|
width: 83rpx;
|
|
line-height: 41rpx;
|
|
border: 1rpx solid rgba(#ffffff, 0.33);
|
|
border-radius: 21rpx;
|
|
font-size: 22rpx;
|
|
font-weight: 400;
|
|
color: #ffffff;
|
|
}
|
|
.look-btn {
|
|
color: #fff;
|
|
font-size: 40rpx;
|
|
}
|
|
}
|
|
.head-img-box {
|
|
margin-right: 26rpx;
|
|
width: 76rpx;
|
|
height: 76rpx;
|
|
border-radius: 50px;
|
|
position: relative;
|
|
background: #fff;
|
|
padding: 10rpx;
|
|
background-clip: padding-box;
|
|
.head-img {
|
|
width: 66rpx;
|
|
height: 66rpx;
|
|
border-radius: 50%;
|
|
position: absolute;
|
|
top: 50%;
|
|
left: 50%;
|
|
transform: translate(-50%, -50%);
|
|
}
|
|
}
|
|
.user-info-box {
|
|
.tag-box {
|
|
background: rgba(0, 0, 0, 0.2);
|
|
border-radius: 21rpx;
|
|
line-height: 38rpx;
|
|
|
|
.tag-img {
|
|
width: 36rpx;
|
|
height: 36rpx;
|
|
border-radius: 50%;
|
|
}
|
|
|
|
.tag-title {
|
|
font-size: 20rpx;
|
|
padding: 0 10rpx;
|
|
font-weight: 500;
|
|
color: rgba(255, 255, 255, 1);
|
|
line-height: 36rpx;
|
|
}
|
|
}
|
|
}
|
|
.card-bottom {
|
|
margin: 0 40rpx 40rpx;
|
|
.item-title {
|
|
font-size: 24rpx;
|
|
|
|
font-weight: 400;
|
|
color: #ffffff;
|
|
line-height: 30rpx;
|
|
}
|
|
.item-detail {
|
|
font-size: 40rpx;
|
|
font-family: DIN;
|
|
font-weight: 500;
|
|
color: #fefefe;
|
|
line-height: 30rpx;
|
|
margin-top: 30rpx;
|
|
}
|
|
}
|
|
}
|
|
// 滚动明细
|
|
.commission-log {
|
|
min-height: 450rpx;
|
|
padding: 0 30rpx;
|
|
margin-top: 60rpx;
|
|
.log-scroll {
|
|
height: 380rpx;
|
|
.log-item-box {
|
|
height: 78rpx;
|
|
.log-time {
|
|
margin-left: 30rpx;
|
|
font-size: 22rpx;
|
|
font-weight: 500;
|
|
color: #fefefe;
|
|
text-align: right;
|
|
}
|
|
}
|
|
.loadmore-wrap {
|
|
line-height: 80rpx;
|
|
}
|
|
.log-item {
|
|
height: 48rpx;
|
|
background: rgba(#5e49c3, 0.4);
|
|
border-radius: 24rpx;
|
|
padding-left: 6rpx;
|
|
padding-right: 20rpx;
|
|
.log-img {
|
|
width: 40rpx;
|
|
height: 40rpx;
|
|
border-radius: 50%;
|
|
margin-right: 10rpx;
|
|
}
|
|
.log-text {
|
|
font-size: 22rpx;
|
|
font-weight: 500;
|
|
color: #fefefe;
|
|
max-width: 480rpx;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
// 功能菜单
|
|
.commission-bottom-bg {
|
|
position: fixed;
|
|
width: 100%;
|
|
bottom: 0;
|
|
z-index: 6;
|
|
}
|
|
.menu-box {
|
|
flex-wrap: wrap;
|
|
margin: 30rpx;
|
|
position: fixed;
|
|
width: 750rpx;
|
|
bottom: 0;
|
|
z-index: 10;
|
|
.menu-item {
|
|
width: (690rpx/4);
|
|
margin-bottom: 50rpx;
|
|
.item-img {
|
|
width: 68rpx;
|
|
height: 68rpx;
|
|
}
|
|
.item-title {
|
|
font-size: 24rpx;
|
|
font-weight: 600;
|
|
color: #fff;
|
|
line-height: 30rpx;
|
|
margin-top: 16rpx;
|
|
}
|
|
}
|
|
}
|
|
</style>
|
|
|