APP
/
ox_zhiNengZhuShou
3
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity
Browse Source

add tid1505 style

tid1509
刘嘉炜 12 months ago
parent
4e77025e5d
commit
afb9cd4735
9 changed files with 538 additions and 0 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 17
      src/pages.json
  2. 22
      src/subpackage/wallet/components/wallet_mask.vue
  3. 49
      src/subpackage/wallet/components/wallet_modal.vue
  4. 45
      src/subpackage/wallet/components/wallet_modal_success.vue
  5. 31
      src/subpackage/wallet/components/wm_button.vue
  6. 28
      src/subpackage/wallet/pages/baofu_withdraw/index.vue
  7. 159
      src/subpackage/wallet/pages/baofu_withdraw/modules/baofu_item.vue
  8. 53
      src/subpackage/wallet/pages/index/index.vue
  9. 134
      src/subpackage/wallet/pages/index/modules/wallet_info.vue

17
src/pages.json
View File

@ -711,6 +711,23 @@
}
}
]
},
{
"root": "subpackage/wallet",
"pages": [
{
"path": "pages/index/index",
"style" : {
"navigationBarTitleText": "钱包&提现"
}
},
{
"path": "pages/baofu_withdraw/index",
"style" : {
"navigationBarTitleText": "新宝付提现"
}
}
]
}
],
"globalStyle": {

22
src/subpackage/wallet/components/wallet_mask.vue
View File

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

49
src/subpackage/wallet/components/wallet_modal.vue
View File

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

45
src/subpackage/wallet/components/wallet_modal_success.vue
View File

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

31
src/subpackage/wallet/components/wm_button.vue
View File

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

28
src/subpackage/wallet/pages/baofu_withdraw/index.vue
View File

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

159
src/subpackage/wallet/pages/baofu_withdraw/modules/baofu_item.vue
View File

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

53
src/subpackage/wallet/pages/index/index.vue
View File

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

134
src/subpackage/wallet/pages/index/modules/wallet_info.vue
View File

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