record.vue 9.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366
  1. <template>
  2. <view class="scoped-box">
  3. <wm-watermark :text="userInfo2.phone" :num="50"></wm-watermark>
  4. <view class="scoped-list">
  5. <view class="sl-item">
  6. <view :class="'sli-top t' + dtlObj.deal_type">{{ dtlObj.deal_item }}[{{ thtObj[dtlObj.house_type] }}] {{ dtlObj.house_no }}
  7. <view v-if="dtlObj.create_by === userInfo2.id" class="r2" @click="pageTo('/pages/trade/create', { info: dtlObj })">编辑</view>
  8. <view class="r" @click="copyTextHandle(dtlObj)">喜报</view>
  9. </view>
  10. <view class="sli-body">
  11. <view class="sli-p2">总价:<view class="n">{{ dtlObj.price }}元</view> => {{(Number(dtlObj.price)/dtlObj.area).toFixed(2)}}元|<view class="n">{{ dtlObj.area }}㎡</view></view>
  12. <view class="sli-p4" v-if="dtlObj.discount">折扣:{{ dtlObj.discount || '未知' }}</view>
  13. <view class="sli-p1" @click="callHandle">客户:{{ dtlObj.customer_name }}({{ dtlObj.customer_phone }})
  14. <view class="i">[打电话]</view>
  15. </view>
  16. <view class="sli-p1">业务:{{ dtlObj.deal_clerk }}报备至{{ dtlObj.report_dept }}({{ tdtObj[dtlObj.deal_type] }})</view>
  17. <view class="sli-p1">佣金:<view class="n">{{ dtlObj.brokerage || '0' }}</view> 元
  18. <view v-if="dtlObj.brokerage_img" class="i" @click="previewImgHandle(dtlObj.brokerage_img, [dtlObj.brokerage_img])">[凭证]</view>
  19. | 返佣<view class="n">{{ dtlObj.rebate || '0' }}</view>元
  20. </view>
  21. <view class="sli-state">佣金审核:<view :class="'s s' + dtlObj.check_state">{{ checkStateObj[dtlObj.check_state]}}{{ dtlObj.check_state == 1 ? '或不需审核' : '' }}</view></view>
  22. <view class="sli-p3">成交日期:{{ dtlObj.deal_at }}</view>
  23. </view>
  24. </view>
  25. </view>
  26. <view>
  27. <view class="buystep-info u-p-32 box-shadow u-skeleton-fillet">
  28. <view class="name" @click="dial()">跟进记录:{{custTips || ''}}</view>
  29. <u-empty v-if="stepsLogList.length == 0" mode="list" text="暂无流水记录"></u-empty>
  30. <u-time-line>
  31. <u-time-line-item v-for="(item, index) in stepsLogList" :key="index">
  32. <template v-slot:node>
  33. <view class="u-node"><u-icon name="checkmark-circle" size="28" color="#2080f0"></u-icon></view>
  34. </template>
  35. <template v-slot:content>
  36. <view>
  37. <view class="u-order-title" v-if="item.info1">佣金到款日:{{item.info1}}</view>
  38. <view class="u-order-title" v-if="item.info2">回款比例:<view class="c2">{{item.info2}}%</view></view>
  39. <view class="u-order-title" v-if="item.info3">渠道或佣金开票情况:{{item.info3 == 1 ? '有开票' : '没有开票'}}</view>
  40. <view class="u-order-img" v-if="item.info4">
  41. <image class="img" :src="item.info4" mode="aspectFill" @click="previewImgHandle(item.info4, [item.info4])"></image>
  42. </view>
  43. <view class="u-order-desc" v-if="item.remark">{{item.remark}}</view>
  44. <view class="u-order-time">{{ item.nickname }} {{ item.create_at}}</view>
  45. </view>
  46. </template>
  47. </u-time-line-item>
  48. </u-time-line>
  49. </view>
  50. </view>
  51. <u-button v-if="dtlObj.create_by === userInfo2.id" class="f-btn bwin-btn-80 u-m-b-10" type="primary" @click="addHandle">添加跟进记录</u-button>
  52. <u-button v-if="dtlObj.check_state == 1 && dtlObj.deal_clerk === userInfo2.nickname" class="f-btn2 bwin-btn-80 u-m-b-10" type="warning" @click="submitCheck">提交审核</u-button>
  53. <u-button v-if="dtlObj.check_state > 1 && dtlObj.check_state < 5 && curStepId === userInfo2.id" class="f-btn2 bwin-btn-80 u-m-b-10" type="warning" @click="checkHandle">去审核</u-button>
  54. </view>
  55. </template>
  56. <script>
  57. import { arrToObj } from '@/utils'
  58. import wmWatermark from '@/components/wm-watermark/wm-watermark.vue'
  59. import uniCopy from '@/js_sdk/xb-copy/uni-copy.js'
  60. export default {
  61. components: {
  62. wmWatermark
  63. },
  64. data() {
  65. return {
  66. userInfo2: {},
  67. rsObj: {},
  68. curId: '',
  69. custTips: '',
  70. dtlObj: {},
  71. thtObj: {},
  72. tdtObj: {},
  73. checkStateObj: {},
  74. checkStateArr: [],
  75. curStepId: '',
  76. stepsLogList: [] // 进展
  77. };
  78. },
  79. onLoad(params) {
  80. this.curId = params.id
  81. const dictObj = uni.getStorageSync('MD_dict')
  82. this.thtObj = arrToObj(dictObj.trade_house_type)
  83. this.tdtObj = arrToObj(dictObj.trade_deal_type)
  84. this.checkStateObj = arrToObj(dictObj.check_state)
  85. this.checkStateArr = dictObj.check_state
  86. },
  87. onShow() {
  88. this.getData()
  89. },
  90. created () {
  91. this.userInfo2 = uni.getStorageSync('MD_userInfo2')
  92. },
  93. methods: {
  94. submitCheck () {
  95. uni.$msgConfirm('是否确定提交佣金审核?', () => {
  96. uni.api.cust.apitradesubmit({id:this.curId}).then(res =>{
  97. uni.$msg('提交成功!')
  98. this.getData()
  99. })
  100. })
  101. },
  102. checkHandle () {
  103. const item = {...this.dtlObj}
  104. uni.navigateTo({
  105. url: `/pages/trade/check?id=${item.id}&name=${item.deal_at}|${item.deal_clerk}的客户${item.customer_name}(${item.customer_phone})【佣金:${item.brokerage || 0}返佣:${item.rebate || 0}】`
  106. })
  107. },
  108. // 带监听器跳转
  109. pageTo(url, data) {
  110. /// xxxxx
  111. uni.navigateTo({
  112. url: url,
  113. events: {
  114. // 为指定事件添加一个监听器,获取被打开页面传送到当前页面的数据
  115. update: function(data) {
  116. // 当B页面运行 eventChannel.emit('update', { a:1 }); 时,会运行这里的代码逻辑。
  117. }
  118. },
  119. success: function(res) {
  120. // 通过eventChannel向被打开页面传送数据
  121. res.eventChannel.emit('data', data);
  122. }
  123. });
  124. },
  125. copyTextHandle (item) {
  126. uni.api.cust.apitradesubtotal({
  127. user_id: item.create_by,
  128. deal_at: item.deal_at,
  129. }).then(res =>{
  130. uniCopy({
  131. content: `【洪楼News】${item.deal_at}喜报
  132. 恭喜${item.deal_clerk}小伙伴今日成交${this.thtObj[item.house_type]}第1套
  133. 本月(${res.month}月)喜报总计:${res.month_total}套,个人总计:${res.user_total}套
  134. (1)客户姓名: ${item.customer_name}
  135. (2)报备电话:${item.customer_phone}
  136. (3)报备渠道:${item.report_dept}(${this.tdtObj[item.deal_type]})
  137. (4)成交项目:${item.deal_item}
  138. (5)具体房号:${item.house_no}
  139. (6)面积:${item.area}㎡
  140. (7)总价:${item.price}元
  141. (8)单价:${(Number(item.price)/item.area).toFixed(2)}元
  142. (9)折扣:${item.discount || '未知' }
  143. 齐心协力向前冲,洪楼业绩显峥嵘!`,
  144. success:(res)=>{
  145. uni.showToast({
  146. title: res,
  147. icon: 'none'
  148. })
  149. },
  150. error:(e)=>{
  151. uni.showToast({
  152. title: e,
  153. icon: 'none',
  154. duration:3000,
  155. })
  156. }
  157. })
  158. })
  159. },
  160. callHandle() {
  161. uni.makePhoneCall({
  162. phoneNumber: this.dtlObj.customer_phone || ''
  163. });
  164. },
  165. getData () {
  166. uni.api.cust.apitraderecordlist({trade_id:this.curId, page_size: 100}).then(res =>{
  167. let stepsLogList = res.list || []
  168. this.stepsLogList = [...stepsLogList]
  169. })
  170. uni.api.cust.apitradedetail({id:this.curId}).then(res =>{
  171. this.dtlObj = res || {}
  172. this.checkStateArr.forEach(item => {
  173. if (item.dict_value === this.dtlObj.check_state) {
  174. this.curStepId = item.option1
  175. }
  176. })
  177. })
  178. },
  179. previewImgHandle (current, urls){
  180. uni.previewImage({
  181. current,
  182. urls
  183. })
  184. },
  185. addHandle () {
  186. uni.navigateTo({
  187. url: `/pages/trade/recordedit?id=${this.curId}`
  188. })
  189. },
  190. }
  191. };
  192. </script>
  193. <style lang="scss">
  194. .scoped-list {
  195. padding-top: 20rpx;
  196. .sl-item {
  197. box-shadow: 0 0 5px #ccc;
  198. margin: 0 20rpx 20rpx;
  199. border-radius: 20rpx;
  200. overflow: hidden;
  201. background: #fff;
  202. .sli-top {
  203. position: relative;
  204. height: 70rpx;
  205. line-height: 70rpx;
  206. color: #fff;
  207. background: #2d8cf0;
  208. padding-left: 20rpx;
  209. &.t2 {
  210. background: #19be6b;
  211. }
  212. &.t3 {
  213. background: #795548;
  214. }
  215. .r {
  216. position: absolute;
  217. top: 0;
  218. right: 20rpx;
  219. height: 70rpx;
  220. line-height: 70rpx;
  221. color: #eee;
  222. }
  223. .r2 {
  224. position: absolute;
  225. top: 0;
  226. right: 100rpx;
  227. height: 70rpx;
  228. line-height: 70rpx;
  229. color: #eee;
  230. }
  231. }
  232. .sli-body {
  233. padding: 10rpx 20rpx;
  234. }
  235. .sli-p1 {
  236. color: #666;
  237. margin-bottom: 10rpx;
  238. font-size: 28rpx;
  239. .n {
  240. color: #ff9900;
  241. display: inline-block;
  242. font-weight: bold;
  243. }
  244. .i {
  245. color: #2d8cf0;
  246. font-weight: bold;
  247. display: inline-block;
  248. padding-right: 10rpx;
  249. }
  250. }
  251. .sli-p2 {
  252. color: #333;
  253. margin-bottom: 10rpx;
  254. .n {
  255. font-size: 30rpx;
  256. display: inline-block;
  257. font-weight: bold;
  258. color: #ed4014;
  259. }
  260. }
  261. .sli-p3 {
  262. color: #999;
  263. font-size: 28rpx;
  264. margin-bottom: 10rpx;
  265. }
  266. .sli-p4 {
  267. background: rgba(255,229,100,.3);
  268. color: #666;
  269. margin-bottom: 10rpx;
  270. }
  271. .sli-state {
  272. margin-bottom: 10rpx;
  273. color: #666;
  274. .s {
  275. font-weight: bold;
  276. background: #2d8cf0;
  277. padding: 6rpx 10rpx;
  278. color: #fff;
  279. border-radius: 10rpx;
  280. display: inline-block;
  281. font-size: 24rpx;
  282. &.s1 {
  283. background: #ccc;
  284. }
  285. &.s5 {
  286. background: #19be6b;
  287. }
  288. }
  289. }
  290. }
  291. }
  292. .buystep-info {
  293. width: 100%;
  294. padding: 0 0 32rpx;
  295. background-color: #fff;
  296. margin-bottom: 20rpx;
  297. border-radius: 10rpx;
  298. .name {
  299. font-weight: bold;
  300. margin-bottom: 20rpx;
  301. }
  302. .u-order-title {
  303. color: $u-main-color;
  304. font-size: $u-p1;
  305. margin-bottom: 10rpx;
  306. .c {
  307. display: inline-block;
  308. color: #2979ff;
  309. font-weight: bold;
  310. }
  311. .c2 {
  312. display: inline-block;
  313. color: #5a7fbd;
  314. font-weight: bold;
  315. }
  316. }
  317. .u-order-desc {
  318. // color: $u-content-color;
  319. color: #777;
  320. font-size: $u-p2;
  321. margin-bottom: 6rpx;
  322. }
  323. .u-order-img {
  324. .img {
  325. padding: 10rpx;
  326. border: 1PX solid #dcdcdc;
  327. width: 160rpx;
  328. height: 160rpx;
  329. margin-right: 20rpx;
  330. border-radius: 10rpx;
  331. overflow: hidden;
  332. }
  333. }
  334. .u-order-time {
  335. color: rgb(200, 200, 200);
  336. font-size: $u-p2;
  337. }
  338. }
  339. .scoped-box {
  340. padding-bottom: 110rpx;
  341. .f-btn {
  342. position: fixed;
  343. bottom: 0;
  344. left: 20rpx;
  345. right: 20rpx;
  346. z-index: 999999;
  347. }
  348. .f-btn2 {
  349. position: fixed;
  350. bottom: 20rpx;
  351. left: 20rpx;
  352. right: 20rpx;
  353. z-index: 999999;
  354. }
  355. }
  356. </style>