|
|
@@ -1,74 +1,24 @@
|
|
|
<template>
|
|
|
<view class="page">
|
|
|
- <view class="tabBanner flex">
|
|
|
- <view class="tabItemBox flex">
|
|
|
- <view class="tahItem position-relative" v-for="(item,index) in taber" :class='{action:action==index}'
|
|
|
- @click="tabList(index)">
|
|
|
- {{item.title}}
|
|
|
- <view class="actionIcon" v-if="action==index"></view>
|
|
|
+ <view class="listBox">
|
|
|
+ <view class="item"v-for="(item,index) in list">
|
|
|
+ <view class="titleBox flex-start">
|
|
|
+ <image class="tipImg margin-r-10" src="../../static/index/game/mhtip.png" mode="scaleToFill">
|
|
|
+ </image>
|
|
|
+ <text>盲盒一号</text>
|
|
|
</view>
|
|
|
- </view>
|
|
|
-
|
|
|
- <view class="rightMoney flex border-linear-gradient">
|
|
|
- <image class="rightTipImg" src="../../static/index/index/icon01.png" mode="scaleToFill"></image>
|
|
|
- <text>123123123123.222s</text>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- <view class="itemList">
|
|
|
- <view class="itemBox" v-for="(item,index) in taber[action].list" >
|
|
|
- <view class="item flex" @click="item.hide=false">
|
|
|
- <view class="itemLeft">
|
|
|
- <view class="name flex-start">
|
|
|
- <image class="nameTip margin-r-10" src="../../static/user/ship/star.png" mode="scaleToFill">
|
|
|
- </image>
|
|
|
- <text>
|
|
|
- 体验飞船
|
|
|
- </text>
|
|
|
- </view>
|
|
|
- <view class="tip">
|
|
|
- 30天预计可挖
|
|
|
- </view>
|
|
|
- <view class="payMoney flex-start">
|
|
|
- <image class="payMoneyTip" src="../../static/index/index/icon01.png" mode="widthFix">
|
|
|
- </image>
|
|
|
- <text>22</text>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- <view class="itemRight">
|
|
|
- <view class="tiptext">
|
|
|
- 消耗：
|
|
|
- </view>
|
|
|
- <view class="moneyNum flex-center">
|
|
|
- <image class="moneyTip margin-r-10" src="../../static/index/index/icon01.png"
|
|
|
- mode="widthFix">
|
|
|
- </image>
|
|
|
- <text>220</text>
|
|
|
- </view>
|
|
|
- <view class="buttom" @click.stop="openAlert(item)">
|
|
|
- 派遣飞船
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- <view class="itemListTypeBox" :class="{hide:item.hide}">
|
|
|
- <view class="listItem flex">
|
|
|
- <view class="titleName">
|
|
|
- 设备名称
|
|
|
- </view>
|
|
|
- <view class="typeNum">
|
|
|
- 体验飞船
|
|
|
- </view>
|
|
|
- </view>
|
|
|
+ <view class="itemListTypeBox">
|
|
|
<view class="listItem flex">
|
|
|
<view class="titleName">
|
|
|
状态
|
|
|
</view>
|
|
|
<view class="typeNum">
|
|
|
- <text class="strongText">挖矿中</text>
|
|
|
+ <text class="strongText">探索中</text>
|
|
|
</view>
|
|
|
</view>
|
|
|
<view class="listItem flex">
|
|
|
<view class="titleName">
|
|
|
- 合约期限
|
|
|
+ 已探索
|
|
|
</view>
|
|
|
<view class="typeNum">
|
|
|
30天
|
|
|
@@ -76,7 +26,7 @@
|
|
|
</view>
|
|
|
<view class="listItem flex">
|
|
|
<view class="titleName">
|
|
|
- 单价
|
|
|
+ 已产出
|
|
|
</view>
|
|
|
<view class="typeNum">
|
|
|
<text class="strongText margin-r-10">20</text>
|
|
|
@@ -85,7 +35,7 @@
|
|
|
</view>
|
|
|
<view class="listItem flex">
|
|
|
<view class="titleName">
|
|
|
- 已挖出
|
|
|
+ 待产出
|
|
|
</view>
|
|
|
<view class="typeNum">
|
|
|
<text class="strongText margin-r-10">10</text>
|
|
|
@@ -100,52 +50,10 @@
|
|
|
2024.05.13 08:00:30
|
|
|
</view>
|
|
|
</view>
|
|
|
- <view class="listItem flex">
|
|
|
- <view class="titleName">
|
|
|
- 到期期限
|
|
|
- </view>
|
|
|
- <view class="typeNum">
|
|
|
- 2024.05.13 08:00:30
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- <view class="flex-center upButtom" @click.stop="item.hide=true">
|
|
|
- <text class="margin-r-10">
|
|
|
- 收起详情
|
|
|
- </text>
|
|
|
- <image class="nextDom" src="../../static/index/game/opennext.png" mode="scaleToFill"></image>
|
|
|
- </view>
|
|
|
</view>
|
|
|
</view>
|
|
|
-
|
|
|
- <uni-load-more :status="taber[action].loadingType"></uni-load-more>
|
|
|
</view>
|
|
|
-
|
|
|
- <u-popup v-model="show" mode='bottom' closeable @close='show=false'>
|
|
|
- <view class="alert">
|
|
|
- <view class="alertTitle">
|
|
|
- 派遣体验飞船
|
|
|
- </view>
|
|
|
- <view class="flex alertContent">
|
|
|
- <view class="alertMoney">
|
|
|
- 需要消耗矿石
|
|
|
- </view>
|
|
|
- <view class="flex-start">
|
|
|
- <image class="alertTip margin-r-10" src="../../static/index/index/icon01.png"
|
|
|
- mode="scaleToFill"></image>
|
|
|
- <text>100</text>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- <view class="alertTipText">
|
|
|
- <text>我可用矿石</text>
|
|
|
- <text class="nuim">21</text>
|
|
|
- <text>个</text>
|
|
|
- </view>
|
|
|
- <view class="buttomAlert">
|
|
|
- 确认开启
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- </u-popup>
|
|
|
-
|
|
|
+ <uni-load-more :status="loadingType"></uni-load-more>
|
|
|
</view>
|
|
|
</template>
|
|
|
|
|
|
@@ -154,29 +62,41 @@
|
|
|
data() {
|
|
|
return {
|
|
|
action: 0,
|
|
|
- taber: [{
|
|
|
- title: '星级飞船',
|
|
|
- state: 0,
|
|
|
- page: 1,
|
|
|
- limit: 10,
|
|
|
- loadingType: 'more',
|
|
|
- list: [{
|
|
|
- hide:false,
|
|
|
- }],
|
|
|
- loaded: false,
|
|
|
- },
|
|
|
-
|
|
|
- {
|
|
|
- title: '我的飞船',
|
|
|
- state: 1,
|
|
|
- page: 1,
|
|
|
- limit: 10,
|
|
|
- loadingType: 'more',
|
|
|
- list: [],
|
|
|
- loaded: false,
|
|
|
- }
|
|
|
-
|
|
|
+ page: 1,
|
|
|
+ limit: 10,
|
|
|
+ loadingType: 'more',
|
|
|
+ list: [{
|
|
|
+ hide: false,
|
|
|
+ },
|
|
|
+ {
|
|
|
+ hide: false,
|
|
|
+ },
|
|
|
+ {
|
|
|
+ hide: false,
|
|
|
+ },
|
|
|
+ {
|
|
|
+ hide: false,
|
|
|
+ },
|
|
|
+ {
|
|
|
+ hide: false,
|
|
|
+ },
|
|
|
+ {
|
|
|
+ hide: false,
|
|
|
+ },
|
|
|
+ {
|
|
|
+ hide: false,
|
|
|
+ },
|
|
|
+ {
|
|
|
+ hide: false,
|
|
|
+ },
|
|
|
+ {
|
|
|
+ hide: false,
|
|
|
+ },
|
|
|
+ {
|
|
|
+ hide: false,
|
|
|
+ },
|
|
|
],
|
|
|
+
|
|
|
show: false,
|
|
|
// 当前选中的对象
|
|
|
actionItem: {}
|
|
|
@@ -198,8 +118,7 @@
|
|
|
},
|
|
|
loadData(source) {
|
|
|
//这里是将订单挂载到tab列表下
|
|
|
- let index = this.action;
|
|
|
- let navItem = this.taber[index];
|
|
|
+ let navItem =this;
|
|
|
let state = navItem.state;
|
|
|
if (source === 'tabChange' && navItem.loaded === true) {
|
|
|
//tab切换只有第一次需要加载数据
|
|
|
@@ -230,8 +149,8 @@
|
|
|
// e.stateTipColor = b.stateTipColor;
|
|
|
// return e;
|
|
|
// });
|
|
|
- // navItem.orderList = navItem.orderList.concat(arr);
|
|
|
- // // console.log(navItem.orderList);
|
|
|
+ // navItem.list = navItem.list.concat(arr);
|
|
|
+ // // console.log(navItem.list);
|
|
|
// navItem.page++;
|
|
|
// if (navItem.limit == data.length) {
|
|
|
// //判断是否还有数据， 有改为 more， 没有改为noMore
|
|
|
@@ -263,201 +182,43 @@
|
|
|
background-color: rgb(255, 255, 255);
|
|
|
}
|
|
|
|
|
|
- .tabBanner {
|
|
|
- position: sticky;
|
|
|
- padding: 30rpx 0 30rpx 30rpx;
|
|
|
- align-items: flex-start;
|
|
|
-
|
|
|
- .tabItemBox {
|
|
|
- align-items: flex-start;
|
|
|
-
|
|
|
- .tahItem {
|
|
|
- margin-right: 30rpx;
|
|
|
- font-weight: bold;
|
|
|
- font-size: 28rpx;
|
|
|
-
|
|
|
- &.action {
|
|
|
- font-size: 30rpx;
|
|
|
- }
|
|
|
-
|
|
|
- .actionIcon {
|
|
|
- background: linear-gradient(268deg, rgba(244, 177, 228, 0.99), #9D47C6, #5D289A);
|
|
|
- border-radius: 3px;
|
|
|
- width: 46rpx;
|
|
|
- height: 6rpx;
|
|
|
- margin: 0 auto;
|
|
|
- margin-top: 10rpx;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
+ .item {
|
|
|
+ margin: 0 30rpx 30rpx 30rpx;
|
|
|
+ border-radius: 20rpx;
|
|
|
+ background-color: #FFF;
|
|
|
+ border: 1px solid #C1C1C1;
|
|
|
+ padding: 20rpx 0;
|
|
|
+ color: #222222;
|
|
|
|
|
|
- .rightMoney {
|
|
|
- margin-top: -6rpx;
|
|
|
- border-right: none;
|
|
|
- padding: 6rpx 20rpx;
|
|
|
- border-top-left-radius: 10rpx;
|
|
|
- border-bottom-left-radius: 10rpx;
|
|
|
+ .titleBox {
|
|
|
+ font-weight: bold;
|
|
|
+ font-size: 33rpx;
|
|
|
+ padding: 0rpx 30rpx;
|
|
|
|
|
|
- .rightTipImg {
|
|
|
- width: 36rpx;
|
|
|
- height: 29rpx;
|
|
|
+ .tipImg {
|
|
|
+ width: 65rpx;
|
|
|
+ height: 60rpx;
|
|
|
}
|
|
|
}
|
|
|
- }
|
|
|
|
|
|
- .itemList {
|
|
|
- .itemBox {
|
|
|
- margin: 0 30rpx 30rpx 30rpx;
|
|
|
- border-radius: 20rpx;
|
|
|
- background-color: #FFF;
|
|
|
- border: 1px solid #C1C1C1;
|
|
|
- .itemListTypeBox{
|
|
|
- font-weight: 500;
|
|
|
- font-size: 28rpx;
|
|
|
- color: #222222;
|
|
|
- transition: height .3s ease-out;
|
|
|
- height: 400rpx;
|
|
|
- overflow: hidden;
|
|
|
- &.hide{
|
|
|
- height: 0rpx;
|
|
|
- }
|
|
|
- .upButtom{
|
|
|
- padding-top: 20rpx;
|
|
|
- font-weight: 500;
|
|
|
- font-size: 25rpx;
|
|
|
- color: #999999;
|
|
|
- // padding-bottom: 30rpx;
|
|
|
- .nextDom{
|
|
|
-
|
|
|
- width: 10rpx;
|
|
|
- height: 17rpx;
|
|
|
- transform: rotate(90deg);
|
|
|
- }
|
|
|
- }
|
|
|
- .listItem{
|
|
|
- padding: 0rpx 30rpx;
|
|
|
- margin-top: 20rpx;
|
|
|
- .typeNum{
|
|
|
- font-weight: bold;
|
|
|
- .strongText{
|
|
|
- color:#5E379E;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- }
|
|
|
- .item {
|
|
|
- padding: 10rpx;
|
|
|
- background-image: url("../../static/user/ship/listbg.png");
|
|
|
- background-size: 100% 100%;
|
|
|
- color: #FFFFFF;
|
|
|
- font-weight: bold;
|
|
|
-
|
|
|
- .itemLeft {
|
|
|
- padding: 20rpx;
|
|
|
-
|
|
|
- .name {
|
|
|
- font-size: 28rpx;
|
|
|
- }
|
|
|
-
|
|
|
- .nameTip {
|
|
|
- width: 30rpx;
|
|
|
- height: 30rpx;
|
|
|
- }
|
|
|
-
|
|
|
- .tip {
|
|
|
- font-size: 26rpx;
|
|
|
- opacity: 0.75;
|
|
|
- padding: 20rpx 0;
|
|
|
- }
|
|
|
-
|
|
|
- .payMoney {
|
|
|
- font-weight: 400;
|
|
|
- font-size: 44rpx;
|
|
|
-
|
|
|
- .payMoneyTip {
|
|
|
- width: 43rpx;
|
|
|
- height: 34rpx;
|
|
|
- margin-right: 10rpx;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- .itemRight {
|
|
|
- // background-color: #FFF;
|
|
|
- border-radius: 10rpx;
|
|
|
- padding: 20rpx;
|
|
|
-
|
|
|
- .tiptext {
|
|
|
- font-weight: 500;
|
|
|
- font-size: 24rpx;
|
|
|
- color: #999999;
|
|
|
- }
|
|
|
+ .itemListTypeBox {
|
|
|
+ font-weight: 500;
|
|
|
+ font-size: 28rpx;
|
|
|
+ padding-bottom: 10rpx;
|
|
|
|
|
|
- .moneyNum {
|
|
|
- padding: 30rpx 0;
|
|
|
- font-weight: bold;
|
|
|
- font-size: 33rpx;
|
|
|
- color: #000000;
|
|
|
+ .listItem {
|
|
|
+ padding: 0rpx 30rpx;
|
|
|
+ margin-top: 20rpx;
|
|
|
|
|
|
- .moneyTip {
|
|
|
- width: 43rpx;
|
|
|
- height: 34rpx;
|
|
|
- }
|
|
|
- }
|
|
|
+ .typeNum {
|
|
|
+ font-weight: bold;
|
|
|
|
|
|
- .buttom {
|
|
|
- padding: 16rpx 30rpx;
|
|
|
- background: linear-gradient(268deg, rgba(113, 87, 185, 0.99), #8667C3, #7258B9);
|
|
|
- border-radius: 10rpx;
|
|
|
- font-weight: bold;
|
|
|
- font-size: 26rpx;
|
|
|
- color: #FFFFFF;
|
|
|
+ .strongText {
|
|
|
+ color: #5E379E;
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
- }
|
|
|
-
|
|
|
- }
|
|
|
-
|
|
|
- .alert {
|
|
|
- padding: 30rpx;
|
|
|
- color: #222222;
|
|
|
- font-size: 30rpx;
|
|
|
- font-weight: bold;
|
|
|
-
|
|
|
- .alertTitle {}
|
|
|
-
|
|
|
- .alertContent {
|
|
|
- margin-top: 50rpx;
|
|
|
- padding: 30rpx;
|
|
|
- background: rgba(0, 0, 0, .07);
|
|
|
- border-radius: 10rpx;
|
|
|
-
|
|
|
- .alertTip {
|
|
|
- width: 43rpx;
|
|
|
- height: 34rpx;
|
|
|
- }
|
|
|
- }
|
|
|
|
|
|
- .alertTipText {
|
|
|
- margin-top: 50rpx;
|
|
|
- font-weight: 500;
|
|
|
- font-size: 29rpx;
|
|
|
-
|
|
|
- .nuim {
|
|
|
- color: #5E51ED;
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- .buttomAlert {
|
|
|
- margin-top: 30rpx;
|
|
|
- padding: 30rpx;
|
|
|
- text-align: center;
|
|
|
- background: linear-gradient(268deg, rgba(113, 87, 185, 0.99), #8667C3, #7258B9);
|
|
|
- border-radius: 10rpx;
|
|
|
- font-size: 33rpx;
|
|
|
- color: #FFFFFF;
|
|
|
}
|
|
|
}
|
|
|
</style>
|
