jje_uniapp/myPages/systemSwitch/index.vue

<template>
    <view class="container">
        <view class="step-bar">
            <view v-for="(step, index) in steps" :key="index">
                <view >
                    <view class="h-num">
                        <text>{{ index + 1 }}</text>
                    </view>
                    <view v-if="index !== steps.length - 1" class="separator"></view>
                </view>
                <view class="">{{ step }}</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 === 3" class="">
            <view class="h-content-step-end">
                <view class="h-success">
                    <u-icon name="edit-pen-fill" color="#333" size="30"></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(1)" :disabled="currentStep === steps.length - 1">
                <text>下一步</text>
            </view>
        </view>

        <view v-if="currentStep == 2" 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: '',
                memberName: '',
                phonenumber: '',
                smsCode: '',
                memberNo: null,
                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'],
                },

            },
        };
    },
    onLoad() {
        // 获取服务条款数据
        this.getTermOfServiceByType();
    },
    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.$api.getSmsCode();
            } else {
                uni.$u.toast('倒计时结束后再发送');
            }
        },
        // 获取手机验证码
        getSmsCode() {
            let that = this;
            // 模拟向后端请求验证码
            uni.showLoading({
                title: '正在获取验证码'
            })
            this.$api.getSmsCode({ data: { phonenumber: this.userInfo.phonenumber, auth: true } }).then((res) => {
                uni.hideLoading();
                // 这里此提示会被this.start()方法中的提示覆盖
                uni.$u.toast('验证码已发送');
                // 通知验证码组件内部开始倒计时
                that.$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() {
            let that = this;
            this.$api.getOldMember({ data: that.userInfo }).then((res) => {
                if (!that.$isDataEmpty(res)) {
                    that.userMemberInfo = res;
                    that.userInfo.memberNo = res.memberNo;
                    if (that.currentStep < that.steps.length - 1) {
                        that.currentStep++;
                    }
                    // 查询充值记录
                    that.$api.getOrderRechargeOldList();
                } else {
                    uni.$u.toast('未查询到数据');
                }
            }).catch(() => {
                uni.showToast({
                    title: "操作失败"
                })
            });
        },
        // 查询会员消费记录
        getOrderConsumeLogOld() {
            let that = this;
            this.$api.getOrderConsumeLogOld({ data: this.userInfo }).then((res) => {
                console.log(res)
                that.memberInfoRecords = res;
            }).catch(() => {
                uni.showToast({
                    title: "操作失败"
                })
            });
        },
        // 查询叶会员充值记录
        getOrderRechargeOldList() {
            this.$api.getOrderRechargeOldList({ data: this.userInfo }).then((res) => {
                console.log(res)
                this.memberInfoRecords = res;
            }).catch(() => {
                uni.showToast({
                    title: "操作失败"
                })
            });
        },
        // 提交保存
        submitOldData() {
            let that = this;
            this.$api.submitOldData(null, { data: that.userInfo }).then((res) => {
                console.log(res)
                if (this.currentStep < this.steps.length - 1) {
                    this.currentStep++;
                }
            }).catch(() => {
                uni.showToast({
                    title: "操作失败"
                })
            });
        },
        nextStep(idx) {
            if (idx == 0) { // 查询数据
                this.$refs.form1.validate().then(res => {
                    this.$api.getOldMember();
                }).catch(errors => {
                    uni.$u.toast('校验失败,请认真填写')
                })
            }

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

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

            if (idx == 3) { // 迁移成功，重新设置用户数据
                // 刷新用户信息
                this.$refreshUserLoginInfo();
                uni.navigateTo({
                    url: '/pages/index/index',

                })
            }
        },
        prevStep() {
            if (this.currentStep > 0) {
                this.currentStep--;
            }
        },
        changeTab(tab) {
            this.currentTab = tab;
        },
        // 服务订单
        changeServiceTab(tab) {
            if (tab == 'orderTab1') {
                this.$api.getOrderRechargeOldList();
            } else if (tab == 'orderTab2') {
                this.$api.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;
    background: #fff;
    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;
    padding-left: 12px;
    padding-right: 12px;
}

.h-content {
    margin-bottom: 12px;
    background-color: #fff;

    .h-basic-info {
        padding: 12px;
        background: #fff;
        border-radius: 6px;

        .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: 12px;

        /* 服务订单内容*/
        .service-order-tab-bar {
            background: #fff;
            display: flex;
            justify-content: space-around;
            height: 50px;
            background-color: #f5f5f5;

            .service-order-tab-item {
                flex: 1;
                display: flex;
                align-items: center;
                justify-content: center;
                font-size: 16px;
                color: #333;
                line-height: 26px;
            }

            .service-order-tab-item.active {
                color: #ff0000;
            }

            .underline {
                border-bottom: 2px solid #ff0000;
            }
        }
    }
}

.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 {
//    // height: 30px;
//    // width: 30px;
//    // background: #fff;
//    // border-radius: 15px;
//    // display: flex;
//    // align-items: center;
//    // justify-content: 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>