bnyer
/
bnyer-cloud-hub
1
0
Fork 0
Code Issues Pull Requests Projects Releases 1 Wiki Activity
Browse Source

Merge remote-tracking branch 'origin/master'

feature-1.0
Penny 3 years ago
parent
e89bf6635a aef8ce125a
commit
98f2631278
11 changed files with 440 additions and 318 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 99
      components/money-view/money-view.vue
  2. 5
      pages.json
  3. 6
      pages/index/index.vue
  4. 2
      pages/login/login.vue
  5. 478
      pages/profit/profit.vue
  6. 4
      pages/userInfo/userInfo.vue
  7. BIN
      static/advertIcon.png
  8. BIN
      static/income-background.png
  9. BIN
      static/inviteIcon.png
  10. BIN
      static/material.png
  11. BIN
      static/upload.png

99
components/money-view/money-view.vue
View File

@ -0,0 +1,99 @@
<template>
<view v-if="hidden"
class="money-format-view money-hidden"
:style="{fontSize: size + 'rpx', color: color}"
>
<span class="character-span" v-if="character">{{ character }}</span> {{ hiddenValue }}
</view>
<view v-else
class="money-format-view money-show"
:style="{fontSize: size + 'rpx', color: color}"
>
<span class="character-span" v-if="character">{{ character }}</span> {{ moneyValue }}
</view>
</template>
<script>
export default {
name: "MoneyView",
props: {
character: {
type: String,
default: undefined
},
color:{
type: String,
default: '#FFF'
},
size: {
type: Number,
default: 24
},
value: {
type: Number,
default: 0.00
},
hidden: {
type: Boolean,
default: false
}
},
data() {
return {
moneyValue: '0.00',
hiddenValue: '******',
}
},
methods: {
thousandFormat(num) {
const len = num.length
return len <= 3 ? num : this.thousandFormat(num.substr(0, len - 3)) + split + num.substr(len - 3, 3)
},
moneyFormat(num, decimal = 2, split = ',') {
/*
parameter：
num：格式化目标数字
decimal：保留几位小数，默认2位
split：千分位分隔符，默认为,
moneyFormat(123456789.87654321, 2, ',') // 123,456,789.88
*/
if (isFinite(num)) { // num是数字
if (num === 0) { // 为0
return "0.00"
} else { // 非0
let res = 0;
const dotIndex = String(num).indexOf('.');
if (dotIndex === -1) { // 整数
res = this.thousandFormat(String(num)) + '.' + '0'.repeat(decimal)
} else { // 非整数
// js四舍五入 Math.round()：正数时4舍5入，负数时5舍6入
// Math.round(1.5) = 2
// Math.round(-1.5) = -1
// Math.round(-1.6) = -2
// 保留decimals位小数
const numStr = String((Math.round(num * Math.pow(10, decimal)) / Math.pow(10, decimal)).toFixed(decimal)) // 四舍五入，然后固定保留2位小数
const decimals = numStr.slice(dotIndex, dotIndex + decimal + 1) // 截取小数位
res = this.thousandFormat(numStr.slice(0, dotIndex)) + decimals
}
return res
}
} else {
return '0.00'
}
}
},
watch: {
value(newValue) {
this.moneyValue = this.moneyFormat(newValue, 2, ',')
},
}
}
</script>
<style scoped lang="scss">
.money-format-view {
min-width: 80rpx;
}
.money-hidden {
}
</style>

5
pages.json
View File

@ -13,7 +13,8 @@
"path": "pages/profit/profit", "path": "pages/profit/profit",
"style": { "style": {
"navigationBarTitleText": "收益", "navigationBarTitleText": "收益",
"enablePullDownRefresh": true "enablePullDownRefresh": true,
"navigationStyle": "custom"
} }
}, },
{ {
@ -222,7 +223,7 @@
//底部跳转tab //底部跳转tab
"tabBar": { "tabBar": {
"color": "#FFFFFF", "color": "#FFFFFF",
"selectedColor": "#30a9c0", "selectedColor": "#0b6375",
"borderStyle": "black", "borderStyle": "black",
"backgroundColor": "#141b29", "backgroundColor": "#141b29",
"fontSize": "12px", "fontSize": "12px",

6
pages/index/index.vue
View File

@ -62,7 +62,7 @@
backgroundColor: 'rgba(255, 255, 255, .5)', backgroundColor: 'rgba(255, 255, 255, .5)',
border: '1px rgba(0, 0, 0, .3) solid', border: '1px rgba(0, 0, 0, .3) solid',
color: '#fff', color: '#fff',
selectedBackgroundColor: 'rgba(255, 255, 255, .9)', selectedBackgroundColor: 'rgba(11, 99, 117, .9)',
selectedBorder: '1px rgba(0, 0, 0, .9) solid', selectedBorder: '1px rgba(0, 0, 0, .9) solid',
bottom: 50 bottom: 50
}, },
@ -291,7 +291,7 @@
height: calc(20vh - 30rpx); height: calc(20vh - 30rpx);
margin: 0 auto; margin: 0 auto;
background: #1d2734; background: #1d2734;
border-radius: 40rpx; border-radius: 20rpx;
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
@ -331,7 +331,7 @@
height: 100%; height: 100%;
margin: 0 auto; margin: 0 auto;
background: #1d2734; background: #1d2734;
border-radius: 40rpx; border-radius: 20rpx;
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
justify-content: space-between; justify-content: space-between;

2
pages/login/login.vue
View File

@ -186,7 +186,7 @@
.logo-div { .logo-div {
width: 86rpx; width: 86rpx;
height: 86rpx; height: 86rpx;
background: linear-gradient(180.00deg, #30a9c0 0%, #30a9c0 100%); background: linear-gradient(180.00deg, #0b6375 0%, #0b6375 100%);
border-radius: 24rpx; border-radius: 24rpx;
margin-top: 154rpx; margin-top: 154rpx;
text-align: center; text-align: center;

478
pages/profit/profit.vue
View File

@ -1,81 +1,84 @@
<template> <template>
<view class="container"> <view class="container">
<view class="top"> <view class="top">
<!-- <image class="left-background-img" :src="incomeBackground" />-->
<image class="top-background-img" :src="incomeBackground" />
<view class="accumulate-income">
<view>
<div class="accumulate-income-title">累计收益</div>
<div class="income-num">
<MoneyView :character="'￥'" :value="profitInfo.totalProfit" :size="60" :hidden="hidden"/>
<div class="income-hidden-but" @click="clickHidden">
<uni-icons v-if="hidden" type="eye" :size="24" :color="'#909399'" />
<uni-icons v-else type="eye-slash" :size="24" :color="'#909399'" />
</div>
</div>
<div class="income-history">
<view>上月收入：</view><MoneyView :value="profitInfo.lastMonthProfit" :hidden="hidden"/>
<view :style="{width: '2rpx', marginLeft: '10rpx', marginRight: '10rpx'}"></view>
<view>当月收入：</view><MoneyView :value="profitInfo.thisMonthProfit" :hidden="hidden"/>
</div>
</view>
</view>
</view>
<uni-notice-bar <uni-notice-bar
show-get-more show-get-more
show-icon show-icon
background-color="#1d2734"
color="#909399"
moreColor="#909399"
:scrollable="true"
more-text="查看更多" more-text="查看更多"
:text="noticeList[0].content" :text="noticeList[0].content"
@getmore="getMore" @getmore="getMore"
/> />
<view class="back"> <view class="meddle">
<view class="back-top"></view> <view class="income-categories">
<view class="uni-radius back-con uni-shadow-sm"> <view class="yesterday-income-title">
<view class=""> 昨日收益
<view class="back-con-top"> 昨日收益 </view>
<view class="back-con-mid">
<view class="back-con-mid-left">
广告收益
<view class="top-text">
¥ {{ profitInfo.yesterdayAdProfit }}
</view>
</view> </view>
<view class="border"></view> <view class="yesterday-income">
<view class="back-con-mid-right"> <view class="income-category-item">
邀请收益 <view class="left-icon">
<view class="top-text"> <image class="" :src="advertIcon" />
¥ {{ profitInfo.yesterdayInviteProfit }}
</view> </view>
<view class="right-income-info">
<view>广告收益</view>
<view class="yesterday-income-num">
<MoneyView :character="'￥'" :value="profitInfo.yesterdayAdProfit" :size="32" :hidden="hidden"/>
</view> </view>
</view> </view>
</view> </view>
<view class="back-con-bot uni-radius uni-shadow-sm"> <view class="income-category-item">
<view class="back-con-bot-left"> <view class="left-icon">
累计 <image class="" :src="inviteIcon" />
<view class="top-text size14">
¥ {{ profitInfo.totalProfit }}
</view> </view>
<view class="right-income-info">
<view>邀请收益</view>
<view class="yesterday-income-num">
<MoneyView :character="'￥'" :value="profitInfo.yesterdayInviteProfit" :size="32" :hidden="hidden"/>
</view> </view>
<view class="border"></view>
<view class="back-con-bot-mid">
上月
<view class="top-text size14">
¥ {{ profitInfo.lastMonthProfit }}
</view> </view>
</view> </view>
<view class="border"></view>
<view class="back-con-bot-right">
当月
<view class="top-text size14">
¥ {{ profitInfo.thisMonthProfit }}
</view> </view>
</view> </view>
</view> </view>
</view> <view class="foot">
</view> <view class="income-detail-selector">
<view class="back2"> <view class="details-select-item" v-for="(item, index) in items" :key="index">
<view class="uni-radius back-con2 uni-shadow-sm">
<view class="" style="width: 100%">
<view class="back-con-top"> 收益明细 </view>
<view class="segmented">
<view v-for="(item, index) in items" :key="index">
<view <view
@click="segActive(index)" @click="segActive(index)"
v-if="item != ''" v-if="item !== ''"
:class="[ :class="[
'segmented-con', 'segmented-con',
index == active ? 'activecolor' : '', index === active ? 'active-color' : '',
]" ]"
> >
{{ item }} {{ item }}
<image
:class="['img1', index == active ? 'show' : '']"
src="/static/active.png"
></image>
</view> </view>
<image v-else class="img" src="/static/right.png"></image>
</view> </view>
</view> </view>
<!-- 即将入账 --> <!-- 即将入账 -->
<view v-show="active == 0"> <view v-show="active == 0">
<view class="adver"> <view class="adver">
@ -87,21 +90,19 @@
抖音/快手/微信均为次日结算前日ECPM价格 抖音/快手/微信均为次日结算前日ECPM价格
</view> </view>
</view> </view>
<uni-list> <view class="detail-categories-item" @click="linkTo(0,0)">
<uni-list-item title="曝光" link @click="linkTo(0,0)"> <div class="title">曝光</div>
<template v-slot:footer> <div class="text uni-white">{{downloadAndInviteCountInfo.creatorProfitDownloadCount[0].downloadNum || 0}}次 </div>
<view class="blue"> {{downloadAndInviteCountInfo.creatorProfitDownloadCount[0].downloadNum || 0}}次 </view> <uni-icons type="right" size="12" color="#ffffff" />
</template> </view>
</uni-list-item> <view class="detail-categories-item" @click="linkTo(1,0)">
<uni-list-item title="邀请" link @click="linkTo(1,0)"> <div class="title">邀请</div>
<template v-slot:footer> <div class="text uni-white">[{{downloadAndInviteCountInfo.creatorProfitInviteCount[0].createTime || ''}}] {{downloadAndInviteCountInfo.creatorProfitInviteCount[0].inviteDownloadNum || 0}}次 </div>
<view class="blue"> [{{downloadAndInviteCountInfo.creatorProfitInviteCount[0].createTime || ''}}] {{downloadAndInviteCountInfo.creatorProfitInviteCount[0].inviteDownloadNum || 0}}次 </view> <uni-icons type="right" size="12" color="#ffffff" />
</template> </view>
</uni-list-item>
</uni-list>
</view> </view>
<!-- 已入账 --> <!-- 已入账 -->
<view v-show="active == 2"> <view v-show="active == 1">
<view class="adver"> <view class="adver">
<view class="adver-top"> <view class="adver-top">
<view class="circular"></view> <view class="circular"></view>
@ -109,43 +110,37 @@
</view> </view>
<!-- <view class="adver-mid"> 2022.06.05 至 2022.07.20 </view> --> <!-- <view class="adver-mid"> 2022.06.05 至 2022.07.20 </view> -->
</view> </view>
<uni-list> <view class="detail-categories-item" @click="linkTo(0,1)">
<uni-list-item title="曝光" link @click="linkTo(0,1)"> <div class="title">曝光</div>
<template v-slot:footer> <div class="text uni-white"><MoneyView :character="'￥'" :value="inProfitInfo.profit || 0" :hidden="hidden"/></div>
<view class="blue"> ¥{{inProfitInfo.profit || 0}} </view> <uni-icons type="right" size="12" color="#ffffff" />
</template> </view>
</uni-list-item> <view class="detail-categories-item" @click="linkTo(1,1)">
<uni-list-item title="邀请" link @click="linkTo(1,1)"> <div class="title">邀请</div>
<template v-slot:footer> <div class="text uni-white"><MoneyView :character="'￥'" :value="inProfitInfo.inviteProfit || 0" :hidden="hidden"/></div>
<view class="blue"> ¥{{inProfitInfo.inviteProfit || 0}} </view> <uni-icons type="right" size="12" color="#ffffff" />
</template> </view>
</uni-list-item>
</uni-list>
</view> </view>
<!-- 已转入钱包 --> <!-- 已转入钱包 -->
<view v-show="active == 4"> <view v-show="active == 2">
<view class="adver"> <view class="adver">
<view class="adver-top"> <view class="adver-top">
<view class="circular"></view> <view class="circular"></view>
<view class="adver-top-text"> 广告: </view> <view class="adver-top-text"> 广告: </view>
</view> </view>
</view> </view>
<uni-list> <view class="detail-categories-item" @click="linkTo(0,2)">
<uni-list-item title="曝光" link @click="linkTo(0,2)"> <div class="title">曝光</div>
<template v-slot:footer> <div class="text uni-white"><MoneyView :character="'￥'" :value="endProfitInfo.profit || 0" :hidden="hidden"/></div>
<view class="blue"> ¥{{endProfitInfo.profit || 0}} </view> <uni-icons type="right" size="12" color="#ffffff" />
</template>
</uni-list-item>
<uni-list-item title="邀请" link @click="linkTo(1,2)">
<template v-slot:footer>
<view class="blue"> ¥{{endProfitInfo.inviteProfit || 0}} </view>
</template>
</uni-list-item>
</uni-list>
</view>
</view> </view>
<view class="detail-categories-item" @click="linkTo(1,2)">
<div class="title">邀请</div>
<div class="text uni-white"><MoneyView :character="'￥'" :value="endProfitInfo.inviteProfit || 0" :hidden="hidden"/></div>
<uni-icons type="right" size="12" color="#ffffff" />
</view> </view>
</view> </view>
</view> </view>
</view> </view>
</template> </template>
@ -158,7 +153,11 @@ import {
queryFrontInOrOutAmt, //查询指定艺术家已入账/转入钱包累计收益 queryFrontInOrOutAmt, //查询指定艺术家已入账/转入钱包累计收益
} from "@/api/profit.js"; } from "@/api/profit.js";
import { getNoticeList } from "@/api/userInfo.js"; import { getNoticeList } from "@/api/userInfo.js";
import MoneyView from "@/components/money-view/money-view.vue"
export default { export default {
components: {
MoneyView
},
data() { data() {
return { return {
nvueWidth: 730, nvueWidth: 730,
@ -171,7 +170,7 @@ export default {
}, },
downloadAndInviteCountInfo: {}, downloadAndInviteCountInfo: {},
profitList: [], profitList: [],
items: ["即将入账", "", "已入账", "", "已转入钱包"], items: ["即将入账", "已入账", "已转入钱包"],
current: 0, current: 0,
activeColor: "#007aff", activeColor: "#007aff",
styleType: "text", styleType: "text",
@ -182,6 +181,10 @@ export default {
pageSize: 10, pageSize: 10,
pageNum: 1, pageNum: 1,
active: 0, active: 0,
hidden: false,
incomeBackground: '/static/income-background.png',
advertIcon: "/static/advertIcon.png",
inviteIcon: "/static/inviteIcon.png",
}; };
}, },
// 下拉刷新 // 下拉刷新
@ -347,6 +350,9 @@ export default {
segActive(index) { segActive(index) {
this.active = index; this.active = index;
}, },
clickHidden() {
this.hidden = !this.hidden;
}
}, },
}; };
</script> </script>
@ -354,193 +360,209 @@ export default {
<style lang="scss" scoped> <style lang="scss" scoped>
.container { .container {
font-family: ‘Franklin Gothic Medium’, ‘Arial Narrow’, Arial, sans-serif; font-family: ‘Franklin Gothic Medium’, ‘Arial Narrow’, Arial, sans-serif;
min-height: 100vh;
background: #141b29;
color: #FFFFFF !important;
} }
.back {
width: 100%; .top {
height: 320px; width: 750rpx;
height: 30vh;
background: #0b6375;
position: relative; position: relative;
.left-background-img {
position: absolute;
left: 0;
bottom: 0;
width: 200rpx;
height: 150rpx;
opacity: 0.2;
} }
.back2 {
.top-background-img {
position: absolute;
top: 0;
right: 0;
width: 100%; width: 100%;
// height: 320px; height: 100%;
// position: relative; opacity: 0.2;
// top: -60px;
} }
.back-top {
width: 100%; .accumulate-income {
position: absolute; width: calc(100% - 80rpx);
height: 120px; height: calc(100% - 80rpx);
background: #416bdc; padding: 40rpx;
}
.back-con {
width: 95%;
left: 50%;
top: 42%;
transform: translate(-50%, -50%);
background-color: white;
position: absolute; position: absolute;
height: 220px; top: 0;
left: 0;
right: 0;
display: flex; display: flex;
flex-direction: column; align-items: flex-end;
align-items: center;
justify-content: space-between; .accumulate-income-title {
font-size: 28rpx;
} }
.back-con2 {
width: 95%; .income-num {
padding: 0 16px; width: 100%;
box-sizing: border-box; line-height: 90rpx;
left: 50%;
top: 460px;
transform: translate(-50%, -50%);
background-color: white;
position: absolute;
height: 290px;
display: flex; display: flex;
flex-direction: column;
align-items: center;
justify-content: space-between; justify-content: space-between;
margin-bottom: 20px;
.income-hidden-but {
margin-left: 30rpx;
} }
.back-bot {
width: 100%;
position: absolute;
top: 80px;
} }
.back-con-top {
font-size: 20px; .income-history {
font-weight: 600; font-size: 24rpx;
margin: 20px 0 15px 0; line-height: 24rpx;
display: flex; display: flex;
justify-content: center;
} }
.back-con-mid {
display: flex;
align-items: center;
} }
.border {
width: 1px;
height: 30px;
background-color: rgb(165, 165, 165);
} }
.back-con-mid-left {
display: flex; .meddle {
flex-direction: column; width: 670rpx;
align-items: center; margin: 40rpx auto;
color: rgb(165, 165, 165); background: #1d2734;
padding-right: 40px; border-radius: 20rpx;
// border-right: 1px solid #ccc; overflow: hidden;
.income-categories{
.yesterday-income-title {
height: 32rpx;
font-size: 32rpx;
line-height: 32rpx;
background: #0a6375;
padding: 20rpx 40rpx;
} }
.back-con-mid-right {
.yesterday-income {
display: flex; display: flex;
flex-direction: column; padding: 40rpx;
align-items: center;
color: rgb(165, 165, 165);
padding-left: 40px;
}
.back-con-bot { .income-category-item {
width: 100%; width: 295rpx;
height: 150rpx;
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
.left-icon {
width: 100rpx;
height: 100rpx;
::v-deep image {
width: 100rpx;
height: 100rpx;
} }
.back-con-bot-left {
width: 33.33%;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
color: #a5a5a5;
} }
.back-con-bot-mid {
width: 33.33%; .right-income-info {
display: flex; width: 170rpx;
flex-direction: column; font-size: 24rpx;
justify-content: center; line-height: 60rpx;
align-items: center;
color: #a5a5a5;
} }
.back-con-bot-right {
width: 33.33%;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
color: #a5a5a5;
} }
.uni-padding-wrap {
// width: 750rpx;
padding: 0px 30px;
} }
.uni-common-mt {
margin-top: 30px;
} }
.segmented {
display: flex;
justify-content: center;
// align-items: center;
} }
.segmented-con {
.foot {
width: 670rpx;
margin: 40rpx auto;
.income-detail-selector {
display: flex; display: flex;
flex-direction: column; justify-content: space-between;
align-items: center;
color: #a5a5a5; .details-select-item {
width: 200rpx;
.segmented-con {
width: 100%;
height: 72rpx;
font-size: 32rpx;
line-height: 72rpx;
text-align: center;
background: #1d2734;
border-radius: 20rpx;
} }
.img1 {
width: 15px; .active-color {
height: 10px; background: #0a6375;
margin-top: 7px;
visibility: hidden;
} }
.img {
width: 18px;
height: 15px;
margin: 0 20px;
} }
.top-text {
font-size: 20px;
margin-top: 12px;
color: red;
} }
.size14 {
font-size: 16px; .adver {
width: 100%;
padding: 20rpx 0;
.adver-top {
display: flex;
align-items: center;
.circular {
width: 20rpx;
height: 20rpx;
border-radius: 100%;
background: #0a6375;
margin-right: 20rpx;
} }
.show {
visibility: visible; .adver-top-text {
font-size: 32rpx;
} }
.activecolor {
color: #4d6cff;
} }
.circular {
width: 8px; .adver-mid {
height: 8px; font-size: 24rpx;
border-radius: 50%; color: #909399;
background-color: #4d6cff;
margin-right: 10px;
} }
.adver {
margin-top: 6px;
margin-bottom: 10px;
} }
.adver-top {
.detail-categories-item {
width: calc(100% - 40rpx);
background: #1d2734;
border-radius: 20rpx;
padding: 20rpx;
margin-bottom: 20rpx;
display: flex; display: flex;
align-items: center; align-items: center;
margin-top: 12px; justify-content: space-between;
height: 60rpx;
.title {
font-size: 28rpx;
} }
.adver-top-text {
font-size: 18px; .text{
font-weight: bold; font-size: 24rpx;
line-height: 40rpx;
width: 500rpx;
text-align: right;
} }
.adver-mid {
font-size: 12px;
color: #ccc;
// margin-top: ;
margin-bottom: 8px;
} }
.blue {
color: #4d6cff;
} }
</style> </style>

4
pages/userInfo/userInfo.vue
View File

@ -155,7 +155,7 @@
.top { .top {
width: 100vw; width: 100vw;
height: 25vh; height: 30vh;
position: relative; position: relative;
.background-image-dim { .background-image-dim {
@ -266,7 +266,7 @@
border-radius: 20rpx; border-radius: 20rpx;
overflow: hidden; overflow: hidden;
backdrop-filter: blur(25rpx); backdrop-filter: blur(25rpx);
background-image: linear-gradient(45deg, #243949 0%, #30a9c0 100%); background-image: linear-gradient(45deg, #243949 0%, #0b6375 100%);
.middle-btn-item { .middle-btn-item {

BIN
static/advertIcon.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.0 MiB

BIN
static/income-background.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 99 KiB

BIN
static/inviteIcon.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 763 KiB

BIN
static/material.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 5.6 KiB

After

Width:  |  Height:  |  Size: 30 KiB

BIN
static/upload.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 27 KiB

After

Width:  |  Height:  |  Size: 34 KiB

Write Preview
Loading…
Cancel
Save