orderDetails.vue 7.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273
  1. <template>
  2. <view class="content-orderDetails">
  3. <view>
  4. <view class="flex justify_center align_center order-states">
  5. <u-image src="/static/order/prescription_order_icon_pay.png" width="48" height="48" v-if="pageInfo.orderStatus=='FINISH'"></u-image>
  6. <u-image src="/static/order/prescription_order_icon.png" width="48" height="48" v-if="pageInfo.orderStatus=='CONFIRM'"></u-image>
  7. <u-image src="/static/order/prescription_order_icon_cancel.png" width="48" height="48" v-if="pageInfo.orderStatus=='CANCEL'"></u-image>
  8. <text>{{pageInfo.orderStatusDictValue||''}}</text>
  9. </view>
  10. <view class="flex justify_center order-time" v-if="pageInfo.orderStatus=='FINISH'">服务时间:{{pageInfo.finishDate||'--'}}</view>
  11. <view class="flex justify_center order-time" v-if="pageInfo.orderStatus=='CONFIRM'">下单时间:{{pageInfo.createDate||'--'}}</view>
  12. <view class="flex justify_center order-time" v-if="pageInfo.orderStatus=='CANCEL'">取消时间:{{pageInfo.confirmDate||'--'}}</view>
  13. <view class="item-info">
  14. <view class="flex justify_between item">
  15. <text>店铺名称</text>
  16. <text>{{pageInfo.customerName|| '--'}}</text>
  17. </view>
  18. <view class="flex justify_between item">
  19. <text>订单编号</text>
  20. <text>{{pageInfo.orderReserveNo|| '--'}}</text>
  21. </view>
  22. <view class="flex justify_between item" @click="callPhone(pageInfo.phone,0)">
  23. <text>服务骑手</text>
  24. <text>{{pageInfo.name?pageInfo.name+' - ':''}}{{ pageInfo.phone?pageInfo.phone:''}}</text>
  25. </view>
  26. </view>
  27. <view class="item-info">
  28. <view class="flex justify_between item" @click="callPhone(pageInfo.contactMobile,1)">
  29. <text>下单用户</text>
  30. <text>{{pageInfo.contactMobile||'--'}}</text>
  31. </view>
  32. </view>
  33. <view v-if="typeData.length && pageInfo.orderStatus=='FINISH'" class="item-info">
  34. <view class="item-title flex justify_between">
  35. <text>回收品类明细</text>
  36. </view>
  37. <view class="item flex">
  38. <view :class="['item-type', curIndex == index ? 'active' : '']" v-for="(item,index) in typeData" :key="item.id" @click="curIndex=index" >
  39. {{item.name}}
  40. </view>
  41. </view>
  42. <view v-for="item in typeData[curIndex].typeList" :key="item.id" class="item flex justify_between">
  43. <text>{{item.typeName || '--'}} {{item.rubbishPrice || 0}}元/kg</text>
  44. <text>{{item.rubbishWeight/1000 || 0}}kg/{{item.totalAmount || 0}}元</text>
  45. </view>
  46. </view>
  47. <view class="item-info" v-if="pageInfo.orderStatus=='FINISH'">
  48. <view class="flex justify_between item">
  49. <text>服务时间</text>
  50. <text>{{pageInfo.finishDate||'--'}}</text>
  51. </view>
  52. <view class="flex justify_between item">
  53. <text>支付金额</text>
  54. <text>{{pageInfo.originalAmount||'0'}}元</text>
  55. </view>
  56. </view>
  57. </view>
  58. <view class="content-footer" @itemChange="chooseReason" v-if="pageInfo.orderStatus=='CONFIRM'">
  59. <v-select :showSelete="false" :showBtn="true" code="CANCEL_REASON" @itemChange="chooseReason"></v-select>
  60. </view>
  61. <!-- 取消订单弹窗 -->
  62. <uni-popup ref="openModal" type="center">
  63. <uni-popup-dialog content="您确定要取消此订单吗?" @confirm="onOk" title="取消订单"></uni-popup-dialog>
  64. </uni-popup>
  65. </view>
  66. </template>
  67. <script>
  68. import uniPopup from '@/components/uni-popup/uni-popup.vue'
  69. import uniPopupDialog from '@/components/uni-popup/uni-popup-dialog.vue'
  70. import {cancelOrder} from '@/api/order.js'
  71. import vSelect from '@/components/select/v-select.vue'
  72. import {orderDetail}from '@/api/order.js'
  73. import {getLookUpDatas}from "@/api/data.js"
  74. export default{
  75. components: {uniPopup,uniPopupDialog,vSelect},
  76. data(){
  77. return{
  78. pageInfo:null,
  79. orderId:'' ,// 订单id
  80. typeData: [], // 订单包含类型数据
  81. typeNames: '', // 预约品类名称
  82. curIndex: 0 ,// 当前类型下标
  83. }
  84. },
  85. onLoad(query) {
  86. this.geRubbishTypeData()
  87. if(query){
  88. this.orderId=query.id
  89. this.getPageInfo()
  90. }
  91. },
  92. methods:{
  93. geRubbishTypeData(){
  94. getLookUpDatas({type:'RESERVE_RUBBISH_TYPE'}).then(res=>{
  95. if(res.status==200){
  96. this.rubbishData=res.data
  97. }else{
  98. uni.showToast({
  99. title:res.message,
  100. icon:none
  101. })
  102. }
  103. })
  104. },
  105. getPageInfo(){
  106. this.typeData = []
  107. this.typeNames = ''
  108. orderDetail({id:this.orderId}).then(res=>{
  109. if(res.status==200){
  110. this.pageInfo=res.data
  111. let data = this.rubbishData
  112. // 重组类型数据
  113. if(this.pageInfo.orderReserveItemEntityList) {
  114. data.map(k =>{
  115. let arr = this.pageInfo.orderReserveItemEntityList.filter(item=>{
  116. return item.rubbishType == k.code
  117. })
  118. console.log(arr,'dddd')
  119. if(arr.length) {
  120. let p = {
  121. typeCode: k.code,
  122. name: k.dispName,
  123. typeList: arr
  124. }
  125. this.typeData.push(p)
  126. console.log(p,this.typeData,'pppppp')
  127. }
  128. })
  129. this.typeData.map(item=>{
  130. this.typeNames = (this.typeNames ? (this.typeNames + ','):'') + item.name
  131. })
  132. }
  133. }else{
  134. uni.showToast({
  135. title:res.message,
  136. icon:'none'
  137. })
  138. }
  139. })
  140. },
  141. // 拨打电话
  142. callPhone(customerPhoneNum,type){
  143. console.log(type,'==============')
  144. uni.makePhoneCall({
  145. phoneNumber: customerPhoneNum
  146. });
  147. },
  148. // 取消订单
  149. chooseReason(e){
  150. console.log(e,'-------取消订单')
  151. cancelOrder({id:this.orderId,cancelReason:e}).then(res=>{
  152. if(res.status==200){
  153. uni.showToast({
  154. title: res.message,
  155. icon: 'none'
  156. })
  157. setTimeout(()=>{
  158. uni.switchTab({
  159. url:'/pages/index/index'
  160. })
  161. },200)
  162. }
  163. })
  164. },
  165. }
  166. }
  167. </script>
  168. <style lang="less">
  169. .content-orderDetails{
  170. width: 100%;
  171. height: 100vh;
  172. padding: 44upx 32upx;
  173. background-color: #f5f5f5;
  174. .order-states{
  175. margin-bottom: 10upx;
  176. text{
  177. display: inline-block;
  178. margin: 0 10upx;
  179. font-size: 42upx;
  180. color: #191919;
  181. }
  182. }
  183. .order-time{
  184. margin-bottom: 30upx;
  185. }
  186. .order-info{
  187. margin-bottom: 20upx;
  188. background: #FFFFFF;
  189. border-radius: 24upx;
  190. font-weight: 400;
  191. color: #191919;
  192. .item{
  193. padding: 30upx;
  194. border-bottom: 1px soild #bbb;
  195. // &:first-child{
  196. // color: #7C7D7E;
  197. // }
  198. }
  199. .item>text:first-child{
  200. color: #7C7D7E;
  201. }
  202. .type{
  203. color: #7C7D7E;
  204. }
  205. }
  206. .item-info{
  207. border-radius: 24rpx;
  208. padding: 0rpx 32rpx;
  209. margin-bottom: 20upx;
  210. background-color: #fff;
  211. .item-title{
  212. color: #7C7D7E;
  213. padding-top: 28rpx;
  214. }
  215. .item{
  216. padding: 28rpx 0;
  217. border-bottom: 1px solid #EBEBEB;
  218. :first-child{
  219. color: #7C7D7E;
  220. }
  221. :last-child-child{
  222. color: #222222;
  223. }
  224. &:last-child{
  225. border-bottom: none;
  226. }
  227. .item-type{
  228. padding: 0 20rpx;
  229. height: 56rpx;
  230. border: 1px solid #979797;
  231. opacity: 1;
  232. border-radius: 28rpx;
  233. font-size: 24rpx;
  234. color: #999999;
  235. text-align: center;
  236. line-height: 56rpx;
  237. margin-right: 20rpx;
  238. }
  239. .item-type.active{
  240. background-color: #4F88F7;
  241. border: none;
  242. color: #fff;
  243. }
  244. }
  245. }
  246. .content-footer{
  247. width: 100%;
  248. padding: 12upx 32upx 32upx;
  249. background: #FFFFFF;
  250. position: fixed;
  251. bottom: 0;
  252. left: 0;
  253. .cancelBtn{
  254. width: 100%;
  255. height: 84upx;
  256. display: flex;
  257. justify-content: center;
  258. align-items: center;
  259. // background: #E5E5E5;
  260. color: #666;
  261. border-radius: 16upx;
  262. font-size: 36upx;
  263. font-weight: 500;
  264. }
  265. }
  266. }
  267. </style>