role.vue 4.8 KB

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