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.
 
 
 

1465 lines
37 KiB

  1. <template>
  2. <view class="box">
  3. <view class="content">
  4. <view class="content-tips" @click="goedit()">
  5. <view class="content-first">
  6. <view class="left">
  7. <view v-if="customerInfo.level.length==0"></view>
  8. <view class="img" v-else-if="customerInfo.level==1">A</view>
  9. <view class="img" v-else-if="customerInfo.level==2">B</view>
  10. <view class="img" v-else-if="customerInfo.level==3">C</view>
  11. <view class="img" v-else-if="customerInfo.level==4">D</view>
  12. <view class="test">{{customerInfo.name || '--'}}</view>
  13. <view class="edit" v-if="isEdit">
  14. <image class="screen-sel-img" src="../../../static/images/edit.png" mode=""></image>
  15. </view>
  16. </view>
  17. <view class="right">
  18. <view class="test"
  19. >销讲执行:<text class="blue"
  20. >{{ customerInfo.fraction || 0 }}%</text
  21. ></view
  22. >
  23. </view>
  24. </view>
  25. <view class="content-sec">
  26. <view class="content-sec-lab">
  27. <view class="content-sec-lab1">
  28. 手机号码:{{customerInfo.phone&&customerInfo.isShow==1?customerInfo.phone.length==11?customerInfo.phone.substr(0, 3) + '****' + customerInfo.phone.substr(7):customerInfo.phone:customerInfo.phone&&customerInfo.isShow!=1?customerInfo.phone: '--'}}
  29. </view>
  30. <view class="content-sec-lab1" style="width: 44%"
  31. >到访次数:{{ customerInfo.visitRecord || "--" }}次/{{
  32. customerInfo.mm || 0
  33. }}min</view
  34. >
  35. </view>
  36. <view class="content-sec-lab">
  37. <view class="content-sec-lab1"
  38. >需求挖掘:{{ customerInfo.wordFraction || 0 }}%</view
  39. >
  40. <view class="content-sec-lab1" @click.stop="tipupon" style="width: 44%"
  41. >画像标签:<text class="look">{{
  42. customerInfo.demand.cusSemanticWordsList.length || 0
  43. }}</text><text class="look1" >查看</text></view
  44. >
  45. </view>
  46. <view class="content-sec-lab">
  47. <view class="content-sec-lab1"
  48. >所属顾问:{{ customerInfo.agentName || "--" }}</view
  49. >
  50. <view class="content-sec-lab1" style="width: 44%"
  51. >客户阶段:{{ customerInfo.agentName || "--" }}</view
  52. >
  53. </view>
  54. <view class="content-sec-lab">
  55. <view class="content-sec-lab1"
  56. >上次到访:{{ customerInfo.createTime || "--" }}</view
  57. >
  58. </view>
  59. <!-- <view class="content-sec-lab" @click.stop="tipupon">
  60. 客户标签:
  61. <text v-if="!customerInfo.demand.cusSemanticWordsList">暂无</text>
  62. <view v-else class="content-sec-tips"
  63. v-for="(che,ind) in customerInfo.demand.cusSemanticWordsList" :key='ind'>{{che.name}}</view>
  64. <view class="conmsg-msg-lab-img" v-if="customerInfo.demand.cusSemanticWordsList.length>0">
  65. <image class="screen-sel-img" src="../../../static/images/right.png" mode=""></image>
  66. </view>
  67. </view> -->
  68. </view>
  69. <view class="content-last">
  70. <view class="content-last-con">
  71. 备注:{{customerInfo.remarks ? customerInfo.remarks : "暂无"}}
  72. </view>
  73. </view>
  74. </view>
  75. </view>
  76. <view class="tabchange">
  77. <view class="tab">
  78. <view class="tabbox">
  79. <view :class="{ activecllasscet: activeTotal == 0 }" @click="tabtimetap(0)">接待记录</view>
  80. </view>
  81. <view class="tabbox">
  82. <view :class="{ activecllasscet: activeTotal == 1 }" @click="tabtimetap(1)">跟进记录</view>
  83. </view>
  84. <view class="tabbox">
  85. <view :class="{ activecllasscet: activeTotal == 2 }" @click="tabtimetap(2)">执行率</view>
  86. </view>
  87. </view>
  88. <!-- 接待记录 -->
  89. <view class="tabactive1" v-if="activeTotal==0" style="min-height: 800rpx;">
  90. <view v-if="Thevisitingrecords.length==0"
  91. style="width: 100%;height: 100%;display: flex;align-items: center;">
  92. <view style="width: 100%;padding-top: 60rpx;">
  93. <view style="width: 100%;text-align: center;">
  94. <image style="width: 220rpx;height: 200rpx;"
  95. src="https://static.quhouse.com/zhikong_xcx_img/nodatalist.png" mode=""></image>
  96. </view>
  97. <view style="text-align: center;width: 100%;margin-top: 20rpx;color: #999999;">暂无数据</view>
  98. </view>
  99. </view>
  100. <view v-if="Thevisitingrecords.length!=0" class="content-tips"
  101. v-for="(item,index) in Thevisitingrecords" :key="index" @click="tapThevisiting(item)">
  102. <view class="content-first">
  103. <view class="left">
  104. <view v-if="item.level.length==0"></view>
  105. <view class="img" v-else-if="item.level==1">A</view>
  106. <view class="img" v-else-if="item.level==2">B</view>
  107. <view class="img" v-else-if="item.level==3">C</view>
  108. <view class="img" v-else-if="item.level==4">D</view>
  109. <view class="name">{{item.agentName || '--'}}</view>
  110. <view class="status" v-if="item.replaceReception==1">代接待</view>
  111. </view>
  112. <!-- <view class="right">
  113. <view class="point"></view>
  114. <view class="">优秀案例</view>
  115. </view> -->
  116. </view>
  117. <view class="content-sec">
  118. <view class="left">
  119. <view class="cus" style="line-height: 46rpx;">客户:{{item.name || ''}} |</view>
  120. <view style="line-height: 46rpx;" class="arriveNum">{{item.visitRecord || '--'}}次到访</view>
  121. </view>
  122. <view class="right">{{item.fraction || '0'}}%</view>
  123. </view>
  124. <view class="content-last">{{item.createTime}} | {{item.mm || '--'}}min</view>
  125. </view>
  126. </view>
  127. <!-- 跟进记录 -->
  128. <view class="tabactive2" v-if="activeTotal==1" style="min-height: 600rpx;">
  129. <view v-if="fllowList.length==0"
  130. style="width: 100%;height:600rpx;display: flex;align-items: center;background-color: #FFFFFF;">
  131. <view style="width: 100%;padding-top: 60rpx;">
  132. <view style="width: 100%;text-align: center;">
  133. <image style="width: 220rpx;height: 200rpx;"
  134. src="https://static.quhouse.com/zhikong_xcx_img/nodatalist.png" mode=""></image>
  135. </view>
  136. <view style="text-align: center;width: 100%;margin-top: 20rpx;color: #999999;">暂无数据</view>
  137. </view>
  138. </view>
  139. <view v-if="fllowList.length!=0" class="tab2-tips" v-for="(item,index) in fllowList" :key="index">
  140. <view class="tab2-first">
  141. <view class="tab2-first-1">
  142. <view class="tab2-first-left">
  143. <view class="img">{{item.agentName.slice(0,1) || '--'}}</view>
  144. <view class="name">{{item.agentName || '||'}}</view>
  145. </view>
  146. <view class="tab2-first-right">{{item.createTime}}</view>
  147. </view>
  148. <view class="tab2-first-foot">跟进内容:{{item.remarks || '暂无'}}</view>
  149. </view>
  150. <!-- <view class="tab2-sec">
  151. <view class="tab-sec-edit">编辑记录</view>
  152. </view> -->
  153. </view>
  154. </view>
  155. <!-- 评分 -->
  156. <view class="ratecenter" v-if="activeTotal==2">
  157. <view class="my-tab">
  158. <view class="tab-item" :class="tabactive==0?'tabactive':''" @click="tabactive=0">销讲执行率</view>
  159. <view class="tab-item" :class="tabactive==1?'tabactive':''" @click="tabactive=1">需求挖掘执行率</view>
  160. </view>
  161. <view class="xiaojiang" v-if="tabactive==0">
  162. <view class="ratetetle">执行总览</view>
  163. <view class="rateyuanbox">
  164. <view class="rateyuanboxzuo">
  165. <view class="boxzuoview cccccc">{{customerInfo.visitRecord || '--'}}次</view>
  166. <view style="color: #333333;font-size: 28rpx;font-weight: 400;text-align: center;">接待次数</view>
  167. </view>
  168. <view class="rateyuanboxyou">
  169. <view class="boxzuoview" style="width: 100%;display: flex;justify-content: center;">
  170. <u-circle-progress active-color="#4FC78F" width='139' :percent="customerInfo.fraction">
  171. <view style="text-align: center;color: #4FC78F;">{{customerInfo.fraction}}%</view>
  172. </u-circle-progress>
  173. </view>
  174. <view style="color: #333333;font-size: 28rpx;font-weight: 400;text-align: center;">销讲执行率</view>
  175. </view>
  176. <view class="rateyuanboxzuo">
  177. <view class="boxzuoview cccccc">{{customerInfo.mm}}min</view>
  178. <view style="color: #333333;font-size: 28rpx;font-weight: 400;text-align: center;">接待时长</view>
  179. </view>
  180. </view>
  181. <view
  182. style="width: 100%;height: 80rpx;border-bottom: 1rpx solid #E0E0E0;display: flex;align-items: center;">
  183. <view style="flex: 1;font-size: 28rpx;color: #333333;font-weight: 600;text-indent: 20rpx;">指标</view>
  184. <view style="flex: 1;font-size: 28rpx;color: #333333;font-weight: 600;text-indent: 170rpx;">执行率
  185. </view>
  186. </view>
  187. <view v-if="ratelist.length==0" style="width: 100%;height: 100%;display: flex;align-items: center;">
  188. <view style="width: 100%;padding-top: 60rpx;">
  189. <view style="width: 100%;text-align: center;">
  190. <image style="width: 220rpx;height: 200rpx;"
  191. src="https://static.quhouse.com/zhikong_xcx_img/nodatalist.png" mode=""></image>
  192. </view>
  193. <view style="text-align: center;width: 100%;margin-top: 20rpx;color: #999999;">暂无数据</view>
  194. </view>
  195. </view>
  196. <view class="Level-box" v-if="ratelist.length!=0" v-for="(item,index) in ratelist" :key="index">
  197. <view class="Level1che" @click="changeshow(item,1)">
  198. <view class="title1">{{item.name}}</view>
  199. <view class="leve1-jindu">
  200. <view class="jindutiao">
  201. <view class="huanxing" :style="{width: item.ratepercent/item.rate*100+'%'}"></view>
  202. <view class="text">{{((item.ratepercent/item.rate).toFixed(2)*100).toFixed()}}%</view>
  203. </view>
  204. </view>
  205. <view class="jiantobox">
  206. <image v-if="!item.show" class="arrow rotatearrow" src="/static/images/down.png" mode="" />
  207. <image v-else class="arrow" src="/static/images/up.png" mode="" />
  208. </view>
  209. </view>
  210. <view class="hhhbox" v-if="item.show" v-for="(subitem,i) in item.children" :key="i">
  211. <view class="Level2che" @click="changeshow2(subitem,1)">
  212. <view class="title1 u-line-1">{{subitem.name}}</view>
  213. <view class="leve1-jindu">
  214. <view class="zhixing" v-if="!subitem.selected">已执行</view>
  215. <view class="zhixing2" v-else>未执行</view>
  216. </view>
  217. <view class="jiantobox">
  218. <image v-if="!subitem.show" class="arrow rotatearrow" src="/static/images/down.png"
  219. mode="" />
  220. <image v-else class="arrow" src="/static/images/up.png" mode="" />
  221. </view>
  222. </view>
  223. <view class="hsnrtest" v-if="subitem.show">话术内容</view>
  224. <view class="Level3che" @tap="clickaudeopal(che)" v-if="subitem.show"
  225. v-for="(che,inc) in subitem.children" :key='inc'>
  226. <view class="title1">{{inc+1}}.{{che.name}}</view>
  227. <view class="jiantobox">
  228. <image v-if="che.selected==0" class="arrow" src="/static/images/rate-checked.png"
  229. mode="" />
  230. <image v-if="che.selected==1" class="arrow" src="/static/images/rate-nocheck.png"
  231. mode="" />
  232. </view>
  233. </view>
  234. <view v-if="subitem.show" style="width: 100%;height: 30rpx;"></view>
  235. </view>
  236. </view>
  237. </view>
  238. <view class="xuqiu" v-if="tabactive==1">
  239. <view class="ratetetle">执行总览</view>
  240. <view class="rateyuanbox">
  241. <view class="rateyuanboxzuo">
  242. <view class="boxzuoview cccccc">{{customerInfo.visitRecord || '--'}}次</view>
  243. <view style="color: #333333;font-size: 28rpx;font-weight: 400;text-align: center;">到访次数</view>
  244. </view>
  245. <view class="rateyuanboxyou">
  246. <view class="boxzuoview" style="width: 100%;display: flex;justify-content: center;">
  247. <u-circle-progress active-color="#4FC78F" width='139' :percent="customerInfo.wordFraction||0">
  248. <view style="text-align: center;color: #4FC78F;">{{customerInfo.wordFraction||0}}%</view>
  249. </u-circle-progress>
  250. </view>
  251. <view style="color: #333333;font-size: 28rpx;font-weight: 400;text-align: center;">需求挖掘执行率</view>
  252. </view>
  253. <view class="rateyuanboxzuo">
  254. <view class="boxzuoview cccccc">{{customerInfo.mm}}min</view>
  255. <view style="color: #333333;font-size: 28rpx;font-weight: 400;text-align: center;">接待时长</view>
  256. </view>
  257. </view>
  258. <view
  259. style="width: 100%;height: 80rpx;border-bottom: 1rpx solid #E0E0E0;display: flex;align-items: center;">
  260. <view style="flex: 1;font-size: 28rpx;color: #333333;font-weight: 600;text-indent: 20rpx;">指标</view>
  261. <view style="flex: 1;font-size: 28rpx;color: #333333;font-weight: 600;text-indent: 170rpx;">执行率
  262. </view>
  263. </view>
  264. <!-- 暂无数据 -->
  265. <view v-if="KeyWordsfractionList.length==0" style="width: 100%;height: 100%;display: flex;align-items: center;">
  266. <view style="width: 100%;padding-top: 60rpx;">
  267. <view style="width: 100%;text-align: center;">
  268. <image style="width: 220rpx;height: 200rpx;"
  269. src="https://static.quhouse.com/zhikong_xcx_img/nodatalist.png" mode=""></image>
  270. </view>
  271. <view style="text-align: center;width: 100%;margin-top: 20rpx;color: #999999;">暂无数据</view>
  272. </view>
  273. </view>
  274. <!-- 挖掘执行话术展示 -->
  275. <view class="Level-box" v-else v-for="(item,index) in KeyWordsfractionList" :key="index">
  276. <view class="Level1che" @click="changeshowlevel1(item,1)">
  277. <view class="title1">{{item.name}}</view>
  278. <view class="leve1-jindu">
  279. <view class="jindutiao">
  280. <view class="huanxing" v-if="item.selected==0" :style="{width: item.fraction+'%'}"></view>
  281. <view class="huanxing" v-else style="width: 0"></view>
  282. <view class="text">{{item.selected==0?item.fraction:0}}%</view>
  283. </view>
  284. </view>
  285. <view class="jiantobox">
  286. <image v-if="!item.show" class="arrow rotatearrow" src="/static/images/down.png" mode="" />
  287. <image v-else class="arrow" src="/static/images/up.png" mode="" />
  288. </view>
  289. </view>
  290. <!-- 话术在一级下 -->
  291. <view v-if="item.showLevel==1">
  292. <view class="hhhbox" v-if="item.show" style="padding: 30rpx;">
  293. <view class="hsnrtest">话术内容</view>
  294. <view class="Level3che"
  295. v-for="(che,inc) in item.questionList" :key='inc'>
  296. <view class="title1">{{inc+1}}.{{che.question}}</view>
  297. <view class="jiantobox">
  298. <image v-if="che.selected==0" class="arrow" src="/static/images/rate-checked.png"
  299. mode="" />
  300. <image v-else class="arrow" src="/static/images/rate-nocheck.png"
  301. mode="" />
  302. </view>
  303. </view>
  304. </view>
  305. </view>
  306. <!-- 话术在二级下 -->
  307. <view v-if="item.showLevel==2">
  308. <view class="hhhbox" v-if="item.show" v-for="(subitem,i) in item.children" :key="i">
  309. <view class="Level2che" @click="changeshow2(subitem,1)">
  310. <view class="title1 u-line-1">{{subitem.name}}</view>
  311. <view class="leve1-jindu">
  312. <view class="zhixing" v-if="!subitem.selected">已执行</view>
  313. <view class="zhixing2" v-else>未执行</view>
  314. </view>
  315. <view class="jiantobox">
  316. <image v-if="!subitem.show" class="arrow rotatearrow" src="/static/images/down.png"
  317. mode="" />
  318. <image v-else class="arrow" src="/static/images/up.png" mode="" />
  319. </view>
  320. </view>
  321. <view v-if="subitem.show" style="padding: 30rpx 0;">
  322. <view class="hsnrtest">话术内容</view>
  323. <view class="Level3che"
  324. v-for="(che,inc) in subitem.questionList" :key='inc'>
  325. <view class="title1">{{inc+1}}.{{che.question}}</view>
  326. <view class="jiantobox">
  327. <image v-if="che.selected==0" class="arrow" src="/static/images/rate-checked.png"
  328. mode="" />
  329. <image v-else class="arrow" src="/static/images/rate-nocheck.png"
  330. mode="" />
  331. </view>
  332. </view>
  333. </view>
  334. </view>
  335. </view>
  336. </view>
  337. </view>
  338. </view>
  339. </view>
  340. <view class="pon-foot" v-if="buttonisshow">
  341. <view class="foot-tab" @click="goRemind">添加提醒</view>
  342. <!-- <view class="foot-tab">拨打电话</view> -->
  343. <view class="foot-tab" @click="followRecordAdd()">写跟进</view>
  344. </view>
  345. <!-- closeable -->
  346. <u-popup v-model="tipshow" mode="center" mask-close-able width="560rpx" border-radius="14">
  347. <scroll-view scroll-y="true" style="height: 440rpx;">
  348. <view style="display: flex; flex-wrap: wrap; padding:20rpx;">
  349. <view class="upon-sec-tips" v-for="(item,index) in customerInfo.demand.cusSemanticWords"
  350. :key="index">
  351. {{item.name}}
  352. </view>
  353. </view>
  354. </scroll-view>
  355. </u-popup>
  356. <!-- 加载组件 -->
  357. <loading v-model="LOADING"></loading>
  358. </view>
  359. </template>
  360. <script>
  361. import loading from "@/components/loading/index.vue"
  362. export default {
  363. components: {
  364. loading
  365. },
  366. data() {
  367. return {
  368. tabactive: 0,
  369. activeTotal: 0,
  370. customerId: '',
  371. tipshow: false,
  372. customerInfo: {
  373. name: '',
  374. createTime: '',
  375. agentName: ''
  376. },
  377. Thevisitingrecords: [],
  378. totalRate: [],
  379. ratelist: [],
  380. fllowList: [],
  381. KeyWordsfractionList: [],//需求挖掘话术list
  382. userInfo: {},
  383. buttonisshow: false
  384. }
  385. },
  386. computed: {
  387. isEdit() {
  388. let arr = uni.getStorageSync('weapp_session_Menu_data')
  389. return arr.findIndex(item => {
  390. return item.name == '客户编辑'
  391. }) == -1 ? false : true
  392. }
  393. },
  394. onLoad(options) {
  395. this.LOADING = true
  396. this.customerId = options.id;
  397. },
  398. onShow() {
  399. this.userInfo = uni.getStorageSync('weapp_session_userInfo_data');
  400. if (this.userInfo.dataCode == 6) {
  401. this.buttonisshow = true;
  402. } else {
  403. this.buttonisshow = false
  404. }
  405. this.getCustomerInfo()
  406. this.tabtimetap(0)
  407. },
  408. methods: {
  409. changeshowlevel1(item,type){
  410. console.log(item)
  411. item.show = !item.show
  412. },
  413. // 客户详情需求挖掘话术
  414. getfindKeyWordsBycusId() {
  415. this.$u.get("/cusLvStatistics/findKeyWordsBycusId?cusId=" + this.customerId).then(res => {
  416. console.log(res)
  417. if(res.length){
  418. res.forEach(item=>{
  419. item.show = false
  420. item.children.forEach(obj=>{
  421. obj.show = false
  422. if(obj.questionList.length){
  423. obj.questionList.forEach(subobj=>{
  424. subobj.show =false
  425. })
  426. }
  427. })
  428. if(item.questionList.length){
  429. item.questionList.forEach(obj=>{
  430. obj.show =false
  431. })
  432. }
  433. })
  434. this.KeyWordsfractionList = res
  435. }else{
  436. this.KeyWordsfractionList = []
  437. }
  438. })
  439. },
  440. // 获取到访记录
  441. getVisitList() {
  442. this.$u.get("/customer/findByPhoneAndProject?id=" + this.customerId, ).then(res => {
  443. this.Thevisitingrecords = res
  444. })
  445. },
  446. // 获取客户信息
  447. getCustomerInfo() {
  448. const that = this;
  449. this.$u.get("/customer/findById", {
  450. id: this.customerId
  451. }).then(res => {
  452. this.LOADING = false
  453. if (res.fraction == null) {
  454. res.fraction = '0';
  455. }
  456. if (res.demand.cusSemanticWordsList != null) {
  457. res.demand.cusSemanticWords = res.demand.cusSemanticWordsList
  458. res.demand.cusSemanticWordsList.forEach(che => {
  459. if (che.isInterval == 0) {
  460. che.name = che.name + che.unit + '-' + che.endName + che.unit;
  461. }
  462. })
  463. res.demand.cusSemanticWordsList = res.demand.cusSemanticWordsList.slice(0, 3)
  464. }
  465. // console.log(res.demand.cusSemanticWords,'关键字')
  466. this.customerInfo = res;
  467. }).catch(e => {
  468. this.LOADING = false
  469. })
  470. },
  471. tabtimetap(idx) {
  472. this.activeTotal = idx
  473. if (idx == 0) {
  474. this.getVisitList()
  475. } else if (idx == 1) {
  476. this.getFollowList()
  477. } else {
  478. this.getRatelist()
  479. this.getfindKeyWordsBycusId()
  480. }
  481. },
  482. tapThevisiting(item) {
  483. uni.showLoading({
  484. title: '加载中',
  485. mask: true
  486. });
  487. if (item.yon != 0) {
  488. setTimeout(function() {
  489. uni.hideLoading();
  490. }, 2000);
  491. uni.showToast({
  492. icon: 'none',
  493. title: '暂无录音',
  494. duration: 2000
  495. });
  496. return
  497. } else {
  498. const parames = {
  499. pageNum: 1,
  500. pageSize: 100,
  501. query: {
  502. customerId: item.id,
  503. }
  504. }
  505. var item = {
  506. bg: 0,
  507. customerId: item.id,
  508. id: ''
  509. }
  510. uni.setStorageSync("entrance", 1); //写入缓存
  511. uni.setStorageSync("searchobj", item); //写入缓存
  512. this.$u.post("/corpus/findByPage", parames).then(res => {
  513. setTimeout(function() {
  514. uni.hideLoading();
  515. }, 2000);
  516. if (res == null) {
  517. uni.showToast({
  518. icon: "none",
  519. title: "暂无音频"
  520. })
  521. return
  522. }
  523. if (res[0].merge == 0) {
  524. let newobj = res[0];
  525. uni.navigateTo({
  526. url: `/pages/mine/details2?customerId=${newobj.customerId}&status=${newobj.status}&stateisshow=2&wordFraction=${this.customerInfo.wordFraction}`
  527. })
  528. } else {
  529. let newobj = res[0];
  530. uni.navigateTo({
  531. url: `/pages/mine/details?customerId=${newobj.customerId}&status=${newobj.status}&stateisshow=1&wordFraction=${this.customerInfo.wordFraction}`
  532. })
  533. }
  534. })
  535. }
  536. },
  537. // 获取跟进记录
  538. getFollowList() {
  539. this.fllowList = [];
  540. this.$u.post("/customer/getCusStage", {
  541. customerId: this.customerId
  542. }).then(res => {
  543. res.forEach(item => {
  544. item.agentName = this.customerInfo.agentName
  545. })
  546. this.fllowList = res;
  547. })
  548. },
  549. // 新增跟进
  550. followRecordAdd() {
  551. uni.navigateTo({
  552. url: `/pages/center/consumer/newFollowup/newFollowup?id=${this.customerId}`
  553. })
  554. },
  555. // 去编辑
  556. goedit() {
  557. // console.log('去编辑')
  558. if (!this.isEdit) return
  559. uni.navigateTo({
  560. url: `/pages/center/consumer/edit?id=${this.customerId}&projectId=${this.customerInfo.projectId}`
  561. })
  562. },
  563. // 去添加提醒
  564. goRemind() {
  565. uni.navigateTo({
  566. url: `/pages/center/consumer/remind?str=${this.customerInfo.name+'/'+this.customerInfo.phone}&customerId=${this.customerId}`
  567. })
  568. },
  569. //评分点击
  570. clickaudeopal(item) {
  571. if (item.selected == 0) {
  572. uni.navigateTo({
  573. url: '/pages/mine/ScoringPlaylist?customerId=' + this.customerId + "&id=" + item
  574. .marketingId + '&type=0'
  575. })
  576. }
  577. },
  578. tipupon() {
  579. if (!this.customerInfo.demand.cusSemanticWordsList) return
  580. this.tipshow = true
  581. },
  582. changeshow(item, type) {
  583. item.show = !item.show
  584. },
  585. changeshow2(item, type) {
  586. item.show = !item.show
  587. },
  588. // 获取评分
  589. getRatelist() {
  590. this.$u.get("/customer/findzkMByCusId", {
  591. cusId: this.customerId
  592. }).then(res => {
  593. if (res.length) {
  594. let level1 = []
  595. res.forEach(item => {
  596. if (item.pid == 0) {
  597. level1.push({
  598. id: item.marketingId,
  599. rate: item.fraction,
  600. name: item.name,
  601. sort: item.sort,
  602. show: false,
  603. ratepercent: 0,
  604. children: []
  605. })
  606. }
  607. })
  608. // this.totalRate = level2rate;
  609. res.forEach(subitem => {
  610. let subitempid = subitem.pid
  611. level1.forEach(item => {
  612. if (subitempid == item.id) {
  613. if (subitem.selected == 0) {
  614. item.ratepercent += subitem.fraction
  615. }
  616. item.children.push({
  617. id: subitem.id,
  618. rate: subitem.fraction,
  619. selected: subitem.selected,
  620. name: subitem.name,
  621. show: false,
  622. marketingId: subitem.marketingId,
  623. children: []
  624. })
  625. }
  626. })
  627. })
  628. res.forEach(subitem => {
  629. let subitempid = subitem.pid
  630. level1.forEach(chen => {
  631. chen.children.forEach(zxc => {
  632. if (subitempid == zxc.marketingId) {
  633. zxc.children.push({
  634. id: subitem.id,
  635. rate: subitem.fraction,
  636. selected: subitem.selected,
  637. name: subitem.name,
  638. marketingId: subitem.marketingId,
  639. })
  640. }
  641. })
  642. })
  643. })
  644. level1[0].show = true;
  645. level1[0].children[0].show = true;
  646. this.ratelist = level1
  647. }
  648. })
  649. },
  650. }
  651. }
  652. </script>
  653. <style lang="scss" scoped>
  654. .rotatearrow {
  655. transform: rotate(270deg);
  656. }
  657. // 评分
  658. .rate-box {
  659. padding: 10rpx 20rpx;
  660. background-color: #FFFFFF;
  661. .date {
  662. width: 300rpx;
  663. height: 33rpx;
  664. font-size: 24rpx;
  665. font-weight: 400;
  666. color: #333333;
  667. line-height: 33rpx;
  668. letter-spacing: 1rpx;
  669. margin-bottom: 8rpx;
  670. }
  671. .title {
  672. width: 100%;
  673. height: 42rpx;
  674. font-size: 30rpx;
  675. font-weight: 500;
  676. color: #333333;
  677. line-height: 42rpx;
  678. letter-spacing: 2rpx;
  679. margin-bottom: 20rpx;
  680. }
  681. .level1 {
  682. display: flex;
  683. align-items: center;
  684. .level-name {
  685. width: 104rpx;
  686. height: 33rpx;
  687. font-size: 24rpx;
  688. font-weight: 500;
  689. color: #333333;
  690. line-height: 33rpx;
  691. letter-spacing: 1rpx;
  692. margin-right: 10rpx;
  693. }
  694. .level-progress {
  695. flex: 1;
  696. border-radius: 11rpx;
  697. height: 21rpx;
  698. background-color: #BEE4FF;
  699. position: relative;
  700. .color {
  701. width: 0;
  702. position: absolute;
  703. top: 0;
  704. left: 0;
  705. height: 21rpx;
  706. border-radius: 11rpx 0 0 11rpx;
  707. background-color: #008EF2;
  708. }
  709. }
  710. .level-rate {
  711. width: 65rpx;
  712. height: 33rpx;
  713. font-size: 24rpx;
  714. font-weight: 500;
  715. color: #333333;
  716. line-height: 33rpx;
  717. letter-spacing: 1rpx;
  718. margin: 0 20rpx 0 15rpx;
  719. }
  720. .arrow {
  721. width: 37rpx;
  722. height: 21rpx;
  723. padding: 5rpx 20rpx;
  724. }
  725. .rotatearrow {
  726. transform: rotate(270deg);
  727. }
  728. }
  729. .level1-subbox {
  730. display: flex;
  731. margin-top: 20rpx;
  732. flex-wrap: wrap;
  733. .sub-name {
  734. width: 50%;
  735. display: flex;
  736. margin-bottom: 18rpx;
  737. .subitem-name {
  738. width: 104rpx;
  739. height: 33rpx;
  740. font-size: 24rpx;
  741. font-weight: 400;
  742. color: #999999;
  743. line-height: 33rpx;
  744. letter-spacing: 1rpx;
  745. margin-right: 12rpx;
  746. }
  747. .checkimg {
  748. width: 27rpx;
  749. height: 27rpx;
  750. }
  751. }
  752. }
  753. }
  754. .Level-box {
  755. padding-bottom: 2rpx;
  756. .hhhbox {
  757. width: 100%;
  758. padding-left: 30rpx;
  759. padding-right: 30rpx;
  760. border-bottom: 1rpx solid #E0E0E0;
  761. background: #FFFFFF;
  762. // padding-bottom: 32rpx;
  763. .hsnrtest {
  764. height: 24rpx;
  765. font-size: 24rpx;
  766. font-weight: 400;
  767. color: #666666;
  768. line-height: 24rpx;
  769. }
  770. .Level3che {
  771. width: 100%;
  772. height: 28rpx;
  773. display: flex;
  774. line-height: 28rpx;
  775. align-items: center;
  776. margin-top: 30rpx;
  777. .title1 {
  778. flex: 1;
  779. font-size: 28rpx;
  780. color: #2671E2;
  781. font-weight: 400;
  782. }
  783. .jiantobox {
  784. width: 30rpx;
  785. height: 30rpx;
  786. display: flex;
  787. align-items: center;
  788. .arrow {
  789. width: 28rpx;
  790. height: 28rpx;
  791. }
  792. }
  793. }
  794. }
  795. .Level2che {
  796. width: 100%;
  797. height: 88rpx;
  798. display: flex;
  799. line-height: 88rpx;
  800. align-items: center;
  801. .title1 {
  802. flex: 3;
  803. font-size: 28rpx;
  804. color: #333333;
  805. font-weight: 400;
  806. }
  807. .leve1-jindu {
  808. flex: 3;
  809. display: flex;
  810. justify-content: center;
  811. align-items: center;
  812. .zhixing {
  813. width: 108rpx;
  814. height: 44rpx;
  815. background: #2671E2;
  816. border-radius: 4rpx;
  817. font-size: 28rpx;
  818. text-align: center;
  819. line-height: 44rpx;
  820. color: #FFFFFF;
  821. }
  822. .zhixing2 {
  823. width: 108rpx;
  824. height: 44rpx;
  825. background: #F8F8F8;
  826. border-radius: 4rpx;
  827. font-size: 28rpx;
  828. text-align: center;
  829. line-height: 44rpx;
  830. color: #999999;
  831. }
  832. }
  833. .jiantobox {
  834. width: 30rpx;
  835. height: 30rpx;
  836. display: flex;
  837. align-items: center;
  838. .arrow {
  839. width: 30rpx;
  840. height: 18rpx;
  841. }
  842. }
  843. }
  844. .Level1che {
  845. width: 100%;
  846. height: 94rpx;
  847. background: #F5F5F5;
  848. display: flex;
  849. line-height: 94rpx;
  850. align-items: center;
  851. padding-left: 30rpx;
  852. padding-right: 30rpx;
  853. .title1 {
  854. flex: 2;
  855. font-size: 30rpx;
  856. color: #333333;
  857. font-weight: 400;
  858. }
  859. .leve1-jindu {
  860. flex: 3;
  861. .jindutiao {
  862. width: 96%;
  863. height: 28rpx;
  864. background: #D5EEE2;
  865. line-height: 28rpx;
  866. border-radius: 14rpx;
  867. position: relative;
  868. .huanxing {
  869. height: 100%;
  870. background: #4FC78F;
  871. border-radius: 14rpx;
  872. }
  873. .text {
  874. position: absolute;
  875. top: 0rpx;
  876. right: 0rpx;
  877. font-size: 28rpx;
  878. font-weight: 400;
  879. color: #333333;
  880. }
  881. }
  882. }
  883. .jiantobox {
  884. width: 30rpx;
  885. height: 30rpx;
  886. display: flex;
  887. align-items: center;
  888. .arrow {
  889. width: 30rpx;
  890. height: 18rpx;
  891. }
  892. }
  893. }
  894. }
  895. .cccccc {
  896. text-align: center;
  897. height: 140rpx;
  898. line-height: 140rpx;
  899. font-size: 30rpx;
  900. }
  901. .ratecenter {
  902. background-color: #FFFFFF;
  903. padding-bottom: 30rpx;
  904. width: 100%;
  905. .my-tab{
  906. padding: 20rpx 0;
  907. display: flex;
  908. justify-content: space-around;
  909. align-items: center;
  910. border-bottom: 1px solid #E0E0E0;
  911. .tab-item{
  912. padding: 0 30rpx;
  913. height: 56rpx;
  914. font-size: 28rpx;
  915. font-family: PingFangSC-Regular, PingFang SC;
  916. font-weight: 400;
  917. color: #666666;
  918. line-height: 56rpx;
  919. text-shadow: 0px 1px 0px #E0E0E0;
  920. }
  921. .tabactive{
  922. height: 56rpx;
  923. background: rgba(38, 113, 226, 0.1);
  924. box-shadow: 0px 1px 0px 0px #E0E0E0;
  925. border-radius: 28rpx;
  926. font-weight: 600;
  927. color: #2671E2;
  928. }
  929. }
  930. .ratetetle {
  931. padding: 30rpx;
  932. font-size: 30rpx;
  933. font-weight: 400;
  934. color: #333333;
  935. padding-bottom: 6rpx;
  936. }
  937. .rateyuanbox {
  938. width: 100%;
  939. height: 210rpx;
  940. padding-bottom: 30rpx;
  941. border-bottom: 1rpx solid #E0E0E0;
  942. display: flex;
  943. padding-left: 80rpx;
  944. padding-right: 80rpx;
  945. .rateyuanboxzuo {
  946. width: 30%;
  947. height: 100%;
  948. }
  949. .rateyuanboxyou {
  950. width: 40%;
  951. height: 100%;
  952. }
  953. .boxzuoview {
  954. width: 100%;
  955. height: 140rpx;
  956. }
  957. }
  958. }
  959. .box {
  960. width: 100%;
  961. height: 100%;
  962. background: #F8F8F8;
  963. }
  964. .tab {
  965. height: 88rpx;
  966. // border-bottom: 1px solid #E0E0E0;
  967. background: #FFFFFF;
  968. display: flex;
  969. align-items: center;
  970. .tabbox {
  971. flex: 1;
  972. height: 100%;
  973. text-align: center;
  974. line-height: 92rpx;
  975. color: #666666;
  976. font-size: 28rpx;
  977. display: flex;
  978. justify-content: center;
  979. .activecllasscet {
  980. border-bottom: 2px solid #2671E2;
  981. color: #2671E2;
  982. font-weight: 600;
  983. }
  984. }
  985. }
  986. .content {
  987. // height: 1000rpx;/
  988. overflow: hidden;
  989. border-top: 1px solid #E0E0E0;
  990. .content-tips {
  991. background: #fff;
  992. // box-sizing: border-box;
  993. margin-bottom: 20rpx;
  994. overflow: hidden;
  995. .content-first {
  996. padding: 19rpx 30rpx;
  997. display: flex;
  998. justify-content: space-between;
  999. box-sizing: border-box;
  1000. font-weight: 400;
  1001. color: #292929;
  1002. height: 90rpx;
  1003. font-size: 30rpx;
  1004. line-height: 30rpx;
  1005. .left {
  1006. display: flex;
  1007. .img {
  1008. width: 52rpx;
  1009. height: 52rpx;
  1010. border-radius: 50%;
  1011. text-align: center;
  1012. line-height: 50rpx;
  1013. margin-right: 20rpx;
  1014. color: #fff;
  1015. font-size: 30rpx;
  1016. background: #9f61c8;
  1017. }
  1018. .test {
  1019. margin-top: 11rpx;
  1020. font-weight: 500;
  1021. color: #333333;
  1022. }
  1023. .edit {
  1024. height: 30rpx;
  1025. width: 30rpx;
  1026. margin-left: 30rpx;
  1027. margin-top: 11rpx;
  1028. image {
  1029. width: 100%;
  1030. height: 100%;
  1031. }
  1032. }
  1033. }
  1034. .right {
  1035. display: flex;
  1036. .test {
  1037. margin-top: 11rpx;
  1038. .blue {
  1039. font-size: 32rpx;
  1040. font-family: PingFangSC-Medium, PingFang SC;
  1041. font-weight: 500;
  1042. color: #2671e2;
  1043. }
  1044. }
  1045. }
  1046. }
  1047. .content-sec {
  1048. border-top: 1px solid #E0E0E0;
  1049. padding: 0 30rpx;
  1050. position: relative;
  1051. .content-sec-lab {
  1052. margin-top: 28rpx;
  1053. display: flex;
  1054. justify-content: space-between;
  1055. font-size: 30rpx;
  1056. font-weight: 400;
  1057. color: #666666;
  1058. line-height: 46rpx;
  1059. .content-sec-lab1 {
  1060. color: #333333;
  1061. .look{
  1062. font-size: 32rpx;
  1063. font-family: PingFangSC-Semibold, PingFang SC;
  1064. font-weight: 600;
  1065. color: #2671E2;
  1066. }
  1067. .look1{
  1068. height: 42rpx;
  1069. font-size: 30rpx;
  1070. font-family: PingFangSC-Regular, PingFang SC;
  1071. font-weight: 400;
  1072. color: #2671E2;
  1073. line-height: 42rpx;
  1074. margin-left: 60rpx;
  1075. }
  1076. }
  1077. .content-sec-tips {
  1078. max-width: 120rpx;
  1079. height: 46rpx;
  1080. background: #F2F2F2;
  1081. border-radius: 6rpx;
  1082. text-align: center;
  1083. line-height: 26rpx;
  1084. overflow: hidden;
  1085. text-overflow: ellipsis;
  1086. white-space: nowrap;
  1087. font-size: 26rpx;
  1088. font-weight: 400;
  1089. color: #333333;
  1090. margin-right: 20rpx;
  1091. box-sizing: border-box;
  1092. padding: 10rpx 24rpx;
  1093. }
  1094. }
  1095. .content-sec-num {
  1096. position: absolute;
  1097. width: 200rpx;
  1098. height: 90rpx;
  1099. background: #F4F8FD;
  1100. border-radius: 12rpx;
  1101. font-weight: 400;
  1102. color: #2671E2;
  1103. line-height: 45rpx;
  1104. bottom: 100rpx;
  1105. right: 30rpx;
  1106. text-align: center;
  1107. }
  1108. }
  1109. .content-last {
  1110. padding: 30rpx;
  1111. height: 168rpx;
  1112. .content-last-con {
  1113. width: 690rpx;
  1114. height: 108rpx;
  1115. background: #F8F8F8;
  1116. border-radius: 8rpx;
  1117. padding: 14rpx 20rpx;
  1118. font-size: 28rpx;
  1119. font-weight: 400;
  1120. color: #333333;
  1121. line-height: 40rpx;
  1122. }
  1123. }
  1124. }
  1125. }
  1126. .tabchange {
  1127. // background: #FFFFFF;
  1128. overflow: hidden;
  1129. .tabactive1 {
  1130. padding-bottom: 100rpx;
  1131. .content-tips {
  1132. background: #fff;
  1133. padding: 0 30rpx;
  1134. box-sizing: border-box;
  1135. overflow: hidden;
  1136. margin-bottom: 20rpx;
  1137. .content-first {
  1138. margin-top: 19rpx;
  1139. display: flex;
  1140. justify-content: space-between;
  1141. .left {
  1142. display: flex;
  1143. .img {
  1144. width: 52rpx;
  1145. height: 52rpx;
  1146. background: #FFFFFF;
  1147. border: 1px solid #C9C9C9;
  1148. border-radius: 50%;
  1149. text-align: center;
  1150. line-height: 52rpx;
  1151. margin-right: 20rpx;
  1152. }
  1153. .name {
  1154. font-weight: 600;
  1155. color: #333333;
  1156. // margin-left: 20rpx;
  1157. margin-top: 11rpx;
  1158. }
  1159. .status {
  1160. width: 110rpx;
  1161. height: 42rpx;
  1162. background: #FFF9F5;
  1163. border-radius: 4rpx;
  1164. font-size: 26rpx;
  1165. font-weight: 400;
  1166. color: #EC8D49;
  1167. line-height: 42rpx;
  1168. text-align: center;
  1169. margin-left: 19rpx;
  1170. margin-top: 11rpx;
  1171. }
  1172. }
  1173. .right {
  1174. display: flex;
  1175. margin-top: 11rpx;
  1176. .point {
  1177. width: 12rpx;
  1178. height: 12rpx;
  1179. background: #2B6EFF;
  1180. border-radius: 50%;
  1181. margin-right: 9rpx;
  1182. margin-top: 16rpx;
  1183. }
  1184. }
  1185. }
  1186. .content-sec {
  1187. display: flex;
  1188. justify-content: space-between;
  1189. margin-top: 19rpx;
  1190. .left {
  1191. display: flex;
  1192. .cus {
  1193. font-size: 30rpx;
  1194. font-weight: 400;
  1195. color: #666666;
  1196. line-height: 30rpx;
  1197. }
  1198. .arriveNum {
  1199. font-size: 30rpx;
  1200. font-weight: 400;
  1201. line-height: 30rpx;
  1202. margin-left: 10rpx;
  1203. }
  1204. }
  1205. .right {
  1206. width: 192rpx;
  1207. height: 46rpx;
  1208. background: #F4F8FD;
  1209. border-radius: 6rpx;
  1210. text-align: center;
  1211. line-height: 46rpx;
  1212. font-weight: 400;
  1213. color: #2671E2;
  1214. }
  1215. }
  1216. .content-last {
  1217. margin: 30rpx 0;
  1218. font-size: 30rpx;
  1219. font-weight: 400;
  1220. color: #666666;
  1221. line-height: 30rpx;
  1222. }
  1223. }
  1224. }
  1225. .tabactive2 {
  1226. .tab2-tips {
  1227. background: #fff;
  1228. // height: 270rpx;
  1229. overflow: auto;
  1230. margin-bottom: 20rpx;
  1231. .tab2-first {
  1232. // height: 150rpx;
  1233. border-bottom: 1px solid #E0E0E0;
  1234. padding: 0 30rpx;
  1235. margin-top: 19rpx;
  1236. box-sizing: border-box;
  1237. .tab2-first-1 {
  1238. display: flex;
  1239. justify-content: space-between;
  1240. // height: 75rpx;
  1241. .tab2-first-left {
  1242. display: flex;
  1243. .img {
  1244. width: 52rpx;
  1245. height: 52rpx;
  1246. background: #FFFFFF;
  1247. border: 1px solid #C9C9C9;
  1248. border-radius: 50%;
  1249. text-align: center;
  1250. line-height: 52rpx;
  1251. }
  1252. .name {
  1253. font-weight: 600;
  1254. color: #333333;
  1255. margin-left: 20rpx;
  1256. margin-top: 11rpx;
  1257. }
  1258. }
  1259. .tab2-first-right {
  1260. font-size: 30rpx;
  1261. font-weight: 400;
  1262. color: #666666;
  1263. margin-top: 11rpx;
  1264. }
  1265. }
  1266. .tab2-first-foot {
  1267. margin-top: 19rpx;
  1268. margin-bottom: 30rpx;
  1269. font-size: 30rpx;
  1270. font-weight: 400;
  1271. color: #666666;
  1272. line-height: 30rpx;
  1273. }
  1274. }
  1275. .tab2-sec {
  1276. height: 120rpx;
  1277. padding: 30rpx;
  1278. float: right;
  1279. .tab-sec-edit {
  1280. width: 156rpx;
  1281. height: 60rpx;
  1282. background: #FFFFFF;
  1283. border-radius: 4px;
  1284. border: 1px solid #2671E2;
  1285. text-align: center;
  1286. line-height: 60rpx;
  1287. font-weight: 400;
  1288. color: #2671E2;
  1289. }
  1290. }
  1291. }
  1292. }
  1293. }
  1294. .pon-foot {
  1295. position: sticky;
  1296. bottom: 0;
  1297. width: 750rpx;
  1298. height: 100rpx;
  1299. background: #FFFFFF;
  1300. box-shadow: 0px -2rpx 8rpx 0rpx rgba(224, 224, 224, 0.5);
  1301. display: flex;
  1302. justify-content: space-around;
  1303. align-items: center;
  1304. // padding-top: 24rpx;
  1305. box-sizing: border-box;
  1306. // padding: ;
  1307. .foot-tab {
  1308. text-align: center;
  1309. width: 270rpx;
  1310. height: 70rpx;
  1311. line-height: 70rpx;
  1312. background: #2671E2;
  1313. box-shadow: 0px -2rpx 8rpx 0px rgba(224, 224, 224, 0.5);
  1314. border-radius: 6rpx;
  1315. font-size: 30rpx;
  1316. font-weight: 400;
  1317. color: #FFFFFF;
  1318. }
  1319. }
  1320. .upon-sec-tips {
  1321. min-width:96rpx;
  1322. height: 46rpx;
  1323. background: #F2F2F2;
  1324. border-radius: 6rpx;
  1325. text-align: center;
  1326. line-height: 46rpx;
  1327. // overflow: hidden;
  1328. // text-overflow: ellipsis;
  1329. // white-space: nowrap;
  1330. font-size: 26rpx;
  1331. font-weight: 400;
  1332. color: #333333;
  1333. margin: 0 20rpx 20rpx 0;
  1334. padding: 0 10rpx;
  1335. box-sizing: border-box;
  1336. }
  1337. .conmsg-msg-lab-img {
  1338. width: 14rpx;
  1339. height: 30rpx;
  1340. margin-top: 6rpx;
  1341. margin-left: auto;
  1342. image {
  1343. width: 100%;
  1344. height: 100%;
  1345. }
  1346. }
  1347. </style>