123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210 |
- <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>
|