|  | @@ -25,6 +25,19 @@
 | 
	
		
			
				|  |  |          <p>¥{{ data.price }}</p>
 | 
	
		
			
				|  |  |        </div>
 | 
	
		
			
				|  |  |      </div>
 | 
	
		
			
				|  |  | +    <div class="pay-platform">
 | 
	
		
			
				|  |  | +      <p class="pay-platform-title">选择支付平台</p>
 | 
	
		
			
				|  |  | +      <ul class="pay-platform-list">
 | 
	
		
			
				|  |  | +        <li
 | 
	
		
			
				|  |  | +          :class="item.isSelected ? 'active' : ''"
 | 
	
		
			
				|  |  | +          v-for="(item, index) in platList"
 | 
	
		
			
				|  |  | +          :key="'plat' + index"
 | 
	
		
			
				|  |  | +        >
 | 
	
		
			
				|  |  | +          <img :src="item.img" class="plat-logo" />
 | 
	
		
			
				|  |  | +          <img src="../../assets/pay/active.png" class="active-icon" />
 | 
	
		
			
				|  |  | +        </li>
 | 
	
		
			
				|  |  | +      </ul>
 | 
	
		
			
				|  |  | +    </div>
 | 
	
		
			
				|  |  |      <div class="total">
 | 
	
		
			
				|  |  |        <p class="p1">
 | 
	
		
			
				|  |  |          <span> 一件商品,总金额: </span>
 | 
	
	
		
			
				|  | @@ -66,6 +79,12 @@ export default {
 | 
	
		
			
				|  |  |        discount_money: 0.0, // 优惠金额
 | 
	
		
			
				|  |  |        receivables_money: this.data.price, // 应收款
 | 
	
		
			
				|  |  |        loading: false,
 | 
	
		
			
				|  |  | +      platList: [
 | 
	
		
			
				|  |  | +        {
 | 
	
		
			
				|  |  | +          img: require("../../assets/pay/shouxinyi.png"),
 | 
	
		
			
				|  |  | +          isSelected: true,
 | 
	
		
			
				|  |  | +        },
 | 
	
		
			
				|  |  | +      ],
 | 
	
		
			
				|  |  |      };
 | 
	
		
			
				|  |  |    },
 | 
	
		
			
				|  |  |    //计算属性 类似于data概念
 | 
	
	
		
			
				|  | @@ -292,5 +311,57 @@ export default {
 | 
	
		
			
				|  |  |        cursor: pointer;
 | 
	
		
			
				|  |  |      }
 | 
	
		
			
				|  |  |    }
 | 
	
		
			
				|  |  | +  .pay-platform {
 | 
	
		
			
				|  |  | +    width: 656px;
 | 
	
		
			
				|  |  | +    box-sizing: border-box;
 | 
	
		
			
				|  |  | +    padding: 16px 0 16px;
 | 
	
		
			
				|  |  | +    border-top: 1px rgba(44, 44, 44, 0.15) solid;
 | 
	
		
			
				|  |  | +    border-bottom: 1px rgba(44, 44, 44, 0.15) solid;
 | 
	
		
			
				|  |  | +    &-title {
 | 
	
		
			
				|  |  | +      padding: 0;
 | 
	
		
			
				|  |  | +      margin: 0;
 | 
	
		
			
				|  |  | +      font-style: normal;
 | 
	
		
			
				|  |  | +      font-weight: normal;
 | 
	
		
			
				|  |  | +      font-size: 16px;
 | 
	
		
			
				|  |  | +      line-height: 150%;
 | 
	
		
			
				|  |  | +      color: #000000;
 | 
	
		
			
				|  |  | +      margin-bottom: 16px;
 | 
	
		
			
				|  |  | +    }
 | 
	
		
			
				|  |  | +    &-list {
 | 
	
		
			
				|  |  | +      display: flex;
 | 
	
		
			
				|  |  | +      flex-wrap: wrap;
 | 
	
		
			
				|  |  | +      margin: 0;
 | 
	
		
			
				|  |  | +      padding: 0;
 | 
	
		
			
				|  |  | +      > li {
 | 
	
		
			
				|  |  | +        position: relative;
 | 
	
		
			
				|  |  | +        display: flex;
 | 
	
		
			
				|  |  | +        justify-content: center;
 | 
	
		
			
				|  |  | +        align-items: center;
 | 
	
		
			
				|  |  | +        width: 152px;
 | 
	
		
			
				|  |  | +        height: 60px;
 | 
	
		
			
				|  |  | +        background: #ffffff;
 | 
	
		
			
				|  |  | +        border: 1px solid rgba(44, 44, 44, 0.15);
 | 
	
		
			
				|  |  | +        box-sizing: border-box;
 | 
	
		
			
				|  |  | +        border-radius: 4px;
 | 
	
		
			
				|  |  | +        cursor: pointer;
 | 
	
		
			
				|  |  | +        margin: 0 8px 8px 0;
 | 
	
		
			
				|  |  | +        > .plat-logo {
 | 
	
		
			
				|  |  | +          width: 99px;
 | 
	
		
			
				|  |  | +          height: 26px;
 | 
	
		
			
				|  |  | +        }
 | 
	
		
			
				|  |  | +        > .active-icon {
 | 
	
		
			
				|  |  | +          position: absolute;
 | 
	
		
			
				|  |  | +          bottom: -1px;
 | 
	
		
			
				|  |  | +          right: -1px;
 | 
	
		
			
				|  |  | +          width: 20px;
 | 
	
		
			
				|  |  | +          height: 20px;
 | 
	
		
			
				|  |  | +          display: block;
 | 
	
		
			
				|  |  | +        }
 | 
	
		
			
				|  |  | +        &.active {
 | 
	
		
			
				|  |  | +          border-color: #ff9900;
 | 
	
		
			
				|  |  | +        }
 | 
	
		
			
				|  |  | +      }
 | 
	
		
			
				|  |  | +    }
 | 
	
		
			
				|  |  | +  }
 | 
	
		
			
				|  |  |  }
 | 
	
		
			
				|  |  |  </style>
 |