| | |
| | | :key="item.value" |
| | | class="filter-tab" |
| | | :class="{ active: activeTab === item.value }" |
| | | @tap="activeTab = item.value" |
| | | @click="changeTab(item) " |
| | | > |
| | | {{ item.label }} |
| | | </view> |
| | |
| | | <view class="content-wrap"> |
| | | <view class="page-padding card-list"> |
| | | <view v-for="(item, index) in dataList" :key="item.id" class="order-card"> |
| | | <view class="order-head" :class="item.mode === 'city' ? 'city-head-bg' : 'local-head-bg'"> |
| | | <view class="order-head" :class="item.mode === 'city' ? 'city-head-bg' : 'local-head-bg'" @click="jumpOrderDetail(item.id)"> |
| | | <view v-if="item.type === 0" class="head-local"> |
| | | <view class="mode-tag local-tag">就地寄存</view> |
| | | <view class="head-copy single-copy"> |
| | | <text class="head-name text-ellipsis">{{ item.depositShopName||'' }}</text> |
| | | <text class="head-user">{{ item.takeUser ||'' }}</text> |
| | | </view> |
| | | <text v-if="item.status < 7" class=" status-text status-orange">{{ item.statusName||'' }}</text> |
| | | <text v-else-if="item.status ===7" class=" status-text">{{ item.statusName||'' }}</text> |
| | | <text v-else-if="item.status >7" class=" status-text status-grey">{{ item.statusName||'' }}</text> |
| | | <view style="display: flex;flex-direction: column;"> |
| | | <text v-if="item.status ===5 && item.overdueStatus ===1 " class="status-text" style="color: red;">超时未取件</text> |
| | | <text v-else-if="item.status ===5 && item.overdueStatus ===3 " class="status-text" style="color: red;">超时到店取件</text> |
| | | <text v-else-if="item.status < 7" class=" status-text status-orange">{{ item.statusName||'' }}</text> |
| | | <text v-else-if="item.status ===7" class=" status-text status-grey">{{ item.statusName||'' }}</text> |
| | | <text v-else class=" status-text status-grey">{{ item.statusName||'' }}</text> |
| | | <text v-if="item.status ===5 && item.overdueStatus ===1 " class="status-text" style="color: red;font-size: 24rpx;">逾期费用¥{{((item.overdueFee || 0)/100).toFixed(2)}}</text> |
| | | <text v-if="item.status ===5 && item.overdueStatus ===3 " class="status-text" style="color: red;font-size: 24rpx;">逾期费用¥{{((item.overdueFee || 0)/100).toFixed(2)}}</text> |
| | | </view> |
| | | </view> |
| | | <view v-else class="head-city"> |
| | | <view class="head-copy city-left"> |
| | |
| | | <view class="arrow-head"></view> |
| | | </view> |
| | | <view class="head-copy city-right align-right"> |
| | | <text v-if="item.status < 7" class=" status-text status-orange">{{ item.statusName||'' }}</text> |
| | | <text v-else-if="item.status ===7" class="status-text">{{ item.statusName||'' }}</text> |
| | | <text v-else-if="item.status >7" class=" status-text status-grey">{{ item.statusName||'' }}</text> |
| | | <text class="head-name text-ellipsis">{{ item.takeShopName||'对对对' }}</text> |
| | | <view style="display: flex;flex-direction: column;"> |
| | | <text v-if="item.status ===5 && item.overdueStatus ===1 " class="status-text" style="color: red;">超时未取件</text> |
| | | <text v-else-if="item.status ===5 && item.overdueStatus ===3 " class="status-text" style="color: red;">超时到店取件</text> |
| | | <text v-else-if="item.status < 7" class=" status-text status-orange">{{ item.statusName||'' }}</text> |
| | | <text v-else-if="item.status ===7" class=" status-text status-grey">{{ item.statusName||'' }}</text> |
| | | <text v-else class=" status-text status-grey">{{ item.statusName||'' }}</text> |
| | | <text v-if="item.status ===5 && item.overdueStatus ===1 " class="status-text" style="color: red;font-size: 24rpx;">逾期费用¥{{((item.overdueFee || 0)/100).toFixed(2)}}</text> |
| | | <text v-if="item.status ===5 && item.overdueStatus ===3 " class="status-text" style="color: red;font-size: 24rpx;">逾期费用¥{{((item.overdueFee || 0)/100).toFixed(2)}}</text> |
| | | </view> |
| | | <text class="head-name text-ellipsis">{{ item.takeShopName || item.takeLocation||'' }}</text> |
| | | <text class="head-user">{{ item.takeUser||'' }}</text> |
| | | </view> |
| | | </view> |
| | | </view> |
| | | |
| | | <view class="goods-area" v-if="item.detailList"> |
| | | <view class="goods-area" v-if="item.detailList" @click="jumpOrderDetail(item.id)"> |
| | | <view v-for="goods in item.detailList " :key="goods.luggageName" class="goods-row"> |
| | | <view class="goods-left"> |
| | | <text class="goods-name">{{ goods.luggageName ||'' }}</text> |
| | |
| | | |
| | | <view class="card-footer"> |
| | | <view class="footer-actions" v-if="item.type===0"> |
| | | <view class="footer-btn contact-btn" @click="contactPhone(item,0)" v-if="item.status ===1 || item.status==2 || item.status===98">联系门店</view> |
| | | <view class="footer-btn contact-btn" @click="contactPhone(item,0)" v-if="item.status ===1 ||item.status ===5 || item.status==2 || item.status===98">联系门店</view> |
| | | <view class="footer-btn contact-btn" v-if="item.status ===0 || item.status ===1" @click="cancelOrder(item)">取消订单</view> |
| | | <view class="footer-btn contact-btn" @click="deleteOrder(item)" v-if="item.status ===7 || item.status===96 || item.status == 99">删除订单</view> |
| | | <view class="footer-btn primary-btn" @click="payOrder(item)" v-if="item.status ===0">立即支付</view> |
| | | <view class="footer-btn primary-btn" @click="payOrderFee(item)" v-if="item.status ===5 && item.overdueStatus===3 ">立即支付</view> |
| | | <view class="footer-btn primary-btn" v-if="item.status >=1 &&item.status <7 " @click="openQrcode(item)" >核销码</view> |
| | | <view class="footer-btn primary-btn" v-if="item.status ===7 && !commentStatus ">评价订单</view> |
| | | <view class="footer-btn primary-btn" @click="evaluateOrder(item)" v-if="item.status ===7 && !item.commentStatus ">评价订单</view> |
| | | </view> |
| | | <view class="footer-actions" v-else> |
| | | <view class="footer-btn contact-btn" @click="contactPhone(item,0)" v-if="item.status ===1 || item.status ==2">联系门店</view> |
| | | <view class="footer-btn contact-btn" @click="contactPhone(item,2)" v-if="item.status ===3 || item.status ===4 ">联系骑手</view> |
| | | <view class="footer-btn contact-btn" @click="contactPhone(item,1)" v-if="item.status ===5">联系门店</view> |
| | | <view class="footer-btn contact-btn" v-if="item.status ===0" @click="cancelOrder(item)">取消订单</view> |
| | | <view class="footer-btn primary-btn" @click="payOrder(item)" v-if="item.status ===0">立即支付</view> |
| | | <view class="footer-btn contact-btn" v-if="item.status ===0" @click="cancelOrder(item)">取消订单</view> |
| | | <view class="footer-btn primary-btn" @click="payOrder(item)" v-if="item.status ===0">立即支付</view> |
| | | <view class="footer-btn primary-btn" @click="payOrderFee(item)" v-if="item.status ===5 && item.overdueStatus===3 ">立即支付</view> |
| | | <view class="footer-btn contact-btn" @click="deleteOrder(item)" v-if="item.status ===7 || item.status===96 || item.status == 99">删除订单</view> |
| | | <view class="footer-btn primary-btn" @click="cancelOrder(item)" v-if="item.status ===1">申请退款</view> |
| | | <view class="footer-btn primary-btn" v-if="item.status ===1 || (item.takeShopId && item.status ===5)" @click="openQrcode(item)" >核销码</view> |
| | | <view class="footer-btn primary-btn" @click="doneOrder(item)" v-if="!item.takeShopId && item.status ===5">确认收货</view> |
| | | <view class="footer-btn primary-btn" v-if="item.status ===7 && !commentStatus ">评价订单</view> |
| | | <view class="footer-btn primary-btn" @click="evaluateOrder(item)" v-if="item.status ===7 && !item.commentStatus ">评价订单</view> |
| | | </view> |
| | | </view> |
| | | </view> |
| | |
| | | <view class="phone"> |
| | | <view class="phone-head"> |
| | | <view></view> |
| | | <text>联系客户</text> |
| | | <text>{{linkItem.title}}</text> |
| | | </view> |
| | | <!-- <view class="phone-item"> |
| | | <view> |
| | |
| | | <view class="line" v-if="serverPhone && serverPhone.length"></view> |
| | | </view> --> |
| | | <view class="phone-item" > |
| | | <view> |
| | | <image src="/static/icon/ic_call@2x.png" mode="widthFix" @click="contactPhoneDo()" ></image> |
| | | <text>{{linkItem.linkname||''}} </text> |
| | | <text style="margin-left: 10px;"> {{linkItem.linkphone||''}}</text> |
| | | <view @click="contactPhoneDo()"> |
| | | <image src="/static/icon/ic_call@2x.png" mode="widthFix" ></image> |
| | | <text >{{linkItem.linkname||''}} </text> |
| | | <text style="margin-left: 10px;"> {{linkItem.linkphone||''}}</text> |
| | | </view> |
| | | </view> |
| | | <view style="width: 100%; height: 30rpx;"></view> |
| | |
| | | </view> |
| | | </view> |
| | | </u-popup> |
| | | <custom-tabbar></custom-tabbar> |
| | | </view> |
| | | </template> |
| | | |
| | | <script> |
| | | import { mapState } from 'vuex' |
| | | import CustomTabbar from '@/components/custom-tabbar/custom-tabbar.vue' |
| | | import drawQrcode from 'weapp-qrcode' |
| | | export default { |
| | | computed: { |
| | |
| | | qrcodeImage:null, |
| | | isLoadingMore: false, |
| | | currentOrder:null, |
| | | contanctType:0, |
| | | linkItem:{title:'',linkname:'',linkphone:''}, |
| | | filterTabs: [ |
| | | { label: '全部' ,value: -1}, |
| | | { label: '待支付',value: 0 }, |
| | |
| | | { label: '待配送', value: 2 }, |
| | | { label: '待收货', value: 3}, |
| | | { label: '已完成', value: 4}, |
| | | { label: '已退款', value: 5} |
| | | { label: '已取消', value: 5} |
| | | ], |
| | | dataList: [] |
| | | } |
| | | }, |
| | | watch: { |
| | | activeTab() { |
| | | this.getFirstPageData() |
| | | } |
| | | }, |
| | | // watch: { |
| | | // activeTab() { |
| | | // this.getFirstPageData() |
| | | // } |
| | | // }, |
| | | onLoad(options) { |
| | | console.log(options ) |
| | | this.activeTab = -1 |
| | | if (options.status) { |
| | | /* if (options.status != null && options.status != undefined) { |
| | | this.activeTab = Number(options.status) |
| | | } |
| | | this.getFirstPageData() |
| | | } */ |
| | | var that =this |
| | | uni.$on('updateOrder',function(data){ |
| | | console.log('监听到事件来自 update ,携带参数 msg 为:' ,data); |
| | |
| | | if(item.id==data.info.orderId){ |
| | | console.log('监听到事件来自 update 02:' ,data); |
| | | item.status = data.info.orderStatus |
| | | item.commentStatus = data.info.commentStatus |
| | | } |
| | | }) |
| | | } |
| | |
| | | }) |
| | | }, |
| | | onShow() { |
| | | |
| | | this.activeTab = -1 |
| | | this.showDone=false |
| | | this.showCancel=false |
| | | this.showDelete=false |
| | | this.showQrcode=false |
| | | this.showPay=false |
| | | this.contanctType =0 |
| | | this.showPhone=false |
| | | this.loading=false |
| | | this.currentOrder=null |
| | | this.linkItem={title:'',linkname:'',linkphone:''} |
| | | var orderStatus = uni.getStorageSync("orderStatus"); |
| | | console.log(orderStatus,"==================") |
| | | if (orderStatus != null &&orderStatus != undefined ) { |
| | | if( Number(orderStatus) === -2){ |
| | | this.activeTab = 0 |
| | | } else{ |
| | | this.activeTab = Number(orderStatus) |
| | | } |
| | | } |
| | | uni.clearStorageSync("orderStatus") |
| | | this.getFirstPageData() |
| | | }, |
| | | onReachBottom(){ |
| | | this.getDataList(); |
| | | }, |
| | | methods: { |
| | | changeTab(item){ |
| | | this.activeTab = item.value |
| | | this.getFirstPageData() |
| | | }, |
| | | payOrderFee(info){ |
| | | var that = this; |
| | | uni.showLoading({ title: '发起支付中...', mask: true }) |
| | | this.$u.api.payOverdueFee({ |
| | | orderId: info.id |
| | | }).then(res => { |
| | | uni.hideLoading() |
| | | if (res.code === 200 && res.data) { |
| | | let paymentData = res.data.response |
| | | uni.requestPayment({ |
| | | provider: 'wxpay', |
| | | timeStamp: paymentData.timeStamp || '', |
| | | nonceStr: paymentData.nonceStr || '', |
| | | package: paymentData.package || '', |
| | | signType: paymentData.signType || 'MD5', |
| | | paySign: paymentData.paySign || '', |
| | | success: (res) => { |
| | | that.getFirstPageData() |
| | | }, |
| | | fail: (err) => { |
| | | if (err.errMsg.includes('cancel')) { |
| | | uni.showToast({ title: '已取消支付', icon: 'none' }) |
| | | } else { |
| | | uni.showToast({ title: '支付失败', icon: 'none' }) |
| | | } |
| | | } |
| | | }) |
| | | } else { |
| | | uni.showToast({ title: res.msg || '支付失败', icon: 'none' }) |
| | | } |
| | | }).catch(err => { |
| | | uni.hideLoading() |
| | | uni.showToast({ title: '支付失败', icon: 'none' }) |
| | | }) |
| | | }, |
| | | payOrder(item){ |
| | | var that = this; |
| | | uni.showLoading({ title: '发起支付中...', mask: true }) |
| | |
| | | that.showDone() |
| | | } |
| | | }, |
| | | contactPhone(item){ |
| | | contactPhone(item,type){ |
| | | this.showPhone = !this.showPhone |
| | | this.linkItem = item ||{} |
| | | this.linkItem = {title:'',linkname:'',linkphone:''} |
| | | console.log("==================================",this.showPhone) |
| | | if(!item){ |
| | | return |
| | | } |
| | | if(type == 0){ |
| | | this.linkItem = {title:'联系门店',linkname:item.depositShopName,linkphone:item.depositShopPhone} |
| | | }else if(type ==2){ |
| | | this.linkItem = {title:'联系骑手',linkname:item.driverName,linkphone:item.driverPhone} |
| | | }else if(type ==1){ |
| | | this.linkItem = {title:'联系门店',linkname:item.takeShopName,linkphone:item.takeShopPhone} |
| | | } |
| | | }, |
| | | contactPhoneDo(){ |
| | | if(this.linkItem.linkphone !=null && this.linkItem.linkphone!=''){ |
| | |
| | | }, |
| | | jumpOrderDetail(id){ |
| | | uni.navigateTo({ |
| | | url:'/pages/details-entry/details-entry?userType='+this.userType+'&id='+id |
| | | url:'/pages/delivery-order-detail/delivery-order-detail?userType=0&id='+id |
| | | }) |
| | | }, |
| | | evaluateOrder(item){ |
| | | uni.navigateTo({ |
| | | url:"/pages/evaluate/evaluate?id="+item.id |
| | | }) |
| | | } |
| | | } |
| | |
| | | } |
| | | |
| | | .text-ellipsis { |
| | | display: block; |
| | | white-space: nowrap; |
| | | overflow: hidden; |
| | | text-align: center; |
| | | text-overflow: ellipsis; |
| | | max-width: 100%; |
| | | } |
| | | |
| | | .city-arrow { |
| | |
| | | color: #8C939F; |
| | | } |
| | | .price-line{ |
| | | padding: 0 30rpx; |
| | | box-sizing: border-box; |
| | | display: flex; |
| | | align-items: flex-end; |