jje_uniapp/myPages/systemSwitch/index.vue

<template>
  <view class="container">
    <view class="step-bar">
      <view >
        <view class="h-num">
          <view class="head-ball" :style="currentStep == 0 ? 'background-color: #fbe362;':'background-color: #91d224;color:#FFFFFF' " >
            <text>1</text>
          </view>
        </view>
        <view class="">账号查询</view>
      </view>
      <view>
        <u-icon name="more-dot-fill" color="#cccccc" size="28"></u-icon>
      </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' )  " >
            <text>2</text>
          </view>
        </view>
        <view class="">信息确认</view>
      </view>
      <view>
        <u-icon name="more-dot-fill" color="#cccccc" size="28"></u-icon>
      </view>
      <view >
        <view class="h-num">
          <view class="head-ball" :style="currentStep == 2 ? 'background-color: #fbe362;':'background-color: #FFFFFF' " >
            <text>3</text>
          </view>
        </view>
        <view class="">账号迁移</view>
      </view>
    </view>
    <view class="form">
      <view v-if="currentStep === 0" class="h-content-wrap">
        <u--form labelPosition="top" :model="userInfo" :rules="rules" ref="form1">
          <u-form-item labelWidth="auto" labelAlign="right" label="老系统手机号" prop="phone">
            <u--input v-model="userInfo.phone" disabledColor="#ffffff" placeholder="填写老系统电话" border="bottom"
                      maxlength="11"></u--input>
          </u-form-item>
          <u-form-item label="老系统会员姓名" prop="memberName" labelPosition="top" labelWidth="auto" labelAlign="right">
            <u--input v-model="userInfo.memberName" disabledColor="#ffffff" placeholder="填写姓名" border="bottom"
                      maxlength="16"></u--input>
          </u-form-item>
          <u-form-item label="当前手机号" prop="phonenumber" labelWidth="auto" labelAlign="right">
            <u--input v-model="userInfo.phonenumber" disabledColor="#ffffff" placeholder="填写当前手机号"
                      border="bottom" maxlength="11"></u--input>
          </u-form-item>
          <u-form-item labelWidth="auto" labelAlign="right" label="验证码" prop="smsCode" width="120">
            <u--input v-model="userInfo.smsCode" disabledColor="#ffffff" placeholder="请输入验证码" border="bottom"
                      maxlength="6"></u--input>
            <template #right>
              <view class="identifying-code">
                <u-code ref="uCode2" @change="codeChange2" keep-running start-text="获取验证码"></u-code>
                <text @tap="getCode2" :text="tips2" class="u-page__code-text">{{ tips2 }}</text>
              </view>
            </template>
          </u-form-item>
        </u--form>
      </view>
      <view v-if="currentStep === 1">
        <view class="h-content">
          <view class="h-basic-info">
            <view class="h-value">
              <view class="h-name">会员编号</view>
              <view class="h-text">{{ userMemberInfo.memberNo }}</view>
            </view>
            <view class="h-value">
              <view class="h-name">会员卡号</view>
              <view class="h-text">{{ userMemberInfo.memberCard }}</view>
            </view>
            <view class="h-value">
              <view class="h-name">会员姓名</view>
              <view class="h-text">{{ userMemberInfo.memberName }}</view>
            </view>
            <view class="h-value">
              <view class="h-name">手机号码</view>
              <view class="h-text">{{ userMemberInfo.phone }}</view>
            </view>

            <view class="h-value">
              <view class="h-name">积分</view>
              <view class="h-text">{{ userMemberInfo.integral }}</view>
            </view>
            <view class="h-value">
              <view class="h-name">账户余额</view>
              <view class="h-text">￥{{ userMemberInfo.nowBalance }}</view>
            </view>
          </view>
          <view class="h-record">
            <!-- 导航-->
            <view class="service-order-tab-bar">
              <view class="service-order-tab-item" :class="{ active: currentServiceTab === 'orderTab1' }"
                    @click="changeServiceTab('orderTab1')">
                <text :class="{ underline: currentServiceTab === 'orderTab1' }">充值记录</text>
              </view>
              <view class="service-order-tab-item" :class="{ active: currentServiceTab === 'orderTab2' }"
                    @click="changeServiceTab('orderTab2')">
                <text :class="{ underline: currentServiceTab === 'orderTab2' }">消费记录</text>
              </view>
            </view>
            <view class="custom-line"></view>
            <!-- order -->
            <view v-if="currentServiceTab == 'orderTab1' " class="store-order-wrap">
              <view v-for="(item, index) in memberInfoRecords" class="store-order">
                <view class="h-content">
                  <view class="h-row">
                    <view class="h-value">
                      <text>储值记录</text>
                    </view>
                    <view class="h-value">
                      <text>+ ¥{{ item.rechargeAmount }}</text>
                    </view>
                  </view>
                  <view class="h-row">
                    <view class="h-value">
                      <text class="h-text">{{ item.rechargeTime }}</text>
                    </view>
                    <view class="h-value h-name">
                      <text class="h-text">账户余额：¥{{ item.nowBalance }}</text>
                    </view>
                  </view>
                </view>
                <view class="custom-line"></view>
              </view>
            </view>
            <view v-if="currentServiceTab == 'orderTab2'" class="store-order-wrap">
              <view v-for="(item, index) in memberInfoRecords" class="store-order">
                <view class="h-content">
                  <view class="h-row">
                    <view class="h-value">
                      <text>消费记录</text>
                    </view>
                    <view class="h-value">
                      <text>- ¥{{ item.consumeAmount }}</text>
                    </view>
                  </view>
                  <view class="h-row">
                    <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>
                </view>
                <view class="custom-line"></view>
              </view>
            </view>
          </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">
        <view class="h-success">
          <u-icon name="checkmark" color="#5dac17" size="70"></u-icon>
        </view>
        <view class="h-name">
          <text>账户迁移成功</text>
          ！
        </view>
        <view @click="nextStep(3)" class="h-btn">
          <text>确认</text>
        </view>
      </view>
    </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>
    </view>


    <view v-if="currentStep == 1" class="button-group">
      <button @click="prevStep" :disabled="currentStep === 0">上一步</button>
      <view class="h-btn" @click="nextStep(2)" :disabled="currentStep === steps.length - 1">
        <text>确认并迁移</text>
      </view>
    </view>
  </view>
</template>

<script>
import signature from '../components/sign/sign';

export default {
  components: {
    signature
  },
  data() {
    return {
      showCanvas: false,
      currentStep: 0,
      steps: ['账户查询', '信息确认', '账户迁移'], // 步骤条的文字内容
      step1Value: '',
      step2Value: '',
      step3Value: '',
      userInfo: {
        auth: true,
        phone: '18231041846',
        memberName: '赵梓熠-测试',
        phonenumber: '18231041846',
        smsCode: '',
        memberNo: "18902",
        type: 7,
        requstForm: true
      },
      // 服务条款对象信息
      termOfService: {
        aboutContent: "<p>会员协议会员协议会员协议会员协议会员协议会员协议</p>",
        aboutType: "1",
        createBy: "admin",
        createTime: "2023-07-30 08:53:17",
        id: "1685574269874098178",
        status: "0",
        updateBy: "admin",
        updateTime: "2023-07-30 21:04:51"
      },
      userMemberInfo: {
        memberNo: "string",
        pingYinCode: "string",
        memberName: "string",
        integral: 0,
        sex: 0,
        birthday: "string",
        phone: "string",
        memberPassword: "string",
        height: "string",
        weight: "string",
        memberCard: "string",
        address: "string",
        nowBalance: 0,
        totalConsumeAmount: 0,
        debt: 0,
        remarks: "string",
        joinTime: "string",
        memberStatus: 0,
        referencesNo: "string",
        consumeCycle: "string",
        otherInfo: "string",
        photoUrl: "string"
      },
      memberInfoRecords: [{
        orderNo: "string",
        memberNo: "string",
        memberName: "string",
        phone: "string",
        consumeAmount: 0,
        realPayAmount: 0,
        profit: 0,
        integral: 0,
        remainDebt: 0,
        consumeTime: "string",
        remarks: "string",
        consumeStore: "string",
        consumeType: "string",
        discountAmount: 0,
        bedName: "string",
        payInfo: "string",
        memberStore: "string",
        payType: "string"
      }],
      show: false,
      currentTab: 'tab1', // 当前选中的 Tab
      currentServiceTab: 'orderTab1', // 当前选中的 Tab
      defaultColor: '#CCCCCC',
      currentColor: '#FF0000',
      completedColor: '#00FF00',
      content: '一、本人所提供的个人信息 证明材料、证件',
      signType: '',
      signImg1: '',
      tips2: '',
      rules: {
        phone: [
          {
            required: true,
            min: 10,
            max: 12,
            message: '请输入11位电话号码',
            trigger: ['blur', 'change'],
          },
          {
            // 此为同步验证，可以直接返回true或者false，如果是异步验证，稍微不同，见下方说明
            validator: (rule, value, callback) => {
              // 调用uView自带的js验证规则，详见：https://www.uviewui.com/js/test.html
              return !this.$isDataEmpty(value);
            },
            message: "请认真填写电话号码",
            trigger: ['blur', 'change'],
          }
        ],
        memberName: [
          {
            required: true,
            message: '请输入名字',
            trigger: ['blur', 'change'],
          },
        ],
        phonenumber: [
          {
            required: true,
            min: 10,
            max: 12,
            message: '请输入11位电话号码',
            trigger: ['blur', 'change'],
          },
          {
            // 此为同步验证，可以直接返回true或者false，如果是异步验证，稍微不同，见下方说明
            validator: (rule, value, callback) => {
              // 调用uView自带的js验证规则，详见：https://www.uviewui.com/js/test.html
              return !this.$isDataEmpty(value);
            },
            message: "请认真填写电话号码",
            trigger: ['blur', 'change'],
          }
        ],
        // smsCode: {
        //   required: true,
        //   min: 4,
        //   max: 6,
        //   message: '请认真填写验证码',
        //   trigger: ['blur', 'change'],
        // },
      },

    };
  },
  computed: {
    itemObject(num) {
      return (num) => ({
        backgroundColor: item.background,
        gridColumnStart: item.columnStart,
        gridColumnEnd: item.columnEnd,
        gridRowStart: item.rowStart,
        gridRowEnd: item.rowEnd
      })
    }
  },

  onLoad() {
    // 获取服务条款数据
    // this.getTermOfServiceByType();
  },

  onUnload() {
    if (this.timer) {
      clearTimeout(this.timer);
      this.timer = null;
    }
  },

  onReady() {
    this.$refs.form1.setRules(this.rules)
  },

  methods: {
    // 关闭签名框
    closeCanvas() {
      this.showCanvas = false;
    },
    // 选择签名类型
    personSing(type) {
      this.showCanvas = true;
      this.signType = type;
    },
    // 保存签名信息
    saveCanvasImg(path) {
      console.log(path)
      let that = this;
      uni.uploadFile({
        url: this.$host + '/resource/oss/upload', //仅为示例，非真实的接口地址
        filePath: path,
        name: 'file',
        header: {
          'Authorization': 'Bearer ' + that.$store.state.loginState.accessToken,
        },
        success: (uploadFileRes) => {
          let res = JSON.parse(uploadFileRes.data)
          console.log(res)
          that.showCanvas = false;
        }
      });
    },
    codeChange2(text) {
      this.tips2 = text;
    },
    getCode2() {
      if (this.$refs.uCode2.canGetCode) {
        this.getSmsCode();
      } else {
        uni.$u.toast('倒计时结束后再发送');
      }
    },
    // 获取手机验证码
    getSmsCode() {
      // 模拟向后端请求验证码
      uni.showLoading({
        title: '正在获取验证码'
      })
      this.$api.getSmsCode({phonenumber: this.userInfo.phone, auth: true}).then((res) => {
        uni.hideLoading();
        // 这里此提示会被this.start()方法中的提示覆盖
        uni.$u.toast('验证码已发送');
        // 通知验证码组件内部开始倒计时
        this.$refs.uCode2.start();
      }).catch(() => {
        uni.showToast({
          title: "操作失败"
        })
      });
    },
    getStepClass(index) {
      if (index < this.currentStep) {
        return 'step';
      } else if (index === this.currentStep) {
        return ['step', 'active'];
      } else {
        return ['step', '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.timer = setTimeout(() => {
          if (this.currentStep < this.steps.length - 1) {
            this.currentStep++;
          }
        }, 0)
      // }).catch((res) => {
      //   uni.showToast({
      //     title: "操作失败"
      //   })
      // });
    },
    // 查询会员消费记录
    getOrderConsumeLogOld() {
      this.$api.getOrderConsumeLogOld(this.userInfo).then((res) => {
        this.memberInfoRecords = res.data.data;
      }).catch(() => {
        uni.showToast({
          title: "操作失败"
        })
      });
    },
    // 查询叶会员充值记录
    getOrderRechargeOldList() {
      this.$api.getOrderRechargeOldList(this.userInfo).then((res) => {
        this.memberInfoRecords = res.data.data;
      }).catch(() => {
        uni.showToast({
          title: "操作失败"
        })
      });
    },
    // 提交保存
    submitOldData() {
      console.log(this.userInfo.memberNo)
      this.userInfo.memberNo = '18902'
      this.$api.submitOldData(this.userInfo).then((res) => {
        console.log(res)
        if (this.currentStep < this.steps.length - 1) {
          this.currentStep++;
        }
      }).catch(() => {
        uni.showToast({
          title: "操作失败"
        })
      });
    },
    nextStep(idx) {
      if (idx == 0) { // 查询数据
        console.log(this.$refs.form1.validate(), '2222222222')
        this.$refs.form1.validate().then(res => {
          this.getOldMember();
        }).catch(errors => {
          uni.$u.toast('校验失败,请认真填写')
        })
      }

      if (idx == 1) { // 显示查询数据
        if (this.currentStep < this.steps.length - 1) {
          this.currentStep++;
        }
      }

      if (idx == 2) { // 用户签名确认
        this.submitOldData();
      }

      if (idx == 3) { // 迁移成功，重新设置用户数据
        uni.switchTab({
          url: '/pages/index/index',
        })
      }
    },
    prevStep() {
      if (this.currentStep > 0) {
        this.currentStep--;
      }
    },
    changeTab(tab) {
      this.currentTab = tab;
    },
    // 服务订单
    changeServiceTab(tab) {
      if (tab == 'orderTab1') {
        this.getOrderRechargeOldList();
      } else if (tab == 'orderTab2') {
        this.getOrderConsumeLogOld();
      }
      this.currentServiceTab = tab;
    },
    // 获取服务条款信息
    getTermOfServiceByType() {
      // 获取数据
      this.$api.getTermOfServiceByType({data: this.userInfo}).then((res) => {
        if (res.aboutContent) {
          this.termOfService.aboutContent = res.aboutContent
        } else {
          this.termOfService.aboutContent = "暂无信息！！！"
        }
      }).catch(() => {
        uni.showToast({
          title: "操作失败"
        })
      });
    },
  }
};
</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;
  }
}
</style>