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>
    <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="open()" :disabled="currentStep === steps.length - 1">查询</button>
    </view>
    <view v-if="currentStep == 1" class="button-group">
      <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>

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

export default {
  components: {
    signature
  },
  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: '',
      step2Value: '',
      step3Value: '',
      userInfo: {
        auth: true,
        phone: '18231041846',
        memberName: '赵梓熠-测试',
        phonenumber: '18231041846',
        smsCode: '',
        memberNo: "",
        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: {
    SelectItem(data){
      console.log(data,'selectItem')
    },

    // 关闭签名框
    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: "操作失败"
        })
      });
    },
    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();
        }).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">
@import './index.rpx.scss';
</style>