MeetMateApp/pages/w3/box.vue

<template>
	<view class="page">
		<uni-nav-bar rightWidth='136rpx' title="燃料中心" fixed  :border="false" statusBar backgroundColor="#24234B" color="#FFFFFF">
			<template #left>
				<view class="cl-topbar__icon" @click="navigateBack">
					<text class="cl-icon-arrow-left"></text>
				</view>
			</template>
			<template #right>
				<view style="
				width: 136rpx;
				height: 52rpx;
				background: linear-gradient( 130deg, #322D52 20%, #6E47A2 100%);
				border-radius: 12rpx;
				text-align: center;
				line-height:52rpx; 
				color: #FFFFFF;
				font-weight: bold;
				font-size: 24rpx;
				" @click="navToTranRecord">
					记录
				</view>
			</template>
		</uni-nav-bar>
	
		<view class="tabMain">
			<view class="menu" :class="tab==1?'active':''" @click="selTab(1)">
				日常探索
			</view>
			<view class="menu" :class="tab==2?'active2':''" @click="selTab(2)">
				探索奖励
			</view>
		</view>

		<view class="tabMain2" v-if="tab == 1">
			<view class="menu" :class="tab2==1?'active':''" @click="selTab2(1)">
				开拓者燃料
			</view>
			<view class="menu" :class="tab2==2?'active':''" @click="selTab2(2)">
				进行中
			</view>
			<view class="menu" :class="tab2==3?'active':''" @click="selTab2(3)">
				已完成
			</view>
		</view>

		<view class="thread"></view>


		<view class="list_item state12" v-if="false">
			<view class="item1">
				<text class="left">星际通行证</text>
				<text class="right">已拓中1/1</text>
			</view>
			<view class="item2">
				<view class="left">
					<image class="icon" mode="widthFix" src="http://c.yujianmate.com/images/v1/w3/icon_item.png">
					</image>
					<text class="name">待解锁：1/5天</text>
					<text class="time">开拓日期：2024.9.1</text>
				</view>
				<view class="right">
					<view class="content">探索需要50个暗物质，可探索获得80个暗物质，周期30 天，最多可完成1次探索。</view>
					<view class="act">
						<text class="state_name">待领取：12</text>
						<image class="icon" mode="heightFix" src="https://c.yujianmate.com/images/v1/w3/x_get.png">
						</image>
					</view>
				</view>
			</view>
		</view>
		<view v-if="nodata" class="empty">
			<view class="bg"></view>
			<text style="margin-top: 0rpx;font-size: 24rpx;color: #999999;">暂无数据</text>
		</view>
		<view class="list_item" v-for="(item,index) in list" :class="tab2 > 1?'state12':''">
			<view class="item2">
				<view class="left">
					<image class="icon" mode="widthFix"
						:src="'http://c.yujianmate.com/images/v1/w3/box/box_'+item.id+'.png'"></image>
					<view class="price">
						{{item.num_dui}}暗物质
					</view>
					<block v-if="item.num_have > 0">
						<text class="name">待解锁：{{item.num_sign}}/{{item.num_task}}天</text>
						<text class="time">开拓日期：{{item.tdate}}</text>
					</block>
				</view>
				<view class="right">
					<view class="item1">
						<text class="left2">{{item.name}}</text>
						<text class="right2">开拓中{{item.num_have}}/{{item.num}}</text>
					</view>
					<view class="content">
						探索需要{{item.num_dui}}个暗物质，可探索获得{{item.num_jkb}}个暗物质，周期{{item.num_limit_day}}
						天，最多可完成{{item.num}}次探索。
					</view>
					<view class="act">
						<block v-if="tab2 == 1 && item.num_have < item.num && tab == 1">
							<view class="btn" @click="onDuihuan(item)">
								探索
							</view>
						</block>
						<block v-if="tab2 == 2">
							<text class="sign_name"></text>
						</block>
						<block v-if="tab2 == 2 && tab == 1">
							<text class="state_name">待领取：{{item.can_get_gmb}}</text>
							<!-- <image class="icon" mode="heightFix" src="http://c.yujianmate.com/images/v1/w3/x_get.png"></image> -->
						</block>
						<block v-if="tab == 2">
							<view class="btn" @click="onJihuo(item)">
								探索
							</view>
						</block>
					</view>
				</view>
			</view>
		</view>
		<view class="thread2"></view>
		<DialogBoxW3 ref="DialogBoxW3"></DialogBoxW3>
		<ToastW3 ref="ToastW3"></ToastW3>
	</view>
</template>

<script>
	import uniNavBar from '../../components/uni-ui/uni-nav-bar/uni-nav-bar.vue'
	export default {
		components: {
			uniNavBar
		},
		data() {
			return {
				title: '',
				tab: 1,
				tab2: 1,
				list: [],
				nodata: true,

			}
		},

		onLoad() {
			let self = this;
			// try {
			// 	var uniIcon = document.getElementsByClassName('uni-page-head-btn')[0]
			// 	uniIcon.style.display = 'block';
			// } catch (e) {
			// 	//TODO handle the exception
			// }
			this.loadBoxList(1, this.tab);
		},
		onShow() {
			// uni.hideTabBar({
			// 	animation:false
			// })
			// this.loadData(1);
			// this.showBottomPlayer();
		},
		methods: {
			navigateBack(){
				uni.navigateBack(1)
			},
			navToTranRecord() {
				uni.navigateTo({
					url: "/pages/w3/tranRecord?stype=ad",
				})
			},
			selTab(tb) {
				this.tab = tb;
				this.loadBoxList(this.tab2, this.tab);
			},
			selTab2(tb) {
				this.tab2 = tb;
				this.loadBoxList(this.tab2, this.tab);
			},
			onDuihuan(item) {
				let that = this;
				this.$refs['DialogBoxW3'].confirm({
					title: '探索',
					content: '是否消耗' + item.num_dui + '个暗物质开启通行证',
					DialogType: 'inquiry',
					btn1: '',
					btn2: '',
					animation: 0
				}).then((res) => {
					uni.request({
						url: this.$apiHost + "/Box/duihuan",
						data: {
							uuid: getApp().globalData.uuid,
							id: item.id
						},
						header: {
							"content-type": "application/json",
							'sign': getApp().globalData.headerSign
						},
						success: (res) => {
							console.log("----", res.data.list);
							// uni.showToast({
							// 	title: res.data.str,
							// 	icon: 'none'
							// })
							that.$refs['ToastW3'].showToast({
								title: res.data.str,
								animation: 0
							});
							if (res.data.success == "yes") {
								that.loadBoxList(1, this.tab);
							}
						},
						complete: (com) => {
							uni.hideLoading();
						},
					});

					// getApp().globalData.skey = "";
					// uni.removeStorageSync("wapptoken")
					// uni.redirectTo({
					// 	url: '/pages/index/login',
					// })
					// uni.navigateBack();
					// uni.sendNativeEvent("logout","tt", function(e){
					// 	//关闭当前小程序
					// 	console.log("sendNativeEvent-----------回调"+JSON.stringify(e));
					// });
				})
			},
			onJihuo(item) {
				let that = this;
				uni.request({
					url: this.$apiHost + "/Box/jihuo",
					data: {
						uuid: getApp().globalData.uuid,
						id: item.item_id
					},
					header: {
						"content-type": "application/json",
						'sign': getApp().globalData.headerSign
					},
					success: (res) => {
						console.log("----", res.data.list);
						that.$refs['ToastW3'].showToast({
							title: res.data.str,
							animation: 0
						});
						if (res.data.success == "yes") {
							that.loadBoxList(2, this.tab);
						}
					},
					complete: (com) => {
						uni.hideLoading();
					},
				});
			},
			loadBoxList(tab, type) {
				let that = this;
				uni.request({
					url: this.$apiHost + "/Box/getlist", //仅为示例，并非真实接口地址。
					data: {
						uuid: getApp().globalData.uuid,
						tab: tab,
						type: type,
					},
					header: {
						"content-type": "application/json",
						'sign': getApp().globalData.headerSign
					},
					success: (res) => {
						console.log("----", res.data.list);
						if (res.data.success == "yes") {
							that.list = res.data.list || [];
							that.nodata = !(that.list.length > 0)
						}
					},
					complete: (com) => {
						uni.hideLoading();
					},
				});
			},

		}
	}
</script>

<style scoped lang="scss">
	@import 'box.scss';
</style>