邓平艺
4 years ago
5 changed files with 210 additions and 20 deletions
-
55components/lf-nocontent/lf-nocontent.vue
-
14pages.json
-
14pages/business/center/center.vue
-
121pages/business/payment/money.vue
-
26pages/business/payment/wait.vue
@ -1,31 +1,50 @@ |
|||
<template> |
|||
<view class="padding-xl margin-top-xl"> |
|||
<view class="flex justify-center"> |
|||
<image src="@/static/images/empty.png" mode="widthFix" class="no-content-img"></image> |
|||
<view class="empty-box" style="margin: 100rpx 0;text-align: center;"> |
|||
<view class="empty-image"> |
|||
<image :src="src" mode="aspectFill" style="margin: 0 auto;width: 360rpx;height: 252rpx;"></image> |
|||
</view> |
|||
<text class="block text-center margin-top">暂无数据</text> |
|||
<view class="content m-text-center m-m-t-20"> |
|||
<view class="m-font-32" style="color: #333333;">{{ text }}</view> |
|||
</view> |
|||
<button class="m-m-t-32 empty-button" v-if="showButton" @click="$emit('clickButton')">{{ buttonTitle }}</button> |
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
export default { |
|||
data(){ |
|||
return { |
|||
|
|||
name:"d-empty", |
|||
props: { |
|||
text: { |
|||
type: String, // 空消息提示语 |
|||
default: '暂无数据' |
|||
}, |
|||
src: { |
|||
type: String, // 空消息提示的图片 |
|||
default: '' |
|||
}, |
|||
showButton: { |
|||
type: Boolean, // 是否显示按钮 |
|||
default: false |
|||
}, |
|||
buttonTitle: { |
|||
type: String, // 按钮上的文字，当showButton == true时显示 |
|||
default: '去逛逛' |
|||
} |
|||
}, |
|||
onLoad(){ |
|||
|
|||
}, |
|||
methods: { |
|||
|
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style lang="scss" scoped> |
|||
.no-content-img{ |
|||
width: 440rpx; |
|||
height: 380rpx; |
|||
} |
|||
<style lang="scss"> |
|||
.empty-button{ |
|||
min-width: 170rpx; |
|||
max-width: max-content; |
|||
height: 68rpx; |
|||
background-color: #FEFEFE; |
|||
font-size: 30rpx; |
|||
color: #666666; |
|||
line-height: 66rpx; |
|||
text-align: center; |
|||
border-radius: 6rpx; |
|||
border: 2rpx solid #E4E4E4; |
|||
} |
|||
</style> |
|||
@ -0,0 +1,121 @@ |
|||
<template> |
|||
<view> |
|||
<lf-nav title="输入金额" :showIcon="true" bgColor="#fff"></lf-nav> |
|||
<view class="centent"> |
|||
<view class="card"> |
|||
<view class="lf-font-28 lf-color-222">输入金额</view> |
|||
<view class="list money-list"> |
|||
<view class="lf-flex"> |
|||
<view class="symbol">￥</view> |
|||
<input class="input" type="number" v-model="money" /> |
|||
</view> |
|||
<view class="clear" v-if="money.length" @click="money = ''"> |
|||
<text class="lf-iconfont icon-cuo1"></text> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
<button class="confirm" hover-class="lf-opacity" @click="confirm">确认</button> |
|||
</view> |
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
export default { |
|||
data(){ |
|||
return { |
|||
money: '' |
|||
} |
|||
}, |
|||
onLoad(){ |
|||
|
|||
}, |
|||
methods: { |
|||
confirm(){ |
|||
this.$url('/pages/business/payment/wait', {type: 'redirect'}) |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style> |
|||
page{ |
|||
background-color: #F8F8F8; |
|||
} |
|||
</style> |
|||
<style lang="scss" scoped="scoped"> |
|||
.centent{ |
|||
padding: 30rpx 32rpx; |
|||
.card{ |
|||
padding: 30rpx; |
|||
box-sizing: border-box; |
|||
width: 686rpx; |
|||
height: max-content; |
|||
background: #FFFFFF; |
|||
border-radius: 20rpx; |
|||
.list{ |
|||
height: 90rpx; |
|||
width: 100%; |
|||
border-bottom: 1rpx solid #e5e5e5; |
|||
display: flex; |
|||
justify-content: space-between; |
|||
align-items: center; |
|||
margin-top: 10rpx; |
|||
.input{ |
|||
width: 540rpx; |
|||
height: 80rpx; |
|||
font-size: 28rpx; |
|||
} |
|||
.input-code{ |
|||
width: 430rpx; |
|||
} |
|||
.clear{ |
|||
padding: 20rpx; |
|||
} |
|||
.code{ |
|||
min-width: 180rpx; |
|||
max-width: 220rpx; |
|||
height: 64rpx; |
|||
padding: 0 4rpx; |
|||
font-size: 24rpx; |
|||
color: #15716E; |
|||
display: flex; |
|||
justify-content: center; |
|||
align-items: center; |
|||
border-radius: 32rpx; |
|||
border: 2rpx solid #15716E; |
|||
} |
|||
.active-bg{ |
|||
background: #efefef; |
|||
} |
|||
.symbol{ |
|||
width: 30rpx; |
|||
height: 90rpx; |
|||
font-size: 36rpx; |
|||
color: #222222; |
|||
display: flex; |
|||
align-items: flex-end; |
|||
} |
|||
} |
|||
.money-list{ |
|||
height: 140rpx; |
|||
.input{ |
|||
width: 500rpx; |
|||
height: 130rpx; |
|||
font-size: 72rpx; |
|||
font-weight: bold; |
|||
margin-left: 20rpx; |
|||
} |
|||
} |
|||
} |
|||
.confirm{ |
|||
width: 550rpx; |
|||
height: 100rpx; |
|||
background: #0D2E9A; |
|||
border-radius: 50rpx; |
|||
color: #FFFFFF; |
|||
line-height: 100rpx; |
|||
margin-top: 60rpx; |
|||
font-size: 32rpx; |
|||
} |
|||
} |
|||
</style> |
|||
@ -0,0 +1,26 @@ |
|||
<template> |
|||
<view> |
|||
<lf-nav title="等待用户支付" :showIcon="true" bgColor="#fff"></lf-nav> |
|||
<lf-nocontent></lf-nocontent> |
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
export default { |
|||
data(){ |
|||
return { |
|||
|
|||
} |
|||
}, |
|||
onLoad(){ |
|||
|
|||
}, |
|||
methods: { |
|||
|
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style lang="scss" scoped="scoped"> |
|||
|
|||
</style> |
|||
Write
Preview
Loading…
Cancel
Save
Reference in new issue