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