fe / ufo-app-web · Commits

Go to a project

Authored by yyq
Commit aa44f672db2b0164a9e959eab10cf84b1a134fc5 1 parent 9ddc5459

fix list

Inline Side-by-side
Showing 5 changed files with 162 additions and 135 deletions
<template>
<LayoutApp :title="title">
<p class="mian-tip">请添加持卡人本人银行卡</p>
<Cards v-if="bankCardList.length" ref="cards"></Cards>
<div v-else>
<p class="mian-tip">请添加持卡人本人银行卡</p>
<div class="form-wrap">
<div v-for="(item, index) in formList" :key="index" class="form-row">
<text class="cell-left">{{item.title}}</text>
<input class="cell-right" :placeholder="item.placeholder" :readonly="isReadonly(item)" :value="formValue[index]" @input="inputChange(index, $event)"/>
<div v-if="item.select" class="tap-act">
<Select
:options="selectOptions[item.select]"
:placeholder="item.placeholder"
@change="selectChange(index, $event)"
class="tab-go">
</Select>
›
</div>
<div class="form-wrap">
<div v-for="(item, index) in formList" :key="index" class="form-row">
<text class="cell-left">{{item.title}}</text>
<input class="cell-right" :placeholder="item.placeholder" :readonly="isReadonly(item)" :value="formValue[index]" @input="inputChange(index, $event)"/>
<div v-if="item.select" class="tap-act">
<Select
:options="selectOptions[item.select]"
:placeholder="item.placeholder"
@change="selectChange(index, $event)"
class="tab-go">
</Select>
›
</div>
</div>
</div>
</div>
<p class="error-tip">{{errorTip}}</p>
<div class="option-wrap">
<button class="save-btn" @click="checkBankCardInfo">确定</button>
<p class="error-tip">{{errorTip}}</p>
<div class="option-wrap">
<button class="save-btn" @click="checkBankCardInfo">确定</button>
</div>
</div>
</LayoutApp>
</template>
<script>
import { createNamespacedHelpers } from 'vuex';
import LayoutApp from '../../components/layout/layout-app';
import Cards from './components/cards';
import {Select} from 'cube-ui';
const {mapState, mapActions} = createNamespacedHelpers('mine/bankCard');
... ... @@ -85,7 +88,7 @@ export default {
}
},
computed: {
...mapState(['banks']),
...mapState(['banks', 'bankCardList']),
selectOptions() {
let bankList = [];
... ... @@ -105,7 +108,7 @@ export default {
}
},
methods: {
...mapActions(['fetchBankList', 'checkBankCard', 'bindBankCard']),
...mapActions(['fetchBankCard', 'fetchBankList', 'checkBankCard', 'bindBankCard']),
isReadonly(item) {
return !!item.select;
},
... ... @@ -189,7 +192,7 @@ export default {
onConfirm: () => {
this.bindBankCard(info).then(res => {
if (res.code === 200) {
this.$router.replace({name: 'bankcard'});
this.fetchBankCard();
} else {
this.$createDialog({
type: 'alert',
... ... @@ -207,7 +210,8 @@ export default {
},
components: {
LayoutApp,
Select
Select,
Cards
}
};
</script>
... ...
<template>
<LayoutApp title="我的银行卡">
<div class="card-list">
<div v-for="(card, index) in bankCardList" :key="index" class="card-item">
<div class="card-info">
<p class="bank-name">{{card.bankName}}</p>
<p class="card-id">
<span>****</span>
<span>****</span>
<span>****</span>
<span class="num">{{card.bankCardNo}}</span>
</p>
<p class="user-name">持卡人：{{card.name}}</p>
</div>
</div>
</div>
<p class="change-tip">更换银行卡请致电官方客服</p>
<p class="tel-num">
<a href="tel:400-889-9646" class="tel-href">400-889-9646</a>
</p>
<Cards ref="cards"></Cards>
</LayoutApp>
</template>
<script>
import { createNamespacedHelpers } from 'vuex';
import LayoutApp from '../../components/layout/layout-app';
import {Scroll} from 'cube-ui';
const {mapState, mapActions} = createNamespacedHelpers('mine/bankCard');
import Cards from './components/cards';
export default {
asyncData({store}) {
return store.dispatch('mine/bankCard/fetchBankCard');
},
name: 'cardList',
data() {
return {};
},
mounted() {
if (!this.bankCardList.length) {
this.fetchBankCard();
}
},
methods: {
...mapActions(['fetchBankCard'])
},
computed: {
...mapState(['bankCardList'])
this.$refs.cards.init();
},
components: {
LayoutApp,
Cards
}
};
</script>
<style lang="scss" scoped>
/deep/ .layout-context {
background-color: #f0f0f0!important;
}
.card-list {
padding: 50px;
}
.card-item {
margin: 30px;
padding: 40px;
background: linear-gradient(#363636, #1b181d);
color: #fff;
border-radius: 10px;
position: relative;
overflow: hidden;
&:after {
content: "";
width: 100%;
height: 120%;
background: linear-gradient(116deg, #666, #111);
transform: rotate(63deg);
position: absolute;
top: -20%;
right: -31%;
z-index: 1;
opacity: 0.4;
}
.card-info {
position: relative;
z-index: 2;
}
.bank-name {
font-size: 44px;
}
.card-id {
font-size: 32px;
padding-right: 30px;
margin: 46px 0 40px;
display: flex;
justify-content: space-between;
letter-spacing: 2px;
.num {
font-size: 40px;
position: relative;
top: -6px;
}
}
.user-name {
font-size: 28px;
opacity: 0.9;
position: relative;
bottom: -6px;
}
}
.change-tip,
.tel-num {
text-align: center;
font-size: 28px;
line-height: 1.5;
color: #444;
margin-bottom: 14px;
}
.tel-href {
color: #d0021b;
font-size: 27px;
text-decoration: underline;
}
</style>
... ...
<template>
<div>
<div class="card-list">
<div v-for="(card, index) in bankCardList" :key="index" class="card-item">
<div class="card-info">
<p class="bank-name">{{card.bankName}}</p>
<p class="card-id">
<span>****</span>
<span>****</span>
<span>****</span>
<span class="num">{{card.bankCardNo}}</span>
</p>
<p class="user-name">持卡人：{{card.name}}</p>
</div>
</div>
</div>
<p class="change-tip">更换银行卡请致电官方客服</p>
<p class="tel-num">
<a href="tel:400-889-9646" class="tel-href">400-889-9646</a>
</p>
</div>
</template>
<script>
import { createNamespacedHelpers } from 'vuex';
import LayoutApp from '../../../components/layout/layout-app';
import {Scroll} from 'cube-ui';
const {mapState, mapActions} = createNamespacedHelpers('mine/bankCard');
export default {
mounted() {
this.init();
},
methods: {
...mapActions(['fetchBankCard']),
init() {
if (!this.bankCardList.length) {
this.fetchBankCard();
}
}
},
computed: {
...mapState(['bankCardList'])
},
components: {
LayoutApp,
}
};
</script>
<style lang="scss" scoped>
/deep/ .layout-context {
background-color: #f0f0f0!important;
}
.card-list {
padding: 50px;
}
.card-item {
margin: 30px;
padding: 40px;
background: linear-gradient(#363636, #1b181d);
color: #fff;
border-radius: 10px;
position: relative;
overflow: hidden;
&:after {
content: "";
width: 100%;
height: 120%;
background: linear-gradient(116deg, #666, #111);
transform: rotate(63deg);
position: absolute;
top: -20%;
right: -31%;
z-index: 1;
opacity: 0.4;
}
.card-info {
position: relative;
z-index: 2;
}
.bank-name {
font-size: 44px;
}
.card-id {
font-size: 32px;
padding-right: 30px;
margin: 46px 0 40px;
display: flex;
justify-content: space-between;
letter-spacing: 2px;
.num {
font-size: 40px;
position: relative;
top: -6px;
}
}
.user-name {
font-size: 28px;
opacity: 0.9;
position: relative;
bottom: -6px;
}
}
.change-tip,
.tel-num {
text-align: center;
font-size: 28px;
line-height: 1.5;
color: #444;
margin-bottom: 14px;
}
.tel-href {
color: #d0021b;
font-size: 27px;
text-decoration: underline;
}
</style>
... ...
... ... @@ -42,7 +42,7 @@ export default {
return result || {};
},
async bindBankCard({commit}, {name, idCardNo, bankCode, bankBranch, bankCardNo}) {
const result = await this.$api.post('/api/ufo/bankcard/checkBankCard', {
const result = await this.$api.post('/api/ufo/bankcard/bindBankCard', {
name,
idCardNo,
bankCode,
... ...
... ... @@ -23,6 +23,6 @@ export default {
[Types.FETCH_BANK_CARD_SUCCESS](state, {card}) {
state.fetchingBank = false;
state.bankCardList.push(card);
card && state.bankCardList.push(card);
},
};
... ...