alipay-emulator/pages/finance-management/select-image/select-image.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: "/static/image/finance-management/bg-style/style-1.png",
	searchText: "小而美的基金",
	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 = {
		...defualtData,
		...uni.getStorageSync('financeInfo')
	}
})

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>