Skip to content

D
doublescreen-back
Commit 0e4b3902 authored by pengguangpu's avatar pengguangpu
Browse files
Options

调整支付结果页样式；完善布局细节；

parent dd1a96a7
Hide whitespace changes
Inline Side-by-side
Showing with 109 additions and 93 deletions
app.json
View file @ 0e4b3902
{
"pages": [
"pages/index/index",
"pages/payresult/payresult",
"pages/printlastorder/printlastorder",
"pages/poster/poster",
"pages/home/home",
"pages/poster/poster",
"pages/waitoperate/waitoperate",
"pages/landscan/landscan",
"pages/payresult/payresult"
"pages/landscan/landscan"
],
"window": {
"defaultTitle": "",
......
pages/index/index.acss
View file @ 0e4b3902
......@@ -106,16 +106,25 @@
*/
.topView {
position: relative;
width: 768rpx;
.payResultPage {
display: flex;
flex-direction: column;
width: 100%;
height: 100%;
position: absolute;
}
.payResultTopView {
position: absolute;
top: 0rpx;
width: 100%;
height: 60rpx;
background: #ffffff;
box-shadow: 0rpx 2rpx 7rpx 0rpx rgba(153, 153, 153, 0.16);
/* border: 2px solid red; */
}
.backButton {
.payResultBackButton {
color: #333333;
font-size: 19rpx;
line-height: 60rpx;
......@@ -126,14 +135,16 @@
position: relative;
}
.bottomView {
.payResultBottomView {
position: relative;
width: 100%;
height: 372rpx;
height: 100%;
margin-top: 60rpx;
/* border: 2px solid red; */
box-sizing: border-box;
}
.leftView {
.payResultLeftView {
display: flex;
position: absolute;
left: 0rpx;
......@@ -141,11 +152,11 @@
width: 406rpx;
flex-direction: column;
align-items: center;
height: 372rpx;
height: 100%;
/* border: 2px solid red; */
}
.rightView {
.payResultRightView {
display: flex;
right: 0rpx;
top: 0rpx;
......@@ -154,7 +165,7 @@
align-items: center;
width: 362rpx;
background: #ffffff;
height: 372rpx;
height: 100%;
/* border: 2px solid red; */
}
......
pages/index/index.axml
View file @ 0e4b3902
......@@ -223,58 +223,60 @@
</view>
<!--支付结果页-->
<view hidden="{{!pageShow['payresult']}}">
<!--top view-->
<view class="topView">
<!--back button-->
<view class="backButton" hidden="true">
<image mode="aspectFit" style="position:absolute;width:11rpx;height:17rpx;left: 18rpx;top:22rpx;" src="/images/icon_back.png"/>
<text>返回</text>
</view>
</view>
<!--bottom view-->
<view class="bottomView">
<!--left view-->
<view class="leftView">
<block a:if="{{isPaySuccess}}">
<!--支付成功-->
<image mode="aspectFit" style="width:101rpx;height:101rpx;margin-top:43rpx;" src="/images/icon_success.png"/>
<text style="font-size:26rpx;color:#007AFF;font-weight:bold;margin-top:14rpx;">收款成功</text>
<text style="font-size:48rpx;color:#000000;font-weight:bold;margin-top:48rpx;text-align:center;">￥{{payPriceYuan}}</text>
</block>
<block a:else>
<!--错误按钮-->
<image mode="aspectFit" style="width:101rpx;height:101rpx;margin-top:43rpx;" src="/images/icon_failed.png"/>
<text style="font-size:26rpx;color:#FF0000;font-weight:bold;margin-top:14rpx;">收款失败</text>
<text style="font-size:19rpx;color:#000000;margin-top:24rpx;width:292rpx;text-align:center;">失败原因：{{payFailedReason}}</text>
</block>
</view>
<!--right view-->
<view class="rightView">
<block a:if="{{isPaySuccess}}">
<!--支付成功-->
<text style="font-size:26rpx;color:#333333;font-weight:bold;margin-top:35rpx;">{{printResult}}</text>
<view style="position: relative;margin-top:17rpx;width:277rpx;height:196rpx;align-items: center;align-items: center;">
<image mode="aspectFit" style="position:absolute;width:277rpx;height:196rpx;" src="/images/bg_paper.png"/>
<view style="position: absolute;top:88rpx;text-align: center;align-items: center;width:277rpx;">
<block a:if="{{isPrintSuccess}}">
<text>提示顾客带好小票</text>
</block>
<block a:else>
<view hidden="{{isPrinting}}">
<button type="ghost" style="margin:0 auto;font-size:28rpx;height:40rpx;border-radius:20rpx;border-color:#FF7F19;color:#FF7F19;width:166rpx;" onTap="onReprint">重新打印</button>
</view>
</block>
<view class="payResultPage">
<!--bottom view-->
<view class="payResultBottomView">
<!--left view-->
<view class="payResultLeftView">
<block a:if="{{isPaySuccess}}">
<!--支付成功-->
<image mode="aspectFit" style="width:101rpx;height:101rpx;margin-top:43rpx;" src="/images/icon_success.png"/>
<text style="font-size:26rpx;color:#007AFF;font-weight:bold;margin-top:14rpx;">收款成功</text>
<text style="font-size:48rpx;color:#000000;font-weight:bold;margin-top:48rpx;text-align:center;">￥{{payPriceYuan}}</text>
</block>
<block a:else>
<!--错误按钮-->
<image mode="aspectFit" style="width:101rpx;height:101rpx;margin-top:43rpx;" src="/images/icon_failed.png"/>
<text style="font-size:26rpx;color:#FF0000;font-weight:bold;margin-top:14rpx;">收款失败</text>
<text style="font-size:19rpx;color:#000000;margin-top:24rpx;width:292rpx;text-align:center;">失败原因：{{payFailedReason}}</text>
</block>
</view>
<!--right view-->
<view class="payResultRightView">
<block a:if="{{isPaySuccess}}">
<!--支付成功-->
<text style="font-size:26rpx;color:#333333;font-weight:bold;margin-top:35rpx;">{{printResult}}</text>
<view style="position: relative;margin-top:17rpx;width:277rpx;height:196rpx;align-items: center;align-items: center;">
<image mode="aspectFit" style="position:absolute;width:277rpx;height:196rpx;" src="/images/bg_paper.png"/>
<view style="position: absolute;top:88rpx;text-align: center;align-items: center;width:277rpx;">
<block a:if="{{isPrintSuccess}}">
<text>提示顾客带好小票</text>
</block>
<block a:else>
<view hidden="{{isPrinting}}">
<button type="ghost" style="margin:0 auto;font-size:28rpx;height:40rpx;border-radius:20rpx;border-color:#FF7F19;color:#FF7F19;width:166rpx;line-height:40rpx;text-align:center;font-size:24rpx;" onTap="onReprint">重新打印</button>
</view>
</block>
</view>
</view>
</view>
<view hidden="{{isPrinting}}">
<button type="primary" style="height:60rpx;margin-top:8rpx;border-radius:5rpx;background-color:#007AFF;border-color:#007AFF;opacity: 0.7;width:252rpx;" hover-class="loginButtonHover" onTap="onNextPayFromPayResult">继续付款</button>
</view>
</block>
<block a:else>
<text style="font-size:26rpx;color:#333333;font-weight:bold;margin-top:35rpx;">请重新支付...</text>
<image mode="aspectFit" style="width:166rpx;height:143rpx;margin-top:39rpx;" src="/images/img_scan_guide.png"/>
<button type="primary" style="height:60rpx;margin-top:32rpx;border-radius:5rpx;background-color:#007AFF;border-color:#007AFF;opacity: 0.7;width:252rpx;" hover-class="loginButtonHover" onTap="">重新付款</button>
</block>
<view hidden="{{isPrinting}}">
<button type="primary" style="height:60rpx;margin-top:8rpx;border-radius:5rpx;background-color:#007AFF;border-color:#007AFF;opacity: 0.7;width:252rpx;line-height:60rpx;text-align:center;font-size:24rpx;" size="mini" hover-class="loginButtonHover" onTap="onNextPayFromPayResult">继续付款</button>
</view>
</block>
<block a:else>
<text style="font-size:26rpx;color:#333333;font-weight:bold;margin-top:35rpx;">请重新支付...</text>
<image mode="aspectFit" style="width:166rpx;height:143rpx;margin-top:39rpx;" src="/images/img_scan_guide.png"/>
<button type="primary" style="height:60rpx;margin-top:32rpx;border-radius:5rpx;background-color:#007AFF;border-color:#007AFF;opacity: 0.7;width:252rpx;" hover-class="loginButtonHover" onTap="">重新付款</button>
</block>
</view>
</view>
<!--top view-->
<view class="payResultTopView">
<!--back button-->
<view class="payResultBackButton" hidden="true">
<image mode="aspectFit" style="position:absolute;width:11rpx;height:17rpx;left: 18rpx;top:22rpx;" src="/images/icon_back.png"/>
<text>返回</text>
</view>
</view>
</view>
</view>
......
pages/index/index.js
View file @ 0e4b3902
......@@ -32,7 +32,7 @@ Page({
"printlastorder": false,
},
// 前屏是否完成登录
isFrontScreenLoginOK: true,
isFrontScreenLoginOK: false,
flowType: "", //流程类型：用于区分易混淆的流程，以及共同界面使用时用该标识位作为区分
storeName: "--",
/**支付结果页相关参数 */
......@@ -40,7 +40,7 @@ Page({
isPaySuccess: true,
payPriceYuan: "--.--",
printResult: "正在打印小票...",
isPrinting: false,
isPrinting: true,
isPrintSuccess: false,
payPriceFen: 0,
/**商品扫码页相关参数 */
......
pages/payresult/payresult.acss
View file @ 0e4b3902
page {
.payResultPage {
display: flex;
flex-direction: column;
width: 100%;
height: 100%;
align-items: center;
background: #F3F7F9;
position: absolute;
}
.topView {
position: relative;
width: 768rpx;
.payResultTopView {
position: absolute;
top: 0rpx;
width: 100%;
height: 60rpx;
background: #ffffff;
box-shadow: 0rpx 2rpx 7rpx 0rpx rgba(153, 153, 153, 0.16);
/* border: 2px solid red; */
}
.backButton {
.payResultBackButton {
color: #333333;
font-size: 19rpx;
line-height: 60rpx;
......@@ -26,14 +27,16 @@ page {
position: relative;
}
.bottomView {
.payResultBottomView {
position: relative;
width: 100%;
height: 372rpx;
height: 100%;
margin-top: 60rpx;
/* border: 2px solid red; */
box-sizing: border-box;
}
.leftView {
.payResultLeftView {
display: flex;
position: absolute;
left: 0rpx;
......@@ -41,11 +44,11 @@ page {
width: 406rpx;
flex-direction: column;
align-items: center;
height: 372rpx;
height: 100%;
/* border: 2px solid red; */
}
.rightView {
.payResultRightView {
display: flex;
right: 0rpx;
top: 0rpx;
......@@ -54,6 +57,6 @@ page {
align-items: center;
width: 362rpx;
background: #ffffff;
height: 372rpx;
height: 100%;
/* border: 2px solid red; */
}
\ No newline at end of file
pages/payresult/payresult.axml
View file @ 0e4b3902
<view class="page">
<!--top view-->
<view class="topView">
<!--back button-->
<view class="backButton">
<image mode="aspectFit" style="position:absolute;width:11rpx;height:17rpx;left: 18rpx;top:22rpx;" src="/images/icon_back.png"/>
<text>返回</text>
</view>
</view>
<view class="payResultPage">
<!--bottom view-->
<view class="bottomView">
<view class="payResultBottomView">
<!--left view-->
<view class="leftView">
<view class="payResultLeftView">
<block a:if="{{isPaySuccess}}">
<!--支付成功-->
<image mode="aspectFit" style="width:101rpx;height:101rpx;margin-top:43rpx;" src="/images/icon_success.png"/>
......@@ -25,7 +17,7 @@
</block>
</view>
<!--right view-->
<view class="rightView">
<view class="payResultRightView">
<block a:if="{{isPaySuccess}}">
<!--支付成功-->
<text style="font-size:26rpx;color:#333333;font-weight:bold;margin-top:35rpx;">{{printResult}}</text>
......@@ -37,13 +29,13 @@
</block>
<block a:else>
<view hidden="{{isPrinting}}">
<button type="ghost" style="height:40rpx;margin:0 auto;border-radius:20rpx;border-color:#FF7F19;color:#FF7F19;width:166rpx;" hover-class="loginButtonHover" onTap="onReprint">重新打印</button>
<button type="ghost" style="margin:0 auto;font-size:28rpx;height:40rpx;border-radius:20rpx;border-color:#FF7F19;color:#FF7F19;width:166rpx;line-height:40rpx;text-align:center;font-size:24rpx;" onTap="onReprint">重新打印</button>
</view>
</block>
</view>
</view>
<view hidden="{{isPrinting}}">
<button type="primary" style="height:60rpx;margin-top:8rpx;border-radius:5rpx;background-color:#007AFF;border-color:#007AFF;opacity: 0.7;width:252rpx;" hover-class="loginButtonHover" onTap="">继续付款</button>
<button type="primary" style="height:60rpx;margin-top:8rpx;border-radius:5rpx;background-color:#007AFF;border-color:#007AFF;opacity: 0.7;width:252rpx;line-height:60rpx;text-align:center;font-size:24rpx;" size="mini" hover-class="loginButtonHover" onTap="onNextPayFromPayResult">继续付款</button>
</view>
</block>
<block a:else>
......@@ -53,4 +45,12 @@
</block>
</view>
</view>
<!--top view-->
<view class="payResultTopView">
<!--back button-->
<view class="payResultBackButton" hidden="true">
<image mode="aspectFit" style="position:absolute;width:11rpx;height:17rpx;left: 18rpx;top:22rpx;" src="/images/icon_back.png"/>
<text>返回</text>
</view>
</view>
</view>
\ No newline at end of file
pages/payresult/payresult.js
View file @ 0e4b3902
......@@ -8,7 +8,7 @@ Page({
payPriceYuan: "--.--",
printResult: "正在打印小票...",
isPrinting: false,
isPrintSuccess: true,
isPrintSuccess: false,
},
onLoad() { },
......
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 to comment