知识付费微信小程序
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.

260 lines
4.9 KiB

11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
  1. <template>
  2. <view class="">
  3. <uni-nav-bar dark :fixed="true" background-color="#00aaff" :border="false" status-bar title="个人中心" />
  4. <view class="content">
  5. <view class="topBox">
  6. <view class="users">
  7. <view class="u-top"
  8. @click="$utils.navigateTo('/login/wxUserInfo')"
  9. v-if="userInfo.appletOpenid">
  10. <image class="img" :src="userInfo.headImage" mode="widthFix"></image>
  11. <view class="tit">
  12. {{ userInfo.nickName }}
  13. </view>
  14. </view>
  15. <view class="u-top"
  16. v-else
  17. @click="$utils.navigateTo('/login/login')">
  18. <image class="img"
  19. src="https://img2.baidu.com/it/u=2953585264,744730101&fm=253&fmt=auto&app=138&f=JPEG?w=360&h=360"
  20. mode="widthFix"></image>
  21. <view class="tit">
  22. 登录 / 注册
  23. </view>
  24. </view>
  25. </view>
  26. </view>
  27. <view class="listBox">
  28. <view class="lists">
  29. <uni-section title="我的订单" type="line" titleFontSize="34rpx"
  30. style="border-radius: 10rpx;"></uni-section>
  31. <view class="order-list">
  32. <view v-for="(item,index) in orderList" :key="item.id" class="order-item">
  33. <view class="order-item-top">
  34. <view class="order-id">{{ item.id }}</view>
  35. <view class="time">{{ item.createTime }}</view>
  36. </view>
  37. <div class="order-item-main">
  38. <div class="title">付款金额</div>
  39. <view class="money-detail">
  40. <view class="unie"></view>
  41. <view class="number">{{ item.price }}</view>
  42. </view>
  43. </div>
  44. <view class="title"
  45. style="padding: 20rpx;">
  46. {{ item.title }}
  47. </view>
  48. </view>
  49. </view>
  50. <view v-if="orderList.length == 0" class="no-data">
  51. <image src="@/static/empty/noData.png" mode=""></image>
  52. <view class="">
  53. 空空如也
  54. </view>
  55. </view>
  56. </view>
  57. </view>
  58. </view>
  59. </view>
  60. </template>
  61. <script>
  62. import {
  63. mapState
  64. } from 'vuex'
  65. export default {
  66. name: 'Center',
  67. computed: {
  68. ...mapState(['userInfo']),
  69. },
  70. data() {
  71. return {
  72. queryParams: {
  73. pageNo: 1,
  74. pageSize: 10
  75. },
  76. orderList: [],
  77. total : 0
  78. }
  79. },
  80. onShow() {
  81. if (uni.getStorageSync('token')) {
  82. this.$store.commit('getUserInfo')
  83. this.getOrderList()
  84. }
  85. },
  86. //滚动到屏幕底部
  87. onReachBottom() {
  88. if(this.queryParams.pageSize < this.total){
  89. this.queryParams.pageSize += 10
  90. this.getOrderList()
  91. }
  92. },
  93. methods: {
  94. //获取订单列表
  95. getOrderList() {
  96. this.$api('getPayOrderPage', this.queryParams, res => {
  97. this.orderList = res.result.records
  98. this.total = res.result.total
  99. })
  100. },
  101. }
  102. }
  103. </script>
  104. <style scoped>
  105. .content {
  106. background: #F1F5F8;
  107. min-height: 100vh;
  108. }
  109. /* 弧形背景 */
  110. .topBox {
  111. width: 100%;
  112. position: relative;
  113. z-index: 1;
  114. overflow: hidden;
  115. padding: 60rpx 20rpx 20rpx;
  116. box-sizing: border-box;
  117. }
  118. .topBox::after {
  119. content: "";
  120. width: 140%;
  121. height: 100px;
  122. position: absolute;
  123. left: -20%;
  124. top: 0;
  125. z-index: -1;
  126. border-radius: 0 0 30% 50%;
  127. /* background: #00aaff; */
  128. background: #000;
  129. }
  130. .txt {
  131. color: #fff;
  132. font-size: 30rpx;
  133. }
  134. .set-right .uni-icons {
  135. margin-right: 10rpx;
  136. }
  137. .users {
  138. display: flex;
  139. align-items: center;
  140. margin-top: 0rpx;
  141. padding: 0rpx 30rpx;
  142. box-sizing: border-box;
  143. height: 200rpx;
  144. background-color: #fff;
  145. box-shadow: 1px 10rpx 20rpx #ececec;
  146. border-radius: 12rpx;
  147. }
  148. .u-top {
  149. display: flex;
  150. justify-content: flex-start;
  151. align-items: center;
  152. }
  153. .users .u-top .img {
  154. width: 130rpx;
  155. height: 130rpx;
  156. border-radius: 50%;
  157. margin-right: 20rpx;
  158. }
  159. .u-top .tit {
  160. font-size: 30rpx;
  161. font-weight: 700;
  162. color: #333;
  163. }
  164. .u-item {
  165. text-align: center;
  166. }
  167. .u-item .u-tit {
  168. color: #757575;
  169. font-size: 26rpx;
  170. margin-top: 10rpx;
  171. }
  172. .u-item .num {
  173. color: #000000;
  174. font-size: 33rpx;
  175. font-weight: 700;
  176. }
  177. .bottomBox {
  178. padding: 20rpx;
  179. box-sizing: border-box;
  180. }
  181. .order-list {
  182. padding-top: 20rpx;
  183. }
  184. .order-item {
  185. width: 100%;
  186. background: white;
  187. border-radius: 20rpx;
  188. margin-bottom: 20rpx;
  189. overflow: hidden;
  190. }
  191. .order-item .order-item-top {
  192. display: flex;
  193. align-items: center;
  194. justify-content: space-between;
  195. height: 80rpx;
  196. font-size: 24rpx;
  197. box-sizing: border-box;
  198. padding: 0rpx 20rpx;
  199. }
  200. .order-item .order-item-main {
  201. padding: 60rpx 0rpx;
  202. display: flex;
  203. flex-direction: column;
  204. align-items: center;
  205. }
  206. .order-item-main .title {
  207. color: #5a5a5a;
  208. }
  209. .order-item-main .money-detail {
  210. display: flex;
  211. align-items: center;
  212. margin-top: 20rpx;
  213. }
  214. .money-detail .unit {
  215. font-size: 34rpx;
  216. }
  217. .money-detail .number {
  218. font-size: 60rpx;
  219. }
  220. .no-data {
  221. padding: 30rpx;
  222. box-sizing: border-box;
  223. background-color: #fff;
  224. display: flex;
  225. justify-content: space-around;
  226. align-items: center;
  227. flex-direction: column;
  228. color: #757575;
  229. }
  230. .listBox {
  231. margin: -10rpx auto 0;
  232. padding: 20rpx;
  233. box-sizing: border-box;
  234. border-radius: 20rpx;
  235. }
  236. </style>