summary.vue 12 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335
  1. <template>
  2. <app-layout>
  3. <view class="header">
  4. <view class="date-group">
  5. <view class="date">
  6. <picker mode="date" :value="startDate" @change="startDateChange">
  7. <view>{{startDate}}</view>
  8. </picker>
  9. </view>
  10. <text>至</text>
  11. <view class="date">
  12. <picker mode="date" :value="endDate" @change="endDateChange">
  13. <view>{{endDate}}</view>
  14. </picker>
  15. </view>
  16. </view>
  17. <view @click="search" :class="getTheme+' '+getTheme+`-m-back`" class="summary-btn" >统计</view>
  18. </view>
  19. <view class="tabs">
  20. <view :class="tabIndex==index?'active '+`${getTheme} ${getTheme}-m-back`:`${getTheme} ${getTheme}-m-back`"
  21. class="tab" v-for="(item,index) in tabs" :key="index" @click="changeTab(index)">
  22. {{item.name}}
  23. </view>
  24. </view>
  25. <view class="content">
  26. <view class="list-item" v-for="(item,index) in tabs[tabIndex]['listItem']" :key="index">
  27. <text>{{item.name}}</text>
  28. <text>{{item.value}}</text>
  29. </view>
  30. </view>
  31. <view class="desc" @click="showDesc = !showDesc">
  32. <text>{{tabs[tabIndex].name}}说明</text>
  33. <image src="../../../static/image/icon/arrow-right.png"></image>
  34. </view>
  35. <view v-if="showDesc" class="show-desc">
  36. <view class="main">
  37. <image class="close" src="../../../static/image/icon/close.png" @click="showDesc = !showDesc"></image>
  38. <view class="title">{{tabs[tabIndex].name}}说明</view>
  39. <view class="desc-con">{{tabs[tabIndex].desc}}</view>
  40. </view>
  41. </view>
  42. </app-layout>
  43. </template>
  44. <script>
  45. import { mapState,mapGetters } from "vuex";
  46. export default {
  47. data(){
  48. return {
  49. showDesc:'',
  50. tabIndex: 0,
  51. date: this.getDate({
  52. format: true
  53. }),
  54. startDate:this.getDate('start'),
  55. endDate:this.getDate('end'),
  56. tabs:[
  57. {
  58. name: '人数',
  59. value: 1,
  60. desc:'新增顾客是指自己发展客户和团队代理发展顾客;新增代理是指自己团队的代理数;团队人数是指截止结束日期团队代理的总数。',
  61. listItem:[
  62. {
  63. key: 'newCustomer',
  64. name: '新增顾客',
  65. value: 0,
  66. },
  67. {
  68. key: 'newShare',
  69. name: '新增代理',
  70. value: 0,
  71. },
  72. {
  73. key: 'myTeam',
  74. name: '团队人数',
  75. value: 0,
  76. }
  77. ],
  78. },
  79. {
  80. name: '业绩',
  81. value: 2,
  82. desc:'个人业绩是指个人购买+个人顾客购买;团队业绩是指(自己购买+自己顾客购买)+(代理B购买+代理B顾客购买)+(代理C购买+代理c顾客购买);总业绩是指筛选结束日起,总共有多少团队业绩',
  83. listItem:[
  84. {
  85. key: 'selfPerformance',
  86. name: '个人业绩',
  87. value: 0,
  88. },
  89. {
  90. key: 'teamPerformance',
  91. name: '团队业绩',
  92. value: 0,
  93. },
  94. {
  95. key: 'totalPerformance',
  96. name: '总共业绩',
  97. value: 0,
  98. }
  99. ],
  100. },
  101. {
  102. name: '销量',
  103. value: 3,
  104. desc:'个人销量是指个人购买+个人顾客购买;团队销量是指(自己购买+自己顾客购买)+(代理B购买+代理B顾客购买)+(代理C购买+代理c顾客购买);总销量是指筛选结束日起,总共有多少团队销量',
  105. listItem:[
  106. {
  107. key: 'selfSale',
  108. name: '个人销量',
  109. value: 0,
  110. },
  111. {
  112. key: 'teamSale',
  113. name: '团队销量',
  114. value: 0,
  115. },
  116. {
  117. key: 'totalSale',
  118. name: '总共销量',
  119. value: 0,
  120. }
  121. ],
  122. },
  123. {
  124. name: '返利',
  125. value: 4,
  126. desc: '个人返利是指(自己购买+自己顾客购买)的返利;团队返利是指自己购买+自己顾客购买)的返利+(代理B购买+代理B顾客购买)的返利+(代理C购买+代理c顾客购买)的返利;总返利是指筛选结束日起,总共有多少团队返利\n',
  127. listItem:[
  128. {
  129. key: 'selfCash',
  130. name: '个人返利',
  131. value: 0,
  132. },
  133. {
  134. key: 'teamCash',
  135. name: '团队返利',
  136. value: 0,
  137. },
  138. {
  139. key: 'totalCash',
  140. name: '总共返利',
  141. value: 0,
  142. }
  143. ],
  144. }
  145. ]
  146. }
  147. },
  148. methods:{
  149. changeTab(index){
  150. this.tabIndex = index
  151. },
  152. search(){
  153. this.$showLoading();
  154. this.$request({
  155. url: this.$api.share.summary,
  156. data: {
  157. startDate: this.startDate,
  158. endDate: this.endDate
  159. }
  160. }).then(response => {
  161. uni.hideLoading();
  162. this.$hideLoading();
  163. if(response.code == 1){
  164. const data = response.data
  165. this.tabs.map(item => {
  166. for (const index in item['listItem']) {
  167. item['listItem'][index]['value'] = data[item['listItem'][index]['key']].toString()
  168. }
  169. })
  170. }
  171. }).catch(() => {
  172. uni.hideLoading();
  173. this.$hideLoading();
  174. })
  175. },
  176. startDateChange(e){
  177. this.startDate = e.detail.value;
  178. },
  179. endDateChange(e){
  180. this.endDate = e.detail.value;
  181. },
  182. getDate(type) {
  183. const date = new Date();
  184. let year = date.getFullYear();
  185. let month = date.getMonth() + 1;
  186. let day = date.getDate();
  187. if (type === 'start') {
  188. const startDate = new Date(date.getTime() - 30 * 24 * 60 * 60 * 1000);
  189. year = startDate.getFullYear();
  190. month = startDate.getMonth() + 1;
  191. day = startDate.getDate();
  192. } else if (type === 'end') {
  193. //return `${year}-${month}-${day}`;
  194. }
  195. month = month > 9 ? month : '0' + month;
  196. day = day > 9 ? day : '0' + day;
  197. return `${year}-${month}-${day}`;
  198. }
  199. },
  200. onLoad(){
  201. this.search()
  202. },
  203. computed: {
  204. ...mapGetters('mallConfig', {
  205. getTheme: 'getTheme',
  206. })
  207. }
  208. }
  209. </script>
  210. <style scoped lang="scss">
  211. $defaultSpace:30rpx;
  212. $borderColor:#ccc;
  213. $defaultColor:#FF3A30;
  214. .header{
  215. display: flex;
  216. align-items: center;
  217. background: white;
  218. padding: $defaultSpace/3 $defaultSpace;
  219. .date-group{
  220. display: flex;
  221. flex: 1;
  222. border-radius: 10rpx;
  223. border: 1rpx solid $borderColor;
  224. height: 80rpx;
  225. align-items: center;
  226. .date{
  227. display: flex;
  228. flex: 1;
  229. align-items: center;
  230. justify-content: center;
  231. }
  232. text{
  233. padding: 0 20rpx;
  234. }
  235. }
  236. .summary-btn{
  237. padding: 0 $defaultSpace;
  238. color: #ffffff;
  239. border-radius: 10rpx;
  240. height: 80rpx;
  241. margin-left: 20rpx;
  242. display: flex;
  243. align-items: center;
  244. justify-content: center;
  245. }
  246. }
  247. .tabs{
  248. display: flex;
  249. align-items: center;
  250. justify-content: center;
  251. margin: $defaultSpace $defaultSpace;
  252. border-radius: 20rpx;
  253. overflow: hidden;
  254. background: white;
  255. .tab{
  256. color: #333333;
  257. border-left: 1rpx solid $borderColor;
  258. display: flex;
  259. flex: 1;
  260. align-items: center;
  261. justify-content: center;
  262. padding: $defaultSpace 0;
  263. &.active{
  264. color: #ffffff;
  265. }
  266. }
  267. }
  268. .content{
  269. background: white;
  270. margin-top: $defaultSpace;
  271. .list-item{
  272. display: flex;
  273. align-items: center;
  274. justify-content: space-between;
  275. padding: $defaultSpace;
  276. border-bottom: 1px solid $borderColor;
  277. color: #666666;
  278. }
  279. }
  280. .desc{
  281. padding: $defaultSpace;
  282. display: flex;
  283. align-items: center;
  284. justify-content: space-between;
  285. background: white;
  286. margin-top: $defaultSpace;
  287. color: #666666;
  288. image{
  289. width: 20rpx;
  290. height: 30rpx;
  291. }
  292. }
  293. .show-desc{
  294. position: fixed;
  295. background: rgba(0,0,0,.3);
  296. top: 0;
  297. left: 0;
  298. width: 100%;
  299. height: 100%;
  300. display: flex;
  301. align-items: center;
  302. justify-content: center;
  303. .main{
  304. width: 90%;
  305. height: 80%;
  306. border-radius: $defaultSpace;
  307. background: white;
  308. position: relative;
  309. .close{
  310. position: absolute;
  311. right: $defaultSpace;
  312. top: $defaultSpace;
  313. border-radius: 50%;
  314. border: 2px solid $borderColor;
  315. width: 40rpx;
  316. height: 40rpx;
  317. }
  318. .title{
  319. color: #666666;
  320. padding: $defaultSpace 20rpx;
  321. }
  322. .desc-con{
  323. padding: $defaultSpace 20rpx;
  324. }
  325. }
  326. }
  327. </style>