order-details.vue 10 KB

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