123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273 |
- <template>
- <view class="content-orderDetails">
- <view>
- <view class="flex justify_center align_center order-states">
- <u-image src="/static/order/prescription_order_icon_pay.png" width="48" height="48" v-if="pageInfo.orderStatus=='FINISH'"></u-image>
- <u-image src="/static/order/prescription_order_icon.png" width="48" height="48" v-if="pageInfo.orderStatus=='CONFIRM'"></u-image>
- <u-image src="/static/order/prescription_order_icon_cancel.png" width="48" height="48" v-if="pageInfo.orderStatus=='CANCEL'"></u-image>
- <text>{{pageInfo.orderStatusDictValue||''}}</text>
- </view>
- <view class="flex justify_center order-time" v-if="pageInfo.orderStatus=='FINISH'">服务时间:{{pageInfo.finishDate||'--'}}</view>
- <view class="flex justify_center order-time" v-if="pageInfo.orderStatus=='CONFIRM'">下单时间:{{pageInfo.createDate||'--'}}</view>
- <view class="flex justify_center order-time" v-if="pageInfo.orderStatus=='CANCEL'">取消时间:{{pageInfo.confirmDate||'--'}}</view>
- <view class="item-info">
- <view class="flex justify_between item">
- <text>店铺名称</text>
- <text>{{pageInfo.customerName|| '--'}}</text>
- </view>
- <view class="flex justify_between item">
- <text>订单编号</text>
- <text>{{pageInfo.orderReserveNo|| '--'}}</text>
- </view>
- <view class="flex justify_between item" @click="callPhone(pageInfo.phone,0)">
- <text>服务骑手</text>
- <text>{{pageInfo.name?pageInfo.name+' - ':''}}{{ pageInfo.phone?pageInfo.phone:''}}</text>
- </view>
- </view>
- <view class="item-info">
- <view class="flex justify_between item" @click="callPhone(pageInfo.contactMobile,1)">
- <text>下单用户</text>
- <text>{{pageInfo.contactMobile||'--'}}</text>
- </view>
- </view>
- <view v-if="typeData.length && pageInfo.orderStatus=='FINISH'" class="item-info">
- <view class="item-title flex justify_between">
- <text>回收品类明细</text>
- </view>
- <view class="item flex">
- <view :class="['item-type', curIndex == index ? 'active' : '']" v-for="(item,index) in typeData" :key="item.id" @click="curIndex=index" >
- {{item.name}}
- </view>
- </view>
- <view v-for="item in typeData[curIndex].typeList" :key="item.id" class="item flex justify_between">
- <text>{{item.typeName || '--'}} {{item.rubbishPrice || 0}}元/kg</text>
- <text>{{item.rubbishWeight/1000 || 0}}kg/{{item.totalAmount || 0}}元</text>
- </view>
- </view>
-
- <view class="item-info" v-if="pageInfo.orderStatus=='FINISH'">
- <view class="flex justify_between item">
- <text>服务时间</text>
- <text>{{pageInfo.finishDate||'--'}}</text>
- </view>
- <view class="flex justify_between item">
- <text>支付金额</text>
- <text>{{pageInfo.originalAmount||'0'}}元</text>
- </view>
- </view>
- </view>
- <view class="content-footer" @itemChange="chooseReason" v-if="pageInfo.orderStatus=='CONFIRM'">
- <v-select :showSelete="false" :showBtn="true" code="CANCEL_REASON" @itemChange="chooseReason"></v-select>
- </view>
- <!-- 取消订单弹窗 -->
- <uni-popup ref="openModal" type="center">
- <uni-popup-dialog content="您确定要取消此订单吗?" @confirm="onOk" title="取消订单"></uni-popup-dialog>
- </uni-popup>
- </view>
- </template>
- <script>
- import uniPopup from '@/components/uni-popup/uni-popup.vue'
- import uniPopupDialog from '@/components/uni-popup/uni-popup-dialog.vue'
- import {cancelOrder} from '@/api/order.js'
- import vSelect from '@/components/select/v-select.vue'
- import {orderDetail}from '@/api/order.js'
- import {getLookUpDatas}from "@/api/data.js"
- export default{
- components: {uniPopup,uniPopupDialog,vSelect},
- data(){
- return{
- pageInfo:null,
- orderId:'' ,// 订单id
- typeData: [], // 订单包含类型数据
- typeNames: '', // 预约品类名称
- curIndex: 0 ,// 当前类型下标
- }
- },
- onLoad(query) {
- this.geRubbishTypeData()
- if(query){
- this.orderId=query.id
- this.getPageInfo()
- }
- },
- methods:{
- geRubbishTypeData(){
- getLookUpDatas({type:'RESERVE_RUBBISH_TYPE'}).then(res=>{
- if(res.status==200){
- this.rubbishData=res.data
- }else{
- uni.showToast({
- title:res.message,
- icon:none
- })
- }
- })
- },
-
- getPageInfo(){
- this.typeData = []
- this.typeNames = ''
- orderDetail({id:this.orderId}).then(res=>{
- if(res.status==200){
- this.pageInfo=res.data
- let data = this.rubbishData
- // 重组类型数据
- if(this.pageInfo.orderReserveItemEntityList) {
- data.map(k =>{
- let arr = this.pageInfo.orderReserveItemEntityList.filter(item=>{
- return item.rubbishType == k.code
- })
- console.log(arr,'dddd')
- if(arr.length) {
- let p = {
- typeCode: k.code,
- name: k.dispName,
- typeList: arr
- }
- this.typeData.push(p)
- console.log(p,this.typeData,'pppppp')
- }
- })
- this.typeData.map(item=>{
- this.typeNames = (this.typeNames ? (this.typeNames + ','):'') + item.name
- })
- }
- }else{
- uni.showToast({
- title:res.message,
- icon:'none'
- })
- }
- })
- },
- // 拨打电话
- callPhone(customerPhoneNum,type){
- console.log(type,'==============')
- uni.makePhoneCall({
- phoneNumber: customerPhoneNum
- });
- },
- // 取消订单
- chooseReason(e){
- console.log(e,'-------取消订单')
- cancelOrder({id:this.orderId,cancelReason:e}).then(res=>{
- if(res.status==200){
- uni.showToast({
- title: res.message,
- icon: 'none'
- })
- setTimeout(()=>{
- uni.switchTab({
- url:'/pages/index/index'
- })
- },200)
- }
- })
-
- },
- }
- }
- </script>
- <style lang="less">
- .content-orderDetails{
- width: 100%;
- height: 100vh;
- padding: 44upx 32upx;
- background-color: #f5f5f5;
- .order-states{
- margin-bottom: 10upx;
- text{
- display: inline-block;
- margin: 0 10upx;
- font-size: 42upx;
- color: #191919;
- }
- }
- .order-time{
- margin-bottom: 30upx;
- }
- .order-info{
- margin-bottom: 20upx;
- background: #FFFFFF;
- border-radius: 24upx;
- font-weight: 400;
- color: #191919;
- .item{
- padding: 30upx;
- border-bottom: 1px soild #bbb;
- // &:first-child{
- // color: #7C7D7E;
- // }
- }
- .item>text:first-child{
- color: #7C7D7E;
- }
- .type{
- color: #7C7D7E;
- }
- }
- .item-info{
- border-radius: 24rpx;
- padding: 0rpx 32rpx;
- margin-bottom: 20upx;
- background-color: #fff;
- .item-title{
- color: #7C7D7E;
- padding-top: 28rpx;
- }
- .item{
- padding: 28rpx 0;
- border-bottom: 1px solid #EBEBEB;
- :first-child{
- color: #7C7D7E;
- }
- :last-child-child{
- color: #222222;
- }
- &:last-child{
- border-bottom: none;
- }
-
- .item-type{
- padding: 0 20rpx;
- height: 56rpx;
- border: 1px solid #979797;
- opacity: 1;
- border-radius: 28rpx;
- font-size: 24rpx;
- color: #999999;
- text-align: center;
- line-height: 56rpx;
- margin-right: 20rpx;
- }
- .item-type.active{
- background-color: #4F88F7;
- border: none;
- color: #fff;
- }
- }
- }
- .content-footer{
- width: 100%;
- padding: 12upx 32upx 32upx;
- background: #FFFFFF;
- position: fixed;
- bottom: 0;
- left: 0;
- .cancelBtn{
- width: 100%;
- height: 84upx;
- display: flex;
- justify-content: center;
- align-items: center;
- // background: #E5E5E5;
- color: #666;
- border-radius: 16upx;
- font-size: 36upx;
- font-weight: 500;
- }
- }
- }
- </style>
|