CZKJ.XKJ.Helper/src/pages/index/register.vue

<template>
    <div class="page">
        <my-nav :title="'注册'" :hideIcon="true"></my-nav>
        <div class="main" v-if="step === 1">
            <!-- <div class="tit">注册</div> -->
            <div class="inp-box">
                <input
                    type="number"
                    name="mobile"
                    v-model="form.mobile"
                    placeholder="手机号码"
                />
            </div>

            <div class="inp-box code-box">
                <input
                    type="number"
                    name="smsCode"
                    v-model="form.smsCode"
                    placeholder="验证码"
                />
                <span
                    class="code-btn"
                    :class="{ dis: timeing }"
                    @click="getCode()"
                    >{{ codeStr }}</span
                >
            </div>

            <div class="inp-box">
                <input
                    type="password"
                    name="password"
                    v-model="form.password"
                    placeholder="请输入密码"
                />
            </div>
            <div class="inp-box">
                <input
                    type="password"
                    name="password2"
                    v-model="form.password2"
                    placeholder="确认密码"
                />
            </div>
            <button class="btn" @click="submit">注册</button>
            <p class="go-login">
                <a
                    class="text"
                    @click="
                        jump({ path: '/pages/index/login', isTabBar: true })
                    "
                    >已有帐号，去登录</a
                >
            </p>
        </div>
        <div class="main" v-if="step === 2">
            <div class="tit">填写区区购团长号</div>
            <div class="inp-box">
                <input
                    type="number"
                    name="teamNum"
                    v-model="form.teamNum"
                    placeholder="团长号：9000xxxxxx"
                />
            </div>
            <button class="btn" @click="saveTeamNum">下一步</button>
            <div class="team-num-des">
                <h1 class="tit">在哪里看京东区区购团长号？</h1>
                <p class="text">
                    在京东区区购店长版后台，个人中心，点击头像进去就可以看到
                </p>
                <div class="video">
                    <video
                        src="https://oss.ixiaokejia.com/videos/get-pid.mp4"
                        poster="https://oss.ixiaokejia.com/images/common/video_poster.png"
                    ></video>
                </div>

                <p
                    class="text"
                    @click="copy('jingzhunwlyx', '复制客服微信成功')"
                >
                    如有问题，添加客服微信：<span class="wechat"
                        >jingzhunwlyx</span
                    >
                    <span class="copy">点击复制</span
                    >，或长按下方二维码添加客服咨询
                </p>
                <div class="img">
                    <my-image
                        mode="widthFix"
                        @click="
                            viewImg(
                                'https://oss.ixiaokejia.com/images/common/kefu_qrcode.jpg'
                            )
                        "
                        src="https://oss.ixiaokejia.com/images/common/kefu_qrcode.jpg"
                    ></my-image>
                </div>
            </div>
        </div>
        <div class="main" v-if="step === 3">
            <div class="return-page" @click="step=2">
                <my-image
                    class="arrow"
                    src="/static/common/arrows_left.png"
                ></my-image
                >返回填写团长号
            </div>
            <div class="tit">添加助理微信</div>
            <ul class="add-assistant">
                <li @click="copy(kefu._id, '复制群助理微信成功')">
                    <div class="step">第一步：</div>
                    <div class="con">
                        <div>
                            助理微信：<span class="wechat">{{ kefu._id }}</span>
                            <span class="copy">点击复制</span>
                        </div>
                        <my-image
                            class="wechat-img"
                            mode="widthFix"
                            @click="viewImg(kefu.qrCode)"
                            :src="kefu.qrCode"
                        ></my-image>
                    </div>
                </li>
                <li>
                    <div class="step">第二步：</div>
                    <div class="con">
                        <div class="font-blod">将助理拉入群</div>
                    </div>
                </li>
                <li>
                    <div class="step">第三步：</div>
                    <div class="con">
                        <div>在群里@群助理</div>
                    </div>
                </li>
                <li
                    @click="
                        copy(
                            pidCode,
                            '已复制群验证码，请粘贴发送到要开通助理的群内'
                        )
                    "
                >
                    <div class="step">第四步：</div>
                    <div class="con">
                        <div>
                            发送
                            <span class="wechat red">{{ pidCode }}</span> 到群内
                            <span class="copy">点击复制</span>
                        </div>
                    </div>
                </li>
            </ul>
            <button class="btn" @click="saveOk">已完成</button>
        </div>
    </div>
</template>

<script>
import MyImage from "../../components/image/index";
import MyNav from "../../components/layout/nav";

export default {
    name: "",
    components: { MyImage, MyNav },
    // 数据
    data() {
        return {
            step: 1,
            form: {
                mobile: "",
                smsCode: "",
                password: "",
                password2: "",
                teamNum: "",
                fromPlatform: 1,
            },
            timeing: false,
            codeStr: "发送验证码",
            pidCode: "",
            kefu: {},
            share: {
                title: "开通群助理",
                path: "/pages/index/register",
                imageUrl:
                    "https://oss.ixiaokejia.com/images/common/share_register.jpg",
            },
        };
    },

    onLoad(opts) {
        if (opts.step) {
            this.step = Number(opts.step);
            if (this.step !== 1) {
                this.getAvailableWechat();
            }
        }
        if (opts.pidCode) {
            this.pidCode = opts.pidCode;
        }
        if (opts.fromPlatform) {
            this.form.fromPlatform = Number(opts.fromPlatform);
        }
        uni.hideLoading();
    },

    onShow() {},

    // 函数
    methods: {
        getAvailableWechat() {
            this.api
                .get("/Group/GetAvailableWechat", {}, { pass: true })
                .then((res) => {
                    if (res.data.length === 0) {
                        this.fn.showModal({
                            title: "提示",
                            content:
                                "暂时所有群助理都已经排满，请您联系客服或稍后再试。客服微信：jingzhunwlyx",
                            showCancel: false,
                        });
                    } else {
                        this.kefu = res.data[0] ? res.data[0] : {};
                        console.log(this.kefu);
                    }
                });
        },

        getCode() {
            if (this.timeing) {
                return;
            }
            let phoneReg = /^[1][1-9][0-9]{9}$/;
            if (!this.form.mobile) {
                return this.fn.showToast("请输入手机号");
            }
            if (!phoneReg.test(this.form.mobile)) {
                return this.fn.showToast("手机号格式不正确");
            }
            this.sendCode();
            this.downTime();
        },
        sendCode() {
            this.api
                .get("/Login/SendSms", { mobile: this.form.mobile })
                .then((res) => {});
        },
        downTime() {
            this.timeing = true;
            let t = 60;
            this.codeStr = t + "s重新获取";
            let timer = setInterval(() => {
                t--;
                if (t === 0) {
                    clearInterval(timer);
                    this.codeStr = "发送验证码";
                    this.timeing = false;
                } else {
                    this.codeStr = t + "s重新获取";
                }
            }, 1000);
        },

        submit() {
            if (!this.form.mobile) {
                this.fn.showToast(`请输入手机号码`);
                return;
            }
            if (!this.form.smsCode) {
                this.fn.showToast(`请输入验证码`);
                return;
            }

            if (!this.form.password) {
                this.fn.showToast(`请输入密码`);
                return;
            }

            if (this.form.password.length < 6) {
                this.fn.showToast(`密码最少6位`);
                return;
            }

            if (!this.form.password2) {
                this.fn.showToast(`请输入确认密码`);
                return;
            }

            if (this.form.password2 !== this.form.password) {
                this.fn.showToast(`两次密码不一致`);
                return;
            }

            uni.showLoading({
                title: "提交中",
            });
            // this.step = 2;
            let sendData = {
                code: "",
                mobile: this.form.mobile,
                smsCode: this.form.smsCode,
                password: this.form.password,
                fromPlatform: this.form.fromPlatform,
            };
            uni.login({
                provider: "weixin",
                success: (result) => {
                    sendData.code = result.code;
                    this.api.post("/Login/Register", sendData).then((res) => {
                        uni.hideLoading();
                        if (res.success) {
                            res.data.companyId = res.data.companyId || null;
                            this.fn.showToast(`注册成功`);
                            // 正常用户
                            this.$store.commit("user/login", res.data);
                            this.$store.commit("common/update", {
                                curShop: {},
                            });
                            this.step = 2;
                            this.getAvailableWechat();
                        } else {
                            this.fn.showModal({
                                title: "注册失败",
                                content: res.message,
                                showCancel: false,
                            });
                        }
                    });
                },
            });
        },

        saveTeamNum() {
            if (!this.form.teamNum) {
                return this.fn.showToast(`请输入团长号`);
            }
            let reg = /^9\d{9}$/;
            if (!reg.test(this.form.teamNum)) {
                return this.fn.showToast("团长号为9开头的10位数字");
            }
            uni.showLoading({
                title: "提交中",
            });
            // this.step = 2;
            this.form.fromPlatform = 1;
            let sendData = {
                pid: this.form.teamNum,
                platform: this.form.fromPlatform,
            };
            this.api
                .post("/Group/CommitPid", sendData, { pass: true })
                .then((res) => {
                    uni.hideLoading();
                    if (res.success) {
                        this.fn.showToast(`团长号提交成功`);
                        this.pidCode = res.data;
                        this.step = 3;
                    } else {
                        this.fn.showModal({
                            title: "团长号提交失败",
                            content: res.message,
                            showCancel: false,
                        });
                    }
                });
        },

        viewImg(url) {
            uni.previewImage({
                urls: [url],
            });
        },

        copy(val, str) {
            const self = this;

            uni.setClipboardData({
                data: val,
                success: () => {
                    self.fn.showToast(str || "复制成功");
                },
            });
        },

        saveOk() {
            // this.router.push("/pages/index/register?step=2");
            // return;
            // self.fn.showToast("注册成功");
            this.api
                .get("/Group/CheckCode", {
                    platform: this.form.fromPlatform,
                })
                .then((res) => {
                    if (res.success) {
                        if (res.data.verified) {
                            this.router.push({
                                path: "/pages/assistant/index",
                                isTabBar: true,
                            });
                        } else {
                            this.fn.showModal({
                                title: "失败",
                                content:
                                    "助理没有收到您发送在群里的团长号，请确认1、2、3步全部完成后再试",
                                showCancel: false,
                            });
                        }
                    } else {
                        this.fn
                            .showModal({
                                title: "未填写团长号",
                                content: "确认返回团长号填写",
                                showCancel: false,
                            })
                            .then((res) => {
                                if (res.confirm) {
                                    this.step = 2;
                                }
                            });
                        // this.router.push("/index/register?step=2");
                    }
                });
        },
    },

    // 数据计算
    computed: {},

    // 数据监听
    watch: {},
};
</script>


<style lang="scss" scoped>
.page {
    height: 100vh;
    background-color: #fff;
}
.main {
    padding-top: px(120);
    padding-left: px(40);
    padding-right: px(40);
}
.tit {
    font-size: px(50);
    padding-bottom: px(100);
    text-align: center;
    padding-bottom: px(100);
}
.inp-box {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid #c3c1c2;
    padding: px(30) 0;
    margin-bottom: px(30);
}
.inp-box span {
    font-size: px(32);
    color: rgb(0, 188, 38);
    border-radius: px(15);
    border: 1px solid rgb(0, 188, 38);
    width: px(230);
    height: px(80);
    text-align: center;
    line-height: px(80);
    flex-shrink: 0;
    margin-left: px(30);
}
.inp-box input {
    width: 100%;
}
.inp-box .dis {
    color: #999;
    border-color: #999;
    pointer-events: none;
}
.btn {
    margin-top: px(120);
    color: #fff;
    background-color: rgb(0, 188, 38);
    font-size: px(44);
}
.code-box {
    display: flex;
    justify-content: space-between;
    align-items: center;
    .code-btn {
        width: px(250);
        flex-shrink: 0;
        font-size: px(40);
        padding: 0 px(10);
        border: none;
        &.dis {
            border-color: #f1f1f1;
            color: #999;
        }
    }
}
.team-num-des {
    padding: px(80) px(30);
    text-align: center;
    line-height: 1.5;
    .tit {
        font-size: px(48);
        padding: px(10) 0;
    }
    .text {
        font-size: px(44);
        padding: px(15) 0;
    }
    video {
        width: 80vw;
        height: calc(80vw / 0.466666);
        display: block;
        margin: 0 auto;
    }
    .img,
    .video {
        padding: px(20) 0;
    }
    /deep/ img {
        width: 80%;
        display: block;
        margin: 0 auto;
    }
}
.add-assistant {
    border-top: 1px solid #f1f1f1;
    li {
        display: flex;
        justify-content: space-between;
        font-size: px(44);
        padding: px(30);
        border-bottom: 1px solid #f1f1f1;
        .step {
            width: px(200);
            flex-shrink: 0;
            font-weight: bold;
        }
        .con {
            width: 100%;
        }
        .wechat-img {
            padding: px(10);
            /deep/ img {
                width: px(600);
            }
        }
    }
}
.copy {
    display: inline-block;
    font-size: px(32);
    line-height: px(44);
    padding: 0 px(10);
    border: 1px solid #4395ff;
    color: #4395ff;
    background-color: #fff;
    margin-left: px(20);
    border-radius: px(5);
    transform: translate(0, -1px);
}
.wechat {
    color: #4395ff;
    &.red {
        color: red;
        font-weight: bold;
    }
}
.go-login {
    text-align: center;
    padding-top: px(60);
    .text {
        display: inline-block;
        color: #4395ff;
    }
}
.font-blod {
    font-weight: bold;
}
.return-page {
    font-size: px(40);
    color: #333;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    transform: translate(0,px(-80));
    color: #666;
    .arrow {
        width: px(40);
        height: px(40);
        flex-shrink: 0;
        margin-right: px(20);
        /deep/ img {
            width: px(40);
            height: px(40);
        }
    }
}
</style>