index.vue 8.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322
  1. <template>
  2. <view class="statistics" :style="{background:'url('+ bannerImage +')'}">
  3. <view><nav-bar title="none" icon="none" background="transparent" border-color="transparent"
  4. ></nav-bar></view>
  5. <view class="logo"><re-image imgSrc="/retail/main/img_logo.png" width="300" height="56"></re-image></view>
  6. <view class="content">
  7. <view class="news">
  8. <view class="info flex">
  9. <re-image imgSrc="/" width="104" height="104"></re-image>
  10. <view class="info-text flex-column jcsa">
  11. <view class="info-top flex">
  12. <view class="name">王安安</view>
  13. <view class="level flex aic">
  14. <re-image imgSrc="/retail/main/ic_chuji.png" width="40" height="44"></re-image>
  15. <view class="level-text">初级</view>
  16. </view>
  17. </view>
  18. <view class="phone">13630639549</view>
  19. </view>
  20. </view>
  21. <view class="news-total flex jcsa">
  22. <view class="total-item">
  23. <view class="item-num">156</view>
  24. <view class="item-text">总销订单</view>
  25. </view>
  26. <view class="total-item">
  27. <view class="item-num">156</view>
  28. <view class="item-text">总销游戏币</view>
  29. </view>
  30. <view class="total-item">
  31. <view class="item-num orange">¥156</view>
  32. <view class="item-text">预估总收益</view>
  33. </view>
  34. </view>
  35. </view>
  36. <view class="performance">
  37. <view class="per-top flex jcsb">
  38. <view class="left flex">
  39. <re-image width="40" height="40" imgSrc="/retail/statistics/ic_yeji.png"></re-image><text style="margin-left: 16rpx">分销业绩</text>
  40. </view>
  41. <view class="right flex aic" @click="show = true">
  42. <text>{{date}}</text><re-icon name="icon-xiala" :customStyle="{ fontSize: '10rpx',marginLeft:'10rpx'}"></re-icon>
  43. </view>
  44. </view>
  45. <view class="per-con flex">
  46. <view class="con-item flex">
  47. <re-image imgSrc="/retail/statistics/ic_dell.png" width="56" height="56"></re-image>
  48. <view class="con-new">
  49. <view class="new-text">总销订单</view>
  50. <view class="new-num">{{orderNum || 0}}</view>
  51. </view>
  52. </view>
  53. <view class="con-item flex">
  54. <re-image imgSrc="/retail/statistics/ic_youxibi.png" width="56" height="56"></re-image>
  55. <view class="con-new">
  56. <view class="new-text">总销游戏币</view>
  57. <view class="new-num">{{sumGameCurrency || 0}}</view>
  58. </view>
  59. </view>
  60. <view class="con-item con-btom flex">
  61. <re-image imgSrc="/retail/statistics/ic_money.png" width="56" height="56"></re-image>
  62. <view class="con-new">
  63. <view class="new-text">总充值金额</view>
  64. <view class="new-num"><text style="font-size:24rpx">¥</text>{{sumPay || 0}}</view>
  65. </view>
  66. </view>
  67. <view class="con-item con-btom flex">
  68. <re-image imgSrc="/retail/statistics/ic_money.png" width="56" height="56"></re-image>
  69. <view class="con-new">
  70. <view class="new-text">预估总收益</view>
  71. <view class="new-num"><text style="font-size:24rpx">¥</text>{{income || 0}}</view>
  72. </view>
  73. </view>
  74. </view>
  75. </view>
  76. <view class="grade">
  77. <view class="per-top flex jcsb">
  78. <view class="left flex aic">
  79. <re-image width="40" height="40" imgSrc="/retail/statistics/ic_yeji.png"></re-image><text style="margin-left: 16rpx">分销等级说明</text>
  80. </view>
  81. <rich-text :nodes="nodes"></rich-text>
  82. </view>
  83. </view>
  84. </view>
  85. <u-picker ref="uPicker" :show="show" :columns="columns" keyName="label" :closeOnClickOverlay="true" @confirm="confirm" @change="changeHandler" @close="show = false" @cancel="show = false"></u-picker>
  86. </view>
  87. </template>
  88. <script>
  89. import {
  90. toRpx
  91. } from '@/utils/calculate.js'
  92. import defaultConfig from '@/config/default.js'
  93. import { statistics,getConfig } from '@/apis/statistic'
  94. export default {
  95. components: {},
  96. computed: {
  97. statusBarHeight() {
  98. return this.$store.state.info.systemInfo?.statusBarHeight
  99. },
  100. },
  101. data() {
  102. return {
  103. show:false,
  104. date:'今日',
  105. columns:[
  106. [{
  107. label:'昨日',
  108. id:1
  109. },{
  110. label:'今日',
  111. id:2
  112. },{
  113. label:'近一周',
  114. id:3,
  115. },{
  116. label:'近一月',
  117. id:4,
  118. },{
  119. label:'近一年',
  120. id:5,
  121. }]
  122. ],
  123. bannerImage: defaultConfig.ossImgUrl + '/retail/main/img_bgtop.png',
  124. navBarHeight: uni.getStorageSync('navBarHeight'),
  125. nodes:'',
  126. income:'',
  127. orderNum:'',
  128. sumGameCurrency:'',
  129. sumPay:''
  130. }
  131. },
  132. onLoad() {
  133. },
  134. methods: {
  135. changeHandler(e) {
  136. console.log(e,'e');
  137. const {
  138. columnIndex,
  139. value,
  140. values, // values为当前变化列的数组内容
  141. index,
  142. // 微信小程序无法将picker实例传出来,只能通过ref操作
  143. picker = this.$refs.uPicker
  144. } = e
  145. // 当第一列值发生变化时,变化第二列(后一列)对应的选项
  146. // if (columnIndex === 0) {
  147. // // picker为选择器this实例,变化第二列对应的选项
  148. // picker.setColumnValues(1, this.columnData[index])
  149. // }
  150. },
  151. // 回调参数为包含columnIndex、value、values
  152. confirm(e) {
  153. console.log('confirm', e)
  154. this.show = false
  155. this.date = e.value[0].label
  156. },
  157. async getData(){
  158. uni.showLoading()
  159. const res = await statistics()
  160. const { income,orderNum,sumGameCurrency,sumPay } = res
  161. this.income = income
  162. this.orderNum = orderNum
  163. this.sumGameCurrency = sumGameCurrency
  164. this.sumPay = sumPay
  165. uni.hideLoading()
  166. },
  167. async getRule(){
  168. const res = await getConfig()
  169. this.nodes = res.lvRule
  170. }
  171. },
  172. onShow() {
  173. this.getData()
  174. this.getRule()
  175. },
  176. }
  177. </script>
  178. <style lang="scss" scoped>
  179. .statistics {
  180. background-repeat: no-repeat !important;
  181. background-size: contain !important;
  182. // background-position: top;
  183. width: 100%;
  184. position: absolute;
  185. top: 0;
  186. bottom: 0;
  187. .logo {
  188. margin-top: 16rpx;
  189. margin-left: 24rpx;
  190. }
  191. .content {
  192. padding: 0 32rpx;
  193. .news {
  194. background: #FFFFFF;
  195. box-shadow: 0rpx 6rpx 16rpx 0rpx #E3E6F2;
  196. border-radius: 24rpx;
  197. margin-top: 48rpx;
  198. padding: 40rpx;
  199. .info {
  200. .info-text {
  201. .info-top {
  202. .name {
  203. font-weight: 500;
  204. font-size: 32rpx;
  205. color: #363531;
  206. }
  207. .level {
  208. margin-left: 12rpx;
  209. .level-text {
  210. width: 80rpx;
  211. height: 36rpx;
  212. padding: 6rpx 12rpx 6rpx 20rpx;
  213. background: linear-gradient(130deg, #FFB873 0%, #FEC287 0%, #E69349 100%);
  214. border-radius: 0rpx 18rpx 18rpx 0rpx;
  215. font-weight: 500;
  216. font-size: 24rpx;
  217. color: #FFFFFF;
  218. line-height: 24rpx;
  219. margin-left: -12rpx;
  220. // text-align: left;
  221. }
  222. }
  223. }
  224. }
  225. .phone {
  226. font-weight: 400;
  227. font-size: 28rpx;
  228. color: #989897;
  229. }
  230. }
  231. .news-total {
  232. margin-top: 44rpx;
  233. .item-num {
  234. font-weight: bold;
  235. font-size: 40rpx;
  236. color: #363531;
  237. }
  238. .orange {
  239. color: #FF6400;
  240. }
  241. .item-text {
  242. font-weight: 400;
  243. font-size: 28rpx;
  244. color: #9598A6;
  245. }
  246. }
  247. }
  248. .performance{
  249. background: #fff;
  250. padding: 32rpx 32rpx 52rpx;
  251. box-shadow: 0rpx 4rpx 12rpx 0rpx #EBECF1;
  252. border-radius: 24rpx;
  253. margin-top: 22rpx;
  254. .per-top{
  255. .right{
  256. // width: 112rpx;
  257. // height: 48rpx;
  258. background: #FFD370;
  259. border-radius: 8rpx;
  260. font-weight: 500;
  261. font-size: 28rpx;
  262. color: #2A200A;
  263. line-height: 48rpx;
  264. padding: 0 16rpx;
  265. white-space: nowrap;
  266. }
  267. }
  268. .per-con{
  269. margin-top: 44rpx;
  270. flex-wrap: wrap;
  271. .con-item{
  272. width: 50%;
  273. .con-new{
  274. margin-left: 20rpx;
  275. .new-text{
  276. font-weight: 400;
  277. font-size: 28rpx;
  278. color: #9598A6;
  279. }
  280. .new-num{
  281. margin-top: 20rpx;
  282. font-weight: bold;
  283. font-size: 40rpx;
  284. color: #363531;
  285. line-height: 40rpx;
  286. }
  287. }
  288. }
  289. .con-btom{
  290. margin-top: 44rpx;
  291. }
  292. }
  293. }
  294. .grade{
  295. padding: 32rpx;
  296. background: linear-gradient( 135deg, #FFDFDF 0%, #FFE4A4 100%);
  297. border-radius: 24rpx;
  298. margin-top: 22rpx;
  299. }
  300. }
  301. }
  302. </style>