完整先货后款付款流程

This commit is contained in:
THK3121 2023-07-08 16:58:21 +08:00
parent 05ef84a30b
commit 42b860b90e
7 changed files with 417 additions and 392 deletions

View File

@ -41,7 +41,7 @@ export function postconfirm(merId, data) {
return request.post("admin/" + merId + "/confirm" , data, { login: true });
}
/**
* 同意先货后款
* 先货后款订单结算
*/
export function postsettle(merId, data) {
return request.post("admin/" + merId + "/settle" , data, { login: true });

View File

@ -107,7 +107,7 @@ export function orderDel(id) {
}
/**
* 订单详情
* 已付款订单详情
* @param string uni
*/
export function getOrderDetail(uni) {
@ -115,11 +115,11 @@ export function getOrderDetail(uni) {
}
/**
* 订单详情
* 未付款订单详情
* @param string uni
*/
export function groupOrderDetail(uni) {
return request.get('order/group_order_detail/' + uni);
export function groupOrderDetail(uni,product_type) {
return request.get('order/group_order_detail/' + uni+'?product_type=' + product_type);
}
// 支付状态订单

View File

@ -266,8 +266,8 @@
type:number
}
this.$nextTick(()=>{
this.where.is_verify = 1;
delete this.where.status;
this.where.status = 2;
delete this.where.is_verify;
this.init();
})
postconfirm(this.merId,data).then(res=>{
@ -276,7 +276,7 @@
},
handleSearch() {
this.loaded = false;
this.where.page = 1;
this.where.page = 3;
this.list = [];
this.getIndex();
},

View File

@ -270,7 +270,8 @@
add: false,
},
show:false,
credit_buy:''
credit_buy:'',
product_type:0
};
},
watch: {
@ -285,6 +286,7 @@
mapGetters(['isLogin','uid','viewColor','keyColor'])),
onLoad: function(options) {
this.credit_buy=options.credit_buy
if(options.product_type)this.product_type=options.product_type
if (options.order_id) {
this.$set(this, 'order_id', options.order_id);
}
@ -440,7 +442,7 @@
uni.showLoading({
title: "正在加载中"
});
groupOrderDetail(this.order_id).then(res => {
groupOrderDetail(this.order_id,this.product_type).then(res => {
let _type = 0;
uni.hideLoading();
that.$set(that, 'orderInfo', res.data);

View File

@ -537,7 +537,7 @@
"name": "先货后款",
"icon": "tan-a-lujing17324",
value: 'creditBuy',
title: `结算周期:30天 日利率0.05%`,
title: `结算周期:${this.settle_cycle}天 日利率:${this.interest_rate}%`,
payStatus: '',
},
],
@ -653,7 +653,9 @@
order_key: '',
is_take: '',
domain: HTTP_REQUEST_URL,
product_type:''
product_type:'',
interest_rate:'',//
settle_cycle:'',//
};
},
computed: {
@ -1024,6 +1026,7 @@
use_integral: that.use_integral
}).then(res => {
//
console.log(res);
that.is_take = false
res.data.order.forEach(el => {
if (el.order.isTake == 1) that.is_take = true
@ -1074,6 +1077,9 @@
that.allow_address = res.data.allow_address
that.deliveryName = res.data.order_model == 0 ? '快递配送' : '虚拟发货'
that.order_key = res.data.key
that.interest_rate = res.data.order[0].interest_rate
that.settle_cycle = res.data.order[0].settle_cycle
console.log(that.settle_cycle);
if(res.data.order[0].credit_buy == 1){
this.cartArr[4].payStatus = 1
}else{
@ -1116,7 +1122,9 @@
phone: res.data.phone
}
console.log(that.addressId);
this.getConfirm(that.addressId);
this.$nextTick(()=>{
this.getConfirm(that.addressId);
})
})
} else {
getAddressList().then(res => {

View File

@ -21,7 +21,7 @@
<view>全部</view>
<view class='num'>{{orderData.all || 0}}</view>
</view>
<view class='item' :class='orderStatus==20 ? "on": ""' @click="statusClick(20)">
<view class='item' :class='orderStatus==0 ? "on": ""' @click="statusClick(0)">
<view>待付款</view>
<view class='num'>{{orderData.noPay || 0}}</view>
</view>
@ -61,7 +61,7 @@
<view v-if="orderList.length > 0">
<block v-if="orderStatus == 0">
<view class='item' v-for="(item,index) in orderList" :key="index">
<view @click='goOrderDetails(item.group_order_id)'>
<view @click='goOrderDetails(item.group_order_id,item.orderList[0].activity_type)'>
<view class='title acea-row row-between-wrapper'>
<view class="acea-row row-middle left-wrapper">
{{item.group_order_sn}}
@ -141,6 +141,12 @@
{{item.total_num || 0}}件商品总金额
<text class='money p-color'>{{item.pay_price}}</text>
</view>
<view class='totalPrice' v-else>{{item.orderNum || 0}}件商品总金额
<text class='money p-color'>{{item.pay_price}}</text>
</view>
<view class="totalPrice" >
{{item.total_num || 0}}件商品结算周期到期后付款{{item.pay_price}}
</view>
<view class='bottom acea-row row-right row-middle'>
<view class='bnt b-color' @click.stop='goPay(item.pay_price,item.group_order_id)'>
立即付款</view>
@ -238,13 +244,6 @@
<view class='totalPrice' v-if="item.activity_type == 2">{{item.orderNum || 0}}件商品总金额
<text class='money p-color'>{{item.presell_price}}</text>
</view>
<view class='totalPrice' v-else>{{item.orderNum || 0}}件商品总金额
<text class='money p-color'>{{item.pay_price}}</text>
</view>
<view class="totalPrice" v-if="item.pay_type == 8 && item.status == 12">
共1件商品结算周期到期后付款100
</view>
</view>
<view class='bottom acea-row row-right row-middle'>
<view v-if="!item.receipt && item.status != -1" class='bnt cancelBnt'
@ -509,7 +508,7 @@
getOrderData: function() {
let that = this;
orderData({
product_type:that.product_type
product_type:this.product_type
}).then(res => {
that.$set(that, 'orderData', res.data);
})
@ -544,10 +543,13 @@
*
*/
goPay: function(pay_price, order_id) {
this.$set(this, 'pay_close', true);
this.order_id = order_id;
this.pay_order_id = order_id.toString()
this.$set(this, 'totalPrice', pay_price);
uni.navigateTo({
url: '/pages/users/payment/payment?order_id=' + order_id + '&product_type=' + this.product_type
});
// this.$set(this, 'pay_close', true);
// this.order_id = order_id;
// this.pay_order_id = order_id.toString()
// this.$set(this, 'totalPrice', pay_price);
},
/**
* 支付成功回调
@ -573,7 +575,7 @@
/**
* 去订单详情
*/
goOrderDetails: function(order_id) {
goOrderDetails: function(order_id,product_type) {
let self = this
if (!order_id) return that.$util.Tips({
title: '缺少订单号无法查看订单详情'
@ -586,7 +588,7 @@
uni.hideLoading();
if (self.orderStatus == 0) {
uni.navigateTo({
url: '/pages/order_details/stay?order_id=' + order_id
url: '/pages/order_details/stay?order_id=' + order_id + '&product_type=' + product_type
})
} else {
uni.navigateTo({
@ -600,7 +602,7 @@
// #ifndef MP
if (self.orderStatus == 0) {
uni.navigateTo({
url: '/pages/order_details/stay?order_id=' + order_id
url: '/pages/order_details/stay?order_id=' + order_id + '&product_type=' + product_type
})
} else {
uni.navigateTo({
@ -663,7 +665,7 @@
that.loadTitle = "加载更多";
if (that.isReady) {
that.isReady = false
if (that.orderStatus == 20) {
if (that.orderStatus == 0) {
groupOrderList({
page: that.page,
limit: that.limit,
@ -766,27 +768,6 @@
this.show = true
this.shouhuo.id = item.order_id
this.shouhuo.index = index
// uni.showModal({
// title: '',
// content: '',
// success: function(res) {
// if (res.confirm) {
// orderTake(item.order_id).then(res => {
// return that.$util.Tips({
// title: '',
// icon: 'success'
// }, function() {
// that.orderList.splice(index, 1);
// that.getOrderData();
// });
// }).catch(err => {
// return that.$util.Tips({
// title: err
// });
// })
// }
// }
// })
},
queding() {
let that = this;

View File

@ -1,384 +1,418 @@
<template>
<view class="center">
<view class="center">
<view class='wrapper'>
<view class='item'>
<view>支付方式</view>
<view class='list'>
<!-- #ifdef H5 -->
<view class='payItem acea-row row-middle' :class='active==index ?"on":""' @tap='payItem(index)'
v-for="(item,index) in cartArr" :key='index' v-if="item.payStatus==1">
<view class='name acea-row row-center-wrapper'>
<view class='iconfont animated'
:class='(item.icon) + " " + (animated==true&&active==index ?"bounceIn":"")'></view>
{{item.name}}
</view>
<view class='tip'>
{{item.title}}
<block v-if="item.value == 'balance'">
{{userInfo.now_money}}
</block>
</view>
</view>
<!-- #endif -->
<!-- #ifdef MP || APP-PLUS -->
<view class='payItem acea-row row-middle' :class='active==index ?"on":""' @tap='payItem(index)'
v-for="(item,index) in cartArr" :key='index' v-if="item.payStatus==1">
<view class='name acea-row row-center-wrapper'>
<view class='iconfont animated'
:class='(item.icon) + " " + (animated==true&&active==index ?"bounceIn":"")'></view>
{{item.name}}
</view>
<view class='tip'>
{{item.title}}
<block v-if="item.value == 'balance'">
{{userInfo.now_money}}
</block>
</view>
</view>
<!-- #endif -->
</view>
</view>
</view>
<view class="settel">
<view class='settel-t'>
<view>实付款</view>
<view class='conter'> {{couponData.orderList[0].pay_price}}</view>
</view>
</view>
<view class="settel">
<view class='settel-t'>
<view>利息合计:</view>
<view class="conter">
<view class='con_text'> {{couponData.orderList[0].pay_price}}</view>
<view class='con_text' style="color: #F84221;" v-if="couponData.pay_type == 8">已逾期1天)</view>
</view>
<view class='wrapper'>
<view class='item'>
<view>支付方式</view>
<view class='list'>
<!-- #ifdef H5 -->
<view class='payItem acea-row row-middle' :class='active==index ?"on":""' @tap='payItem(index)'
v-for="(item,index) in cartArr" :key='index' v-if="item.payStatus==1">
<view class='name acea-row row-center-wrapper'>
<view class='iconfont animated'
:class='(item.icon) + " " + (animated==true&&active==index ?"bounceIn":"")'></view>
{{item.name}}
</view>
<view class='tip'>
{{item.title}}
<block v-if="item.value == 'balance'">
{{userInfo.now_money}}
</block>
</view>
</view>
<!-- #endif -->
<!-- #ifdef MP || APP-PLUS -->
<view class='payItem acea-row row-middle' :class='active==index ?"on":""' @tap='payItem(index)'
v-for="(item,index) in cartArr" :key='index' v-if="item.payStatus==1">
<view class='name acea-row row-center-wrapper'>
<view class='iconfont animated'
:class='(item.icon) + " " + (animated==true&&active==index ?"bounceIn":"")'></view>
{{item.name}}
</view>
<view class='tip'>
{{item.title}}
<block v-if="item.value == 'balance'">
{{userInfo.now_money}}
</block>
</view>
</view>
<!-- #endif -->
</view>
</view>
</view>
<view class="settel">
<view class='settel-t'>
<view>实付款</view>
<view class='conter'> {{couponData.orderList[0].pay_price}}</view>
</view>
</view>
<view class="settel">
<view class='settel-t'>
<view>利息合计:</view>
<view class="conter">
<view class='con_text'> {{couponData.orderList[0].pay_price}}</view>
<view class='con_text' style="color: #F84221;" v-if="couponData.pay_type == 8">已逾期1天)</view>
</view>
</view>
</view>
<view class='footer acea-row row-between-wrapper'>
<view class="footer_count">
<view>
合计:
<text class='pColor' v-if="cartArr[4].payStatus == 1">0.00</text>
<text class='pColor' v-else>{{couponData.orderList[0].pay_price}}</text>
</view>
<view style="font-size: 14px;color: #F84221;" v-if="couponData.pay_type == 8">
可结算周期到期后再付款{{totalPrice}}
</view>
</view>
<view class='settlement' @tap="SubOrder">
提交订单
</view>
</view>
</view>
</view>
</view>
<view class='footer acea-row row-between-wrapper'>
<view class="footer_count">
<view>
合计:
<text class='pColor' v-if="cartArr[4].payStatus == 1">0.00</text>
<text class='pColor' v-else>{{couponData.orderList[0].pay_price}}</text>
</view>
<view style="font-size: 14px;color: #F84221;" v-if="couponData.pay_type == 8">
可结算周期到期后再付款{{totalPrice}}
</view>
</view>
<view class='settlement' @tap="SubOrder">
提交订单
</view>
</view>
</view>
</template>
<script>
import {
import {
getUserInfo,
getUserInfo,
} from '@/api/user.js';
import {
groupOrderDetail,
orderPay
} from '@/api/order.js'
export default {
data() {
return {
animated: false,
totalPrice: 0,
couponData: {},
active: 0, // ,
userInfo: {}, //
cartArr: [{
"name": "微信支付",
"icon": "icon-weixin2",
value: 'weixin',
title: '微信快捷支付',
payStatus: 1,
},
{
name: "支付宝支付",
icon: "icon-icon34",
// #ifdef H5 || APP-PLUS
value: 'alipay',
// #endif
// #ifdef MP
value: 'alipayQr',
// #endif
title: '支付宝支付',
payStatus: this.$store.getters.globalData.alipay_open
},
{
"name": "余额支付",
"icon": "icon-icon-test",
value: 'balance',
title: '可用余额:',
payStatus: this.$store.getters.globalData.yue_pay_status,
},
{
"name": "线下支付",
"icon": "icon-yinhangqia",
value: 'offline',
title: '线下支付',
payStatus: 2,
}, {
"name": "先货后款",
"icon": "tan-a-lujing17324",
value: 'creditBuy',
title: `结算周期30天 `,
label: '日利率0.05%',
order_id: '',
},
],
order_id: ''
};
},
onLoad(options) {
this.order_id = options.order_id
this.getOrderInfo(this.order_id)
this.getUserInfo()
},
methods: {
payItem: function(e) {
let that = this;
let active = e;
that.active = active;
that.animated = true;
that.payType = that.cartArr[active].value;
if (that.payType == 'weixin') {
that.payType = that.from
}
console.log(that.payType);
},
getUserInfo() {
getUserInfo().then(res => {
this.userInfo = res.data
})
},
getOrderInfo(order_id) {
groupOrderDetail(order_id).then(res => {
this.couponData = res.data
console.log(res);
})
},
SubOrder() {
orderPay(this.order_id, {
type: this.payType
}).then(res => {
console.log(res);
setTimeout(() => {
uni.navigateBack({
delta: 1
})
}, 1000)
uni.showToast({
title: res.message
})
})
}
} from '@/api/user.js';
import {
groupOrderDetail,
orderPay
} from '@/api/order.js'
import {
postsettle,
} from '@/api/admin.js'
export default {
data() {
return {
animated: false,
totalPrice: 0,
couponData: {},
active: 0, // ,
userInfo: {}, //
cartArr: [{
"name": "微信支付",
"icon": "icon-weixin2",
value: 'weixin',
title: '微信快捷支付',
payStatus: 1,
},
{
name: "支付宝支付",
icon: "icon-icon34",
// #ifdef H5 || APP-PLUS
value: 'alipay',
// #endif
// #ifdef MP
value: 'alipayQr',
// #endif
title: '支付宝支付',
payStatus: this.$store.getters.globalData.alipay_open
},
{
"name": "余额支付",
"icon": "icon-icon-test",
value: 'balance',
title: '可用余额:',
payStatus: this.$store.getters.globalData.yue_pay_status,
},
{
"name": "线下支付",
"icon": "icon-yinhangqia",
value: 'offline',
title: '线下支付',
payStatus: 2,
}, {
"name": "先货后款",
"icon": "tan-a-lujing17324",
value: 'creditBuy',
title: `结算周期30天 `,
label: '日利率0.05%',
order_id: '',
},
],
order_id: '',
product_type: 0,
mer_id:''
};
},
onLoad(options) {
this.order_id = options.order_id
if (options.product_type) { this.product_type = options.product_type }
console.log(this.product_type);
this.getOrderInfo()
this.getUserInfo()
},
methods: {
payItem: function(e) {
let that = this;
let active = e;
that.active = active;
that.animated = true;
that.payType = that.cartArr[active].value;
if (that.payType == 'weixin') {
that.payType = that.from
}
console.log(that.payType);
},
getUserInfo() {
getUserInfo().then(res => {
this.userInfo = res.data
this.mer_id = res.data.service.mer_id
})
},
getOrderInfo() {
groupOrderDetail(this.order_id, this.product_type).then(res => {
this.couponData = res.data
console.log(res);
})
},
SubOrder() {
if (this.product_type == 98) {
postsettle(
this.mer_id, {
id:this.order_id,
pay_type: this.payType
}
).then(res => {
if(res.message == 'success'){
uni.showToast({
title: '付款成功'
})
setTimeout(() => {
uni.navigateBack({
delta: 1
})
}, 1000)
}
console.log(res);
}).catch(err=>{
uni.showToast({
title: err.message
})
})
} else {
orderPay(this.order_id, {
type: this.payType
}).then(res => {
console.log(res);
setTimeout(() => {
uni.navigateBack({
delta: 1
})
}, 1000)
uni.showToast({
title: res.message
})
})
}
}
}
}
}
}
</script>
<style lang="scss" scoped>
.center {
.wrapper .item .discount .placeholder {
color: #ccc;
text-align: right;
}
.center {
.wrapper .item .discount .placeholder {
color: #ccc;
text-align: right;
}
.wrapper {
margin-bottom: 12rpx;
background-color: #fff;
padding-top: 20px;
}
.wrapper {
margin-bottom: 12rpx;
background-color: #fff;
padding-top: 20px;
}
.wrapper .item {
padding: 27rpx 30rpx;
font-size: 30rpx;
color: #282828;
}
.wrapper .item {
padding: 27rpx 30rpx;
font-size: 30rpx;
color: #282828;
}
.wrapper .item .discount .iconfont {
color: #515151;
font-size: 30rpx;
margin-left: 15rpx;
}
.wrapper .item .discount .iconfont {
color: #515151;
font-size: 30rpx;
margin-left: 15rpx;
}
.wrapper .item .discount .num {
font-size: 32rpx;
margin-right: 20rpx;
}
.wrapper .item .discount .num {
font-size: 32rpx;
margin-right: 20rpx;
}
.wrapper .item .shipping {
font-size: 30rpx;
color: #999;
position: relative;
padding-right: 58rpx;
}
.wrapper .item .shipping {
font-size: 30rpx;
color: #999;
position: relative;
padding-right: 58rpx;
}
.wrapper .item .shipping .iconfont {
font-size: 35rpx;
color: #707070;
position: absolute;
right: 0;
top: 50%;
transform: translateY(-50%);
margin-left: 30rpx;
}
.wrapper .item .shipping .iconfont {
font-size: 35rpx;
color: #707070;
position: absolute;
right: 0;
top: 50%;
transform: translateY(-50%);
margin-left: 30rpx;
}
.wrapper .item input {
flex: 1;
height: 100%;
margin-left: 20rpx;
text-align: right;
}
.wrapper .item input {
flex: 1;
height: 100%;
margin-left: 20rpx;
text-align: right;
}
.wrapper .item .placeholder {
color: #ccc;
}
.wrapper .item .placeholder {
color: #ccc;
}
.wrapper .item .list {
margin-top: 35rpx;
}
.wrapper .item .list {
margin-top: 35rpx;
}
.wrapper .item .list .payItem {
border: 1px solid #eee;
border-radius: 6rpx;
height: 86rpx;
width: 100%;
box-sizing: border-box;
margin-top: 20rpx;
font-size: 28rpx;
color: #282828;
}
.wrapper .item .list .payItem {
border: 1px solid #eee;
border-radius: 6rpx;
height: 86rpx;
width: 100%;
box-sizing: border-box;
margin-top: 20rpx;
font-size: 28rpx;
color: #282828;
}
.wrapper .item .list .payItem.on {
border-color: var(--view-theme);
color: var(--view-theme);
}
.wrapper .item .list .payItem.on {
border-color: var(--view-theme);
color: var(--view-theme);
}
.wrapper .item .list .payItem .name {
width: 50%;
text-align: center;
border-right: 1px solid #eee;
justify-content: left;
padding-left: 80rpx;
}
.wrapper .item .list .payItem .name {
width: 50%;
text-align: center;
border-right: 1px solid #eee;
justify-content: left;
padding-left: 80rpx;
}
.wrapper .item .list .payItem .name .iconfont {
width: 44rpx;
height: 44rpx;
border-radius: 50%;
text-align: center;
line-height: 44rpx;
background-color: #fe960f;
color: #fff;
font-size: 30rpx;
margin-right: 15rpx;
}
.wrapper .item .list .payItem .name .iconfont {
width: 44rpx;
height: 44rpx;
border-radius: 50%;
text-align: center;
line-height: 44rpx;
background-color: #fe960f;
color: #fff;
font-size: 30rpx;
margin-right: 15rpx;
}
.wrapper .item .list .payItem .name .iconfont.icon-weixin2 {
background-color: #41b035;
}
.wrapper .item .list .payItem .name .iconfont.icon-weixin2 {
background-color: #41b035;
}
.wrapper .item .list .payItem .name .iconfont.icon-icon34 {
background-color: #4295D5;
}
.wrapper .item .list .payItem .name .iconfont.icon-icon34 {
background-color: #4295D5;
}
.wrapper .item .list .payItem .tip {
width: 49%;
text-align: center;
font-size: 26rpx;
color: #aaa;
}
.wrapper .item .list .payItem .tip {
width: 49%;
text-align: center;
font-size: 26rpx;
color: #aaa;
}
.footer {
width: 100%;
height: 100rpx;
height: calc(100rpx+ constant(safe-area-inset-bottom)); /// IOS<11.2/
height: calc(100rpx + env(safe-area-inset-bottom)); /// IOS>11.2/
background-color: #fff;
padding: 0 30rpx;
font-size: 28rpx;
color: #333;
box-sizing: border-box;
position: fixed;
bottom: 0;
left: 0;
z-index: 30;
.footer {
width: 100%;
height: 100rpx;
height: calc(100rpx+ constant(safe-area-inset-bottom)); /// IOS<11.2/
height: calc(100rpx + env(safe-area-inset-bottom)); /// IOS>11.2/
background-color: #fff;
padding: 0 30rpx;
font-size: 28rpx;
color: #333;
box-sizing: border-box;
position: fixed;
bottom: 0;
left: 0;
z-index: 30;
.footer_count {
font-size: 28rpx;
}
.footer_count {
font-size: 28rpx;
}
.coupon_price {
color: #999999;
font-size: 20rpx;
margin-top: 10rpx;
.coupon_price {
color: #999999;
font-size: 20rpx;
margin-top: 10rpx;
text {
color: #282828;
padding: 2rpx 10rpx;
background: #F5F5F5;
border-radius: 26rpx;
margin-left: 20rpx;
line-height: 30rpx;
height: 30rpx;
display: inline-block;
}
}
text {
color: #282828;
padding: 2rpx 10rpx;
background: #F5F5F5;
border-radius: 26rpx;
margin-left: 20rpx;
line-height: 30rpx;
height: 30rpx;
display: inline-block;
}
}
.settlement {
font-size: 30rpx;
color: #fff;
width: 240rpx;
height: 70rpx;
background: linear-gradient(90deg, #F98649 0%, #F34E45 100%);
border-radius: 50rpx;
text-align: center;
line-height: 70rpx;
.settlement {
font-size: 30rpx;
color: #fff;
width: 240rpx;
height: 70rpx;
background: linear-gradient(90deg, #F98649 0%, #F34E45 100%);
border-radius: 50rpx;
text-align: center;
line-height: 70rpx;
&.disabled {
background-color: #cccccc;
}
}
&.disabled {
background-color: #cccccc;
}
}
.transparent {
opacity: 0
}
.transparent {
opacity: 0
}
}
}
.settel {
width: 100%;
background-color: #fff;
height: 70px;
padding: 0 15px 0 15px;
line-height: 70px;
.settel {
width: 100%;
background-color: #fff;
height: 70px;
padding: 0 15px 0 15px;
line-height: 70px;
.settel-t {
width: 100%;
display: flex;
justify-content: space-between;
align-items: center;
}
.settel-t {
width: 100%;
display: flex;
justify-content: space-between;
align-items: center;
}
.con_text {
display: flex;
justify-content: flex-end;
height: 35px;
margin: auto;
line-height: 35px;
}
.con_text {
display: flex;
justify-content: flex-end;
height: 35px;
margin: auto;
line-height: 35px;
}
}
}
}
}
</style>