ship.vue 7.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349
  1. <template>
  2. <view class="page">
  3. <view class="tabBanner flex">
  4. <view class="tabItemBox flex">
  5. <view class="tahItem position-relative" v-for="(item,index) in taber" :class='{action:action==index}'
  6. @click="tabList(index)">
  7. {{item.title}}
  8. <view class="actionIcon" v-if="action==index"></view>
  9. </view>
  10. </view>
  11. <view class="rightMoney flex border-linear-gradient">
  12. <image class="rightTipImg" src="../../static/index/index/icon01.png" mode="scaleToFill"></image>
  13. <text>123123123123.222s</text>
  14. </view>
  15. </view>
  16. <view class="itemList" v-if="action==0">
  17. <view class="item flex" v-for="(item,index) in taber[0].list">
  18. <view class="itemLeft">
  19. <view class="name flex-start">
  20. <image class="nameTip margin-r-10" src="../../static/user/ship/star.png" mode="scaleToFill">
  21. </image>
  22. <text>
  23. 体验飞船
  24. </text>
  25. </view>
  26. <view class="tip">
  27. 30天预计可挖
  28. </view>
  29. <view class="payMoney flex-start">
  30. <image class="payMoneyTip" src="../../static/index/index/icon01.png" mode="widthFix"></image>
  31. <text>22</text>
  32. </view>
  33. </view>
  34. <view class="itemRight">
  35. <view class="tiptext">
  36. 消耗:
  37. </view>
  38. <view class="moneyNum flex-center">
  39. <image class="moneyTip margin-r-10" src="../../static/index/index/icon01.png" mode="widthFix">
  40. </image>
  41. <text>220</text>
  42. </view>
  43. <view class="buttom" @click="openAlert(item)">
  44. 派遣飞船
  45. </view>
  46. </view>
  47. </view>
  48. <uni-load-more :status="taber[action].loadingType"></uni-load-more>
  49. </view>
  50. <u-popup v-model="show" mode='bottom' closeable @close='show=false'>
  51. <view class="alert">
  52. <view class="alertTitle">
  53. 派遣体验飞船
  54. </view>
  55. <view class="flex alertContent">
  56. <view class="alertMoney">
  57. 需要消耗矿石
  58. </view>
  59. <view class="flex-start">
  60. <image class="alertTip margin-r-10" src="../../static/index/index/icon01.png" mode="scaleToFill"></image>
  61. <text>100</text>
  62. </view>
  63. </view>
  64. <view class="alertTipText">
  65. <text>我可用矿石</text>
  66. <text class="nuim">21</text>
  67. <text>个</text>
  68. </view>
  69. <view class="buttomAlert">
  70. 确认开启
  71. </view>
  72. </view>
  73. </u-popup>
  74. </view>
  75. </template>
  76. <script>
  77. export default {
  78. data() {
  79. return {
  80. action: 0,
  81. taber: [{
  82. title: '星级飞船',
  83. state: 0,
  84. page: 1,
  85. limit: 10,
  86. loadingType: 'more',
  87. list: [{}],
  88. loaded: false,
  89. },
  90. {
  91. title: '我的飞船',
  92. state: 1,
  93. page: 1,
  94. limit: 10,
  95. loadingType: 'more',
  96. list: [],
  97. loaded: false,
  98. }
  99. ],
  100. show: false,
  101. // 当前选中的对象
  102. actionItem: {}
  103. };
  104. },
  105. onLoad(options) {
  106. },
  107. onShow() {},
  108. methods: {
  109. // 打开弹窗
  110. openAlert(item) {
  111. this.show = true;
  112. this.actionItem = item;
  113. },
  114. tabList(index) {
  115. this.action = index;
  116. this.loadData('tabChange')
  117. },
  118. loadData(source) {
  119. //这里是将订单挂载到tab列表下
  120. let index = this.action;
  121. let navItem = this.taber[index];
  122. let state = navItem.state;
  123. if (source === 'tabChange' && navItem.loaded === true) {
  124. //tab切换只有第一次需要加载数据
  125. return;
  126. }
  127. if (navItem.loadingType === 'loading') {
  128. //防止重复加载
  129. return;
  130. }
  131. if (navItem.loadingType === 'noMore') {
  132. //防止重复加载
  133. return;
  134. }
  135. // 修改当前对象状态为加载中
  136. navItem.loadingType = 'loading';
  137. orderList({
  138. type: state,
  139. page: navItem.page,
  140. limit: navItem.limit
  141. })
  142. .then(({
  143. data
  144. }) => {
  145. let arr = data.map(e => {
  146. let b = this.orderStateExp(e.status);
  147. e.stateTip = b.stateTip;
  148. e.stateTipColor = b.stateTipColor;
  149. return e;
  150. });
  151. navItem.orderList = navItem.orderList.concat(arr);
  152. // console.log(navItem.orderList);
  153. navItem.page++;
  154. if (navItem.limit == data.length) {
  155. //判断是否还有数据, 有改为 more, 没有改为noMore
  156. navItem.loadingType = 'more';
  157. return;
  158. } else {
  159. //判断是否还有数据, 有改为 more, 没有改为noMore
  160. navItem.loadingType = 'noMore';
  161. }
  162. uni.hideLoading();
  163. this.$set(navItem, 'loaded', true);
  164. })
  165. .catch(e => {
  166. console.log(e);
  167. });
  168. },
  169. }
  170. };
  171. </script>
  172. <style lang="scss" scoped>
  173. .page {
  174. min-height: calc(100vh);
  175. margin-top: -44px;
  176. padding-top: 44px;
  177. line-height: 1;
  178. background-image: url("../../static/user/ship/pagebg.png");
  179. background-repeat: no-repeat;
  180. background-size: 100% auto;
  181. background-color: rgb(255, 255, 255);
  182. }
  183. .tabBanner {
  184. position: sticky;
  185. padding: 30rpx 0 30rpx 30rpx;
  186. align-items: flex-start;
  187. .tabItemBox {
  188. align-items: flex-start;
  189. .tahItem {
  190. margin-right: 30rpx;
  191. font-weight: bold;
  192. font-size: 28rpx;
  193. &.action {
  194. font-size: 30rpx;
  195. }
  196. .actionIcon {
  197. background: linear-gradient(268deg, rgba(244, 177, 228, 0.99), #9D47C6, #5D289A);
  198. border-radius: 3px;
  199. width: 46rpx;
  200. height: 6rpx;
  201. margin: 0 auto;
  202. margin-top: 10rpx;
  203. }
  204. }
  205. }
  206. .rightMoney {
  207. margin-top: -6rpx;
  208. border-right: none;
  209. padding: 6rpx 20rpx;
  210. border-top-left-radius: 10rpx;
  211. border-bottom-left-radius: 10rpx;
  212. .rightTipImg {
  213. width: 36rpx;
  214. height: 29rpx;
  215. }
  216. }
  217. }
  218. .itemList {
  219. .item {
  220. margin: 0 30rpx 30rpx 30rpx;
  221. border-radius: 10rpx;
  222. padding: 10rpx;
  223. background-color: #FFF;
  224. background-image: url("../../static/user/ship/listbg.png");
  225. background-size: 100% 100%;
  226. color: #FFFFFF;
  227. font-weight: bold;
  228. .itemLeft {
  229. padding: 20rpx;
  230. .name {
  231. font-size: 28rpx;
  232. }
  233. .nameTip {
  234. width: 30rpx;
  235. height: 30rpx;
  236. }
  237. .tip {
  238. font-size: 26rpx;
  239. opacity: 0.75;
  240. padding: 20rpx 0;
  241. }
  242. .payMoney {
  243. font-weight: 400;
  244. font-size: 44rpx;
  245. .payMoneyTip {
  246. width: 43rpx;
  247. height: 34rpx;
  248. margin-right: 10rpx;
  249. }
  250. }
  251. }
  252. .itemRight {
  253. background-color: #FFF;
  254. border-radius: 10rpx;
  255. padding: 20rpx;
  256. .tiptext {
  257. font-weight: 500;
  258. font-size: 24rpx;
  259. color: #999999;
  260. }
  261. .moneyNum {
  262. padding: 30rpx 0;
  263. font-weight: bold;
  264. font-size: 33rpx;
  265. color: #000000;
  266. .moneyTip {
  267. width: 43rpx;
  268. height: 34rpx;
  269. }
  270. }
  271. .buttom {
  272. padding: 16rpx 50rpx;
  273. background: linear-gradient(268deg, rgba(113, 87, 185, 0.99), #8667C3, #7258B9);
  274. border-radius: 10rpx;
  275. font-weight: bold;
  276. font-size: 26rpx;
  277. color: #FFFFFF;
  278. }
  279. }
  280. }
  281. }
  282. .alert {
  283. padding: 30rpx;
  284. color: #222222;
  285. font-size: 30rpx;
  286. font-weight: bold;
  287. .alertTitle {
  288. }
  289. .alertContent {
  290. margin-top: 50rpx;
  291. padding: 30rpx;
  292. background: rgba(0, 0, 0, .07);
  293. border-radius: 10rpx;
  294. .alertTip {
  295. width: 43rpx;
  296. height: 34rpx;
  297. }
  298. }
  299. .alertTipText{
  300. margin-top: 50rpx;
  301. font-weight: 500;
  302. font-size: 29rpx;
  303. .nuim{
  304. color: #5E51ED;
  305. }
  306. }
  307. .buttomAlert{
  308. margin-top: 30rpx;
  309. padding: 30rpx;
  310. text-align: center;
  311. background: linear-gradient(268deg, rgba(113,87,185,0.99), #8667C3, #7258B9);
  312. border-radius: 10rpx;
  313. font-size: 33rpx;
  314. color: #FFFFFF;
  315. }
  316. }
  317. </style>