index.vue 5.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204
  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. ></van-calendar>
  71. </div>
  72. </template>
  73. <script>
  74. import {agentUserList} from "../../../requests/agent";
  75. var $this
  76. export default {
  77. name: "agent_customer_container",
  78. components: {},
  79. data() {
  80. return {
  81. //筛选列表
  82. filter_list: [
  83. {
  84. id: 1,
  85. name: "全部"
  86. },
  87. {
  88. id: 2,
  89. name: "今日"
  90. },
  91. {
  92. id: 3,
  93. name: "昨日"
  94. },
  95. {
  96. id: 4,
  97. name: "近七日"
  98. }
  99. ],
  100. // 筛选选中项
  101. filter_action: 1,
  102. userinfo: {
  103. //累计收益
  104. profit: 16824.50,
  105. //含待结算
  106. unsettle_account: 65.00,
  107. },
  108. //客户数量
  109. customer_count: 3,
  110. calendar_show: false,
  111. start_time: "",
  112. end_time: "",
  113. filter_date: "",
  114. //最小日期应该为用户使用的第一个月开始
  115. min_date: false,
  116. //客户类型
  117. customer_types: [
  118. {
  119. id: 1,
  120. name: "全部客户"
  121. },
  122. {
  123. id: 2,
  124. name: "一级客户"
  125. },
  126. {
  127. id: 3,
  128. name: "二级客户"
  129. },
  130. ],
  131. user_list: [],
  132. customer_type_action: 1
  133. }
  134. },
  135. methods: {
  136. //修改筛选时间
  137. change_filter($id) {
  138. $this.filter_date = ""
  139. $this.filter_action = $id
  140. },
  141. // 自定义筛选时间
  142. show_datetime_picker() {
  143. $this.filter_action = 0
  144. $this.calendar_show = true
  145. },
  146. // 关闭日历选择
  147. do_calendar_close() {
  148. $this.calendar_show = false
  149. },
  150. formatDate(date) {
  151. date = new Date(date);
  152. return `${date.getMonth() + 1}/${date.getDate()}`;
  153. },
  154. // 选择日历后
  155. do_calendar_confirm($event) {
  156. let [start, end] = $event.mp.detail;
  157. $this.filter_date = $this.formatDate(start) + '-' + $this.formatDate(end)
  158. $this.start_time = Math.round(new Date(start).getTime() / 1000)
  159. $this.end_time = Math.round(new Date(end).getTime() / 1000)
  160. $this.calendar_show = false
  161. },
  162. // 切换客户类型筛选
  163. toggle_type($id) {
  164. $this.customer_type_action = $id
  165. //根据类型获取用户列表
  166. $this.get_user_list($id - 1)
  167. },
  168. get_user_list($type) {
  169. let $params = {}
  170. if ($type) {
  171. $params['type'] = $type
  172. }
  173. agentUserList($params).then((res) => {
  174. let $data = res.data;
  175. $this.user_list = $data.data
  176. $this.customer_count = $this.user_list.length
  177. })
  178. }
  179. },
  180. mounted() {
  181. $this.min_date = new Date(2020, 1, 1).getTime()
  182. },
  183. created() {
  184. $this = this
  185. }
  186. }
  187. </script>
  188. <style scoped>
  189. @import "index.css";
  190. </style>