index.vue 9.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345
  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. <image :src="avatar || defaultAvatar" class="img"></image>
  10. <view class="info-text flex-column jcsa">
  11. <view class="info-top flex">
  12. <view class="name">{{info.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">{{info.lvName}}</view>
  16. </view>
  17. </view>
  18. <view class="phone">{{info.username}}</view>
  19. </view>
  20. </view>
  21. <view class="news-total flex jcsa">
  22. <view class="total-item">
  23. <view class="item-num">{{info.sumPayNum}}</view>
  24. <view class="item-text">总销订单</view>
  25. </view>
  26. <view class="total-item">
  27. <view class="item-num">{{info.sumGameCurrency}}</view>
  28. <view class="item-text">总销游戏币</view>
  29. </view>
  30. <view class="total-item">
  31. <view class="item-num orange">¥{{info.sumIncome}}</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">
  78. <view class="left_dec 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. info: uni.getStorageSync('userInfo'),
  131. // sumPayNum: uni.getStorageSync('userInfo').sumPayNum,// 总销订单
  132. // sumGameCurrency: uni.getStorageSync('userInfo').sumGameCurrency,// 总销游戏币
  133. // sumIncome: uni.getStorageSync('userInfo').sumIncome,//预估总收益,
  134. avatar: uni.getStorageSync('avatar'),
  135. // name:uni.getStorageSync('userInfo').name,
  136. defaultAvatar:'../../static/image/img_touxiang.png',
  137. username:uni.getStorageSync('username'),
  138. }
  139. },
  140. onLoad() {
  141. },
  142. methods: {
  143. updateAvatarFromStorage() {
  144. // 从本地存储同步获取 avatar 并更新组件状态
  145. this.avatar = uni.getStorageSync('avatar');
  146. },
  147. changeHandler(e) {
  148. console.log(e,'e');
  149. const {
  150. columnIndex,
  151. value,
  152. values, // values为当前变化列的数组内容
  153. index,
  154. // 微信小程序无法将picker实例传出来,只能通过ref操作
  155. picker = this.$refs.uPicker
  156. } = e
  157. // 当第一列值发生变化时,变化第二列(后一列)对应的选项
  158. // if (columnIndex === 0) {
  159. // // picker为选择器this实例,变化第二列对应的选项
  160. // picker.setColumnValues(1, this.columnData[index])
  161. // }
  162. },
  163. // 回调参数为包含columnIndex、value、values
  164. confirm(e) {
  165. console.log('confirm', e)
  166. this.show = false
  167. this.date = e.value[0].label
  168. },
  169. async getData(){
  170. uni.showLoading()
  171. const res = await statistics()
  172. const { income,orderNum,sumGameCurrency,sumPay } = res
  173. this.income = income
  174. this.orderNum = orderNum
  175. this.sumGameCurrency = sumGameCurrency
  176. this.sumPay = sumPay
  177. uni.hideLoading()
  178. },
  179. async getRule(){
  180. const res = await getConfig()
  181. this.nodes = res.lvRule
  182. }
  183. },
  184. onShow() {
  185. this.getData()
  186. this.getRule()
  187. this.updateAvatarFromStorage()
  188. },
  189. }
  190. </script>
  191. <style lang="scss" scoped>
  192. .statistics {
  193. background-repeat: no-repeat !important;
  194. background-size: contain !important;
  195. // background-position: top;
  196. width: 100%;
  197. position: absolute;
  198. top: 0;
  199. bottom: 0;
  200. .logo {
  201. margin-top: 16rpx;
  202. margin-left: 24rpx;
  203. }
  204. .content {
  205. padding: 0 32rpx;
  206. .news {
  207. background: #FFFFFF;
  208. box-shadow: 0rpx 6rpx 16rpx 0rpx #E3E6F2;
  209. border-radius: 24rpx;
  210. margin-top: 48rpx;
  211. padding: 40rpx;
  212. .info {
  213. .img{
  214. flex-shrink: 0;
  215. width: 104rpx;
  216. height: 104rpx;
  217. border-radius: 8rpx;
  218. margin-right: 20rpx;
  219. }
  220. .info-text {
  221. .info-top {
  222. .name {
  223. font-weight: 500;
  224. font-size: 32rpx;
  225. color: #363531;
  226. }
  227. .level {
  228. margin-left: 12rpx;
  229. .level-text {
  230. width: 80rpx;
  231. height: 36rpx;
  232. padding: 6rpx 12rpx 6rpx 20rpx;
  233. background: linear-gradient(130deg, #FFB873 0%, #FEC287 0%, #E69349 100%);
  234. border-radius: 0rpx 18rpx 18rpx 0rpx;
  235. font-weight: 500;
  236. font-size: 24rpx;
  237. color: #FFFFFF;
  238. line-height: 24rpx;
  239. margin-left: -12rpx;
  240. // text-align: left;
  241. }
  242. }
  243. }
  244. }
  245. .phone {
  246. font-weight: 400;
  247. font-size: 28rpx;
  248. color: #989897;
  249. }
  250. }
  251. .news-total {
  252. margin-top: 44rpx;
  253. .item-num {
  254. font-weight: bold;
  255. font-size: 40rpx;
  256. color: #363531;
  257. }
  258. .orange {
  259. color: #FF6400;
  260. }
  261. .item-text {
  262. font-weight: 400;
  263. font-size: 28rpx;
  264. color: #9598A6;
  265. }
  266. }
  267. }
  268. .performance{
  269. background: #fff;
  270. padding: 32rpx 32rpx 52rpx;
  271. box-shadow: 0rpx 4rpx 12rpx 0rpx #EBECF1;
  272. border-radius: 24rpx;
  273. margin-top: 22rpx;
  274. .per-top{
  275. .right{
  276. // width: 112rpx;
  277. // height: 48rpx;
  278. background: #FFD370;
  279. border-radius: 8rpx;
  280. font-weight: 500;
  281. font-size: 28rpx;
  282. color: #2A200A;
  283. line-height: 48rpx;
  284. padding: 0 16rpx;
  285. white-space: nowrap;
  286. }
  287. }
  288. .per-con{
  289. margin-top: 44rpx;
  290. flex-wrap: wrap;
  291. .con-item{
  292. width: 50%;
  293. .con-new{
  294. margin-left: 20rpx;
  295. .new-text{
  296. font-weight: 400;
  297. font-size: 28rpx;
  298. color: #9598A6;
  299. }
  300. .new-num{
  301. margin-top: 20rpx;
  302. font-weight: bold;
  303. font-size: 40rpx;
  304. color: #363531;
  305. line-height: 40rpx;
  306. }
  307. }
  308. }
  309. .con-btom{
  310. margin-top: 44rpx;
  311. }
  312. }
  313. }
  314. .grade{
  315. padding: 32rpx;
  316. background: linear-gradient( 135deg, #FFDFDF 0%, #FFE4A4 100%);
  317. border-radius: 24rpx;
  318. margin-top: 22rpx;
  319. .left_dec{
  320. margin-bottom: 28rpx;
  321. }
  322. }
  323. }
  324. }
  325. </style>