yixiang/pageC/jifen-qianbao.vue

<template>
	<view class="content">
		<u-navbar title="积分钱包" :autoBack="true" bgColor="rgba(0,0,0,0)" :fixed="true" :placeholder="true"
			@rightClick="torule">
			<view class="u-nav-slot" slot="right">
				<text>规则</text>
			</view>
		</u-navbar>
		<image src="static/jifen-bg.png" mode="aspectFill" class="jinfen-bg"></image>
		<view class="top hflex acenter">
			<view class="top-item hflex aend fwrap" @click="tojifenlist">
				<text class="num">{{user.integral}}</text>
				<view class="hflex acenter">
					<text class="label">积分余额</text>
					<u-icon name="arrow-right" color="#000000" size="12"></u-icon>
				</view>
			</view>
			<view class="top-item hflex aend fwrap">
				<text class="num">{{user.integral_sum}}</text>
				<text class="label">积分总额</text>
			</view>
		</view>
		<view class="box-bg">
			<view class="box">
				<view class="title">任务列表</view>
				<view class="cell hflex acenter jbetween" v-for="(item,index) in list" :key="index">
					<image src="static/jifen1.png" mode="aspectFill"></image>
					<view class="cell-center vflex">
						<view class="name">{{item.name}}</view>
						<view class="center-bottom hflex acenter">
							<image src="static/jifen.png" mode="aspectFill"></image>
							<text>积分+{{item.integral}}</text>
						</view>
					</view>
					<view class="btn" @click="totask(item)" v-if="item.status == 'pending'">去完成</view>
					<view class="btn" @click="totask(item)" v-else-if="item.status == 'finished'">领取奖励</view>
					<view class="btn" v-else-if="item.status == 'received'">已领取</view>

				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import $api from '@/static/js/api.js'
	export default {
		data() {
			return {
				user: {},
				list: [],
				page: 1,
				last_page: 1,
			}
		},
		onLoad() {
			this.getuser()
			this.getlist()
		},
		methods: {
			totask(item) {
				var _this = this
				if (item.status == 'pending') {
					if (item.source_type == 'share_post') {
						uni.navigateTo({
							url: '/pageA/jingxuan-list?type=article'
						})
					} else if (item.source_type == 'invite') {
						uni.navigateTo({
							url: '/pageC/invite'
						})
					} else if (item.source_type == 'create_post') {
						uni.navigateTo({
							url: '/pageA/add-luntan'
						})
					} else if (item.source_type == 'browse') {
						uni.switchTab({
							url: '/pages/luntan/index'
						})
					} else if (item.source_type == 'like') {
						uni.switchTab({
							url: '/pages/index/index'
						})
					} else if (item.source_type == 'vip') {
						uni.navigateTo({
							url: '/pageC/vip'
						})
					} else if (item.source_type == 'finish_info') {
						uni.navigateTo({
							url: '/pageC/userinfo'
						})
					}

				} else {
					$api.req({
						url: 'task/' + item.id + '/receive',
						method: 'post'
					}, function(res) {
						if (res.code == 10000) {
							uni.$u.toast(res.msg)
							setTimeout(() => {
								_this.list = []
								_this.getlist()
							})
						}
					})
				}
			},
			getlist() {
				var _this = this
				$api.req({
					url: 'task',
					data: {
						is_page: 0,
					}
				}, function(res) {
					if (res.code == 10000) {
						_this.list = res.data
					}
				})
			},
			torule() {
				uni.navigateTo({
					url: '/pageC/xieyi?type=rule'
				})
			},
			tojifenlist() {
				uni.navigateTo({
					url: '/pageC/jifen-list'
				})
			},
			getuser() {
				var _this = this
				$api.req({
					url: 'user/info',
					method: 'GET'
				}, function(res) {
					if (res.code == 10000) {
						_this.user = res.data
					}
				})
			}
		}
	}
</script>

<style lang="scss">
	.content::v-deep {
		min-height: 100vh;
		background: unset;

		.u-navbar__content__title {
			font-weight: bold;
		}

		.jinfen-bg {
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 500rpx;
			z-index: -1;
		}

		.box-bg {
			background: #f5f5f5;
			margin-top: 200rpx;
			height: calc(100vh - 500rpx);
			position: relative;

			.box {
				position: absolute;
				top: -142rpx;
				left: 28rpx;
				width: 694rpx;
				// height: 648rpx;
				background: #FFFFFF;
				border-radius: 16rpx;
				box-sizing: border-box;
				padding: 28rpx 24rpx;

				.title {
					font-size: 32rpx;
					font-family: PingFangSC, PingFang SC;
					font-weight: 500;
					color: #222222;
				}

				.cell {
					margin: 32rpx 0 0;

					image {
						width: 100rpx;
						height: 100rpx;
						margin-right: 24rpx;
					}

					.cell-center {
						flex: 1;

						.name {
							font-size: 32rpx;
							font-family: PingFangSC, PingFang SC;
							font-weight: 400;
							color: #333333;
						}

						.center-bottom {
							padding: 10rpx 0 0;

							image {
								width: 28rpx;
								height: 28rpx;
								margin: 0;
							}

							text {
								padding-left: 8rpx;
								font-size: 22rpx;
								font-family: SFPro, SFPro;
								font-weight: 400;
								color: #F0A61C;
							}
						}
					}

					.btn {
						margin: 0 0 0 24rpx;
						width: 140rpx;
						height: 56rpx;
						border-radius: 30rpx;
						border: 1rpx solid #00B0B0;
						font-size: 26rpx;
						font-family: PingFangSC, PingFang SC;
						font-weight: 400;
						color: #00B0B0;
						line-height: 56rpx;
						text-align: center;
					}

				}
			}
		}

		.top {
			padding: 84rpx 18rpx 50rpx;

			.top-item {
				padding-right: 62rpx;

				.num {
					font-size: 56rpx;
					font-family: JDZhengHT, JDZhengHT;
					font-weight: 400;
					color: #00B0B0;
					// line-height: 66rpx;
				}

				.label {
					font-size: 24rpx;
					font-family: PingFangSC, PingFang SC;
					font-weight: 400;
					color: #222222;
					// padding: 0 10rpx 10rpx 14rpx;
				}
			}
		}

		.u-nav-slot {
			text {
				font-size: 28rpx;
				font-family: PingFangSC, PingFang SC;
				font-weight: 400;
				color: #222222;
			}
		}
	}
</style>