yuebeilian-c/src/packages/user/money/gold.vue

<template>
	<view class="huazhi-box">
		<Navbar title="我的绿通" color="#333"></Navbar>
		<view class="content">
			<view class="bk"></view>
			<view class="info">
				<view class="bottom">
					<view class="item">
						<view class="tip">可用绿通</view>
						<view class="num">{{info.gold}}</view>
						<view class="tip">我的绿通：{{info.lockedGold}}</view>
					</view>
					<view class="title">
						绿通兑换产品系数（1 : {{info.goldOfficialPrice}}）
					</view>
				</view>
				<view class="box">
					<view class="item-box">
						<view class="item" @click="toPage('/packages/user/fund/record-all', {classify: 5, name: '空投奖励'})">
							<view class="left">
								<image :src="static ? static + 'gold-01.png' : ''" class="pic" mode="widthFix"></image>
								<text>空投奖励</text>
							</view>
							<div class="right">
								{{info.airDropped}}
								<text class="icon">&#xe84a;</text>
							</div>
						</view>
					</view>
					<view class="item-box">
						<view class="item" @click="toPage('/packages/user/fund/record-all', {classify: 6, name: '打赏记录'})">
							<view class="left">
								<image :src="static ? static + 'gold-02.png' : ''" class="pic" mode="widthFix"></image>
								<text>打赏记录</text>
							</view>
							<view class="right">
								{{info.rewardNum}}条
								<text class="icon">&#xe84a;</text>
							</view>
						</view>
					</view>
					<view class="item-box">
						<view class="item" @click="toPage('/packages/user/fund/record-all', {classify: 8, name: 'KPI考核'})">
							<view class="left">
								<image :src="static ? static + 'gold-03.png' : ''" class="pic" mode="widthFix"></image>
								<text>KPI考核</text>
							</view>
							<view class="right">
								{{info.kpiTotal}}条
								<text class="icon">&#xe84a;</text>
							</view>
						</view>
					</view>
					<view class="item-box">
						<view class="item" @click="toPage('/packages/user/fund/record-all', {classify: 7, name: '绿通互转记录'})">
							<view class="left">
								<image :src="static ? static + 'gold-04.png' : ''" class="pic" mode="widthFix"></image>
								<text>绿通互转记录</text>
							</view>
							<view class="right">
								{{info.goldTransferNum}}条
								<text class="icon">&#xe84a;</text>
								<!-- <IconText class="icon" :code="`\ue84a`" color="#999" size='12'></IconText> -->
							</view>
						</view>
					</view>
					<view class="item-box">
						<view class="item" @click="toPage('/packages/user/fund/record-all', {classify: 9, name: '订单记录'})">
							<view class="left">
								<image :src="static ? static + 'gold-05.png' : ''" class="pic" mode="widthFix"></image>
								<text>订单记录</text>
							</view>
							<view class="right">
								{{info.orderTotal}}条
								<text class="icon">&#xe84a;</text>
								<!-- <IconText class="icon" :code="`\ue84a`" color="#999" size='12'></IconText> -->
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script lang='ts'>
	import {
		Component,
		Prop,
		Vue
	} from 'vue-property-decorator';
	import {
		OSS_STATIC
	} from '@/common/constants';
	@Component({
		filters: {
			moneyFormat(val: any) {
				if (!+val) return '0.00';
				return (+val).toFixed(2);
			},
			moneyFormat2(val: any) {
				if (!+val) return '0.000000000000000000';
				return (+val).toFixed(18);
			}
		}
	})

	export default class Huazhi extends Vue {
		static: string = OSS_STATIC;
		info: any = {};

		onShow() {
			this.getInfo();
		}

		toPage(url: any, data: any) {
			if (!url) {
				uni.showToast({
					title: '敬请期待',
					icon: 'none'
				})
				return;
			}
			this.$Router.push({
				path: url,
				query: data
			})
		}
		getInfo() {
			this.$http
				.get({
					url: this.$api.getHuazhi
				})
				.then((res: any) => {
					this.info = res;
				}, (err: any) => {
					console.log(err);
				});
		}
	}
</script>

<style lang="scss" scoped>
	.huazhi-box {
		.content {
			@include flex-y();

			.bk {
				width: vw(800);
				height: vw(800);
				background: #6ABCE6;
				border-radius: vw(300);
				position: absolute;
				left: 50%;
				transform: translateX(-50%);
				top: vw(-600);
			}

			.info {
				position: relative;
				z-index: 10;
				margin-top: vw(30);

				.top {
					@include flex-x();
				}

				.bottom {
					background: #fff;
					width: vw(355);
					border-radius: vw(10);
					// margin-top: vw(20);
					overflow: hidden;

					.title {
						height: vw(50);
						line-height: vw(50);
						background: #F2F9FF;
						@include word-vw(12, #333);
						text-align: center;
						margin-top: vw(20);
					}

					.item {
						@include flex-y();
						flex: 1;
					}

					.name {
						@include word-vw(14, #333);
					}

					.num {
						@include word-vw(24, #333);
						font-weight: bold;
						margin-top: vw(12);
					}

					.tip {
						text-align: center;
						box-sizing: border-box;
						@include word-vw(12, #999);
						margin-top: vw(15);
					}

					.balance {
						@include flex-y();
						padding-top: vw(18);
						@include word-vw(24, #000);
						font-weight: bold;
						margin-bottom: vw(6);

						.btn {
							margin-top: vw(12);
							@include solid-btn(100, 24, #fff, 12);
							@include word-vw(12, #fff);
						}
					}

				}

				.box {
					@include flex-y();
					width: 100%;
					margin-top: vw(20);

					.item-box {
						width: 100%;
						@include flex-x();
					}

					.item {
						width: 100%;
						height: vw(66);
						flex-shrink: 1;
						@include flex-x();
						box-sizing: border-box;
						@include word-vw(14, #A8A8A8);
						background: #fff;
						margin-top: vw(10);
						border-radius: vw(10);
						padding: 0 vw(18);

						.left{
							@include flex-x();
							flex-shrink: 0;
							image {
								width: vw(18);
								// height: vw(36);
								margin-right: vw(8);
							}
						}

						.right {
							@include flex-x(center, center);
							@include word-vw(12, #999);
							white-space: nowrap;
							flex-wrap: nowrap;
							flex-shrink: 0;

							.icon {
								// @include word-vw(14, #333);
								margin-left: vw(8);
								font-family: 'iconfont';
								font-size: vw(12);
							}
						}
					}
				}
			}
		}
	}
</style>