|
|
@@ -2,45 +2,150 @@
|
|
|
<view class="page">
|
|
|
<view class="tabBanner flex">
|
|
|
<view class="tabItemBox flex">
|
|
|
- <view class="tahItem position-relative" v-for="(item,index) in taber">
|
|
|
+ <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>
|
|
|
</view>
|
|
|
|
|
|
- <view class="rightMoney flex">
|
|
|
+ <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="item flex">
|
|
|
- <view class="itemLeft">
|
|
|
- <view class="name">
|
|
|
-
|
|
|
- </view>
|
|
|
- <view class="tip">
|
|
|
-
|
|
|
+ <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="payMoney flex">
|
|
|
- <image class="payMoneyTIp" src="../../static/index/index/icon01.png" mode="widthFix"></image>
|
|
|
- <text>22</text>
|
|
|
+ <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="itemRight">
|
|
|
- <view class="tiptext">
|
|
|
-
|
|
|
+ <view class="itemListTypeBox" :class="{hide:item.hide}">
|
|
|
+ <view class="listItem flex">
|
|
|
+ <view class="titleName">
|
|
|
+ 设备名称
|
|
|
+ </view>
|
|
|
+ <view class="typeNum">
|
|
|
+ 体验飞船
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="listItem flex">
|
|
|
+ <view class="titleName">
|
|
|
+ 状态
|
|
|
+ </view>
|
|
|
+ <view class="typeNum">
|
|
|
+ <text class="strongText">挖矿中</text>
|
|
|
+ </view>
|
|
|
</view>
|
|
|
- <view class="moneyNum flex">
|
|
|
- <image class="moneyTIp" src="../../static/index/index/icon01.png" mode="widthFix"></image>
|
|
|
- <text>22</text>
|
|
|
+ <view class="listItem flex">
|
|
|
+ <view class="titleName">
|
|
|
+ 合约期限
|
|
|
+ </view>
|
|
|
+ <view class="typeNum">
|
|
|
+ 30天
|
|
|
+ </view>
|
|
|
</view>
|
|
|
- <view class="buttom">
|
|
|
- 派遣飞船
|
|
|
+ <view class="listItem flex">
|
|
|
+ <view class="titleName">
|
|
|
+ 单价
|
|
|
+ </view>
|
|
|
+ <view class="typeNum">
|
|
|
+ <text class="strongText margin-r-10">20</text>
|
|
|
+ 矿石
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="listItem flex">
|
|
|
+ <view class="titleName">
|
|
|
+ 已挖出
|
|
|
+ </view>
|
|
|
+ <view class="typeNum">
|
|
|
+ <text class="strongText margin-r-10">10</text>
|
|
|
+ 矿石
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="listItem flex">
|
|
|
+ <view class="titleName">
|
|
|
+ 购买时间
|
|
|
+ </view>
|
|
|
+ <view class="typeNum">
|
|
|
+ 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>
|
|
|
+
|
|
|
</view>
|
|
|
</template>
|
|
|
|
|
|
@@ -48,24 +153,33 @@
|
|
|
export default {
|
|
|
data() {
|
|
|
return {
|
|
|
- action:0,
|
|
|
+ action: 0,
|
|
|
taber: [{
|
|
|
title: '星级飞船',
|
|
|
+ state: 0,
|
|
|
page: 1,
|
|
|
limit: 10,
|
|
|
- loding: 'more',
|
|
|
- list: [],
|
|
|
+ loadingType: 'more',
|
|
|
+ list: [{
|
|
|
+ hide:false,
|
|
|
+ }],
|
|
|
+ loaded: false,
|
|
|
},
|
|
|
|
|
|
{
|
|
|
title: '我的飞船',
|
|
|
+ state: 1,
|
|
|
page: 1,
|
|
|
limit: 10,
|
|
|
- loding: 'more',
|
|
|
+ loadingType: 'more',
|
|
|
list: [],
|
|
|
+ loaded: false,
|
|
|
}
|
|
|
|
|
|
- ]
|
|
|
+ ],
|
|
|
+ show: false,
|
|
|
+ // 当前选中的对象
|
|
|
+ actionItem: {}
|
|
|
};
|
|
|
},
|
|
|
onLoad(options) {
|
|
|
@@ -73,37 +187,277 @@
|
|
|
},
|
|
|
onShow() {},
|
|
|
methods: {
|
|
|
+ // 打开弹窗
|
|
|
+ openAlert(item) {
|
|
|
+ this.show = true;
|
|
|
+ this.actionItem = item;
|
|
|
+ },
|
|
|
+ tabList(index) {
|
|
|
+ this.action = index;
|
|
|
+ this.loadData('tabChange')
|
|
|
+ },
|
|
|
+ loadData(source) {
|
|
|
+ //这里是将订单挂载到tab列表下
|
|
|
+ let index = this.action;
|
|
|
+ let navItem = this.taber[index];
|
|
|
+ let state = navItem.state;
|
|
|
+ if (source === 'tabChange' && navItem.loaded === true) {
|
|
|
+ //tab切换只有第一次需要加载数据
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ if (navItem.loadingType === 'loading') {
|
|
|
+ //防止重复加载
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ if (navItem.loadingType === 'noMore') {
|
|
|
+ //防止重复加载
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ // 修改当前对象状态为加载中
|
|
|
+ navItem.loadingType = 'loading';
|
|
|
|
|
|
+ // orderList({
|
|
|
+ // type: state,
|
|
|
+ // page: navItem.page,
|
|
|
+ // limit: navItem.limit
|
|
|
+ // })
|
|
|
+ // .then(({
|
|
|
+ // data
|
|
|
+ // }) => {
|
|
|
+ // let arr = data.map(e => {
|
|
|
+ // let b = this.orderStateExp(e.status);
|
|
|
+ // e.stateTip = b.stateTip;
|
|
|
+ // e.stateTipColor = b.stateTipColor;
|
|
|
+ // return e;
|
|
|
+ // });
|
|
|
+ // navItem.orderList = navItem.orderList.concat(arr);
|
|
|
+ // // console.log(navItem.orderList);
|
|
|
+ // navItem.page++;
|
|
|
+ // if (navItem.limit == data.length) {
|
|
|
+ // //判断是否还有数据， 有改为 more， 没有改为noMore
|
|
|
+ // navItem.loadingType = 'more';
|
|
|
+ // return;
|
|
|
+ // } else {
|
|
|
+ // //判断是否还有数据， 有改为 more， 没有改为noMore
|
|
|
+ // navItem.loadingType = 'noMore';
|
|
|
+ // }
|
|
|
+ // uni.hideLoading();
|
|
|
+ // this.$set(navItem, 'loaded', true);
|
|
|
+ // })
|
|
|
+ // .catch(e => {
|
|
|
+ // console.log(e);
|
|
|
+ // });
|
|
|
+ },
|
|
|
}
|
|
|
};
|
|
|
</script>
|
|
|
<style lang="scss" scoped>
|
|
|
.page {
|
|
|
- min-height: calc(100vh - var(--window-bottom));
|
|
|
+ min-height: calc(100vh);
|
|
|
+ margin-top: -44px;
|
|
|
+ padding-top: 44px;
|
|
|
line-height: 1;
|
|
|
- padding: 30rpx;
|
|
|
+ background-image: url("../../static/user/ship/pagebg.png");
|
|
|
+ background-repeat: no-repeat;
|
|
|
+ background-size: 100% auto;
|
|
|
+ background-color: rgb(255, 255, 255);
|
|
|
}
|
|
|
- .tabBanner{
|
|
|
+
|
|
|
+ .tabBanner {
|
|
|
position: sticky;
|
|
|
- .tabItemBox{
|
|
|
- .tahItem{
|
|
|
- .actionIcon{
|
|
|
- background: linear-gradient(268deg, rgba(244,177,228,0.99), #9D47C6, #5D289A);
|
|
|
+ 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;
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
- .rightMoney{
|
|
|
- .rightTipImg{
|
|
|
+
|
|
|
+ .rightMoney {
|
|
|
+ margin-top: -6rpx;
|
|
|
+ border-right: none;
|
|
|
+ padding: 6rpx 20rpx;
|
|
|
+ border-top-left-radius: 10rpx;
|
|
|
+ border-bottom-left-radius: 10rpx;
|
|
|
+
|
|
|
+ .rightTipImg {
|
|
|
width: 36rpx;
|
|
|
height: 29rpx;
|
|
|
}
|
|
|
}
|
|
|
-
|
|
|
-
|
|
|
}
|
|
|
-
|
|
|
-
|
|
|
+
|
|
|
+ .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;
|
|
|
+ }
|
|
|
+
|
|
|
+ .moneyNum {
|
|
|
+ padding: 30rpx 0;
|
|
|
+ font-weight: bold;
|
|
|
+ font-size: 33rpx;
|
|
|
+ color: #000000;
|
|
|
+
|
|
|
+ .moneyTip {
|
|
|
+ width: 43rpx;
|
|
|
+ height: 34rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .buttom {
|
|
|
+ padding: 16rpx 50rpx;
|
|
|
+ background: linear-gradient(268deg, rgba(113, 87, 185, 0.99), #8667C3, #7258B9);
|
|
|
+ border-radius: 10rpx;
|
|
|
+ font-weight: bold;
|
|
|
+ font-size: 26rpx;
|
|
|
+ color: #FFFFFF;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ }
|
|
|
+
|
|
|
+ .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>
|
