youngee_b_api/pages/mycenter/myinformation/myinformation.vue

<template>
	<view>
		<!-- 胶囊 -->
		<mvBar :mysNavConfig="mysNavConfig"></mvBar>
		<view style="margin-top: 160rpx;"></view>
		<view class="func">
			<view class="func-head">
				<p>任务报名必填项</p>
			</view>
			<view class="func-card">
				<p @click="handlePersoninfo()">个人资料管理</p>
				<image class="show-body1-icon" :src="picture.icon_right" @click="handlePersoninfo()"></image>
			</view>
			<view class="func-card">
				<p @click="handleLocation()">收货地址管理</p>
				<image class="show-body1-icon" :src="picture.icon_right" @click="handleLocation()"></image>
			</view>
			<view class="func-card">
				<p @click="handleAccount()">社媒账号绑定</p>
				<image class="show-body1-icon" :src="picture.icon_right" @click="handleAccount()"></image>
			</view>
		</view>
		<view class="func">
			<view class="func-head">
				<p>提现申请必填项</p>
			</view>
			<view class="func-card">
				<p @click="handleBank()">银行卡信息绑定</p>
				<image class="show-body1-icon" :src="picture.icon_right" @click="handleBank()"></image>
			</view>
			<view class="func-card">
				<p @click="handleZhifubao()">支付宝信息绑定</p>
				<image class="show-body1-icon" :src="picture.icon_right" @click="handleZhifubao()"></image>
			</view>
		</view>
	</view>
</template>

<script>
	import mvBar from "@/components/mys_navBar/mysNavBar";
	export default {
		components: {
			mvBar,
		},
		data() {
			return {
				picture: {
					icon_right: 'https://horastar.obs.cn-east-3.myhuaweicloud.com/talent_upload/icon-arrow-right.png',
				},				
				mysNavConfig: {
					/* 开启单页显示首页图标 */
					isHome: true,
					/* 固定导航  */
					navFixed: true,
					/* 标题 （屏幕中心居中 两边图标中心居中使用slot center1） */
					navTitle: {
						text: "个人信息",
						color: "",
						fontSize: "32rpx", // px upx rpx
						fontWeight: "normal", // 100 - 700
					},
					btnType: "type2",
					onLeftClick: "",
					/* type2 按钮 */
					type2Config: {
						// 左图标
						leftPath: "/static/img/png2.png",
						// 右图标
						rightPath: "/static/img/png4.png",
						// 圆角
						radius: "40rpx",
					},
				},
			}
		},
		methods: {
			handlePersoninfo() {
				uni.navigateTo({
					url: '/pages/mycenter/myinformation/personinfo'
				});
			},
			handleLocation() {
				uni.navigateTo({
					url: '/pages/mycenter/myinformation/mylocation'
				});
			},
			handleAccount() {
				uni.navigateTo({
					url: '/pages/mycenter/myinformation/myaccount'
				});
			},
			handleBank() {
				uni.navigateTo({
					url: '/pages/mycenter/myinformation/mybank'
				});
			},
			handleZhifubao() {
				uni.navigateTo({
					url: '/pages/mycenter/myinformation/myzhifubao'
				});
			},
		}
	}
</script>

<style lang="scss" scoped>
	p {
		font-size: 32rpx;
	}

	.func {}

	.func-head {
		background-color: #f2f2f2;
		padding: 20rpx 30rpx;
	}

	.func-head p {
		font-size: 28rpx;
	}

	.func-card {
		display: flex;
		justify-content: space-between;
		padding: 20rpx 30rpx;
	}
	
	.show-body1-icon {
		width: 30rpx;
		height: 30rpx;
	}
</style>