add-record.vue 35 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869870871872873874875876877878879880881882883884885886887888889890891892893894895896897898899900901902903904905906907908909910911912913914915916917918919920921922923924925926927928929930931932933934935936937938939940941942943944945946947948949950951952953954955956957958959960961962963964965966967968969970971972973974975976977978979980981982983984985986987988989990991992993994995996997998999100010011002100310041005100610071008100910101011101210131014101510161017101810191020102110221023102410251026102710281029103010311032103310341035103610371038103910401041104210431044104510461047104810491050105110521053105410551056105710581059106010611062106310641065106610671068106910701071107210731074107510761077107810791080108110821083108410851086108710881089109010911092109310941095109610971098109911001101110211031104110511061107110811091110111111121113111411151116111711181119112011211122112311241125112611271128112911301131113211331134113511361137113811391140114111421143114411451146114711481149115011511152115311541155115611571158115911601161116211631164116511661167116811691170117111721173117411751176117711781179118011811182118311841185118611871188118911901191119211931194119511961197119811991200120112021203120412051206120712081209121012111212121312141215121612171218121912201221122212231224122512261227122812291230123112321233123412351236123712381239124012411242124312441245124612471248124912501251125212531254125512561257125812591260126112621263126412651266126712681269127012711272127312741275127612771278127912801281128212831284128512861287128812891290129112921293129412951296129712981299130013011302130313041305130613071308130913101311131213131314131513161317131813191320132113221323132413251326132713281329133013311332
  1. <template>
  2. <view class="container qualifications" :style="{ paddingBottom: isIphoneX ? '68rpx' : '0' }">
  3. <view class="remarks-content">
  4. <view class="list-view-title">
  5. <view class="list-view-h1">咨询人:</view>
  6. </view>
  7. <view class="remarks-input">{{ questionMan }}</view>
  8. <view class="list-view-title">
  9. <view class="list-view-h1"><text>*</text>沟通情况:</view>
  10. </view>
  11. <view class="remarks-category">
  12. <radio-group @change="radioChange">
  13. <label class="uni-list-cell uni-list-cell-pd" v-for="(item, index) in items" :key="item.value">
  14. <radio
  15. :value="item.value"
  16. style="transform:scale(0.7)"
  17. color="#FF5B00"
  18. :checked="index === current"
  19. />
  20. <label :for="item.value" class="label">
  21. <text>{{ item.name }}</text>
  22. </label>
  23. </label>
  24. </radio-group>
  25. <checkbox-group v-if="current === 0" @change="checkboxChange" style="margin-top: 10rpx;">
  26. <label class="label" v-for="item in checkboItems" :key="item.value">
  27. <checkbox :value="item.value" :checked="item.checked" style="transform:scale(0.7)" color="#FF5B00" />
  28. {{item.name}}
  29. </label>
  30. </checkbox-group>
  31. </view>
  32. <view class="list-view-title"> <view class="list-view-h1">客户来源:</view> </view>
  33. <view class="list-view-radio">
  34. <picker @change="bindPickerChange(4, $event)" :value="index" :range="sourceActions" range-key="name">
  35. <input
  36. class="input"
  37. type="text"
  38. disabled="false"
  39. v-model="sourceStateText"
  40. value=""
  41. placeholder="请选择"
  42. />
  43. <text class="iconfont icon-xiangyou"></text>
  44. </picker>
  45. </view>
  46. <view class="list-view-title"> <view class="list-view-h1">客户性别:</view> </view>
  47. <view class="list-view-radio">
  48. <picker @change="bindPickerChange(5, $event)" :value="index" :range="genderActions" range-key="name">
  49. <input
  50. class="input"
  51. type="text"
  52. disabled="false"
  53. v-model="genderText"
  54. value=""
  55. placeholder="请选择"
  56. />
  57. <text class="iconfont icon-xiangyou"></text>
  58. </picker>
  59. </view>
  60. <view class="list-view-title"> <view class="list-view-h1">客户年龄:</view> </view>
  61. <view class="list-view-radio">
  62. <picker @change="bindPickerChange(6, $event)" :value="index" :range="ageActions" range-key="name">
  63. <input class="input" type="text" disabled="false" v-model="customerAge" value="" placeholder="请选择" />
  64. <text class="iconfont icon-xiangyou"></text>
  65. </picker>
  66. </view>
  67. <view class="list-view-title"> <view class="list-view-h1">加群情况:</view> </view>
  68. <view class="list-view-radio">
  69. <picker @change="bindPickerChange(7, $event)" :value="index" :range="additiveActions" range-key="name">
  70. <input
  71. class="input"
  72. type="text"
  73. disabled="false"
  74. v-model="additiveText"
  75. value=""
  76. placeholder="请选择"
  77. />
  78. <text class="iconfont icon-xiangyou"></text>
  79. </picker>
  80. </view>
  81. <view class="list-view-title" v-if="current === 0">
  82. <view class="list-view-h1"><text>*</text>咨询类别:</view>
  83. </view>
  84. <view class="remarks-category" v-if="current === 0">
  85. <view
  86. class="checkbox-list"
  87. :class="category.isChecked ? 'checked' : ''"
  88. v-for="(category, index) in categorys"
  89. :key="index"
  90. @click="choiceCategorys(category, index)"
  91. >
  92. <text class="iconfont" :class="category.isChecked ? 'icon-yixuanze' : 'icon-weixuanze'"></text>
  93. {{ category.className }}
  94. </view>
  95. </view>
  96. <!--<view class="list-view-title">
  97. <view class="list-view-h1">机构类型:</view>
  98. </view>
  99. <view class="remarks-input">
  100. <input
  101. class="input"
  102. type="text"
  103. v-model="remarksParams.clubType"
  104. value=""
  105. placeholder="如美甲店,医院"
  106. maxlength="15"
  107. />
  108. </view> -->
  109. <view class="list-view-title"> <view class="list-view-h1">咨询商品:</view> </view>
  110. <view class="tui-remarks-content">
  111. <view class="tui-remarks-goods-input" v-if="handleGoods.length === 0" @click="handleShowGoodPopup">
  112. <view class="input-add"> <text class="iconfont icon-jiahao"></text> </view>
  113. <view class="input-text"> 点击添加客户咨询的商品 </view>
  114. </view>
  115. <view class="tui-remarks-showgoods" v-else>
  116. <view class="tui-remarks-goods" v-for="(pros, index) in handleGoods" :key="index">
  117. <view class="goods-image"> <image :src="pros.image" mode=""></image> </view>
  118. <view class="goods-main">
  119. <view class="name"> {{ pros.name }} </view>
  120. <view class="shop"> 供应商:{{ pros.shopName }} </view>
  121. </view>
  122. </view>
  123. <view class="tui-remarks-btn">
  124. <view class="btn delete" @click="handleClean">删除</view>
  125. <view class="btn update" @click="handleShowGoodPopup">更换</view>
  126. </view>
  127. </view>
  128. </view>
  129. <view class="list-view-title">
  130. <view class="list-view-h1">标签记录:</view>
  131. <view class="list-view-p">
  132. 请总结客户的个人画像和咨询内容,尽量使用简短的描述性词语,杜绝口语化的词语 (优先选择以下展示的标签)
  133. </view>
  134. </view>
  135. <view class="list-view-list-main">
  136. <view class="list-label-list">
  137. <text class="list-label"
  138. :class="item.isChecked ? 'active' : ''"
  139. v-for="(item, index) in labelsList"
  140. :key="index"
  141. @click="handleCheckedLabel(item,index)"
  142. >
  143. {{ item.label }}
  144. </text>
  145. </view>
  146. </view>
  147. <view class="list-view-title">
  148. <view class="list-view-h1">机构静态标签:</view>
  149. <view class="list-view-p"> (若你对客户的静态特点有更多维度进行描述,请手动填) </view>
  150. </view>
  151. <view class="list-view-list-main">
  152. <view class="list-view-list" v-for="(item, index) in staticLabelsList" :key="index">
  153. <view class="list-view-input">
  154. <input
  155. class="input"
  156. type="text"
  157. v-model="item.label"
  158. placeholder="请输入标签,不超过10个汉字"
  159. maxlength="10"
  160. @focus="hideStaticLabelsAction(item, $event)"
  161. @blur="hideStaticLabelsAction(item, $event)"
  162. @input="handleStaticLabelsAction(index, $event)"
  163. />
  164. <view class="list-view-assAction" v-if="item.isAssociation">
  165. <scroll-view class="tui-popup-scroll train" scroll-y="true">
  166. <view
  167. class="ass-list"
  168. v-for="(ass, assIndex) in staticLabelsActionList"
  169. :key="assIndex"
  170. @click="handleSelectStaticLabels(ass.label, item)"
  171. >{{ ass.label }}</view
  172. >
  173. </scroll-view>
  174. </view>
  175. </view>
  176. <view class="list-view-btn">
  177. <text
  178. class="iconfont icon-zengjia"
  179. v-if="staticLabelsList.length < 9 && index === staticLabelsList.length - 1"
  180. @click="handleAddStaticLabels(item, index)"
  181. ></text>
  182. <text
  183. class="iconfont icon-shanchu4"
  184. v-if="staticLabelsList.length > 1 && index != staticLabelsList.length - 1"
  185. @click="handleDelStaticLabels(item, index)"
  186. ></text>
  187. </view>
  188. </view>
  189. </view>
  190. <view class="list-view-title">
  191. <view class="list-view-h1">机构动态标签:</view>
  192. <view class="list-view-p"> (若你对客户的购买诉求有更多维度进行描述,请手动填) </view>
  193. </view>
  194. <view class="list-view-list-main">
  195. <view class="list-view-list" v-for="(item, index) in trendsLabelsList" :key="index">
  196. <view class="list-view-input">
  197. <input
  198. class="input"
  199. type="text"
  200. v-model="item.label"
  201. placeholder="请输入标签,不超过10个汉字"
  202. maxlength="10"
  203. @focus="hideTrendsLabelsAction(item, $event)"
  204. @blur="hideTrendsLabelsAction(item, $event)"
  205. @input="handleTrendsLabelsAction(index, $event)"
  206. />
  207. <view class="list-view-assAction" v-if="item.isAssociation">
  208. <scroll-view class="tui-popup-scroll train" scroll-y="true">
  209. <view
  210. class="ass-list"
  211. v-for="(ass, assIndex) in trendsLabelsActionList"
  212. :key="assIndex"
  213. @click="handleSelectTrendsLabels(ass.label, item)"
  214. >{{ ass.label }}</view
  215. >
  216. </scroll-view>
  217. </view>
  218. </view>
  219. <view class="list-view-btn">
  220. <text
  221. class="iconfont icon-zengjia"
  222. v-if="trendsLabelsList.length < 9 && index === trendsLabelsList.length - 1"
  223. @click="handleAddTrendsLabels(item, index)"
  224. ></text>
  225. <text
  226. class="iconfont icon-shanchu4"
  227. v-if="trendsLabelsList.length > 1 && index != trendsLabelsList.length - 1"
  228. @click="handleDelTrendsLabels(item, index)"
  229. ></text>
  230. </view>
  231. </view>
  232. </view>
  233. <view class="list-view-title">
  234. <view class="list-view-h1">关联报备:</view>
  235. <view class="list-view-p"
  236. >(若客户咨询的事项不确定采美能不能做,请创建并关联报备向上级反馈)</view
  237. >
  238. </view>
  239. <view class="list-view-radio" @click="handleShowReportPopup">
  240. <input
  241. class="input"
  242. type="text"
  243. disabled="false"
  244. v-model="reportText"
  245. value=""
  246. placeholder="请选择报备"
  247. />
  248. <text class="iconfont icon-xiangyou"></text>
  249. </view>
  250. <view class="list-view-title" v-if="current === 0">
  251. <view class="list-view-h1"><text>*</text>价格敏感度:</view>
  252. </view>
  253. <view class="list-view-radio" v-if="current === 0">
  254. <picker @change="bindPickerChange(1, $event)" :value="index" :range="priceActions" range-key="name">
  255. <input
  256. class="input"
  257. type="text"
  258. disabled="false"
  259. v-model="priceFlagText"
  260. value=""
  261. placeholder="请选择"
  262. />
  263. <text class="iconfont icon-xiangyou"></text>
  264. </picker>
  265. </view>
  266. <view class="list-view-title" v-if="current === 0">
  267. <view class="list-view-h1"><text>*</text>意向程度:</view>
  268. </view>
  269. <view class="list-view-radio" v-if="current === 0">
  270. <picker @change="bindPickerChange(2, $event)" :value="index" :range="intenActions" range-key="name">
  271. <input
  272. class="input"
  273. type="text"
  274. disabled="false"
  275. v-model="intenFlagText"
  276. value=""
  277. placeholder="请选择"
  278. />
  279. <text class="iconfont icon-xiangyou"></text>
  280. </picker>
  281. </view>
  282. <view class="list-view-title" v-if="current === 0">
  283. <view class="list-view-h1"><text>*</text>跟进状态:</view>
  284. </view>
  285. <view class="list-view-radio" v-if="current === 0">
  286. <picker @change="bindPickerChange(3, $event)" :value="index" :range="stateActions" range-key="name">
  287. <input
  288. class="input"
  289. type="text"
  290. disabled="false"
  291. v-model="followStateText"
  292. value=""
  293. placeholder="请选择"
  294. />
  295. <text class="iconfont icon-xiangyou"></text>
  296. </picker>
  297. </view>
  298. <view class="list-view-title"> <view class="list-view-h1">额外说明:</view> </view>
  299. <view class="remarks-textarea">
  300. <textarea
  301. class="textarea"
  302. v-model="remarksParams.extra"
  303. value=""
  304. placeholder="请输入其他需要说明的内容"
  305. maxlength="200"
  306. @input="conInput"
  307. />
  308. <text class="limit-text">{{ min }}/{{ max }}</text>
  309. </view>
  310. <view class="list-view-title">
  311. <view class="list-view-h1">上传图片</view>
  312. <view class="list-view-p">(可上传与客户的聊天截图或其他重要图片资料,最多10张)</view>
  313. </view>
  314. <view class="list-view-upload clearfix">
  315. <view class="photo-item" v-for="(image, imageIndex) in remarksParams.imageList" :key="imageIndex">
  316. <image
  317. :src="image"
  318. mode="aspectFill"
  319. @click.stop="previewImg(remarksParams.imageList, imageIndex)"
  320. ></image>
  321. <text
  322. class="iconfont icon-iconfontguanbi"
  323. @click.stop="deletePhotoFn(remarksParams.imageList, imageIndex)"
  324. ></text>
  325. </view>
  326. <view
  327. class="photo-item add"
  328. @click.stop="uploadPhotoFn(remarksParams.imageList)"
  329. v-if="remarksParams.imageList.length < 10 || remarksParams.imageList.length == 0"
  330. >
  331. <text class="iconfont icon-jiahao"></text>
  332. </view>
  333. </view>
  334. <view class="list-view-title">
  335. <view class="list-view-h1">上传文件</view>
  336. <view class="list-view-p">(可上传与客户相关的文件资料,最多10份,支持word,excel,ppt和pdf格式文件)</view>
  337. </view>
  338. <view class="list-view" v-for="(file, fileIndex) in remarksParams.fileList" :key="fileIndex">
  339. <view class="list-view-text">
  340. <view class="input">{{ file.fileName }}</view>
  341. <view class="delbtn" @click.stop="deleteFileFn(remarksParams.fileList, fileIndex)">删除</view>
  342. </view>
  343. </view>
  344. <view class="list-view">
  345. <view class="list-view-file" @click="uploadFile(remarksParams.fileList)">选择文件</view>
  346. </view>
  347. </view>
  348. <view class="remarks-btn" :style="{ paddingBottom: isIphoneX ? '68rpx' : '34rpx' }">
  349. <view class="edit-button" @click="editButtonConfim">确定</view>
  350. </view>
  351. <!-- 商品列表弹窗 -->
  352. <cm-goodspopup
  353. ref="cmgoodspopup"
  354. v-if="isGoodspopup"
  355. :show="isGoodspopup"
  356. @handleChoiceaGoods="handleChoiceaGoodsData"
  357. />
  358. <!-- 商品列表弹窗 -->
  359. <cm-reportpopup
  360. ref="cmreportpopup"
  361. v-if="isReportpopup"
  362. :show="isReportpopup"
  363. :popupType ="2"
  364. :reportInfo="reportInfo"
  365. @handleChoiceaReport="handleChoiceaReportData"
  366. />
  367. <!-- 提示弹窗 -->
  368. <tui-modal
  369. :show="modal"
  370. @click="handleClick"
  371. :content="contentModalText"
  372. :button="modalButton"
  373. color="#333"
  374. :size="32"
  375. shape="circle"
  376. :maskClosable="false"
  377. />
  378. </view>
  379. </template>
  380. <script>
  381. import { mapState, mapMutations } from 'vuex'
  382. import authorize from '@/common/config/authorize.js'
  383. import { uploadFileImage, uploadFilePdfDocDocxXlsx } from '@/services/public.js'
  384. import cmGoodspopup from '../components/cm-goods-popup'
  385. import cmReportpopup from '../components/cm-report-popup'
  386. import addMixins from './mixins/addMixins.js'
  387. var isPreviewImg
  388. export default {
  389. mixins: [addMixins],
  390. components: {
  391. cmGoodspopup,
  392. cmReportpopup
  393. },
  394. data() {
  395. return {
  396. isIphoneX: this.$store.state.isIphoneX,
  397. shopOrderId: 0,
  398. logisticsBatchId: 0,
  399. productActions: [],
  400. remarksParams: {
  401. clubType:'', //机构类型
  402. extra: '',//额外说明
  403. fileList: [],
  404. imageList: [],
  405. remarksId:0,
  406. questionManId: 0,
  407. serviceProviderId: 0,
  408. consult:'',
  409. pinceSensitve:0,//价格敏感度
  410. satisfied:0,// 意向程度
  411. followup:0,// 跟进状态
  412. communicationSituation:'', // 沟通情况 0 已沟通 1联系不上
  413. communicationMethods:'', //沟通方式 1:电话 2:微信
  414. customerSource:'',//客户来源 0 网址 1 小程序 2 公众号 3 小红书 4 微博 5 搜狐 6 其他
  415. customerGender:'',// 客户性别 0 男 1 女
  416. customerAge:'',// 客户年龄
  417. groupAddition:'' ,// 加群情况 0 以加群 1 未加群
  418. remarks: null, // 关键词
  419. trendsKeyword:null,// 动态标签
  420. stateKeyword:null // 静态标签
  421. },
  422. min: 0,
  423. max: 200,
  424. handleType:'',
  425. questionMan:'',
  426. clubUserId:0,
  427. userInfo:{},
  428. checkedCategorysList:[],
  429. categorys:[],
  430. reportText:'',
  431. checkRemarkIndex:0,
  432. assActionList: [],
  433. isGoodspopup:false,
  434. isReportpopup:false,
  435. isHashReport: false,
  436. handleGoods: [],
  437. reportInfo:{
  438. questionMan:'',
  439. questionManId:0
  440. },
  441. modal: false,
  442. contentModalText: '', //操作文字提示语句
  443. modalButton: [
  444. {
  445. text: '知道了',
  446. customStyle: {
  447. color: '#fff',
  448. bgColor: 'linear-gradient(90deg, #F28F31 0%, #FF5B00 100%)'
  449. },
  450. plain: false
  451. }
  452. ],
  453. }
  454. },
  455. onLoad(option) {
  456. console.log(option)
  457. if (option.type == 'edit') {
  458. this.handleType = option.type
  459. this.getPriorKeyword()
  460. this.getUserClubConsults()
  461. this.getUserRemarksVisitDetail(option.remarksId)
  462. uni.setNavigationBarTitle({title:'修改记录'})
  463. } else {
  464. this.questionMan = option.questionMan
  465. this.remarksParams.remarksId = option.remarksId*1
  466. this.remarksParams.questionManId = option.questionManId
  467. this.reportInfo.questionMan = option.questionMan
  468. this.reportInfo.questionManId = option.questionManId
  469. this.initGetStotage(option)
  470. this.getPriorKeyword()
  471. this.getUserClubConsults()
  472. }
  473. },
  474. methods: {
  475. ...mapMutations(['login']),
  476. async initGetStotage(option) {
  477. const userInfo = await this.$api.getStorage()
  478. this.remarksParams.serviceProviderId = userInfo.serviceProviderId ? userInfo.serviceProviderId : 0
  479. },
  480. getUserRemarksVisitDetail(remarksId) {
  481. //修改回显资料备注信息
  482. this.UserService.getUserRemarksVisitDetail({
  483. remarksId : remarksId
  484. })
  485. .then(response => {
  486. let data = response.data
  487. this.reportInfo.questionMan = data.questionMan
  488. this.reportInfo.questionManId = data.questionManId
  489. this.questionMan = data.questionMan
  490. this.remarksParams.questionManId = data.questionManId
  491. this.remarksParams.communicationSituation = this.current = data.communicationSituation
  492. this.remarksParams.communicationMethods = data.communicationMethods
  493. if(data.communicationMethods === '1,2' || data.communicationMethods === '2,1'){
  494. this.checkboItems = this.checkboItems.map(el => {
  495. el.checked = true
  496. return el
  497. })
  498. }else{
  499. this.checkboItems = this.checkboItems.map(el => {
  500. if (el.value*1 === data.communicationMethods*1) {
  501. el.checked = true
  502. }
  503. return el
  504. })
  505. }
  506. this.remarksParams.remarksId = data.remarksId
  507. this.remarksParams.extra = data.extra
  508. this.remarksParams.clubType = data.clubType
  509. this.remarksParams.pinceSensitve = data.pinceSensitve
  510. this.remarksParams.customerSource = data.customerSource
  511. this.remarksParams.customerGender = data.customerGender
  512. this.remarksParams.customerAge = this.customerAge = data.customerAge
  513. this.remarksParams.satisfied = data.satisfied
  514. this.remarksParams.followup = data.followup
  515. this.remarksParams.fileList = data.fileList
  516. this.remarksParams.imageList = data.imageList
  517. this.remarksParams.consult = data.consult
  518. this.remarksParams.productId = data.productId
  519. if(data.reportId){
  520. this.isHashReport = true
  521. this.remarksParams.reportId = data.reportId
  522. }
  523. this.checkedCategorysList = data.consult.split(',').map(i => parseInt(i, 0))
  524. this.categorys = this.categorys.map((el, index) => {
  525. if(this.contains(this.checkedCategorysList,el.id)){
  526. el.isChecked = true
  527. }else{
  528. el.isChecked = false
  529. }
  530. return el
  531. })
  532. if(data.productId){
  533. let pro = {
  534. image:data.mainImage,
  535. name:data.productName,
  536. shopName:data.shopName
  537. }
  538. this.handleGoods.push(pro)
  539. }
  540. if(data.remarks){
  541. this.firstLabelList = data.remarks.map((el, index) => {
  542. return el.label
  543. })
  544. this.labelsList = this.labelsList.map((el, index) => {
  545. if (this.contains(this.firstLabelList, el.label)) {
  546. el.isChecked = true
  547. }
  548. return el
  549. })
  550. }
  551. if(data.stateKeyword){
  552. this.staticLabelsList = data.stateKeyword.map((el, index) => {
  553. el.isAssociation = false
  554. return el
  555. })
  556. }
  557. if(data.trendsKeyword){
  558. this.trendsLabelsList = data.trendsKeyword.map((el, index) => {
  559. el.isAssociation = false
  560. return el
  561. })
  562. }
  563. this.reportText = data.reportText ? data.reportText : ''
  564. this.priceFlagText = this.pinceFilters(data.pinceSensitve)
  565. this.intenFlagText = this.intenActionsFilters(data.satisfied)
  566. this.followStateText = this.followupFilters(data.followup)
  567. this.sourceStateText = this.sourceActionsFilters(data.customerSource)
  568. this.genderText = this.genderActionsFilters(data.customerGender)
  569. this.additiveText = this.additiveActionsFilters(data.groupAddition)
  570. this.initGetStotage()
  571. })
  572. .catch(error => {
  573. this.$util.msg(error.msg, 2000)
  574. })
  575. },
  576. async getPriorKeyword() {
  577. //查询优先展示标签
  578. try{
  579. const res = await this.UserService.getPriorKeyword()
  580. const data = res.data
  581. this.labelsList = data.map((el, index) => {
  582. el.isChecked = false
  583. return el
  584. })
  585. }catch(error){
  586. console.log('=========>获取优先展示标签列表失败')
  587. }
  588. },
  589. async getUserClubConsults() {
  590. //查询咨询类别
  591. try{
  592. const res = await this.UserService.getUserClubConsults()
  593. const data = res.data
  594. this.categorys = data.map((el, index) => {
  595. el.isChecked = false
  596. return el
  597. })
  598. }catch(error){
  599. console.log('=========>获取咨询类别列表失败')
  600. }
  601. },
  602. editButtonConfim() {
  603. if(this.current === 0){
  604. if (this.remarksParams.consult == '') {
  605. this.$util.msg('请选择咨询类别', 2000)
  606. return
  607. }
  608. if (!this.remarksParams.pinceSensitve) {
  609. this.$util.msg('请选择价格敏感度', 2000)
  610. return
  611. }
  612. if (!this.remarksParams.satisfied) {
  613. this.$util.msg('请选择意向程度', 2000)
  614. return
  615. }
  616. if (!this.remarksParams.followup) {
  617. this.$util.msg('请选择跟进状态', 2000)
  618. return
  619. }
  620. }
  621. //统一处理静态标签
  622. let staticLabelsList = []
  623. this.staticLabelsList.forEach( el =>{
  624. if(el.label !== ''){
  625. staticLabelsList.push(el.label)
  626. }
  627. })
  628. console.log('staticLabelsList', staticLabelsList)
  629. //统一处理动态标签
  630. let trendsLabelsList = []
  631. this.trendsLabelsList.forEach( (el) =>{
  632. if(el.label !== ''){
  633. trendsLabelsList.push(el.label)
  634. }
  635. })
  636. console.log('trendsLabelsList', trendsLabelsList)
  637. // 标签必须有一项
  638. if (!this.firstLabelList.length && !trendsLabelsList.length && !staticLabelsList.length) {
  639. this.modal = true
  640. this.contentModalText = '标签必须选择或者填写一项'
  641. return
  642. }
  643. if(this.firstLabelList.length > 0){
  644. this.remarksParams.remarks = JSON.stringify(this.firstLabelList)
  645. }
  646. if(trendsLabelsList.length > 0){
  647. this.remarksParams.trendsKeyword = JSON.stringify(trendsLabelsList)
  648. }
  649. if(staticLabelsList.length > 0){
  650. this.remarksParams.stateKeyword = JSON.stringify(staticLabelsList)
  651. }
  652. console.log('remarksParams',this.remarksParams)
  653. this.getUserClubVisitorSaveAdd({ params: JSON.stringify(this.remarksParams) })
  654. },
  655. // 调用保存
  656. async getUserClubVisitorSaveAdd(params){
  657. try{
  658. await this.UserService.getUserClubVisitorSaveAdd(params)
  659. this.$util.msg('保存成功', 2000, true, 'success')
  660. let VisitorInfo = {
  661. questionManId: this.remarksParams.questionManId,
  662. questionMan: this.questionMan
  663. }
  664. this.$api.setStorage('VisitorInfo', VisitorInfo)
  665. setTimeout(() => {
  666. uni.navigateBack({
  667. delta: 1
  668. })
  669. },2000)
  670. }catch(error){
  671. this.$util.msg(error.msg, 2000)
  672. }
  673. },
  674. choiceCategorys(category,index){
  675. // 选择类别
  676. category.isChecked = !category.isChecked
  677. if (category.isChecked) {
  678. if(!this.contains(this.checkedCategorysList,category.id)){
  679. this.checkedCategorysList.push(category.id)
  680. }
  681. } else {
  682. this.checkedCategorysList.splice(this.checkedCategorysList.indexOf(category.id),1)
  683. }
  684. this.remarksParams.consult = this.checkedCategorysList.join(',')
  685. },
  686. handleShowReportPopup(){
  687. // 显示报备弹窗
  688. if (this.isHashReport) {
  689. this.$util.msg('请取消已有关联后再重新关联报备', 2000)
  690. return
  691. }
  692. this.isReportpopup = true
  693. },
  694. handleShowGoodPopup() {
  695. // 显示添加商品弹窗
  696. this.isGoodspopup = true
  697. },
  698. handleClean() {
  699. //删除选择的商品
  700. this.remarksParams.productId === 0
  701. this.handleGoods = []
  702. },
  703. handleChoiceaGoodsData(data) {
  704. console.log('data', data)
  705. this.handleGoods = []
  706. this.remarksParams.productId = data.productId
  707. this.handleGoods.push(data)
  708. },
  709. handleChoiceaReportData(data) {
  710. console.log('data', data)
  711. this.reportText = data.reportText
  712. this.remarksParams.reportId = data.reportId
  713. },
  714. contains(arr, val) {// 校验
  715. return arr.some(item => item === val)
  716. },
  717. uploadFile(array) {
  718. //上传资质文件
  719. console.log(array)
  720. uploadFilePdfDocDocxXlsx().then(res => {
  721. let data = JSON.parse(res.data).data
  722. let obj = {
  723. fileName: uni.getStorageSync('fileName'),
  724. ossName: data.ossName
  725. }
  726. array.push(obj)
  727. }).catch(err=>{
  728. console.log(err)
  729. })
  730. },
  731. uploadPhotoFn(array) {
  732. //添加图片
  733. uploadFileImage().then(res => {
  734. array.push(JSON.parse(res.data).data)
  735. })
  736. },
  737. deleteFileFn(array, index) {
  738. console.log(array)
  739. //删除文件
  740. this.UploadService.PostFileDelete({
  741. ossName: array[index].ossName
  742. })
  743. .then(res => {
  744. array.splice(index, 1)
  745. })
  746. .catch(error => {
  747. console.log('删除文件异常提示===>', error.msg)
  748. })
  749. },
  750. deletePhotoFn(array, index) {
  751. //删除图片
  752. array.splice(index, 1)
  753. },
  754. previewImg(image, index) {
  755. //顶部商品图片预览
  756. isPreviewImg = true
  757. let previewUrls = image
  758. uni.previewImage({
  759. current: index, //图片索引
  760. urls: previewUrls, //必须是http图片,本地图片无效
  761. longPressActions: ''
  762. })
  763. },
  764. conInput(e) {
  765. //备注文字字数限制
  766. let value = e.detail.value
  767. let len = parseInt(value.length)
  768. if (len > this.max) return
  769. this.min = len
  770. if (this.min == 200) {
  771. this.$util.msg('您输入的字数已达上限', 2000)
  772. }
  773. },
  774. handleClick() {
  775. this.modal = false
  776. },
  777. followupFilters(value) {
  778. // 订单来源
  779. const map = {
  780. 1: '跟进中',
  781. 2: '跟进完成',
  782. 3: '已放弃'
  783. }
  784. return map[value]
  785. },
  786. pinceFilters(value) {
  787. // 意向
  788. const map = {
  789. 1: '敏感',
  790. 2: '适中',
  791. 3: '不敏感',
  792. 4: '不明确'
  793. }
  794. return map[value]
  795. },
  796. intenActionsFilters(value) {
  797. // 意向
  798. const map = {
  799. 1: '意向强烈',
  800. 2: '意向一般',
  801. 3: '意向平淡',
  802. 4: '随便看看'
  803. }
  804. return map[value]
  805. },
  806. sourceActionsFilters(value) {
  807. // 客户来源
  808. const map = {
  809. 0: '搜素引擎',
  810. 1: '小程序',
  811. 2: '公众号',
  812. 3: '小红书',
  813. 4: '微博',
  814. 5: '搜狐',
  815. 7: '抖音',
  816. 8: '视频号',
  817. 9: '朋友推荐',
  818. 6: '其他',
  819. }
  820. return map[value]
  821. },
  822. genderActionsFilters(value) {
  823. // 客户性别
  824. const map = {
  825. 0: '男',
  826. 1: '女'
  827. }
  828. return map[value]
  829. },
  830. additiveActionsFilters(value) {
  831. // 加群情况
  832. const map = {
  833. 0: '已加群',
  834. 1: '未加群'
  835. }
  836. return map[value]
  837. }
  838. },
  839. onShow() {}
  840. }
  841. </script>
  842. <style lang="scss">
  843. page {
  844. height: auto;
  845. background: #ffffff;
  846. }
  847. .remarks-content {
  848. width: 100%;
  849. height: auto;
  850. box-sizing: border-box;
  851. padding: 0 24rpx;
  852. padding-bottom: 160rpx;
  853. .list-view-title {
  854. width: 100%;
  855. height: auto;
  856. margin-bottom: 16rpx;
  857. margin-top: 20rpx;
  858. .list-view-h1 {
  859. line-height: 40rpx;
  860. font-size: $font-size-28;
  861. color: #333333;
  862. text-align: left;
  863. text {
  864. color: #ff2a2a;
  865. }
  866. }
  867. .list-view-p {
  868. line-height: 30rpx;
  869. color: #fea785;
  870. font-size: $font-size-20;
  871. }
  872. }
  873. .tui-remarks-content {
  874. width: 100%;
  875. height: auto;
  876. margin-bottom: 24rpx;
  877. .tui-remarks-goods-input {
  878. width: 100%;
  879. height: 180rpx;
  880. box-sizing: border-box;
  881. background-color: #f7f7f7;
  882. padding: 26rpx;
  883. border-radius: 6rpx;
  884. .input-add {
  885. width: 128rpx;
  886. height: 128rpx;
  887. line-height: 128rpx;
  888. float: left;
  889. text-align: center;
  890. box-sizing: border-box;
  891. border: 1px dashed #b2b2b2;
  892. border-radius: 6rpx;
  893. .iconfont {
  894. font-size: 44rpx;
  895. color: #b2b2b2;
  896. }
  897. }
  898. .input-text {
  899. height: 128rpx;
  900. box-sizing: border-box;
  901. padding: 0 32rpx;
  902. line-height: 128rpx;
  903. text-align: left;
  904. font-size: 26rpx;
  905. color: #b2b2b2;
  906. float: left;
  907. }
  908. }
  909. .tui-remarks-showgoods {
  910. width: 100%;
  911. height: 180rpx;
  912. box-sizing: border-box;
  913. .tui-remarks-btn {
  914. width: 90rpx;
  915. height: 180rpx;
  916. float: right;
  917. .btn {
  918. width: 100%;
  919. height: 90rpx;
  920. float: left;
  921. line-height: 90rpx;
  922. text-align: center;
  923. font-size: 26rpx;
  924. &.delete {
  925. color: #f94b4b;
  926. }
  927. &.update {
  928. color: #1890f9;
  929. }
  930. }
  931. }
  932. .tui-remarks-goods {
  933. width: 612rpx;
  934. height: 180rpx;
  935. box-sizing: border-box;
  936. background-color: #f7f7f7;
  937. padding: 26rpx;
  938. border-radius: 6rpx;
  939. float: left;
  940. .goods-image {
  941. width: 128rpx;
  942. height: 128rpx;
  943. float: left;
  944. image {
  945. width: 128rpx;
  946. height: 128rpx;
  947. display: block;
  948. border-radius: 4rpx;
  949. }
  950. }
  951. .goods-main {
  952. width: 432rpx;
  953. height: 128rpx;
  954. box-sizing: border-box;
  955. padding-left: 32rpx;
  956. float: right;
  957. .name {
  958. width: 100%;
  959. height: 60rpx;
  960. box-sizing: border-box;
  961. line-height: 60rpx;
  962. color: #333333;
  963. text-overflow: ellipsis;
  964. overflow: hidden;
  965. display: -webkit-box;
  966. -webkit-line-clamp: 1;
  967. line-clamp: 1;
  968. -webkit-box-orient: vertical;
  969. font-size: 26rpx;
  970. }
  971. .shop {
  972. line-height: 60rpx;
  973. color: #999999;
  974. font-size: 26rpx;
  975. text-overflow: ellipsis;
  976. overflow: hidden;
  977. display: -webkit-box;
  978. -webkit-line-clamp: 1;
  979. line-clamp: 1;
  980. -webkit-box-orient: vertical;
  981. }
  982. }
  983. }
  984. }
  985. }
  986. .list-view-radio {
  987. width: 100%;
  988. height: 90rpx;
  989. box-sizing: border-box;
  990. padding: 0 10rpx;
  991. border: 1px solid #b2b2b2;
  992. border-radius: 6rpx;
  993. margin-bottom: 30rpx;
  994. position: relative;
  995. &.btn {
  996. border: none;
  997. margin-top: 40rpx;
  998. }
  999. .input {
  1000. width: 100%;
  1001. height: 90rpx;
  1002. line-height: 90rpx;
  1003. float: left;
  1004. box-sizing: border-box;
  1005. font-size: $font-size-24;
  1006. color: #333333;
  1007. padding: 0 10rpx;
  1008. padding-right: 90rpx;
  1009. }
  1010. .iconfont {
  1011. width: 50rpx;
  1012. height: 90rpx;
  1013. display: block;
  1014. line-height: 90rpx;
  1015. text-align: center;
  1016. font-size: 30rpx;
  1017. color: #999999;
  1018. position: absolute;
  1019. right: 0;
  1020. top: 0;
  1021. }
  1022. }
  1023. .list-view-list-main {
  1024. width: 100%;
  1025. height: auto;
  1026. box-sizing: border-box;
  1027. margin-bottom: 30rpx;
  1028. position: relative;
  1029. .list-label-list{
  1030. width: 100%;
  1031. height: auto;
  1032. box-sizing: border-box;
  1033. .list-label{
  1034. display: inline-block;
  1035. padding: 0 20rpx;
  1036. height: 48rpx;
  1037. line-height: 48rpx;
  1038. background: #F7F7F7;
  1039. text-align: center;
  1040. margin-right: 20rpx;
  1041. margin-bottom: 20rpx;
  1042. font-size: 26rpx;
  1043. color: #666666;
  1044. &.active{
  1045. background: #FEF6F3;
  1046. color: #FF5B00;
  1047. }
  1048. }
  1049. }
  1050. .list-view-list {
  1051. width: 100%;
  1052. height: 90rpx;
  1053. box-sizing: border-box;
  1054. margin-bottom: 30rpx;
  1055. .list-view-input {
  1056. width: 614rpx;
  1057. height: 90rpx;
  1058. float: left;
  1059. position: relative;
  1060. .input {
  1061. width: 614rpx;
  1062. height: 90rpx;
  1063. box-sizing: border-box;
  1064. padding: 0 20rpx;
  1065. border: 1px solid #b2b2b2;
  1066. border-radius: 6rpx;
  1067. font-size: $font-size-24;
  1068. color: #333333;
  1069. }
  1070. .list-view-assAction {
  1071. width: 614rpx;
  1072. min-height: 270rpx;
  1073. box-sizing: border-box;
  1074. padding: 10rpx 0;
  1075. background: rgba(255, 255, 255, 1);
  1076. box-shadow: 0px 2px 20px rgba(0, 0, 0, 0.15);
  1077. border-radius: 6rpx;
  1078. position: absolute;
  1079. top: -288rpx;
  1080. left: 0;
  1081. z-index: 999;
  1082. overflow: hidden;
  1083. .tui-popup-scroll {
  1084. width: 100%;
  1085. height: 270rpx;
  1086. }
  1087. .ass-list {
  1088. width: 100%;
  1089. height: 90rpx;
  1090. box-sizing: border-box;
  1091. padding: 0 24rpx;
  1092. line-height: 90rpx;
  1093. font-size: $font-size-26;
  1094. color: #666666;
  1095. text-align: left;
  1096. border-bottom: 1px solid #e1e1e1;
  1097. &:last-child{
  1098. border-bottom: none;
  1099. }
  1100. }
  1101. }
  1102. }
  1103. .list-view-btn {
  1104. width: 88rpx;
  1105. height: 90rpx;
  1106. float: right;
  1107. text-align: center;
  1108. line-height: 90rpx;
  1109. .icon-zengjia {
  1110. color: #1890f9;
  1111. font-size: $font-size-48;
  1112. }
  1113. .icon-shanchu4 {
  1114. color: #FF5B00;
  1115. font-size: $font-size-48;
  1116. }
  1117. }
  1118. }
  1119. }
  1120. .remarks-category{
  1121. width: 100%;
  1122. float: left;
  1123. .label {
  1124. color: #666666;
  1125. font-size: 28rpx;
  1126. margin-right: 50rpx;
  1127. }
  1128. .checkbox-list {
  1129. height: 60rpx;
  1130. font-size: $font-size-28;
  1131. line-height: 60rpx;
  1132. border-radius: 10rpx;
  1133. margin-right: 20rpx;
  1134. margin-bottom: 10rpx;
  1135. box-sizing: border-box;
  1136. float: left;
  1137. .icon-yixuanze{
  1138. margin-right: 10rpx;
  1139. color: #FF5B00;
  1140. }
  1141. .icon-weixuanze{
  1142. margin-right: 10rpx;
  1143. color: #B2B2B2;
  1144. }
  1145. }
  1146. .item-text {
  1147. display: inline-block;
  1148. font-size: 26rpx;
  1149. color: #333333;
  1150. border-radius: 28rpx;
  1151. line-height: 50rpx;
  1152. }
  1153. }
  1154. .remarks-input {
  1155. width: 100%;
  1156. height: 90rpx;
  1157. line-height: 90rpx;
  1158. margin: 20rpx 0 0 0;
  1159. box-sizing: border-box;
  1160. .input {
  1161. width: 100%;
  1162. height: 90rpx;
  1163. line-height: 90rpx;
  1164. font-size: $font-size-26;
  1165. color: $text-color;
  1166. z-index: 1;
  1167. box-sizing: border-box;
  1168. border: 1px solid #b2b2b2;
  1169. padding: 0 16rpx;
  1170. border-radius: 6rpx;
  1171. }
  1172. }
  1173. .remarks-textarea {
  1174. width: 100%;
  1175. height: 226rpx;
  1176. padding: 16rpx;
  1177. margin: 20rpx 0 0 0;
  1178. border-radius: 6rpx;
  1179. position: relative;
  1180. border: 1px solid #b2b2b2;
  1181. box-sizing: border-box;
  1182. .textarea {
  1183. width: 100%;
  1184. height: 100%;
  1185. line-height: 36rpx;
  1186. font-size: $font-size-26;
  1187. color: $text-color;
  1188. z-index: 1;
  1189. }
  1190. .limit-text {
  1191. position: absolute;
  1192. right: 20rpx;
  1193. bottom: 16rpx;
  1194. line-height: 44rpx;
  1195. font-size: $font-size-24;
  1196. color: #b2b2b2;
  1197. }
  1198. }
  1199. .list-view {
  1200. width: 100%;
  1201. height: 40rpx;
  1202. margin-top: 20rpx;
  1203. .list-view-file {
  1204. width: 132rpx;
  1205. height: 44rpx;
  1206. line-height: 44rpx;
  1207. font-size: $font-size-20;
  1208. text-align: center;
  1209. color: #ffffff;
  1210. background-color: $color-system;
  1211. border-radius: 8rpx;
  1212. float: left;
  1213. margin-top: 10rpx;
  1214. }
  1215. .list-view-text {
  1216. width: 100%;
  1217. float: left;
  1218. .input {
  1219. width: 560rpx;
  1220. height: 44rpx;
  1221. box-sizing: border-box;
  1222. line-height: 44rpx;
  1223. color: #333333;
  1224. text-overflow: ellipsis;
  1225. overflow: hidden;
  1226. display: -webkit-box;
  1227. -webkit-line-clamp: 1;
  1228. line-clamp: 1;
  1229. -webkit-box-orient: vertical;
  1230. float: left;
  1231. }
  1232. .delbtn {
  1233. width: 96rpx;
  1234. height: 44rpx;
  1235. border-radius: 8rpx;
  1236. background-color: #fff2ec;
  1237. font-size: $font-size-24;
  1238. color: #FF5B00;
  1239. line-height: 44rpx;
  1240. text-align: center;
  1241. float: left;
  1242. }
  1243. }
  1244. }
  1245. .list-view-upload {
  1246. width: 100%;
  1247. height: auto;
  1248. .photo-item {
  1249. display: inline-block;
  1250. width: 112rpx;
  1251. height: 112rpx;
  1252. margin: 10rpx 0;
  1253. margin-right: 25rpx;
  1254. border-radius: 10rpx;
  1255. border: 1px solid #f5f5f5;
  1256. position: relative;
  1257. float: left;
  1258. &.add {
  1259. width: 112rpx;
  1260. height: 112rpx;
  1261. border-color: #b2b2b2;
  1262. text-align: center;
  1263. line-height: 112rpx;
  1264. margin-right: 0rpx;
  1265. .icon-jiahao {
  1266. font-size: $font-size-44;
  1267. color: #b2b2b2;
  1268. font-weight: bold;
  1269. }
  1270. }
  1271. .icon-iconfontguanbi {
  1272. width: 30rpx;
  1273. height: 30rpx;
  1274. border-radius: 50%;
  1275. display: block;
  1276. position: absolute;
  1277. right: -10rpx;
  1278. top: -10rpx;
  1279. background: #f94b4b;
  1280. text-align: center;
  1281. line-height: 30rpx;
  1282. color: #ffffff;
  1283. font-size: $font-size-22;
  1284. }
  1285. image {
  1286. width: 112rpx;
  1287. height: 112rpx;
  1288. border-radius: 10rpx;
  1289. }
  1290. }
  1291. .photo-list {
  1292. width: 100%;
  1293. height: 116rpx;
  1294. overflow: hidden;
  1295. white-space: nowrap;
  1296. display: flex;
  1297. align-items: flex-start;
  1298. }
  1299. }
  1300. }
  1301. .remarks-btn {
  1302. width: 100%;
  1303. padding-top: 20rpx;
  1304. position: fixed;
  1305. bottom: 0;
  1306. left: 0;
  1307. background-color: #ffffff;
  1308. z-index: 99;
  1309. .edit-button-canel {
  1310. width: 100%;
  1311. height: 88rpx;
  1312. line-height: 88rpx;
  1313. text-align: center;
  1314. color: #FF5B00;
  1315. font-size: $font-size-24;
  1316. }
  1317. .edit-button {
  1318. width: 600rpx;
  1319. height: 90rpx;
  1320. background: $btn-confirm;
  1321. line-height: 90rpx;
  1322. text-align: center;
  1323. color: #ffffff;
  1324. font-size: $font-size-30;
  1325. margin: 0 auto;
  1326. border-radius: 45rpx;
  1327. }
  1328. }
  1329. </style>