Browse Source

feat: 新增订单支付功能并优化页面交互

- 在order.js中新增orderPay接口用于再次支付订单
- 修改confirmOrder.vue中的导航逻辑,使用uni.reLaunch替换uni.navigateTo
- 在orderList.vue中实现支付功能并添加支付状态管理
- 优化serviceNew.vue页面,增加下单方式显示
- 在payOrderSuccessful.vue中添加跳转功能,完善服务档案和门锁信息
- 移除companionPetInfo.vue中的收藏功能,增加图片预览功能
master
前端-胡立永 2 months ago
parent
commit
8a96cad47b
8 changed files with 89 additions and 18 deletions
  1. +12
    -0
      api/order/order.js
  2. +13
    -5
      pages/companionPetList/companionPetInfo.vue
  3. +2
    -4
      pages/index.vue
  4. +1
    -1
      pages/newOrder/confirmOrder.vue
  5. +11
    -0
      pages/newOrder/serviceNew.vue
  6. +1
    -0
      pages/newOrder/serviceNew2.vue
  7. +40
    -4
      pages_order/order/orderList.vue
  8. +9
    -4
      pages_order/order/payOrderSuccessful.vue

+ 12
- 0
api/order/order.js View File

@ -147,3 +147,15 @@ export const orderCancel = (data) => {
// 再次支付订单
export const orderPay = (data) => {
return request({
url: '/applet/mall/order/orderPay',
headers: {
isToken: true
},
method: "POST",
data
})
}

+ 13
- 5
pages/companionPetList/companionPetInfo.vue View File

@ -22,7 +22,7 @@
style="height: 40rpx;"></image> -->
</view>
</view>
<view class="companion-info-right" @click="onClickFav">
<!-- <view class="companion-info-right" @click="onClickFav">
<view v-if="collect">
<uni-icons type="star-filled" size="18" color="#FFB13F"></uni-icons>
<text style="font-size: 16px; color: #FFB13F; margin-left: 6rpx;">已收藏</text>
@ -31,7 +31,7 @@
<uni-icons type="star" size="18" color="#7D8196"></uni-icons>
<text style="font-size: 16px; color: #7D8196; margin-left: 6rpx;">收藏</text>
</view>
</view>
</view> -->
</view>
</view>
<view class="companion-info-des">
@ -282,9 +282,9 @@
{{item.serviceTime}}
</view>
</view>
<view class="service-record-info-4" style="width: 100%;">
<view class="service-record-info-4" style="width: 100%;" v-if="item.petName">
<view class="ellipsis" style="max-width: 225px;">
宠物{{item.petName}}
宠物{{ item.petName }}
</view>
</view>
</view>
@ -294,7 +294,9 @@
</view>
<view class="service-record-pet-images">
<view v-for="(img,index) in item.images" :key="index">
<image class="service-record-pet-images-item" slot='cover' :src="img">
<image
@click="previewImage(item.images, index)"
class="service-record-pet-images-item" slot='cover' :src="img">
</image>
</view>
</view>
@ -508,6 +510,12 @@
url: `/pages/newOrder/serviceNew2?userName=${this.companionInfo.name}&servicerId=${this.companionInfo.id}`,
});
},
previewImage(urls, current){
uni.previewImage({
current,
urls
})
},
}
}
</script>


+ 2
- 4
pages/index.vue View File

@ -957,11 +957,8 @@
if (!getToken() || !getOpenIdKey()) {
this.login()
} else {
this.getCouponListAuth()
}
this.getCouponListAuth()
//
this.getCouponListNoAuth()
// 使
this.$store.commit('setPosition', {
@ -1116,6 +1113,7 @@
justify-content: space-between;
align-items: center;
height: 60px;
font-size: 24rpx;
.card-content {
width: 77%;


+ 1
- 1
pages/newOrder/confirmOrder.vue View File

@ -738,7 +738,7 @@
totalPrice: 0,
needPreFamiliarize: []
}
uni.navigateTo({
uni.reLaunch({
url: '/pages_order/order/payOrderSuccessful'
// url: '/pages/details/successful'
});


+ 11
- 0
pages/newOrder/serviceNew.vue View File

@ -28,6 +28,17 @@
</view>
</view>
</view>
<view class="order-type-select" v-if="buyInfo.teacher">
<view class="order-type-title">
<image style="width: 40rpx; height: 40rpx;margin-right: 10rpx;" slot='cover' src="https://catmdogf.oss-cn-shanghai.aliyuncs.com/CMDF/front/petServiceOrder/OrderIcon.png">
</image>
<!-- <image style="width: 32rpx; height: 32rpx; margin-right: 10rpx;" src="https://catmdogf.oss-cn-shanghai.aliyuncs.com/CMDF/front/petServiceOrder/SystemOrderCircle.png"></image> -->
下单方式指定喂养员 - <text style="color: #999;font-size: 26rpx;">{{buyInfo.teacher.userName}}</text>
</view>
</view>
<uni-popup ref="companionInfoPopup" type="center">
<view class="companion-info-popup">


+ 1
- 0
pages/newOrder/serviceNew2.vue View File

@ -18,6 +18,7 @@
</text>
</view>
</view>
<view>
<uni-card padding=0 :is-shadow="false">
<view class="service-new-title" slot="title">


+ 40
- 4
pages_order/order/orderList.vue View File

@ -72,12 +72,15 @@
<!-- <view class="action-btn pay-btn" v-if="order.status == 1 || order.status == 2" @click="modifyOrder(order)">
<text>修改订单</text>
</view> -->
<view class="action-btn pay-btn" v-if="order.status == 4" @click="goToReview(order)">
<view class="action-btn pay-btn" v-if="order.status == 3" @click="goToReview(order)">
<text>去评价</text>
</view>
<view class="action-btn pay-btn" v-if="order.status == 3" @click="handleReorder(order)">
<text>再来一单</text>
</view>
<view class="action-btn pay-btn" v-if="order.status == 2" @click="handleReorder(order)">
<text>查看服务记录</text>
</view>
</view>
</view>
@ -116,7 +119,8 @@
// getOrderList
} from "@/api/system/user.js"
import {
getOrderList
getOrderList,
orderPay
} from "@/api/order/order.js"
import {
getOpenIdKey
@ -161,6 +165,7 @@
loading: false,
refreshing: false,
currentOrder: null,
isPaying : false,
// API
exampleData: [{
id: '1',
@ -232,10 +237,41 @@
//
goToPay(orderId) {
uni.navigateTo({
url: `/pages/details/order?id=${orderId}`
orderPay({
orderId: orderId
}).then(res => {
this.pay(res.data)
}).catch(err => {
console.log(err);
});
},
pay(params) {
if (this.isPaying) {
return;
}
this.isPaying = true
uni.requestPayment({
provider: 'wxpay',
timeStamp: params.timeStamp,
nonceStr: params.nonceStr,
package: params.package_,
signType: params.signType,
paySign: params.paySign,
success: (res) => {
this.$modal.showToast('支付成功')
this.getOrderList()
},
fail: (err) => {
this.loading = false
console.log('支付失败', err)
this.$modal.showToast('支付失败')
},
complete: () => {
this.loading = false
this.isPaying = false
}
})
},
//
goToReview({teacherId, orderId}) {


+ 9
- 4
pages_order/order/payOrderSuccessful.vue View File

@ -29,7 +29,7 @@
<text class="item-title">完善服务档案</text>
<text class="item-desc">请上传宠物喂养要求及用品摆放位置</text>
</view>
<view class="item-action">
<view class="item-action" @click="toPath('/pages/personalCenter/service')">
<text class="action-btn">去完善</text>
</view>
</view>
@ -42,7 +42,7 @@
<text class="item-title">完善门锁信息</text>
<text class="item-desc">请上传门锁及相应密码要求</text>
</view>
<view class="item-action">
<view class="item-action" @click="toPath('/pages/personalCenter/lock')">
<text class="action-btn">去完善</text>
</view>
</view>
@ -81,6 +81,11 @@
url: "/pages/index"
});
},
toPath(url){
uni.navigateTo({
url
})
},
}
}
</script>
@ -124,8 +129,8 @@
.item-text {
display: flex;
flex-direction: column;
justify-content: center;;
align-items: center;
justify-content: center;
//align-items: center;
.item-title {
font-size: 28rpx;
color: #333;


Loading…
Cancel
Save