brow-user.vue 6.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311
  1. <template>
  2. <view class="user">
  3. <view class="tabs flexA">
  4. <view @click="dateTab('yesterday')" :class="params.cycle == 'yesterday' ? 'active_tab' : ''">昨日</view>
  5. <view @click="dateTab('today')" :class="params.cycle == 'today' ? 'active_tab' : ''">今日</view>
  6. <view @click="dateTab('week')" :class="params.cycle == 'week' ? 'active_tab' : ''">本周</view>
  7. <view @click="dateTab('month')" :class="params.cycle == 'month' ? 'active_tab' : ''">本月</view>
  8. <view @click="dateTab('all')" :class="params.cycle == 'all' ? 'active_tab' : ''">全部</view>
  9. </view>
  10. <view class="user_data">
  11. <view class="data_title">
  12. <view>浏览人数:</view>
  13. <text>{{userData.count||0}}</text>
  14. </view>
  15. <view class="cap_chart">
  16. <area-chart :chartData="chartData" />
  17. </view>
  18. </view>
  19. <view class="block"></view>
  20. <view class="user_con">
  21. <view class="user_title">
  22. 客户信息
  23. </view>
  24. <view class="user_list">
  25. <view class="list_con flexS" v-for="item in userList" :key="item.id">
  26. <image :src="item.user.avatar" class="avatar" v-if="item.user"></image>
  27. <view class="user_name">
  28. <view v-if="item.user">{{ item.user.nickname | getName(10) }}</view>
  29. <text>{{item.created_at}}</text>
  30. </view>
  31. </view>
  32. </view>
  33. <view class="noData" v-if="userList.length==0">
  34. <image src="/static/imgs/default/no_card.png" mode=""></image>
  35. <view>--暂无数据--</view>
  36. </view>
  37. </view>
  38. </view>
  39. </template>
  40. <script>
  41. import areaChart from '../../components/charts/area-chart.vue';
  42. import {
  43. getseeUser,
  44. getSeeUserList
  45. } from '@/apis/shop.js';
  46. export default {
  47. data() {
  48. return {
  49. userData: '', //用户数据信息
  50. userList: '', //用户列表
  51. params: {
  52. cycle: 'all',
  53. page_index: 1,
  54. page_size: 5
  55. },
  56. chartData: {}, //曲线图数据
  57. totalPage: 0,
  58. };
  59. },
  60. components: {
  61. areaChart
  62. },
  63. onShow() {
  64. this.getData();
  65. this.getList();
  66. },
  67. onReachBottom() {
  68. this.getMoreList();
  69. },
  70. methods: {
  71. //切换销售数据中的
  72. dateTab(cycle) {
  73. this.params.cycle = cycle;
  74. this.params.page_index = 1;
  75. this.getData();
  76. this.getList();
  77. },
  78. //跳转到完善用户信息
  79. skipUser(user_id) {
  80. uni.navigateTo({
  81. url: '../complete-info/complete-info?user_id=' + user_id
  82. });
  83. },
  84. /*跳转到用户订单*/
  85. skipOrder(item) {
  86. uni.navigateTo({
  87. url: `../order-manage/order-manage?user_id=${item.user_id}&&nickname=${item.user.nickname}`
  88. });
  89. },
  90. //获取用户总数据及曲线图
  91. async getData() {
  92. // this.chartData = {}
  93. const res = await getseeUser({
  94. cycle: this.params.cycle
  95. });
  96. try {
  97. const {
  98. code,
  99. data
  100. } = res;
  101. if (code === 200) {
  102. this.userData = data;
  103. let line = data.line;
  104. let x = [];
  105. let y = [];
  106. for (let k in line) {
  107. y.push(line[k])
  108. if (this.params.cycle != 'all') {
  109. let index = k.indexOf('\-');
  110. k = k.substring(index + 1, k.length);
  111. }
  112. x.push(k)
  113. }
  114. this.chartData = {
  115. categories: x,
  116. series: [{
  117. name: '数量',
  118. data: y
  119. }]
  120. };
  121. } else {
  122. uni.showModal({
  123. content: data || '获取数据失败',
  124. showCancel: false
  125. })
  126. }
  127. } catch (e) {
  128. uni.showModal({
  129. content: e || '获取数据失败',
  130. showCancel: false
  131. })
  132. }
  133. },
  134. //获取用户列表
  135. async getList(isMore) {
  136. uni.showLoading({
  137. title: '加载中...'
  138. })
  139. const res = await getSeeUserList(this.params);
  140. try {
  141. const {
  142. code,
  143. data
  144. } = res;
  145. if (code === 200) {
  146. this.userList = isMore ? this.userList.concat(data.list) : data.list;
  147. this.totalPage = Math.ceil(data.total / this.params.page_size);
  148. } else {
  149. uni.showModal({
  150. content: data || '获取数据失败',
  151. showCancel: false
  152. })
  153. }
  154. uni.hideLoading()
  155. } catch (e) {
  156. uni.showModal({
  157. content: e || '获取数据失败',
  158. showCancel: false
  159. })
  160. uni.hideLoading()
  161. }
  162. },
  163. /*获取更多扫码用户*/
  164. getMoreList() {
  165. if (this.params.page_index >= this.totalPage) {
  166. uni.showToast({
  167. title: '没有更多啦~',
  168. icon: 'none'
  169. });
  170. return false;
  171. }
  172. this.params.page_index++;
  173. this.getList(true)
  174. }
  175. }
  176. };
  177. </script>
  178. <!-- <style>
  179. page {
  180. width: 100%;
  181. min-height: 100%;
  182. background: #F9F9FB;
  183. }
  184. </style> -->
  185. <style lang="scss">
  186. .cap_chart {
  187. height: 300px;
  188. margin-top: 30rpx;
  189. width: 100%;
  190. overflow: hidden;
  191. z-index: 99
  192. }
  193. .user {
  194. padding-bottom: 100rpx;
  195. .search_box {
  196. width: 690rpx;
  197. margin: 0 auto;
  198. height: 100rpx;
  199. padding: 5rpx 0;
  200. .search_inp {
  201. margin: 0 auto;
  202. border: 2rpx solid #ccc;
  203. height: 80rpx;
  204. padding: 0 20rpx;
  205. box-sizing: border-box;
  206. border-radius: 44rpx;
  207. input {
  208. width: 80%;
  209. height: 80rpx;
  210. line-height: 80rpx;
  211. }
  212. .iconfont {
  213. color: #999;
  214. font-size: 40rpx;
  215. }
  216. }
  217. }
  218. .tabs {
  219. padding: 0 30rpx;
  220. margin: 30rpx 0;
  221. box-sizing: border-box;
  222. .active_tab {
  223. background: linear-gradient(95deg, #ff232c 0%, #ff571b 100%);
  224. color: #fff;
  225. border: none;
  226. }
  227. view {
  228. width: 120rpx;
  229. text-align: center;
  230. height: 60rpx;
  231. line-height: 60rpx;
  232. border-radius: 32rpx;
  233. border: 2rpx solid #999999;
  234. color: #999;
  235. }
  236. }
  237. .user_data {
  238. padding: 15rpx 0;
  239. .data_title {
  240. width: 690rpx;
  241. margin: 0 auto;
  242. display: flex;
  243. justify-content: flex-start;
  244. align-items: flex-end;
  245. view {
  246. font-size: 28rpx;
  247. font-weight: bold;
  248. }
  249. text {
  250. color: $base-color;
  251. font-size: 60rpx;
  252. font-weight: bold;
  253. }
  254. }
  255. }
  256. .user_con {
  257. width: 690rpx;
  258. margin: 0 auto;
  259. .user_title {
  260. font-size: 36rpx;
  261. font-weight: bold;
  262. height: 100rpx;
  263. line-height: 100rpx;
  264. }
  265. .user_list {
  266. .list_con {
  267. width: 100%;
  268. padding: 10rpx 0;
  269. box-sizing: border-box;
  270. .avatar {
  271. width: 68rpx;
  272. height: 68rpx;
  273. border-radius: 50%;
  274. margin-right: 20rpx;
  275. }
  276. .user_name {
  277. view {
  278. font-size: 32rpx;
  279. margin-bottom: 10rpx;
  280. }
  281. text {
  282. font-size: 28rpx;
  283. color: #999;
  284. }
  285. }
  286. }
  287. }
  288. }
  289. }
  290. </style>