style:新老系统切换

myPages/systemSwitch/index.rpx.scss

@@ -0,0 +1,317 @@
+.h-content-step-end {
+  height: 300px;
+  text-align: center;
+  padding-top: 60px;
+  font-family: PingFangSC-Regular, PingFang SC;
+
+  .h-success {
+    margin: 0 auto;
+    display: flex;
+    justify-content: center;
+    height: 80px;
+    width: 80px;
+    background: #f7fbf3;
+    border-radius: 40px;
+  }
+
+  .h-name {
+    margin-top: 20px;
+    height: 22px;
+    font-size: 14px;
+    font-weight: 400;
+    color: #666666;
+    line-height: 22px;
+  }
+  .btn1{
+    margin: 0 auto;
+    margin-top: 40px;
+    width: 240rpx;
+    height: 84rpx;
+    background: #EEEEEE;
+    border-radius: 54rpx;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    font-size: 14px;
+  }
+
+  .h-btn {
+    margin: 0 auto;
+    margin-top: 40px;
+    width: 319px;
+    height: 42px;
+    background: #FFE05C;
+    border-radius: 27px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    font-size: 14px;
+  }
+}
+
+.letter-commitment {
+  padding: 12px;
+  background: #fff;
+
+  .h-title {
+    text-align: center;
+    font-size: 14px;
+  }
+}
+
+.col-border-2 {
+  margin-top: 12px;
+
+  .sign-wrap {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    height: 120px;
+    background: #FFFFFF;
+  }
+}
+
+.sign-agree {
+  font-size: 14px;
+  font-weight: 400;
+  color: #666666;
+  line-height: 50px;
+  text-align: center;
+}
+
+.h-content-wrap {
+  background: #fff;
+  border-radius: 20rpx;
+  padding-left: 12px;
+  padding-right: 12px;
+}
+
+.h-content {
+  margin-bottom: 12px;
+  background-color: #fff;
+
+  .h-basic-info {
+    padding: 12px;
+    background: whitesmoke;
+    border-radius: 6px;
+    margin: 20rpx;
+
+    .h-value {
+      display: flex;
+      font-family: PingFangSC-Regular, PingFang SC;
+      font-size: 14px;
+      font-weight: 400;
+
+      .h-name {
+        width: 56px;
+        height: 22px;
+        color: #999999;
+        line-height: 22px;
+        margin-right: 12px;
+      }
+
+      .h-text {
+        height: 22px;
+        color: #333333;
+        line-height: 22px;
+      }
+    }
+  }
+
+  .h-record {
+    margin-top: 24rpx;
+
+    /* 服务订单内容*/
+    .service-order-tab-bar {
+      background: #FAFAFA;
+      display: flex;
+      justify-content: space-around;
+      height: 50px;
+
+
+      .service-order-tab-item {
+        flex: 1;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        font-size: 16px;
+        color: #333;
+        line-height: 26px;
+        margin: 10 rpx;
+        border-radius: 10 rpx;
+      }
+
+      .service-order-tab-item.active {
+        background-color: #fbe262;
+
+      }
+
+
+    }
+  }
+}
+
+.store-order-wrap {
+  padding: 12px;
+
+  .store-order {
+    background: #fff;
+    padding: 10px;
+    border-radius: 3px;
+    font-family: PingFangSC-Regular, PingFang SC;
+
+    .h-content {
+      .h-row {
+        display: flex;
+        justify-content: space-between;
+      }
+
+      .h-text {
+        font-size: 12px;
+        font-weight: 400;
+        color: #999999;
+        line-height: 20px;
+      }
+    }
+  }
+}
+
+.h-footer {
+  text-align: right;
+}
+
+.signature-wrap {
+  height: 120px;
+  width: 300px;
+}
+
+.step-bar {
+  padding: 12px;
+  display: flex;
+  justify-content: space-between;
+  margin-bottom: 20px;
+}
+
+.step {
+  position: relative;
+  /* width: 100%; */
+  // height: 40px;
+  /* background-color: #ccc; */
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: #fff;
+
+  height: 30px;
+  width: 30px;
+  background: green;
+  border-radius: 15px;
+  margin: 0 auto;
+}
+
+.h-num {
+  margin: 0 auto;
+}
+
+.head-ball {
+  transform: translateX(50%);
+  width: 60rpx;
+  height: 60rpx;
+  line-height: 60rpx;
+  border-radius: 30rpx;
+  background-color: #fbe362;
+  text-align: center;
+}
+
+.step.default {
+  color: #333;
+  background: #fff;
+}
+
+.step.active {
+  color: #333;
+  background: #FFE05C;
+}
+
+.separator {
+  position: absolute;
+  top: 50%;
+  left: 130%;
+  transform: translateY(-50%);
+  width: 50px;
+  height: 2px;
+  border: 1px dashed #000;
+}
+
+.form {
+  margin-bottom: 20px;
+  border-radius: 6px;
+}
+.button-popup {
+  height: 60px;
+  display: flex;
+  justify-content: space-between;
+  background: #fff;
+
+  .h-btn {
+    margin: 0 auto;
+    margin-top: 8px;
+    width: 240rpx;
+    height: 84rpx;
+    border-radius: 27px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    font-size: 14px;
+  }
+}
+
+.button-group {
+  height: 60px;
+  position: fixed;
+  bottom: 0px;
+  left: 0px;
+  right: 0px;
+  display: flex;
+  justify-content: space-between;
+  background: #fff;
+
+  .h-btn {
+    margin: 0 auto;
+    margin-top: 8px;
+    width: 200px;
+    height: 42px;
+    background: #FFE05C;
+    border-radius: 27px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    font-size: 14px;
+  }
+}
+
+.identifying-code {
+  image {
+    width: 80px;
+    height: 30px;
+  }
+}
+
+.popup-content {
+  width: 622rpx;
+  background-color: #FFFFFF;
+  border-radius: 20rpx;
+  padding: 24rpx;
+
+  .popupItem {
+    width: 558rpx;
+    height: 100rpx;
+    background-color: #FAFAFA;
+    border-radius: 16rpx;
+    margin:24rpx ;
+    display: flex;
+    align-items: center;
+    justify-content: space-around;
+  }
+}
+

myPages/systemSwitch/index.vue

@@ -1,9 +1,10 @@
 <template>
   <view class="container">
     <view class="step-bar">
-      <view >
+      <view>
         <view class="h-num">
-          <view class="head-ball" :style="currentStep == 0 ? 'background-color: #fbe362;':'background-color: #91d224;color:#FFFFFF' " >
+          <view class="head-ball"
+                :style="currentStep == 0 ? 'background-color: #fbe362;':'background-color: #91d224;color:#FFFFFF' ">
             <text>1</text>
           </view>
         </view>
@@ -12,9 +13,10 @@
       <view>
         <u-icon name="more-dot-fill" color="#cccccc" size="28"></u-icon>
       </view>
-      <view >
+      <view>
         <view class="h-num">
-          <view class="head-ball" :style="currentStep == 1 ? 'background-color: #fbe362;':(currentStep == 0? 'background-color: #FFFFFF' :'background-color: #91d224;color:#FFFFFF' )  " >
+          <view class="head-ball"
+                :style="currentStep == 1 ? 'background-color: #fbe362;':(currentStep == 0? 'background-color: #FFFFFF' :'background-color: #91d224;color:#FFFFFF' )  ">
             <text>2</text>
           </view>
         </view>
@@ -23,9 +25,9 @@
       <view>
         <u-icon name="more-dot-fill" color="#cccccc" size="28"></u-icon>
       </view>
-      <view >
+      <view>
         <view class="h-num">
-          <view class="head-ball" :style="currentStep == 2 ? 'background-color: #fbe362;':'background-color: #FFFFFF' " >
+          <view class="head-ball" :style="currentStep == 2 ? 'background-color: #fbe362;':'background-color: #FFFFFF' ">
             <text>3</text>
           </view>
         </view>
@@ -140,9 +142,9 @@
                     <view class="h-value">
                       <text class="h-text">{{ item.consumeTime }}</text>
                     </view>
-<!--                    <view class="h-value h-name">-->
-<!--                      <text class="h-text">账户余额：¥{{ item.nowBalance }}</text>-->
-<!--                    </view>-->
+                    <!--                    <view class="h-value h-name">-->
+                    <!--                      <text class="h-text">账户余额：¥{{ item.nowBalance }}</text>-->
+                    <!--                    </view>-->
                   </view>
                 </view>
                 <view class="custom-line"></view>
@@ -151,30 +153,6 @@
           </view>
         </view>
       </view>
-      <!--      <view v-if="currentStep === 2" class="">-->
-      <!--        <view class="letter-commitment">-->
-      <!--          <view class="h-title">-->
-      <!--            <text>个人信息真实承诺书</text>-->
-      <!--          </view>-->
-      <!--          <view class="">-->
-      <!--            <text>会员姓名：{{ userInfo.memberName }}</text>-->
-      <!--          </view>-->
-      <!--          <view class="">-->
-      <!--            <text>老系统手机号： {{ userInfo.phone }}</text>-->
-      <!--          </view>-->
-      <!--          <view class="">-->
-      <!--            <text>当前手机号： {{ userInfo.phonenumber }}</text>-->
-      <!--          </view>-->
-      <!--          <view class="">-->
-      <!--            <text>为系统迁移： 本人郑重承诺</text>-->
-      <!--          </view>-->
-      <!--          <view class="h-content">-->
-      <!--            <view class="" v-html="termOfService.aboutContent"></view>-->
-      <!--          </view>-->
-
-      <!--        </view>-->
-
-      <!--      </view>-->
     </view>
     <view v-if="currentStep === 2" class="">
       <view class="h-content-step-end">
@@ -192,16 +170,38 @@
     </view>
     <view v-if="currentStep == 0" class="button-group">
       <!-- <button @click="prevStep" :disabled="currentStep === 0">上一步</button> -->
-      <button class="h-btn" @click="nextStep(0)" :disabled="currentStep === steps.length - 1">开始查询</button>
+      <button class="h-btn" @click="open()" :disabled="currentStep === steps.length - 1">查询</button>
     </view>
-
-
     <view v-if="currentStep == 1" class="button-group">
-      <button @click="prevStep" :disabled="currentStep === 0">上一步</button>
+      <button class="h-btn" style="background-color: #EEEEEE;width: 240rpx" @click="prevStep" :disabled="currentStep === 0">上一步</button>
       <view class="h-btn" @click="nextStep(2)" :disabled="currentStep === steps.length - 1">
         <text>确认并迁移</text>
       </view>
     </view>
+    <!-- 普通弹窗 -->
+    <view>
+      <uni-popup ref="popup" :isMaskClick="false">
+        <view class="popup-content">
+          <text class="text" style="text-align: center">选择会员编号</text>
+          <view v-for="item in numberList"  >
+            <view class="popupItem" :class="item.isSelect"  @click="SelectItem(item.number)":style="item.nmbStatus == 1?'background-color: #93D21A;color:#FFFFFF': null">
+              <view>
+                <text>{{ item.number }}</text>
+              </view>
+              <view style="width:100rpx" >
+                <text v-if="item.nmbStatus == 1 " style="text-align: right">已找回</text>
+              </view>
+            </view>
+          </view>
+          <view class="button-popup">
+            <button class="h-btn" style="background-color: #EEEEEE;" @click="this.$refs.popup.close()" >取消</button>
+            <view class="h-btn" style="background-color: #FFE05C;" @click="nextStep(0)" :disabled="currentStep === steps.length - 1">
+              <text>确定</text>
+            </view>
+          </view>
+        </view>
+      </uni-popup>
+    </view>
   </view>
 </template>
 
@@ -214,7 +214,13 @@ export default {
   },
   data() {
     return {
+      isSelect:false,
+      isShow: true,
       showCanvas: false,
+      numberList:[
+        {number:'FJWOIU43294423',nmbStatus:0},
+        {number:'ASDFGH43294423',nmbStatus:1},
+        {number:'QWERTY43294423',nmbStatus:0}],
       currentStep: 0,
       steps: ['账户查询', '信息确认', '账户迁移'], // 步骤条的文字内容
       step1Value: '',
@@ -226,7 +232,7 @@ export default {
         memberName: '赵梓熠-测试',
         phonenumber: '18231041846',
         smsCode: '',
-        memberNo: "18902",
+        memberNo: "",
         type: 7,
         requstForm: true
       },
@@ -339,13 +345,13 @@ export default {
             trigger: ['blur', 'change'],
           }
         ],
-        // smsCode: {
-        //   required: true,
-        //   min: 4,
-        //   max: 6,
-        //   message: '请认真填写验证码',
-        //   trigger: ['blur', 'change'],
-        // },
+        smsCode: {
+          required: true,
+          min: 4,
+          max: 6,
+          message: '请认真填写验证码',
+          trigger: ['blur', 'change'],
+        },
       },
 
     };
@@ -379,6 +385,10 @@ export default {
   },
 
   methods: {
+    SelectItem(data){
+      console.log(data,'selectItem')
+    },
+
     // 关闭签名框
     closeCanvas() {
       this.showCanvas = false;
@@ -445,26 +455,26 @@ export default {
     },
     // 查询老会员系统数据
     getOldMember() {
-      // this.$api.getOldMember(this.userInfo).then((res) => {
-      //   if (!!res) {
-      //     this.userMemberInfo = res.data.data;
-      //     this.userInfo.memberNo = res.data.data.memberNo;
-      //   } else {
-      //     uni.$u.toast('未查询到数据');
-      //   }
-        // 查询充值记录
-        this.getOrderRechargeOldList();
+      this.$api.getOldMember(this.userInfo).then((res) => {
+        if (!!res) {
+          this.userMemberInfo = res.data.data;
+          this.userInfo.memberNo = res.data.data.memberNo;
+        } else {
+          uni.$u.toast('未查询到数据');
+        }
+      // 查询充值记录
+      this.getOrderRechargeOldList();
 
-        this.timer = setTimeout(() => {
-          if (this.currentStep < this.steps.length - 1) {
-            this.currentStep++;
-          }
-        }, 0)
-      // }).catch((res) => {
-      //   uni.showToast({
-      //     title: "操作失败"
-      //   })
-      // });
+      this.timer = setTimeout(() => {
+        if (this.currentStep < this.steps.length - 1) {
+          this.currentStep++;
+        }
+      }, 0)
+      }).catch((res) => {
+        uni.showToast({
+          title: "操作失败"
+        })
+      });
     },
     // 查询会员消费记录
     getOrderConsumeLogOld() {
@@ -501,8 +511,12 @@ export default {
         })
       });
     },
+    open(){
+      this.$refs.popup.open()
+    },
     nextStep(idx) {
       if (idx == 0) { // 查询数据
+        this.$refs.popup.close()
         console.log(this.$refs.form1.validate(), '2222222222')
         this.$refs.form1.validate().then(res => {
           this.getOldMember();
@@ -564,271 +578,5 @@ export default {
 </script>
 
 <style scoped lang="scss">
-.h-content-step-end {
-  height: 300px;
-  text-align: center;
-  padding-top: 60px;
-  font-family: PingFangSC-Regular, PingFang SC;
-
-  .h-success {
-    margin: 0 auto;
-    display: flex;
-    justify-content: center;
-    height: 80px;
-    width: 80px;
-    background: #f7fbf3;
-    border-radius: 40px;
-  }
-
-  .h-name {
-    margin-top: 20px;
-    height: 22px;
-    font-size: 14px;
-    font-weight: 400;
-    color: #666666;
-    line-height: 22px;
-  }
-
-  .h-btn {
-    margin: 0 auto;
-    margin-top: 40px;
-    width: 319px;
-    height: 42px;
-    background: #FFE05C;
-    border-radius: 27px;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    font-size: 14px;
-  }
-}
-
-.letter-commitment {
-  padding: 12px;
-  background: #fff;
-
-  .h-title {
-    text-align: center;
-    font-size: 14px;
-  }
-}
-
-.col-border-2 {
-  margin-top: 12px;
-
-  .sign-wrap {
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    height: 120px;
-    background: #FFFFFF;
-  }
-}
-
-.sign-agree {
-  font-size: 14px;
-  font-weight: 400;
-  color: #666666;
-  line-height: 50px;
-  text-align: center;
-}
-
-.h-content-wrap {
-  background: #fff;
-  border-radius: 20rpx;
-  padding-left: 12px;
-  padding-right: 12px;
-}
-
-.h-content {
-  margin-bottom: 12px;
-  background-color: #fff;
-
-  .h-basic-info {
-    padding: 12px;
-    background: whitesmoke;
-    border-radius: 6px;
-    margin: 20rpx;
-    .h-value {
-      display: flex;
-      font-family: PingFangSC-Regular, PingFang SC;
-      font-size: 14px;
-      font-weight: 400;
-
-      .h-name {
-        width: 56px;
-        height: 22px;
-        color: #999999;
-        line-height: 22px;
-        margin-right: 12px;
-      }
-
-      .h-text {
-        height: 22px;
-        color: #333333;
-        line-height: 22px;
-      }
-    }
-  }
-
-  .h-record {
-    margin-top: 24rpx;
-
-    /* 服务订单内容*/
-    .service-order-tab-bar {
-      background: #FAFAFA;
-      display: flex;
-      justify-content: space-around;
-      height: 50px;
-
-
-      .service-order-tab-item {
-        flex: 1;
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        font-size: 16px;
-        color: #333;
-        line-height: 26px;
-        margin: 10rpx;
-        border-radius: 10rpx;
-      }
-
-      .service-order-tab-item.active {
-        background-color: #fbe262;
-
-      }
-
-
-    }
-  }
-}
-
-.store-order-wrap {
-  padding: 12px;
-  .store-order {
-    background: #fff;
-    padding: 10px;
-    border-radius: 3px;
-    font-family: PingFangSC-Regular, PingFang SC;
-
-    .h-content {
-      .h-row {
-        display: flex;
-        justify-content: space-between;
-      }
-
-      .h-text {
-        font-size: 12px;
-        font-weight: 400;
-        color: #999999;
-        line-height: 20px;
-      }
-    }
-  }
-}
-
-.h-footer {
-  text-align: right;
-}
-
-
-.signature-wrap {
-  height: 120px;
-  width: 300px;
-}
-
-.step-bar {
-  padding: 12px;
-  display: flex;
-  justify-content: space-between;
-  margin-bottom: 20px;
-}
-
-.step {
-  position: relative;
-  /* width: 100%; */
-  // height: 40px;
-  /* background-color: #ccc; */
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  color: #fff;
-
-  height: 30px;
-  width: 30px;
-  background: green;
-  border-radius: 15px;
-  margin: 0 auto;
-}
-
-.h-num {
-  margin: 0 auto;
-}
-
-.head-ball {
-  transform: translateX(50%);
-  width: 60rpx;
-  height: 60rpx;
-  line-height: 60rpx;
-  border-radius: 30rpx;
-  background-color: #fbe362;
-  text-align: center;
-}
-
-.step.default {
-  color: #333;
-  background: #fff;
-}
-
-.step.active {
-  color: #333;
-  background: #FFE05C;
-}
-
-.separator {
-  position: absolute;
-  top: 50%;
-  left: 130%;
-  transform: translateY(-50%);
-  width: 50px;
-  height: 2px;
-  border: 1px dashed #000;
-}
-
-.form {
-  margin-bottom: 20px;
-  border-radius: 6px;
-}
-
-.button-group {
-  height: 60px;
-  position: fixed;
-  bottom: 0px;
-  left: 0px;
-  right: 0px;
-  display: flex;
-  justify-content: space-between;
-  background: #fff;
-
-  .h-btn {
-    margin: 0 auto;
-    margin-top: 8px;
-    width: 200px;
-    height: 42px;
-    background: #FFE05C;
-    border-radius: 27px;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    font-size: 14px;
-  }
-}
-
-.identifying-code {
-  image {
-    width: 80px;
-    height: 30px;
-  }
-}
+@import './index.rpx.scss';
 </style>