order-details.vue 17 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519
  1. <template>
  2. <view class="container details clearfix" :style="{paddingBottom :isIphoneX ? (130+68)+'rpx' : '130rpx'}">
  3. <!-- 自定义返回 -->
  4. <header-back :systeminfo='systeminfo' :navbar-data='nvabarData' :headerBtnPosi ="headerBtnPosi" :isShare='isOrderShare'></header-back>
  5. <view class="container-details" :style="{paddingTop:navbarHeight+'px'}">
  6. <view class="status-text">
  7. <view class="view-type">{{ information.status | TextFormat }}</view>
  8. <text class="bage-buss" v-if="information.orderSubmitType == 3 || information.orderSubmitType == 4">协销</text>
  9. <text class="bage-auto" v-if="information.orderSubmitType == 0 || information.orderSubmitType == 1 ||information.orderSubmitType == 2">自主</text>
  10. </view>
  11. <!-- 地址选择 -->
  12. <order-address ref="orderAddress" v-if="isRequest" :addressData="addressData"></order-address>
  13. <!-- 商品 -->
  14. <goods-list ref='goods' v-if="isRequest" :shopOrderData="shopOrderData" :information="information" @popupClick="hanldePopupFn"></goods-list>
  15. <!-- 订单信息 -->
  16. <order-information ref="information" v-if="isRequest" :information="information"></order-information>
  17. <!-- 发票信息 -->
  18. <invoice-tent ref="invoice" v-if="isRequest" :orderInvoice="orderInvoice"></invoice-tent>
  19. <!-- 转账信息 -->
  20. <!-- <transfe-record ref="transfe" v-if="receiptAmount == 0 || onlinePayFlag == '1'"></transfe-record> -->
  21. <!-- 支付记录 -->
  22. <payment-record ref="payment" v-if="isRequest" :discernReceiptList="discernReceiptList" :receiptAmount="receiptAmount"></payment-record>
  23. <!-- 退款记录 -->
  24. <refund-record ref="refund" v-if="isRequest" :returnedPurchaseList="returnedPurchaseList" :returnedPurchaseFee="returnedPurchaseFee"></refund-record>
  25. <view class="clause" v-if="information.secondHandOrderFlag!=1" @tap.stop="openclauseConten(clauseData.id)" :class="clauseData.name=='无条款'?'noclick':''">
  26. 售后条款:<label class="text" :class="clauseData.name=='无条款'?'color-bg':''">{{clauseData.name}}</label>
  27. </view>
  28. <!-- 底部button -->
  29. <order-button ref="orderButton"
  30. v-if= "isRequest"
  31. :status= "btnStatus"
  32. :shareCode= "shareCode"
  33. :order="orderInfo"
  34. @buttonConfirm="handButtonConfirm">
  35. </order-button>
  36. </view>
  37. <!-- 付款弹窗 -->
  38. <order-model v-if="isPayModel"
  39. :payModelData="payModelData"
  40. :modelType='modelType'
  41. @cancelConfirm = "hanldCancelConfirm"
  42. @paymentConfirm ='hanldPaymentConfirm'/>
  43. <!-- 分享弹窗 -->
  44. <share-alert :orderID="orderID"
  45. v-if="isShareModal"
  46. @btnConfirm ='onShareAppMessage'>
  47. </share-alert>
  48. <!-- 促销活动弹窗 -->
  49. <activi-popup :Promotion="handlerPros" :popupShow="popupShow"></activi-popup>
  50. </view>
  51. </template>
  52. <script>
  53. import headerBack from '@/components/cm-module/headerNavbar/header-back' //自定义导航
  54. import orderAddress from '@/components/cm-module/orderDetails/orderAddress' //地址信息
  55. import goodsList from '@/components/cm-module/orderDetails/goodsList' //商品列表
  56. import invoiceTent from '@/components/cm-module/orderDetails/invoiceTent' //发票信息
  57. import orderInformation from '@/components/cm-module/orderDetails/orderInformation' //订单信息
  58. import transfeRecord from '@/components/cm-module/orderDetails/transfeRecord' //转账信息
  59. import paymentRecord from '@/components/cm-module/orderDetails/paymentRecord' //支付记录
  60. import refundRecord from '@/components/cm-module/orderDetails/refundRecord' //退款记录
  61. import orderButton from '@/components/cm-module/orderDetails/orderButton' //底部按钮
  62. import shareAlert from '@/components/cm-module/modelAlert/shareAlert.vue' //分享弹窗
  63. import orderModel from '@/components/cm-module/modelAlert/order-alert' //付款弹窗
  64. import activiPopup from "@/components/cm-module/orderDetails/activipopu" //促销活动弹窗
  65. export default {
  66. components:{
  67. headerBack,
  68. orderInformation,
  69. orderAddress,
  70. invoiceTent,
  71. goodsList,
  72. transfeRecord,
  73. paymentRecord,
  74. refundRecord,
  75. orderButton,
  76. shareAlert,
  77. orderModel,
  78. activiPopup
  79. },
  80. data() {
  81. return {
  82. state:0,
  83. userID:'',
  84. orderID:'',
  85. shareCode:'', //分享码
  86. shareType:'', //分享登录页过来记录的状态
  87. cellPhone:'', //客服电话
  88. payStatus:0,
  89. btnStatus:0, //按钮组件状态
  90. onlinePayFlag:'',
  91. isRequest:false, //是否加载完成渲染子组件
  92. isOrderShare:false,
  93. isShareModal:false,
  94. isPayModel:false,
  95. modelType:0,
  96. orderInfo:{},
  97. alertOrderInfo:{},
  98. payModelData:{},
  99. addressData:{}, //地址信息初始化
  100. information:{}, //订单信息初始化
  101. shopOrderData:{}, //商品信息初始化
  102. orderInvoice:{}, //发票信息初始化
  103. returnedPurchaseList:{}, //退款信息初始化
  104. discernReceiptList:{}, //支付信息初始化
  105. receiptAmount:0, //支付金额
  106. returnedPurchaseFee:0, //退款金额
  107. navbarHeight:'',
  108. headerBtnPosi: this.setHeaderBtnPosi(), //获取设备顶部胶囊高度
  109. systeminfo: this.setSysteminfo(), //获取设备信息
  110. isIphoneX:this.$store.state.isIphoneX,
  111. CustomBar:this.CustomBar,// 顶部导航栏高度
  112. popupShow:false,
  113. handlerPros:{},
  114. nvabarData: { //顶部自定义导航
  115. showCapsule: 1, // 是否显示左上角图标 1表示显示 0表示不显示
  116. title: '订单详情', // 导航栏 中间的标题
  117. },
  118. clauseData:{},
  119. }
  120. },
  121. onLoad(option){
  122. console.log(option)
  123. this.shareType = option.type;
  124. this.orderID = option.orderID
  125. if(this.shareType ==='share'){
  126. this.state = 0
  127. this.isOrderShare = true
  128. }else if(option.type === 'confim' ||option.type === 'search'){
  129. this.state = 0
  130. }else{
  131. this.state = option.state
  132. }
  133. this.getHeaderTopHeight()
  134. this.initOrderDetaileData()
  135. },
  136. filters:{
  137. TextFormat(status) {//处理金额
  138. let HtmlText,
  139. typeTextObject={
  140. 0:'待确认',
  141. 4:'交易完成',
  142. 5:'订单完成',
  143. 6:'已关闭',
  144. 7:'交易全退',
  145. 77:'交易全退',
  146. 11:'待付款待发货',
  147. 12:'待付款部分发货',
  148. 13:'待付款已发货',
  149. 21:'部分付款待发货',
  150. 22:'部分付款部分发货',
  151. 23:'部分付款已发货',
  152. 31:'已付款待发货',
  153. 32:'已付款部分发货',
  154. 33:'已付款已发货',
  155. 111:'待付款待发货',
  156. };
  157. Object.keys(typeTextObject).forEach(key => {
  158. if(key == status){
  159. HtmlText = typeTextObject[key]
  160. }
  161. })
  162. return HtmlText
  163. },
  164. },
  165. methods: {
  166. openclauseConten(id){
  167. this.$api.navigateTo(`/pages/service/sellconten?clauseId=${id}`)
  168. },
  169. initOrderDetaileData(){//初始化页面数据@参数:订单ID
  170. this.OrderService.QueryOrderDetails({ orderID : this.orderID }).then(response =>{
  171. let resData = response.data;
  172. this.isRequest = true
  173. this.orderInfo = resData.order
  174. this.userID = resData.order.userID
  175. this.shareCode = resData.shareCode
  176. this.addressData = resData.userInfo
  177. this.information = resData.order
  178. this.btnStatus = resData.order.status
  179. this.payStatus = resData.order.payStatus
  180. this.payableAmount = resData.order.payableAmount
  181. this.shopOrderData = resData.shopOrderList
  182. this.orderInvoice = resData.orderInvoice
  183. this.onlinePayFlag = resData.order.onlinePayFlag
  184. this.returnedPurchaseList = resData.returnedPurchaseList
  185. this.discernReceiptList = resData.discernReceiptList
  186. this.receiptAmount = resData.order.receiptAmount
  187. this.returnedPurchaseFee = resData.order.returnedPurchaseFee
  188. this.clauseData = resData.clause
  189. }).catch(error =>{
  190. this.$util.modal('提示','订单查询失败,请稍后重试~','确定','',false,() =>{
  191. this.$api.switchTabTo('/pages/tabBar/home/index')
  192. })
  193. })
  194. },
  195. handButtonConfirm(data){//监听点击时间的按钮类型并执行...
  196. this.handShowAlert(data)
  197. },
  198. handShowAlert(data){//判断点击的按钮类型并执行...
  199. switch(data.type){
  200. case 'delete':
  201. this.handOrderDetele();
  202. break
  203. case 'cancel':
  204. this.handCenceConfirm();
  205. break
  206. case 'query':
  207. this.$api.navigateTo('/pages/user/order/order-logistics?orderID='+this.orderID)
  208. break
  209. case 'confirm':
  210. this.handOrderConfirm()
  211. break
  212. case 'pay':
  213. this.getOrderPaymentValidation(data)
  214. break
  215. case 'confirmation':
  216. this.handOrderConfirmation()
  217. break
  218. case 'payment':
  219. this.hanldConfirmFn(data.orderId);
  220. break
  221. }
  222. },
  223. getOrderPaymentValidation(data){//监听根据付款状态做操作
  224. this.OrderService.OrderPaymentValidation({orderId:data.orderId}).then(response =>{
  225. let dataCode = response.data.code
  226. this.payModelData = response.data
  227. switch(dataCode){
  228. case 1:
  229. this.isPayModel = true;
  230. this.modelType = 1
  231. break;
  232. case 2:
  233. this.isPayModel = true;
  234. this.modelType = 2
  235. break;
  236. case -1:
  237. this.$util.modal('','订单已申请全部退款,无需再付款!','确定','',false,() =>{})
  238. break;
  239. default:
  240. if(response.data.onlinePayFlag == '1'){
  241. this.$api.navigateTo(`/pages/user/order/order-payment?type=onlinePay&Amount=${response.data.pendingPayments}&orderID=${data.orderId}`)
  242. }else{
  243. this.$api.navigateTo(`/pages/user/order/order-payment?type=payfirm&orderID=${data.orderId}`)
  244. }
  245. }
  246. }).catch(error =>{
  247. this.$util.msg(error.msg,2000)
  248. })
  249. },
  250. hanldPaymentConfirm(data){//余额抵扣跳转
  251. this.OrderService.OrderBalanceDeduction({orderId:data.order.orderId}).then(response =>{
  252. if(data.type === 2){
  253. let _data = {orderID:data.order.orderId}
  254. this.$api.navigateTo(`/pages/user/order/success?type=deduction&data=${JSON.stringify({data:_data})}`)
  255. }else{
  256. if(data.order.onlinePayFlag === '1'){
  257. this.$api.navigateTo(`/pages/user/order/order-payment?type=onlinePay&Amount=${data.order.pendingPayments}&orderID=${data.order.orderId}`)
  258. }else{
  259. this.$api.navigateTo(`/pages/user/order/order-payment?type=payfirm&orderID=${data.order.orderId}`)
  260. }
  261. }
  262. }).catch(error =>{
  263. this.$util.msg(error.msg,2000)
  264. })
  265. },
  266. hanldCancelConfirm(data){//不使用余额抵扣直接跳转收银台
  267. if(data.onlinePayFlag == '1'){
  268. this.$api.navigateTo(`/pages/user/order/order-payment?type=onlinePay&Amount=${this.orderInfo.pendingPayments}&orderID=${data.orderId}`)
  269. }else{
  270. this.$api.navigateTo(`/pages/user/order/order-payment?type=payfirm&orderID=${data.orderId}`)
  271. }
  272. },
  273. hanldConfirmFn (orderId){//确认打款供应商
  274. this.$util.modal('提示','确定委托采美平台打款给供应商吗?确定之前请务必确保货品完好?','确定','取消',true,() =>{
  275. this.OrderService.confirmpayment({orderID:orderId,userId:this.userID}).then(response =>{
  276. this.$util.msg('确认成功',2000,true,'success');
  277. setTimeout(() => {
  278. this.getOrderDatainit(this.currentTab)
  279. },2000)
  280. }).catch(error =>{
  281. this.$util.msg(error.msg,2000)
  282. })
  283. })
  284. },
  285. handOrderConfirm(){//确认收货
  286. this.$util.modal('提示','是否确认收货','确定','取消',true,() =>{
  287. this.OrderService.ConfirmReceipt({orderID:this.orderID}).then(response =>{
  288. this.$util.msg(response.msg,2000,true,'success');
  289. this.initOrderDetaileData()
  290. }).catch(error =>{
  291. this.$util.msg(error.msg,2000)
  292. })
  293. })
  294. },
  295. handOrderConfirmation (){//确认订单
  296. this.$util.modal('提示','确认此订单?','确定','取消',true,() =>{
  297. this.OrderService.AffirmOrder({orderID:this.orderID}).then(response =>{
  298. this.$util.msg(response.msg,2000,true,'success');
  299. this.initOrderDetaileData()
  300. }).catch(error =>{
  301. this.$util.msg(error.msg,2000)
  302. })
  303. })
  304. },
  305. handOrderDetele(){//删除订单
  306. this.$util.modal('提示','确认删除该订单吗?','确定','取消',true,() =>{
  307. this.OrderService.DeleteOrder({orderID:this.orderID}).then(response =>{
  308. this.$util.msg(response.msg,2000,true,'success');
  309. setTimeout(() => {
  310. if(this.shareType ==='share'){
  311. this.$api.switchTabTo('/pages/tabBar/home/index')
  312. }else{
  313. this.$api.redirectTo(`/pages/user/order/order-list?type=detele&state=${this.state}`)
  314. }
  315. },500)
  316. }).catch(error =>{
  317. this.$util.msg(error.msg,2000)
  318. })
  319. })
  320. },
  321. handCenceConfirm(){//取消订单
  322. this.$util.modal('提示','确认取消该订单吗?','确定','取消',true,() =>{
  323. this.OrderService.CancelOrder({orderID:this.orderID}).then(response =>{
  324. this.$util.msg(response.msg,2000,true,'success');
  325. this.initOrderDetaileData()
  326. }).catch(error =>{
  327. this.$util.msg(error.msg,2000)
  328. })
  329. })
  330. },
  331. onShareAppMessage(res){//分享转发
  332. this.isShareModal = false
  333. if (res.from === 'button') {
  334. // 来自页面内转发按钮
  335. }
  336. return {
  337. title: '您有新的分享订单,快来查看吧~',
  338. path: `/pages/user/order/order-sharelogin?orderID=${this.orderID}&userID=${this.userID}`,
  339. imageUrl:'https://img.caimei365.com/group1/M00/03/95/Cmis216Sk_SABnOFABZCgCzFV_g063.png'
  340. }
  341. },
  342. hanldePopupFn(data){//监听活动内容
  343. this.popupShow = true
  344. this.handlerPros = data
  345. },
  346. getHeaderTopHeight(){
  347. let statusBarHeight = this.systeminfo.statusBarHeight // 状态栏高度
  348. let headerPosi = this.headerBtnPosi
  349. let btnPosi = { // 胶囊实际位置,坐标信息不是左上角原点
  350. height: headerPosi.height,
  351. width: headerPosi.width,
  352. // 胶囊top - 状态栏高度
  353. top: headerPosi.top - statusBarHeight,
  354. // 胶囊bottom - 胶囊height - 状态栏height (现胶囊bottom 为距离导航栏底部的长度)
  355. bottom: headerPosi.bottom - headerPosi.height - statusBarHeight,
  356. // 屏幕宽度 - 胶囊right
  357. right: this.systeminfo.screenWidth - headerPosi.right
  358. }
  359. this.navbarHeight= headerPosi.bottom + btnPosi.bottom// 原胶囊bottom + 现胶囊bottom
  360. },
  361. setHeaderBtnPosi(){
  362. // 获得胶囊按钮位置信息
  363. let headerBtnPosi = uni.getMenuButtonBoundingClientRect();
  364. return headerBtnPosi
  365. },
  366. setSysteminfo(){
  367. let systeminfo;
  368. uni.getSystemInfo({ // 获取设备信息
  369. success: (res) => {
  370. systeminfo = res
  371. },
  372. })
  373. return systeminfo
  374. },
  375. },
  376. onShow() {
  377. }
  378. }
  379. </script>
  380. <style lang="scss">
  381. page {
  382. height: auto;
  383. background:#F7F7F7;
  384. }
  385. .details{
  386. padding-bottom: 130rpx;
  387. }
  388. .btn-hover{
  389. background: #FFFFFF;
  390. }
  391. .animation{
  392. /* transition: transform 0.3s ease;*/
  393. transition-property: transform;
  394. transition-duration: 0.3s;
  395. transition-timing-function: ease;
  396. }
  397. .invoice-balance{
  398. width: 702rpx;
  399. height: auto;
  400. padding:0 24rpx;
  401. background: #FFFFFF;
  402. float: left;
  403. margin-top: 24rpx;
  404. margin-bottom: 24rpx;
  405. .balabce-t{
  406. width: 100%;
  407. height: 86rpx;
  408. line-height: 86rpx;
  409. font-size: $font-size-28;
  410. color: $text-color;
  411. float: left;
  412. .balabce-t-le{
  413. float: left;
  414. font-weight: bold;
  415. }
  416. .balabce-t-ri{
  417. float: right;
  418. display: flex;
  419. align-items: center;
  420. .money{
  421. display: flex;
  422. float: left;
  423. }
  424. .checkbox-box{
  425. display: flex;
  426. width: 60rpx;
  427. float: left;
  428. height: 100%;
  429. font-size: $font-size-24;
  430. .checkbox{
  431. width: 40rpx;
  432. text-align: right;
  433. box-sizing: border-box;
  434. text-align: center;
  435. text-decoration: none;
  436. border-radius: 0;
  437. -webkit-tap-highlight-color: transparent;
  438. overflow: hidden;
  439. }
  440. }
  441. }
  442. }
  443. .balabce-b{
  444. width: 100%;
  445. float: left;
  446. overflow: hidden;
  447. .balabce-b-text{
  448. width: 100%;
  449. line-height: 58rpx;
  450. font-size: $font-size-24;
  451. color: #FF2A2A;
  452. text-align: right;
  453. float: right;
  454. }
  455. &.balabce-b--hide {
  456. padding: 0 0;
  457. height: 0px;
  458. line-height: 0px;
  459. }
  460. }
  461. }
  462. .clause{
  463. float: right;
  464. font-size: 24rpx;
  465. color: #999999;
  466. margin-top: 60rpx;
  467. margin-right: 24rpx;
  468. &.noclick{
  469. pointer-events: none;
  470. }
  471. .text{
  472. color: #1890f9;
  473. &.color-bg{
  474. color: #333333;
  475. }
  476. }
  477. }
  478. .status-text{
  479. overflow: hidden;
  480. padding: 24rpx;
  481. background: #fff;
  482. font-size: $font-size-26;
  483. .view-type{
  484. float: left;
  485. color: #ff2a2a;
  486. }
  487. .bage-buss{
  488. display: inline-block;
  489. width: 72rpx;
  490. height: 32rpx;
  491. background:radial-gradient(circle,rgba(255,39,180,1) 0%,rgba(193,77,245,1) 100%);
  492. border-radius: 6rpx;
  493. line-height: 32rpx;
  494. text-align: center;
  495. color: #FFFFFF;
  496. margin-top: 10rpx;
  497. float: right;
  498. }
  499. .bage-auto{
  500. display: inline-block;
  501. width: 72rpx;
  502. height: 32rpx;
  503. background:radial-gradient(circle,rgba(255,180,39,1) 0%,rgba(245,142,77,1) 100%);
  504. border-radius: 6rpx;
  505. line-height: 32rpx;
  506. text-align: center;
  507. color: #FFFFFF;
  508. margin-top: 10rpx;
  509. float: right;
  510. }
  511. }
  512. </style>