<template> <div class="container temp-container"> <div class="header"> <tab-header :title="title" /> </div> <div class="contener"> <div class="header"> <div class="header_box"> <div class="title"></div> <div class="header_content"> <div class="fund"> <span>账户余额</span> <i>{{ summary.balance|moneyNum }}</i> </div> <div class="paid"> <span>待付金额</span> <i class="paid_color">{{ summary.waitPay|moneyNum }}</i> </div> </div> <div class="header_info"> <div class="left" @click="toPay()"> <img src alt /> <span>充值</span> </div> <div class="right" @click="toPage()"> <img src alt /> <span>资金记录</span> </div> </div> </div> </div> <div class="box"> <div class="list" v-for="(item, index) in list" :key="index"> <div class="list_title" @click="toNextPage(index, item.productName)"> <div class="title">{{ item.productName }}</div> <van-icon name="arrow" class="arrow_right" /> </div> <p> <span>应付金额</span> <i>{{ item.totalAmount|moneyNum }}</i> </p> <p> <span>待付金额</span> <i>{{ item.waitPayAmount |moneyNum}}</i> </p> </div> </div> </div> </div> </template> <script> import { NavBar, Icon } from "vant"; import { TabHeader } from "@/components"; import { mapActions } from "vuex"; import setBarHeight from "../../assets/js/setBarHeight.js"; export default { components: { [Icon.name]: Icon, TabHeader }, mixins: [setBarHeight], data() { return { title: "", list: [], payUrl: "", summary: { accountId: 0, balance: 0, waitPay: 0 } }; }, methods: { ...mapActions(["loadMoreList", "loadMoreSummary", "loadPayUrl"]), toPay() { const failUrl=encodeURIComponent("https://pay.qinqinxiaobao.com/callback/fail"); const successUrl=encodeURIComponent("https://pay.qinqinxiaobao.com/callback/success"); let payUrl=`${this.payUrl}&accountType=19&selected=1&failUrl=${failUrl}&successUrl=${successUrl}`; console.log('payUrl=',payUrl); window.location.href=payUrl; }, toPage() { this.$router.push({ name: "billrecord", query: { accountId: this.summary.accountId,fromType:'more' } }); }, toNextPage(index, name) { this.$router.push({ name: "moredetail", query: { index, name } }); }, async getData() { console.log("more index getData"); await this.loadMoreSummary().then( data => { this.summary = data; console.log("this.summary=", this.summary); }, err => { console.log(err); } ); await this.loadMoreList().then( data => { this.list = data; }, err => { console.log(err); } ); }, navLeftArrowClick() { this.$router.go(-1); } }, async mounted() { this.setPageNavState(); this.globalNavLeftArrowClick(this.navLeftArrowClick); await this.getData(); this.payUrl = await this.loadPayUrl(); } }; </script> <style lang="less" scoped> .contener { .header { height: 136px; padding: 0 16px; background: #0978e7; border-top: 1px solid #0978e7; .header_box { height: 174px; background: rgba(255, 255, 255, 1); box-shadow: 0px 2px 10px 0px rgba(0, 0, 0, 0.1); border-radius: 0px 0px 4px 4px; margin-top: 20px; .title { height: 2px; box-shadow: 0px 1px 6px 0px rgba(6, 105, 204, 0.6); } .header_content { height: 122px; .fund { width: 50%; float: left; } .paid { width: 50%; float: left; .paid_color { color: #ff9100; } } span { height: 20px; font-size: 14px; color: rgba(149, 152, 158, 1); line-height: 20px; display: block; margin: 20px 0 0 20px; } i { height: 32px; font-size: 28px; font-weight: bold; color: rgba(61, 64, 71, 1); line-height: 32px; margin-top: 12px; display: block; margin-left: 20px; } } .header_info { height: 52px; background: rgba(245, 247, 250, 1); border-radius: 0px 0px 8px 8px; display: flex; align-items: center; justify-content: center; text-align: center; .left { width: 50%; } .right { width: 50%; } span { height: 20px; font-size: 14px; font-weight: 500; color: rgba(7, 122, 236, 1); line-height: 20px; letter-spacing: 1px; } } } } .box { padding: 0 16px; .list { background: rgba(255, 255, 255, 1); box-shadow: 0px 2px 10px 0px rgba(0, 0, 0, 0.1); border-radius: 4px; margin-top: 16px; padding: 16px; &:first-child { margin-top: 74px; } .list_title { display: flex; align-items: center; .title { height: 22px; font-size: 16px; font-weight: 500; color: rgba(61, 64, 71, 1); line-height: 22px; } .arrow_right { margin-left: auto; color: #e4e4e6; } } p { display: flex; align-items: center; margin-top: 6px; height: 18px; font-size: 13px; color: rgba(149, 152, 158, 1); line-height: 18px; i { font-style: normal; margin-left: auto; } } } } } </style>