dev/dcp-web-gate/src_old/views/userCenter/userCenterItem/userCenterMyBalance.vue

<template>
	<div class="userCenterMyBalance">
		<div class="title">
			{{ $t('common.myBalance') }}
			（{{ balance | twoDecimal }}{{ $i18n.locale == 'zh' ? '元' : 'CNY' }}）
		</div>
		<div class="table">
			<div class="search">
				<span :class="{active:params.search1==='全部'}"
				      @click="activeChange('全部')">{{ $i18n.locale == 'zh' ? '全部' : 'All' }}</span>
				<span :class="{active:params.search1==='收入'}"
				      @click="activeChange('收入')">{{ $i18n.locale == 'zh' ? '收入' : 'income' }}</span>
				<span :class="{active:params.search1==='支出'}"
				      @click="activeChange('支出')">{{ $i18n.locale == 'zh' ? '支出' : 'expend' }}</span>
				<el-button type="primary" style="margin: 20px 20px 8px;float: right;" @click="topUp">
					{{ $i18n.locale == 'zh' ? '充值' : 'top up' }}
				</el-button>
			</div>
			<el-table
				:data="userPaymentDetailsPage"
				v-loading="loading"
				style="width: 100%"
				:header-cell-style="{backgroundColor:'#f8f8f8'}">
				<el-table-column
					prop="serialNumber"
					align="center"
					:label="$i18n.locale==='zh'?'流水号':'serial number'"
					width="150">
				</el-table-column>
				<el-table-column
					align="center"
					:label="$i18n.locale==='zh'?'日期':'date'"
					width="150">
					<template slot-scope="scope">
						<span>{{ scope.row.updateDate | time('YYYY-MM-DD HH:mm:ss') }}</span>
					</template>
				</el-table-column>
				<el-table-column
					prop="type"
					align="center"
					:label="$i18n.locale==='zh'?'类型':'type'"
					width="100">
				</el-table-column>
				<el-table-column
					prop="money"
					align="center"
					:label="$i18n.locale==='zh'?'金额':'money'"
					width="120">
				</el-table-column>
				<el-table-column
					prop="balance"
					align="center"
					:label="$i18n.locale==='zh'?'账户余额（元）':'balance (CNY)'"
					width="120">
				</el-table-column>
				<el-table-column
					prop="payment"
					align="center"
					:label="$i18n.locale==='zh'?'支付方式':'payment'"
					width="120">
				</el-table-column>
				<el-table-column
					prop="remark"
					align="center"
					:label="$i18n.locale==='zh'?'备注':'remark'"
					min-width="150">
				</el-table-column>
			</el-table>
			<el-pagination
				background
				@size-change="(val)=>{page.pageSize = val;}"
				@current-change="(val)=>{page.pageNo = val;}"
				layout="prev, pager, next"
				:total="page.total"
				:current-page="page.pageNo"
				:page-sizes="[10, 20, 50, 100]"
				:page-size="page.pageSize"
				style="text-align: center;margin-top: 20px;">
			</el-pagination>
		</div>
	</div>
</template>

<script>
import {
	addUmsUserCommodityAddresss,
	deleteUmsUserCommodityAddresss,
	getSysAreaList,
	getUmsUserCommodityAddresss
} from "@/api/user";
import moment from "moment";

export default {
	name: "userCenterMyBalance",
	data() {
		return {
			booleanFlag: {},
			user: {
				umsUser: {}
			},
			loading: false,
			params: {
				search1: '全部'
			},
			page: {
				pageNo: 1,
				pageSize: 10,
				total: 0
			},
			balance:'10.00',
			userPaymentDetailsPage:[
				{
					serialNumber:'202011110140',
					updateDate:1647487082000,
					type:'1',
					money:'30.00',
					balance:'10.00',
					payment:'支付宝',
					remark:'',
				},
				{
					serialNumber:'202011110140',
					updateDate:1647487000000,
					type:'0',
					money:'30.00',
					balance:'40.00',
					payment:'余额',
					remark:'',
				},
			]
		}
	},
	filters:{
		twoDecimal(value) {
			return parseFloat(String(value)).toFixed(2)
		},
		time(date, type) {
			return moment(date).format(type)
		},
	},
	watch: {
		page: {
			handler: function () {
				this.loading = true
				this.getUserPaymentDetailsPage()
			},
			deep: true
		},
		params: {
			handler: function () {
				this.loading = true
			},
			deep: true
		},
	},
	mounted() {
		this.init()
	},
	methods: {
		init() {
			this.user = JSON.parse(window.localStorage.getItem('user'));
			if (this.user.umsUser.userPic == undefined) {
				this.user.umsUser.userPic = ''
			}
			this.getUserPaymentDetailsPage()
		},
		getUserPaymentDetailsPage(){
			setTimeout(()=>{
				this.loading = false
			},500)
		},
		activeChange(value) {
			this.params.search1 = value
			this.page.pageNo = 1
			this.getUserPaymentDetailsPage()
		},
		topUp(){
			alert('topUp()')
		}
	}
}
</script>

<style scoped lang="less">
.userCenterMyBalance{
	.title {
		height: 60px;
		line-height: 60px;
		padding-top: 30px;
		margin-left: 30px;
		margin-right: 30px;
		border-bottom: 1px solid rgba(228, 228, 228, 1);
	}
	.search {
		font-size: 14px;
		font-weight: 600;
		height: 70px;
		line-height: 70px;

		span {
			cursor: pointer;
			margin: 0 30px;

			&.active {
				color: #60aae3;
			}
		}
	}
}
</style>