gypsy-crm-frontend-vu/pages/login/index.vue

<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 customStyle = {
  height: "44px",
  "border-radius": "8px",
  background: "#f7f8fa",
  padding: "0 20px !important",
  position: "relative",
};
const remenber = ref([]);
const checkboxChange = (e) => {
  remenber.value = e;
};
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 {
        router.push("/pages/card/index");
      }
    } 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>

<template>
  <cwg-page-wrapper class="login-page" :isHeaderFixed="true" :isLoginPage="true">
    <uni-row class="demo-uni-row">
      <cwg-match-media :min-width="991">
        <uni-col :xs="24" :sm="24" :md="12" :lg="14" :xl="16" class="left-bg">
          <view class="company logo u-flex-y u-flex-y-center">
            <image src="/static/images/logo4.png" class="company-icon" mode="widthFix"></image>
          </view>
          <view class="left-box">
            <view class="left-content">
              <view class="h1">
                <text>{{ t('newLoop.item12') }}</text>
                <br />
                <text class="color-white">{{ t('newLoop.item13') }}</text>
              </view>
              <view class="h6 text-white">{{ t('newLoop.item14') }}</view>
              <view class="company u-flex-y u-flex-y-center">
                <image src="/static/images/trust-pilot.png" class="company-icon" mode="widthFix"></image>
              </view>
            </view>
          </view>
        </uni-col>
      </cwg-match-media>
      <uni-col :xs="24" :sm="24" :md="12" :lg="10" :xl="8" class="right-f">
        <view class="account">
          <cwg-match-media :max-width="991">
            <view class="company u-flex-y u-flex-y-center">
              <image src="/static/images/logo.png" class="company-icon" mode="widthFix"></image>
            </view>
          </cwg-match-media>
          <view class="title">
            <view class="tit1">{{ t('newSignin.item1') }}</view>
            <view class="tit2">{{ t('newSignin.item2') }}</view>
          </view>
          <view>
            <up-form :model="form" ref="uFormRef">
              <up-form-item label="" prop="loginName">
                <up-input :customStyle="customStyle" v-model="form.loginName" border="none"
                  :placeholder="t('signin.form.email')">
                  <template #prefix>
                    <cwg-icon name="email-outline" :size="20" color="#000" />
                  </template>
                </up-input>
              </up-form-item>

              <up-form-item label="" prop="password">
                <up-input :customStyle="customStyle" v-model="form.password" :type="inputType" border="none"
                  :placeholder="t('signin.form.password')">
                  <template #prefix>
                    <cwg-icon name="lock-outline" :size="20" color="#000" />
                  </template>
                </up-input>
              </up-form-item>
            </up-form>
          </view>
          <view class="u-flex u-flex-between u-flex-y-center mb1">
            <view class="check-box">
              <up-checkbox-group v-model="remenber" @change="checkboxChange">
                <up-checkbox size="14" labelSize="14" labelColor="#666666" activeColor="#ea002a"
                  :label="t('newSignin.item5')" name="记住我" class="wcg-checkbox"></up-checkbox>
              </up-checkbox-group>
            </view>
            <navigator url="/pages/login/reset" class="account-tip">
              <text>{{ t("signin.forget") }}</text>
            </navigator>
          </view>
          <view class="cwg-button">
            <u-button type="primary" class="" @click="submit">
              {{ t("signin.login") }}
            </u-button>
          </view>
          <navigator url="/pages/login/regist" class="account-tip">
            {{ t("signin.words") }}
            <text>{{ t("signin.signup") }}</text>
          </navigator>
          <cwg-match-media :min-width="791">


            <view class="qr-container">
              <view class="qr-title">
                <view class="line"></view>
                <view class="qr-tit2">{{ t('newSignin.item2') }}</view>
                <view class="line"></view>
              </view>
              <QrCode width="200" height="200" text="cardGuide" :logo="logoImage"></QrCode>
            </view>
          </cwg-match-media>
        </view>
      </uni-col>
    </uni-row>
    <view class="bottom-box">
      <cwg-match-media :max-width="791">
        <view class="bottom-title ellipsis">{{ t('newSignin.item12') }}</view>
      </cwg-match-media>
      <cwg-match-media :min-width="791">
        <view class="bottom-title">{{ t('newSignin.item12') }}</view>
      </cwg-match-media>
      <view class="cwg-button">
        <u-button type="primary" class="" @click="">
          {{ t("News.More") }}
        </u-button>
      </view>
    </view>
  </cwg-page-wrapper>
</template>

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

.login-page {
  height: 100vh;
  border: none;
  padding: 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>