爱简收旧衣按件回收前端代码仓库
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.

228 lines
5.4 KiB

1 week ago
1 week ago
1 week ago
1 week ago
1 week ago
  1. <template>
  2. <view class="tui-detail-container">
  3. <!-- 顶部导航栏 -->
  4. <view class="navbar" :style="navbarStyle">
  5. <view class="nav-left" @tap="goBack">
  6. <uni-icons type="back" size="24" color="#222" />
  7. </view>
  8. <view class="nav-title">推广官管理详情</view>
  9. <view class="nav-right">
  10. <!-- <uni-icons type="more-filled" size="24" color="#222" style="margin-right: 16rpx;" />
  11. <uni-icons type="scan" size="24" color="#222" /> -->
  12. </view>
  13. </view>
  14. <view class="main-content">
  15. <!-- 个人信息卡片 -->
  16. <view class="info-card">
  17. <view class="card-title">个人信息</view>
  18. <view class="info-row">
  19. <text class="label">姓名</text>
  20. <text class="value">{{ tui.name }}</text>
  21. </view>
  22. <view class="divider"></view>
  23. <view class="info-row">
  24. <text class="label">电话</text>
  25. <text class="value">{{ tui.phone }}</text>
  26. </view>
  27. </view>
  28. <!-- 推广信息卡片 -->
  29. <view class="info-card">
  30. <view class="card-title">推广信息</view>
  31. <view class="info-row">
  32. <text class="label">一级推广数</text>
  33. <text class="value">{{ tui.level1 }}</text>
  34. </view>
  35. <view class="divider"></view>
  36. <view class="info-row">
  37. <text class="label">二级推广数</text>
  38. <text class="value">{{ tui.level2 }}</text>
  39. </view>
  40. <view class="divider"></view>
  41. <view class="info-row">
  42. <text class="label">回收总额</text>
  43. <text class="value">{{ tui.totalAmount }}</text>
  44. </view>
  45. <view class="divider"></view>
  46. <view class="info-row">
  47. <text class="label">佣金总额</text>
  48. <text class="value">{{ tui.commission }}</text>
  49. </view>
  50. </view>
  51. </view>
  52. <view class="bottom-bar">
  53. <button class="action-btn danger" @tap="removeTui">解除推广官</button>
  54. </view>
  55. </view>
  56. </template>
  57. <script>
  58. import pullRefreshMixin from '../mixins/pullRefreshMixin.js'
  59. export default {
  60. mixins: [pullRefreshMixin],
  61. data() {
  62. return {
  63. tui: {
  64. name: '周小艺',
  65. phone: '18899102278',
  66. level1: 67,
  67. level2: 67,
  68. totalAmount: '8273.99',
  69. commission: '278.99',
  70. },
  71. statusBarHeight: 0,
  72. }
  73. },
  74. computed: {
  75. navbarStyle() {
  76. return `padding-top: ${this.statusBarHeight}px;`;
  77. }
  78. },
  79. onLoad(options) {
  80. uni.getSystemInfo({
  81. success: (res) => {
  82. this.statusBarHeight = res.statusBarHeight || 20;
  83. }
  84. });
  85. // eventChannel 传递推广官信息
  86. const eventChannel = this.getOpenerEventChannel && this.getOpenerEventChannel();
  87. if (eventChannel) {
  88. eventChannel.on('tuiDetail', (tui) => {
  89. this.tui = Object.assign({}, this.tui, tui);
  90. });
  91. }
  92. },
  93. methods: {
  94. goBack() {
  95. uni.navigateBack();
  96. },
  97. removeTui() {
  98. uni.showToast({ title: '已解除推广官', icon: 'none' });
  99. },
  100. refreshData() {
  101. // TODO: 实现推广官详情刷新逻辑,如重新请求接口
  102. },
  103. async onRefresh() {
  104. await this.refreshData && this.refreshData()
  105. }
  106. },
  107. onPullDownRefresh() {
  108. this.refreshData && this.refreshData()
  109. uni.stopPullDownRefresh()
  110. }
  111. }
  112. </script>
  113. <style lang="scss" scoped>
  114. .tui-detail-container {
  115. min-height: 100vh;
  116. background: #f7f7f7;
  117. padding-bottom: 160rpx;
  118. }
  119. .navbar {
  120. position: fixed;
  121. top: 0;
  122. left: 0;
  123. width: 100vw;
  124. height: 100rpx;
  125. background: #fff;
  126. z-index: 10;
  127. display: flex;
  128. align-items: flex-end;
  129. justify-content: space-between;
  130. box-shadow: 0 2rpx 8rpx rgba(0,0,0,0.03);
  131. padding: 0 32rpx;
  132. .nav-left {
  133. flex: 0 0 48rpx;
  134. display: flex;
  135. align-items: center;
  136. height: 100%;
  137. }
  138. .nav-title {
  139. flex: 1;
  140. text-align: center;
  141. font-size: 36rpx;
  142. font-weight: bold;
  143. color: #222;
  144. line-height: 100rpx;
  145. }
  146. .nav-right {
  147. flex: 0 0 80rpx;
  148. display: flex;
  149. align-items: center;
  150. justify-content: flex-end;
  151. height: 100%;
  152. }
  153. }
  154. .main-content {
  155. margin-top: 120rpx;
  156. margin-bottom: 40rpx;
  157. }
  158. .info-card {
  159. background: #fff;
  160. border-radius: 40rpx;
  161. margin: 0 32rpx 32rpx 32rpx;
  162. padding: 40rpx 36rpx 36rpx 36rpx;
  163. box-shadow: 0 2rpx 8rpx rgba(0,0,0,0.03);
  164. }
  165. .card-title {
  166. font-size: 32rpx;
  167. font-weight: bold;
  168. color: #222;
  169. margin-bottom: 32rpx;
  170. }
  171. .info-row {
  172. display: flex;
  173. align-items: center;
  174. min-height: 60rpx;
  175. margin-bottom: 0;
  176. .label {
  177. font-size: 26rpx;
  178. color: #b3b3b3;
  179. width: 180rpx;
  180. font-weight: 400;
  181. }
  182. .value {
  183. font-size: 30rpx;
  184. color: #222;
  185. font-weight: 500;
  186. flex: 1;
  187. word-break: break-all;
  188. }
  189. }
  190. .divider {
  191. height: 2rpx;
  192. background: #f3f3f3;
  193. margin: 18rpx 0 18rpx 0;
  194. border: none;
  195. }
  196. .bottom-bar {
  197. position: fixed;
  198. left: 0;
  199. right: 0;
  200. bottom: 0;
  201. display: flex;
  202. justify-content: center;
  203. align-items: center;
  204. background: #f7f7f7;
  205. padding-bottom: env(safe-area-inset-bottom);
  206. padding-top: 24rpx;
  207. padding-bottom: 24rpx;
  208. z-index: 20;
  209. }
  210. .action-btn {
  211. flex: 1;
  212. margin: 0 32rpx;
  213. height: 80rpx;
  214. border-radius: 40rpx;
  215. font-size: 30rpx;
  216. font-weight: 500;
  217. border: 2rpx solid #ffd36d;
  218. background: #fffbe6;
  219. color: #ffb800;
  220. box-shadow: 0 2rpx 8rpx rgba(255, 156, 0, 0.03);
  221. }
  222. .action-btn.danger {
  223. color: #ffb800;
  224. border: 2rpx solid #ffd36d;
  225. background: #fffbe6;
  226. }
  227. </style>