增加自定义弹窗，UI调整完毕，并调通部分控制逻辑

app.json

 {
   "pages": [
+
+    "pages/home/home",
     "pages/paysuccess/paysuccess",
     "pages/balance/balance",
     "pages/scan/scan",
-    "pages/home/home",
     "pages/login/login",
     "pages/index/index"
   ],

custom_widgets/scandialog/scandialog.acss

-page {
-  display: flex;
-  flex-direction: column;
-  /* background-color: #ff7f30; */
+/* position: absolute 加上 left:0rpx;top:0rpx;即可突破原来限制，显示在父控件的顶部位置 */
+popUpScanBg{
+  /* 阴影，全屏 */
+  position: absolute;
   width: 100%;
   height: 100%;
+  background-color: rgba(0, 0, 0, 0.65) ;
+  left: 0rpx;
+  top: 0rpx;
+
+}
+
+.popUpScan{
+  position: relative;
+  margin-top: 286rpx;
+  height: 100%;
+  width: 100%;
+  background-color: #ffffff;
+  border-radius:8rpx 8rpx 0px 0px;
 }
 
-.dialog {
-  width: 750rpx;
-  height: 76%;
-  color: white;
-  font-size: 66rpx;
-  background-color: white;
-  /* border: 2px solid red; */
+.close{
+  position: absolute;
+  right: 31rpx;
+  top: 31rpx;
+  width: 28rpx;
+  height: 28rpx;
 }
 
-.scanRemindIcon {
+.scanRemindText{
+  text-align: center;
+  font-size:38rpx;
+  font-family:PingFangSC-Medium,PingFang SC;
+  font-weight:500;
+  color:rgba(0,0,0,0.85);
+  line-height:45rpx;
+  margin-top: 84rpx;
+}
+
+.scanRemindIcon{
+  position: relative;
+  margin-top: 63rpx;
   width: 659rpx;
-  height: 604rpx;
-  margin-top: 192rpx;
+  height: 605rpx;
   margin-left: 34rpx;
 }
-.scanRemindText {
-  font-size: 38rpx;
-  color: #D9000000;
+
+.resultContainer{
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  top: 0rpx;
+  left: 0rpx;
+  width: 100%;
+  height: 100%;
+  box-sizing: border-box;
+}
+
+.resultIcon{
+  width: 135rpx;
+  height: 135rpx;
+  margin-top: 236rpx;
+}
+.resultSuccessRemind{
+  text-align: center;
+  font-size:41rpx;
+  font-family:PingFangSC-Medium,PingFang SC;
+  font-weight:500;
+  color:rgba(0,122,255,1);
+  line-height:41rpx;
+  margin-top: 28rpx;
+}
+
+.resultFailedRemind{
+  text-align: center;
+  font-size:41rpx;
+  font-family:PingFangSC-Medium,PingFang SC;
+  font-weight:500;
+  color:rgba(255,0,0,1);
+  line-height:41rpx;
+  margin-top: 28rpx;
+}
+
+.resultText{
+  font-size:34rpx;
+  font-family:PingFangSC-Regular,PingFang SC;
+  font-weight:400;
+  color:rgba(91,105,129,1);
+  line-height:34rpx;
+  text-align: center;
+  margin-top: 30rpx;
+  margin-left: 164rpx;
+  margin-right: 164rpx;
 }
-.close{
-  width: 28rpx;
-  height: 28rpx;
-}
\ No newline at end of file

custom_widgets/scandialog/scandialog.axml

-<popup show="{{showBottom}}" position="bottom" onClose="onPopupClose" >
-  <view class="dialog">
-    <!-- 图片 -->
-    <view class="scanRemindIcon">
-        <image mode="scaleToFill" src="/images/icon_scan_remind"/>
-    </view>
-    <!-- x -->
-    <view class="close">
-      <image mode="scaleToFill" src="/images/icon_dialog_cancel"/>
-    </view>
-    <view class="scanRemindText">请扫描会员码支付</view>
-    <view class="scanRemindError">该付款码无法识别，请重新扫描</view>
-    <view class=""> </view>
+<view class="popUpScanBg"  >
+
+    <view class="popUpScan">
+      <image class="close" mode="aspectFit" src="/images/icon_dialog_cancel.png"/>
+
+      <!-- 初始状态 -->
+      <view onTap="scanDialogLoading" style="display:flex;flex-direction:column;" a:if="{{dialogDisplay == show}}">
+        <view class="scanRemindText">{{remindText}}</view>
+        <!-- 图片 -->
+        <image class="scanRemindIcon" mode="aspectFit" src="/images/icon_scan_remind.png"/>   
+        <!-- x -->
+      </view>
 
+      <view style="position:absolute;width:100%;height:100%;display:flex;flex-direction:column;align-items:center;" a:if="{{dialogDisplay == loading}}" >
+        <image mode="aspectFit" src="/images/icon_dialog_loading.png"  style="position:relative;top:307rpx;width:239rpx;height:239rpx;margin:0 auto;"/>
+        <view style="position:absolute;font-size:38rpx;font-family:PingFangSC-Medium,PingFang SC;font-weight:500;color:rgba(0,0,0,0.85);line-height:45rpx;margin-top:404rpx;align-text:center;">支付中</view>
+      </view>
+
+      <view class="resultContainer" a:if="{{dialogDisplay == resultSuccess}}">
+        <image class="resultIcon" mode="aspectFit" src="/images/icon_success.png"/>
+        <view class="resultSuccessRemind">退款成功</view>
+        <view class="resultText">退款完成！会在1~2个工作日 返还到您的付款账户</view>
+      </view>
+
+      <view class="resultContainer" a:if="{{dialogDisplay == resultFailed}}">
+        <image class="resultIcon" mode="aspectFit" src="/images/icon_failed.png"/>
+        <view class="resultFailedRemind">退款失败</view>
+        <view class="resultText">核销失败！无效的订单码</view>
+      </view>
+    </view>
   </view>
-</popup>
+

pages/balance/balance.acss

@@ -5,6 +5,7 @@ page{
   width: 100%;
   height: 100%;
   align-items: center;
+  box-sizing: border-box;
 }
 
 .goodsRemind{
@@ -45,4 +46,4 @@ page{
   line-height:34rpx;
   margin-top: 28rpx;
   text-align: center;
-}
\ No newline at end of file
+}

pages/balance/balance.axml

@@ -27,18 +27,6 @@
     </view>
   </view>
 
-<!-- 测试popup是否好用，能用，适合用。 -->
-  <popup show="{{qrPayShow}}" position="bottom">
-    <!-- 图片 -->
-    <view class="scanRemindIcon">
-        <image mode="scaleToFill" src="/images/icon_scan_remind"/>
-    </view>
-    <!-- x -->
-    <view class="close">
-      <image mode="scaleToFill" src="/images/icon_dialog_cancel"/>
-    </view>
-    <view class="scanRemindText">请扫描会员码支付</view>
-    <view class="scanRemindError">该付款码无法识别，请重新扫描</view>
-    <view class=""> </view>
-  </popup>
+
+
 </view>
\ No newline at end of file

pages/balance/balance.js

@@ -15,10 +15,9 @@ Page({
   qrPay(){
     //todo 这里增加唤起弹窗的逻辑
     this.setData({
-      qrPayShow:true,
+      qrPayShow:true
     });
-  }
+  },
 
 
-  
 });

pages/home/home.acss

 page{
   display: flex;
   flex-direction: column;
-  background: url("/images/bg_home.png")no-repeat fixed top;
-  background-size: 100% 100%;
   width: 100%;
   height: 100%;
   align-items: center;
@@ -14,4 +12,4 @@ page{
   height: 430rpx;
   margin: 0 auto;
   margin-top: 38rpx;
-}
\ No newline at end of file
+}

pages/home/home.axml

-<view class="page" onTap="homeTap">
+<view class="page" >
+  <view style="position:absolute;width:100%;height:100%;left:0rpx;top:0rpx;background:url(/images/bg_home.png) no-repeat fixed top;background-size:100% 100%;" onTap="homeTap"/>
+  
+  <scandialog/>
+
 
 </view>
\ No newline at end of file

pages/home/home.js

 Page({
   data: {
-
-
+    dialogDisplay: 0,
+    show: 1,
+    loading: 2,
+    resultSuccess: 3,
+    resultFailed: 4
   },
   
   onLoad() {
@@ -21,10 +24,14 @@ Page({
       
     // }
   },
+
   homeTap(){
     //FIXME 这里是跳转到新的界面
     my.navigateTo({
         url: "/pages/balance/balance"
       });
-  }
+  },
+
+
+
 });