Skip to content

肖康 / H5_2.0

Go to a project
Commit b4786b7b by 肖康
Options

支付页面

parent 9eff1e6b
Inline Side-by-side
Showing with 360 additions and 2 deletions
assets/css/confirm/offline.scss 0 → 100644
.offlinepage{
padding-top: 88rpx;
padding-bottom: 100rpx;
.chead{
width: 100%;
height: 88rpx;
background: #FFFFFF;
position: fixed;
left:0rpx;
top:0rpx;
.icon{
font-size: 44rpx;
color:$uni-color999;
margin-left: 32rpx;
}
.titlesi{
color:$uni-color333;
font-size: 34rpx;
font-weight: 500;
width:650rpx;
text-align: center;
}
}
.tipbox{
padding:0 24rpx;
padding-top: 16rpx;
margin-bottom: 16rpx;
.tips{
width: 702rpx;
background: #FFF8F2;
border-radius: 0rpx 30rpx 30rpx 30rpx;
padding:15rpx 24rpx;
box-sizing: border-box;
color:#F98119;
font-size: 22rpx;
.icon{font-size: 32rpx;margin-right: 16rpx;}
}
}
.offlineinfo{
padding:0 24rpx;
.isitem{
background: #FFFFFF;
border-radius: 10rpx;
box-sizing: border-box;
padding:0 24rpx;
padding-bottom: 12rpx;
.t1{
height:73rpx;
border-bottom: 1rpx solid #F0F0F2;
font-size: 24rpx;
color:$uni-color666;
view{
color:$uni-color999;
text{
color:#c2c4cc;
font-size: 32rpx;
margin-right: 6rpx;
}
}
}
.t2{
font-size: 24rpx;
color:$uni-color666;
padding-top: 15rpx;
.row{
margin-bottom: 12rpx;
}
text{
color:$uni-color999;
}
}
}
}
.payfoot{
width: 100%;
position: fixed;
left:0rpx;
bottom: 0rpx;
height: 100rpx;
background: #FFFFFF;
box-shadow: 0rpx -4rpx 20rpx 0rpx rgba(198,199,204,0.1);
border-radius: 10rpx 10rpx 0rpx 0rpx;
view{
width: 702rpx;
height: 68rpx;
background: #1969F9;
border-radius: 10rpx;
font-size: 28rpx;
color:#fff;
text-align: center;
line-height: 68rpx;
}
}
}
\ No newline at end of file
assets/css/confirm/pay.scss
.paypage{ .paypage{
padding-top: 88rpx;
padding-bottom: 100rpx;
.chead{
width: 100%;
height: 88rpx;
background: #FFFFFF;
position: fixed;
left:0rpx;
top:0rpx;
.icon{
font-size: 44rpx;
color:$uni-color999;
margin-left: 32rpx;
}
.titlesi{
color:$uni-color333;
font-size: 34rpx;
font-weight: 500;
width:650rpx;
text-align: center;
}
}
.tipbox{
padding:0 24rpx;
padding-top: 16rpx;
margin-bottom: 42rpx;
.tips{
width: 702rpx;
height: 60rpx;
line-height: 30rpx;
background: #FFF8F2;
border-radius: 0rpx 30rpx 30rpx 30rpx;
padding:0 24rpx;
box-sizing: border-box;
color:#F98119;
font-size: 22rpx;
.icon{font-size: 32rpx;margin-right: 16rpx;}
}
}
.f9{
color:$uni-color999;
font-size: 22rpx;
.icon-jt{
font-size: 28rpx;
position: relative;
}
}
.totalprice{
font-size: 32rpx;
color:$uni-color333;
font-weight: 600;
margin-top: 16rpx;
margin-bottom: 16rpx;
text{
font-size: 52rpx;
}
}
.paybox{
padding:0 24rpx;
padding-top: 56rpx;
.tit{
font-size: 24rpx;
color:$uni-color666;
font-weight: 600;
margin-bottom: 24rpx;
}
.paytype{
border-radius: 10rpx;
background: #fff;
.payitem{
height:96rpx;
padding:0 24rpx;
image{
width:56rpx;
height:56rpx;
margin-right: 16rpx;
}
.paytext{
font-size: 26rpx;
font-weight: 600;
color:$uni-color666;
}
.icon-xzs{
color:$uni-color999;
}
.noxz{
width:32rpx;
height:32rpx;
box-sizing: border-box;
border-radius: 32rpx;
border:1rpx solid #c2c4cc;
}
.icon-xzs{
color:$uni-coloract;
display: none;
}
&.act{
.icon-xzs{
display: flex;
}
.noxz{
display: none;
}
}
}
}
}
.payfoot{
width: 100%;
position: fixed;
left:0rpx;
bottom: 0rpx;
height: 100rpx;
background: #FFFFFF;
box-shadow: 0rpx -4rpx 20rpx 0rpx rgba(198,199,204,0.1);
border-radius: 10rpx 10rpx 0rpx 0rpx;
view{
width: 702rpx;
height: 68rpx;
background: #1969F9;
border-radius: 10rpx;
font-size: 28rpx;
color:#fff;
text-align: center;
line-height: 68rpx;
}
}
} }
\ No newline at end of file
pages.json
...@@ -59,6 +59,12 @@ ...@@ -59,6 +59,12 @@
"navigationBarTitleText": "猎芯收银台" "navigationBarTitleText": "猎芯收银台"
} }
}, },
{
"path": "pages/confirm/offline",
"style": {
"navigationBarTitleText": "转账支付"
}
},
{ {
"path": "pages/confirm/confirmSuccess", "path": "pages/confirm/confirmSuccess",
"style": { "style": {
......
pages/confirm/offline.vue 0 → 100644
<template>
<view class="offlinepage">
<view class="chead row verCenter">
<text v-back class="icon iconfont icon-arrleft"></text>
<view class="titlesi">转账支付</view>
</view>
<view class="tipbox">
<view class="tips row ">
<text class="icon iconfont icon-ts"></text>
<view>
<view>温馨提示：</view>
<view>1.请您在“用途栏”中注明订单号及汇款金额，以便于我们及时确认付款。</view>
<view>2.请及时与交易员联系，核实款项到账情况。</view>
</view>
</view>
</view>
<view class="offlineinfo">
<view class="isitem">
<view class="t1 row bothSide verCenter">
<text>线下汇款账号</text>
<view><text class="icon iconfont icon-juxing3"></text>复制</view>
</view>
<view class="t2">
<view class="row">公司名称：<text>深圳市猎芯科技有限公司</text></view>
<view class="row">开户银行：<text>交通银行深圳梅林支行</text></view>
<view class="row">银行账号：<text>4438 9999 10 1000 35</text></view>
</view>
</view>
<view class="isitem" style="display:none;">
<view class="t1 row bothSide verCenter">
<text>线下汇款账号</text>
<view><text class="icon iconfont icon-juxing3"></text>复制</view>
</view>
<view class="t2">
<view class="row">公司名称：<text>深貿電子有限公司</text></view>
<view class="row">开户银行：<text>汇丰银行</text></view>
<view class="row">银行账号：<text>819-846593-838</text></view>
</view>
</view>
</view>
<view class="payfoot row verCenter rowCenter">
<view>已转账，通知交易员</view>
</view>
</view>
</template>
<script>
export default {
data() {
return {
}
},
methods: {
}
}
</script>
<style scoped lang="scss">
@import '../../assets/css/confirm/offline.scss';
</style>
pages/confirm/pay.vue
...@@ -4,8 +4,53 @@ ...@@ -4,8 +4,53 @@
<text v-back class="icon iconfont icon-arrleft"></text> <text v-back class="icon iconfont icon-arrleft"></text>
<view class="titlesi">猎芯收银台</view> <view class="titlesi">猎芯收银台</view>
</view> </view>
<view class="tipbox">
<view class="tips row verCenter">
<text class="icon iconfont icon-ts"></text>
订单审核通过，请尽快付款！支付剩余时间： 6天23时
</view>
</view>
<view class="f9 row rowCenter">应付金额</view>
<view class="totalprice row rowCenter verCenter">
<view>￥</view>
<text>2970.68</text>
</view>
<view class="f9 row rowCenter">
订单号: <navigator url="/user/orderdetail">12023042144164SZ <text class="icon iconfont icon-jt"></text></navigator>
</view>
<view class="paybox">
<view class="tit">支付方式</view>
<view class="paytype">
<view class="payitem row verCenter bothSide act">
<view class="row verCenter">
<image src="https://img.ichunt.com/images/ichunt/202305/22/37c698b7a03541af811f229df7c140ba.png"></image>
<text class="paytext">微信支付</text>
</view>
<text class="noxz"></text>
<text class="icon iconfont icon-xzs"></text>
</view>
<view class="payitem row verCenter bothSide">
<view class="row verCenter">
<image src="https://img.ichunt.com/images/ichunt/202305/22/e9c92965e9308d16bd3c3dd4f387cedc.png"></image>
<text class="paytext">支付宝支付</text>
</view>
<text class="noxz"></text>
<text class="icon iconfont icon-xzs"></text>
</view>
<view class="payitem row verCenter bothSide">
<view class="row verCenter">
<image src="https://img.ichunt.com/images/ichunt/202305/22/ff00d191bb8ea08f34123f38e0217df6.png"></image>
<text class="paytext">转账支付</text>
</view>
<text class="noxz"></text>
<text class="icon iconfont icon-xzs"></text>
</view>
</view>
</view>
<view class="payfoot row verCenter rowCenter">
<view>确认支付</view>
</view>
</view> </view>
</template> </template>
......
router/index.js
...@@ -86,6 +86,13 @@ const router = new Router({ ...@@ -86,6 +86,13 @@ const router = new Router({
title: '猎芯收银台' title: '猎芯收银台'
} }
}, },
{
path: '/pages/confirm/offline',
aliasPath: '/pay/offline',
meta: {
title: '转账支付'
}
},
{ {
path: '/pages/confirm/confirmSuccess', path: '/pages/confirm/confirmSuccess',
aliasPath: '/order/success', aliasPath: '/order/success',
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or sign in to comment