<template>
|
<div id="payment" class="w-full h-full payment">
|
<div class="flex flex-col w-full h-full">
|
<assets-head class="w-full" :title="$t('C2C收款方式')" ref="orderNav" :backFunc="() => $router.push('/wantBuy')" />
|
|
<div class="payment_content w-full flex-1 bg-white">
|
<car-item class="pb-60" v-for="(item, index) in items" :item="item" :key="index" :index="index" />
|
</div>
|
<div ref="add" class="add w-full mainBackground flex justify-center pt-44 pb-100">
|
<van-button type="info" @click="enterPaymentMethod" class="w-748">{{ $t('添加收款方式') }}</van-button>
|
</div>
|
</div>
|
</div>
|
</template>
|
|
<script>
|
import {
|
mapState,
|
} from "vuex";
|
import { Button, Toast } from 'vant';
|
import assetsHead from "@/components/assets-head";
|
import CarItem from "@/page/placeAnOrder/page/payment-method/CarItem";
|
import otcApi from "@/API/otc.js";
|
import {
|
SET_NAV_HEIGHT,
|
} from "@/store/const.store";
|
|
export default {
|
name: "Payment",
|
data() {
|
return {
|
footerHeight: 0,
|
items: [
|
// {
|
// title: this.$t('银行卡'),
|
// number: "4367421420489044633",
|
// name: "James",
|
// bankName: this.$t('中国农业银行'),
|
// desc: this.$t('北京朝阳路支行'),
|
// type: 'CN'
|
// },
|
// {
|
// title: "AI-Rafidain QiServices",
|
// number: "4367421420489044633",
|
// phone: "13146872211",
|
// name: "James",
|
// desc: "Supplementary card",
|
// type: 'EN'
|
// },
|
]
|
}
|
},
|
created() {
|
this.getPaymentMethods();
|
},
|
mounted() {
|
console.log(this.items);
|
// 获取导航高度
|
const height = this.$refs.orderNav.$el.getBoundingClientRect().height;
|
this.$store.commit(`payment/${SET_NAV_HEIGHT}`, {
|
height,
|
})
|
// 获取底部高度
|
this.footerHeight = this.$refs.add.getBoundingClientRect().height;
|
},
|
methods: {
|
getPaymentMethods() {
|
Toast.loading()
|
otcApi.ctcPaymentMethodList({ language: this.$i18n.locale }).then(res => {
|
Toast.clear()
|
this.items = res.data;
|
})
|
},
|
// 进入添加收款方式
|
enterPaymentMethod() {
|
this.$router.push({
|
path: '/wantBuy/addPaymentMethod'
|
})
|
}
|
},
|
components: {
|
[Button.name]: Button,
|
assetsHead,
|
CarItem,
|
},
|
computed: {
|
...mapState("payment", ["navHeight"])
|
}
|
}
|
</script>
|
|
<style lang="scss" scoped>
|
.payment {
|
box-sizing: border-box;
|
|
::v-deep .van-button {
|
border-radius: 10px;
|
}
|
}
|
|
.payment_content {
|
overflow-y: scroll;
|
|
@include themify() {
|
background: themed("tab_background");
|
}
|
|
//.payment_content {
|
// padding: 0 30px;
|
//}
|
}
|
|
::v-deep .van-button--info {
|
@include themify() {
|
background: themed("btn_main");
|
}
|
|
@include themify() {
|
border-color: themed("btn_main");
|
}
|
}
|
</style>
|
