order-details.vue 11 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328
  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. <!-- 地址选择 -->
  7. <order-address ref="orderAddress" v-if="isRequest" :addressData="addressData"></order-address>
  8. <!-- 订单信息 -->
  9. <order-information ref="information" v-if="isRequest" :information="information"></order-information>
  10. <!-- 商品 -->
  11. <goods-list ref='goods' v-if="isRequest" :shopOrderData="shopOrderData"></goods-list>
  12. <!-- 发票信息 -->
  13. <invoice-tent ref="invoice" v-if="isRequest" :orderInvoice="orderInvoice"></invoice-tent>
  14. <!-- 转账信息 -->
  15. <transfe-record ref="transfe" v-if="isRequest"></transfe-record>
  16. <!-- 支付记录 -->
  17. <payment-record ref="payment" v-if="isRequest" :discernReceiptList="discernReceiptList" :receiptAmount="receiptAmount"></payment-record>
  18. <!-- 退款记录 -->
  19. <refund-record ref="refund" v-if="isRequest" :returnedPurchaseList="returnedPurchaseList" :returnedPurchaseFee="returnedPurchaseFee"></refund-record>
  20. <!-- 底部button -->
  21. <order-button ref="orderButton"
  22. v-if= "isRequest"
  23. :status= "btnStatus"
  24. :shareCode= "shareCode"
  25. @buttonConfirm="handButtonConfirm">
  26. </order-button>
  27. </view>
  28. <share-alert :orderID="orderID"
  29. v-if="isShareModal"
  30. @shareConfirm ='onShareAppMessage'>
  31. </share-alert>
  32. </view>
  33. </template>
  34. <script>
  35. import headerBack from '@/components/module/headerNavbar/header-back' //自定义导航
  36. import orderAddress from '@/components/module/orderDetails/orderAddress' //地址信息
  37. import goodsList from '@/components/module/orderDetails/goodsList' //商品列表
  38. import invoiceTent from '@/components/module/orderDetails/invoiceTent' //发票信息
  39. import orderInformation from '@/components/module/orderDetails/orderInformation' //订单信息
  40. import transfeRecord from '@/components/module/orderDetails/transfeRecord' //转账信息
  41. import paymentRecord from '@/components/module/orderDetails/paymentRecord' //支付记录
  42. import refundRecord from '@/components/module/orderDetails/refundRecord' //退款记录
  43. import orderButton from '@/components/module/orderDetails/orderButton' //底部按钮
  44. import shareAlert from '@/components/module/modelAlert/shareAlert.vue' //分享弹窗
  45. import { queryOrderDetails,cancelOrder,deleteOrder,confirmReceipt,affirmOrder } from "@/api/order.js"
  46. export default {
  47. components:{
  48. headerBack,
  49. orderInformation,
  50. orderAddress,
  51. invoiceTent,
  52. goodsList,
  53. transfeRecord,
  54. paymentRecord,
  55. refundRecord,
  56. orderButton,
  57. shareAlert,
  58. },
  59. data() {
  60. return {
  61. state:0,
  62. userID:'',
  63. orderID:'',
  64. shareCode:'', //分享码
  65. shareType:'', //分享登录页过来记录的状态
  66. cellPhone:'', //客服电话
  67. payStatus:0,
  68. btnStatus:0, //按钮组件状态
  69. isRequest:false, //是否加载完成渲染子组件
  70. isOrderShare:false,
  71. isShareModal:false,
  72. addressData:{}, //地址信息初始化
  73. information:{}, //订单信息初始化
  74. shopOrderData:{}, //商品信息初始化
  75. orderInvoice:{}, //发票信息初始化
  76. returnedPurchaseList:{}, //退款信息初始化
  77. discernReceiptList:{}, //支付信息初始化
  78. receiptAmount:0, //支付金额
  79. returnedPurchaseFee:0, //退款金额
  80. navbarHeight:'',
  81. headerBtnPosi: this.setHeaderBtnPosi(), //获取设备顶部胶囊高度
  82. systeminfo: this.setSysteminfo(), //获取设备信息
  83. isIphoneX:this.$store.state.isIphoneX,
  84. CustomBar:this.CustomBar,// 顶部导航栏高度
  85. nvabarData: { //顶部自定义导航
  86. showCapsule: 1, // 是否显示左上角图标 1表示显示 0表示不显示
  87. title: '订单详情', // 导航栏 中间的标题
  88. }
  89. }
  90. },
  91. onLoad(option){
  92. this.shareType = option.type;
  93. this.orderID = option.orderID
  94. if(this.shareType ==='share'){
  95. this.state = 0
  96. this.isOrderShare = true
  97. }else if(option.type === 'confim' ||option.type === 'search'){
  98. this.state = 0
  99. }else{
  100. this.state = option.state
  101. }
  102. this.getHeaderTopHeight()
  103. this.initOrderDetaileData()
  104. },
  105. methods: {
  106. initOrderDetaileData(){//初始化页面数据@参数:订单ID
  107. queryOrderDetails({ orderID : this.orderID }).then(response =>{
  108. let resData = response.data;
  109. this.isRequest = true
  110. this.userID = resData.order.userID
  111. this.shareCode = resData.shareCode
  112. this.addressData = resData.userInfo
  113. this.information = resData.order
  114. this.btnStatus = resData.order.status
  115. this.payStatus = resData.order.payStatus
  116. this.shopOrderData = resData.shopOrderList
  117. this.orderInvoice = resData.orderInvoice
  118. this.returnedPurchaseList = resData.returnedPurchaseList
  119. this.discernReceiptList = resData.discernReceiptList
  120. this.receiptAmount = resData.order.receiptAmount
  121. this.returnedPurchaseFee = resData.order.returnedPurchaseFee
  122. }).catch(response =>{
  123. this.$util.modal('提示','订单查询失败,请稍后重试~','确定','',false,() =>{
  124. this.$api.switchTabTo('/pages/tabBar/home/home')
  125. })
  126. })
  127. },
  128. handButtonConfirm(data){//监听点击时间的按钮类型并执行...
  129. this.handShowAlert(data)
  130. },
  131. handShowAlert(type){//判断点击的按钮类型并执行...
  132. switch(type){
  133. case 'delete':
  134. this.handOrderDetele();
  135. break
  136. case 'cancel':
  137. this.handCenceConfirm();
  138. break
  139. case 'query':
  140. this.$api.navigateTo('/pages/user/order/order-logistics?orderID='+this.orderID)
  141. break
  142. case 'confirm':
  143. this.handOrderConfirm()
  144. break
  145. case 'confirmation':
  146. this.handOrderConfirmation()
  147. break
  148. }
  149. },
  150. handOrderConfirm(){//确认收货
  151. this.$util.modal('提示','是否确认收货','确定','取消',true,() =>{
  152. confirmReceipt({orderID:this.orderID}).then(response =>{
  153. this.$util.msg(response.msg,2000,true,'success');
  154. this.initOrderDetaileData()
  155. }).catch(response =>{
  156. this.$util.msg(response.msg,2000)
  157. })
  158. })
  159. },
  160. handOrderConfirmation (){//确认订单
  161. this.$util.modal('提示','确认此订单?','确定','取消',true,() =>{
  162. affirmOrder({orderID:this.orderID}).then(response =>{
  163. this.$util.msg(response.msg,2000,true,'success');
  164. this.initOrderDetaileData()
  165. }).catch(response =>{
  166. this.$util.msg(response.msg,2000)
  167. })
  168. })
  169. },
  170. handOrderDetele(){//删除订单
  171. this.$util.modal('提示','确认删除该订单吗?','确定','取消',true,() =>{
  172. deleteOrder({orderID:this.orderID}).then(response =>{
  173. this.$util.msg(response.msg,2000,true,'success');
  174. setTimeout(() => {
  175. if(this.shareType ==='share'){
  176. this.$api.switchTabTo('/pages/tabBar/home/home')
  177. }else{
  178. this.$api.redirectTo(`/pages/user/order/order-list?type=detele&state=${this.state}`)
  179. }
  180. },500)
  181. }).catch(response =>{
  182. this.$util.msg(response.msg,2000)
  183. })
  184. })
  185. },
  186. handCenceConfirm(){//取消订单
  187. this.$util.modal('提示','确认取消该订单吗?','确定','取消',true,() =>{
  188. cancelOrder({orderID:this.orderID}).then(response =>{
  189. this.$util.msg(response.msg,2000,true,'success');
  190. this.initOrderDetaileData()
  191. }).catch(response =>{
  192. this.$util.msg(response.msg,2000)
  193. })
  194. })
  195. },
  196. onShareAppMessage(res){//分享转发
  197. this.isShareModal = false
  198. if (res.from === 'button') {
  199. // 来自页面内转发按钮
  200. }
  201. return {
  202. title: '您有新的分享订单,快来查看吧~',
  203. path: `/pages/user/order/orderShareLogin?orderID=${this.orderID}&userID=${this.userID}`,
  204. imageUrl:'https://img.caimei365.com/group1/M00/03/95/Cmis216Sk_SABnOFABZCgCzFV_g063.png'
  205. }
  206. },
  207. getHeaderTopHeight(){
  208. let statusBarHeight = this.systeminfo.statusBarHeight // 状态栏高度
  209. let headerPosi = this.headerBtnPosi
  210. let btnPosi = { // 胶囊实际位置,坐标信息不是左上角原点
  211. height: headerPosi.height,
  212. width: headerPosi.width,
  213. // 胶囊top - 状态栏高度
  214. top: headerPosi.top - statusBarHeight,
  215. // 胶囊bottom - 胶囊height - 状态栏height (现胶囊bottom 为距离导航栏底部的长度)
  216. bottom: headerPosi.bottom - headerPosi.height - statusBarHeight,
  217. // 屏幕宽度 - 胶囊right
  218. right: this.systeminfo.screenWidth - headerPosi.right
  219. }
  220. this.navbarHeight= headerPosi.bottom + btnPosi.bottom// 原胶囊bottom + 现胶囊bottom
  221. },
  222. setHeaderBtnPosi(){
  223. // 获得胶囊按钮位置信息
  224. let headerBtnPosi = uni.getMenuButtonBoundingClientRect();
  225. return headerBtnPosi
  226. },
  227. setSysteminfo(){
  228. let systeminfo;
  229. uni.getSystemInfo({ // 获取设备信息
  230. success: (res) => {
  231. systeminfo = res
  232. },
  233. })
  234. return systeminfo
  235. },
  236. },
  237. onShow() {
  238. }
  239. }
  240. </script>
  241. <style lang="scss">
  242. page {
  243. height: auto;
  244. background:#F7F7F7;
  245. }
  246. .details{
  247. padding-bottom: 130rpx;
  248. }
  249. .btn-hover{
  250. background: #FFFFFF;
  251. }
  252. .animation{
  253. /* transition: transform 0.3s ease;*/
  254. transition-property: transform;
  255. transition-duration: 0.3s;
  256. transition-timing-function: ease;
  257. }
  258. .invoice-balance{
  259. width: 702rpx;
  260. height: auto;
  261. padding:0 24rpx;
  262. background: #FFFFFF;
  263. float: left;
  264. margin-top: 24rpx;
  265. margin-bottom: 24rpx;
  266. .balabce-t{
  267. width: 100%;
  268. height: 86rpx;
  269. line-height: 86rpx;
  270. font-size: $font-size-28;
  271. color: $text-color;
  272. float: left;
  273. .balabce-t-le{
  274. float: left;
  275. font-weight: bold;
  276. }
  277. .balabce-t-ri{
  278. float: right;
  279. display: flex;
  280. align-items: center;
  281. .money{
  282. display: flex;
  283. float: left;
  284. }
  285. .checkbox-box{
  286. display: flex;
  287. width: 60rpx;
  288. float: left;
  289. height: 100%;
  290. font-size: $font-size-24;
  291. .checkbox{
  292. width: 40rpx;
  293. text-align: right;
  294. box-sizing: border-box;
  295. text-align: center;
  296. text-decoration: none;
  297. border-radius: 0;
  298. -webkit-tap-highlight-color: transparent;
  299. overflow: hidden;
  300. }
  301. }
  302. }
  303. }
  304. .balabce-b{
  305. width: 100%;
  306. float: left;
  307. overflow: hidden;
  308. .balabce-b-text{
  309. width: 100%;
  310. line-height: 58rpx;
  311. font-size: $font-size-24;
  312. color: #FF2A2A;
  313. text-align: right;
  314. float: right;
  315. }
  316. &.balabce-b--hide {
  317. padding: 0 0;
  318. height: 0px;
  319. line-height: 0px;
  320. }
  321. }
  322. }
  323. </style>