连云港陪玩陪聊
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.
chunwan/pages/users/wallet/index.vue

395 lines
9.0 KiB

3 months ago
<template>
<view class="task">
<view class="task-navbar">
<u-navbar title="我的钱包" back-icon-color="#333333" title-color="#333333" :background="background"></u-navbar>
</view>
<view class="task-hd">
<view class="a">
<view class="fl">我的账户:</view>
<view class="fr">
<view class="li">
2 months ago
<view class="txt"><text>{{info.totalCoins}}</text><view class="zhe">{{(info.totalCoins/info.transMoneyBill).toFixed(1)}}</view></view>
3 months ago
<view class="txt1">金币</view>
</view>
<view class="li">
2 months ago
<view class="txt"><text>{{info.totalMoney}}</text></view>
3 months ago
<view class="txt1">余额</view>
</view>
</view>
</view>
<view class="a">
<view class="fl">今日收益:</view>
<view class="fr">
<view class="li">
2 months ago
<view class="txt"><text>{{info.nowCoins}}</text><view class="zhe">{{(info.nowCoins/info.transMoneyBill).toFixed(1)}}</view></view>
3 months ago
<view class="txt1">金币</view>
</view>
<view class="li">
2 months ago
<view class="txt"><text>{{info.nowMoney}}</text></view>
3 months ago
<view class="txt1">余额</view>
</view>
</view>
</view>
<view class="c">
2 months ago
<view class="fl">{{info.transMoneyBill}}金币=1</view>
3 months ago
<view class="fr">
2 months ago
<view class="btn" @click="openPage(1)">提现</view>
<view class="btn" @click="openPage(2)">充值</view>
3 months ago
</view>
</view>
</view>
<view class="task-bd">
<view class="tab">
<u-tabs :list="list" bg-color="transparent" active-color="#222222" inactive-color="#666666" font-size="30" :active-item-style="activeStyle" bar-height="10" bar-width="60" v-model="current" @change="changeTabs"></u-tabs>
</view>
<view class="list">
1 month ago
<view class="item" v-for="(a,i) in recordList" :key="i">
3 months ago
<view class="a">
2 months ago
<view class="fl">{{a.title}}
3 months ago
<view class="status">审核中</view>
<view class="status-01">已拒绝</view>
<view class="status-02">已打款</view>
2 months ago
<view class="txt">{{a.status==1?'-':'+'}}<text>{{a.coins}}</text>{{a.danwei==1?'金币':'元'}}</view>
3 months ago
</view>
2 months ago
<view class="fr" >
{{a.createTime}}<text>退款</text><view class="tui" v-if="a.type==5">{{a.remark}}</view>
3 months ago
</view>
2 months ago
<view class="err" v-if="a.refuseReason">拒绝原因{{a.refuseReason}}</view>
3 months ago
</view>
</view>
2 months ago
<view class="empty" v-if="total == 0 ">
<image src="@/static/empty.png"></image>
<view class="txt">暂无数据</view>
</view>
3 months ago
</view>
</view>
2 months ago
<unverified :isPopup="isPopup" />
3 months ago
</view>
</template>
<script>
export default {
data() {
return {
2 months ago
isPopup: false,
3 months ago
current: 0,
list:[{'name': '社交记录'},{'name': '任务记录'},{'name': '陪玩记录'},{'name': '充值记录'},{'name': '提现记录'},{'name': '邀请记录'}],
activeStyle:{'fontSize': '35rpx'},
background: {
// 导航栏背景图
2 months ago
background: 'url(https://api.lyiyuan.cn/profile/upload/static/task-bg.png) center top no-repeat',
3 months ago
// 还可以设置背景图size属性
backgroundSize: '100 auto',
},
2 months ago
info: {},
2 months ago
recordList: [],
page: 1,
total: 1
3 months ago
};
},
2 months ago
onLoad() {
2 months ago
this.userWallet();
2 months ago
this.userRecordList();
uni.$on("closeSharePopup",res=>{
that.isPopup = false;
})
2 months ago
},
2 months ago
onReachBottom() {
const that = this;
uni.showLoading({
title: "加载中"
})
that.page ++;
setTimeout(function() {
1 month ago
that.userRecordList(1);
2 months ago
}, 1000);
},
3 months ago
methods: {
2 months ago
openPage(index){
2 months ago
if(uni.getStorageSync("userInfo").realnameFlag == 0){
this.isPopup = true
return ;
}
2 months ago
if(index == 1){
uni.navigateTo({
url: "/pages/users/withdrawal/index"
})
}else{
uni.navigateTo({
url: "/pages/users/recharge/index"
})
}
},
2 months ago
//数组对象去重
arrayUnique (arr, name) {
var hash = {};
return arr.reduce(function (item, next) {
hash[next[name]]
? ""
: (hash[next[name]] = true && item.push(next));
return item;
}, []);
},
async userRecordList(type) {
2 months ago
const { code, data } = await this.$api.userRecordList({
userId: uni.getStorageSync("userInfo").id,
type: Number(this.current)+1,
limit: 20,
page: this.page
})
2 months ago
if(type == 1){
uni.hideLoading();
}
2 months ago
if(code == 200){
2 months ago
this.total = data.total;
this.recordList = this.arrayUnique([...this.recordList,...data.list],'id');
2 months ago
}
},
changeTabs(index){
this.current = index
2 months ago
this.page = 1;
this.recordList = []
this.userRecordList();
2 months ago
},
2 months ago
async userWallet() {
const { code, data } = await this.$api.userWallet({
userId: uni.getStorageSync("userInfo").id,
type: 1
})
if(code == 200){
this.info = data;
}
},
3 months ago
}
}
</script>
<style scoped lang="scss">
.task{
2 months ago
background: url(https://api.lyiyuan.cn/profile/upload/static/task-bg.png) center top no-repeat;
3 months ago
background-size: 100% auto;
overflow: hidden;
min-height: 100vh;
2 months ago
.empty{
padding: 150rpx 0;
text-align: center;
font-weight: 500;
font-size: 28rpx;
color: #222222;
image{
display: block;
width: 460rpx;
height: 400rpx;
margin: 0 auto;
}
}
3 months ago
&-hd{
width: 700rpx;
height: 395rpx;
background: linear-gradient(90deg, #17150E, #373632);
border-radius: 20rpx;
margin: 0 auto;
padding: 0 20rpx 0 35rpx;
box-sizing: border-box;
.a{
width: 100%;
display: flex;
align-items: flex-start;
padding-top: 40rpx;
.fl{
font-weight: 500;
font-size: 30rpx;
color: #E7D4B8;
line-height: 60rpx;
margin-right: 35rpx;
}
.fr{
flex: 1;
.li{
width: 40%;
position: relative;
float: left;
&:first-child{
width: 60%;
}
.txt{
font-weight: 500;
font-size: 24rpx;
color: #E7D4B8;
display: flex;
align-items: center;
text-align: center;
text{
font-size: 44rpx;
}
}
.txt1{
font-weight: 500;
font-size: 24rpx;
color: #E7D4B8;
margin-left: 30rpx;
}
.zhe{
min-width: 84rpx;
2 months ago
padding: 0 10rpx;
3 months ago
line-height: 44rpx;
text-align: center;
background: #FED0A7;
border-radius: 10rpx;
font-weight: 500;
font-size: 24rpx;
color: #693A16;
margin-left: 20rpx;
position: relative;
&::after{
content: "";
width: 0;
height: 0;
border: 10rpx solid transparent;
border-right: 10rpx solid #FED0A7;
position: absolute;
2 months ago
left: -18rpx;
3 months ago
top: 10rpx;
z-index: 2;
}
}
}
}
}
.c{
padding-top: 30rpx;
border-top: 1px solid #43423F;
margin-top: 30rpx;
display: flex;
align-items: center;
justify-content: space-between;
.fl{
font-weight: 500;
font-size: 24rpx;
color: rgba(231, 212, 184, 0.6);
}
.fr{
display: flex;
align-items: center;
justify-content: flex-end;
.btn{
width: 120rpx;
line-height: 60rpx;
background: #FED0A7;
border-radius: 60rpx;
text-align: center;
font-weight: 500;
font-size: 24rpx;
color: #693A16;
margin-left: 20rpx;
}
}
}
}
&-bd{
.tab{
margin-top: 20rpx;
overflow: hidden;
}
.list{
padding: 0 25rpx 25rpx;
overflow: hidden;
.item{
width: 100%;
background: #FFFFFF;
border-radius: 20rpx;
padding: 30rpx;
box-sizing: border-box;
margin-top: 20rpx;
position: relative;
.err{
font-weight: 500;
font-size: 24rpx;
color: #FC2C2C;
margin-top: 10rpx;
}
.fr{
font-weight: 500;
font-size: 24rpx;
color: #999999;
margin-top: 10rpx;
text{
position: absolute;
right: 0;
bottom: 0;
z-index: 1;
width: 100rpx;
height: 44rpx;
background: linear-gradient(0deg, #000000, #3D3B38);
border-radius: 20rpx 0px 20rpx 0px;
line-height: 44rpx;
text-align: center;
display: block;
font-size: 20rpx;
color: #FFFFFF;
}
.tui{
font-weight: 500;
font-size: 24rpx;
color: #999999;
float: right;
}
}
.fl{
font-weight: 500;
font-size: 28rpx;
color: #222222;
display: flex;
align-items: center;
justify-content: space-between;
.status{
width: 80rpx;
line-height: 36rpx;
background: #FFA643;
border-radius: 10rpx;
text-align: center;
margin-left: 10rpx;
font-weight: 500;
font-size: 20rpx;
color: #FFFFFF;
}
.status-01{
width: 80rpx;
line-height: 36rpx;
background: #FC2C2C;
border-radius: 10rpx;
text-align: center;
margin-left: 10rpx;
font-weight: 500;
font-size: 20rpx;
color: #FFFFFF;
}
.status-02{
width: 80rpx;
line-height: 36rpx;
background: #222222;
border-radius: 10rpx;
text-align: center;
margin-left: 10rpx;
font-weight: 500;
font-size: 20rpx;
color: #FFFFFF;
}
.txt{
font-weight: 500;
font-size: 24rpx;
color: #222222;
text{
font-size: 30rpx;
}
}
}
}
}
}
}
</style>