171 lines
3.1 KiB
Vue
171 lines
3.1 KiB
Vue
<template>
|
|
<view>
|
|
<NavBar :title="data.navBar.title" :bgColor="data.navBar.bgColor" />
|
|
<view class="list-container">
|
|
<view class="item" v-for="item in source" :key="item.id" @click="goPage(item.callUrl,item.name)"
|
|
:style="{ background: ` #FFFFFF` }">
|
|
<view class="content flex flex-align-center">
|
|
<image class="logo" :src="`/static/image/other/bank/${item.icon}.png`" mode=""></image>
|
|
<view class="name flex-1">{{ item.name }}银行</view>
|
|
<view class="right-button">
|
|
<uni-icons type="right" size="16"></uni-icons>
|
|
</view>
|
|
</view>
|
|
<!-- <view class="line" :style="{ background: item.color.lineColor }"></view> -->
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script setup>
|
|
import NavBar from '@/components/nav-bar/nav-bar.vue'
|
|
import {
|
|
ref,
|
|
reactive,
|
|
getCurrentInstance
|
|
} from 'vue'
|
|
import {
|
|
onLoad
|
|
} from "@dcloudio/uni-app";
|
|
import {
|
|
util
|
|
} from '@/utils/common.js';
|
|
|
|
const {
|
|
appContext,
|
|
proxy
|
|
} = getCurrentInstance();
|
|
// 列表
|
|
const source = ref([{
|
|
name: '招商',
|
|
color: {
|
|
bgColor: '#F3EAFF',
|
|
lineColor: '#B78EF5',
|
|
buttonColor: '#BA8DFF',
|
|
},
|
|
icon: 'zsyh',
|
|
callUrl: "/pages/other/bank/zsyh"
|
|
},
|
|
{
|
|
name: '工商',
|
|
color: {
|
|
bgColor: '#FFE9E9',
|
|
lineColor: '#FF6969',
|
|
buttonColor: '#FB6767',
|
|
},
|
|
icon: 'gsyh',
|
|
callUrl: "/pages/other/bank/gsyh"
|
|
},
|
|
{
|
|
name: '农业',
|
|
color: {
|
|
bgColor: '#FFF0DD',
|
|
lineColor: '#FFA143',
|
|
buttonColor: '#FFA64D',
|
|
},
|
|
icon: 'nyyh',
|
|
callUrl: "/pages/other/bank/nyyh"
|
|
},
|
|
{
|
|
name: '建设',
|
|
color: {
|
|
bgColor: '#E0FFD9',
|
|
lineColor: '#56B745',
|
|
buttonColor: '#5DCD49',
|
|
},
|
|
icon: 'jsyh',
|
|
callUrl: "/pages/other/bank/jsyh"
|
|
}
|
|
])
|
|
|
|
const data = reactive({
|
|
navBar: {
|
|
title: '选择机型',
|
|
bgColor: '#F0F4F9',
|
|
},
|
|
type: "message"
|
|
})
|
|
|
|
onLoad((options) => {
|
|
if (options.type) {
|
|
data.type = options.type
|
|
}
|
|
proxy.$apiUserEvent('all', {
|
|
type: 'event',
|
|
key: 'bank',
|
|
prefix: '.uni.other.',
|
|
value:'银行卡首页'
|
|
})
|
|
})
|
|
|
|
function goPage(url,name) {
|
|
if (url) {
|
|
proxy.$apiUserEvent('all', {
|
|
type: 'event',
|
|
key: 'bank',
|
|
prefix: '.uni.other.',
|
|
value:name+'银行'
|
|
})
|
|
util.goPage(url)
|
|
} else {
|
|
uni.showToast({
|
|
title: '开发中',
|
|
icon: 'none'
|
|
})
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style>
|
|
@import '@/common/main.css';
|
|
</style>
|
|
<style lang="less">
|
|
.list-container {
|
|
background-color: #F0F4F9;
|
|
padding: 24rpx 32rpx;
|
|
}
|
|
|
|
.item {
|
|
width: 100%;
|
|
height: 188rpx;
|
|
border-radius: 24rpx;
|
|
margin-bottom: 24rpx;
|
|
padding: 40rpx 36rpx 24rpx 28rpx;
|
|
|
|
.content {
|
|
.logo {
|
|
width: 96rpx;
|
|
height: 96rpx;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.name {
|
|
margin-left: 32rpx;
|
|
color: #1A1A1A;
|
|
font-size: 36rpx;
|
|
font-weight: 500;
|
|
}
|
|
|
|
.right-button {
|
|
width: 140rpx;
|
|
height: 64rpx;
|
|
border-radius: 16rpx;
|
|
color: #ffffff;
|
|
font-size: 28rpx;
|
|
line-height: 64rpx !important;
|
|
text-align: right;
|
|
// display: flex;
|
|
// align-items: center;
|
|
// justify-content: center;
|
|
}
|
|
}
|
|
|
|
.line {
|
|
width: 100rpx;
|
|
height: 8rpx;
|
|
filter: blur(5px);
|
|
opacity: 0.5;
|
|
margin-top: 4rpx;
|
|
}
|
|
}
|
|
</style> |