caimei-applets-caimei/pages/login/register.vue

<template>
    <view class="container register" :style="{ paddingTop: CustomBar + 'px' }">
        <cu-custom :navbar-data="nvabarData" @navigateBack="hanldNavigateBack"></cu-custom>
        <view class="register-main clearfix">
            <view class="register-logo">
                <image class="logo" src="https://static.caimei365.com/app/img/icon/logo@2x.png" mode=""></image>
            </view>
            <view class="register-row clearfix">
                <view class="register-from">
                    <view class="label">联系人:</view>
                    <input
                        class="row-input"
                        type="text"
                        name="input"
                        v-model="params.userName"
                        placeholder="请输入机构联系人姓名"
                        maxlength="6"
                    />
                </view>
            </view>
            <view class="register-row clearfix">
                <view class="register-from">
                    <view class="label">手机号:</view>
                    <input
                        class="row-input"
                        type="number"
                        name="input"
                        v-model="params.bindMobile"
                        placeholder="请输入联系人常用手机号"
                        maxlength="11"
                    />
                </view>
            </view>
            <view class="register-row clearfix">
                <view class="register-from">
                    <view class="label">短信验证码:</view>
                    <input
                        class="row-input code"
                        type="text"
                        v-model="params.smsCode"
                        placeholder="请输入短信验证码"
                        maxlength="6"
                    />
                    <view class="row-btn" :class="[isMobileDisabled ? 'disabled' : '']">
                        <button
                            class="row-input"
                            type="button"
                            @click.stop="getMobileCodeFn"
                            :disabled="isMobileDisabled"
                        >
                            {{ mobileCodeText }}
                        </button>
                    </view>
                </view>
            </view>
            <view class="register-row clearfix">
                <view class="register-from">
                    <view class="label">登录密码:</view>
                    <input
                        class="row-input"
                        type="password"
                        name="input"
                        v-model="params.password"
                        placeholder="密码必须为8-16位字母数字组合"
                        maxlength="16"
                    />
                </view>
            </view>
            <view class="register-row clearfix">
                <view class="register-from">
                    <view class="label">确认密码:</view>
                    <input
                        class="row-input"
                        type="password"
                        name="input"
                        v-model="params.passWordConfirm"
                        placeholder="请确认密码"
                        maxlength="16"
                    />
                </view>
            </view>
            <view class="register-row clearfix">
                <view class="tab-label">是否需要为你匹配专属客户经理：</view>
                <view class="tips">建议选择“需要”，采美专业的客户经理会为您提供更多支持，帮助您 轻松采购！</view>
                <view class="check">
                    <view
                        class="radio"
                        :class="item.id === params.isSp ? 'isActive' : ''"
                        @click="params.isSp = item.id"
                        v-for="(item, index) in checkRadio"
                        :key="item.id"
                    >
                        {{ item.label }}
                    </view>
                </view>
            </view>
            <view class="register-main clearfix">
                <view class="register-agree">
                    <view class="agree-text" @tap.stop="agreeCheck()">
                        <button
                            class="checkbox iconfont"
                            :class="[isCheck ? 'icon-gouxuan' : 'icon-weigouxuan']"
                        ></button>
                        我已阅读并同意
                        <text @click.stop="this.$api.navigateTo('/pages/service/service?id=1036&title=机构协议')">
                            《机构协议》
                        </text>
                        <text @click.stop="this.$api.navigateTo('/pages/service/service?id=1023&title=用户协议')">
                            《用户协议》
                        </text>
                        及
                        <text @click.stop="this.$api.navigateTo('/pages/service/service?id=1013&title=隐私权政策')">
                            《隐私权政策》
                        </text>
                    </view>
                </view>
                <view class="register-row ">
                    <view class="register-btn sub" @click.stop="registerStepsfirst">注册</view>
                </view>
            </view>
        </view>
    </view>
</template>

<script>
import { mapState, mapMutations } from 'vuex'
import authorize from '@/common/config/authorize.js'
import wxLogin from '@/common/config/wxLogin.js'
import mpvueCityPicker from '@/components/mpvue-citypicker/mpvueCityPicker.vue'
import { beautyList, mentuzCampNullList, medicaCampNullList } from '@/common/json/data.json.js' //本地数据
import { uploadFileImage } from '@/services/public.js'
export default {
    components: {
        mpvueCityPicker
    },
    data() {
        return {
            nvabarData: {
                //顶部自定义导航
                showCapsule: 1, // 是否显示左上角图标  1表示显示  0表示不显示,
                showSearch: 0,
                title: '机构注册', // 导航栏 中间的标题
                haveBack: true,
                textLeft: this.$store.state.isIphone
            },
            checkRadio: [
                // 是否需要分配客户经理
                {
                    id: 1,
                    label: '需要'
                },
                {
                    id: 0,
                    label: '不需要'
                }
            ],
            CustomBar: this.CustomBar, // 顶部导航栏高度
            isMobileDisabled: false, //手机验证码按钮控制
            mobilCount: '', //倒计时
            mobileCodeText: '获取验证码',
            mobilTime: null,
            params: {
                userName: '',
                bindMobile: '',
                isAgreed: 0,
                password: '',
                passWordConfirm: '',
                smsCode: '',
                avatarUrl: '',
                nickName: '',
                source: 1,
                unionId: '',
                isSp: 1,
                spId: '', // 协销分享的id
            },
            imageCode: '', //图形验证码
            imageCodeUrl: '', //图形验证码图片
            imageCodetoken: '', //图形验证校验
            isCheck: false, //是否勾选协议
            userID: '', //机构userID
            clubID: '' //机构ID
        }
    },
    onLoad(option) {},
    computed: {
        ...mapState(['isWxAuthorize'])
    },
    methods: {
        ...mapMutations(['login', 'wxLogin']),
        hanldNavigateBack() {
            this.$util.modal('', '注册尚未完成，确定放弃注册吗？', '确定', '取消', true, () => {
                uni.navigateBack({
                    delta: 1
                })
            })
        },

        registerStepsfirst() {
            if (this.params.userName == '') {
                this.$util.msg('请输入联系人名称', 2000)
                return
            }
            if (this.params.bindMobile == '') {
                this.$util.msg('请输入手机号', 2000)
                return
            }
            if (!this.$reg.isMobile(this.params.bindMobile)) {
                this.$util.msg('手机格式不正确', 2000)
                return
            }
            if (this.params.smsCode == '') {
                this.$util.msg('请输入手机验证码', 2000)
                return
            }
            if (!this.$reg.isMobileCode(this.params.smsCode)) {
                this.$util.msg('验证码格式不正确', 2000)
                return
            }
            if (this.params.password == '') {
                this.$util.msg('请输入密码', 2000)
                return
            }
            if (!this.$reg.checkPwd(this.params.password)) {
                this.$util.msg('密码必须为8-16位字母数字的组合', 2000)
                return
            }
            if (this.params.passWordConfirm == '') {
                this.$util.msg('请再次确认密码', 2000)
                return
            }
            if (this.params.passWordConfirm !== this.params.password) {
                this.$util.msg('两次输入的密码不一致', 2000)
                return
            }
            if (this.params.isAgreed == 0) {
                this.$util.msg('请勾选同意协议', 2000)
                return
            }
            this.params.unionId = uni.getStorageSync('unionId')
            this.GetUserProfile()
        },
        GetUserProfile() {
            //获取用户微信个人信息
            const self = this
            wx.getUserProfile({
                desc: '采美采购商城小程序获取您的信息', // 声明获取用户个人信息后的用途，后续会展示在弹窗中，请谨慎填写
                success(res) {
                    console.log('微信获取用户信息新API', res)
                    self.wxLogin(res.userInfo)
                    self.params.nickName = res.userInfo.nickName
                    self.params.avatarUrl = res.userInfo.avatarUrl
                    if (uni.getStorageSync('spId') && uni.getStorageSync('spId') > 0) {
                        self.params.spId = uni.getStorageSync('spId')
                    }
                    self.UserRegisterClub(self.params)
                    // 友盟自定义事件
                    if (process.env.NODE_ENV != 'development') {
                        self.$uma.trackEvent('Um_Event_ConfirmRegister', {
                            Um_Key_PageName: '注册机构',
                            Um_Key_PageCategory: '注册机构页面'
                        })
                    }
                },
                fail() {
                    self.$util.msg('授权失败', 2000)
                }
            })
        },
        UserRegisterClub(params) {
            this.UserService.UserRegisterClub(params)
                .then(response => {
                    wxLogin.wxLoginAuthorize()
                    setTimeout(() => {
                        this.$api.switchTabTo('/pages/tabBar/user/user')
                    }, 2000)
                })
                .catch(error => {
                    this.$util.msg(error.msg, 2000)
                })
        },
        storeUpdataeStatus(data) {
            uni.setStorageSync('token', data.token)
            this.$store.commit('updateStatus', data)
            this.login(data)
        },
        getMobileCodeFn() {
            if (this.params.bindMobile == '') {
                this.$util.msg('请输入手机号', 2000)
                return
            }
            if (!this.$reg.isMobile(this.params.bindMobile)) {
                this.$util.msg('请输入正确的手机号', 2000)
                return
            }
            let params = {
                mobile: this.params.bindMobile,
                isCheckCaptcha: 1,
                activateCodeType: 2,
                platformType: 2
            }
            this.isMobileDisabled = true
            this.PublicService.GetRegisterMobileCode(params)
                .then(response => {
                    this.$util.msg('验证短信已发送', 2000)
                    const TIME_COUNT = 60
                    if (!this.mobilTime) {
                        this.mobilCount = TIME_COUNT
                        this.isMobileDisabled = true
                        this.mobilTime = setInterval(() => {
                            if (this.mobilCount > 1 && this.mobilCount <= TIME_COUNT) {
                                this.mobilCount--
                                this.mobileCodeText = this.mobilCount + 's重新发送'
                            } else {
                                this.isMobileDisabled = false
                                clearInterval(this.mobilTime)
                                this.mobilTime = null
                                this.mobileCodeText = '获取验证码'
                            }
                        }, 1000)
                    }
                })
                .catch(error => {
                    this.$util.msg(error.msg, 2000)
                    this.isMobileDisabled = false
                })
        },
        agreeCheck() {
            this.isCheck = !this.isCheck
            if (this.isCheck) {
                this.params.isAgreed = 1
            } else {
                this.params.isAgreed = 0
            }
        },
        async InitAuthorize() {
            //是否已授权 0:为取消授权 1:为已授权 2:为未操作
            wxLogin.wxLoginQuick()
        }
    },
    onShow() {
        this.InitAuthorize()
    }
}
</script>

<style lang="scss">
.register {
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    background-size: contain;
    .register-main {
        width: 100%;
        height: auto;
        position: relative;
        .register-consult {
            width: 110rpx;
            height: 68rpx;
            background: linear-gradient(223deg, rgba(225, 86, 21, 0.6) 0%, rgba(225, 86, 10, 0.3) 100%);
            border-radius: 34rpx 0 0 34rpx;
            position: absolute;
            right: 0;
            bottom: 120rpx;
            text-align: left;
            line-height: 68rpx;
            padding-left: 20rpx;
            .icon-kefunv {
                font-size: 48rpx;
                color: #31313b;
                float: left;
            }
            .text {
                font-size: $font-size-24;
                display: block;
                float: left;
                width: 60rpx;
                line-height: 30rpx;
                color: #ffffff;
                margin-top: 6rpx;
            }
        }
        .register-agree {
            display: flex;
            flex-direction: column;
            align-items: center;
            margin: 100rpx 0 20rpx 0;
            .agree-text {
                .checkbox {
                    float: left;
                    margin: 4rpx 6rpx 0 0;
                    color: #999999;
                    font-size: $font-size-34;
                    &.icon-gouxuan {
                        color: $color-system;
                    }
                }
                font-size: $font-size-22;
                line-height: 44rpx;
                color: #999999;
                text {
                    color: #1890f9;
                }
            }
        }
        .register-logo {
            width: 100%;
            display: flex;
            flex-direction: column;
            align-items: center;
            height: 284rpx;
            padding: 60rpx 0 40rpx 0;
            .logo {
                width: 611rpx;
                height: 284rpx;
                display: block;
            }
        }
        &.detailed {
            padding-bottom: 330rpx;
        }
        .register-row {
            width: 100%;
            height: auto;
            padding: 0 75rpx;
            margin-bottom: 30rpx;
            box-sizing: border-box;
            .tab-label {
                color: #666666;
                font-size: 28rpx;
            }
            .tips {
                color: #ff5b00;
                font-size: 20rpx;
            }
            .check{
                display: flex;
                align-item: center;
                margin-top: 24rpx;
                .radio {
                    color: #666666;
                    font-size: 28rpx;
                    padding-left: 60rpx;
                    position: relative;
                    margin-right: 56rpx;
                    &::before {
                        content: '';
                        width: 32rpx;
                        height: 32rpx;
                        border: 1px solid #B2B2B2;
                        border-radius: 50%;
                        position: absolute;
                        left: 0;
                    }
                }
                .isActive {
                    &::before {
                        border: 1px solid #FF5B00;
                        content: '';
                        width: 32rpx;
                        height: 32rpx;
                        border-radius: 50%;
                        position: absolute;
                        left: 0;
                    }
                    &::after {
                        content: '';
                        width: 16rpx;
                        height: 16rpx;
                        border-radius: 50%;
                        position: absolute;
                        left: 0;
                        background-color: #FF5B00;
                        transform: translate(60%, 60%);
                    }
                }
            }
            &.none {
                margin-bottom: 0;
            }
            &.login {
                display: flex;
            }
            .register-text {
                line-height: 44rpx;
                margin-top: 100rpx;
                font-size: $font-size-24;
                color: #999999;
                text-align: justify;
                .txt {
                    margin-right: 15rpx;
                }
            }
            .register-title {
                line-height: 44rpx;
                font-size: $font-size-24;
                color: $text-color;
                text-align: left;
                &.first {
                    margin-top: 20rpx;
                }
            }
            .register-tip {
                line-height: 64rpx;
                font-size: $font-size-24;
                color: #cecece;
                text-align: left;
            }
            .register-from {
                width: 100%;
                height: 80rpx;
                background: #ffffff;
                position: relative;
                border-bottom: 1px solid #e1e1e1;
                .label {
                    text-align: left;
                    font-size: $font-size-28;
                    color: #666666;
                    line-height: 88rpx;
                    float: left;
                }
                .row-input {
                    width: 440rpx;
                    padding-left: 10rpx;
                    font-size: $font-size-28;
                    color: $text-color;
                    line-height: 80rpx;
                    float: left;
                    height: 80rpx;
                    &.none {
                        color: #999999;
                    }
                    &.picker {
                        text-align: left;
                        color: #333333;
                    }
                    &.keshi {
                        width: 550rpx;
                    }
                    &.code {
                        width: 264rpx;
                    }
                }
                &.img-btn {
                    width: 220rpx;
                    height: 80rpx;
                    padding: 0;
                    float: left;
                    background: #ffffff;
                    display: block;
                    .vscodeimg {
                        width: 150rpx;
                        height: 80rpx;
                        float: left;
                        display: flex;
                        flex-direction: column;
                        align-items: center;
                        border-radius: 14rpx;
                        image {
                            width: 150rpx;
                            height: 80rpx;
                            border-radius: 14rpx;
                        }
                    }
                    .vscod-refresh {
                        width: 70rpx;
                        float: right;
                        text-align: right;
                        display: flex;
                        flex-direction: column;
                        align-items: center;
                        line-height: 44rpx;
                        .icon-shuaxin {
                            font-size: 48rpx;
                            color: #333333;
                        }
                        .ref-text {
                            font-size: 24rpx;
                            color: #333333;
                        }
                    }
                }
                &.imgcode {
                    width: 410rpx;
                    float: left;
                    margin-right: 20rpx;
                    .row-input {
                        width: 230rpx;
                    }
                }
                .row-btn {
                    width: 180rpx;
                    height: 64rpx;
                    float: left;
                    background: $btn-confirm;
                    padding: 0;
                    border-radius: 32rpx;
                    .row-input {
                        width: 180rpx;
                        height: 64rpx;
                        line-height: 64rpx;
                        padding: 0;
                        color: #ffffff;
                        background: $btn-confirm;
                        text-align: center;
                        border-radius: 32rpx;
                        &.other {
                            width: 180rpx;
                            background: #f7f7f7;
                            margin-right: 20rpx;
                        }
                        &.none {
                            background: #f7f7f7;
                        }
                    }
                    &.disabled {
                        background: #f7f7f7;
                        .row-input {
                            background: #f7f7f7;
                            color: #999999;
                            font-size: 24rpx;
                        }
                    }
                }
                &.picker {
                    padding: 0 24rpx;
                    width: 654rpx;
                    height: 88rpx;
                    line-height: 88rpx;
                    .label {
                        line-height: 88rpx;
                    }
                    .row-input {
                        width: 470rpx;
                        height: 88rpx;
                        line-height: 88rpx;
                        padding-left: 30rpx;
                    }
                }
                &.radio {
                    padding: 0 24rpx;
                    width: 654rpx;
                    height: 288rpx;
                    .row-input {
                        width: 100%;
                        height: 88rpx;
                        line-height: 88rpx;
                        padding-left: 0;
                    }
                    .row-radio {
                        float: left;
                        transform: scale(0.8);
                    }
                    .row-text {
                        width: 100rpx;
                        text-align: center;
                        float: left;
                    }
                }
                &.group {
                    padding: 0 24rpx;
                    width: 654rpx;
                    height: auto;
                    background: #ffffff;
                    margin-top: 30rpx;
                    .label {
                        line-height: 76rpx;
                    }
                    .row-input {
                        width: 100%;
                        height: 88rpx;
                        line-height: 88rpx;
                        padding-left: 0;
                    }
                    .row-radio {
                        float: left;
                    }
                    .row-text {
                        width: 100rpx;
                        text-align: center;
                        float: left;
                    }
                }
                &.btn {
                    margin-top: 0;
                }
                .content-class {
                    margin: 20rpx auto;
                    display: flex;
                    flex-flow: row wrap;
                    justify-content: space-between;
                    align-items: center;
                    &.btn {
                        margin: 0 auto;
                        margin-left: 116rpx;
                    }
                    .row-input {
                        display: flex;
                        width: 220rpx;
                        height: 40rpx;
                        padding: 24rpx;
                        text-align: left;
                        border-radius: 10rpx;
                        font-size: $font-size-28;
                        color: $text-color;
                    }
                    .confirm-btn {
                        width: 200rpx;
                        height: 88rpx;
                        border-radius: 10rpx;
                        line-height: 88rpx;
                        text-align: center;
                        &.other {
                            width: 213rpx;
                        }
                        &.none {
                            color: #ffffff;
                            background: $btn-confirm;
                        }
                        &.disabled {
                            color: #999999;
                        }
                    }
                    .item {
                        width: 155rpx;
                        height: 60rpx;
                        font-size: $font-size-28;
                        line-height: 60rpx;
                        border-radius: 10rpx;
                        margin: 10rpx;
                        text-align: center;
                        box-sizing: border-box;
                        border: 1rpx solid #efefef;
                        float: left;
                        checkbox {
                            display: none;
                        }
                    }
                    .on {
                        border-color: $color-system;
                        color: $color-system;
                    }
                }
            }
            .row-login {
                flex: 1;
                font-size: $font-size-28;
                color: $text-color;
                text-align: left;
            }
            .row-logincode {
                flex: 1;
                font-size: $font-size-28;
                color: $text-color;
                text-align: right;
            }
            .icon-xiayibu {
                width: 88rpx;
                height: 88rpx;
                position: absolute;
                right: 0;
                top: 0;
                line-height: 88rpx;
                text-align: center;
            }
            &.text-textarea {
                background: #ffffff;
                .textarea {
                    width: 654rpx;
                    height: 180rpx;
                    background: #f7f7f7;
                    padding: 24rpx;
                    font-size: $font-size-28;
                    color: $text-color;
                    z-index: 1;
                    border-radius: 14rpx;
                }
                .textarea.hide {
                    opacity: 0;
                }
                .textarea.show {
                    color: #999999;
                }
            }
        }
        .register-picture {
            height: 102rpx;
            margin: 30rpx 0;
            width: 42%;
            float: left;
            &.zz {
                width: 100%;
            }
            .label {
                float: left;
                font-size: $font-size-28;
                color: $text-color;
                line-height: 102rpx;
                width: 150rpx;
                text-align: right;
                &.zz {
                    width: 230rpx;
                }
            }
            .upload-picture {
                float: left;
                height: 100rpx;
                .upload-none {
                    width: 100rpx;
                    height: 100rpx;
                    text-align: center;
                    line-height: 100rpx;
                    color: #999999;
                    border: 1px solid #999999;
                    border-radius: 10rpx;
                    margin: 0 20rpx;
                    .iconfont {
                        font-size: $font-size-28;
                    }
                }
                .upload-image {
                    width: 100rpx;
                    height: 100rpx;
                    border-radius: 10rpx;
                    margin: 0 20rpx;
                    position: relative;
                    image {
                        width: 100rpx;
                        height: 100rpx;
                        border-radius: 10rpx;
                    }
                    .upload-del {
                        width: 40rpx;
                        height: 40rpx;
                        position: absolute;
                        top: -20rpx;
                        right: -20rpx;
                        line-height: 40rpx;
                        text-align: center;
                        .iconfont {
                            font-size: $font-size-32;
                            color: #999999;
                        }
                    }
                }
            }
        }
        .register-input {
            width: 654rpx;
            height: 40rpx;
            padding: 24rpx;
            margin: 0 auto;
            margin-bottom: 60rpx;
            background: #f7f7f7;
            border-radius: 14rpx;
            .input {
                width: 100%;
                height: 100%;
                background: #f7f7f7;
                font-size: $font-size-28;
                line-height: 40rpx;
                color: #333333;
                border-radius: 14rpx;
            }
        }
        .register-fiexd {
            width: 100%;
            height: auto;
            position: fixed;
            bottom: 0;
            left: 0;
            z-index: 999;
            background: #ffffff;
        }
        .register-btn {
            width: 100%;
            height: 88rpx;
            border-radius: 44rpx;
            font-size: $font-size-28;
            line-height: 88rpx;
            color: #ffffff;
            margin: 0 auto;
            text-align: center;
            background: $btn-confirm;
            margin-top: 96rpx;
            &.none {
                border: 1px solid $color-system;
                background: #ffffff;
                color: $color-system;
                margin-top: 0;
            }
            &.sub {
                margin-top: 0;
            }
        }
    }
}
</style>