Skip to content

U
uni-pdtravel
Commit 392c5dbb authored by 潘永坪's avatar 潘永坪
Browse files
Options

订单支付优化

parent 77a0a556
Show whitespace changes
Inline Side-by-side
Showing with 160 additions and 149 deletions
pages/my/takeNumber/numberIndex/numberIndex.vue
View file @ 392c5dbb
...@@ -258,6 +258,7 @@ export default { ...@@ -258,6 +258,7 @@ export default {
} }
.mark-close{ .mark-close{
margin-top: 60rpx; margin-top: 60rpx;
text-align: center; display: flex;
justify-content: center;
} }
</style> </style>
pages/payment/orderPayment/orderPayment.vue
View file @ 392c5dbb
<template> <template>
<view v-show="bodyShow"> <view>
<view class="middle"> <view class="middle" v-show="orderList.length>0">
<view class="main"> <view class="middle-wrap">
<view v-if="orderList.length>0" v-for="item of orderList" :key="item.id" class="product"> <view v-for="item of orderList" :key="item.id" class="product">
<view> <view>
<text> {{ item.merchantName }}（{{ item.productName }}） </text> <text> {{ item.merchantName }}（{{ item.productName }}） </text>
...@@ -15,16 +15,14 @@ ...@@ -15,16 +15,14 @@
<text> 券 </text> <text> <text style="font-size:24rpx;">-¥</text>{{ item.pdDiscountMoney }} </text> <text> 券 </text> <text> <text style="font-size:24rpx;">-¥</text>{{ item.pdDiscountMoney }} </text>
</view> </view>
</view> </view>
<view class="mainP3"> <view class="middle-money">
<text> 实际支付 </text> <view> 实际支付 </view>
<text> <view>
<!--<i> <text style="font-size:28rpx;">¥</text>
¥{{totalMoney}} {{ pdOrderMoney }}
</i>--> </view>
<text> <text style="font-size:28rpx;">¥</text>{{ pdOrderMoney }} </text>
</text>
</view> </view>
<view class="mainview"> <view class="middle-image">
<!-- #ifdef MP-WEIXIN --> <!-- #ifdef MP-WEIXIN -->
<image src="@/static/img/orderPayment/weixin.png" style="width:70rpx;height:62rpx;" /> <view> 微信支付 </view> <image src="@/static/img/orderPayment/weixin.png" style="width:70rpx;height:62rpx;" /> <view> 微信支付 </view>
<!-- #endif --> <!-- #endif -->
...@@ -36,16 +34,20 @@ ...@@ -36,16 +34,20 @@
</view> </view>
</view> </view>
</view> </view>
<view v-show="errorMessage1||errorMessage2">
错误1：{{errorMessage1}}
错误2：{{errorMessage2}}
</view>
<view class="bottom"> <view class="bottom">
<view class="bottomFirst"> <view class="bottom-left">
<text> 实付款 </text> <text>实付款 </text>
<text v-show="pdOrderMoney">
<text> <text>¥</text>{{ pdOrderMoney }} </text> <text style="font-size: 28rpx;">¥</text>
{{pdOrderMoney}}
</text>
</view> </view>
<view class="bottom-right">
<view class="bottomLast"> <u-icon name="chat" size="40" @click="makePhone()"></u-icon>
<text href="tel:400-072-0368"> <!-- <img src="@/assets/img/combination/kefu11.png" style="width: 0.31rpx;" /> --> </text>
<text @click="goPay()" :style="{ background: background }">去支付</text> <text @click="goPay()" :style="{ background: background }">去支付</text>
</view> </view>
</view> </view>
...@@ -59,14 +61,14 @@ export default { ...@@ -59,14 +61,14 @@ export default {
orderList:[], //订单列表 orderList:[], //订单列表
pdOrderMoney: '', //实际总价 pdOrderMoney: '', //实际总价
totalMoney: '', //原价总价 totalMoney: '', //原价总价
errorMessage: '', //错误信息 errorMessage1: '', //错误信息1，接口成功返回的错误信息
bodyShow: false, //控制初始化数据成功显示 errorMessage2: '', //错误信息2，接口失败返回的错误信息
payType: '', //支付类型 payType: '', //支付类型
timeStamp: '', //支付参数 timeStamp: '', //微信支付参数
nonceStr: '', nonceStr: '',//微信支付参数
package: '', package: '',//微信支付参数
signType: '', signType: '',//微信支付参数
paySign: '', paySign: '',//微信支付参数
orderInfo: '', //支付宝订单号 orderInfo: '', //支付宝订单号
background: '', //去支付的背景颜色 background: '', //去支付的背景颜色
orderId: '', //订单Id orderId: '', //订单Id
...@@ -93,6 +95,10 @@ export default { ...@@ -93,6 +95,10 @@ export default {
} else { } else {
this.login() //极个别手机从公众号跳转回来没有openid,再次获取openid this.login() //极个别手机从公众号跳转回来没有openid,再次获取openid
} }
console.log(111)
},
onShow() {
console.log(222)
}, },
methods: { methods: {
login() { login() {
...@@ -141,13 +147,22 @@ export default { ...@@ -141,13 +147,22 @@ export default {
} }
}) })
}, },
initDetail() { //---拨打电话
makePhone() {
uni.makePhoneCall({
phoneNumber:'400-072-0368'
})
},
//---初始化产品信息，以及获取支付需要的参数 //---初始化产品信息，以及获取支付需要的参数
initDetail() {
let data = { let data = {
orderId: this.orderId, //订单Id orderId: this.orderId, //订单Id
userId: this.openid, //用户Id userId: this.openid, //用户Id
payType: this.payType //支付类型 payType: this.payType //支付类型
} }
uni.showLoading({
mask:true
})
this.$request('orderc/order/findOrderInfo', data).then(res => { this.$request('orderc/order/findOrderInfo', data).then(res => {
if (res.code == '00') { if (res.code == '00') {
if(this.albumOrderdetail==1){ if(this.albumOrderdetail==1){
...@@ -159,8 +174,6 @@ export default { ...@@ -159,8 +174,6 @@ export default {
this.afterBuyUrl='/pages/my/order/orderList/orderList' this.afterBuyUrl='/pages/my/order/orderList/orderList'
} }
} }
this.bodyShow = true
//支付参数开始 //支付参数开始
this.timeStamp = res.data.timestamp this.timeStamp = res.data.timestamp
this.nonceStr = res.data.noncestr this.nonceStr = res.data.noncestr
...@@ -176,7 +189,7 @@ export default { ...@@ -176,7 +189,7 @@ export default {
url: '/pages/payment/paySuccess/paySuccess?orderId=' + this.orderId+'&afterBuyUrl=' + this.afterBuyUrl + '&ifyukuaiCode=' + this.ifyukuaiCode url: '/pages/payment/paySuccess/paySuccess?orderId=' + this.orderId+'&afterBuyUrl=' + this.afterBuyUrl + '&ifyukuaiCode=' + this.ifyukuaiCode
}) })
} }
this.errorMessage = res.data.errorMessage this.errorMessage1 = res.data.errorMessage
this.totalMoney = res.data.totalMoney this.totalMoney = res.data.totalMoney
this.orderList = res.data.orderList||[] this.orderList = res.data.orderList||[]
if (this.orderList.length==0) { if (this.orderList.length==0) {
...@@ -195,14 +208,15 @@ export default { ...@@ -195,14 +208,15 @@ export default {
title: res.message, title: res.message,
icon: 'none' icon: 'none'
}) })
this.errorMessage2=res.message
} }
}) })
}, },
//----去支付
goPay() { goPay() {
//-------------------------------------------------------去支付 if (this.errorMessage1) {
if (this.errorMessage) {
uni.showToast({ uni.showToast({
title: this.errorMessage, title: this.errorMessage1,
icon: 'none' icon: 'none'
}) })
return return
...@@ -211,8 +225,14 @@ export default { ...@@ -211,8 +225,14 @@ export default {
setTimeout(() => { setTimeout(() => {
this.background = 'f9690e' this.background = 'f9690e'
}, 1000) }, 1000)
// #ifdef MP-WEIXIN // #ifdef MP-WEIXIN
if(!this.timeStamp||!this.nonceStr||!this.package||!this.signType||!this.paySign){
uni.showToast({
title: '缺少支付参数',
icon: 'none'
})
return
}
uni.requestPayment({ uni.requestPayment({
provider: 'wxpay', provider: 'wxpay',
timeStamp: this.timeStamp, timeStamp: this.timeStamp,
...@@ -235,6 +255,13 @@ export default { ...@@ -235,6 +255,13 @@ export default {
//#endif //#endif
// #ifdef MP-ALIPAY // #ifdef MP-ALIPAY
if(!this.orderInfo){
uni.showToast({
title: '缺少支付参数',
icon: 'none'
})
return
}
uni.requestPayment({ uni.requestPayment({
provider: 'alipay', // 服务提供商 支付宝支付: alipay 微信支付: wxpay provider: 'alipay', // 服务提供商 支付宝支付: alipay 微信支付: wxpay
orderInfo: this.orderInfo, // 支付宝订单号 orderInfo: this.orderInfo, // 支付宝订单号
...@@ -264,7 +291,7 @@ export default { ...@@ -264,7 +291,7 @@ export default {
.middle { .middle {
padding: 30rpx 24rpx 0 24rpx; padding: 30rpx 24rpx 0 24rpx;
} }
.main { .middle-wrap {
padding: 10rpx 24rpx 20rpx 24rpx; padding: 10rpx 24rpx 20rpx 24rpx;
background: #ffffff; background: #ffffff;
border-radius: 20rpx; border-radius: 20rpx;
...@@ -296,7 +323,7 @@ export default { ...@@ -296,7 +323,7 @@ export default {
.product view.coupon text { .product view.coupon text {
font-size: 30rpx; font-size: 30rpx;
} }
.mainP3 { .middle-money {
height: 120rpx; height: 120rpx;
color: #000000; color: #000000;
border-bottom: 1px solid #e5e5e5; border-bottom: 1px solid #e5e5e5;
...@@ -306,25 +333,24 @@ export default { ...@@ -306,25 +333,24 @@ export default {
box-sizing: border-box; box-sizing: border-box;
justify-content: space-between; justify-content: space-between;
} }
.mainP3 text:nth-child(2) { .middle-money view:nth-child(2) {
font-size: 24rpx; font-size: 24rpx;
color: #666666; color: #666666;
} }
.mainP3 text:nth-child(2) text:nth-child(1) { .middle-money view:nth-child(2) {
font-size: 36rpx; font-size: 36rpx;
color: #f9690e; color: #f9690e;
margin-left: 20rpx;
font-weight: bold; font-weight: bold;
} }
.mainview { .middle-image {
margin-top: 50rpx; margin-top: 50rpx;
display: flex; display: flex;
align-items: center; align-items: center;
} }
.mainview > image:first-child { .middle-image > image:first-child {
margin: 0 20rpx 0 10rpx; margin: 0 20rpx 0 10rpx;
} }
.mainview > view { .middle-image > view {
flex: 1; flex: 1;
} }
.bottom { .bottom {
...@@ -337,41 +363,25 @@ export default { ...@@ -337,41 +363,25 @@ export default {
display: flex; display: flex;
align-items: center; align-items: center;
} }
.bottomFirst { .bottom-left {
border-right: 1px solid #cccccc; border-right: 1px solid #cccccc;
padding-left: 40rpx; padding-left: 40rpx;
width: 40%; width: 40%;
box-sizing: border-box;
} }
.bottomFirst text:nth-child(2) { .bottom-left text:nth-child(2) {
font-size: 40rpx; font-size: 40rpx;
color: #f9690e; color: #f9690e;
margin-left: 10rpx; margin-left: 10rpx;
font-weight: bold; font-weight: bold;
} }
.bottomFirst text:nth-child(2) text { .bottom-right {
font-size: 28rpx; padding-left:30rpx;
}
.bottomLast {
padding-left: 20rpx;
display: flex; display: flex;
width: 60%; width: 60%;
padding-right: 20rpx; padding-right:30rpx;
box-sizing: border-box;
align-items: center; align-items: center;
} }
.bottomLast text:first-child { .bottom-right text:nth-child(2) {
display: block;
text-align: center;
width: 60rpx;
}
.bottomLast text:first-child text {
margin-top: 10rpx;
display: inline-block;
font-size: 24rpx;
color: #666666;
}
.bottomLast text:nth-child(2) {
flex: 1; flex: 1;
height: 70rpx; height: 70rpx;
display: inline-block; display: inline-block;
...@@ -382,5 +392,6 @@ export default { ...@@ -382,5 +392,6 @@ export default {
margin-left: 30rpx; margin-left: 30rpx;
border-radius: 20rpx; border-radius: 20rpx;
font-size: 32rpx; font-size: 32rpx;
font-weight: bold;
} }
</style> </style>
uview-ui/components/u-icon/u-icon.vue
View file @ 392c5dbb
...@@ -35,23 +35,23 @@ ...@@ -35,23 +35,23 @@
</template> </template>
<script> <script>
// #ifdef APP-NVUE // #ifdef APP-NVUE
// nvue通过weex的dom模块引入字体，相关文档地址如下： // nvue通过weex的dom模块引入字体，相关文档地址如下：
// https://weex.apache.org/zh/docs/modules/dom.html#addrule // https://weex.apache.org/zh/docs/modules/dom.html#addrule
const fontUrl = 'https://at.alicdn.com/t/font_2225171_8kdcwk4po24.ttf' const fontUrl = 'https://at.alicdn.com/t/font_2225171_8kdcwk4po24.ttf'
const domModule = weex.requireModule('dom') const domModule = weex.requireModule('dom')
domModule.addRule('fontFace', { domModule.addRule('fontFace', {
'fontFamily': "uicon-iconfont", 'fontFamily': 'uicon-iconfont',
'src': `url('${fontUrl}')` 'src': `url('${fontUrl}')`
}) })
// #endif // #endif
// 引入图标名称，已经对应的unicode // 引入图标名称，已经对应的unicode
import icons from './icons' import icons from './icons'
import props from './props.js';; import props from './props.js'
/** /**
* icon 图标 * icon 图标
* @description 基于字体的图标集，包含了大多数常见场景的图标。 * @description 基于字体的图标集，包含了大多数常见场景的图标。
* @tutorial https://www.uviewui.com/components/icon.html * @tutorial https://www.uviewui.com/components/icon.html
...@@ -77,7 +77,7 @@ ...@@ -77,7 +77,7 @@
* @event {Function} touchstart 事件触摸时触发 * @event {Function} touchstart 事件触摸时触发
* @example <u-icon name="photo" color="#2979ff" size="28"></u-icon> * @example <u-icon name="photo" color="#2979ff" size="28"></u-icon>
*/ */
export default { export default {
name: 'u-icon', name: 'u-icon',
data() { data() {
return { return {
...@@ -142,7 +142,7 @@ ...@@ -142,7 +142,7 @@
this.stop && this.preventEvent(e) this.stop && this.preventEvent(e)
} }
} }
} }
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
...@@ -162,7 +162,6 @@ ...@@ -162,7 +162,6 @@
font-family: 'uicon-iconfont'; font-family: 'uicon-iconfont';
src: url('https://at.alicdn.com/t/font_2225171_8kdcwk4po24.ttf') format('truetype'); src: url('https://at.alicdn.com/t/font_2225171_8kdcwk4po24.ttf') format('truetype');
} }
/* #endif */ /* #endif */
.u-icon { .u-icon {
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment