index.vue 9.1 KB

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