封装完成扫码弹窗，并测试通过

custom_widgets/scandialog/scandialog.acss

 /* position: absolute 加上 left:0rpx;top:0rpx;即可突破原来限制，显示在父控件的顶部位置 */
 popUpScanBg{
   /* 阴影，全屏 */
+  display: flex;
+  flex-direction: column;
   position: absolute;
   width: 100%;
   height: 100%;
-  background-color: rgba(0, 0, 0, 0.65) ;
   left: 0rpx;
   top: 0rpx;
 
 }
 
 .popUpScan{
-  position: relative;
+  position: absolute;
   margin-top: 286rpx;
   height: 100%;
   width: 100%;
+  left:0rpx;
+  top:0rpx;
   background-color: #ffffff;
   border-radius:8rpx 8rpx 0px 0px;
 }

custom_widgets/scandialog/scandialog.axml

-<view class="popUpScanBg"  >
+<view class="popUpScanBg"  a:if="{{dialogDisplay >= show}}">
+  <!-- 灰黑色背景 -->
+  <view style="position:absolute;width:100%;height:100%;left:0rpx;top:0rpx;background-color: rgba(0, 0, 0, 0.65);background-size:100% 100%;"/>
   
   <view class="popUpScan">
-      <image class="close" mode="aspectFit" src="/images/icon_dialog_cancel.png"/>
+    <image class="close" mode="aspectFit" src="/images/icon_dialog_cancel.png" onTap="dialogClose"/>
 
     <!-- 初始状态 -->
-      <view onTap="scanDialogLoading" style="display:flex;flex-direction:column;" a:if="{{dialogDisplay == show}}">
+    <view 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>
-
+    <!-- loading -->
     <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 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;">{{loadingText}}</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 class="resultSuccessRemind">{{resultSuccessRemind}}</view>
+      <view class="resultText">{{resultSuccessText}}</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 class="resultFailedRemind">{{resultFailureRemind}}</view>
+      <view class="resultText">{{resultFailureText}}</view>
     </view>
   </view>
+</view>
 

custom_widgets/scandialog/scandialog.js

 Component({
   mixins: [],// minxin 方便复用代码
   data: {
+    show: 1,
+    loading: 2,
+    resultSuccess: 3,
+    resultFailed: 4,
+
+    dialogDisplay:0,
 
   },// 组件内部数据
   props: {
     remindText: "",
-    warningText:"",
+    // warningText:"",
     loadingText: "",
+    resultSuccessRemind:"",
     resultSuccessText:"",
+    resultFailureRemind:"",
     resultFailureText:"",
-    resultText:"",
 
-    statusIdle: 1,//初始状态
-    statusProgress:2,//loading状态
-    statusSuccessResult:3,//成功状态
-    statusFailedResult:4,//失败状态
-    currentStatus:1 //当前状态
+    displayDialog: 0,
+    
 
   },// 可给外部传入的属性添加默认值
   didMount() {
   },// 生命周期函数,加载成功
   didUpdate() {},//刷新
   didUnmount() {},//生命周期
+  deriveDataFromProps(nextProps) { // 组件创建时触发或更新时触发
+    this.setData({
+        dialogDisplay:nextProps.displayDialog
+      }
+    )
+    console.log(" deriveDataFromProps", nextProps, this.props, this.data);
+  },
   methods: {// 自定义方法
 
+    dialogClose(){
+      //隐藏
+      this.props.dialogDisplay = 0;
 
+    },
 
   },
 });
\ No newline at end of file

pages/home/home.axml

 <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 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%;"/>
 
+    <scandialog displayDialog="{{scanDialogDisplay}}"
+      remindText="请扫描订单编码"
+      loadingText="识别中"
+      resultSuccessRemind="退款成功"
+      resultSuccessRemind="退款完成！会在1~2个工作日 返还到您的付款账户"
+      resultFailureRemind="退款失败"
+      resultFailureText="核销失败！无效的订单码"
+      onTap="onTapScanDialog"
+    />
 
 </view>
\ No newline at end of file

pages/home/home.js

 Page({
   data: {
-    dialogDisplay: 0,
-    show: 1,
-    loading: 2,
-    resultSuccess: 3,
-    resultFailed: 4
+    scanDialogDisplay:0
   },
   
   onLoad() {
@@ -32,6 +28,13 @@ Page({
       });
   },
 
+  //显示弹窗，>1为显示，2loading 3 result success 4 result failed
+  showDialog(){
+    this.setData(
+          this.data.scanDialogDisplay = this.data.scanDialogDisplay+1
+        )
+  }
+
 
 
 });