订单支付优化

pages/my/takeNumber/numberIndex/numberIndex.vue

@@ -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

 <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

@@ -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 {