7131/pages/zero/task.vue

<template>
	<view class="">
		<view class="top-wrap">
			<view class="user-calling">
				<view class="calling">
					<!-- <image src="../../static/img/calling.png" mode="" class="calling-img"></image> -->
				</view>
			</view>
		</view>
		<view class="flex banne">
			<image src="../../static/img/jfc.png" mode="" @click="navto('/pages/zero/task')"></image>
			<image src="../../static/img/scjf.png" mode="" @click="navto('/pages/zero/task')"></image>
		</view>
		<view class="gg-wrap flex">
			<image src="../../static/icon/jiang.png" mode=""></image>
			<view class="gg-tit">
				<view class="tit">
					观看视频赚阅读积分
				</view>
				<view class="">
					观看可获得阅读积分
				</view>
			</view>
			<view class="gg-btn">
				去观看
			</view>
		</view>
		<view class="bottom-list" v-for="key in navList">
			<view class="flex list-item">
				<view class="logo-wrap" :style="{'background-color': key.bgc}">
					<image :src="key.img" mode="" class="logo"></image>
				</view>
				
				<view class="much">
					<view class="">
						{{key.name}}
					</view>
					<view class="val">
						余额:{{userInfo[key.val]*1 || '0'}}
					</view>
				</view>
				<view class="btn" v-if="key.agent" @click="goft">
					复投
				</view>
				<view class="more" @click="navto('/pages/user/sz?type=' + key.type)">
					查看明细
				</view>
				<image src="../../static/icon/back.png" mode="" class="black"></image>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		mapState,
		mapMutations
	} from 'vuex';
	export default {
		data() {
			return {
				navList: [{
						name: '阅读积分',
						val: 'resumption',
						type: 1,
						agent: true,
						img: '../../static/icon/task1.png',
						bgc: '#fef2f2'
					},
					{
						name: '通证',
						val: 'brokerage_price',
						type: 2,
						agent: false,
						img: '../../static/icon/task2.png',
						bgc: '#fcf7e3'
					},
					{
						name: '商场积分',
						val: 'max_pool',
						type: 3,
						agent: false,
						img: '../../static/icon/task3.png',
						bgc: '#f7ecfc'
					},
				]
			}
		},
		computed: {
			...mapState('user', ['userInfo', 'hasLogin'])
		},
		methods: {

		}
	}
</script>

<style lang="scss" scoped>
	page {
		background-color: #fff;
		min-height: 100%;

	}

	.top-wrap {
		// height: 260rpx;
		padding-top: 220rpx;
		background-color: #282623;

	}

	.user-calling {
		height: 115rpx;
		border-radius: 50rpx 50rpx 0 0;
		background-color: #fff;
		position: relative;
	}

	.calling {
		width: 720rpx;
		height: 190rpx;
		position: absolute;
		left: 0;
		right: 0;
		top: -110rpx;
		background-image: url('../../static/img/calling.png');
		background-size: contain;
		margin: auto;
		// .calling-img {
		// 	width: 100%;
		// 	height: 100%;
		// }
	}

	.banne {
		justify-content: center;
		padding: 20rpx 0;
		background-color: #fff;

		image {
			width: 340rpx;
			height: 204rpx;
			margin: 0 8rpx;
		}
	}

	.bottom-list {
		.list-item {
			width: 670rpx;
			height: 131rpx;
			// background-color: red;
			border-bottom: 1px solid #E8E8E8;

			margin: auto;
			.logo-wrap {
				width: 81rpx;
				height: 81rpx;
				border-radius: 50%;
				display: flex;
				justify-content: center;
				align-items: center;
				.logo {
					width: 40rpx;
					height: 40rpx;
				}
			}
			

			.much {
				padding-left: 14rpx;
				flex-grow: 1;
				font-size: 30rpx;
				font-weight: bold;
				color: #333333;

				.val {
					padding-top: 15rpx;
					font-size: 22rpx;
					font-weight: 500;
					color: #999999;
				}
			}

			.btn {
				width: 127rpx;
				height: 52rpx;
				border: 2px solid #ff5050;
				border-radius: 26rpx;
				display: flex;
				justify-content: center;
				align-items: center;
				font-size: 26rpx;
				font-weight: 500;
				color: #ff5050;
				margin-right: 24rpx;
			}

			.more {
				font-size: 24rpx;
				font-weight: 500;
				color: #999999;
				padding-right: 14rpx;
			}

			.black {
				width: 16rpx;
				height: 27rpx;
			}
		}
	}
	.gg-wrap {
		width: 702rpx;
		height: 140rpx;
		background: #FEFEFE;
		box-shadow: 0rpx 0rpx 29rpx 0rpx rgba(231,71,68,0.09);
		border-radius: 4rpx;
		margin: 20rpx auto;
		padding: 30rpx 40rpx 40rpx 90rpx;
		position: relative;
		image {
			position: absolute;
			top: 0;
			left: 26rpx;
			width: 45rpx;
			height: 60rpx;
			
		}
		.gg-tit {
			font-size: 24rpx;
			font-weight: 500;
			color: #999999;
			.tit {
				padding-bottom: 20rpx;
				font-size: 32rpx;
				font-weight: bold;
				color: #333333;
			}
		}
		.gg-btn {
			width: 125rpx;
			height: 46rpx;
			background: linear-gradient(60deg, #FF8F3B, #FF3106);
			border-radius: 23rpx;
			font-size: 24rpx;
			font-weight: 500;
			color: #FFFFFF;
			text-align: center;
			line-height: 45rpx;
		}
	}
</style>