增加微信支付

pages/paymentMethod/paymentMethod.scss

@@ -17,26 +17,26 @@
 }
 .pay-way-new {
 	display: flex;
-	justify-content: space-between;
-	width: calc(100% - 80rpx);
+	justify-content: space-around;
+	width: calc(100% - 60rpx);
 	border-top: solid 1px #979797;
-	margin: 23rpx auto;
-	padding: 36rpx 0;
+	margin: 23rpx auto 0;
+	padding: 36rpx 0 10rpx;
 	.pay-way-item {
-		width: calc(50% - 9rpx);
+		width: calc(33% - 9rpx);
 		border-radius: 20rpx;
 		text-align: center;
 		padding: 30rpx 0;
 		image {
-			width: 159rpx;
-			height: 159rpx;
+			width: 110rpx;
+			height: 110rpx;
 		}
 		.title {
-			font-size: 30rpx;
+			font-size: 28rpx;
 			font-weight: 400;
 			font-family: 'PingFangSC-Regular, PingFang SC';
 			color: #fff;
-			margin: 15rpx 0;
+			margin: 10rpx 0;
 		}
 		.subtitle {
 			font-size: 14rpx;
@@ -49,9 +49,27 @@
 	.pay-way-item-hy {
 		background: linear-gradient(153deg, #FA9460 0%, #FF5065 100%)
 	}
-	.pay-way-item-jh {
+	.pay-way-item-wx {
 		background: linear-gradient(155deg, #5EE3A6 0%, #3EB9C8 100%);
 	}
+	.pay-way-item-jh {
+		background: linear-gradient(155deg, #5AA6FF 0%, #C782FF 100%);
+	}
+}
+.pay-way-subtitle {
+	display: flex;
+	justify-content: space-around;
+	width: calc(100% - 60rpx);
+	margin: 0 auto 60rpx;
+	&-item {
+		width: calc(33% - 9rpx);
+		border-radius: 20rpx;
+		text-align: center;
+		font-size: 20rpx;
+		font-weight: 400;
+		font-family: 'PingFangSC-Regular, PingFang SC';
+		opacity: 0.73;
+	}
 }
 .pay-way-close-btn {
 	width: calc(100% - 80rpx);

pages/paymentMethod/paymentMethod.vue

@@ -4,24 +4,15 @@
 	 -->
 	<view>
 		<u-modal
-		v-model="payWayPop"
-		:title-style="{color: '#404040'}"
-		title="缴费方式"
-		:show-confirm-button="false"
-		:show-cancel-button="false">
+			v-model="payWayPop"
+			:title-style="{color: '#404040'}"
+			title="缴费方式"
+			width="660rpx"
+			:show-confirm-button="false"
+			:show-cancel-button="false">
 			<view class="slot-content">
-				<!-- <view class="pay-way">
-					<view class="pay-way-item" @click="gyBankPay">
-						<image src="../../static/img/gy-bank-pay-icon.png" mode=""></image>
-						<view>贵州银行</view>
-					</view>
-					<view class="pay-way-item" @click="wechatPay">
-						<image src="../../static/img/wechat-pay-icon.png" mode=""></image>
-						<view>微信支付</view>
-					</view>
-				</view> -->
 				<view class="pay-way-new">
-					<view class="pay-way-item pay-way-item-hy" @click="gyBankPay">
+					<!-- <view class="pay-way-item pay-way-item-hy" @click="gyBankPay">
 						<image src="../../static/img/guiyang-bank-icon.png" mode=""></image>
 						<view class="title">贵州银行</view>
 						<view class="subtitle">前三个月每天首次一分钱<br/>长期八折优惠</view>
@@ -29,6 +20,33 @@
 					<view class="pay-way-item pay-way-item-jh" @click="wechatPay">
 						<image src="../../static/img/juhe-icon.png" mode=""></image>
 						<view class="title">微信/支付宝</view>
+					</view> -->
+					<view class="pay-way-item pay-way-item-hy" @click="gyBankPay">
+						<image src="/static/img/gyyh-icon.svg" mode=""></image>
+						<view class="title">贵州银行</view>
+					</view>
+					<!-- #ifdef H5 || MP-WEIXIN -->
+					<view class="pay-way-item pay-way-item-wx" @click="wechatPay" v-if="wxEnv">
+						<image src="/static/img/weixin-icon.svg" mode=""></image>
+						<view class="title">微信支付</view>
+					</view>
+					<!-- #endif -->
+					<view class="pay-way-item pay-way-item-jh" @click="juhePay">
+						<image src="/static/img/juhe-icon.svg" mode=""></image>
+						<view class="title">聚合支付</view>
+					</view>
+				</view>
+				<view class="pay-way-subtitle">
+					<view class="pay-way-subtitle-item">
+						前三个月每天首次一分钱，长期八折优惠
+					</view>
+					<!-- #ifdef H5 || MP-WEIXIN -->
+					<view class="pay-way-subtitle-item" v-if="wxEnv">
+						&nbsp;
+					</view>
+					<!-- #endif -->
+					<view class="pay-way-subtitle-item">
+						&nbsp;
 					</view>
 				</view>
 				<button class="pay-way-close-btn" @click="closePaymentMethod">关闭</button>
@@ -40,9 +58,9 @@
 
 <script>
 	import getUrlParams from "@/utils/getUrlParams.js";
-	// import {
-	// 	getEnvIsWx
-	// } from '@/utils/judgEnvironment.js'
+	import {
+		getEnvIsWx
+	} from '@/utils/judgEnvironment.js'
 	export default {
 		props: {
 			// 弹框显示
@@ -77,7 +95,12 @@
 			}
 		},
 		data() {
-			return {}
+			return {
+				wxEnv: true
+			}
+		},
+		created() {
+			this.wxEnv = getEnvIsWx()
 		},
 		methods: {
 			/**
@@ -118,19 +141,28 @@
 				});
 			},
 			/**
-			 * 微信支付
+			 * 聚合支付
 			 * 判断vuex中是否存在openId
 			 * 存在直接调起微信支付
 			 * 不存在则通过微信登录去获取用户的code
 			 * 完成后通过code去获取用户的openId等信息
 			 * 最后再调起微信支付
 			 * */
-			wechatPay() {
+			juhePay() {
 				uni.showLoading({
 				    title: '加载中'
 				});
 				this.getWXPayByJava(this.curOrderList, this.deviceNo)
 			},
+			/**
+			 * 微信支付
+			 */
+			wechatPay() {
+				this.$refs.uToast.show({
+					title: '暂不支持',
+					type: 'info',
+				});
+			},
 			/**
 			 * 调起微信支付接口
 			 * @param {Array} list 需要支付的订单组合数组

static/img/weixin-icon.svg

@@ -0,0 +1,14 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 110 110" class="design-iconfont">
+  <defs>
+    <filter id="povwgb59f__yjzzw2ry2a">
+      <feColorMatrix in="SourceGraphic" values="0 0 0 0 0.200000 0 0 0 0 0.729412 0 0 0 0 0.768627 0 0 0 1.000000 0"/>
+    </filter>
+  </defs>
+  <g fill="none" fill-rule="evenodd">
+    <path fill="#FFF" opacity=".2" d="M55 0A55 55 0 1 0 55 110A55 55 0 1 0 55 0Z"/>
+    <path fill="#FFF" d="M55 10A45 45 0 1 0 55 100A45 45 0 1 0 55 10Z"/>
+    <g filter="url(#povwgb59f__yjzzw2ry2a)">
+      <path d="M35.1975,13.0072114 C35.7955,13.0072114 36.38375,13.0533947 36.97525,13.1193709 C35.38275,5.59148446 27.456,0 18.40475,0 C8.2875,0 0,6.99677791 0,15.8870733 C0,21.0167242 2.756,25.2293057 7.3645,28.5017261 L5.525,34.1196011 L11.96,30.8471807 C14.261,31.3057154 16.107,31.7807442 18.40475,31.7807442 C18.98325,31.7807442 19.55525,31.7543537 20.12075,31.7114691 C19.76325,30.4612198 19.552,29.1548907 19.552,27.7924818 C19.55525,19.6312236 26.45825,13.0072114 35.1975,13.0072114 Z M25.3045,7.94353663 C26.6955,7.94353663 27.60875,8.87050249 27.60875,10.2757959 C27.60875,11.6744918 26.6955,12.611354 25.3045,12.611354 C23.92975,12.611354 22.54525,11.6744918 22.54525,10.2757959 C22.54525,8.86720368 23.9265,7.94353663 25.3045,7.94353663 Z M12.42475,12.611354 C11.0435,12.611354 9.6525,11.6744918 9.6525,10.2757959 C9.6525,8.87050249 11.0435,7.94353663 12.42475,7.94353663 C13.806,7.94353663 14.7225,8.86720368 14.7225,10.2757959 C14.7225,11.6744918 13.806,12.611354 12.42475,12.611354 Z M52,27.5681626 C52,20.0996548 44.6355,14.0133487 36.36425,14.0133487 C27.6055,14.0133487 20.71225,20.1029536 20.71225,27.5681626 C20.71225,35.0564634 27.60875,41.1229766 36.36425,41.1229766 C38.19725,41.1229766 40.0465,40.6578443 41.886,40.1894131 L46.93325,43 L45.54875,38.3288838 C49.244,35.5116993 52,31.7807442 52,27.5681626 Z M31.28775,25.2293057 C30.3745,25.2293057 29.44825,24.3056387 29.44825,23.3621787 C29.44825,22.4319141 30.3745,21.4950518 31.28775,21.4950518 C32.68525,21.4950518 33.592,22.4319141 33.592,23.3621787 C33.592,24.3056387 32.68525,25.2293057 31.28775,25.2293057 Z M41.4115,25.2293057 C40.50475,25.2293057 39.58175,24.3056387 39.58175,23.3621787 C39.58175,22.4319141 40.5015,21.4950518 41.4115,21.4950518 C42.796,21.4950518 43.71575,22.4319141 43.71575,23.3621787 C43.71575,24.3056387 42.796,25.2293057 41.4115,25.2293057 Z" fill="#000" fill-rule="nonzero" transform="translate(29 34)"/>
+    </g>
+  </g>
+</svg>