You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

261 lines
5.9 KiB

9 months ago
9 months ago
9 months ago
9 months ago
9 months ago
9 months ago
9 months ago
9 months ago
9 months ago
  1. <template>
  2. <view class="order bx">
  3. <view style="position: fixed;
  4. height: 210rpx;
  5. width: 100%;
  6. z-index: 99;
  7. background-color: #fff;">
  8. </view>
  9. <view class="order-nav">
  10. <navbar
  11. style="background: transparent;position: fixed;"
  12. :title="$t('page.order.records')"></navbar>
  13. </view>
  14. <u-sticky>
  15. <view style="width: 100%;display: flex;padding: 20rpx 0rpx;font-size: 28rpx;">
  16. <view style="flex: 1;
  17. text-align: center;padding: 10rpx 0;
  18. margin: 20rpx;"
  19. :class="{act : currentIndex == index}"
  20. @click="tabChange(index)"
  21. v-for="(item, index) in classifyList">
  22. {{ item.name }}
  23. </view>
  24. </view>
  25. </u-sticky>
  26. <view v-if="!noOrder" class="order-list">
  27. <u-list @scrolltolower="scrolltolower" height="calc(100vh - 90rpx)">
  28. <view v-for="(item,index) in productList" :key="index"
  29. class="order-item">
  30. <view class="top">
  31. <view style="font-size: 28rpx;" class="time">
  32. {{ item.createTime }}
  33. </view>
  34. <view style="color: #00b25e;border: 1px solid #00b25e;
  35. padding: 7rpx 15rpx;font-size: 24rpx;"
  36. v-if="item.state != 0">
  37. {{ $t('page.order.Submit_New') }}
  38. </view>
  39. <view style="color: #f90;border: 1px solid #f90;
  40. padding: 7rpx 15rpx;font-size: 24rpx;"
  41. v-else @click="order = item;show = true;$play()">
  42. {{ $t('page.order.pay') }}
  43. </view>
  44. </view>
  45. <view class="con"
  46. style="border-bottom: 1px solid #afc056;
  47. padding: 20rpx 0;">
  48. <view class="img-box" style="width: 150rpx;height: 150rpx;overflow: hidden;border-radius: 10rpx;display: flex;align-items: center;">
  49. <image :src="item.image" mode="widthFix" style="width: 150rpx;"></image>
  50. </view>
  51. <view style="font-weight: 900;margin-left: 20rpx;font-size: 28rpx;">
  52. {{ item.subTitle }}
  53. </view>
  54. </view>
  55. <view class="con"
  56. style="margin-top: 20rpx;font-size: 28rpx;font-weight: 500;">
  57. <view style="flex: 1;">
  58. {{ $t('page.order.Total_Amount') }}
  59. </view>
  60. <view style="flex: 1;">
  61. {{ $t('page.order.Profit') }}
  62. </view>
  63. </view>
  64. <view class="con"
  65. style="margin-top: 10rpx;
  66. color: #afc056;font-weight: 900;font-size: 28rpx;">
  67. <view style="flex: 1;">
  68. USDT {{ item.price }}
  69. </view>
  70. <view style="flex: 1;">
  71. USDT {{ item.giveMoney }}
  72. </view>
  73. </view>
  74. </view>
  75. <view style="justify-content: center;display: flex;
  76. margin-top: 150rpx;" v-if="loading">
  77. <u-loading-icon
  78. mode="semicircle"
  79. size="30"></u-loading-icon>
  80. </view>
  81. </u-list>
  82. </view>
  83. <view v-else class="no-order">
  84. <view class="box">
  85. <view class="no-product-title">{{ $t('page.order.no-Order') }}</view>
  86. <view @click="toHome()" class="to-home">{{ $t('page.order.take-stroll')}}</view>
  87. </view>
  88. </view>
  89. <u-modal :show="show"
  90. :title="$t('page.order.confirm_pay')"
  91. :confirmText="$t('page.order.ok')"
  92. :cancelText="$t('page.order.no')"
  93. @cancel="show = false;$play()"
  94. @confirm="payOrder"
  95. :showCancelButton="true"
  96. ></u-modal>
  97. <sTabbar select="2"/>
  98. </view>
  99. </template>
  100. <script>
  101. import navbar from '@/components/base/m-navbar.vue'
  102. import sTabbar from '@/components/base/tabBar.vue'
  103. export default {
  104. components: {
  105. navbar,
  106. sTabbar
  107. },
  108. data() {
  109. return {
  110. classifyList: [
  111. {
  112. name: this.$t('page.order.class_1')
  113. },
  114. {
  115. name: this.$t('page.order.class_2')
  116. },
  117. {
  118. name: this.$t('page.order.class_3')
  119. },
  120. {
  121. name: this.$t('page.order.class_4')
  122. },
  123. ],
  124. productList: [],
  125. currentIndex: 0, //当前选择的标签index
  126. queryParams: {
  127. pageNo: 1,
  128. pageSize: 10
  129. },
  130. noOrder: false,
  131. loading : false,
  132. show : false,
  133. order : {}
  134. }
  135. },
  136. onShow() {
  137. this.getOrderList();
  138. this.currentIndex = localStorage.getItem('orderIndex') ?
  139. parseInt(localStorage.getItem('orderIndex')) : 0
  140. localStorage.removeItem('orderIndex')
  141. },
  142. methods: {
  143. getOrderList() { //获取订单列表
  144. this.loading = true
  145. let data = {
  146. ...this.queryParams,
  147. }
  148. if(this.currentIndex) data.state = this.currentIndex - 1
  149. this.request('orderPage', {}, data).then(res => {
  150. if(res.code == 200){
  151. this.loading = false
  152. this.productList = res.result.records
  153. }
  154. })
  155. },
  156. tabChange(index) {
  157. if (index != this.currentIndex) {
  158. this.currentIndex = index
  159. this.$play()
  160. this.getOrderList();
  161. }
  162. },
  163. payOrder() {
  164. this.$play()
  165. uni.showLoading()
  166. this.request('pay', {}, {
  167. id : this.order.id
  168. }).then(res => {
  169. uni.hideLoading()
  170. this.show = false
  171. if (res.code == 200) {
  172. this.getOrderList();
  173. }
  174. })
  175. },
  176. toHome(){ //去首页
  177. this.$play()
  178. uni.switchTab({
  179. url: '/pages/home/home'
  180. })
  181. },
  182. scrolltolower(){
  183. this.queryParams.pageSize += 10
  184. this.getOrderList()
  185. }
  186. }
  187. }
  188. </script>
  189. <style lang="scss" scoped>
  190. .order {
  191. padding-bottom: 200rpx;
  192. // background-color: black;
  193. // background-image: url('@/static/home/bg.png');
  194. background-size: 100%;
  195. color: #000;
  196. font-weight: bold;
  197. min-height: 100vh;
  198. padding-bottom: 200rpx;
  199. .act{
  200. background-color: #afc056;
  201. border-radius: 10rpx;
  202. color: black;
  203. }
  204. .order-list {
  205. box-sizing: border-box;
  206. margin-top: 50px;
  207. .order-item {
  208. position: relative;
  209. background: white;
  210. padding: 20rpx;
  211. border-radius: 5px;
  212. background-color: #000;
  213. margin: 0rpx 20rpx 20rpx 20rpx;
  214. .top{
  215. display: flex;
  216. justify-content: space-between;
  217. }
  218. .con{
  219. display: flex;
  220. align-items: center;
  221. }
  222. }
  223. }
  224. .no-order {
  225. height: calc(100vh - 138px);
  226. display: flex;
  227. align-items: center;
  228. justify-content: center;
  229. .box {
  230. font-size: 26rpx;
  231. text-align: center;
  232. .to-home {
  233. padding: 20rpx 140rpx;
  234. border: 1px solid #ccc;
  235. border-radius: 5px;
  236. text-align: center;
  237. margin: 20rpx 0px;
  238. }
  239. }
  240. }
  241. }
  242. </style>