NN2024010801/addons/xlapp/pages/user/task.vue

<template>
	<view class="app" :style="'min-height:'+(boxHeight)+'px;'">
		<u-navbar :title="$t('任务')" :height="'90rpx'" :titleStyle="{color: '#fff','fontSize':'36rpx'}"
			bgColor="transparent" :autoBack="false" :placeholder="true" :safeAreaInsetTop="true">
			<view slot="left" @click="goBack()">
				<u-icon class="icon" name="arrow-left" size="46" color="#fff"></u-icon>
			</view>
			<view slot="right" class="right">
				<view class="nav-right-btn" @click="gotoPage('/pages/task/index')">
					<text>{{$t('每日任务')}}</text>
				</view>
			</view>
		</u-navbar>
		<view class="main">
			<view class="upgrade-box">
				<text class="label">{{$t('当前等级')}}</text>
				<text class="level" v-if="userInfo.member_level>0">{{userInfo.member_level}}{{$t('级DAO者')}}</text>
				<text class="level" v-else>{{$t('普通用户')}}</text>
				<text class="btn" @click="tab=2">{{$t('去升级')}}</text>
			</view>

			<view class="count-box">
				<view class="counts">
					<view class="label">
						{{$t('截止昨日已空投积分')}}
					</view>
					<view class="count">
						{{numberFormat(counts.day_total)}}
					</view>
					<view class="label">
						{{$t('获得奖励积分')}}
					</view>
					<view class="count">
						{{numberFormat(counts.award_total)}}
					</view>
				</view>

				<view class="count-cricle">
					<echarts v-if="loadCount" class="table" :option="options" :height="'280rpx'">
					</echarts>
				</view>

			</view>

			<view class="task-box">
				<view class="label">
					{{$t('新手任务')}} ({{complete}}/{{taskList.length}})
				</view>
				<view class="task-list">
					<view class="empty" v-if="!taskList || taskList.length<=0">
						<image class="icon" src="../../static/icons/user/icon-empty.png" mode="aspectFill"></image>
					</view>
					<view class="task-list-box" v-else>
						<view class="task-item" v-for="(v,k) in taskList" :key="k">
							<view class="logo">
								<image class="icon" src="../../static/icons/user/icon-task.png" mode="aspectFill">
								</image>
							</view>
							<view class="info">
								<view class="name">
									{{$t(v.name)}} <text class="num">({{v.log_num}}/{{v.check_type==2?1:v.num}})</text>
								</view>
								<view class="power">
									{{v.power}}{{$t('算力')}}
								</view>
							</view>
							<view class="options" v-if="v.status==2">
								<view class="btn complete">
									{{$t('已完成')}}
								</view>
							</view>
							<view class="options" v-else>
								<view class="btn" @click="taskUrl(v)">
									{{$t('去完成')}}
								</view>
							</view>
						</view>

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

		</view>

		<!-- 升级 -->
		<u-popup class="popup-box popup-bottom-box" :show="tab==2" @close="(tab=1)" :zIndex="999"
			:safeAreaInsetTop="true" bgColor="#fff" round="20rpx" :closeOnClickOverlay="true" mode="bottom"
			:overlayStyle="{'z-index': 998}" :mask-custom-style="{backgroundColor:'transparent !important'}"
			@touchmove.stop.prevent
			:customStyle="{overflowY: 'scroll',border:'1rpx solid #fff',borderColor:'#333',height:'480rpx'}">
			<view class="popup-main">
				<view class="popup-title">
					<text class="title-text">{{$t('升级DAO等级')}}</text>
				</view>
				<view class="popup-main-box">
					<view class="account-box">
						<view class="account-item">
							<text class="label">{{$t('USDT余额')}}：</text>
							<text class="account">{{userInfo.usdt||'0.00'}} USDT</text>
							<text class="btn"
								@click="gotoPage('/pages/wallet/record?type=2&ct=1')">{{$t('升级记录')}}</text>
						</view>
						<view class="account-tips">
							<view class="tips">
								{{$t('下一级需累计收益')}}：{{userInfo.next_level_profit||'0.00'}}/{{userInfo.upgrade_profit_total||'0.00'}}
								USDT
							</view>
							<view class="tips">{{$t('下一级需要支付')}}：{{userInfo.next_level_usdt||'0.00'}} USDT</view>
						</view>
					</view>
					<view class="upgrade-box">
						<view class="icon-box">
							<image class="icon" src="../../static/icons/user/icon-upgrade.png" mode="aspectFit"></image>
						</view>
						<view class="level">{{$t(userInfo.next_level_name?userInfo.next_level_name:'普通用户')}}</view>
						<view class="price-box">
							<view class="price">
								<text class="text">{{userInfo.next_level_usdt||'0.00'}} </text>
							</view>
						</view>
					</view>
					<view class="buy-box">
						<view class="btn no" v-if="userInfo.next_level <= userInfo.member_level">
							{{$t('购买升级')}}
						</view>
						<view class="btn" v-else @click="showPayPopup()">
							{{$t('购买升级')}}
						</view>
					</view>
				</view>
			</view>
		</u-popup>

		<!-- 确认 -->
		<u-modal class="modal-box" :show="showPayModal" :title="$t('购买确认')" @confirm="buySubmit()"
			:cancelText="$t('取消')" style="z-index: 996;" confirmColor="#14ECCC" :showCancelButton="true"
			:confirmText="$t('确认购买')" :closeOnClickOverlay="true" @cancel="showPayModal=false"
			@close="showPayModal=false">
			<view class="modal-main">
				<view class="modal-main-box">
					<view class="pay-content">
						{{$t('确定支付')}}<text
							class="money">{{params.next_level_usdt||0}}</text>{{$t('USDT购买')}}{{$t(params.next_level_name)}}?
					</view>
					<u--form labelPosition="left" :model="params" ref="form" labelWidth="140rpx">
						<u-form-item :label="$t('交易密码')" prop="pay_password">
							<u--input v-model="params.pay_password" type="password" clearable maxlength="10"
								border="bottom" :placeholder="$t('请输入交易密码')" :focus="true">
							</u--input>
						</u-form-item>
					</u--form>
				</view>
			</view>
		</u-modal>

		<u-loading-icon class="loading" :show="loading" size="48" color="#14ECCC"
			custom-style="position:absolute;top:40%;left:0;right:0;margin:0 auto;z-index: 10099;">
		</u-loading-icon>
	</view>
</template>

<script>
	import echarts from '../../components/echarts.vue'
	export default {
		components: {
			echarts
		},
		data() {
			return {
				loading: false,
				loadCount: false,
				showPayModal: false,
				userInfo: {},
				taskList: [],
				tab: 1,
				tabType: 0,
				complete: 0,
				boxHeight: 800,
				counts: {
					day_total: '0.00',
					award_total: '0.00',
					total: '0.00',
					xd_total: '0.00',
					remain_total: '0.00',
				},
				params: {
					level: 0,
					next_level_name: '',
					next_level_usdt: '0.00',
					pay_password: '',
				},
				options: {
					tooltip: {
						trigger: 'item'
					},
					color: ['#14ECCC', '#f2f2f2'],
					series: [{
						type: 'pie',
						radius: ['84%', '100%'],
						avoidLabelOverlap: false,
						label: {
							show: true,
							position: 'center',
							fontSize: '16',
							fontWeight: 'bold'
						},
						emphasis: {
							label: {
								show: true,
								fontSize: '42',
								fontWeight: 'bold'
							}
						},
						labelLine: {
							show: true
						},
						data: [{
								value: 0,
								name: '0.00'
							},
							{
								value: 0,
								name: '0.00'
							}
						]
					}]
				},
			}
		},
		onLoad(e) {
			this.tab = typeof(e.tab) != 'undefined' && e.tab > 0 ? e.tab : 1;
			if (this.tab == 2) {
				this.tabType = 1;
			}
			this.getInfo()
			this.getCounts()
			this.getTaskList()

			const windowInfo = uni.getWindowInfo();
			this.boxHeight = windowInfo.windowHeight
		},
		onPullDownRefresh() {
			this.getInfo()
			this.getTaskList()
			this.getCounts()
			uni.stopPullDownRefresh()
		},
		methods: {
			goBack() {
				uni.navigateBack()
			},
			numberFormat(num) {
				return (num >= 100000000) ? (this.$t('1亿')) : (num >= 10000 ?
					parseFloat(num / 10000).toFixed(2) + this.$t('万') : parseFloat(num).toFixed(2));
			},
			// 去完成任务
			taskUrl(row) {
				switch (row.scene) {
					case 1: // 观看直播
					case 7: // 打赏直播
						uni.navigateTo({
							url: '/pages/index/index?tab=3'
						})
						break;
					case 2: // 观看视频
					case 3: // 关注用户
					case 6: // 点赞视频
					case 8: // 评论视频
					case 11: // 收藏视频
						uni.navigateTo({
							url: '/pages/index/index'
						})
						break;
					case 4: // 用户升级
						uni.navigateTo({
							url: '/pages/user/upgrade'
						})
						break;
					case 5: // 上传视频
						uni.navigateTo({
							url: '/pages/video/index'
						})
						break;
					case 9: // 星豆充值
						uni.navigateTo({
							url: '/pages/wallet/recharge/xd'
						})
						break;
					case 10: // USDT充值
						uni.navigateTo({
							url: '/pages/wallet/recharge/usdt'
						})
						break;
				}
			},
			// 用户信息
			async getInfo() {
				let _this = this
				this.loading = true;
				const res = await this.$request.api('/user/info', {
					'type': 'upgrade'
				})
				this.loading = false;
				if (res.success == true) {
					this.userInfo = res.data
				} else if (res.code == '403') {
					uni.showToast({
						title: this.$t('请先登录'),
						icon: 'none'
					})
					setTimeout(function() {
						uni.navigateTo({
							url: '/pages/login/login'
						})
					}, 800)
				} else {
					let msg = typeof(res.msg) != 'undefined' ? res.msg : this.$t('请求失败')
					uni.showToast({
						title: this.$t(msg),
						icon: 'none'
					})
				}

			},
			// 统计数据
			async getCounts() {
				let _this = this
				this.loading = true;
				const res = await this.$request.api('/account/scoreCount', {
					coin_type: 4,
				})
				this.loading = false;
				if (res.success == true) {
					this.counts = typeof(res.data) != 'undefined' && res.data ? res.data : {
						day_total: '0.00',
						award_total: '0.00',
						total: '0.00',
						xl_total: '0.00',
						remain_total: '0.00',
					};

					console.log(this.counts)
					this.options.series[0].data[0].value = this.counts.total
					this.options.series[0].data[0].name = this.numberFormat(this.counts.xl_total)

					this.options.series[0].data[1].value = this.counts.xl_total
					this.options.series[0].data[1].name = this.numberFormat(this.counts.total)
				}

				this.loadCount = true
			},
			// 任务列表
			async getTaskList() {
				let _this = this
				this.loading = true;
				const res = await this.$request.api('/task/index', {
					type: 2
				})
				this.loading = false;
				if (res.success == true) {
					this.taskList = typeof(res.data.list) != 'undefined' && res.data.list ? res.data.list : []
					this.complete = typeof(res.data.complete) != 'undefined' && res.data.complete ? res.data.complete :
						0
				}

			},
			// 确认
			showPayPopup() {
				let _this = this
				this.params = {
						level: this.userInfo.next_level,
						next_level_name: this.userInfo.next_level_name,
						next_level_usdt: this.userInfo.next_level_usdt,
						pay_password: '',
					},
					this.showPayModal = true;
			},
			// 购买节点
			async buySubmit() {
				let _this = this
				if (_this.params.pay_password == '') {
					uni.showToast({
						style: 'z-index:10078',
						title: this.$t('请输入交易密码'),
						icon: 'none'
					})
					return false;
				}

				this.loading = true;
				const res = await this.$request.api('/user/upgrade', _this.params)
				this.loading = false;
				if (res.success == true) {
					uni.showToast({
						style: 'z-index:10078',
						title: this.$t(res.msg),
						icon: 'none'
					})
					this.showPayModal = false;
					this.getInfo()
				} else if (res.code == 401) {
					let msg = typeof(res.msg) != 'undefined' ? res.msg : this.$tt('请求失败')
					uni.showToast({
						title: this.$t(msg),
						style: 'z-index:10078',
						icon: 'none'
					})
					setTimeout(function() {
						console.log('跳转设置密码')
						uni.navigateTo({
							url: '/pages/user/profile/pay_password?type=upgrade'
						})
					}, 1200)
				} else if (res.code == 405) {
					let msg = typeof(res.msg) != 'undefined' ? res.msg : this.$tt('请求失败')
					uni.showToast({
						title: this.$t(msg),
						style: 'z-index:10078',
						icon: 'none'
					})
					setTimeout(function() {
						console.log('跳转充值')
						uni.navigateTo({
							url: '/pages/wallet/recharge/usdt?type=upgrade'
						})
					}, 1200)
				} else {
					let msg = typeof(res.msg) != 'undefined' ? res.msg : this.$t('请求失败')
					uni.showToast({
						title: this.$t(msg),
						style: 'z-index:10078',
						icon: 'none'
					})
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	page {
		height: 100%;
		width: 100%;
		min-height: 800rpx;

	}

	.app {
		// height: 100%;
		// padding-bottom: 120rpx;
		background: linear-gradient(to bottom, #333, #f2f2f2);
		// position: fixed;
		width: 100%;
		z-index: 1;
	}

	.nav-right-btn {
		color: #000;
		font-size: 24rpx;
		background-color: #14ECCC;
		padding: 10rpx 20rpx;
		border-radius: 10rpx;
	}

	.main {
		width: 100%;
		height: 100%;
		overflow-y: scroll;
		// overflow: hidden;

		.upgrade-box {
			margin: 30rpx 30rpx;
			padding: 40rpx 30rpx;
			background-color: #14ECCC;
			color: #333;
			border-radius: 10rpx;
			font-size: 28rpx;

			.level {
				font-size: 32rpx;
				font-weight: bold;
				color: #000;
				margin-left: 20rpx;
				vertical-align: middle;
			}

			.btn {
				background-color: #000;
				color: #fff;
				padding: 10rpx 30rpx;
				text-align: center;
				font-size: 32rpx;
				border-radius: 12rpx;
				float: right;
				vertical-align: middle;
				margin-top: -10rpx;
			}
		}

		.count-box {
			display: flex;
			flex-direction: row;
			justify-content: left;
			align-items: center;
			position: relative;
			// overflow: hidden;
			background-color: #fff;
			margin: 30rpx 30rpx 0;
			padding: 40rpx 30rpx;
			border-radius: 10rpx;

			.counts {
				width: calc(100% - 240rpx);

				.label {
					color: #666;
					padding: 10rpx 0;
				}

				.count {
					color: #333;
					font-weight: bold;
					margin-bottom: 20rpx;
				}
			}

			.count-cricle {
				width: 240rpx;
				position: relative;

				.table {
					width: 240rpx;
				}
			}
		}

		.task-box {
			margin: 30rpx 30rpx;
			padding: 40rpx 30rpx;
			background-color: #fff;
			color: #333;
			border-radius: 10rpx;
			font-size: 28rpx;

			.label {
				font-weight: bold;
			}

			.task-list {
				padding: 20rpx 0rpx;

				.task-list-box {
					// height: 640rpx;
					// overflow-y: scroll;

					.task-item {
						padding: 10rpx 0rpx;
						margin-bottom: 20rpx;
						display: flex;
						flex-direction: row;
						align-items: center;
						font-size: 28rpx;

						.logo {
							width: 64rpx;
							height: 64rpx;
							text-align: center;
							margin-right: 20rpx;

							.icon {
								width: 100%;
								height: 100%;
							}
						}

						.info {
							flex: 1;

							.name {
								.num {
									margin-left: 10rpx;
								}
							}

							.power {
								padding: 10rpx 0;
								color: #999;
							}
						}

						.options {
							.btn {
								color: #000;
								background-color: #14ECCC;
								padding: 10rpx 20rpx;
								border-radius: 10rpx;
							}

							.btn.complete {
								color: #fff;
								background-color: #ccc;
							}
						}
					}

				}
			}
		}
	}

	.popup-box {
		.popup-title {
			width: 100%;
			padding: 30rpx 0;
			text-align: center;
			font-size: 32rpx;
			font-weight: bold;
			border-bottom: 1rpx solid #f2f2f2;
		}

		.popup-main-box {
			padding: 20rpx 30rpx;

			.account-box {
				margin-bottom: 40rpx;
				background-color: #f2f2f2;
				padding: 30rpx 30rpx;
				border-radius: 10rpx;
				font-size: 30rpx;
				font-weight: bold;

				.account-item {

					.btn {
						float: right;
						background-color: #f2f2f2;
						padding: 4rpx 8rpx;
						border-radius: 4rpx;
						color: #579DC1;
						font-size: 24rpx;
					}
				}

				.account-tips {
					margin-top: 30rpx;

					.tips {
						color: #999;
						font-size: 24rpx;
						padding-bottom: 10rpx;
					}
				}
			}


			.upgrade-box {
				margin-bottom: 20rpx;
				background-color: #14ECCC;
				padding: 30rpx 30rpx;
				display: flex;
				flex-direction: row;
				align-items: center;
				justify-content: left;
				border-radius: 10rpx;

				.icon-box {
					.icon {
						width: 72rpx;
						height: 72rpx;
					}
				}

				.level {
					margin-left: 20rpx;
					flex: 1;
					font-weight: bold;
				}

				.price-box {
					.price {
						background-color: #000;
						color: #fff;
						padding: 10rpx 30rpx;
						border-radius: 10rpx;
						font-size: 28rpx;
						font-weight: bold;
					}
				}
			}

			.buy-box {
				margin: 50rpx 0 40rpx;

				.btn {
					padding: 20rpx 0;
					// margin: 0 30rpx;
					border-radius: 10rpx;
					background-color: #14ECCC;
					text-align: center;
					font-size: 32rpx;
					font-weight: bold;
				}

				.btn.no {
					color: #666;
					background-color: #e2e2e2;
				}
			}

		}
	}

	.modal-box {
		width: auto;

		/deep/ .u-modal__title {
			padding: 30rpx 0;
		}

		/deep/ .u-popup__content {
			width: auto;
			height: auto;

			.modal-main {
				width: 100%;

				.money {
					color: #579DC1;
					margin: 0 4rpx;
					font-weight: bold;
				}
			}
		}

	}
</style>