You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 
 

401 lines
8.9 KiB

  1. <template>
  2. <view class="box">
  3. <!-- 顾问选择 -->
  4. <view class="nextcon">
  5. 下一位接待顾问:{{textcdhSKJ}}
  6. </view>
  7. <!-- 搜索筛选顾问 -->
  8. <view class="search-tag">
  9. <u-search v-model="keywords" @search="searchFunc" bgColor="#F8F8F8" shape="round" placeholder="顾问名称"
  10. :showAction="false" :clearabled="true"></u-search>
  11. <view class="tabs-box" v-if="list.length > 0">
  12. <u-tabs :list="list" :current="listCurrent" name="deptName" @change="change"></u-tabs>
  13. </view>
  14. </view>
  15. <view class="content">
  16. <radio-group @change="radioChange">
  17. <view v-for="(item,index) in freeList" :key="index" class="content-tips">
  18. <view class="left">
  19. <view class="img">
  20. {{item.name.slice(0,1)}}
  21. </view>
  22. <view class="text">
  23. <view class="name">
  24. <text class="names">{{item.name}}</text>
  25. <text :class="item.class">{{ item.label }}</text>
  26. </view>
  27. <view class="num">
  28. 今日接待: {{item.todayNum}}
  29. </view>
  30. </view>
  31. </view>
  32. <view class="right">
  33. <radio :value="item.agentId" :checked="index == current" style="transform:scale(0.9)"
  34. color="#2671E2"></radio>
  35. </view>
  36. </view>
  37. </radio-group>
  38. <view class="empty" v-if="freeList.length == 0">
  39. <image class="image" src="@/static/images/customerEmpty.png" mode=""></image>
  40. <view class="tips">
  41. 暂无空闲顾问
  42. </view>
  43. </view>
  44. </view>
  45. <view v-if="freeList.length > 0" class="save" @click="save" :class="{active:chosedAgentId}">
  46. 保存
  47. </view>
  48. <u-modal v-model="show" :mask-close-able="true" :title="'代接待提醒'" :confirm-text="confirmtext"
  49. :cancel-text='canceltext' @cancel="confirmA" @confirm="confirmB" :show-cancel-button='true'
  50. :content="content"></u-modal>
  51. <!-- 加载组件 -->
  52. <loading v-model="LOADING"></loading>
  53. </view>
  54. </template>
  55. <script>
  56. import loading from "@/components/loading/index.vue"
  57. export default {
  58. components: {
  59. loading
  60. },
  61. data() {
  62. return {
  63. customerId: '',
  64. buildingID: '',
  65. freeList: [],
  66. current: null,
  67. chosedAgentId: '',
  68. textcdhSKJ: '',
  69. show: false,
  70. content: '',
  71. confirmtext: '1', //确认文字
  72. canceltext: '2', //取消文字
  73. daitiReceptionobj: {},
  74. replaceReception: 0,
  75. keywords: '', // 关键词
  76. list: [], // 部门列表
  77. listCurrent: 0, //选中分类下标
  78. from: '', // 来源页面需要通知的事件
  79. }
  80. },
  81. onLoad(option) {
  82. this.LOADING = true
  83. if (option.id) this.customerId = option.id;
  84. if (option.from) this.from = option.from
  85. },
  86. async onShow() {
  87. this.buildingID = uni.getStorageSync('buildingID').id;
  88. await this.iniPage()
  89. },
  90. methods: {
  91. change(e) {
  92. console.log(e)
  93. this.keywords = ''
  94. this.listCurrent = Number(e)
  95. this.getFreeList();
  96. },
  97. //
  98. searchFunc() {
  99. this.getFreeList();
  100. },
  101. async iniPage() {
  102. await this.getAllDeptName()
  103. await this.getFreeList();
  104. },
  105. // 获取顾问列表
  106. async getAllDeptName() {
  107. try {
  108. let res = await this.$u.get(`/zkAgentPool/getAllDeptName?itemId=${this.buildingID}`)
  109. console.log(res)
  110. if (res&&res.length>0) {
  111. res.unshift({
  112. id: '',
  113. deptName: '全部'
  114. })
  115. this.list = res
  116. }
  117. } catch(e) {
  118. console.log(e)
  119. }
  120. },
  121. // 获取空闲顾问
  122. async getFreeList() {
  123. try {
  124. let deptId = this.list.length > 0 ? this.list[this.listCurrent].id : ''
  125. // deptId 部门id
  126. // name 顾问名称
  127. let res = await this.$u.get(`/zkAgentPool/freeList?itemId=${this.buildingID}&name=${this.keywords||''}&deptId=${deptId}`)
  128. if (res.length == 0) {
  129. this.freeList = []
  130. } else {
  131. // 回显上次选中的顾问
  132. if (this.from != '' && this.id != '') {
  133. this.current = res.findIndex(item => item.agentId == this.customerId)
  134. }
  135. this.freeList = res;
  136. this.freeList.forEach(item => {
  137. if (item.onLine == 0) {
  138. item.label = "(离线)";
  139. item.class = 'red'
  140. } else if (item.onLine == 1) {
  141. item.label = "(在线)";
  142. item.class = 'gren'
  143. } else {
  144. item.label = "(无设备)";
  145. item.class = 'none'
  146. }
  147. })
  148. this.textcdhSKJ = res[0].name
  149. }
  150. this.LOADING = false
  151. } catch (e) {
  152. this.LOADING = false
  153. }
  154. },
  155. //取消
  156. confirmA() {
  157. if (this.daitiReceptionobj.assign != null) {
  158. this.baochunfun()
  159. } else {
  160. uni.showToast({
  161. icon: "none",
  162. title: "【" + this.daitiReceptionobj.owner.name + "】正在接待中"
  163. })
  164. return;
  165. }
  166. },
  167. // 确认
  168. confirmB() {
  169. this.replaceReception = 1;
  170. this.baochunfun()
  171. },
  172. save() {
  173. console.log(this.chosedAgentId)
  174. if (!this.chosedAgentId) {
  175. uni.showToast({
  176. icon: "none",
  177. title: "未选择指派顾问"
  178. })
  179. return
  180. }
  181. // 如果是从其他页面跳转过来的
  182. if (this.from) {
  183. uni.$emit(this.from, this.chosedAgentId)
  184. uni.navigateBack()
  185. return
  186. }
  187. const that = this;
  188. this.$u.post("customer/daitiReception", {
  189. agentId: that.chosedAgentId,
  190. id: that.customerId
  191. }).then(res => {
  192. if (res.unchecked == 0) {
  193. that.baochunfun()
  194. } else {
  195. if (res.zs == 0) {
  196. that.baochunfun()
  197. } else {
  198. if (res.assign == null && res.replacement == null) {
  199. that.baochunfun()
  200. } else {
  201. if (res.assign == null) {
  202. that.daitiReceptionobj = res;
  203. that.content = "此客户的顾问为【" + res.owner.name + "】,确认让【" + res.replacement.name +
  204. "】代接待吗?"
  205. that.confirmtext = res.replacement.name + "代接待", //确认文字
  206. that.canceltext = res.owner.name + '接待', //取消文字
  207. that.show = true;
  208. } else {
  209. that.daitiReceptionobj = res;
  210. that.content = "此客户的顾问为【" + res.owner.name + "】,确认让【" + res.replacement.name +
  211. "】代接待吗?"
  212. that.confirmtext = res.replacement.name + "代接待", //确认文字
  213. that.canceltext = res.assign.name + '接待', //取消文字
  214. that.show = true;
  215. }
  216. }
  217. }
  218. }
  219. });
  220. },
  221. baochunfun() {
  222. uni.showLoading({
  223. title: "保存中",
  224. mask: true
  225. })
  226. const that = this;
  227. this.$u.post("customer/assign", {
  228. agentId: that.chosedAgentId,
  229. id: that.customerId,
  230. replaceReception: this.replaceReception
  231. }).then(res => {
  232. uni.showToast({
  233. icon: "none",
  234. title: "分配成功"
  235. })
  236. uni.navigateBack();
  237. uni.hideLoading();
  238. });
  239. },
  240. radioChange(evt) {
  241. this.chosedAgentId = '';
  242. this.chosedAgentId = evt.detail.value;
  243. },
  244. }
  245. }
  246. </script>
  247. <style lang="scss" scoped>
  248. .box {
  249. background: #F8F8F8;
  250. width: 100%;
  251. min-height: calc(100vh - var(--window-top));
  252. display: flex;
  253. flex-direction: column;
  254. font-size: 30rpx;
  255. font-weight: 400;
  256. .nextcon {
  257. flex-shrink: 0;
  258. height: 78rpx;
  259. background: #F4F8FD;
  260. color: #2671E2;
  261. text-align: center;
  262. line-height: 78rpx;
  263. }
  264. .search-tag {
  265. margin: 0 0 20rpx 0;
  266. padding: 30rpx 30rpx 0;
  267. background: #fff;
  268. .tabs-box {
  269. background: #fff;
  270. }
  271. }
  272. .content {
  273. flex-grow: 1;
  274. display: flex;
  275. flex-direction: column;
  276. .content-tips {
  277. display: flex;
  278. justify-content: space-between;
  279. background: #fff;
  280. padding: 0 30rpx;
  281. height: 148rpx;
  282. margin-bottom: 20rpx;
  283. .left {
  284. display: flex;
  285. margin-top: 30rpx;
  286. .img {
  287. width: 72rpx;
  288. height: 72rpx;
  289. background: #FFFFFF;
  290. border: 1px solid #C9C9C9;
  291. line-height: 64rpx;
  292. text-align: center;
  293. border-radius: 50%;
  294. margin-right: 20rpx;
  295. }
  296. .text {
  297. .name {
  298. margin-top: 4rpx;
  299. margin-bottom: 24rpx;
  300. line-height: 30rpx;
  301. .names {
  302. font-weight: 600;
  303. color: #333333;
  304. }
  305. .red {
  306. margin-left: 10rpx;
  307. color: #E7483C;
  308. font-size: 28rpx;
  309. }
  310. .gren {
  311. margin-left: 10rpx;
  312. color: #43CD80;
  313. font-size: 28rpx;
  314. }
  315. .none {
  316. margin-left: 10rpx;
  317. color: #999;
  318. font-size: 28rpx;
  319. }
  320. }
  321. }
  322. }
  323. .right {
  324. margin: 54rpx 0;
  325. }
  326. }
  327. .empty {
  328. flex: 1;
  329. display: flex;
  330. flex-direction: column;
  331. justify-content: center;
  332. align-items: center;
  333. .image {
  334. width: 300rpx;
  335. height: 300rpx;
  336. }
  337. .tips {
  338. font-size: 36rpx;
  339. color: #242424;
  340. line-height: 1;
  341. margin-top: 50rpx;
  342. }
  343. }
  344. }
  345. .save {
  346. position: sticky;
  347. bottom: 50rpx;
  348. z-index: 10;
  349. flex-shrink: 0;
  350. margin: 50rpx auto;
  351. width: calc(100vw - 60rpx);
  352. color: #FFFFFF;
  353. font-size: 30rpx;
  354. height: 98rpx;
  355. border-radius: 8rpx;
  356. display: flex;
  357. justify-content: center;
  358. align-items: center;
  359. background: rgba(42, 111, 255, 1);
  360. }
  361. }
  362. </style>