9 changed files with 538 additions and 0 deletions
-
17src/pages.json
-
22src/subpackage/wallet/components/wallet_mask.vue
-
49src/subpackage/wallet/components/wallet_modal.vue
-
45src/subpackage/wallet/components/wallet_modal_success.vue
-
31src/subpackage/wallet/components/wm_button.vue
-
28src/subpackage/wallet/pages/baofu_withdraw/index.vue
-
159src/subpackage/wallet/pages/baofu_withdraw/modules/baofu_item.vue
-
53src/subpackage/wallet/pages/index/index.vue
-
134src/subpackage/wallet/pages/index/modules/wallet_info.vue
@ -0,0 +1,22 @@ |
|||||
|
<template> |
||||
|
<view class="wallet-mask"> |
||||
|
|
||||
|
</view> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
export default { |
||||
|
|
||||
|
} |
||||
|
</script> |
||||
|
|
||||
|
<style lang="scss"> |
||||
|
.wallet-mask{ |
||||
|
position: fixed; |
||||
|
left: 0; |
||||
|
top: 0; |
||||
|
bottom: 0; |
||||
|
right: 0; |
||||
|
background: rgba($color: #000000, $alpha: .5); |
||||
|
} |
||||
|
</style> |
||||
@ -0,0 +1,49 @@ |
|||||
|
<template> |
||||
|
<view class="wallet-mask"> |
||||
|
<view class="wm-content"> |
||||
|
<image class="wc-close"></image> |
||||
|
<view class="wc-title">提现成功</view> |
||||
|
<slot></slot> |
||||
|
</view> |
||||
|
</view> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
export default { |
||||
|
|
||||
|
} |
||||
|
</script> |
||||
|
|
||||
|
<style lang="scss"> |
||||
|
.wallet-mask{ |
||||
|
position: fixed; |
||||
|
left: 0; |
||||
|
top: 0; |
||||
|
bottom: 0; |
||||
|
right: 0; |
||||
|
background: rgba($color: #000000, $alpha: .5); |
||||
|
.wm-content{ |
||||
|
position: absolute; |
||||
|
left: 50%; |
||||
|
top: 50%; |
||||
|
transform: translate(-50%, -50%); |
||||
|
padding-top: 80upx; |
||||
|
padding-bottom: 80upx; |
||||
|
width: 620upx; |
||||
|
border-radius: 10upx; |
||||
|
background: #fff; |
||||
|
.wc-close{ |
||||
|
position: absolute; |
||||
|
right: 30upx; |
||||
|
top: 30upx; |
||||
|
width: 34upx; |
||||
|
height: 34upx; |
||||
|
background: #000; |
||||
|
} |
||||
|
.wc-title{ |
||||
|
text-align: center; |
||||
|
@include flcw(32upx, 44upx, #333333, 500); |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
</style> |
||||
@ -0,0 +1,45 @@ |
|||||
|
<template> |
||||
|
<wallet-modal> |
||||
|
<view class="wallet-modal-success"> |
||||
|
<image class="wms-icon"></image> |
||||
|
<view class="wms-des">充值成功！</view> |
||||
|
<view class="wallet-modal-button"> |
||||
|
<wallet-modal-button>提现记录</wallet-modal-button> |
||||
|
</view> |
||||
|
</view> |
||||
|
</wallet-modal> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
import walletModal from './wallet_modal.vue'; |
||||
|
import wmButton from './wm_button.vue'; |
||||
|
export default { |
||||
|
components: { |
||||
|
'wallet-modal': walletModal, |
||||
|
'wallet-modal-button': wmButton |
||||
|
} |
||||
|
} |
||||
|
</script> |
||||
|
|
||||
|
<style lang="scss"> |
||||
|
.wallet-modal-success{ |
||||
|
padding-top: 50upx; |
||||
|
.wms-icon{ |
||||
|
margin: 0 auto; |
||||
|
display: block; |
||||
|
width: 100upx; |
||||
|
height: 100upx; |
||||
|
background: skyblue; |
||||
|
} |
||||
|
.wms-des{ |
||||
|
padding: 0 60upx; |
||||
|
margin-top: 28upx; |
||||
|
text-align: center; |
||||
|
@include flcw($color: #1A1A1A); |
||||
|
} |
||||
|
.wallet-modal-button{ |
||||
|
margin-top: 86upx; |
||||
|
@include ctf(center); |
||||
|
} |
||||
|
} |
||||
|
</style> |
||||
@ -0,0 +1,31 @@ |
|||||
|
<template> |
||||
|
<view class="wallet-modal-button" :class="{ 'green': green }"> |
||||
|
<slot>充值记录</slot> |
||||
|
</view> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
export default { |
||||
|
props: { |
||||
|
green: { |
||||
|
type: Boolean, |
||||
|
default: false |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
</script> |
||||
|
|
||||
|
<style lang="scss"> |
||||
|
.wallet-modal-button{ |
||||
|
width: 240upx; |
||||
|
height: 88upx; |
||||
|
border: 2upx solid $mColor; |
||||
|
border-radius: 10upx; |
||||
|
text-align: center; |
||||
|
@include flcw($color: $mColor, $height: 84upx); |
||||
|
&.green{ |
||||
|
background: $mColor; |
||||
|
color: #fff; |
||||
|
} |
||||
|
} |
||||
|
</style> |
||||
@ -0,0 +1,28 @@ |
|||||
|
<template> |
||||
|
<view class="baofu-index"> |
||||
|
<view class="bi-item"> |
||||
|
<baofu-item></baofu-item> |
||||
|
</view> |
||||
|
<view class="bi-item"> |
||||
|
<baofu-item personal></baofu-item> |
||||
|
</view> |
||||
|
</view> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
import baofuItem from './modules/baofu_item.vue'; |
||||
|
export default { |
||||
|
components: { |
||||
|
'baofu-item': baofuItem |
||||
|
} |
||||
|
} |
||||
|
</script> |
||||
|
|
||||
|
<style lang="scss"> |
||||
|
.baofu-index{ |
||||
|
padding: 32upx; |
||||
|
.bi-item{ |
||||
|
margin-top: 32upx; |
||||
|
} |
||||
|
} |
||||
|
</style> |
||||
@ -0,0 +1,159 @@ |
|||||
|
<template> |
||||
|
<view class="baofu-item"> |
||||
|
<view class="bi-bar" :class="{ 'bb-personal': personal }"> |
||||
|
<view class="bb-name-bar"> |
||||
|
<view class="bnb-left"> |
||||
|
<view class="bl-txt">广州欧轩网络有限公司</view> |
||||
|
<view class="bl-tag" >企业</view> |
||||
|
</view> |
||||
|
<view class="bnb-right"> |
||||
|
<view class="br-txt">提现记录</view> |
||||
|
<image class="wb-icon"></image> |
||||
|
</view> |
||||
|
</view> |
||||
|
<view class="bb-account-num">账户号：CM660000000095108678</view> |
||||
|
</view> |
||||
|
<view class="bi-info"> |
||||
|
<view class="bi-balance"> |
||||
|
<view class="bb-money"> |
||||
|
19990.00 |
||||
|
</view> |
||||
|
<view class="bb-btn">充值</view> |
||||
|
</view> |
||||
|
<view class="bi-tip"> |
||||
|
<view class="bt-txt">可提现资金(元)</view> |
||||
|
<image class="bt-icon"></image> |
||||
|
</view> |
||||
|
<view class="bi-mony-info"> |
||||
|
<view class="bmi-item"> |
||||
|
<view class="bi-num">23525.89</view> |
||||
|
<view class="bi-tip"> |
||||
|
<view class="bt-txt">总资产(元)</view> |
||||
|
<image class="bt-icon"></image> |
||||
|
</view> |
||||
|
</view> |
||||
|
<view class="bmi-item"> |
||||
|
<view class="bi-num">23525.89</view> |
||||
|
<view class="bi-tip"> |
||||
|
<view class="bt-txt">在途资金(元)</view> |
||||
|
<image class="bt-icon"></image> |
||||
|
</view> |
||||
|
</view> |
||||
|
</view> |
||||
|
</view> |
||||
|
|
||||
|
</view> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
export default { |
||||
|
props: { |
||||
|
personal: { |
||||
|
type: Boolean, |
||||
|
default: false |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
</script> |
||||
|
|
||||
|
<style lang="scss"> |
||||
|
.baofu-item{ |
||||
|
border-radius: 30upx; |
||||
|
overflow: hidden; |
||||
|
background: #fff; |
||||
|
.bi-tip{ |
||||
|
@include ctf; |
||||
|
.bt-txt{ |
||||
|
@include flcw(24upx, 34upx, #9C9C9F); |
||||
|
} |
||||
|
.bt-icon{ |
||||
|
margin-left: 6upx; |
||||
|
width: 28upx; |
||||
|
height: 28upx; |
||||
|
background: skyblue; |
||||
|
} |
||||
|
} |
||||
|
.bi-bar{ |
||||
|
padding: 26upx 32upx 18upx; |
||||
|
padding-left: 32upx; |
||||
|
padding-right: 32upx; |
||||
|
background: $mColor; |
||||
|
&.bb-personal{ |
||||
|
background: #585F69; |
||||
|
.bl-tag{ |
||||
|
background: #68C43B !important; |
||||
|
} |
||||
|
} |
||||
|
.bb-account-num{ |
||||
|
@include flcw(24upx, 44upx, #FFFFFF); |
||||
|
} |
||||
|
.bb-name-bar{ |
||||
|
@include ctf(space-between); |
||||
|
.bnb-left{ |
||||
|
flex-grow: 1; |
||||
|
@include ctf; |
||||
|
.bl-txt{ |
||||
|
@include flcw(28upx, 44upx, #fff, 500); |
||||
|
@include tHide; |
||||
|
} |
||||
|
.bl-tag{ |
||||
|
margin-left: 6upx; |
||||
|
padding: 0upx 6upx; |
||||
|
border-radius: 6upx; |
||||
|
background: #32C5FF; |
||||
|
@include flcw(20upx, 28upx, #fff); |
||||
|
|
||||
|
} |
||||
|
} |
||||
|
.bnb-right{ |
||||
|
flex-shrink: 0; |
||||
|
margin-left: 10upx; |
||||
|
@include ctf(flex-end); |
||||
|
.br-txt{ |
||||
|
@include flcw(20upx, 28upx, rgba($color: #fff, $alpha: .57)); |
||||
|
} |
||||
|
.wb-icon{ |
||||
|
flex-shrink: 0; |
||||
|
width: 20upx; |
||||
|
height: 20upx; |
||||
|
background: skyblue; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
.bi-info{ |
||||
|
padding: 40upx 32upx; |
||||
|
.bi-balance{ |
||||
|
@include ctf(space-between); |
||||
|
.bb-money{ |
||||
|
@include flcw(84upx, 96upx, #000000, 700); |
||||
|
@include tHide; |
||||
|
} |
||||
|
.bb-btn{ |
||||
|
flex-shrink: 0; |
||||
|
margin-left: 10upx; |
||||
|
width: 160upx; |
||||
|
text-align: center; |
||||
|
border-radius: 10upx; |
||||
|
background: #FF873D; |
||||
|
@include flcw(28upx, 72upx, #FFFFFF, 500); |
||||
|
} |
||||
|
} |
||||
|
.bi-mony-info{ |
||||
|
margin-top: 58upx; |
||||
|
@include ctf; |
||||
|
.bmi-item{ |
||||
|
flex-shrink: 0; |
||||
|
flex-grow: 0; |
||||
|
width: 50%; |
||||
|
.bi-num{ |
||||
|
@include flcw(44upx, 52upx, #000000, 700); |
||||
|
@include tHide; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
} |
||||
|
|
||||
|
} |
||||
|
</style> |
||||
@ -0,0 +1,53 @@ |
|||||
|
<template> |
||||
|
<view class="wallet-index"> |
||||
|
<wallet-info></wallet-info> |
||||
|
<view class="wi-tips"> |
||||
|
<view class="wt-tit">温馨提示：</view> |
||||
|
<view class="wt-content"> |
||||
|
<text class="wc-txt"> |
||||
|
如需要分账账户可以自己单独提现，请访问 https://sps.ouxuanzhineng.cn |
||||
|
<text class="wt-copy">复制</text> |
||||
|
\r\n账户为宝付的商户号，密码为申请时预留的手机号码 |
||||
|
</text> |
||||
|
</view> |
||||
|
</view> |
||||
|
<wallet-modal></wallet-modal> |
||||
|
</view> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
import walletInfo from './modules/wallet_info.vue' |
||||
|
import walletMask from '../../components/wallet_mask.vue' |
||||
|
import walletModalSuccess from '../../components/wallet_modal_success.vue' |
||||
|
export default { |
||||
|
components: { |
||||
|
'wallet-info': walletInfo, |
||||
|
'wallet-mask': walletMask, |
||||
|
'wallet-modal': walletModalSuccess, |
||||
|
|
||||
|
} |
||||
|
} |
||||
|
</script> |
||||
|
|
||||
|
<style lang="scss"> |
||||
|
.wallet-index{ |
||||
|
padding: 32upx; |
||||
|
.wi-tips{ |
||||
|
margin-top: 24upx; |
||||
|
padding: 40upx; |
||||
|
border-radius: 30upx; |
||||
|
background: #fff; |
||||
|
.wt-tit{ |
||||
|
@include flcw($color: #9A9A9D); |
||||
|
} |
||||
|
.wt-content{ |
||||
|
margin-top: 20upx; |
||||
|
@include flcw($color: #1A1A1A, $height: 49upx); |
||||
|
.wt-copy{ |
||||
|
padding: 0 12upx; |
||||
|
@include flcw($color: $mColor); |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
</style> |
||||
@ -0,0 +1,134 @@ |
|||||
|
<template> |
||||
|
<view class="wallet-info"> |
||||
|
<view class="wi-bar"> |
||||
|
<view class="wb-txt">钱包查账可登录后台查阅</view> |
||||
|
<image class="wb-icon"></image> |
||||
|
</view> |
||||
|
<view class="wi-account"> |
||||
|
<veiw class="wa-top"> |
||||
|
<view class="wt-name">欧轩内部钱包账户</view> |
||||
|
<view class="wt-record"> |
||||
|
<text>充值记录</text> |
||||
|
<image class="wr-icon"></image> |
||||
|
</view> |
||||
|
</veiw> |
||||
|
<view class="wa-tip">(用于购买服务使用)</view> |
||||
|
<view class="wa-balance"> |
||||
|
<view class="wb-money"> |
||||
|
<text class="wm-unit">¥</text> |
||||
|
19990.00 |
||||
|
</view> |
||||
|
<view class="wb-btn">充值</view> |
||||
|
</view> |
||||
|
</view> |
||||
|
<view class="wi-btns"> |
||||
|
<view class="wb-item"> |
||||
|
<text class="wi-txt">宝付提现</text> |
||||
|
</view> |
||||
|
<view class="wb-item"> |
||||
|
<image class="wi-icon"></image> |
||||
|
<text class="wi-txt">抖音提现</text> |
||||
|
</view> |
||||
|
</view> |
||||
|
</view> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
export default { |
||||
|
|
||||
|
} |
||||
|
</script> |
||||
|
|
||||
|
<style lang="scss"> |
||||
|
.wallet-info{ |
||||
|
border-radius: 30upx; |
||||
|
overflow: hidden; |
||||
|
background: #fff; |
||||
|
.wi-bar{ |
||||
|
padding-left: 40upx; |
||||
|
padding-right: 40upx; |
||||
|
height: 76upx; |
||||
|
background: #585F69; |
||||
|
@include ctf(space-between); |
||||
|
.wb-txt{ |
||||
|
@include flcw(24upx, 34upx, #FFFFFF); |
||||
|
} |
||||
|
.wb-icon{ |
||||
|
width: 20upx; |
||||
|
height: 20upx; |
||||
|
background: skyblue; |
||||
|
} |
||||
|
} |
||||
|
.wi-account{ |
||||
|
padding: 36upx 40upx 50upx; |
||||
|
.wa-top{ |
||||
|
@include ctf(space-between); |
||||
|
.wt-name{ |
||||
|
@include flcw(32upx, 44upx, #1A1A1A, 500); |
||||
|
@include tHide; |
||||
|
} |
||||
|
.wt-record{ |
||||
|
@include ctf(flex-end); |
||||
|
@include flcw(24upx, 34upx, #9C9C9F); |
||||
|
.wr-icon{ |
||||
|
margin-left: 4upx; |
||||
|
width: 20upx; |
||||
|
height: 20upx; |
||||
|
background: skyblue; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
.wa-tip{ |
||||
|
margin-top: 8upx; |
||||
|
@include flcw(24upx, 34upx, #9C9C9F); |
||||
|
} |
||||
|
.wa-balance{ |
||||
|
margin-top: 68upx; |
||||
|
@include ctf(space-between); |
||||
|
.wb-money{ |
||||
|
@include flcw(84upx, 96upx, #000000, 700); |
||||
|
@include tHide; |
||||
|
.wm-unit{ |
||||
|
font-size: 44upx; |
||||
|
} |
||||
|
} |
||||
|
.wb-btn{ |
||||
|
flex-shrink: 0; |
||||
|
margin-left: 10upx; |
||||
|
width: 120upx; |
||||
|
text-align: center; |
||||
|
border-radius: 10upx; |
||||
|
background: #FF873D; |
||||
|
@include flcw(24upx, 56upx, #FFFFFF, 500); |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
.wi-btns{ |
||||
|
border-top: 1px solid rgba($color: #000000, $alpha: .1); |
||||
|
padding: 32upx 40upx 40upx; |
||||
|
@include ctf(space-between); |
||||
|
.wb-item{ |
||||
|
flex-grow: 0; |
||||
|
flex-shrink: 0; |
||||
|
height: 112upx; |
||||
|
width: 284upx; |
||||
|
border-radius: 26upx; |
||||
|
background-image: linear-gradient(180deg, #7ACFEE 0%, #44A1D7 100%); |
||||
|
@include ctf(center); |
||||
|
.wi-icon{ |
||||
|
flex-shrink: 0; |
||||
|
margin-right: 4upx; |
||||
|
width: 44upx; |
||||
|
height: 44upx; |
||||
|
background: skyblue; |
||||
|
} |
||||
|
.wi-txt{ |
||||
|
@include flcw(32upx, 44upx, #FFFFFF, 500); |
||||
|
} |
||||
|
&+.wb-item{ |
||||
|
background-image: linear-gradient(180deg, #4A4A4A 0%, #000000 100%); |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
</style> |
||||
Write
Preview
Loading…
Cancel
Save
Reference in new issue