细节

pages/invite/index.vue

@@ -37,7 +37,7 @@
 						<br />{{info.coupon_name}} -->
 					</view>
 					<view class="l">
-						可返现3-5%
+						可返现3-5‰
 						<!-- 可返现{{info.one_order_rate}}% -->
 					</view>
 					<view class="l">
@@ -455,7 +455,7 @@
 			width: 100%;
 			text-align: center;
 			// background-color: #FF5554;
-			height: 436rpx;
+			height: 350rpx;
 			position: relative;
 
 			.rule {

pages/member/index.vue

@@ -85,13 +85,33 @@
 					</view>
 				</view>
 			</view>
-			<view class="pay-bd" v-if="info.price">
+	<!-- 		<view class="pay-bd" v-if="info.price">
 				<view class="title">选择支付方式</view>
 				<view class="item" v-for="(a,i) in paymentMethods" @click="tabItem1(i)">
 					<image v-if="tabIndex == i" src="https://www.royaum.com.cn/static/invoice/select-on.png"></image>
 					<image v-else src="https://www.royaum.com.cn/static/invoice/select.png"></image>
 					{{a.method == 'wechat'?'微信支付':'余额支付'}}<text v-if="a.method == 'balance'">（余额：{{personal.balance}}）</text>
 				</view>
+			</view> -->
+			<!-- 支付方式 -->
+			<view class="payment-method">
+				<view class="title">选择支付方式</view>
+			  <view v-for="(a,index) in paymentMethods" @click="tabItem1(index)" class="pay-item dis-flex flex-x-between" >
+			    <view class="item-left dis-flex flex-y-center">
+			      <view class="item-left_icon" :class="[a.method]">
+			        <text class="iconfont" :class="[PayMethodIconEnum[a.method]]"></text>
+			      </view>
+			      <view class="item-left_text">
+			        <text>{{ PayMethodEnum[a.method].name }}</text>
+			      </view>
+			      <view v-if="a.method === PayMethodEnum.BALANCE.value" class="user-balance">
+			        <text>(可用￥{{ personal.balance }}元)</text>
+			      </view>
+			    </view>
+			    <view class="item-right col-m" v-if="tabIndex == index">
+			      <text class="iconfont icon-check" style="color: red;"></text>
+			    </view>
+			  </view>
 			</view>
 		</view>
 		
@@ -106,16 +126,33 @@
 <script>
 	import { Wechat } from '@/core/payment'
 	import * as member from '@/api/member/index.js';
+	 import { PayMethodEnum } from '@/common/enum/payment'
+	 // 支付方式对应的图标
+	 const PayMethodIconEnum = {
+	   [PayMethodEnum.WECHAT.value]: 'icon-wechat-pay',
+	   [PayMethodEnum.ALIPAY.value]: 'icon-alipay',
+	   [PayMethodEnum.BALANCE.value]: 'icon-balance-pay'
+	 }
+	 
+	 // 支付方式的终端名称
+	 const PayMethodClientNameEnum = {
+	   [PayMethodEnum.WECHAT.value]: '微信',
+	   [PayMethodEnum.ALIPAY.value]: '支付宝'
+	 }
 	export default {
 		data() {
 			return {
+				// 枚举类
+				PayMethodEnum,
+				PayMethodIconEnum,
+				PayMethodClientNameEnum,
 				background1: {
 					background: "url(https://www.royaum.com.cn/static/caigou/bg@2x.png) center top no-repeat",
 					backgroundSize: '100% auto',
 				},
 				info: {},
 				orcInfo: {},
-				paymentMethods: {},
+				paymentMethods: [],
 				personal: {},
 				isClick: true,
 				tabIndex: 0,
@@ -235,10 +272,6 @@
 	background: url(https://www.royaum.com.cn/static/caigou/bg@2x.png) center top no-repeat;
 	background-size: 100% auto;
 	padding-bottom: 150rpx;
-	.pay-bd{
-		padding: 25rpx;
-		overflow: hidden;
-	}
 	&-bd{
 		width: 100%;
 		text-align: justify;
@@ -385,4 +418,58 @@
 		}
 	}
 }
+
+  // 支付方式
+  .payment-method {
+    width: 100%;
+	margin: 20rpx 0 50rpx 0;
+    padding: 0 40rpx;
+    background-color: #ffffff;
+    border-radius: 20rpx;
+	.title{
+			padding: 30rpx 0;
+			font-size: 30rpx;
+		}
+    .pay-item {
+      padding: 26rpx 0;
+      font-size: 28rpx;
+      border-bottom: 1rpx solid rgb(248, 248, 248);
+
+      &:last-child {
+        border-bottom: none;
+      }
+
+      .item-left_icon {
+        margin-right: 20rpx;
+        font-size: 44rpx;
+
+        &.wechat {
+          color: #00c800;
+        }
+
+        &.alipay {
+          color: #009fe8;
+        }
+
+        &.balance {
+          color: #ff9700;
+        }
+      }
+
+      .item-left_text {
+        font-size: 28rpx;
+      }
+
+      .item-right {
+        font-size: 32rpx;
+      }
+
+      .user-balance {
+        margin-left: 20rpx;
+        font-size: 26rpx;
+      }
+    }
+
+  }
+
 </style>