@ -0,0 +1,145 @@ |
||||
<template> |
||||
<view> |
||||
<view class="width100 height100p backcorf06"> |
||||
<view class="block"> |
||||
<view class="content height60"> |
||||
<input type="number" class="my flleft font18 fcorfff" placeholder="请输入充值号码" v-model="inputPhone" /> |
||||
</view> |
||||
<view class="line1 width100 backcorfff"></view> |
||||
</view> |
||||
</view> |
||||
<view class="width90 font16 fcor333 fontwig6 mart40"> |
||||
选择金额 |
||||
</view> |
||||
<view class="list"> |
||||
<view class="box" :class="{'on':100 == inputAmount}" @click="select(100)"> |
||||
<view class="heTitle">100元</view> |
||||
</view> |
||||
|
||||
<view class="box" :class="{'on':200 == inputAmount}" @click="select(200)"> |
||||
<view class="heTitle">200元</view> |
||||
</view> |
||||
|
||||
<view class="box" :class="{'on':300 == inputAmount}" @click="select(300)"> |
||||
<view class="heTitle">300元</view> |
||||
</view> |
||||
</view> |
||||
<view class="bombtn width94 font16"> |
||||
<view class="width50 flleft payem">应付: {{inputAmount}}元</view> |
||||
<view class="width50 flright paybtn">立即购买</view> |
||||
</view> |
||||
</view> |
||||
</template> |
||||
|
||||
<script> |
||||
export default { |
||||
data() { |
||||
return { |
||||
typeId: '', |
||||
inputAmount: '', |
||||
inputPhone:'' |
||||
} |
||||
}, |
||||
onLoad(options) { |
||||
this.typeId = options.id; |
||||
if (this.typeId == 1) { |
||||
uni.setNavigationBarTitle({ |
||||
title: '中国移动' |
||||
}) |
||||
return; |
||||
} |
||||
if (this.typeId == 2) { |
||||
uni.setNavigationBarTitle({ |
||||
title: '中国联通' |
||||
}) |
||||
return; |
||||
} |
||||
if (this.typeId == 3) { |
||||
uni.setNavigationBarTitle({ |
||||
title: '中国电信' |
||||
}) |
||||
return; |
||||
} |
||||
}, |
||||
methods: { |
||||
select(amoutinfos) { |
||||
this.inputAmount = amoutinfos; |
||||
}, |
||||
} |
||||
} |
||||
</script> |
||||
|
||||
<style lang="scss"> |
||||
.block { |
||||
width: 94%; |
||||
padding: 60upx 3%; |
||||
|
||||
.my { |
||||
width: 80%; |
||||
height: 120upx; |
||||
display: flex; |
||||
align-items: center; |
||||
} |
||||
|
||||
.uni-input-placeholder { |
||||
color: #FFFFFF; |
||||
} |
||||
} |
||||
|
||||
.list { |
||||
width: 94%; |
||||
margin-left: 3%; |
||||
display: flow-root; |
||||
justify-content: space-between; |
||||
padding: 20upx 0; |
||||
|
||||
.box { |
||||
width: 30%; |
||||
margin-left: 1%; |
||||
margin-right: 2%; |
||||
margin-top: 20upx; |
||||
float: left; |
||||
height: 120upx; |
||||
line-height: 120upx; |
||||
justify-content: center; |
||||
align-items: center; |
||||
text-align: center; |
||||
box-shadow: 0upx 0upx 4upx #666666; |
||||
font-size: 36upx; |
||||
color: #089bf5; |
||||
|
||||
&.on { |
||||
background-color: #089bf5; |
||||
color: #ffffff; |
||||
} |
||||
} |
||||
|
||||
.heTitle { |
||||
width: 100%; |
||||
font-size: 15px; |
||||
} |
||||
} |
||||
.bombtn{ |
||||
position: fixed; |
||||
height: 45px; |
||||
bottom: 20px; |
||||
border-radius: 6px; |
||||
.payem{ |
||||
height: 45px; |
||||
line-height: 45px; |
||||
text-align: center; |
||||
background-color: #007AFF; |
||||
color: #FFFFFF; |
||||
border-radius: 6px 0 0 6px; |
||||
} |
||||
|
||||
.paybtn{ |
||||
height: 45px; |
||||
line-height: 45px; |
||||
text-align: center; |
||||
background-color: #F8A628; |
||||
border-radius: 0 6px 6px 0; |
||||
color: #FFFFFF; |
||||
} |
||||
} |
||||
</style> |
||||
@ -0,0 +1,30 @@ |
||||
<template> |
||||
<view> |
||||
<image class="width100" mode="widthFix" src="../../../static/img/unionimg/upay3.jpg"></image> |
||||
<image class="width94 mart20" mode="widthFix" src="../../../static/img/unionimg/upay4.jpg" @click="jumprecent(1)"></image> |
||||
<image class="width94 mart10" mode="widthFix" src="../../../static/img/unionimg/upay2.jpg" @click="jumprecent(2)"></image> |
||||
<image class="width94 mart10" mode="widthFix" src="../../../static/img/unionimg/upay1.jpg" @click="jumprecent(3)"></image> |
||||
</view> |
||||
</template> |
||||
|
||||
<script> |
||||
export default { |
||||
data() { |
||||
return { |
||||
|
||||
} |
||||
}, |
||||
methods: { |
||||
//跳转充值 |
||||
jumprecent(item){ |
||||
uni.navigateTo({ |
||||
url: '../recharge-centre/recharge-centre?id='+ item |
||||
}) |
||||
} |
||||
} |
||||
} |
||||
</script> |
||||
|
||||
<style> |
||||
|
||||
</style> |
||||
@ -0,0 +1,55 @@ |
||||
<template> |
||||
<view> |
||||
<image class="width90 mart10" mode="widthFix" src="../../../static/img/unionimg/hsg4.jpg" |
||||
@click="jumprecharge(1)"></image> |
||||
<image class="width90 mart5" mode="widthFix" src="../../../static/img/unionimg/hsg2.jpg" |
||||
@click="jumprecharge(2)"></image> |
||||
<image class="width90 mart5" mode="widthFix" src="../../../static/img/unionimg/hsg1.jpg" |
||||
@click="jumprecharge(3)"></image> |
||||
<image class="width90 mart5" mode="widthFix" src="../../../static/img/unionimg/hsg3.jpg" |
||||
@click="jumprecharge(4)"></image> |
||||
</view> |
||||
</template> |
||||
|
||||
<script> |
||||
export default { |
||||
data() { |
||||
return { |
||||
|
||||
} |
||||
}, |
||||
methods: { |
||||
//跳转充值 |
||||
jumprecharge(item) { |
||||
if (item == 1) { |
||||
uni.navigateTo({ |
||||
url: '../../goods/goods-list/goods-list?id=1' |
||||
}) |
||||
return; |
||||
} |
||||
if (item == 2) { |
||||
uni.navigateTo({ |
||||
url: '../../goods/refuel/refuel' |
||||
}) |
||||
return; |
||||
} |
||||
if (item == 3) { |
||||
uni.navigateTo({ |
||||
url: '../recharge/recharge' |
||||
}) |
||||
return; |
||||
} |
||||
if (item == 4) { |
||||
uni.navigateTo({ |
||||
url: '../../tabBar/user/user' |
||||
}) |
||||
return; |
||||
} |
||||
} |
||||
} |
||||
} |
||||
</script> |
||||
|
||||
<style> |
||||
|
||||
</style> |
||||
@ -0,0 +1,28 @@ |
||||
<template> |
||||
<view> |
||||
<image class="width90" mode="widthFix" src="../../static/img/unionimg/union1.jpg" @click="jumpunionpay"></image> |
||||
<image class="width90" mode="widthFix" src="../../static/img/unionimg/union2.jpg"></image> |
||||
</view> |
||||
</template> |
||||
|
||||
<script> |
||||
export default { |
||||
data() { |
||||
return { |
||||
|
||||
} |
||||
}, |
||||
methods: { |
||||
//跳转银联支付 |
||||
jumpunionpay(){ |
||||
uni.navigateTo({ |
||||
url:'unionPay-entrance/unionPay-entrance' |
||||
}) |
||||
} |
||||
} |
||||
} |
||||
</script> |
||||
|
||||
<style> |
||||
|
||||
</style> |
||||
|
After Width: | Height: | Size: 122 KiB |
|
After Width: | Height: | Size: 115 KiB |
|
After Width: | Height: | Size: 105 KiB |
|
After Width: | Height: | Size: 152 KiB |
|
After Width: | Height: | Size: 268 KiB |
|
After Width: | Height: | Size: 217 KiB |
|
After Width: | Height: | Size: 113 KiB |
|
After Width: | Height: | Size: 124 KiB |
|
After Width: | Height: | Size: 288 KiB |
|
After Width: | Height: | Size: 140 KiB |