extension.vue 6.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377
  1. <template>
  2. <view class="content">
  3. <view class="content-money">
  4. <view class="money-box">
  5. <view class="goback-box" @click="toBack">
  6. <image class="goback" src="../../static/img/fanhui.png" mode=""></image>
  7. </view>
  8. <view class="header">我的推广</view>
  9. <image class="tuiguang_bg" src="../../static/img/share-bg.png"></image>
  10. <!-- <view class="money_img"><image :src="list.avatar || img"></image></view> -->
  11. <view class="money-frame">
  12. <!-- <view class="money_name">我的推广</view> -->
  13. <view class="money_num">
  14. {{ all || '0' }}
  15. <text class="money_ren">人</text>
  16. </view>
  17. </view>
  18. </view>
  19. </view>
  20. <scroll-view class="list-scroll-content" scroll-y @scrolltolower="loadData">
  21. <!-- 空白页 -->
  22. <view class="empty-box"><empty v-if="orderList.length === 0"></empty></view>
  23. <!-- 订单列表 -->
  24. <view v-for="(item, index) in orderList" :key="index" class="order-item flex">
  25. <view class="title-box flex_item">
  26. <view class="title-avatar">
  27. <image :src="item.avatar"></image>
  28. </view>
  29. <view class="list_tpl">
  30. <view class="title">
  31. <text>{{ item.nickname }}</text>
  32. </view>
  33. <view class="time">
  34. <text>{{ item.time }}</text>
  35. </view>
  36. </view>
  37. </view>
  38. </view>
  39. <uni-load-more :status="loadingType"></uni-load-more>
  40. </scroll-view>
  41. </view>
  42. </template>
  43. <script>
  44. import {
  45. spread
  46. } from '@/api/finance.js'
  47. import {
  48. mapState,
  49. mapMutations
  50. } from 'vuex';
  51. import uniLoadMore from '@/uview-ui/components/u-loading-page/u-loading-page.vue';
  52. import empty from '@/uview-ui/components/u-empty/u-empty.vue';
  53. export default {
  54. components: {
  55. empty,
  56. uniLoadMore
  57. },
  58. onReady() {
  59. // 初始化获取页面宽度
  60. uni.createSelectorQuery()
  61. .select('.content')
  62. .fields({
  63. size: true
  64. },
  65. data => {
  66. // console.log(data);
  67. // console.log(Math.floor((data.width / 750) * 300));
  68. // 保存头部高度
  69. this.maxheight = data.height - Math.floor((data.width / 750) * 470) - 44;
  70. // console.log(this.maxheight);
  71. }
  72. )
  73. .exec();
  74. },
  75. data() {
  76. return {
  77. // 头部图高度
  78. maxheight: '',
  79. orderList: [{}],
  80. all: '', //推广人数
  81. loadingType: 'more', //页面加载即时刷新
  82. page: 1, //默认展示一行
  83. limit: 10, //一行展示10条数据
  84. loadingType:'more'
  85. };
  86. },
  87. onLoad(options) {
  88. this.loadData(); //onload只是在第一次进入页面会刷新数据,从二级页面回来不会重新加载数据
  89. },
  90. onShow() { //onShow没有参数
  91. this.loadData(); //onshow在每次打开页面都会加载数据,可以用于数据在需要刷新的环境下
  92. },
  93. methods: {
  94. async loadData() {
  95. if (this.loadingType == "nomore") {
  96. return;
  97. }
  98. spread({
  99. limit: 10,
  100. page: 1
  101. }).then(({
  102. data
  103. }) => {
  104. this.all = data.total;
  105. this.orderList = data.list;
  106. if (data.length != this.limit) {
  107. this.loadingType = 'nomore'
  108. } else {
  109. this.page++;
  110. }
  111. })
  112. },
  113. // 页面跳转
  114. navto(e) {
  115. uni.navigateTo({
  116. url: e
  117. });
  118. },
  119. // 点击返回 我的页面
  120. toBack() {
  121. uni.switchTab({
  122. url: '/pages/user/user'
  123. });
  124. }
  125. }
  126. };
  127. </script>
  128. <style lang="scss">
  129. page {
  130. background: #ffffff;
  131. height: 100%;
  132. }
  133. .content-money {
  134. padding-bottom: 30rpx;
  135. background: $page-color-base;
  136. .buttom-box {
  137. position: relative;
  138. background-color: #ffffff;
  139. text-align: center;
  140. margin: 0 30rpx;
  141. padding: 30rpx 0;
  142. border-radius: $border-radius-sm;
  143. margin-top: -80rpx;
  144. .buttom {
  145. font-size: $font-lg;
  146. flex-grow: 1;
  147. .money {
  148. font-weight: bold;
  149. font-size: 32rpx;
  150. color: #ff0000;
  151. }
  152. }
  153. .text {
  154. color: #666666;
  155. }
  156. .interval {
  157. width: 2rpx;
  158. height: 60rpx;
  159. background-color: #eeeeee;
  160. }
  161. .icon {
  162. height: 50rpx;
  163. width: 48rpx;
  164. margin: 0 auto;
  165. .icon-img {
  166. width: 100%;
  167. height: 100%;
  168. }
  169. }
  170. }
  171. }
  172. .money-box {
  173. // background: $base-color;
  174. height: 424rpx;
  175. color: #ffffff;
  176. text-align: center;
  177. font-size: 35rpx;
  178. position: relative;
  179. // padding-top: 60rpx;
  180. .header {
  181. position: absolute;
  182. left: 0;
  183. top: 0;
  184. width: 100%;
  185. height: 80rpx;
  186. font-size: 32rpx;
  187. font-weight: 700;
  188. z-index: 99;
  189. display: flex;
  190. justify-content: center;
  191. align-items: center;
  192. }
  193. .goback-box {
  194. position: absolute;
  195. left: 18rpx;
  196. top: 0;
  197. height: 80rpx;
  198. display: flex;
  199. align-items: center;
  200. }
  201. .goback {
  202. z-index: 100;
  203. width: 34rpx;
  204. height: 34rpx;
  205. }
  206. .tuiguang_bg {
  207. width: 100%;
  208. height: 424rpx;
  209. position: relative;
  210. }
  211. .money_img {
  212. width: 100%;
  213. height: 120rpx;
  214. text-align: center;
  215. padding-top: 50rpx;
  216. padding-bottom: 135rpx;
  217. image {
  218. width: 120rpx;
  219. height: 120rpx;
  220. border: 4rpx solid #fd5f6f;
  221. border-radius: 50%;
  222. }
  223. }
  224. .money-frame {
  225. position: absolute;
  226. top: 0;
  227. width: 100%;
  228. padding-top: 120rpx;
  229. // left: 30rpx;
  230. // height: 460rpx;
  231. // display: flex;
  232. // align-items: flex-start;
  233. // flex-direction: column;
  234. // justify-content: center;
  235. }
  236. .money_name {
  237. width: 100%;
  238. text-align: center;
  239. font-size: 32rpx;
  240. font-family: PingFang SC;
  241. font-weight: bold;
  242. color: #ffffff;
  243. }
  244. .money_num {
  245. font-size: 72rpx;
  246. font-family: PingFang SC;
  247. font-weight: bold;
  248. color: #ffffff;
  249. .money_ren {
  250. font-size: 36rpx;
  251. }
  252. }
  253. }
  254. .navbar {
  255. display: flex;
  256. height: 40px;
  257. padding: 0 5px;
  258. background: #fff;
  259. box-shadow: 0 1px 5px rgba(0, 0, 0, 0.06);
  260. position: relative;
  261. z-index: 10;
  262. .nav-item {
  263. flex: 1;
  264. display: flex;
  265. justify-content: center;
  266. align-items: center;
  267. height: 100%;
  268. font-size: 15px;
  269. color: $font-color-dark;
  270. position: relative;
  271. &.current {
  272. color: #ff0000;
  273. &:after {
  274. content: '';
  275. position: absolute;
  276. left: 50%;
  277. bottom: 0;
  278. transform: translateX(-50%);
  279. width: 44px;
  280. height: 0;
  281. border-bottom: 2px solid #ff0000;
  282. }
  283. }
  284. }
  285. }
  286. // 列表
  287. .order-item {
  288. padding: 20rpx 30rpx;
  289. line-height: 1.5;
  290. .title-box {
  291. width: 100%;
  292. .title-avatar {
  293. width: 100rpx;
  294. height: 100rpx;
  295. margin-right: 25rpx;
  296. background: #03A9F4;
  297. border-radius: 100%;
  298. image {
  299. width: 100%;
  300. height: 100%;
  301. border-radius: 100%;
  302. }
  303. }
  304. .list_tpl {
  305. width: 85%;
  306. .title {
  307. font-size: $font-lg;
  308. color: $font-color-base;
  309. overflow: hidden; //超出的文本隐藏
  310. text-overflow: ellipsis; //溢出用省略号显示
  311. white-space: nowrap;
  312. }
  313. .time {
  314. font-size: $font-base;
  315. color: $font-color-light;
  316. }
  317. }
  318. }
  319. .money {
  320. color: #db1935;
  321. font-size: $font-lg;
  322. }
  323. }
  324. .list-scroll-content {
  325. height: auto;
  326. }
  327. .content {
  328. height: 100%;
  329. .empty-content {
  330. background-color: #ffffff;
  331. }
  332. }
  333. </style>