Skip to content

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

订单支付优化

parent 77a0a556
Hide 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 {
}
.mark-close{
margin-top: 60rpx;
text-align: center;
display: flex;
justify-content: center;
}
</style>
pages/payment/orderPayment/orderPayment.vue
View file @ 392c5dbb
<template>
<view v-show="bodyShow">
<view class="middle">
<view class="main">
<view v-if="orderList.length>0" v-for="item of orderList" :key="item.id" class="product">
<view>
<view class="middle" v-show="orderList.length>0">
<view class="middle-wrap">
<view v-for="item of orderList" :key="item.id" class="product">
<view>
<text> {{ item.merchantName }}（{{ item.productName }}） </text>
......@@ -15,16 +15,14 @@
<text> 券 </text> <text> <text style="font-size:24rpx;">-¥</text>{{ item.pdDiscountMoney }} </text>
</view>
</view>
<view class="mainP3">
<text> 实际支付 </text>
<text>
<!--<i>
¥{{totalMoney}}
</i>-->
<text> <text style="font-size:28rpx;">¥</text>{{ pdOrderMoney }} </text>
</text>
<view class="middle-money">
<view> 实际支付 </view>
<view>
<text style="font-size:28rpx;">¥</text>
{{ pdOrderMoney }}
</view>
</view>
<view class="mainview">
<view class="middle-image">
<!-- #ifdef MP-WEIXIN -->
<image src="@/static/img/orderPayment/weixin.png" style="width:70rpx;height:62rpx;" /> <view> 微信支付 </view>
<!-- #endif -->
......@@ -36,16 +34,20 @@
</view>
</view>
</view>
<view v-show="errorMessage1||errorMessage2">
错误1：{{errorMessage1}}
错误2：{{errorMessage2}}
</view>
<view class="bottom">
<view class="bottomFirst">
<text> 实付款 </text>
<text> <text>¥</text>{{ pdOrderMoney }} </text>
<view class="bottom-left">
<text>实付款 </text>
<text v-show="pdOrderMoney">
<text style="font-size: 28rpx;">¥</text>
{{pdOrderMoney}}
</text>
</view>
<view class="bottomLast">
<text href="tel:400-072-0368"> <!-- <img src="@/assets/img/combination/kefu11.png" style="width: 0.31rpx;" /> --> </text>
<view class="bottom-right">
<u-icon name="chat" size="40" @click="makePhone()"></u-icon>
<text @click="goPay()" :style="{ background: background }">去支付</text>
</view>
</view>
......@@ -59,14 +61,14 @@ export default {
orderList:[], //订单列表
pdOrderMoney: '', //实际总价
totalMoney: '', //原价总价
errorMessage: '', //错误信息
bodyShow: false, //控制初始化数据成功显示
errorMessage1: '', //错误信息1，接口成功返回的错误信息
errorMessage2: '', //错误信息2，接口失败返回的错误信息
payType: '', //支付类型
timeStamp: '', //支付参数
nonceStr: '',
package: '',
signType: '',
paySign: '',
timeStamp: '', //微信支付参数
nonceStr: '',//微信支付参数
package: '',//微信支付参数
signType: '',//微信支付参数
paySign: '',//微信支付参数
orderInfo: '', //支付宝订单号
background: '', //去支付的背景颜色
orderId: '', //订单Id
......@@ -93,6 +95,10 @@ export default {
} else {
this.login() //极个别手机从公众号跳转回来没有openid,再次获取openid
}
console.log(111)
},
onShow() {
console.log(222)
},
methods: {
login() {
......@@ -141,13 +147,22 @@ export default {
}
})
},
//---拨打电话
makePhone() {
uni.makePhoneCall({
phoneNumber:'400-072-0368'
})
},
//---初始化产品信息，以及获取支付需要的参数
initDetail() {
//---初始化产品信息，以及获取支付需要的参数
let data = {
orderId: this.orderId, //订单Id
userId: this.openid, //用户Id
payType: this.payType //支付类型
}
uni.showLoading({
mask:true
})
this.$request('orderc/order/findOrderInfo', data).then(res => {
if (res.code == '00') {
if(this.albumOrderdetail==1){
......@@ -159,8 +174,6 @@ export default {
this.afterBuyUrl='/pages/my/order/orderList/orderList'
}
}
this.bodyShow = true
//支付参数开始
this.timeStamp = res.data.timestamp
this.nonceStr = res.data.noncestr
......@@ -176,7 +189,7 @@ export default {
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.orderList = res.data.orderList||[]
if (this.orderList.length==0) {
......@@ -195,14 +208,15 @@ export default {
title: res.message,
icon: 'none'
})
this.errorMessage2=res.message
}
})
},
//----去支付
goPay() {
//-------------------------------------------------------去支付
if (this.errorMessage) {
if (this.errorMessage1) {
uni.showToast({
title: this.errorMessage,
title: this.errorMessage1,
icon: 'none'
})
return
......@@ -211,8 +225,14 @@ export default {
setTimeout(() => {
this.background = 'f9690e'
}, 1000)
// #ifdef MP-WEIXIN
if(!this.timeStamp||!this.nonceStr||!this.package||!this.signType||!this.paySign){
uni.showToast({
title: '缺少支付参数',
icon: 'none'
})
return
}
uni.requestPayment({
provider: 'wxpay',
timeStamp: this.timeStamp,
......@@ -235,6 +255,13 @@ export default {
//#endif
// #ifdef MP-ALIPAY
if(!this.orderInfo){
uni.showToast({
title: '缺少支付参数',
icon: 'none'
})
return
}
uni.requestPayment({
provider: 'alipay', // 服务提供商 支付宝支付: alipay 微信支付: wxpay
orderInfo: this.orderInfo, // 支付宝订单号
......@@ -264,7 +291,7 @@ export default {
.middle {
padding: 30rpx 24rpx 0 24rpx;
}
.main {
.middle-wrap {
padding: 10rpx 24rpx 20rpx 24rpx;
background: #ffffff;
border-radius: 20rpx;
......@@ -296,7 +323,7 @@ export default {
.product view.coupon text {
font-size: 30rpx;
}
.mainP3 {
.middle-money {
height: 120rpx;
color: #000000;
border-bottom: 1px solid #e5e5e5;
......@@ -306,25 +333,24 @@ export default {
box-sizing: border-box;
justify-content: space-between;
}
.mainP3 text:nth-child(2) {
.middle-money view:nth-child(2) {
font-size: 24rpx;
color: #666666;
}
.mainP3 text:nth-child(2) text:nth-child(1) {
.middle-money view:nth-child(2) {
font-size: 36rpx;
color: #f9690e;
margin-left: 20rpx;
font-weight: bold;
}
.mainview {
.middle-image {
margin-top: 50rpx;
display: flex;
align-items: center;
}
.mainview > image:first-child {
.middle-image > image:first-child {
margin: 0 20rpx 0 10rpx;
}
.mainview > view {
.middle-image > view {
flex: 1;
}
.bottom {
......@@ -337,41 +363,25 @@ export default {
display: flex;
align-items: center;
}
.bottomFirst {
.bottom-left {
border-right: 1px solid #cccccc;
padding-left: 40rpx;
width: 40%;
box-sizing: border-box;
}
.bottomFirst text:nth-child(2) {
.bottom-left text:nth-child(2) {
font-size: 40rpx;
color: #f9690e;
margin-left: 10rpx;
font-weight: bold;
}
.bottomFirst text:nth-child(2) text {
font-size: 28rpx;
}
.bottomLast {
padding-left: 20rpx;
.bottom-right {
padding-left:30rpx;
display: flex;
width: 60%;
padding-right: 20rpx;
box-sizing: border-box;
padding-right:30rpx;
align-items: center;
}
.bottomLast text:first-child {
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) {
.bottom-right text:nth-child(2) {
flex: 1;
height: 70rpx;
display: inline-block;
......@@ -382,5 +392,6 @@ export default {
margin-left: 30rpx;
border-radius: 20rpx;
font-size: 32rpx;
font-weight: bold;
}
</style>
uview-ui/components/u-icon/u-icon.vue
View file @ 392c5dbb
......@@ -35,23 +35,23 @@
</template>
<script>
// #ifdef APP-NVUE
// nvue通过weex的dom模块引入字体，相关文档地址如下：
// https://weex.apache.org/zh/docs/modules/dom.html#addrule
const fontUrl = 'https://at.alicdn.com/t/font_2225171_8kdcwk4po24.ttf'
const domModule = weex.requireModule('dom')
domModule.addRule('fontFace', {
'fontFamily': "uicon-iconfont",
'src': `url('${fontUrl}')`
})
// #endif
// 引入图标名称，已经对应的unicode
import icons from './icons'
// #ifdef APP-NVUE
// nvue通过weex的dom模块引入字体，相关文档地址如下：
// https://weex.apache.org/zh/docs/modules/dom.html#addrule
const fontUrl = 'https://at.alicdn.com/t/font_2225171_8kdcwk4po24.ttf'
const domModule = weex.requireModule('dom')
domModule.addRule('fontFace', {
'fontFamily': 'uicon-iconfont',
'src': `url('${fontUrl}')`
})
// #endif
// 引入图标名称，已经对应的unicode
import icons from './icons'
import props from './props.js';;
import props from './props.js'
/**
/**
* icon 图标
* @description 基于字体的图标集，包含了大多数常见场景的图标。
* @tutorial https://www.uviewui.com/components/icon.html
......@@ -77,72 +77,72 @@
* @event {Function} touchstart 事件触摸时触发
* @example <u-icon name="photo" color="#2979ff" size="28"></u-icon>
*/
export default {
name: 'u-icon',
data() {
return {
}
},
mixins: [uni.$u.mpMixin, uni.$u.mixin,props],
computed: {
uClasses() {
let classes = []
classes.push(this.customPrefix + '-' + this.name)
// // uView的自定义图标类名为u-iconfont
// if (this.customPrefix == 'uicon') {
// classes.push('u-iconfont')
// } else {
// classes.push(this.customPrefix)
// }
// 主题色，通过类配置
if (this.color && uni.$u.config.type.includes(this.color)) classes.push('u-icon__icon--' + this.color)
// 阿里，头条，百度小程序通过数组绑定类名时，无法直接使用[a, b, c]的形式，否则无法识别
// 故需将其拆成一个字符串的形式，通过空格隔开各个类名
//#ifdef MP-ALIPAY || MP-TOUTIAO || MP-BAIDU
classes = classes.join(' ')
//#endif
return classes
},
iconStyle() {
let style = {}
style = {
fontSize: uni.$u.addUnit(this.size),
lineHeight: uni.$u.addUnit(this.size),
fontWeight: this.bold ? 'bold' : 'normal',
// 某些特殊情况需要设置一个到顶部的距离，才能更好的垂直居中
top: uni.$u.addUnit(this.top)
}
// 非主题色值时，才当作颜色值
if (this.color && !uni.$u.config.type.includes(this.color)) style.color = this.color
return style
},
// 判断传入的name属性，是否图片路径，只要带有"/"均认为是图片形式
isImg() {
return this.name.indexOf('/') !== -1
},
imgStyle() {
let style = {}
// 如果设置width和height属性，则优先使用，否则使用size属性
style.width = this.width ? uni.$u.addUnit(this.width) : uni.$u.addUnit(this.size)
style.height = this.height ? uni.$u.addUnit(this.height) : uni.$u.addUnit(this.size)
return style
},
// 通过图标名，查找对应的图标
icon() {
// 如果内置的图标中找不到对应的图标，就直接返回name值，因为用户可能传入的是unicode代码
return icons['uicon-' + this.name] || this.name
}
},
methods: {
clickHandler(e) {
this.$emit('click', this.index)
// 是否阻止事件冒泡
this.stop && this.preventEvent(e)
}
}
}
export default {
name: 'u-icon',
data() {
return {
}
},
mixins: [uni.$u.mpMixin, uni.$u.mixin,props],
computed: {
uClasses() {
let classes = []
classes.push(this.customPrefix + '-' + this.name)
// // uView的自定义图标类名为u-iconfont
// if (this.customPrefix == 'uicon') {
// classes.push('u-iconfont')
// } else {
// classes.push(this.customPrefix)
// }
// 主题色，通过类配置
if (this.color && uni.$u.config.type.includes(this.color)) classes.push('u-icon__icon--' + this.color)
// 阿里，头条，百度小程序通过数组绑定类名时，无法直接使用[a, b, c]的形式，否则无法识别
// 故需将其拆成一个字符串的形式，通过空格隔开各个类名
//#ifdef MP-ALIPAY || MP-TOUTIAO || MP-BAIDU
classes = classes.join(' ')
//#endif
return classes
},
iconStyle() {
let style = {}
style = {
fontSize: uni.$u.addUnit(this.size),
lineHeight: uni.$u.addUnit(this.size),
fontWeight: this.bold ? 'bold' : 'normal',
// 某些特殊情况需要设置一个到顶部的距离，才能更好的垂直居中
top: uni.$u.addUnit(this.top)
}
// 非主题色值时，才当作颜色值
if (this.color && !uni.$u.config.type.includes(this.color)) style.color = this.color
return style
},
// 判断传入的name属性，是否图片路径，只要带有"/"均认为是图片形式
isImg() {
return this.name.indexOf('/') !== -1
},
imgStyle() {
let style = {}
// 如果设置width和height属性，则优先使用，否则使用size属性
style.width = this.width ? uni.$u.addUnit(this.width) : uni.$u.addUnit(this.size)
style.height = this.height ? uni.$u.addUnit(this.height) : uni.$u.addUnit(this.size)
return style
},
// 通过图标名，查找对应的图标
icon() {
// 如果内置的图标中找不到对应的图标，就直接返回name值，因为用户可能传入的是unicode代码
return icons['uicon-' + this.name] || this.name
}
},
methods: {
clickHandler(e) {
this.$emit('click', this.index)
// 是否阻止事件冒泡
this.stop && this.preventEvent(e)
}
}
}
</script>
<style lang="scss" scoped>
......@@ -162,7 +162,6 @@
font-family: 'uicon-iconfont';
src: url('https://at.alicdn.com/t/font_2225171_8kdcwk4po24.ttf') format('truetype');
}
/* #endif */
.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