cyzh-SoundOfMusic-H5/components/indexViews/mine-view.vue

<template>
	<view>
		<view class="bg-white">
			<view class="bg-img flex align-center" style="background-image: url('/static/ldt/mineBgImg.png');height: 372upx;">
				<view class="flex align-center">
					<view class="avatar">
						<u-avatar src="/static/avatar.png" size="110"></u-avatar>
					</view>
					<view class="name">赖德福|德芙值得信赖</view>
				</view>
			</view>
			<view class="container">
				<view class="text-center padding-top-sm">
					<tkiBarcode cid="itf14" :loadMake="false" format="itf14" val="1234567890123" ref="itf14" @result="itf14" />
				</view>
			</view>
			<view class="text-bold text-black" style="padding: 0 0 30upx 50upx;">我的账户</view>
			<view class="flex justify-center text-center padding-bottom">
				<view style="width: 30%;border-right: #eeeeee 1px solid;">
					<view style="color: #fd9244;font-size: 34upx;font-weight: bold;">2000</view>
					<view class="text-sm text-black text-bold">我的积分</view>
				</view>
				<view style="width: 30%;">
					<view style="color: #f90103;font-size: 34upx;font-weight: bold;">+200</view>
					<view class="text-sm text-black text-bold">昨日收益</view>
				</view>
				<view style="width: 30%;">
					<image src="/static/ldt/swapPoints.png" style="width: 41upx;height: 37upx;"></image>
					<view class="text-sm text-black text-bold">换积分</view>
				</view>
			</view>
		</view>
		<view class="card padding-bottom">
			<view class="title">我的明细</view>
			<view class="flex align-center justify-around">
				<view class="bg-img" style="background-image: url('https://upload-file-data.obs.cn-south-1.myhuaweicloud.com/d10d440c3c9e45cbb30b3a727dc9a50c-pointsDetail.png');width: 280upx;height: 120upx;">
					<view class="text-sm text-gray padding-top-sm padding-left">积分明细</view>
					<view class="padding-top-sm padding-left" style="font-size: 34upx;font-weight: bold;">10,000</view>
				</view>
				<view class="bg-img" style="background-image: url('https://upload-file-data.obs.cn-south-1.myhuaweicloud.com/3751ceb0e94c4ae0bfa0652e31f5a902-coupon.png');width: 280upx;height: 120upx;">
					<view class="text-sm text-gray padding-top-sm padding-left">国信信用分</view>
					<view class="padding-top-sm padding-left" style="font-size: 34upx;font-weight: bold;">749</view>
				</view>
			</view>
		</view>
		<view class="card">
			<view class="title">其他服务</view>
			<block v-for="(item, index) in iconList">
				<view class="flex justify-between align-center padding" @click="navByIcon(item.url)">
					<view class="flex align-center">
						<view class="text-black padding-left">{{item.name}}</view>
					</view>
					<view class="flex align-center margin-right" style="width: 38rpx;height: 40rpx;">
						<image :src="item.icon" :style="{width: item.width, height: item.height}"></image>
					</view>
				</view>
				<view class="margin-lr" v-if="index != iconList.length - 1"><u-line color="#eeeeee"></u-line></view>
			</block>
		</view>
	</view>
</template>

<script>
	import tkiBarcode from "@/components/tki-barcode/tki-barcode.vue"
	export default {
		components: {
			tkiBarcode
		},
		data() {
			return {
				iconList: [
					{name: '我的账单', icon: '/static/ldt/icon-bill.png', width: '35upx', height: '39upx', url: ''},
					{name: '银行卡', icon: '/static/ldt/icon-card.png', width: '37upx', height: '28upx', url: ''},
					{name: '我的VIP', icon: '/static/ldt/icon-vip.png', width: '38upx', height: '29upx', url: ''},
				]
			}
		},
		mounted() {
			this.$refs['itf14']._makeCode()
		},
		methods: {
			itf14(v) {
				// console.log('itf14:', v)
			},
			navByIcon(url) {
				uni.navigateTo({
					url: url
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.avatar {
		padding-left: 40upx;
		padding-right: 20upx;
	}
	.name {
		font-size: 26upx;
		font-family: PingFang SC;
		font-weight: 600;
		color: #222222;
	}
	.container {
		background-color: #ffffff;
		margin: -120upx 30upx 30upx 30upx;
		height: 180upx;
		border-radius: 100upx;
		box-shadow: 10upx 20upx 60upx #d8d8d8;
	}
	.card {
		margin: 20upx 30upx;
		background-color: #ffffff;
		border-radius: 10upx;
		.title {
			font-weight: bold;
			color: #000000;
			padding: 30upx 20upx;
		}
	}
</style>