question_uniapp/pages/power/index.vue

<template>
	<view class="page">
		<uni-nav-bar @clickLeft="goto(1, 1)" left-icon="back"  :border="false" :shadow="false" :fixed="true"
		:title="$t('power.title')" backgroundColor="#fff" :statusBar="true"></uni-nav-bar>
		<view class="wallet1">
			<view style="width: 400; font-size: 24rpx; color: #fff;">{{$t('power.text1')}}</view>
			<view style="width: 500; font-size: 48rpx; color: #fff; line-height: 110rpx;">{{power.score.toFixed(2) }}</view>
			<view style="float: left; width: 30%;">
				<view style="width: 400; font-size: 24rpx; color: #fff;">{{$t('power.text2')}}</view>
				<view style="width: 400; font-size: 32rpx; color: #fff; line-height: 70rpx;">{{power.total.toFixed(2)}}</view>
			</view>
			<view style="width: 30%; float: left; margin-left: 5%;">
				<view style="width: 400; font-size: 24rpx; color: #fff; text-align: center;">{{$t('power.text3')}}</view>
				<view style="width: 400; font-size: 32rpx; color: #fff; line-height: 70rpx; text-align: center;">{{power.notfinished.toFixed(2)}}</view>
			</view>
			<view style="width: 30%; float: left; margin-left: 5%;">
				<view style="width: 400; font-size: 24rpx; color: #fff; text-align: right;">{{$t('power.text4')}}</view>
				<view style="width: 400; font-size: 32rpx; color: #fff; line-height: 70rpx; text-align: right;">{{power.expired.toFixed(2)}}</view>
			</view>	
			<view style="clear: both;"></view>
		</view>
		<view style="width: 92%; margin: 20rpx auto;">
			<view class="cell_list" style="padding: 30rpx 0rpx; border-bottom: none;">
				<view style="color: #333; font-size: 36rpx; font-weight: 600;">{{$t('power.text5')}}</view>
				<view class="cell_right" @click="dialogVisible=true">{{$t('power.text6')}}
					<uni-icons size="20" type="help-filled" style="float: right; margin-left: 10rpx;"></uni-icons>
				</view>
			</view>

			<view class="cell_list" style="border-bottom: 2rpx solid #ddd;" v-for="item in list" :key="item.id">
				<view class="t">{{item.type}}<view class="d">{{item.created_at.slice(0, 19)}}</view></view>
				<view class=" u1" style="color: #1D61E7; text-align: right;">{{item.amount}}
				<view class="d" style="text-align: right; ">{{$t('power.text7')}}：{{item.after}}</view></view>
			</view>
			<view style="text-align: center; padding-bottom: 160rpx;" v-if="list.length <= 0">
				<image style="width: 360rpx; height: 360rpx; margin: 160rpx auto 0rpx auto;" src="/static/images/w5.png" mode="cover"></image>
				<view style="color: #999; font-size: 28rpx; font-weight: 400;">{{$t('nodata')}}</view>
			</view>
		</view>
		
		<Popup v-model="dialogVisible" type="2000" @change="handleClose">
			<view class="popup_box">
				<view class="popup_title">
					<view style="text-align: center; width: 100%; font-weight: bold;">{{$t('power.text6')}}</view>
				</view>
				<view class="popup_content" style="margin-top: -6rpx;">
					<view style="border-bottom: 2rpx solid #ddd; padding-bottom: 40rpx; line-height: 50rpx; text-align: left;">{{$t('power.text8')}}</view>
					<view style="margin-top: 20px;">
						<view style="width: 100%; text-align: center; color: #1D61E7; font-size: 32rpx;" @click="onPageJump('/pages/questionnaire/index')">{{$t('power.text9')}}</view>
					</view>
				</view>
			</view>
		</Popup>
		
	</view>
</template>

<script>
	import { getUserInfo } from '@/config/utils';
	import zPrompt from '@/components/common/prompt';
	import Popup from '@/components/common/popup';
	import {
		mapState,
		mapMutations
	} from 'vuex';
	export default {
		components: {
			Popup,
			zPrompt
		},
		data() {
			return {
				dialogVisible:false,
				power:{
					score: 0.0000,
					total: 0.0000,
					notfinished: 0.0000,
					expired: 0.0000
				},
				list: [],
				user: {}
			};
		},
		computed: {
			...mapState(['userInfo'])
		},
		//第一次加载
		onLoad(e) {
			if(this.userInfo.token === typeof(undefined) || this.userInfo.token === undefined){
				this.islogin = false;
				uni.hideLoading();
			}else{
				this.getlist();
				getUserInfo(this.$i18n.locale).then(res => {
					this.user =  res;
					this.power.score = parseFloat(this.user.score);
					this.power.notfinished = parseFloat(this.user.currency1 == null ? 0 : this.user.currency1);
					this.power.expired = parseFloat(this.user.currency2 == null ? 0 : this.user.currency2);
					this.power.total = parseFloat(this.user.power_total == null ? 0 :this.user.power_total);
				});
				
			}
			
		},
		//页面显示
		onShow() {},
		//方法
		methods: {
			getlist(){
				let data = {
					page: 1,
					limit: 10,
					currency: 'score'
				};
				this.$http.post('/api/balanceLog/list', data).then(res => {
					if(res.code == 0){
						this.list = res.data.data;
					}
				});
			},
			goto(url, type) {
			    if (type == 2) {
			        return uni.switchTab({ url: url })
			    }
			    if (type == 1) {
			        return uni.navigateBack({ delta: url });
			    }
			    uni.navigateTo({
			        url: url
			    })
			},
			onPageJump(url) {
				uni.switchTab({
					url: url
				});
			},
			handleClose(done) {
				this.dialogVisible = false;
			}
		},
		//页面隐藏
		onHide() {},
		//页面卸载
		onUnload() {},
		//页面下来刷新
		onPullDownRefresh() {},
		//页面上拉触底
		onReachBottom() {},
		//用户点击分享
		onShareAppMessage(e) {
			return this.wxShare();
		}
	};
</script>
<style lang="scss" scoped>
	@import '@/style/mixin.scss';
	body{background-color: #fff;}
	.popup_box {
		width: 600rpx;
		border-radius: 50upx;
	}
	.popup_title {
		display: flex;
		justify-content: space-between;
		height: 88upx;
		line-height: 88upx;
		padding: 0 20upx;
		background-color: #FFF;
		border-top-left-radius: 40upx;
		border-top-right-radius: 40upx;
	}
	.popup_title view {
		font-size: 32upx;
	}
	.popup_title text {
		width: 80upx;
		flex-shrink: 0;
		text-align: center;
	}
	.popup_title text {
		font-size: 28upx;
		color: #999;
	}
	.popup_title text:last-child {
		color: $themeColor;
	}
	.popup_content {
		padding: 30rpx 30rpx;
		background-color: #FFFFFF;
		text-align: center;
		border-bottom-left-radius: 40upx;
		border-bottom-right-radius: 40upx;
	}
	.wallet1{
		border-radius: 20rpx; padding: 40rpx 30rpx; width: 92%; margin: 20rpx auto;
		background: url('/static/images/c1.png') #2B66F6;background-size: 30%; background-repeat: no-repeat; background-position: 92% 10rpx;
	}
	.cell_list .t{
		color: #3d3d3d; font-size: 32rpx; font-weight: 400; line-height: 50rpx;
	}
	.cell_list .d{
		color: #3d3d3d; font-size: 28rpx; font-weight: 400; line-height: 50rpx;
	}
	.cell_list .u{
		color: #1D61E7; font-weight: 600;float: right; font-size: 32rpx;
	}
	.cell_list .u1{
		color: #333; font-weight: 600;float: right;font-size: 32rpx;
	}
	.w{
		background-color: #F8F8F8; border-radius: 10px; padding: 40rpx 20rpx;
	}
	.w .t{
		text-align: center; margin-top: 20rpx; font-size: 28rpx;
	}
</style>