From 82f707ece09a906007f3d760b6bb025896e3bba6 Mon Sep 17 00:00:00 2001
From: MrShi <1878285526@qq.com>
Date: 星期三, 22 四月 2026 15:39:36 +0800
Subject: [PATCH] 门店
---
small-program/pages/itinerary/itinerary.vue | 410 ++++++++++++++++++++++++++++++++++++++++++++++++++++-----
1 files changed, 370 insertions(+), 40 deletions(-)
diff --git a/small-program/pages/itinerary/itinerary.vue b/small-program/pages/itinerary/itinerary.vue
index 42d795e..3db4fcb 100644
--- a/small-program/pages/itinerary/itinerary.vue
+++ b/small-program/pages/itinerary/itinerary.vue
@@ -33,7 +33,10 @@
<text class="head-name text-ellipsis">{{ item.depositShopName||'' }}</text>
<text class="head-user">{{ item.takeUser ||'' }}</text>
</view>
- </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>
<view v-else class="head-city">
<view class="head-copy city-left">
<view class="mode-tag city-tag">鍚屽煄瀵勯��</view>
@@ -45,7 +48,9 @@
<view class="arrow-head"></view>
</view>
<view class="head-copy city-right align-right">
- <text class="status-text">{{ item.statusName||'寰呭彂璐�' }}</text>
+ <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>
<text class="head-user">{{ item.takeUser||'' }}</text>
</view>
@@ -64,60 +69,162 @@
</view>
</view>
</view>
- <view class="amount-area">
- <view class="pay-row">
- <text class="pay-label">瀹炰粯娆撅細</text>
- <text class="pay-value">{{((item.estimatedAmount || 0)/100).toFixed(2) }}</text>
- </view>
- <view class="insurance-row">
- <text class="insurance-label">鍚鏉庝繚璐癸細</text>
- <text class="insurance-value">{{((item.declaredFee || 0)/100).toFixed(2) }}</text>
- </view>
- </view>
-
- <view class="card-footer">
+ <view class="price-line" >
<view class="pickup-wrap" v-if="item.expectedTakeTime">
<text class="pickup-label">棰勮鍙栦欢鏃堕棿锛�</text>
<text class="pickup-value">{{ item.expectedTakeTime ||'' }}</text>
</view>
<view class="pickup-wrap" v-else></view>
- <view class="footer-actions">
-<!-- <view class="footer-btn contact-btn">鑱旂郴闂ㄥ簵</view>
- --> <view class="footer-btn contact-btn" v-if="item.status ===0">鍙栨秷璁㈠崟</view>
- <view class="footer-btn primary-btn" v-if="item.status ===0">绔嬪嵆鏀粯</view>
- <view class="footer-btn contact-btn" v-if="item.status ===1">鑱旂郴闂ㄥ簵</view>
- <view class="footer-btn primary-btn" v-if="item.status ===1">鐢宠閫�娆�</view>
+ <view class="amount-area">
+ <view class="pay-row">
+ <text class="pay-label">瀹炰粯娆撅細</text>
+ <text class="pay-value">{{((item.estimatedAmount || 0)/100).toFixed(2) }}</text>
+ </view>
+ <view class="insurance-row">
+ <text class="insurance-label">鍚鏉庝繚璐癸細</text>
+ <text class="insurance-value">{{((item.declaredFee || 0)/100).toFixed(2) }}</text>
+ </view>
+ </view>
+ </view>
+
+ <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" 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" 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>
+ <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" @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>
</view>
</view>
<view v-if="isLoadingMore" class="loading-text">鍔犺浇涓�...</view>
<view v-else-if="!hasNext && dataList.length" class="loading-text">娌℃湁鏇村浜�</view>
+ <view v-else-if="!hasNext && !dataList.length" class="loading-text">鏆傛棤鏁版嵁</view>
</view>
</view>
- <custom-tabbar></custom-tabbar>
+ <u-popup :show="showPhone" round="15" mode="bottom" :safeAreaInsetBottom="true" @close="contactPhone()" :closeable="true" :closeOnClickOverlay="true">
+ <view class="phone">
+ <view class="phone-head">
+ <view></view>
+ <text>鑱旂郴瀹㈡埛</text>
+ </view>
+ <!-- <view class="phone-item">
+ <view>
+ <image style="width: 36rpx;height: 36rpx" src="/static/icon/ic_kefu.png" mode="widthFix"></image>
+ <button open-type="contact" plain="true" bindcontact="handleContact">鍦ㄧ嚎瀹㈡湇</button>
+ </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>
+ </view>
+ <view style="width: 100%; height: 30rpx;"></view>
+ <!-- <view class="phone-botton" @click="contactPhone()" >鍏抽棴</view> -->
+ </view>
+ </u-popup>
+ <!-- 纭鏀惰揣 -->
+ <u-popup :show="showDone" round="15" :safeAreaInsetBottom="false" mode="center">
+ <view class="tc">
+ <view class="tc-contemt">
+ <view class="tc-contemt-title">纭鏀惰揣鎻愰啋</view>
+ <view class="tc-contemt-nr">
+ 鎮ㄧ‘璁ゅ凡缁忔敹鍒版偍鐨勮鏉庝簡鍚楋紵
+ </view>
+ </view>
+ <view class="tc-btn">
+ <view class="tc-btn-item" @click="showDone = false;currentOrder=null;">鍙栨秷</view>
+ <view class="tc-btn-item" style="color: #004096;" @click="doneOrderDo()">纭鏀惰揣</view>
+ </view>
+ </view>
+ </u-popup>
+ <u-popup :show="showCancel" round="15" :safeAreaInsetBottom="false" mode="center">
+ <view class="tc">
+ <view class="tc-contemt">
+ <view class="tc-contemt-title">纭畾鍙栨秷鎻愰啋</view>
+ <view class="tc-contemt-nr">
+ 鎮ㄧ‘璁ゅ彇娑堣璁㈠崟鍚楋紵
+ </view>
+ </view>
+ <view class="tc-btn">
+ <view class="tc-btn-item" @click="showCancel = false;currentOrder=null;">鎴戝啀鎯虫兂</view>
+ <view class="tc-btn-item" style="color: red;" @click="cancelOrderDo">纭鍙栨秷</view>
+ </view>
+ </view>
+ </u-popup>
+ <!-- 鍒犻櫎璁㈠崟 -->
+ <u-popup :show="showDelete" round="15" :safeAreaInsetBottom="false" mode="center">
+ <view class="tc">
+ <view class="tc-contemt">
+ <view class="tc-contemt-title">纭鍒犻櫎鎻愰啋</view>
+ <view class="tc-contemt-nr">
+ 鎮ㄧ‘璁ゅ垹闄よ璁㈠崟鍚楋紵
+ </view>
+ </view>
+ <view class="tc-btn">
+ <view class="tc-btn-item" @click="showDelete = false;currentOrder=null;">鎴戝啀鎯虫兂</view>
+ <view class="tc-btn-item" style="color: red;" @click="deleteOrderDo">纭鍒犻櫎</view>
+ </view>
+ </view>
+ </u-popup>
+ <u-popup :show="showQrcode" round="15" @close="openQrcode()" :safeAreaInsetBottom="false" mode="bottom" :closeable="true" :closeOnClickOverlay="false">
+ <view class="tc" style="height: 700rpx;width: 100%; ">
+ <view class="tc-contemt" style="text-align: center;">
+ <view class="tc-contemt-title" style="text-align: center;">鏍搁攢鐮�</view>
+ <view class="qrcode-box">
+ <canvas canvas-id="qrcodeCanvas" id="qrcodeCanvas" style="width: 100px; height: 100px;"></canvas>
+ <image class="qrcode-image" :src="qrcodeImage" mode="widthFix"></image>
+ </view>
+ <text class="pickup-code">{{ currentOrder.memberVerifyCode||'' }}</text>
+ <text class="pickup-tip" @tap="copyCode">鐐瑰嚮澶嶅埗鑷彁鐮�</text>
+ </view>
+ </view>
+ </u-popup>
</view>
</template>
<script>
import { mapState } from 'vuex'
- import CustomTabbar from '@/components/custom-tabbar/custom-tabbar.vue'
+ import drawQrcode from 'weapp-qrcode'
export default {
- components: {
- CustomTabbar
- },
computed: {
...mapState(['navHeight', 'statusbarHeight'])
},
data() {
return {
activeTab: -1,
+ loading:false,
pageSize: 10,
currentPage: 1,
+ showDone:false,
+ showCancel:false,
+ showDelete:false,
+ showQrcode:false,
+ showPay:false,
+ showPhone:false,
total:0,
hasNext:true,
userType: 0,
+ qrcodeImage:null,
isLoadingMore: false,
+ currentOrder:null,
filterTabs: [
{ label: '鍏ㄩ儴' ,value: -1},
{ label: '寰呮敮浠�',value: 0 },
@@ -161,19 +268,167 @@
})
},
onShow() {
- // this.showDone=false
- // this.showCancel=false
- // this.showDelete=false
- // this.showQrcode=false
- // this.showPay=false
- // this.showPhone=false
- this.loading=false,
+ this.showDone=false
+ this.showCancel=false
+ this.showDelete=false
+ this.showQrcode=false
+ this.showPay=false
+ this.showPhone=false
+ this.loading=false
this.currentOrder=null
},
onReachBottom(){
this.getDataList();
},
methods: {
+ payOrder(item){
+ var that = this;
+ uni.showLoading({ title: '鍙戣捣鏀粯涓�...', mask: true })
+ this.$u.api.continuePayOrder({
+ orderId: item.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' })
+ })
+ },
+ doneOrder(item){
+ this.currentOrder = null
+ this.showDone = !this.showDone
+ if(this.showDone){
+ this.currentOrder = item
+ }
+ },
+ async doneOrderDo(){
+ if(this.userType == 1 || this.currentOrder==null || this.currentOrder.id == null) {
+ return
+ }
+ var that =this
+ let res = await this.$u.api.confirmReceipt({ orderId: this.currentOrder.id });
+ if (res.code === 200 ) {
+ that.showDone = false
+ that.getFirstPageData()
+ that.showDone()
+ }
+ },
+ contactPhone(item){
+ this.showPhone = !this.showPhone
+ this.linkItem = item ||{}
+ console.log("==================================",this.showPhone)
+ },
+ contactPhoneDo(){
+ if(this.linkItem.linkphone !=null && this.linkItem.linkphone!=''){
+ uni.makePhoneCall({
+ phoneNumber: this.linkItem.linkphone
+ })
+ }
+ },
+ cancelOrder(item){
+ this.currentOrder = null
+ this.showCancel = !this.showCancel
+ if(this.showCancel){
+ this.currentOrder = item
+ }
+ },
+ deleteOrder(item){
+ this.currentOrder = null
+ this.showDelete = !this.showDelete
+ if(this.showDelete){
+ this.currentOrder = item
+ }
+ },
+ async cancelOrderDo(){
+ if( this.currentOrder==null || this.currentOrder.id == null) {
+ return
+ }
+ var that =this
+ let res = await that.$u.api.cancelOrder({ orderId: this.currentOrder.id });
+ if (res.code === 200 ) {
+ this.showCancel = false
+ //淇敼璁㈠崟鐘舵��
+ this.dataList.forEach(item=>{
+ if(item.id==this.currentOrder.id){
+ item.status = 4
+ }
+ })
+ that.getFirstPageData()
+ }
+ },
+ async deleteOrderDo(){
+ if( this.currentOrder==null || this.currentOrder.id == null) {
+ return
+ }
+ var that =this
+ let res = await that.$u.api.deleteOrder({ orderId: this.currentOrder.id });
+ if (res.code === 200 ) {
+ this.showDelete = false
+ this.getFirstPageData()
+ }
+ },
+ copyCode() {
+ if (!this.currentOrder || !this.currentOrder.memberVerifyCode) {
+ return
+ }
+ uni.setClipboardData({
+ data: this.currentOrder.memberVerifyCode,
+ success: () => {
+ uni.showToast({
+ title: '宸插鍒惰嚜鎻愮爜',
+ icon: 'none'
+ })
+ }
+ })
+ },
+ async openQrcode(item){
+ this.currentOrder = null
+ this.qrcodeImage=null
+ var that =this
+ if(!this.showQrcode){
+ this.showQrcode =true
+ this.currentOrder = item
+ drawQrcode({
+ canvasId: 'qrcodeCanvas',
+ text: item.memberVerifyCode,
+ width: 100,
+ height: 100,
+ correctLevel: 2
+ })
+ setTimeout(() => {
+ uni.canvasToTempFilePath({
+ canvasId: 'qrcodeCanvas',
+ success: (res) => {
+ that.qrcodeImage = res.tempFilePath
+ }
+ }, this)
+ }, 100)
+ }else{
+ this.showQrcode = false
+ }
+ },
getFirstPageData(){
this.currentPage = 0
this.hasNext=true
@@ -226,6 +481,11 @@
</script>
<style lang="scss" scoped>
+ .tc-contemt{
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ }
.itinerary-page {
min-height: 100vh;
background: #f7f7f7;
@@ -318,7 +578,7 @@
}
.order-head {
- padding: 24rpx 30rpx;
+ // padding: 24rpx 30rpx;
display: flex;
align-items: center;
justify-content: space-between;
@@ -333,10 +593,19 @@
background: #fff4e8;
}
- .head-local,
+ .head-local{
+ flex: 1;
+ padding: 24rpx 30rpx;
+ min-width: 0;
+ display: flex;
+ align-items: center;
+ background: linear-gradient(90deg, #15B9F7 -20%, #ffffff 100%);
+ }
.head-city {
flex: 1;
min-width: 0;
+ padding: 24rpx 30rpx;
+ background: linear-gradient(90deg, #FA8010 -20%, #ffffff 100%);
display: flex;
align-items: center;
}
@@ -364,7 +633,7 @@
height: 38rpx;
border-radius: 8rpx;
display: flex;
- align-items: center;
+ align-items: baseline;
justify-content: center;
font-weight: 400;
font-size: 24rpx;
@@ -374,12 +643,14 @@
}
.local-tag {
- background: linear-gradient(90deg, #18abf8 0%, #39c5ff 100%);
+ background: #18abf8;
+ // background: linear-gradient(90deg, #18abf8 0%, #39c5ff 100%);
}
.city-tag {
- background: linear-gradient(90deg, #ff8b28 0%, #ffb14f 100%);
+ // background: linear-gradient(90deg, #ff8b28 0%, #ffb14f 100%);
margin-right: 0;
+ background: #ff8b28;
margin-bottom: 8rpx;
}
@@ -439,15 +710,35 @@
.status-text {
font-weight: 400;
+ line-height: 36rpx;
font-size: 26rpx;
color: #10B2FA;
flex-shrink: 0;
}
+ .status-orange{
+ color: #FA8010 !important;
+ }
+
+
+ .status-grey{
+ color: #666666 !important;
+ }
+
.goods-area {
padding: 22rpx 30rpx;
box-sizing: border-box;
}
+
+ .status-orange{
+ color: #FA8010 !important;
+ }
+
+
+ .status-orange{
+ color: #FA8010 !important;
+ }
+
.goods-row {
display: flex;
@@ -498,8 +789,13 @@
font-size: 24rpx;
color: #8C939F;
}
-
+ .price-line{
+ box-sizing: border-box;
+ display: flex;
+ align-items: flex-end;
+ }
.amount-area {
+ width: 50%;
padding: 0 30rpx;
box-sizing: border-box;
display: flex;
@@ -548,6 +844,7 @@
display: flex;
align-items: flex-start;
flex-direction: column;
+ width: 50%;
}
.pickup-label {
@@ -563,11 +860,12 @@
}
.footer-actions {
- margin-left: auto;
display: flex;
- align-items: center;
+ justify-content: flex-end;
+ align-items: flex-end;
gap: 10rpx;
margin: 0 !important;
+ width: 100%;
}
.footer-btn {
@@ -602,4 +900,36 @@
font-size: 22rpx;
color: #a5aab3;
}
+ .qrcode-box {
+ margin-top: 40rpx;
+ width: 360rpx;
+ height: 360rpx;
+ border-radius: 8rpx;
+ box-sizing: border-box;
+ position: relative;
+ canvas {
+ position: absolute;
+ top: 0;
+ left: 0;
+ opacity: 0;
+ }
+ }
+
+ .qrcode-image {
+ width: 100%;
+ height: 100%;
+ }
+ .pickup-code {
+ margin-top: 32rpx;
+ font-weight: 600;
+ font-size: 36rpx;
+ color: #222222;
+ }
+
+ .pickup-tip {
+ font-weight: 400;
+ font-size: 24rpx;
+ color: #999999;
+ margin-top: 24rpx;
+ }
</style>
--
Gitblit v1.9.3