7131/pages/zero/task.vue

<template>
	<view class="">
		<view class="top-wrap">
			<view class="user-calling">
				<view class="calling">
					<image class="avatar" :src="userInfo.avatar" mode="" v-if="userInfo.avatar"></image>
					<image class="avatar" src="../../static/error/missing-face.png" mode="" v-else></image>
					<view class="u-name">
						{{userInfo.phone}}
					</view>
					<image class="user-shop-icon" v-if="pUser.zero_level" :src="pUser.zero_level.icon" mode=""></image>
				</view>
			</view>
		</view>
		<view class="flex banne">
			<image src="../../static/img/jfc.png" mode="" @click="navto('/pages/zero/award?type=9')"></image>
			<image src="../../static/img/scjf.png" mode="" @click="navto('/pages/zero/award?type=10')"></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" @click="navto('/pages/zero/ren')">
				去观看
			</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">
						余额:{{pUser[key.val]*1 || '0'}}
					</view>
				</view>
				<!-- <view class="btn" v-if="key.hz" @click="navto('/pages/zero/jfhz?type=3')">
					兑换余额宝
				</view> -->
				<view class="btn" v-if="key.gs" @click="navto('/pages/zero/gs')">
					挂售
				</view>
				<view class="btn" v-if="key.dy" @click="navto('/pages/zero/jfhz?type=0')">
					兑换阅读积分
				</view>
				<view class="btn" v-if="key.agent" @click="navto('/pages/zero/jfhz?type=1')">
					兑换复投积分
				</view>
				<view class="btn" v-if="key.ygs" @click="navto('/pages/zero/gs?type=1')">
					挂售
				</view>
				<view class="btn" v-if="key.ye" @click="navto('/pages/zero/jfhz?type=2')">
					兑换阅读积分
				</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';
	import {
		passUser
	} from '@/api/zero.js'
	import {
		getUserInfo,
		getLevelList
	} from '@/api/user.js';
	export default {
		data() {
			return {
				pUser: {},
				listList: [],
				navList: [{
						name: '阅读积分',
						val: 'points',
						type: 8,
						hz: true,
						gs: true,
						dy: false,
						agent: false,
						img: '../../static/icon/task1.png',
						bgc: '#fef2f2'
					},
					{
						name: '通证',
						val: 'pass',
						type: 9,
						gs: false,
						hz: false,
						dy: true,
						agent: false,
						img: '../../static/icon/task2.png',
						bgc: '#fcf7e3'
					},
					{
						name: '商场积分',
						val: 'integral',
						type: 10,
						hz: false,
						dy: false,
						agent: true,
						img: '../../static/icon/task3.png',
						bgc: '#f7ecfc'
					},
					// {
					// 	name: '余额宝',
					// 	val: 'freeze_points',
					// 	type: 11,
					// 	hz: false,
					// 	dy: false,
					// 	agent: false,
					// 	ye: true,
					// 	ygs: true,
					// 	img: '../../static/icon/task3.png',
					// 	bgc: '#f7ecfc'
					// },
				]
			}
		},
		computed: {
			...mapState('user', ['userInfo', 'hasLogin'])
		},
		onShow() {
			this.getLevelList()
			this.passUser()
		},
		methods: {
			passUser() {
				passUser().then(res => {
					// console.log(res);
					this.pUser = res.data
				})
			},
			getLevelList() {
				getLevelList().then(res => {
					this.listList = res.data.list
				})
			},
			showLevel(val) {
				let data = this.listList.find(item => item.grade == val)
				console.log(data);
				if (data) {
					return data.icon
				} else {
					return ''
				}
			},
			navto(url) {
				uni.navigateTo({
					url,
					fail() {
						uni.switchTab({
							url
						})
					}
				})
			},
		}
	}
</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;

		.avatar {
			width: 106rpx;
			height: 106rpx;
			border-radius: 50%;
			position: absolute;
			top: 40rpx;
			left: 48rpx;
		}

		.u-name {
			position: absolute;
			top: 57rpx;
			left: 193rpx;
			font-size: 36rpx;
			font-weight: bold;
			color: #773B00;
		}

		.user-shop-icon {
			position: absolute;
			top: 110rpx;
			left: 193rpx;
			width: 120rpx;
			height: 40rpx;
		}
	}

	.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;
				padding: 0 10px;
				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: 10rpx;
			}

			.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>