163 lines
3.1 KiB
Vue
163 lines
3.1 KiB
Vue
<template>
|
|
<view>
|
|
<NavBar title="选择理财图片样式" bgColor="#F5F5F5" isRightButton @right-click="handleRightButtonClick"></NavBar>
|
|
<view class="conatiner flex flex-justify-between">
|
|
<view v-for="index in 6" :key="index" class="cover-item flex flex-column flex-align-center"
|
|
@click="data.selectedImage = index">
|
|
<view class="image-box" :class="{ 'active': index == data.selectedImage }">
|
|
<image class="w100 h100" :src="`/static/image/finance-management/covers/cover-${index}.png`"
|
|
mode="widthFix"></image>
|
|
</view>
|
|
<view class="text">样式{{ index }}</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script setup>
|
|
import NavBar from '@/components/nav-bar/nav-bar.vue'
|
|
import { ref, reactive, toRefs, onMounted } from 'vue';
|
|
|
|
const defualtData = {
|
|
benefitsText: '尊享礼遇18000元/年',
|
|
cardHolderName: 'XiaoMing',
|
|
vipLevel: "v3",
|
|
navigationMenuStyle: "style-1",
|
|
bgImage: "",
|
|
fortune: {
|
|
yuebao: {
|
|
value: 3.53,
|
|
labelSub: "100000",
|
|
},
|
|
dingqi: {
|
|
value: 50,
|
|
labelSub: "100000",
|
|
},
|
|
jijin: {
|
|
value: 5000,
|
|
labelSub: "100000",
|
|
},
|
|
huangjin: {
|
|
value: -300,
|
|
labelSub: "100000",
|
|
},
|
|
yulingbao: {
|
|
value: 20,
|
|
labelSub: "100000",
|
|
}
|
|
},
|
|
myAssets: {
|
|
baoxian: {
|
|
labelSub: "3份保单保障中",
|
|
type: "text"
|
|
}
|
|
},
|
|
myQuota: {
|
|
huabei: {
|
|
labelSub: "可用100000",
|
|
type: "text"
|
|
},
|
|
jubei: {
|
|
labelSub: "可用100000",
|
|
type: "text"
|
|
},
|
|
beizhi: {
|
|
labelSub: "可用100000",
|
|
type: "text"
|
|
},
|
|
wangshangdai: {
|
|
labelSub: "预计可借100000",
|
|
type: "text"
|
|
}
|
|
}
|
|
}
|
|
|
|
const data = reactive({
|
|
financeInfo: {
|
|
...defualtData
|
|
},
|
|
bgImage: "",
|
|
selectedImage: 0
|
|
})
|
|
|
|
const { bgImage, selectedImage, financeInfo } = toRefs(data)
|
|
|
|
onMounted(() => {
|
|
financeInfo.value = uni.getStorageSync('financeInfo') || defualtData
|
|
})
|
|
|
|
const handleRightButtonClick = () => {
|
|
const financeInfoData = {
|
|
...financeInfo.value
|
|
}
|
|
financeInfoData.bgImage = `/static/image/finance-management/bg-style/style-${data.selectedImage}.png`
|
|
uni.setStorageSync('financeInfo', financeInfoData)
|
|
uni.navigateBack()
|
|
}
|
|
</script>
|
|
<style>
|
|
@import "@/common/main.css";
|
|
|
|
page {
|
|
background-color: #F5F5F5;
|
|
}
|
|
</style>
|
|
<style lang="less" scoped>
|
|
.conatiner {
|
|
background-color: #ffffff;
|
|
margin: 16rpx 24rpx;
|
|
border-radius: 16rpx;
|
|
padding: 36rpx;
|
|
flex-wrap: wrap;
|
|
|
|
.image-box {
|
|
width: 100%;
|
|
overflow: hidden;
|
|
border-radius: 24rpx;
|
|
}
|
|
|
|
.cover-item {
|
|
width: calc(50% - 13rpx);
|
|
flex-shrink: 0;
|
|
|
|
.text {
|
|
font-size: 28rpx;
|
|
color: #767676;
|
|
margin-top: 8rpx;
|
|
margin-bottom: 24rpx;
|
|
}
|
|
}
|
|
|
|
.active {
|
|
position: relative;
|
|
border: 6rpx solid #1A7CFF;
|
|
border-radius: 24rpx;
|
|
}
|
|
|
|
.active::before {
|
|
content: '';
|
|
position: absolute;
|
|
top: 0px;
|
|
left: 0px;
|
|
width: 100%;
|
|
height: 100%;
|
|
border-radius: 24rpx;
|
|
background-color: #1A7CFF;
|
|
opacity: 0.1;
|
|
z-index: 1;
|
|
}
|
|
|
|
.active::after {
|
|
content: '';
|
|
position: absolute;
|
|
bottom: -1px;
|
|
right: -1px;
|
|
width: 52rpx;
|
|
height: 44rpx;
|
|
background-image: url(/static/image/finance-management/active.png);
|
|
background-size: 100% 100%;
|
|
z-index: 2;
|
|
}
|
|
}
|
|
</style>
|