361 lines
9.7 KiB
Vue
361 lines
9.7 KiB
Vue
<template>
|
||
<JHeaderTitle bgColor="#7737fe" color="#fff" pdB="70rpx" :back="false" />
|
||
|
||
<view class="page-wrapper">
|
||
<!-- 自定义导航栏 -->
|
||
<!-- 钱包卡片 -->
|
||
<view class="wallet-wrapper">
|
||
<view class="wallet-top">
|
||
<view class="wallet-money">钱包余额（元）</view>
|
||
<view class="wallet-number">{{
|
||
isOpenEyes ? walletInfo.amount || "0.00" : desensitization(walletInfo.amount || "0.00")
|
||
}}</view>
|
||
<view class="wallet-eyes bdR10">
|
||
<image :src="imgEyes[isOpenEyes ? 1 : 0]" mode="scaleToFill" @tap="changeOpen" />
|
||
</view>
|
||
</view>
|
||
<view class="wallet-bottom">
|
||
<view>
|
||
<view class="wallet-money">提现中金额（元）</view>
|
||
<view class="wallet-b-number">{{
|
||
isOpenEyes ? walletInfo.unAmount || "0.00" : desensitization(walletInfo.unAmount || "0.00")
|
||
}}</view>
|
||
</view>
|
||
<view>
|
||
<view class="wallet-money">在途利润（元）</view>
|
||
<view class="wallet-b-number">{{
|
||
isOpenEyes
|
||
? walletInfo.auditProfitAmount || "0.00"
|
||
: desensitization(walletInfo.auditProfitAmount || "0.00")
|
||
}}</view>
|
||
</view>
|
||
<view>
|
||
<view class="wallet-money">冻结金额（元）
|
||
<uni-icons type="help-filled" size="20" color="#c6c6c6" @tap="openTips()" />
|
||
</view>
|
||
<view class="wallet-b-number">{{
|
||
isOpenEyes
|
||
? walletInfo.freezeAmount || "0.00"
|
||
: desensitization(walletInfo.freezeAmount || "0.00")
|
||
}}</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<JButton pd="0 50rpx 50rpx 50rpx" bgColor="#fff" color="#7737fe" pdTop="0"
|
||
@HandleTouch="jumpPage('/pageAccount/takeMoney/takeMoney')">提现</JButton>
|
||
<JCardContent>
|
||
<!-- nav 导航部分 -->
|
||
<view class="nav-list">
|
||
<view class="nav-item bgF2 bdR16" v-for="(v, i) in list" :key="i" :class="[v.url === 'null' ? 'nav-station' : '']"
|
||
@tap="jumpPage(v.url)">
|
||
<image :src="v.imgUrl" mode="scaleToFill" v-if="v.imgUrl" />
|
||
<text class="nav-text">{{ v.title }}</text>
|
||
</view>
|
||
</view>
|
||
<!-- 广告展示部分 -->
|
||
|
||
<blcok v-for="v in vdata.adList" :key="v.adverId">
|
||
<JeepayBanner :list="v.appContent" :interval='v.changeTime' v-if="v.appPlaceType == 2" mg='40rpx 0' />
|
||
<JeepayAdCard :list='v.appContent' v-if="v.appPlaceType == 1" mg='40rpx 0' mgs="40rpx 0"/>
|
||
</blcok>
|
||
<!-- 公告列表 -->
|
||
<template v-if="noticeList.length > 0">
|
||
<view class="notice-title fs30 fw700">最新公告</view>
|
||
<view class="notice-wrapper bdR16" v-for="v in noticeList" :key="v.articleId"
|
||
@tap="jumpPage(`/pageWork/setUp/postDetail?id=${v.articleId}`)">
|
||
<view class="notice-content single-text-beyond fs30">{{ v.title }}</view>
|
||
<view class="notice-time">{{ v.createdAt }}</view>
|
||
</view>
|
||
<JContent @HandleTouch="jumpPage('/pageWork/setUp/latestPost')" height="160rpx">查看全部</JContent>
|
||
</template>
|
||
</JCardContent>
|
||
|
||
</view>
|
||
|
||
<JTipsPopupContent ref="tips" title="冻结金额释义" buttonText="我知道了">
|
||
<view class="tips-wrapper">
|
||
<view class="tips-title">描述：<span class="tips-info">冻结金额为不可提现金额</span></view>
|
||
</view>
|
||
<view class="tips-wrapper">
|
||
<view class="tips-title">当前可提现金额为：<span class="tips-info">{{ walletInfo.allowTakeAmount }}元</span></view>
|
||
</view>
|
||
<view class="tips-wrapper" v-if="walletInfo.freezeAmount > 0 && walletInfo.freezeDesc">
|
||
<view class="tips-title">冻结原因：</view>
|
||
<view class="tips-info">{{ walletInfo.freezeDesc }}。请尽快处理。</view>
|
||
</view>
|
||
</JTipsPopupContent>
|
||
|
||
<!-- #ifdef APP-PLUS -->
|
||
<view style="height: 120rpx;"></view>
|
||
<!-- #endif -->
|
||
</template>
|
||
|
||
<script setup>
|
||
import { ref, reactive, onBeforeUnmount } from "vue"
|
||
import { $statistics, $getNoticeList, $getMainUserInfo, $adList ,$getCompanyInfo, $getUserInfo} from "@/http/apiManager.js"
|
||
import { onShow, onPullDownRefresh, onLoad,onShareAppMessage,onShareTimeline } from "@dcloudio/uni-app"
|
||
import JHeaderTitle from "@/components//newComponents/JHeaderTitle/JHeaderTitle"
|
||
import JButton from "@/components//newComponents/JButton/JButton"
|
||
import JCardContent from "@/components//newComponents/JCardContent/JCardContent"
|
||
import JContent from "@/components//newComponents/JContent/JContent"
|
||
import storageManage from "@/util/storageManage.js"
|
||
import { horn } from "@/hooks/handleMoney"
|
||
import dayjs from "dayjs"
|
||
import list from "./navList/navList"
|
||
import JTipsPopupContent from './component/JTipsPopupContent.vue';
|
||
onLoad(() => {
|
||
$getMainUserInfo().then(({ bizData }) => {
|
||
toExamine(bizData.infoState)
|
||
})
|
||
})
|
||
onShow(() => {
|
||
userDate()
|
||
getNoticeList()
|
||
onPullDownRefresh(() => {
|
||
userDate()
|
||
})
|
||
})
|
||
const vdata = reactive({
|
||
|
||
})
|
||
// 控制眼睛开关
|
||
const imgEyes = reactive(["/static/iconImg/home-eye-close.svg", "/static/iconImg/icon-openEyes.svg"])
|
||
const isOpenEyes = ref(false)
|
||
|
||
const changeOpen = () => {
|
||
isOpenEyes.value = !isOpenEyes.value
|
||
}
|
||
// 钱包信息
|
||
const walletInfo = ref({
|
||
agentShareImgUrl:''
|
||
})
|
||
const userDate = () => {
|
||
$statistics().then((res) => {
|
||
const { bizData } = res
|
||
walletInfo.value.amount = horn(bizData.availableBalanceAmount) //钱包余额
|
||
walletInfo.value.auditProfitAmount = horn(bizData.auditProfitAmount) //在途金额
|
||
walletInfo.value.freezeAmount = horn(bizData.freezeAmount) //钱包冻结金额
|
||
walletInfo.value.unAmount = horn(bizData.unAmount) //提现中金额
|
||
walletInfo.value.allowTakeAmount = horn(bizData.allowTakeAmount) //最大可提现金额
|
||
walletInfo.value.freezeDesc = bizData.freezeDesc // 钱包金额冻结描述
|
||
})
|
||
uni.stopPullDownRefresh()
|
||
}
|
||
// 信息转换为*号
|
||
const desensitization = (val) => {
|
||
if (!val) return //如果为undefined 直接return 出去
|
||
|
||
return "******"
|
||
}
|
||
|
||
// 提示框
|
||
const tips = ref()
|
||
|
||
// 打开提示弹窗
|
||
const openTips = () => {
|
||
tips.value.open()
|
||
}
|
||
|
||
// 公告列表
|
||
const noticeList = ref([])
|
||
const getNoticeList = () => {
|
||
$getNoticeList({ pageSize: 3, pageNumber: 1, articleType: 1 }).then((res) => {
|
||
const { bizData } = res
|
||
noticeList.value = bizData.records.slice(0, 3)
|
||
noticeList.value.forEach((v) => {
|
||
v.createdAt = formatTime(dayjs(v.createdAt).format("YYYY-MM-DD HH:mm"))
|
||
})
|
||
uni.stopPullDownRefresh()
|
||
})
|
||
}
|
||
// 把 - 替换成 /
|
||
const formatTime = (val) => {
|
||
const time = val.split(" ")
|
||
time[0] = time[0].split("-").join("/")
|
||
return time.join(" ")
|
||
}
|
||
// 跳转路由
|
||
const jumpPage = (url) => {
|
||
if (url === "null") return
|
||
|
||
// 发起提现时判断是否有可提现金额
|
||
if(url == '/pageAccount/takeMoney/takeMoney'){
|
||
if(walletInfo.value.allowTakeAmount <= 0) {
|
||
uni.showToast({
|
||
title: "无可提现金额",
|
||
icon: "error",
|
||
})
|
||
return
|
||
}
|
||
}
|
||
|
||
uni.navigateTo({
|
||
url,
|
||
})
|
||
}
|
||
const toExamine = (val) => {
|
||
let url = null
|
||
switch (val) {
|
||
case 2:
|
||
url = "/pageWork/information/information"
|
||
break
|
||
case 3:
|
||
url = "/pageWork/information/information"
|
||
break
|
||
case 4:
|
||
url = "/pageWork/information/information"
|
||
break
|
||
}
|
||
if (!url) return false
|
||
uni.reLaunch({ url })
|
||
}
|
||
$getCompanyInfo().then(({ bizData }) => {
|
||
vdata.agentShareImgUrl = bizData.agentShareImgUrl
|
||
})
|
||
// 微信分享
|
||
onShareAppMessage((res) => {
|
||
if(res.from == 'menu') return {
|
||
title: uni.$appName,
|
||
path: '/pages/workbench/workbench',
|
||
imageUrl: vdata.agentShareImgUrl
|
||
}
|
||
})
|
||
// 分享到朋友圈
|
||
onShareTimeline(() => {
|
||
return {
|
||
title: uni.$appName,
|
||
imageUrl: vdata.agentShareImgUrl
|
||
}
|
||
})
|
||
// 请求首页广告
|
||
$adList({ appPlace: 2 }).then(({ bizData }) => {
|
||
bizData.forEach(v => {
|
||
v.appContent = JSON.parse(v.appContent)
|
||
})
|
||
vdata.adList = bizData
|
||
console.log(bizData)
|
||
})
|
||
$getUserInfo().then(({ bizData }) => {
|
||
storageManage.userInfo(bizData)
|
||
})
|
||
onBeforeUnmount(() => {
|
||
uni.removeInterceptor("switchTab")
|
||
})
|
||
|
||
</script>
|
||
<style lang="scss" scoped>
|
||
.page-wrapper {
|
||
background-color: $primaryColor;
|
||
|
||
.wallet-wrapper {
|
||
padding: 20rpx 50rpx 50rpx 50rpx;
|
||
color: #fff;
|
||
}
|
||
|
||
.wallet-money {
|
||
font-size: 25rpx;
|
||
color: rgba($color: #fff, $alpha: 0.7);
|
||
}
|
||
|
||
.wallet-top {
|
||
position: relative;
|
||
|
||
.wallet-number {
|
||
margin: 10rpx 0;
|
||
font-size: 63rpx;
|
||
}
|
||
|
||
.wallet-eyes {
|
||
display: flex;
|
||
position: absolute;
|
||
top: 0;
|
||
right: 0;
|
||
padding: 14rpx;
|
||
background-color: rgba($color: #000000, $alpha: 0.2);
|
||
|
||
image {
|
||
width: 40rpx;
|
||
height: 40rpx;
|
||
}
|
||
}
|
||
}
|
||
|
||
.wallet-bottom {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
margin-top: 60rpx;
|
||
padding-right: 20rpx;
|
||
|
||
.wallet-b-number {
|
||
margin-top: 10rpx;
|
||
}
|
||
}
|
||
}
|
||
|
||
// 导航栏 和 公告时间部分 共用一个样式
|
||
.nav-text,
|
||
.notice-time {
|
||
margin-top: 21rpx;
|
||
font-size: 28rpx;
|
||
}
|
||
|
||
// 导航
|
||
.nav-list {
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
justify-content: space-between;
|
||
margin-bottom: 30rpx;
|
||
.nav-item {
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
flex-direction: column;
|
||
width: 200rpx;
|
||
height: 200rpx;
|
||
margin-top: 25rpx;
|
||
|
||
image {
|
||
width: 60rpx;
|
||
height: 60rpx;
|
||
}
|
||
}
|
||
|
||
.nav-station {
|
||
background-color: #fff;
|
||
}
|
||
}
|
||
|
||
.notice-wrapper {
|
||
margin-top: 20rpx;
|
||
padding: 30rpx;
|
||
background-color: #f7f7f7;
|
||
|
||
.notice-content {
|
||
white-space: nowrap;
|
||
}
|
||
|
||
.notice-time {
|
||
color: #8c8c8c;
|
||
}
|
||
}
|
||
|
||
.tips-wrapper {
|
||
display: flex;
|
||
flex-direction: column;
|
||
justify-content: center;
|
||
padding: 0 50rpx;
|
||
.tips-title {
|
||
margin-bottom: 30rpx;
|
||
font-size: 30rpx;
|
||
}
|
||
.tips-info {
|
||
font-size: 26rpx;
|
||
color: #808080;
|
||
}
|
||
}
|
||
|
||
|
||
|
||
</style>
|