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

add tid1505 style

tid1509
刘嘉炜 12 months ago
parent
afb9cd4735
commit
5090bb6e49
10 changed files with 444 additions and 7 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. 12
      src/pages.json
  2. 69
      src/subpackage/wallet/components/bf_withdraw.vue
  3. 116
      src/subpackage/wallet/components/dy_withdraw_apply.vue
  4. 82
      src/subpackage/wallet/components/time_selection.vue
  5. 56
      src/subpackage/wallet/components/top_up.vue
  6. 9
      src/subpackage/wallet/components/wallet_modal.vue
  7. 5
      src/subpackage/wallet/pages/baofu_withdraw/index.vue
  8. 74
      src/subpackage/wallet/pages/douyin_withdraw/index.vue
  9. 8
      src/subpackage/wallet/pages/index/index.vue
  10. 20
      src/subpackage/wallet/pages/index/recharge_record.vue

12
src/pages.json
View File

@ -722,6 +722,18 @@
}
},
{
"path": "pages/douyin_withdraw/index",
"style" : {
"navigationBarTitleText": "抖音提现"
}
},
{
"path": "pages/index/recharge_record",
"style" : {
"navigationBarTitleText": "充值记录"
}
},
{
"path": "pages/baofu_withdraw/index",
"style" : {
"navigationBarTitleText": "新宝付提现"

69
src/subpackage/wallet/components/bf_withdraw.vue
View File

@ -0,0 +1,69 @@
<template>
<wallet-modal title="提现">
<view class="bf-withdraw">
<view class="bw-txt">广州欧轩网络有限公司</view>
<view class="bw-txt">
可提现资金：
<text class="bt-price">399.63元</text>
</view>
<input type="text" class="bw-ipt">
<view class="dwa-tip">
<view class="dt-tit">温馨提示</view>
<view class="dt-desc">1. 提现一般当天到账，具体以银行到账时间为准！</view>
<view class="dt-desc">2. 每提现一次(不限提现金额)，收取0.5元手续费</view>
</view>
<view class="dwa-btn">
<wm-button green>确认提现</wm-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,
'wm-button': wmButton
}
}
</script>
<style lang="scss">
.bf-withdraw{
padding: 56upx 50upx 0upx;
.bw-txt{
@include flcw(28upx, 48upx, #1A1A1A);
.bt-price{
color: $mColor;
}
}
.bw-ipt{
box-sizing: border-box;
width: 100%;
margin-top: 28upx;
height: 108upx;
border-radius: 10upx;
padding: 0 20upx;
font-size: 32upx;
color: #1A1A1A;
background: #F2F2F7;
}
.dwa-tip{
margin-top: 18upx;
.dt-tit{
@include flcw(24upx, 44upx, #9A9A9D);
}
.dt-desc{
@include flcw(24upx, 44upx, #1A1A1A);
}
}
.dwa-btn{
margin-top: 62upx;
@include ctf(center);
}
}
</style>

116
src/subpackage/wallet/components/dy_withdraw_apply.vue
View File

@ -0,0 +1,116 @@
<template>
<wallet-modal title="申请提现">
<view class="dy-withdraw-apply">
<view class="dwa-balance">
<text class="dwab-txt">可提现资金：</text>
399.63元
</view>
<scroll-view class="dwa-scroll" scroll-y>
<view class="dwa-opt-line" v-for="i in 5" :key="i">
<view class="dol-name">*提现金额</view>
<input type="text" class="dol-ipt" placeholder="请输入提现金额">
</view>
<view class="dwa-opt-line">
<view class="dol-name">*银行名称</view>
<picker class="dol-picker">
<view class="dp-frame">
<input type="text" class="df-ipt" placeholder="请选择">
<image class="df-icon"></image>
</view>
</picker>
</view>
</scroll-view>
<view class="dwa-tip">
<view class="dt-tit">温馨提示</view>
<view class="dt-desc">1、账户请预留一定的余额，避免余额不足导致退款失败！</view>
<view class="dt-desc">2、提现申请成功提交后，预计在3~7个工作日内进行处理。</view>
</view>
<view class="dwa-btn">
<wm-button green>确认提现</wm-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,
'wm-button': wmButton
}
}
</script>
<style lang="scss">
.dy-withdraw-apply{
padding: 36upx 50upx 0upx;
.dwa-balance{
@include flcw(28upx, 48upx, $mColor);
@include tHide;
.dwab-txt{
color: #1A1A1A;
}
}
.dwa-scroll{
margin-top: 20upx;
height: 440upx;
}
.dwa-opt-line{
@include ctf(space-between);
&+.dwa-opt-line{
margin-top: 20upx;
}
.dol-name{
@include flcw(24upx, 34upx, #1A1A1A);
}
.dol-ipt{
box-sizing: border-box;
flex-grow: 0;
width: 392upx;
height: 108upx;
padding: 0 20upx;
border-radius: 10upx;
background: #F2F2F7;
@include flcw(24upx, 34upx, #1A1A1A);
}
.dol-picker{
flex-shrink: 0;
.dp-frame{
width: 392upx;
height: 108upx;
padding: 0 20upx;
border-radius: 10upx;
background: #F2F2F7;
@include ctf(space-between);
.df-ipt{
flex-grow: 1;
height: 100%;
@include flcw(24upx, 34upx, #1A1A1A);
}
.df-icon{
flex-shrink: 0;
width: 20upx;
height: 20upx;
background: skyblue;
}
}
}
}
.dwa-tip{
margin-top: 18upx;
.dt-tit{
@include flcw(24upx, 44upx, #9A9A9D);
}
.dt-desc{
@include flcw(24upx, 44upx, #1A1A1A);
}
}
.dwa-btn{
margin-top: 62upx;
@include ctf(center);
}
}
</style>

82
src/subpackage/wallet/components/time_selection.vue
View File

@ -0,0 +1,82 @@
<template>
<view class="time-selection">
<view class="ts-left">
<picker class="tl-class">
<view class="tl-frame">
<input type="text" class="tf-time" disabled value="2021-12-12">
<image class="tf-icon"></image>
</view>
</picker>
<view class="tl-txt">至</view>
<picker class="tl-class">
<view class="tl-frame">
<input type="text" class="tf-time" disabled value="2021-12-12">
<image class="tf-icon"></image>
</view>
</picker>
</view>
<view class="ts-right">
<text class="tr-txt">筛选</text>
<image class="tr-icon"></image>
</view>
</view>
</template>
<script>
export default {
}
</script>
<style lang="scss">
.time-selection{
padding: 26upx 24upx;
background: #fff;
@include ctf(space-between);
.ts-left{
@include ctf;
.tl-class{
flex-shrink: 0;
}
.tl-frame{
flex-shrink: 0;
padding: 0 16upx;
height: 92upx;
width: 240upx;
border-radius: 10upx;
background: #F2F2F7;
@include ctf(space-between);
.tf-time{
flex-grow: 1;
box-sizing: border-box;
height: 100%;
@include flcw(28upx, 40upx, #1A1A1A);
}
.tf-icon{
margin-left: 4upx;
flex-shrink: 0;
width: 20upx;
height: 20upx;
background: skyblue;
}
}
.tl-txt{
margin: 0 18upx;
@include flcw(32upx, 44upx, #1A1A1A);
}
}
.ts-right{
@include ctf(flex-end);
.tr-txt{
margin-right: 12upx;
@include flcw(28upx, 40upx, #9C9C9F);
}
.tr-icon{
flex-shrink: 0;
width: 40upx;
height: 40upx;
background: skyblue;
}
}
}
</style>

56
src/subpackage/wallet/components/top_up.vue
View File

@ -0,0 +1,56 @@
<template>
<wallet-modal title="充值">
<view class="top-up">
<view class="tu-txt">
可提现资金：
<text class="bt-price">399.63元</text>
</view>
<input type="text" class="bw-ipt">
<view class="tu-btns">
<wm-button>取消</wm-button>
<wm-button green>确认</wm-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,
'wm-button': wmButton
}
}
</script>
<style lang="scss">
.top-up{
padding: 60upx 50upx 0;
.tu-txt{
@include flcw(28upx, 48upx, #1A1A1A);
.bt-price{
color: $mColor;
}
}
.bw-ipt{
box-sizing: border-box;
width: 100%;
margin-top: 20upx;
height: 108upx;
border-radius: 10upx;
padding: 0 20upx;
font-size: 32upx;
color: #1A1A1A;
background: #F2F2F7;
}
.tu-btns{
margin-top: 80upx;
@include ctf(space-between);
}
}
</style>

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

@ -2,7 +2,7 @@
<view class="wallet-mask">
<view class="wm-content">
<image class="wc-close"></image>
<view class="wc-title">提现成功</view>
<view class="wc-title">{{ title }}</view>
<slot></slot>
</view>
</view>
@ -10,7 +10,12 @@
<script>
export default {
props: {
title: {
type: String,
default: '提示'
}
}
}
</script>

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

@ -6,14 +6,17 @@
<view class="bi-item">
<baofu-item personal></baofu-item>
</view>
<bf-withdraw></bf-withdraw>
</view>
</template>
<script>
import baofuItem from './modules/baofu_item.vue';
import bfWithdraw from '../../components/bf_withdraw.vue';
export default {
components: {
'baofu-item': baofuItem
'baofu-item': baofuItem,
'bf-withdraw': bfWithdraw
}
}
</script>

74
src/subpackage/wallet/pages/douyin_withdraw/index.vue
View File

@ -0,0 +1,74 @@
<template>
<view class="douyin-withdraw">
<image class="dw-icon"></image>
<view class="dw-tip">可提现资金</view>
<view class="dw-price">
<text class="dp-unit">¥</text>9870.65
</view>
<view class="dw-btn">申请提现</view>
<view class="dw-link">
<text class="dl-txt">提现明细</text>
<image class="dl-icon"></image>
</view>
<dy-withdraw-apply></dy-withdraw-apply>
</view>
</template>
<script>
import dyWithdrawApply from '../../components/dy_withdraw_apply.vue';
export default {
components: {
'dy-withdraw-apply': dyWithdrawApply
}
}
</script>
<style lang="scss">
.douyin-withdraw{
padding-top: 88upx;
.dw-icon{
margin: 0 auto;
display: block;
width: 96upx;
height: 96upx;
background: skyblue;
}
.dw-tip{
margin-top: 62upx;
text-align: center;
@include flcw(28upx, 40upx, #000000);
}
.dw-price{
padding: 0 20upx;
margin-top: 20upx;
text-align: center;
@include flcw(84upx, 96upx, #000000, 700);
@include tHide(1);
.dp-unit{
font-size: 64upx;
}
}
.dw-btn{
margin: 154upx auto 0;
width: 300upx;
border-radius: 10upx;
text-align: center;
background: #FF873D;
@include flcw(32upx, 112upx, #fff);
}
.dw-link{
margin-top: 88upx;
@include flcw(28upx, 40upx, #9A9A9D);
@include ctf(center);
.dl-icon{
flex-shrink: 0;
margin-left: 6upx;
width: 28upx;
height: 28upx;
background: skyblue;
}
}
}
</style>

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

@ -11,20 +11,20 @@
</text>
</view>
</view>
<wallet-modal></wallet-modal>
<wallet-modal v-if="false"></wallet-modal>
<top-up></top-up>
</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'
import topUp from '../../components/top_up.vue';
export default {
components: {
'wallet-info': walletInfo,
'wallet-mask': walletMask,
'wallet-modal': walletModalSuccess,
'top-up': topUp
}
}
</script>

20
src/subpackage/wallet/pages/index/recharge_record.vue
View File

@ -0,0 +1,20 @@
<template>
<view class="recharge-record">
<time-selection></time-selection>
</view>
</template>
<script>
import timeSelection from '../../components/time_selection.vue';
export default {
components: {
'time-selection': timeSelection
}
}
</script>
<style lang="scss">
.recharge-record{
}
</style>
Write Preview
Loading…
Cancel
Save