CBB3/pages/user/team/awardSq.vue

<template>
	<view>
		<view class="app-bg">
			<image src="/static/img/new_award_bg.png"></image>
		</view>
		<view class="app-h">
			<uni-nav-bar color="#fff" :border="false" statusBar backgroundColor="transparent" left-icon="left" @clickLeft="utils.navigateBack()" fixed title="申请新人奖"></uni-nav-bar>
		</view>
		
		<view class="app-body">
			<view class="pannel">
				<view class="top-inner fx-h fx-bc fx-ac">
					<view class="bg">
						<image src="/static/img/team-top-title.png"></image>
						<view class="text">新人奖</view>
					</view>
				</view>
				
				<view class="body fx-h fx-bc fx-ac">
					<image class="avatar" mode="aspectFill" :src=" data.avatar || '/static/img/user-avatar1.png' "></image>
					<view class="nickname">{{ data.nickname || "" }}</view>
					<view class="iid">ID:{{ data.uid }}</view>
					<view class="content">
						累计收益到达￥{{ data.new_award_money || 0 }}，即可申请新人奖<text>￥{{ data.award_gain_money || 0 }}元。</text>
					</view>
				</view>
			</view>
			<view class="fx-h fx-bc fx-ac"><view class="sbtn ihover" @tap="tapSubmit">提交申请</view></view>
			
		</view>
		
	</view>	
</template>

<script>
	import {mapState,mapMutations } from 'vuex';
	export default {
		computed: mapState(['user']),
		data() {
		    return {
				uid : 0,
				data : {}
		    }
		}, 
		onLoad(options) {
			this.uid = options.uid || 0;
			this.initView();
		},
			 
		methods: {
			...mapMutations(['checkUserLogin']),
			/**
			 * 加载基础配置
			 */
			initView:function(){
				uni.showLoading({ title: '获取数据中..' });
				var post = {
					uid : this.uid
				};
				this
					.request
					.post("sqAwardInit",post)
					.then(res => {
						uni.hideLoading();
						if(res.code == 200) {
							this.data = res.data;
						} else {
							this.utils.showModal(res.msg,()=>{
								uni.navigateBack();
							});
						}
					})
					.catch(res=>{
						console.log(res);
						uni.hideLoading();
						uni.showModal({title: '系统提示',content: '加载失败，返回在尝试',showCancel: false});
					});
			},
			/**
			 * 提交新人奖
			 */
			tapSubmit:function(){
				uni.showLoading({ title: '提交新人奖..' });
				var post = {
					uid : this.uid
				};
				this
					.request
					.post("sqAward",post)
					.then(res => {
						uni.hideLoading();
						if(res.code == 200) {
							uni.redirectTo({
								url:"awardSqOk?orderId=" + res.data.order_id
							})
						} else {
							this.utils.Tip(res.msg);
						}
					})
					.catch(res=>{
						console.log(res);
						uni.hideLoading();
						uni.showModal({title: '系统提示',content: '加载失败，返回在尝试',showCancel: false});
					});
			}
			
	},
}
</script>	


<style lang="scss">
	.app-bg{
		position: absolute;
		image{width: 100vw;height: 83vw;}
	}
	.app-h{
		height: 83vw;
	}
	
	.app-body{
		padding: 0px 30rpx;
		.pannel{
			position: relative;
			top: -120rpx;
			background: #fff;
			box-shadow: 0px 0px 20px 0px rgba(50,50,52,0.06);
			border-radius: 20rpx;
			.top-inner{
				.bg{
					position: relative;
					 image{width: 240rpx;height: 67rpx;}
					 .text{position: absolute;color: #fff;font-size: 24rpx;top: 0px;text-align: center;width: 240rpx;line-height: 67rpx;}
				}
			}
			
			.body{
				padding: 60rpx 20vw;
				.avatar{width: 85rpx;height: 85rpx;border-radius: 50%;}
				.nickname{font-size: 16px;color: #333;margin-top: 6px;font-weight: bold;}
				.iid{font-size: 16px;color: #787878;margin-top: 6px;font-weight: bold;}
				.content{
					font-weight: bold;
					font-size: 32rpx;
					color: #0C1732;
					text{
						color: #FF4C4C;
					}
				}
			}
		}
		
		.sbtn{
			background: linear-gradient(143.2747deg, #FF6A00, #EE0979);
			border-radius: 40rpx;
			width: 80vw;
			height: 80rpx;
			text-align: center;
			line-height: 80rpx;
			font-weight: bold;
			font-size: 32rpx;
			color: #FFFFFF;
			position: relative;
			top: -30px;
		}
	}
	
</style>