Leadfyy.co
/
ec.uniapp-master
11
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

完成商家中心余额页面UI、完成商家中心提现页面UI

master
邓平艺 4 years ago
parent
eee9f343bd
commit
fd749469a2
4 changed files with 524 additions and 2 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. 14
      pages.json
  2. 205
      pages/business/balance/balance.vue
  3. 6
      pages/business/center/center.vue
  4. 301
      pages/business/withdrawal/withdrawal.vue

14
pages.json
View File

@ -973,6 +973,20 @@
"navigationBarTitleText": "订单管理",
"navigationStyle": "custom"
}
},
{
"path": "pages/business/balance/balance",
"style": {
"navigationBarTitleText": "余额" ,
"navigationStyle":"custom"
}
},
{
"path": "pages/business/withdrawal/withdrawal",
"style": {
"navigationBarTitleText": "提现" ,
"navigationStyle":"custom"
}
}
],
"globalStyle": {

205
pages/business/balance/balance.vue
View File

@ -0,0 +1,205 @@
<template>
<view>
<lf-nav title="余额" :showIcon="true" :spreadOut="false" bgColor="transparent" titleColor="#fff"></lf-nav>
<view class="head">
<view class="bg-left"></view>
<view class="bg-right"></view>
<view class="head-content">
<view>
<text class="lf-iconfont icon-- lf-font-50"></text>
</view>
<view class="point">
<text>78326478</text>
<text class="label">(元)</text>
</view>
</view>
<view class="withdrawal" @click="$url('/pages/business/withdrawal/withdrawal')">提现</view>
</view>
<view class="tabs">
<view class="lf-flex lf-h-100">
<view class="tab" :class="{'active-tab': current == 0}" @click="current = 0">余额明细</view>
<view class="tab" :class="{'active-tab': current == 1}" @click="current = 1">提现明细</view>
</view>
<picker mode='date' :value="date" @change="dateChange">
<view style="width: 340rpx; text-align: right;">
<text>{{ date || '2021-09-01' }}</text>
<text class="lf-iconfont icon-xiangyou lf-font-24 lf-m-l-10"></text>
</view>
</picker>
</view>
<view class="main" v-if="current == 0">
<view class="item" v-for="(item, index) in 10" :key="index">
<view class="lf-row-between">
<text class="lf-font-36 lf-color-black lf-font-bold">+￥80</text>
<text class="lf-font-24 lf-color-555">扫码收款</text>
</view>
<view class="lf-row-between lf-m-t-20">
<text class="lf-font-24 lf-color-555">¥374.38</text>
<text class="lf-font-24 lf-color-777">2021-09-01 18:27:58</text>
</view>
</view>
</view>
<view class="main" v-else-if="current == 1">
<view class="item" v-for="(item, index) in 10" :key="index">
<view class="lf-row-between">
<text class="lf-font-36 lf-font-bold" style="color: #F63434;">-￥80</text>
<text class="lf-font-24 lf-color-555">提现到支付宝[18203835380]</text>
</view>
<view class="lf-row-between lf-m-t-20">
<text class="lf-font-24 lf-color-555">¥374.38</text>
<text class="lf-font-24 lf-color-777">2021-09-01 18:27:58</text>
</view>
</view>
</view>
<u-back-top :scrollTop="pageScrollTop"></u-back-top>
</view>
</template>
<script>
export default {
data(){
return {
date: '',
current: 0
}
},
onLoad(){
},
methods: {
dateChange(event){
this.date = event.detail.value;
}
}
}
</script>
<style>
page{
overflow-x: hidden;
}
</style>
<style lang="scss" scoped>
.head{
width: 750rpx;
height: 429rpx;
background: linear-gradient(90deg, #1338B7 0%, #092788 100%);
position: relative;
overflow: hidden;
display: flex;
align-items: flex-end;
box-sizing: border-box;
padding: 60rpx 32rpx;
color: #FFFFFF;
.bg-left{
position: absolute;
width: 196rpx;
height: 196rpx;
border-radius: 50%;
background-color: rgba(255,255,255,0.04);
left: -92rpx;
bottom: 60rpx;
}
.bg-right{
position: absolute;
width: 520rpx;
height: 520rpx;
border-radius: 50%;
background-color: rgba(255,255,255,0.04);
right: -168rpx;
top: -122rpx;
}
.head-content{
width: 100%;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
&>view{
width: 100%;
text-align: center;
}
.point{
font-size: 72rpx;
letter-spacing: 2rpx;
font-weight: bold;
word-break: break-all;
line-height: 1;
margin-top: 10rpx;
.label{
font-size: 36rpx;
font-weight: initial;
}
}
}
.withdrawal{
position: absolute;
right: 32rpx;
bottom: 164rpx;
width: 102rpx;
height: 47rpx;
border-radius: 24rpx;
border: 1rpx solid #FFFFFF;
font-size: 24rpx;
color: #FFFFFF;
display: flex;
justify-content: center;
align-items: center;
z-index: 9;
}
}
.tabs{
height: 100rpx;
width: 750rpx;
border: 1rpx solid #e5e5e5;
display: flex;
justify-content: space-between;
align-items: center;
padding: 0 32rpx;
.tab{
width: 128rpx;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
font-size: 28rpx;
color: #555555;
&:nth-child(n+2){
margin-left: 50rpx;
}
}
.active-tab{
font-size: 32rpx;
color: #0D2E9A;
position: relative;
font-weight: bold;
&::after{
content: '';
position: absolute;
bottom: 0;
left: calc(50% - 40rpx);
width: 80rpx;
height: 10rpx;
background: #0D2E9A;
border-radius: 8rpx 8rpx 0rpx 0rpx;
}
}
}
.main{
padding: 30rpx 32rpx;
width: 750rpx;
height: max-content;
box-sizing: border-box;
.item{
width: 686rpx;
height: max-content;
background: #F4F8F8;
border-radius: 10rpx;
margin-bottom: 26rpx;
padding: 30rpx;
box-sizing: border-box;
line-height: 1;
}
}
</style>

6
pages/business/center/center.vue
View File

@ -10,11 +10,11 @@
<view class="head-title lf-line-3">雅诗兰黛专卖店</view>
</view>
<view class="lf-flex">
<view class="head-menu">
<view class="head-menu" @click="$url('/pages/business/balance/balance')">
<text class="lf-iconfont icon-daifukuan"></text>
<text>余额</text>
</view>
<view class="head-menu">
<view class="head-menu" @click="$msg('敬请期待')">
<text class="lf-iconfont icon-daifukuan"></text>
<text>扫一扫</text>
</view>
@ -148,6 +148,8 @@
width: 100%;
display: flex;
justify-content: space-between;
position: relative;
z-index: 9;
.head-img{
width: 100rpx;
height: 100rpx;

301
pages/business/withdrawal/withdrawal.vue
View File

@ -0,0 +1,301 @@
<template>
<view>
<lf-nav title="提现" :showIcon="true" bgColor="#fff"></lf-nav>
<view class="tabs">
<view class="tab">
<view class="name" :class="{'active-tab': current == 0}" @click="current = 0">支付宝</view>
</view>
<view class="tab">
<view class="name" :class="{'active-tab': current == 1}" @click="current = 1">银行卡</view>
</view>
</view>
<view class="content">
<!-- 店铺信息 -->
<view class="card">
<view class="lf-flex">
<image class="shop-avatar" mode="aspectFill" src="https://picsum.photos/id/237/200/300"></image>
<view class="shop-name">雅诗兰黛专卖店</view>
</view>
</view>
<!-- 收款信息 - 提现到支付宝 -->
<view class="card" v-if="current == 0">
<view class="lf-font-28 lf-color-222">支付宝姓名</view>
<view class="list">
<view class="lf-flex">
<input class="input" placeholder="请输入您的姓名" v-model="alipay_name" />
</view>
<view class="clear" v-if="alipay_name.length" @click="alipay_name = ''">
<text class="lf-iconfont icon-cuo1"></text>
</view>
</view>
<view class="lf-font-28 lf-color-222 lf-m-t-50">支付宝账号</view>
<view class="list">
<view class="lf-flex">
<input class="input" placeholder="请输入支付宝账号" v-model="alipay_account" />
</view>
<view class="clear" v-if="alipay_account.length" @click="alipay_account = ''">
<text class="lf-iconfont icon-cuo1"></text>
</view>
</view>
</view>
<!-- 收款信息 - 提现到银行卡 -->
<view class="card" v-else-if="current == 1">
<view class="lf-font-28 lf-color-222">银行名称</view>
<view class="list">
<view class="lf-flex">
<input class="input" placeholder="请输入您的银行名称" v-model="bank_name" />
</view>
<view class="clear" v-if="bank_name.length" @click="bank_name = ''">
<text class="lf-iconfont icon-cuo1"></text>
</view>
</view>
<view class="lf-font-28 lf-color-222 lf-m-t-50">所属支行</view>
<view class="list">
<view class="lf-flex">
<input class="input" placeholder="请输入银行卡所属支行" v-model="bank_sub_branch" />
</view>
<view class="clear" v-if="bank_sub_branch.length" @click="bank_sub_branch = ''">
<text class="lf-iconfont icon-cuo1"></text>
</view>
</view>
<view class="lf-font-28 lf-color-222 lf-m-t-50">银行卡号</view>
<view class="list">
<view class="lf-flex">
<input class="input" placeholder="请输入银行卡号码" v-model="bank_number" />
</view>
<view class="clear" v-if="bank_number.length" @click="bank_number = ''">
<text class="lf-iconfont icon-cuo1"></text>
</view>
</view>
<view class="lf-font-28 lf-color-222 lf-m-t-50">开户名</view>
<view class="list">
<view class="lf-flex">
<input class="input" placeholder="请输入银行卡开户名" v-model="bank_account_name" />
</view>
<view class="clear" v-if="bank_account_name.length" @click="bank_account_name = ''">
<text class="lf-iconfont icon-cuo1"></text>
</view>
</view>
</view>
<!-- 提现金额 -->
<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 class="lf-font-28 lf-m-t-30" style="color: #F63434;" v-if="isMoney">输入金额超过可用余额</view>
</view>
<!-- 提现说明 -->
<view class="card">
<view class="lf-font-28 lf-color-555 lf-m-b-20">提现说明</view>
<view class="lf-font-28 lf-color-222">
<view>1、提现到账时间为T+1；</view>
<view>2、提现最高单笔为10000元；</view>
<view>3、提现手续单笔收费10%；</view>
</view>
</view>
<button class="confirm" hover-class="lf-opacity" @click="confirm">确认提现</button>
</view>
</view>
</template>
<script>
export default {
data(){
return {
current: 0, // 支付宝0、银行卡1
alipay_name: '', // 支付宝姓名
alipay_account: '', // 支付宝账号
bank_name: '', // 银行名称
bank_sub_branch: '', // 银行卡所属支行
bank_number: '', // 银行卡号
bank_account_name: '', // 银行卡开户名
money: '' // 提现金额
}
},
computed: {
isMoney(){
// TODO 假设我现在的余额为10块钱
return Number(this.money) > 10;
}
},
onLoad(){
},
methods: {
confirm(){
if(this.current == 0){
// 提现到支付宝
if(!this.alipay_name) return this.$msg('请输入支付宝姓名');
if(!this.alipay_account) return this.$msg('请输入支付宝账号');
if(!this.money) return this.$msg('请输入提现金额');
if(this.isMoney) return this.$msg('提现金额超出当前余额');
if(this.money <= 0) return this.$msg('提现金额需大于0');
this.launch();
}else if(this.current == 1){
// 提现到银行卡
if(!this.bank_name) return this.$msg('请输入银行名称');
if(!this.bank_sub_branch) return this.$msg('请输入银行卡所属支行');
if(!this.bank_number) return this.$msg('请输入银行卡号');
if(!this.bank_account_name) return this.$msg('请输入银行卡开户名');
if(!this.money) return this.$msg('请输入提现金额');
if(this.isMoney) return this.$msg('提现金额超出当前余额');
if(this.money <= 0) return this.$msg('提现金额需大于0');
this.launch();
}
},
launch(){
// TODO 在此发起网络请求
console.log("发起提现");
}
}
}
</script>
<style>
page{
background-color: #F8F8F8;
}
</style>
<style lang="scss" scoped="scoped">
.tabs{
height: 80rpx;
width: 750rpx;
display: flex;
border-bottom: 1rpx solid #e5e5e5;
background-color: #FFFFFF;
align-items: center;
.tab{
width: 50%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
.name{
width: max-content;
height: 100%;
font-size: 28rpx;
color: #777777;
display: flex;
align-items: center;
}
.active-tab{
color: #0D2E9A;
font-weight: bold;
position: relative;
&::after{
content: '';
position: absolute;
bottom: 0;
left: calc(50% - 40rpx);
width: 80rpx;
height: 10rpx;
background: #0D2E9A;
border-radius: 8rpx 8rpx 0rpx 0rpx;
}
}
}
}
.content{
padding: 30rpx 32rpx;
}
.card{
padding: 30rpx;
box-sizing: border-box;
width: 686rpx;
height: max-content;
background: #FFFFFF;
border-radius: 20rpx;
transition: all 1s;
&:nth-child(n+2){
margin-top: 30rpx;
}
.shop-avatar{
width: 100rpx;
height: 100rpx;
border-radius: 50%;
margin-right: 20rpx;
}
.shop-name{
width: 502rpx;
height: max-content;
font-size: 36rpx;
color: #222222;
font-weight: bold;
}
.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: 50rpx;
font-size: 32rpx;
}
</style>
Write Preview
Loading…
Cancel
Save