|
|
|
@@ -1,7 +1,7 @@ |
|
|
|
<!-- |
|
|
|
* @Date: 2022-03-29 16:57:58 |
|
|
|
* @LastEditors: JinxChen |
|
|
|
* @LastEditTime: 2023-02-27 09:53:05 |
|
|
|
* @LastEditTime: 2023-02-27 14:44:20 |
|
|
|
* @FilePath: \TelpoH5FrontendWeb\src\views\package-list\index.vue |
|
|
|
* @description: TODO 小台风充值h5 |
|
|
|
--> |
|
|
|
@@ -50,30 +50,60 @@ |
|
|
|
<div class="title"> |
|
|
|
<p>{{item.packageName}}<!-- ：{{(item.packagePrice/item.packageIssue).toFixed(0)}}元/月 --></p> |
|
|
|
</div> |
|
|
|
<div class="remark"> |
|
|
|
<p>每月200分钟通话时长，1G流量。</p> |
|
|
|
</div> |
|
|
|
<div class="details"> |
|
|
|
<p> |
|
|
|
低至 |
|
|
|
<span |
|
|
|
class="orange" |
|
|
|
>{{(item.packagePrice/(item.packageIssue === 0 ? 1: item.packageIssue)).toFixed(0)}}</span>元/月 |
|
|
|
<span class="orange large">￥{{(item.packagePrice/(item.packageIssue === 0 ? 1: item.packageIssue)).toFixed(0)}}</span>元/月， |
|
|
|
</p> |
|
|
|
<p class="orange"> |
|
|
|
<span class="orange price">{{item.packagePrice}}元</span> |
|
|
|
<p class="total"> |
|
|
|
<span>合计</span><span class="orange price">{{item.packagePrice}}元</span>。 |
|
|
|
</p> |
|
|
|
</div> |
|
|
|
<div class="package-buy"> |
|
|
|
<div class="buy-btn" @click="onBuy(item)"> |
|
|
|
<p>话费充值</p> |
|
|
|
<p>立即充值话费</p> |
|
|
|
</div> |
|
|
|
|
|
|
|
</div> |
|
|
|
<div class="remark"> |
|
|
|
<p>每月200分钟通话时长，1G流量。</p> |
|
|
|
<div class="radios-con"> |
|
|
|
<div class="pay-type"> |
|
|
|
<p>可切换支付方式：</p> |
|
|
|
</div> |
|
|
|
<van-radio-group v-model="radio" direction="horizontal" @change="onRaidoChange"> |
|
|
|
<van-radio name="1"> |
|
|
|
<template #default> |
|
|
|
<div class="radio-con"> |
|
|
|
<span>微信</span> |
|
|
|
<img src="../../assets/wx-pay.png"/> |
|
|
|
</div> |
|
|
|
</template> |
|
|
|
</van-radio> |
|
|
|
<van-radio name="2"> |
|
|
|
<template #default> |
|
|
|
<div class="radio-con"> |
|
|
|
<span>支付宝</span> |
|
|
|
<img src="../../assets/alipay.png"/> |
|
|
|
</div> |
|
|
|
</template> |
|
|
|
</van-radio> |
|
|
|
<van-radio name="3"> |
|
|
|
<template #default> |
|
|
|
<div class="radio-con"> |
|
|
|
<span>花呗</span> |
|
|
|
<img src="../../assets/antpay.png"/> |
|
|
|
</div> |
|
|
|
</template> |
|
|
|
</van-radio> |
|
|
|
</van-radio-group> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
<!-- 底部支付类型选择 --> |
|
|
|
<div class="pay-radios"> |
|
|
|
<div class="pay-radios" v-show="false"> |
|
|
|
<div class="radios-con"> |
|
|
|
<!-- <van-radio-group v-model="radio" direction="horizontal" @change="onRaidoChange"> |
|
|
|
<van-radio name="1"> |
|
|
|
@@ -527,6 +557,7 @@ export default { |
|
|
|
height: 100vh; |
|
|
|
.topup-container { |
|
|
|
position: relative; |
|
|
|
margin: 20px; |
|
|
|
display: flex; |
|
|
|
justify-content: space-between; |
|
|
|
align-items: center; |
|
|
|
@@ -535,7 +566,6 @@ export default { |
|
|
|
overflow: scroll; |
|
|
|
/* height: calc(100vh - 4rem); */ |
|
|
|
.main { |
|
|
|
padding: 0 10px; |
|
|
|
display: flex; |
|
|
|
justify-content: center; |
|
|
|
align-items: center; |
|
|
|
@@ -575,10 +605,10 @@ export default { |
|
|
|
} |
|
|
|
.package-order-container { |
|
|
|
position: relative; |
|
|
|
height: 140px; |
|
|
|
/* height: 140px; */ |
|
|
|
width: 300px; |
|
|
|
padding: 5px 20px; |
|
|
|
margin: 10px 0; |
|
|
|
padding: 0 10px; |
|
|
|
z-index: 999; |
|
|
|
box-shadow: rgba(14, 30, 37, 0.12) 0 3px 5px 0, |
|
|
|
rgba(14, 30, 37, 0.32) 0 2px 16px 0; |
|
|
|
@@ -616,29 +646,38 @@ export default { |
|
|
|
} |
|
|
|
} |
|
|
|
.order-content { |
|
|
|
padding-top: 25px; |
|
|
|
padding: 15px 0; |
|
|
|
.title { |
|
|
|
display: flex; |
|
|
|
justify-content: flex-start; |
|
|
|
p { |
|
|
|
font-size: 14px; |
|
|
|
font-size: 16px; |
|
|
|
font-weight: bold; |
|
|
|
} |
|
|
|
} |
|
|
|
.details { |
|
|
|
display: flex; |
|
|
|
justify-content: space-between; |
|
|
|
justify-content: flex-start; |
|
|
|
align-items: center; |
|
|
|
p { |
|
|
|
height: 40px; |
|
|
|
@include center(); |
|
|
|
font-size: 14px; |
|
|
|
padding: 5px 0 5px 10px; |
|
|
|
} |
|
|
|
.total { |
|
|
|
font-size: 16px; |
|
|
|
padding: 0; |
|
|
|
} |
|
|
|
.orange { |
|
|
|
color: orange; |
|
|
|
} |
|
|
|
.large { |
|
|
|
font-size: 26px; |
|
|
|
margin: 0 2px; |
|
|
|
} |
|
|
|
.price { |
|
|
|
font-size: 14px; |
|
|
|
font-weight: bold; |
|
|
|
padding-right: 5px; |
|
|
|
font-size: 16px; |
|
|
|
} |
|
|
|
.buy-btn { |
|
|
|
height: 30px; |
|
|
|
@@ -659,9 +698,60 @@ export default { |
|
|
|
justify-content: flex-start; |
|
|
|
p { |
|
|
|
font-size: 14px; |
|
|
|
padding: 5px 10px; |
|
|
|
/* font-weight: bold; */ |
|
|
|
} |
|
|
|
} |
|
|
|
.package-buy { |
|
|
|
padding: 5px 8px; |
|
|
|
.buy-btn { |
|
|
|
height: 40px; |
|
|
|
width: 120px; |
|
|
|
display: flex; |
|
|
|
justify-content: center; |
|
|
|
align-items: center; |
|
|
|
background: orange; |
|
|
|
border-radius: 30px; |
|
|
|
p { |
|
|
|
padding: 0; |
|
|
|
color: white; |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
.radios-con { |
|
|
|
/* padding: 20px 10px; */ |
|
|
|
/* @include center(); */ |
|
|
|
/* align-items: center; */ |
|
|
|
padding: 10px 0 10px 10px; |
|
|
|
font-size: 14px; |
|
|
|
/* box-shadow: rgba(14, 30, 37, 0.12) 0 3px 5px 0, |
|
|
|
rgba(14, 30, 37, 0.32) 0 2px 16px 0; */ |
|
|
|
img { |
|
|
|
height: 20px; |
|
|
|
width: 20px; |
|
|
|
margin: 2px; |
|
|
|
} |
|
|
|
.pay-type { |
|
|
|
text-align: left; |
|
|
|
p { |
|
|
|
font-size: 14px; |
|
|
|
padding: 0 0 10px 0; |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
.radio-con { |
|
|
|
@include center(); |
|
|
|
} |
|
|
|
.van-cell-text { |
|
|
|
display: flex; |
|
|
|
justify-content: flex-start; |
|
|
|
align-items: center; |
|
|
|
span { |
|
|
|
font-size: 14px; |
|
|
|
padding: 0 5px; |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
.content { |
|
|
|
font-size: 14px; |
|
|
|
|
