index.vue 7.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268
  1. <template>
  2. <div id="agent_customer_container">
  3. <!-- 筛选模块-->
  4. <div class="filter_container margin-xs flex">
  5. <view class='cu-tag round padding' v-for="(filter,index) in filter_list" :key="index"
  6. :class="{'bg-orange':filter_action==filter.id,'bg-white':filter_action != filter.id}"
  7. @click="change_filter(filter.id)"
  8. >
  9. {{ filter.name }}
  10. </view>
  11. <button class="cu-btn" @click="show_datetime_picker">自定义时间
  12. <text class="cuIcon-unfold"></text>
  13. </button>
  14. </div>
  15. <!-- 收益模块-->
  16. <div class="profit_container">
  17. <van-row>
  18. <van-col span="8" v-for="(type,index) in customer_types" :key="index"
  19. @click="toggle_type(type.id)"
  20. >
  21. <div class="bg " :class="[type.id == customer_type_action?'bg_action':'bg_normal']">
  22. <view class="padding-top-lg">
  23. <text>{{ type.name }}</text>
  24. </view>
  25. </div>
  26. </van-col>
  27. </van-row>
  28. <view>
  29. </view>
  30. </div>
  31. <!-- 小title-->
  32. <div class="line_container padding">
  33. <div>
  34. <text class="text-sm text-gray">{{ customer_count }}个客户</text>
  35. <van-divider customStyle="border:.1px solid;margin:0px;"/>
  36. </div>
  37. </div>
  38. <!-- 列表-->
  39. <view class="solid-bottom padding-lr-sm" v-for="(user,index) in user_list" :key="index">
  40. <van-card>
  41. <view slot="thumb" class="cu-avatar lg round margin-left"
  42. style="background-image:url(https://img.shuimuai.com/web/icon_dingdan.png);"></view>
  43. <view slot="title" class="flex justify-between">
  44. <view>
  45. <text class="text-sm">{{ user.user_name }}</text>
  46. </view>
  47. <view>
  48. <text class="text-normal">最后下单时间&emsp;</text>
  49. <text class="text-gray text-sm">2018/09/24 10:44</text>
  50. </view>
  51. </view>
  52. <view slot="num" class="flex justify-end">
  53. <view>
  54. <text class="text-normal text-sm margin-right-lg">成交额</text>
  55. <text class="text-xxl">{{ user.price_total }}</text>
  56. </view>
  57. </view>
  58. <view slot="price">
  59. <view>
  60. <text class="text-normal text-sm">订单数 {{ user.count }}</text>
  61. </view>
  62. </view>
  63. </van-card>
  64. </view>
  65. <van-calendar
  66. :show="calendar_show"
  67. type="range"
  68. @close="do_calendar_close"
  69. @confirm="do_calendar_confirm"
  70. :min-date="min_date"
  71. :max-date="max_date"
  72. ></van-calendar>
  73. <van-toast id="van-toast"/>
  74. </div>
  75. </template>
  76. <script>
  77. import {agentUserList} from "../../../requests/agent";
  78. import Toast from '../../../../static/vant/toast/toast'
  79. var $this
  80. export default {
  81. name: "agent_customer_container",
  82. components: {},
  83. data() {
  84. return {
  85. //筛选列表
  86. filter_list: [
  87. {
  88. id: 1,
  89. name: "全部"
  90. },
  91. {
  92. id: 2,
  93. name: "今日",
  94. start_time: Math.round(new Date(new Date(new Date().toLocaleDateString()).getTime()).getTime() / 1000),
  95. end_time: Math.round(new Date(new Date(new Date().toLocaleDateString()).getTime() + 24 * 60 * 60 * 1000 - 1).getTime() / 1000)
  96. },
  97. {
  98. id: 3,
  99. name: "昨日",
  100. start_time: Math.round(new Date(new Date(new Date().toLocaleDateString()).getTime() - 24 * 60 * 60 * 1000).getTime() / 1000),
  101. end_time: Math.round(new Date(new Date(new Date().toLocaleDateString()).getTime() - 1000).getTime() / 1000)
  102. },
  103. {
  104. id: 4,
  105. name: "近七日",
  106. start_time: Math.round(new Date(new Date(new Date().toLocaleDateString()).getTime() - 7 * 24 * 60 * 60 * 1000).getTime() / 1000),
  107. end_time: Math.round(new Date(new Date(new Date().toLocaleDateString()).getTime() + 24 * 60 * 60 * 1000 - 1).getTime() / 1000)
  108. }
  109. ],
  110. // 筛选选中项
  111. filter_action: 1,
  112. userinfo: {
  113. //累计收益
  114. profit: 16824.50,
  115. //含待结算
  116. unsettle_account: 65.00,
  117. },
  118. //客户数量
  119. customer_count: 0,
  120. calendar_show: false,
  121. start_time: "",
  122. end_time: "",
  123. filter_date: "",
  124. //最小日期应该为用户使用的第一个月开始
  125. min_date: false,
  126. max_date: false,
  127. //客户类型
  128. customer_types: [
  129. {
  130. id: 1,
  131. name: "全部客户"
  132. },
  133. {
  134. id: 2,
  135. name: "一级客户"
  136. },
  137. {
  138. id: 3,
  139. name: "二级客户"
  140. },
  141. ],
  142. user_list: [],
  143. customer_type_action: 1
  144. }
  145. },
  146. methods: {
  147. //修改筛选时间
  148. change_filter($id) {
  149. $this.filter_date = ""
  150. $this.filter_action = $id
  151. $this.filter_list.forEach(($val, $index) => {
  152. if ($val['id'] == $id) {
  153. $this.get_user_list($this.customer_type_action - 1, $val['start_time'], $val['end_time'])
  154. }
  155. })
  156. },
  157. // 自定义筛选时间
  158. show_datetime_picker() {
  159. $this.filter_action = 0
  160. $this.calendar_show = true
  161. },
  162. // 关闭日历选择
  163. do_calendar_close() {
  164. $this.calendar_show = false
  165. },
  166. formatDate(date) {
  167. date = new Date(date);
  168. return `${date.getMonth() + 1}/${date.getDate()}`;
  169. },
  170. // 选择日历后
  171. do_calendar_confirm($event) {
  172. let [start, end] = $event.mp.detail;
  173. $this.filter_date = $this.formatDate(start) + '-' + $this.formatDate(end)
  174. $this.start_time = Math.round(new Date(start).getTime() / 1000)
  175. $this.end_time = Math.round(new Date(new Date(new Date(end).getTime() + 24 * 60 * 60 * 1000 - 1).getTime()).getTime() / 1000)
  176. $this.get_user_list($this.customer_type_action - 1, $this.start_time, $this.end_time)
  177. $this.calendar_show = false
  178. },
  179. // 切换客户类型筛选
  180. toggle_type($id) {
  181. $this.customer_type_action = $id
  182. //根据类型获取用户列表
  183. $this.get_user_list($id - 1)
  184. },
  185. get_user_list($type, $start_time, $end_time) {
  186. Toast.loading({
  187. message: "加载中",
  188. duration: 0
  189. })
  190. let $params = {}
  191. if ($type) {
  192. $params['type'] = $type
  193. }
  194. if ($start_time && $end_time) {
  195. $params['start_time'] = $start_time
  196. $params['end_time'] = $end_time
  197. }
  198. agentUserList($params).then((res) => {
  199. Toast.clear()
  200. let $data = res.data;
  201. $this.user_list = $data.data
  202. $this.customer_count = $this.user_list.length
  203. })
  204. }
  205. },
  206. mounted() {
  207. $this.min_date = new Date(2020, 10, 11).getTime()
  208. $this.max_date = new Date(new Date(new Date().toLocaleDateString()).getTime() + 24 * 60 * 60 * 1000 - 1).getTime()
  209. $this.get_user_list(0, false, false)
  210. },
  211. created() {
  212. $this = this
  213. }
  214. }
  215. </script>
  216. <style scoped>
  217. .text-normal {
  218. color: #6A6A6A;
  219. }
  220. .profit_container {
  221. margin: 30px 0px 0px;
  222. }
  223. .bg_action {
  224. width: 118px;
  225. height: 77px;
  226. background-image: url("https://img.shuimuai.com/web/frame_xuanzhongkehu.png");
  227. font-size: 15px;
  228. font-family: Microsoft YaHei;
  229. font-weight: bold;
  230. color: #FFFFFF;
  231. line-height: 24px;
  232. }
  233. .bg_normal {
  234. font-size: 15px;
  235. font-family: PingFang SC;
  236. font-weight: 400;
  237. color: #6C6C6C;
  238. line-height: 24px;
  239. width: 118px;
  240. height: 68px;
  241. background-image: url("https://img.shuimuai.com/web/frame_weixianzhongkehu.png");
  242. }
  243. .bg {
  244. text-align: center;
  245. background-size: 100% 100%;
  246. background-position: center;
  247. }
  248. </style>