orderDetails.vue 7.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267
  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">
  23. <text>服务骑手</text>
  24. <text>{{pageInfo.name||'--'}}</text>
  25. </view>
  26. </view>
  27. <view class="item-info">
  28. <view class="flex justify_between item">
  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">
  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. chooseReason(e){
  143. console.log(e,'-------取消订单')
  144. cancelOrder({id:this.orderId,cancelReason:e}).then(res=>{
  145. if(res.status==200){
  146. uni.showToast({
  147. title: res.message,
  148. icon: 'none'
  149. })
  150. this.getOrderNum()
  151. setTimeout(()=>{
  152. uni.switchTab({
  153. url:'/pages/index/index'
  154. })
  155. },200)
  156. }
  157. })
  158. },
  159. }
  160. }
  161. </script>
  162. <style lang="less">
  163. .content-orderDetails{
  164. width: 100%;
  165. height: 100vh;
  166. padding: 44upx 32upx;
  167. background-color: #f5f5f5;
  168. .order-states{
  169. margin-bottom: 10upx;
  170. text{
  171. display: inline-block;
  172. margin: 0 10upx;
  173. font-size: 42upx;
  174. color: #191919;
  175. }
  176. }
  177. .order-time{
  178. margin-bottom: 30upx;
  179. }
  180. .order-info{
  181. margin-bottom: 20upx;
  182. background: #FFFFFF;
  183. border-radius: 24upx;
  184. font-weight: 400;
  185. color: #191919;
  186. .item{
  187. padding: 30upx;
  188. border-bottom: 1px soild #bbb;
  189. // &:first-child{
  190. // color: #7C7D7E;
  191. // }
  192. }
  193. .item>text:first-child{
  194. color: #7C7D7E;
  195. }
  196. .type{
  197. color: #7C7D7E;
  198. }
  199. }
  200. .item-info{
  201. border-radius: 24rpx;
  202. padding: 0rpx 32rpx;
  203. margin-bottom: 20upx;
  204. background-color: #fff;
  205. .item-title{
  206. color: #7C7D7E;
  207. padding-top: 28rpx;
  208. }
  209. .item{
  210. padding: 28rpx 0;
  211. border-bottom: 1px solid #EBEBEB;
  212. :first-child{
  213. color: #7C7D7E;
  214. }
  215. :last-child-child{
  216. color: #222222;
  217. }
  218. &:last-child{
  219. border-bottom: none;
  220. }
  221. .item-type{
  222. padding: 0 20rpx;
  223. height: 56rpx;
  224. border: 1px solid #979797;
  225. opacity: 1;
  226. border-radius: 28rpx;
  227. font-size: 24rpx;
  228. color: #999999;
  229. text-align: center;
  230. line-height: 56rpx;
  231. margin-right: 20rpx;
  232. }
  233. .item-type.active{
  234. background-color: #4F88F7;
  235. border: none;
  236. color: #fff;
  237. }
  238. }
  239. }
  240. .content-footer{
  241. width: 100%;
  242. padding: 12upx 32upx 32upx;
  243. background: #FFFFFF;
  244. position: fixed;
  245. bottom: 0;
  246. left: 0;
  247. .cancelBtn{
  248. width: 100%;
  249. height: 84upx;
  250. display: flex;
  251. justify-content: center;
  252. align-items: center;
  253. // background: #E5E5E5;
  254. color: #666;
  255. border-radius: 16upx;
  256. font-size: 36upx;
  257. font-weight: 500;
  258. }
  259. }
  260. }
  261. </style>