gypsy-crm-frontend-vu/pages/customer/create-account.vue

<template>
    <cwg-page-wrapper class="create-page" :isHeaderFixed="true">
        <uni-card class="create-content" :margin="0" :spacing="0">
            <view class="content-title">
                Create A New Account
            </view>
            <uni-row class="demo-uni-row">
                <cwg-match-media :min-width="991">
                </cwg-match-media>
                <uni-col :xs="24" :sm="24" :md="12" :lg="10" :xl="8" class="right-f">
                    <navigator url="/pages/login/regist" class="account-tip">
                        {{ t("signin.words") }}
                        <text>{{ t("signin.signup") }}</text>
                    </navigator>
                    <cwg-match-media :min-width="791">

                    </cwg-match-media>
                </uni-col>
            </uni-row>
        </uni-card>

    </cwg-page-wrapper>
</template>
<script setup>
import { ref, onMounted, computed } from "vue";
import QrCode from "@/components/QrCode.vue";
import { post } from "@/utils/request";
import { userToken } from "@/composables/config";
import { userApi } from "@/api/user";
import { ucardApi } from "@/api/ucard";
import useUserStore from "@/stores/use-user-store";
import useRouter from "@/hooks/useRouter";
import { useI18n } from "vue-i18n";
import logoImage from "/static/images/logo3.png";
const router = useRouter();
const { t } = useI18n();
const userStore = useUserStore();
// 响应式表单数据
const form = ref({
    loginName: "",
    password: "",
});

function submit() {
    if (!form.value.loginName) {
        uni.$u.toast(t("signin.form.email"));
        return;
    }
    if (!form.value.password) {
        uni.$u.toast(t("signin.form.password"));
        return;
    }

    handleLogin();
}

const fetchUserList = (params) => post("/Login/AcctLogin", params);
async function handleLogin() {
    try {
        const res = await userApi.login({
            loginName: form.value.loginName,
            password: form.value.password,
        });
        if (res.code === 200) {
            userToken.value = res.data;
            uni.$u.toast(t("login.msg0_1"));
            getUserInfo();
            reasonsRefusalList();
            if (remenber.value.length) {
                userStore.saveAccountInfo({
                    loginName: form.value.loginName,
                    password: form.value.password,
                    rememberPassword: true,
                });
            } else {
                userStore.saveAccountInfo({
                    loginName: "",
                    password: "",
                    rememberPassword: false,
                });
            }
            //  console.log(1111);
        } else {
            //  console.log(12112);
        }
    } catch (error) {
        //  console.log(error, 19089);
    }
}
async function getUserInfo() {
    try {
        const res = await ucardApi.getSingle();
        userStore.saveUserInfo(res.data);
        if (res.code === 200) {
            if (!res.data || res.data.approveStatus != 2) {
                router.push("/pages/mine/improve");
            }
        } else {
            uni.$u.toast(res.msg || t("login.msg0"));
        }
    } catch (error) {
        //  console.log(error, 111);
    }
}
async function reasonsRefusalList() {
    try {
        const res = await ucardApi.reasonsRefusalList();
        if (res.code === 200) {
            pickFields(res.data);
        } else {
            uni.$u.toast(res.msg || t("login.msg0"));
        }
    } catch (error) {
        //  console.log(error, 111);
    }
}
function pickFields(source, fields = ['content', 'enContent']) {
    const result = {}

    Object.entries(source).forEach(([key, value]) => {
        result[key] = fields.reduce((acc, f) => {
            acc[f] = value[f] ?? null
            return acc
        }, {})
    })
    userStore.saveReasonsOptions(result);
}

onMounted(() => {
    const accountInfo = userStore.accountInfo;
    if (accountInfo?.rememberPassword) {
        form.value.loginName = accountInfo?.loginName || "";
        form.value.password = accountInfo?.password || "";
        remenber.value = ["记住我"];
    } else {
        form.value.loginName = "";
        form.value.password = "";
        remenber.value = [];
    }
});
const inputType = ref("password");
</script>


<style lang="scss" scoped>
@import "@/uni.scss";

.create-page {
    height: 100vh;
    border: none;
    padding: 0;
}

.create-content {
    margin: 0;
}

.demo-uni-row {
    margin: 0 !important;

    .left-bg {
        height: calc(100vh - 60px);
        background-image: url(/static/images/login-bg.gif);
        background-repeat: no-repeat;
        background-size: cover;
        background-position: center center;

        .left-box {
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;

            .h1 {
                // text-align: center;
                line-height: 20px;
                color: #fff;
                font-size: 30px;
                margin-top: 30px;
                font-size: 700;
                line-height: 1.5;
            }

            .h6 {
                text-align: start;
                line-height: 20px;
                color: #fff;
                font-size: 14px;
                margin-top: 10px;
            }

            .company {
                padding: px2rpx(40) 0 px2rpx(50) 0;
                position: relative;
                align-items: flex-start !important;
            }
        }

        .left-content {
            .h1 {
                // text-align: center;
                line-height: 20px;
                color: #fff;
                font-size: 30px;
                margin-top: 30px;
                font-size: 700;
                line-height: 1.5;
            }

            .h6 {
                line-height: 20px;
                color: #fff;
                font-size: 14px;
                margin-top: 10px;
            }
        }
    }

    .right-f {
        background-color: #fff;
        padding: 0 px2rpx(24);
        box-sizing: border-box;

        .account {
            background-color: #ffffff;
            position: relative;
            height: calc(100vh - 60px);
            display: flex;
            flex-direction: column;
            justify-content: center;
            padding: 0 10%;

            .company {
                padding: px2rpx(50) 0 px2rpx(20) 0;
                position: relative;
                align-items: center !important;
            }

            .company-icon {
                width: px2rpx(234);
            }
        }
    }
}

.bottom-box {
    width: 100%;
    height: 60px;
    background-color: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #000;

    .bottom-title {

        text-align: center;
        font-size: px2rpx(14);
        font-weight: 500;
        line-height: 1.5;
        color: #666666;

    }

    .ellipsis {
        width: px2rpx(200);
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .cwg-button {
        width: 120px !important;
        padding: px2rpx(4) 0 !important;
    }
}




button {
    background-color: #ea002a;
    font-size: px2rpx(14);
    font-weight: normal;
    height: px2rpx(44);
    line-height: px2rpx(44);
}

.company {
    padding: px2rpx(50) 0 px2rpx(200) 0;
    position: relative;
    align-items: flex-start !important;
}

.logo {
    margin-left: px2rpx(48);
}

.title {
    margin: px2rpx(32) 0;
    font-size: px2rpx(24);
    font-weight: bolder;
    color: #e4e4e4;
    text-align: center;

    i {
        margin-right: px2rpx(10);
    }

    .tit1 {
        font-size: px2rpx(34);
        line-height: 1.5;
        font-weight: bold;
        color: #000000;
    }

    .tit2 {
        font-size: px2rpx(16);
        line-height: 1.5;
        color: #cecece;
        font-weight: 500;
    }
}

.qr-title {
    font-size: px2rpx(16);
    line-height: 1.5;
    color: #cecece;
    font-weight: 500;
    text-align: center;
    margin: px2rpx(40) 0;
    display: flex;
    align-items: center;
    justify-content: center;

    .line {
        flex: 1;
        height: 1px;
        background-color: #e4e4e4;
    }

    .qr-tit2 {
        margin: 0 px2rpx(12);

    }

}

.input {
    height: px2rpx(44);
    border-radius: px2rpx(8);
    background: #f7f8fa;
    padding: 0 px2rpx(20) !important;
    position: relative;
}

.account-icon {
    width: px2rpx(12);
    height: px2rpx(14) !important;
    margin-right: px2rpx(5);
}

:deep(.u-input__content__prefix-icon) {
    height: px2rpx(20);
}

.regiset-btn {
    margin: px2rpx(20) 0;
}

.account-tip {
    color: #666666;
    font-size: px2rpx(14);
    text-align: center;

    text {
        color: #ea002a;
    }
}

:deep(.u-form-item__body) {
    padding: 0 !important;
    padding-bottom: px2rpx(24) !important;
}

:deep(.wcg-checkbox) {
    padding: 0 !important;
}

.cwg-button {
    padding: px2rpx(34) 0 !important;
}
</style>