|
|
@@ -0,0 +1,105 @@
|
|
|
+<script lang="ts" setup>
|
|
|
+import { storeToRefs } from 'pinia'
|
|
|
+import { ref } from 'vue'
|
|
|
+import { useUserStore } from '@/store'
|
|
|
+import { useTokenStore } from '@/store/token'
|
|
|
+
|
|
|
+definePage({
|
|
|
+ style: {
|
|
|
+ navigationBarTitleText: '绑定银行卡',
|
|
|
+ },
|
|
|
+})
|
|
|
+
|
|
|
+const list = ref([{
|
|
|
+ bankName: '建设银行',
|
|
|
+ bankLogo: '/static/images/income/y-1.png',
|
|
|
+ bankNumber: '6228 **** **** *** 000',
|
|
|
+}, {
|
|
|
+ bankName: '中国银行',
|
|
|
+ bankLogo: '/static/images/income/y-1.png',
|
|
|
+ bankNumber: '6228 **** **** *** 000',
|
|
|
+}, {
|
|
|
+ bankName: '农业银行',
|
|
|
+ bankLogo: '/static/images/income/y-1.png',
|
|
|
+ bankNumber: '6228 **** **** *** 000',
|
|
|
+}, {
|
|
|
+ bankName: '工商银行',
|
|
|
+ bankLogo: '/static/images/income/y-1.png',
|
|
|
+ bankNumber: '6228 **** **** *** 000',
|
|
|
+}])
|
|
|
+</script>
|
|
|
+
|
|
|
+<template>
|
|
|
+ <view class="profile-container">
|
|
|
+ <view class="bank-list">
|
|
|
+ <view v-for="item in list" :key="item.bankName" class="bank-list-item jh">
|
|
|
+ <view class="bank-list-item-left">
|
|
|
+ <view class="bank-list-item-left-hanke">
|
|
|
+ <image src="/static/images/income/y-1.png" />
|
|
|
+ <view class="bank-list-item-left-hanke-text">
|
|
|
+ {{ item.bankName }}
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="bank-list-item-left-number">
|
|
|
+ {{ item.bankNumber }}
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="bank-list-item-right">
|
|
|
+ <view>储蓄卡 4427</view>
|
|
|
+ <view>完整卡号</view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+</template>
|
|
|
+
|
|
|
+<style lang="scss" scoped>
|
|
|
+.profile-container {
|
|
|
+ font-family: Alibaba PuHuiTi;
|
|
|
+ min-height: 100vh;
|
|
|
+ background-color: #f5f5f5;
|
|
|
+ line-height: 1;
|
|
|
+ padding: 20rpx;
|
|
|
+}
|
|
|
+.bank-list {
|
|
|
+ padding: 0 20rpx;
|
|
|
+ border-radius: 10rpx;
|
|
|
+ .bank-list-item {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: space-between;
|
|
|
+ padding: 30rpx 27rpx 40rpx 30rpx;
|
|
|
+ border-radius: 10rpx;
|
|
|
+ margin-bottom: 20rpx;
|
|
|
+ color: #fff;
|
|
|
+ &.jh {
|
|
|
+ background: linear-gradient(270deg, #3571fe 0%, #5386ff 100%);
|
|
|
+ }
|
|
|
+ .bank-list-item-left {
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ gap: 38rpx;
|
|
|
+ .bank-list-item-left-hanke {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ gap: 14rpx;
|
|
|
+ font-weight: 400;
|
|
|
+ font-size: 26rpx;
|
|
|
+ image {
|
|
|
+ width: 30rpx;
|
|
|
+ height: 30rpx;
|
|
|
+ }
|
|
|
+ .bank-list-item-left-hanke-text {
|
|
|
+ font-weight: 400;
|
|
|
+ font-size: 26rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .bank-list-item-right {
|
|
|
+ display: flex;
|
|
|
+ gap: 10rpx;
|
|
|
+ padding: 28rpx 4rpx 28rpx 0;
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+</style>
|