chenJinxu
/
TelpoH5FrontendWeb
Watch 1
Star 0
Fork 0
Code Issues 0 Pull Requests 0 Releases 0 Wiki Activity
Browse Source

update 

- 优化 支付方式选择页面
feat
JinxChen 1 year ago
parent
3cbe5030c1
commit
7d9fcfe04a
3 changed files with 117 additions and 21 deletions
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. +6
    -0
      README.md
  2. +1
    -1
      src/config/models.js
  3. +110
    -20
      src/views/package-list/index.vue

+ 6
- 0
README.md View File

@@ -221,3 +221,9 @@ update
update update
- 增加 激活成功页面在线图标 - 增加 激活成功页面在线图标
- 优化 支付方式选择页面 - 优化 支付方式选择页面


## v1.0.25
`2023.2.27`
update
- 优化 支付方式选择页面

+ 1
- 1
src/config/models.js View File

@@ -5,7 +5,7 @@
* @FilePath: \TelpoH5FrontendWeb\src\config\models.js * @FilePath: \TelpoH5FrontendWeb\src\config\models.js
* @description: * @description:
*/ */
export const VERSION_MODEL = '1.0.24F'; //版本号
export const VERSION_MODEL = '1.0.25F'; //版本号
export const IMAGE_URL = { export const IMAGE_URL = {
production: 'http://zfb.ssjlai.com/web/', production: 'http://zfb.ssjlai.com/web/',
test: 'http://zfb.ssjlai.com/web/', test: 'http://zfb.ssjlai.com/web/',


+ 110
- 20
src/views/package-list/index.vue View File

@@ -1,7 +1,7 @@
<!-- <!--
* @Date: 2022-03-29 16:57:58 * @Date: 2022-03-29 16:57:58
* @LastEditors: JinxChen * @LastEditors: JinxChen
* @LastEditTime: 2023-02-27 09:53:05
* @LastEditTime: 2023-02-27 14:44:20
* @FilePath: \TelpoH5FrontendWeb\src\views\package-list\index.vue * @FilePath: \TelpoH5FrontendWeb\src\views\package-list\index.vue
* @description: TODO 小台风充值h5 * @description: TODO 小台风充值h5
--> -->
@@ -50,30 +50,60 @@
<div class="title"> <div class="title">
<p>{{item.packageName}}<!-- ：{{(item.packagePrice/item.packageIssue).toFixed(0)}}元/月 --></p> <p>{{item.packageName}}<!-- ：{{(item.packagePrice/item.packageIssue).toFixed(0)}}元/月 --></p>
</div> </div>
<div class="remark">
<p>每月200分钟通话时长，1G流量。</p>
</div>
<div class="details"> <div class="details">
<p> <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>
<p class="orange">
<span class="orange price">{{item.packagePrice}}元</span>
<p class="total">
<span>合计</span><span class="orange price">{{item.packagePrice}}元</span>。
</p> </p>
</div>
<div class="package-buy">
<div class="buy-btn" @click="onBuy(item)"> <div class="buy-btn" @click="onBuy(item)">
<p>话费充值</p>
<p>立即充值话费</p>
</div> </div>

</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>
</div> </div>
</div> </div>
<!-- 底部支付类型选择 --> <!-- 底部支付类型选择 -->
<div class="pay-radios">
<div class="pay-radios" v-show="false">
<div class="radios-con"> <div class="radios-con">
<!-- <van-radio-group v-model="radio" direction="horizontal" @change="onRaidoChange"> <!-- <van-radio-group v-model="radio" direction="horizontal" @change="onRaidoChange">
<van-radio name="1"> <van-radio name="1">
@@ -527,6 +557,7 @@ export default {
height: 100vh; height: 100vh;
.topup-container { .topup-container {
position: relative; position: relative;
margin: 20px;
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
@@ -535,7 +566,6 @@ export default {
overflow: scroll; overflow: scroll;
/* height: calc(100vh - 4rem); */ /* height: calc(100vh - 4rem); */
.main { .main {
padding: 0 10px;
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
@@ -575,10 +605,10 @@ export default {
} }
.package-order-container { .package-order-container {
position: relative; position: relative;
height: 140px;
/* height: 140px; */
width: 300px; width: 300px;
padding: 5px 20px;
margin: 10px 0; margin: 10px 0;
padding: 0 10px;
z-index: 999; z-index: 999;
box-shadow: rgba(14, 30, 37, 0.12) 0 3px 5px 0, box-shadow: rgba(14, 30, 37, 0.12) 0 3px 5px 0,
rgba(14, 30, 37, 0.32) 0 2px 16px 0; rgba(14, 30, 37, 0.32) 0 2px 16px 0;
@@ -616,29 +646,38 @@ export default {
} }
} }
.order-content { .order-content {
padding-top: 25px;
padding: 15px 0;
.title { .title {
display: flex; display: flex;
justify-content: flex-start; justify-content: flex-start;
p { p {
font-size: 14px;
font-size: 16px;
font-weight: bold; font-weight: bold;
} }
} }
.details { .details {
display: flex; display: flex;
justify-content: space-between;
justify-content: flex-start;
align-items: center; align-items: center;
p { p {
height: 40px;
@include center();
font-size: 14px; font-size: 14px;
padding: 5px 0 5px 10px;
}
.total {
font-size: 16px;
padding: 0;
} }
.orange { .orange {
color: orange; color: orange;
} }
.large {
font-size: 26px;
margin: 0 2px;
}
.price { .price {
font-size: 14px;
font-weight: bold;
padding-right: 5px;
font-size: 16px;
} }
.buy-btn { .buy-btn {
height: 30px; height: 30px;
@@ -659,9 +698,60 @@ export default {
justify-content: flex-start; justify-content: flex-start;
p { p {
font-size: 14px; font-size: 14px;
padding: 5px 10px;
/* font-weight: bold; */ /* 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 { .content {
font-size: 14px; font-size: 14px;


Write Preview
Loading…
Cancel
Save