页面串联起来+代码合并

app.json

@@ -4,8 +4,7 @@
     "pages/paysuccess/paysuccess",
     "pages/balance/balance",
     "pages/scan/scan",
-    "pages/home/home",
-    "pages/index/index"
+    "pages/home/home"
   ],
   "window": {
     "defaultTitle": ""

custom_widgets/scandialog/scandialog.acss

-page {
+/* position: absolute 加上 left:0rpx;top:0rpx;即可突破原来限制，显示在父控件的顶部位置 */
+popUpScanBg{
+  /* 阴影，全屏 */
   display: flex;
   flex-direction: column;
-  /* background-color: #ff7f30; */
+  position: absolute;
   width: 100%;
   height: 100%;
+  left: 0rpx;
+  top: 0rpx;
+
+}
+
+.popUpScan{
+  position: absolute;
+  margin-top: 286rpx;
+  height: 100%;
+  width: 100%;
+  left:0rpx;
+  top:0rpx;
+  background-color: #ffffff;
+  border-radius:8rpx 8rpx 0px 0px;
+}
+
+.close{
+  position: absolute;
+  right: 31rpx;
+  top: 31rpx;
+  width: 28rpx;
+  height: 28rpx;
 }
 
-.dialog {
-  width: 750rpx;
-  height: 76%;
-  color: white;
-  font-size: 66rpx;
-  background-color: white;
-  /* border: 2px solid red; */
+.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 {
+.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;
 }
-.close{
-  width: 28rpx;
-  height: 28rpx;
+.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;
 }

custom_widgets/scandialog/scandialog.axml

-<popup show="{{showBottom}}" position="bottom" onClose="onPopupClose" >
-  <view class="dialog">
+<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" onTap="dialogClose"/>
+
+    <!-- 初始状态 -->
+    <view style="display:flex;flex-direction:column;" a:if="{{dialogDisplay == show}}">
+      <view class="scanRemindText">{{remindText}}</view>
       <!-- 图片 -->
-    <view class="scanRemindIcon">
-        <image mode="scaleToFill" src="/images/icon_scan_remind"/>
-    </view>
+      <image class="scanRemindIcon" mode="aspectFit" src="/images/icon_scan_remind.png"/>   
       <!-- x -->
-    <view class="close">
-      <image mode="scaleToFill" src="/images/icon_dialog_cancel"/>
     </view>
-    <view class="scanRemindText">请扫描会员码支付</view>
-    <view class="scanRemindError">该付款码无法识别，请重新扫描</view>
-    <view class=""> </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;">{{loadingText}}</view>
     </view>
-</popup>
+    <!-- 结果页面-成功 -->
+    <view class="resultContainer" a:if="{{dialogDisplay == resultSuccess}}">
+      <image class="resultIcon" mode="aspectFit" src="/images/icon_success.png"/>
+      <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">{{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/balance/balance.acss

@@ -5,6 +5,7 @@ page{
   width: 100%;
   height: 100%;
   align-items: center;
+  box-sizing: border-box;
 }
 
 .goodsRemind{

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

@@ -34,10 +34,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;

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

pages/home/home.js

@@ -2,8 +2,7 @@ import { Page } from '../../utils/scan';
 
 Page({
   data: {
-
-
+    scanDialogDisplay:0
   },
   
   onLoad() {
@@ -23,6 +22,7 @@ Page({
       
     // }
   },
+
   homeTap(){
     //FIXME 这里是跳转到新的界面
     my.navigateTo({
@@ -30,6 +30,7 @@ Page({
       });
   },
 
+<<<<<<< HEAD
 
   //外接扫码枪事件
   onKeyPress(r) {
@@ -39,6 +40,14 @@ Page({
       url: "/pages/scan/scan?barcode=" + r,
     });
   },
+=======
+  //显示弹窗，>1为显示，2loading 3 result success 4 result failed
+  showDialog(){
+    this.setData(
+          this.data.scanDialogDisplay = this.data.scanDialogDisplay+1
+        )
+  }
+>>>>>>> b85311896b3b12a7e29afcc50be66f821096a0f3