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