member.vue 5.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287
  1. <template>
  2. <view class="pos-r padding-lr-sm">
  3. <use-tabbar :tabbar="false" />
  4. <view class="record-list margin-top-sm margin-bottom-sm" v-if="fetch.parent == 1">
  5. <view>
  6. <view class="record-title fs fwbd ft-black margin-bottom-sm">上级信息</view>
  7. <view class="record-item"
  8. @click="Dever.pic.preview([fetch.parent_info.avatar], fetch.parent_info.avatar)">
  9. <view class="record-left">
  10. <image class="record-avatar" :src="fetch.parent_info.avatar" mode="aspectFill"></image>
  11. <view class="record-info">
  12. <view class="record-name">{{ fetch.parent_info.name }}</view>
  13. <view class="record-time">{{ fetch.parent_info.cdate_str }}</view>
  14. </view>
  15. </view>
  16. </view>
  17. </view>
  18. </view>
  19. <view class="gold-section">
  20. <view class="item dflex dflex-flow-c">
  21. <text>共{{page}}个成员</text>
  22. </view>
  23. </view>
  24. <!-- 记录列表 -->
  25. <view class="record-list margin-top-sm" v-if="fetch">
  26. <view class="record-title fs fwbd ft-black margin-bottom-sm">成员列表</view>
  27. <u-empty v-if="fetch.list && fetch.list.length <= 0" marginTop="30" mode="data" text="暂无记录"></u-empty>
  28. <view v-else>
  29. <view class="record-item" v-for="(item, index) in fetch.list" :key="index"
  30. @click="Dever.pic.preview([item.avatar], item.avatar)">
  31. <view class="record-left">
  32. <image class="record-avatar" :src="item.avatar" mode="aspectFill"></image>
  33. <view class="record-info">
  34. <view class="record-name">{{ item.name }}</view>
  35. <view class="record-time">{{ item.cdate_str }}</view>
  36. </view>
  37. </view>
  38. <view class="record-amount lock">
  39. <text>{{ item.order }}</text>
  40. </view>
  41. </view>
  42. </view>
  43. </view>
  44. <view class="safe-area-inset-bottom"></view>
  45. </view>
  46. </template>
  47. <script>
  48. export default {
  49. data() {
  50. return {
  51. fetch: {},
  52. page: 0,
  53. };
  54. },
  55. onLoad() {
  56. this.loadData(1);
  57. },
  58. //下拉刷新
  59. onPullDownRefresh() {
  60. this.loadData(1);
  61. },
  62. //加载更多
  63. onReachBottom() {
  64. this.loadData(2);
  65. },
  66. methods: {
  67. loadData(page) {
  68. this.DeverApi.page([page, 'list'], this, 'user.getGroup', {}, res => {
  69. this.page = res.page;
  70. });
  71. },
  72. }
  73. };
  74. </script>
  75. <style lang="scss">
  76. .gold-section {
  77. background: #ffffff;
  78. border-radius: 24rpx;
  79. padding: 32rpx;
  80. .dflex-b {
  81. display: flex;
  82. justify-content: space-between;
  83. align-items: center;
  84. }
  85. .title {
  86. font-size: 32rpx;
  87. font-weight: bold;
  88. color: #333;
  89. }
  90. .link {
  91. font-size: 24rpx;
  92. color: #ff9800;
  93. text-decoration: underline;
  94. }
  95. .balance-number {
  96. margin-top: 20rpx;
  97. .price {
  98. font-size: 48rpx;
  99. color: #ff9800;
  100. font-weight: bold;
  101. }
  102. }
  103. .amount-summary {
  104. display: flex;
  105. justify-content: space-between;
  106. margin-top: 32rpx;
  107. .summary-item {
  108. flex: 1;
  109. display: flex;
  110. flex-direction: column;
  111. .label {
  112. font-size: 24rpx;
  113. color: #888;
  114. }
  115. .value {
  116. margin-top: 10rpx;
  117. font-size: 30rpx;
  118. font-weight: 600;
  119. color: #333;
  120. }
  121. }
  122. }
  123. }
  124. .card-tile {
  125. border-radius: 24rpx;
  126. padding: 30rpx;
  127. background: #ffffff;
  128. display: flex;
  129. align-items: center;
  130. justify-content: center;
  131. transition: all 0.2s ease-in-out;
  132. .icon {
  133. font-size: 60rpx;
  134. margin-right: 24rpx;
  135. }
  136. .text-content {
  137. display: flex;
  138. flex-direction: column;
  139. .title {
  140. font-size: 30rpx;
  141. font-weight: 600;
  142. color: #333;
  143. }
  144. .desc {
  145. font-size: 24rpx;
  146. color: #999;
  147. margin-top: 6rpx;
  148. }
  149. }
  150. &:active {
  151. transform: scale(0.97);
  152. }
  153. &:first-child {
  154. margin-right: 10rpx;
  155. }
  156. }
  157. .wpre-50 .card-tile {
  158. &:first-child {
  159. margin-bottom: 12rpx;
  160. margin-right: 0rpx;
  161. }
  162. }
  163. .record-list {
  164. background: #ffffff;
  165. border-radius: 20rpx;
  166. padding: 30rpx;
  167. .record-title {
  168. font-size: 30rpx;
  169. font-weight: bold;
  170. color: #333;
  171. }
  172. .record-item {
  173. display: flex;
  174. justify-content: space-between;
  175. align-items: center;
  176. padding: 20rpx 0;
  177. border-bottom: 1px solid #f0f0f0;
  178. &:last-child {
  179. border-bottom: none;
  180. }
  181. .record-left {
  182. display: flex;
  183. align-items: center;
  184. .record-avatar {
  185. width: 84rpx;
  186. height: 84rpx;
  187. border-radius: 50%; // 圆形头像
  188. margin-right: 20rpx;
  189. }
  190. .record-info {
  191. display: flex;
  192. flex-direction: column;
  193. .record-name {
  194. font-size: 28rpx;
  195. color: #333;
  196. }
  197. .record-time {
  198. font-size: 24rpx;
  199. color: #999;
  200. margin-top: 6rpx;
  201. }
  202. }
  203. .record-name {
  204. font-size: 28rpx;
  205. color: #333;
  206. }
  207. .record-desc {
  208. font-size: 28rpx;
  209. color: #999;
  210. }
  211. .record-time {
  212. font-size: 24rpx;
  213. color: #999;
  214. margin-top: 6rpx;
  215. }
  216. }
  217. .record-amount {
  218. font-size: 28rpx;
  219. font-weight: bold;
  220. &.income {
  221. color: #4caf50;
  222. }
  223. &.expense {
  224. color: #f44336;
  225. }
  226. &.lock {
  227. color: #999;
  228. }
  229. }
  230. }
  231. }
  232. .empty-record {
  233. text-align: center;
  234. padding: 60rpx 0;
  235. .empty-icon {
  236. width: 160rpx;
  237. height: 160rpx;
  238. margin-bottom: 20rpx;
  239. opacity: 0.6;
  240. }
  241. .empty-text {
  242. font-size: 28rpx;
  243. color: #999;
  244. }
  245. }
  246. </style>