gitea
/
fundHoldApp
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
LFPay app项目
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.
3 Commits
1 Branch
0 Tags
2.4 MiB
 
 
 
 
Tree: 7acd925e18
Branches Tags
${ item.name }
Create tag ${ searchTerm }
Create branch ${ searchTerm }
from '7acd925e18'
${ noResults }
fundHoldApp/pages/home/index.vue

730 lines
19 KiB
Raw Blame History

<template>
<view class="app-container" style="background-color: white;">
<view :style="{ height: statusBarHeight + 'px' }"></view>
<!-- 顶部hello -->
<view style="display: flex; height: 65px; justify-content: space-between; align-items: center; padding: 12px;">
<view @click="goUser" style="display: flex; align-items: center; width: 100%;">
<view style="margin-right: 12px;">
<u-avatar size="40" :src="user.avatar"></u-avatar>
</view>
<view style="display: flex; flex-direction: column;">
<p style="font-size: 15px; margin-bottom: 5px;">{{languageData.home.hello}}，
<span v-if="isLogin" style="cursor: pointerl">
<span v-if="user.name">{{ user.nickName }}</span>
<span v-else><a href="#"
@click.stop.prevent="goAuth">{{ languageData.home.need2Auth }}</a></span>
</span>
<span v-else>{{languageData.home.guest}}</span>
</p>
<p style="color: #8E8E8E; font-size: 11px;">{{languageData.home.bless}}~</p>
</view>
</view>
<view class="" style="position: relative;margin-right: 40rpx;" @click.stop="navigatetoMessage()">
<u-icon name="bell" size="25"></u-icon>
<view>
<u-badge type="error" absolute :offset="[2,0]" isDot></u-badge>
</view>
</view>
<view class="">
<u--image :showLoading="true" :src="languageIconUrl" width="40px" height="40px" shape="circle"
@click="languageShow = true"></u--image>
</view>
</view>
<!-- 账户卡片 -->
<view>
<view class="account-card">
<view class="account-info">
<view
style="border-radius:12px; padding: 15px; background: radial-gradient(ellipse at center, #134F9B 35%, rgba(19, 79, 155, 0)) 100%; ">
<text class="balance-label" style="font-size: 12px;">{{languageData.home.accountBalance}}</text>
<view class="balance-amount" style="font-size: 26px;" @click.stop="navigate('wallet')">
{{ formatNumber(userAmount) }}&nbsp;KIP
</view>
</view>
<view class="button-group">
<uni-button size="mini" class="action-button" @click.stop="navigate('topUp')">
{{languageData.home.recharge}}
</uni-button>
<uni-button style="padding: 0 10px;" size="mini" class="action-button"
@click.stop="navigate('transactionRecord')">
{{languageData.home.billQuery}}
</uni-button>
</view>
</view>
</view>
</view>
<!-- 主要内容区域 -->
<view class="content-area">
<!-- 功能区域 -->
<view class="features-grid">
<view class="feature-item" v-for="(item, index) in features" :key="index"
@click.stop="navigate(item.path)">
<view class="feature-icon">
<uni-icons :type="item.icon" size="24" color="#1B6EF3" />
</view>
<view class="feature-name">
<text>{{ item.name }}</text>
</view>
</view>
</view>
<!-- 广告banner -->
<view style="margin-top: 17rpx;">
<u-notice-bar color="#1B6EF3" bgColor="rgba(171, 146, 231, 0.1)"
:text="languageData.home.ads"></u-notice-bar>
</view>
<view
style="width: 100%; top: 13; padding: 15px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 42rpx 32rpx; background-color: white; height: 250px; margin-top: 20rpx; border-radius: 12px;">
<view class="feature-item" @click="navigateTo(item.url)" v-for="(item, index) in funItem" :key="index">
<view class="feature-icon">
<!-- <u-avatar style="text-align: center;" color font-size="10" text="Coming soon"></u-avatar> -->
<view v-if="!item.url" style="font-size: 12px; word-break: break-word; text-align: center;">
<view v-if="languageData.tmp.jqqd.length==4">
{{languageData.tmp.jqqd.substring(0,2)}}<br>{{languageData.tmp.jqqd.substring(2)}}
</view>
<view v-if="languageData.tmp.jqqd.length==11">{{languageData.tmp.jqqd}}</view>
<view v-if="languageData.tmp.jqqd.length==15">{{languageData.tmp.jqqd}}</view>
</view>
<u-icon v-if="index < 3 && item.url" size="25" :name="item.icon" color="#1C6EF3"></u-icon>
<!-- <uni-icons :type="item.icon" size="24" color="#1B6EF3" /> -->
</view>
<view class="feature-name">
<text>{{ item.name }}</text>
</view>
</view>
</view>
<!-- 最近交易记录 -->
<view class="transactions-section" v-if="false">
<view class="section-header">
<text class="section-title">{{languageData.home.latelyTran}}</text>
<text class="view-all">{{languageData.home.selectAll}} ></text>
</view>
<view class="transaction-list">
<view class="transaction-item" v-for="(transaction, index) in transactions" :key="index">
<view class="transaction-left">
<view class="transaction-icon">
<uni-icons :type="transaction.icon" size="20" color="#666666" />
</view>
<view class="transaction-info">
<text class="transaction-title">{{ transaction.title }}</text>
<text class="transaction-time">{{ transaction.time }}</text>
</view>
</view>
<text :class="['transaction-amount', transaction.type === 'income' ? 'income' : 'expense']">
{{ transaction.amount }}
</text>
</view>
</view>
</view>
</view>
<scanTheCode v-if="showScan" ref="scanCode"></scanTheCode>
<view>
<u-popup :show="languageShow" @close="close" @open="open" mode="top" safeAreaInsetTop>
<view class="text-center">
<view v-for="item in languageType" @click="overBtn(item)" class="language-list languageIcon">
<view class="">
<image style="width: 40rpx;" :src="item.imgUrl" mode="widthFix">
</image>
</view>
<view class="padding-left-xs">{{ item.value + ' (' + item.lable + ')'}}</view>
</view>
</view>
</u-popup>
</view>
</view>
</template>
<script>
import {
getAmount
} from '@/api/account/transactionRecord.js'
import scanTheCode from '@/components/scan/scanTheCode.vue'
import {
getToken
} from '@/utils/auth'
import {
showConfirm
} from '@/utils/common'
export default {
components: {
scanTheCode
},
computed: {
user() {
return this.$store.state.user
},
isPerson() {
return this.$store.state.user.userType === 1
},
isLogin() {
return this.$store.state.user.token && this.$store.state.user.token.length > 0
},
},
data() {
return {
languageIconUrl: "/static/languageIcon/USA.jpg", //默认语言显示图片路径
languageShow: false, // 切换语言
onTabItemTapRenovate: true, // 刷新语言
currentLanguage: uni.getStorageSync("LANGUAGE-CODE"), // 当前语言
languageType: [],
showScan: false,
statusBarHeight: uni.getSystemInfoSync().statusBarHeight, // 获取状态栏高度
originalBrightness: null, // 存储屏幕亮度
screen: "true",
features: [],
languageData: this.$languageData, //翻译
funItem: [{
icon: require('@/static/img/shjf.png'),
name: this.$languageData.home.utilityPayments,
url: '/pages/functions/utilityPayment'
},
{
icon: this.$store.state.user.userCate == '2' ? 'man-add' : 'more-dot-fill',
name: this.$store.state.user.userCate == '2' ? this.$languageData.home.proxyPayment : this.$languageData.home.tbc,
url: this.$store.state.user.userCate == '2' ? '/pages/functions/proxyPayment' : undefined
},
{
icon: this.$store.state.user.userCate != '0' ? 'order' : 'more-dot-fill',
name: this.$store.state.user.userCate != '0' ? this.$languageData.home.businessData : this.$languageData.home.tbc,
url: this.$store.state.user.userCate != '0' ? '/pages/mchManage/index' : undefined
},
{
icon: 'more-dot-fill',
name: this.$languageData.home.tbc
},
{
icon: 'more-dot-fill',
name: this.$languageData.home.tbc
},
{
icon: 'more-dot-fill',
name: this.$languageData.home.tbc
},
{
icon: 'more-dot-fill',
name: this.$languageData.home.tbc
},
{
icon: 'more-dot-fill',
name: this.$languageData.home.tbc
}
],
transactions: [{
title: '转账给王小明',
time: '2024-01-20 14:30',
amount: '-￥2,000.00',
type: 'expense',
icon: 'right'
},
{
title: '收款自李志伟',
time: '2024-01-20 10:15',
amount: '+￥3,500.00',
type: 'income',
icon: 'left'
},
{
title: '商城购物',
time: '2024-01-19 16:45',
amount: '-￥1,280.00',
type: 'expense',
icon: 'cart'
},
],
userAmount: 0,
userId: this.$store.state.user.userId,
}
},
created() {
this.languageType = this.$languageType;
this.languageType.forEach(item => {
if (item.lable === uni.getStorageSync("LANGUAGE-CODE"))
this.languageIconUrl = item.imgUrl
})
this.originalBrightness = uni.getStorageSync("originalBrightness");
if (uni.canIUse('getScreenBrightness')) {
this.getAndSetBrightness();
} else {
console.log("Hbuilder 端不能调节亮度")
}
},
watch: {
languageData() {
this.funItem = [{
icon: require('@/static/img/shjf.png'),
name: this.$languageData.home.utilityPayments,
url: '/pages/functions/utilityPayment'
},
{
icon: this.$store.state.user.userCate == '2' ? 'man-add' : 'more-dot-fill',
name: this.$store.state.user.userCate == '2' ? this.$languageData.home.proxyPayment : this.$languageData.home.tbc,
url: this.$store.state.user.userCate == '2' ? '/pages/functions/proxyPayment' : undefined
},
{
icon: this.$store.state.user.userCate != '0' ? 'order' : 'more-dot-fill',
name: this.$store.state.user.userCate != '0' ? this.$languageData.home.businessData : this.$languageData.home.tbc,
url: this.$store.state.user.userCate != '0' ? '/pages/mchManage/index' : undefined
},
{
icon: 'more-dot-fill',
name: this.$languageData.home.tbc
},
{
icon: 'more-dot-fill',
name: this.$languageData.home.tbc
},
{
icon: 'more-dot-fill',
name: this.$languageData.home.tbc
},
{
icon: 'more-dot-fill',
name: this.$languageData.home.tbc
},
{
icon: 'more-dot-fill',
name: this.$languageData.home.tbc
}
]
}
},
onLoad() {
this.languageData = this.$languageData;
// 切换TabBar标题
this.setTabBarTabBar(this.languageData.tabbar);
if (getToken()) {
this.selectAmount();
// this.delItem();
}else{
//不登录的时候不展示
this.funItem.splice(1,2)
}
},
onShow() {
this.languageData = this.$languageData;
this.getScan();
},
methods: {
open() {
// console.log('open');
},
close() {
this.languageShow = false
// console.log('close');
},
goUser() {
uni.switchTab({
url: '/pages/mine/index'
})
},
goAuth() {
if(this.$store.state.user.userCate == '1'){
uni.navigateTo({url:'/pages/mine/info/merchant/edit'})
}else if(this.$store.state.user.userCate == '2'){
uni.navigateTo({url:'/pages/mine/info/proxy/edit'})
}else{
this.$tab.navigateTo('/pages/mine/info/edit')
}
},
selectAmount() {
getAmount(this.userId).then(res => {
this.userAmount = res.data.accountAmount
})
},
//处理功能显示
delItem() {
let userInfo = uni.getStorageSync("storage_data");
if (userInfo.vuex_userCate === '0') {
//如果登录用户是个人0
this.funItem.splice(1,2)
}else if(userInfo.vuex_userCate === '1'){
//如果登录用户是商户1
this.funItem.splice(1,1)
} else if(userInfo.vuex_userCate === '2'){
//如果登录用户是代理2
this.funItem.splice(2,1)
}
},
navigate(page) {
if (this.isNotAuthed()) return;
if (page == 'scan') {
if (!getToken()) {
uni.reLaunch({
url: '/pages/login'
})
} else {
this.showScan = true
this.$nextTick(() => {
this.$refs.scanCode.scanQRCode();
})
}
} else if (page == 'wallet') {
uni.navigateTo({
url: "/pages/mine/wallet/index"
})
} else {
uni.navigateTo({
url: "/pages/account/" + page
})
}
},
navigatetoMessage() {
uni.navigateTo({
url: "/pages/message/index"
})
},
navigateTo(url) {
//if (this.isNotAuthed()) return;
if (url && url.length > 0)
uni.navigateTo({
url: url
})
},
// 获取屏幕亮度
getAndSetBrightness() {
uni.getScreenBrightness({
success: (res) => {
uni.setStorageSync("originalBrightness", res.value); // 存储当前亮度
uni.setStorageSync("screen", "false");
console.log("当前页面亮度为：")
console.log(uni.getStorageSync("originalBrightness"))
},
fail: () => {
console.log("获取屏幕亮度失败");
}
});
},
getScan() {
this.features = [{
name: this.languageData.home.scan,
icon: 'scan',
path: 'scan'
},
{
name: this.languageData.home.receiveAndPay,
icon: 'wallet',
path: 'receiptPayment'
},
{
name: this.languageData.home.transfer,
icon: 'redo',
path: 'transferAccounts'
},
{
name: this.languageData.home.withdrawal,
icon: 'download',
path: 'withdrawDeposit'
}
]
},
overBtn(data) {
if (data.lable === 'Chinese') uni.setLocale("zh-Hans")
else if (data.lable === 'English') uni.setLocale("en")
else uni.setLocale("laos")
this.currentLanguage = data.lable;
this.languageIconUrl = data.imgUrl;
uni.setStorageSync("LANGUAGE-CODE", data.lable);
this.$LGC_swich();
this.languageData = this.$languageData;
// 切换TabBar标题
this.setTabBarTabBar(this.languageData.tabbar);
//关闭语言切换
this.languageShow = false;
//重新赋值
this.getScan();
},
isNotAuthed() {
let rs = this.isLogin && !this.user.name
if (rs) this.$modal.msg(this.languageData.home.need2AuthPh)
return rs
}
}
}
</script>
<style lang="scss" scoped>
page {
height: 100%;
width: 100%;
background-color: #f5f5f5;
}
body {
overflow: hidden;
}
.language-list {
padding: 40rpx;
border: 1rpx solid #ffffff;
background-color: #fafafa;
}
.account-title {
display: flex;
justify-content: center;
font-size: 36rpx;
color: white;
position: relative;
}
.app-container {
width: 100%;
height: 100vh;
overflow: hidden;
}
.nav-bar {
height: 88rpx;
background-color: #ffffff;
display: flex;
align-items: center;
justify-content: space-between;
padding: 0 32rpx;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}
.text-lg {
font-size: 16px;
font-weight: 500;
}
.nav-right {
display: flex;
align-items: center;
position: absolute;
right: 0;
}
.content-area {
// padding: 32rpx 32rpx 70rpx;
padding: 32rpx 0;
padding-top: 19rpx;
}
.account-card {
background-image: url('/static/svgs/lines.svg');
background-size: cover;
background-position: center;
background-color: #144F9B;
border-radius: 12px;
padding: 32rpx;
width: 95%;
margin: 0 auto;
min-height: 240rpx;
display: flex;
align-items: center;
}
.account-info {
width: 100%;
display: flex;
justify-content: space-between;
align-items: center;
position: relative;
}
.balance-label {
font-size: 14px;
color: rgba(255, 255, 255, 0.9);
}
.balance-amount {
font-size: 23px;
color: #ffffff;
font-weight: 700;
margin-top: 12rpx;
}
.button-group {
display: flex;
flex-direction: column;
gap: 16rpx;
}
.action-button {
background-color: rgba(255, 255, 255, 0.2) !important;
border: none !important;
color: #ffffff !important;
font-size: 14px !important;
}
.features-grid {
background: white;
padding: 10px;
border-radius: 12px;
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 32rpx;
// margin-bottom: -48rpx;
// position: relative;
// top: -70rpx;
top: 13rpx;
}
.feature-item {
display: flex;
flex-direction: column;
align-items: center;
}
.feature-icon {
width: 96rpx;
height: 96rpx;
background-color: rgba(171, 146, 231, 0.1);
// background-color: rgba(255, 242, 229, 0.1);
border-radius: 48rpx;
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 16rpx;
}
.feature-name {
font-size: 14px;
color: #333333;
text-align: center;
height: 2em;
display: flex;
align-items: center;
font-weight: 500;
}
.promotion-banner {
background-color: rgba(255, 125, 0, 0.05);
border: 1px solid rgba(255, 125, 0, 0.1);
border-radius: 16rpx;
padding: 12rpx;
display: flex;
align-items: center;
// margin-bottom: 48rpx;
}
.promotion-text {
font-size: 14px;
color: #666666;
margin-left: 24rpx;
}
.section-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 32rpx;
}
.section-title {
font-size: 16px;
font-weight: 500;
color: #333333;
}
.view-all {
font-size: 14px;
color: #999999;
}
.transaction-list {
display: flex;
flex-direction: column;
gap: 32rpx;
}
.transaction-item {
background-color: #ffffff;
border-radius: 16rpx;
padding: 32rpx;
display: flex;
justify-content: space-between;
align-items: center;
}
.transaction-left {
display: flex;
align-items: center;
}
.transaction-icon {
width: 80rpx;
height: 80rpx;
background-color: #f5f5f5;
border-radius: 40rpx;
display: flex;
align-items: center;
justify-content: center;
margin-right: 24rpx;
}
.transaction-info {
display: flex;
flex-direction: column;
}
.transaction-title {
font-size: 14px;
color: #333333;
font-weight: 500;
}
.transaction-time {
font-size: 12px;
color: #999999;
margin-top: 8rpx;
}
.transaction-amount {
font-size: 14px;
font-weight: 500;
}
.income {
color: #00b578;
}
.expense {
color: #ff4d4f;
}
.tab-text {
font-size: 12px;
color: #999999;
margin-top: 8rpx;
}
.active-text {
color: #1B6EF3;
}
.languageIcon {
display: flex;
justify-content: center;
align-items: center;
}
.c {
display: flex;
justify-content: left;
align-items: center;
}
</style>