index.vue

<template>
  <view class="login-container">
    <!-- #ifdef APP-PLUS -->
    <!-- <view class="platform-switch" @tap="()=>changeSwitchShow('open')">
      <uv-text :text="t('app.login.platformSwitch')" color="#202328" size="28rpx"></uv-text>
      <uv-icon name="arrow-down-fill" color="#202328" size="16rpx" style="margin-left: 6rpx;"></uv-icon>
    </view>
    <view class="mark" v-if="platformSwitchShow">
      <view class="switch-block">
        <uv-icon name="close" class="c-icon" color="#202328" size="36rpx"
          @tap="()=>changeSwitchShow('close')"></uv-icon>
        <view class="s-inner">
          <view class="s-title">{{ t('app.login.platformSwitch') }}</view>
          <view class="s-desc">{{ t('app.login.platformSwitchTips') }}</view>
          <view class="plat-item flex" style="margin: 30rpx 0 36rpx;" :class="{'is-check':platType === 'saas'}"
            @tap="()=>handleChangeIP('saas')">
            <image src="/static/common/saas.png" class="p-img" mode="widthFix"></image>
            <text class="p-i-text">{{ t('app.login.saasPlatform') }}</text>
          </view>
          <view class="plat-item" :class="{'is-check':platType === 'private'}" @tap="()=>handleChangeIP('private')">
            <view class="flex">
              <image src="/static/common/private.png" class="p-img" mode="widthFix"></image>
              <text class="p-i-text">{{ t('app.login.privatePlatform') }}</text>
            </view>
            <view style="margin-top: 16rpx;" v-if="platType === 'private'">
              <uv-input v-model="privateIp" :placeholder="t('app.login.privatePlatformInputTips')"
                custom-style="height: 60rpx;background: #F2F3F6;border-radius: 8rpx;border:none;" />
            </view>
          </view>
          <view class="confirm-btn" @tap="handleChangePlat">{{ t('button.confirm') }}</view>
        </view>

      </view>
    </view> -->
    <!-- #endif -->
    <StatusBarVue />
    <view class="page-title-part">
      <!-- <image :src="loginLogo" style="width: 170rpx;height: 46rpx;margin-right: 18rpx;" mode=""></image> -->
      <view class="page-title">{{ t('app.login.welcome') }}</view>
    </view>
    <uv-form labelPosition="left" :model="formModel" :rules="rules" ref="formRef" labelWidth="0" :borderBottom="false">
      <!-- #ifdef APP-PLUS -->
      <!--      <uv-form-item label="">
        <uv-input class="login-input" v-model="serverIP" placeholder="请输入中心地址" border="none"
          customStyle="background-color: #F6F7F9;height: 96rpx;padding-left: 30rpx;"
          placeholderStyle="color: #6D778F;font-size: 28rpx">
        </uv-input>
      </uv-form-item> -->
      <!-- #endif -->
      <uv-form-item label="" prop="loginName">
        <!-- #ifdef MP-WEIXIN -->
        <uv-input class="login-input" v-model="formModel.loginName" :placeholder="t('rules.loginName')" border="none"
          customStyle="background-color: #F6F7F9;height: 96rpx;padding-left: 30rpx;flex: 0 1 auto"
          placeholderStyle="color: #6D778F;font-size: 28rpx">
        </uv-input>
        <!-- #endif -->
        <!-- #ifndef MP-WEIXIN -->
        <uv-input class="login-input" v-model="formModel.loginName" :placeholder="t('rules.loginName')" border="none"
          customStyle="background-color: #F6F7F9;height: 96rpx;padding-left: 30rpx;"
          placeholderStyle="color: #6D778F;font-size: 28rpx">
        </uv-input>
        <!-- #endif -->

        <!-- customStyle="background-color: #F6F7F9;height: 96rpx;padding-left: 30rpx" -->
      </uv-form-item>
      <uv-form-item label="" prop="password">
        <!-- #ifdef MP-WEIXIN -->
        <uv-input class="login-input" v-model="formModel.password" :password="isPasswordType"
          :placeholder="t('rules.password')" border="none"
          customStyle="background-color: #F6F7F9;height: 96rpx;padding-left: 30rpx;flex: 0 1 auto"
          placeholderStyle="color: #6D778F;font-size: 28rpx">
        <!-- #endif -->
          <!-- #ifndef MP-WEIXIN -->
          <uv-input class="login-input" v-model="formModel.password" :password="isPasswordType"
            :placeholder="t('rules.password')" border="none"
            customStyle="background-color: #F6F7F9;height: 96rpx;padding-left: 30rpx;"
            placeholderStyle="color: #6D778F;font-size: 28rpx">
          <!-- #endif -->
            <template v-slot:suffix>
              <view @click="togglePassword" style="margin-right: 34rpx;">
                <uv-icon v-if="!isPasswordType" name="eye" size="40rpx"></uv-icon>
                <uv-icon v-else name="eye-off-outline" size="40rpx"></uv-icon>
              </view>
            </template>
          </uv-input>
      </uv-form-item>

      <!-- 忘记密码 -->
      <view class="forget-password">
        <!-- <view v-if="!isLoginSuccess" class="login-info-tips">用户名或密码有误，登录失败！</view> -->
        <view class="remember-password">
          <uv-checkbox-group v-model="rememberValue" shape="square">
            <uv-checkbox shape="circle" activeColor="#387CF5" size="15" labelSize="26rpx" labelColor="#90949D" name="remember"
              :label="t('login.rememberPw')"></uv-checkbox>
          </uv-checkbox-group>
        </view>
        <view class="forget-password-text" @click="handleForgetPwd">{{ t('login.forgotPassword') }}?</view>
      </view>

      <uv-button type="primary" :text="t('login')" @click="handleSubmit"></uv-button>
      <!-- <uv-button type="primary" text="确定" @tap="handleLogin"></uv-button> -->

      <!-- 同意协议 -->
      <view class="agreement-box">
        <!-- <uv-radio name="agreement" activeColor="green" label="已阅读"></uv-radio> -->
        <uv-checkbox-group v-model="agreementValue" size="15" placement="column" customStyle="max-width: 20px;">
          <uv-checkbox activeColor="#3277FB" name="agree" label="" shape="circle"></uv-checkbox>
        </uv-checkbox-group>
        <text @click="toggleAgree" style="color: #90949D;">{{ t('app.login.readedAndAgree') }}</text>
        <!-- <text style="color: #4277F7;" @click="openLink('user')">《vStore用户协议》</text>和 -->
        <text style="color: #4277F7" @click="openLink('privacy')">《{{t('app.login.privacyAgreement')}}》</text>
        <!-- <uv-link style="padding: 0px; margin: 0px; max-width: 108px;" fontSize="12" href="https://www.uvui.cn" text="《vStore用户协议》"></uv-link>
				<uv-text text="和" size="12" style="margin: 0px;padding: 0px;max-width: 12px;"></uv-text>
				<uv-link style="padding: 0px; margin: 0px" fontSize="12" href="https://www.uvui.cn" text="《vStore隐藏协议》"></uv-link> -->
      </view>
    </uv-form>

    <!-- 同意协议 -->
    <uv-popup ref="agreementPopupRef" mode="center" round="8" custom-style="width: 80%;">
      <view style="padding: 23px;">
        <view class="popup-title"
          style="font-size: 23px;color: #202328;text-align: center;font-weight: 600;margin-bottom: 20px;">
          {{ t('app.login.accountPasswordLogin') }}
        </view>
        <view class="popup-content">
          {{ t('app.login.readedAndAgree') }}
          <!-- <uv-link style="padding: 0px; margin: 0px;display: inline-block;" fontSize="14" href="https://www.uvui.cn" text="《用户协议》"></uv-link> -->
          <!-- <text style="color: #4277F7;" @click="openLink('user')">《用户协议》</text>和 -->
          <text style="color: #4277F7" @click="openLink('privacy')">《{{t('app.login.privacyAgreement')}}》</text>
          {{t('app.login.verifyTips')}}
        </view>
        <view class="button-group" style="margin-top: 20px;">
          <uv-button type="primary" :text="t('app.login.agreeAndLogin')" style="margin-bottom: 10px;"
            @click="handleAgree"></uv-button>
          <uv-button :plain="true" :hairline="true" :text="t('app.login.disagree')" customStyle="border: none;"
            @click="handleRefuse"></uv-button>
        </view>
      </view>
    </uv-popup>

    <!-- 用户名和密码错误 -->
    <uv-modal ref="loginErrorModalRef" :content="t('Message.userNameOrPWDError')"></uv-modal>

    <view class="i18n-switch" @tap="handleSwitchI18n">
      <image :src="currentLangImg" style="width: 40rpx;" mode="widthFix"></image>
      <text>{{ currentLangText }}</text>
      <uv-icon name="arrow-down-fill" size="12"></uv-icon>
    </view>

    <I18nPopVue ref="i18nRef" reload-page="/pages/login/index" />
  </view>
</template>

<script setup>
  import {
    computed,
    nextTick,
    ref,
    watch,
  } from 'vue';
  import {
    onLoad
  } from '@dcloudio/uni-app';
  import {
    w_md5
  } from "@/utils"
  import {
    doLoginApi,
    doLoginCheckNameApi,
    getUserAccountsApi,
    getMallByGroupAndLabelApi,
    bindClientIdApi
  } from '@/api';
  import loginLogo from '@/static/login/login_2x_logo.png'
  import ipFileHooks from './ipFileHooks';
  import StatusBarVue from '@/components/StatusBar.vue';
  import I18nPopVue from '@/components/I18nPop.vue';
  import {
    t
  } from '@/plugins/index.js'

  const i18nRef = ref()
  const handleSwitchI18n = () => {
    i18nRef.value?.handleOpenI18n()
  }
  const currentLangText = computed(() => {
    return i18nRef.value?.currentLangText || ''
  })
  const currentLangImg = computed(() => {
    return i18nRef.value?.currentLangImg || ''
  })

  const {
    serverIP,
    platType,
    initServerConfig,
    validateIP,
    writeConfigFile,
    checkConfigFile
  } = ipFileHooks()

  // #ifdef APP-PLUS
  onLoad(async () => {
    // 1、读取文件判断有没有serverConfig.json的文件
    // 2、如果没有，生成serverConfig.js文件将https://store.keliuyun.com放在文件中
    // 3、读取serverConfig.json文件，将ip放在input框中
    // 4、点击登录，将ip存储在serverConfig.js文件中
    await initServerConfig()
  })
  // #endif



  // 登录功能
  const formModel = ref({
    // loginName: 'midea1',
    // password: 'midea1@123',
    // loginName: '陈岩',
    // password: 'Qwertyui1.',
    loginName: '',
    password: '',
  })
  const rules = computed(() => {
    return {
      loginName: {
        type: 'string',
        required: true,
        message: t('rules.loginName'),
        trigger: ['blur']
      },
      password: {
        type: 'string',
        required: true,
        message: t('rules.password'),
        trigger: ['blur']
      },
    }

  })

  const loginErrorModalRef = ref(null)
  const isLoginSuccess = ref(true) // 默认值
  // const isLoginSuccess = ref(false)
  const rememberValue = ref(uni.getStorageSync('remember_name') ? ['remember'] : [])
  const agreementValue = ref([])
  const formRef = ref(null)
  const agreementPopupRef = ref(null)

  // 密码框
  const isPasswordType = ref(true)
  const togglePassword = () => {
    isPasswordType.value = !isPasswordType.value
  }

  const handleSubmit = async () => {
    /**
     * 1. 判断已阅读是否勾选，未勾选则弹窗提示
     * 2. 弹至登陆验证页面，滑动验证
     * 3. 调用接口，登录系统
     */
    await checkLoginInfo()
  }
  const checkLoginInfo = () => {
    // 如果有错误，会在catch中返回报错信息数组，校验通过则在then中返回true
    formRef.value.validate().then(async (res) => {
      if (!agreementValue.value.includes('agree')) {
        // 展示弹窗
        if (agreementPopupRef.value) {
          agreementPopupRef.value.open();
        }
        return false
      }


      // 记住密码
      if (rememberValue.value.includes('remember')) {
        uni.setStorageSync('remember_name', formModel.value.loginName)
        uni.setStorageSync('remember_password', formModel.value.password)
      } else {
        uni.removeStorageSync('remember_name')
        uni.removeStorageSync('remember_password')
      }

      const name = formModel.value.loginName;
      const pwd = w_md5.hex_md5_32(formModel.value.password + 'AdunceA');

      nextTick(() => {
        doLogin({
          loginName: name,
          password: pwd
        })
      })
      // uni.navigateTo({
      // 	url: `/pages/login/sliderVerify?loginName=${name}&password=${pwd}`,
      // })
    }).catch(errors => {
      console.log(errors);
      uni.showToast({
        icon: 'error',
        title: t('app.login.verifyError')
      })
    })
  }

  onLoad((options) => {
    // 设置登录失败提示
    if (options.isLoginSuccess === '0') {
      isLoginSuccess.value = false
      nextTick(() => {
        // TODO: 登录失败，不应有message信息提示了
        // 需要测试功能
        loginErrorModalRef.value.open()
      })
    }

    /* setTimeout(() => {
    	agreementPopupRef.value.open();
    }) */
    // console.log(w_md5.hex_md5_32('111111'));
    const auth = uni.getStorageSync('Authorization')
    if (auth) {
      uni.switchTab({
        url: '/pages/home/index'
      })
    } else {
      const rememberName = uni.getStorageSync('remember_name')
      const rememberPassword = uni.getStorageSync('remember_password')
      // 记住密码
      if (rememberName && rememberPassword) {
        formModel.value.loginName = rememberName
        formModel.value.password = rememberPassword
      } else if (options.loginName) {
        // 需显用户名
        formModel.value.loginName = options.loginName
      }
      //  else {
      // 	formModel.value.loginName = ''
      // }
    }
  })


  // 用户协议
  const handleAgree = () => {
    agreementValue.value = ['agree']
    agreementPopupRef.value.close();

    // 调用登录表单
    checkLoginInfo()
  }
  const handleRefuse = () => {
    agreementValue.value = []
    agreementPopupRef.value.close();
  }
  const toggleAgree = () => {
    if (agreementValue.value.length > 0) {
      agreementValue.value = []
    } else {
      agreementValue.value = ['agree']
    }
  }
  const openLink = (type) => {
    uni.navigateTo({
      url: `/subPackages/accountGroup/pages/privacy/index`,
    })

    // let url = 'https://vionvision.com/Privacy.html'

    // if (process.env.VUE_APP_PLATFORM === 'h5') {
    // 	window.open(url);
    // } else if (process.env.VUE_APP_PLATFORM === 'app-plus') {
    // 	plus.runtime.openURL(url);
    // } else {
    // 	plus.runtime.openURL(url);
    // }
  }

  // 忘记密码
  const handleForgetPwd = () => {
    uni.navigateTo({
      url: `/subPackages/accountGroup/pages/login/forget/index?loginName=${formModel.value.loginName}`,
    })
  }

  // 登录业务代码
  const doLogin = async (loginParams) => {
    try {
      uni.showLoading({
        mask: true,
        title: t('navData.load')
      })
      console.log('dologin');
      const {
        code,
        data
      } = await doLoginApi(loginParams)
      if (code === 200) {
        uni.hideLoading()
      }
      const {
        atoken,
        user
      } = data
      uni.setStorageSync('Authorization', atoken)
      uni.setStorageSync('user', JSON.stringify(user))

      const {
        data: accountList
      } = await getUserAccountsApi({
        status: 1
      })

      if (accountList.length > 0) {
        // 设置默认集团
        uni.setStorageSync('account', JSON.stringify(accountList[0]))
        uni.setStorageSync('account_num', `${accountList.length}`)
        initStoreStorageData(accountList[0])
      }
      // #ifdef APP-PLUS
      const clientInfo = uni.getDeviceInfo()
      await bindClientIdApi({
        clientId: uni.getStorageSync('clientId'),
        clientType: clientInfo.osName, // ios or android
        deviceInfo: JSON.stringify(clientInfo), // 备用传值
        language: uni.getStorageSync('lang') || '',
        status: 1 // 是否有效 1：有效  0： 无效
      })
      // #endif
      uni.switchTab({
        url: '/pages/home/index'
      })
    } catch (e) {
      console.log(e);
    } finally {
      uni.hideLoading()
    }
  }
  // 设置报表页面默认门店
  async function initStoreStorageData(account) {
    try {
      const {
        data: storeData
      } = await getMallByGroupAndLabelApi({
        accountId: account.id,
        groupId: -1
      })
      if (storeData.length > 0) {
        uni.setStorageSync('store', JSON.stringify(storeData?.[0]))
      }

    } catch (e) {
      console.log(e)
    }
  }
  // #ifdef APP-PLUS
  const platformSwitchShow = ref(false)
  // 判断是否进行了平台切换
  const originFlag = ref('')
  const changeFlag = ref('')
  const changeSwitchShow = async (type) => {
    if (type === 'open') {
      const fileExists = await checkConfigFile()
      console.log(fileExists)
    }

    if (!platformSwitchShow.value) {
      platType.value = uni.getStorageSync('platType')
      privateIp.value = platType.value === 'saas' ? '' : serverIP.value
    }
    platformSwitchShow.value = !platformSwitchShow.value

    if (type === 'open') {
      originFlag.value = platType.value
      changeFlag.value = platType.value
    }
  }

  const handleChangeIP = (type) => {
    platType.value = type
  }
  const privateIp = ref('')
  const handleChangePlat = async () => {
    try {
      if (platType.value === 'saas') {
        await writeConfigFile('https://store.keliuyun.com', 'saas', () => changeSwitchShow())
        uni.showToast({
          icon: 'none',
          title: t('app.login.usePlatformTips').replace('{value}', t('app.login.saasPlatform')) // '使用Saas云平台地址'
        })
      } else {
        if (!validateIP(privateIp.value)) {
          uni.showToast({
            icon: 'none',
            title: t('app.login.privatePlatformIpErrorTips') // '私有部署地址错误，请检查后重试'
          })
          return false
        } else {
          serverIP.value = privateIp.value
          await writeConfigFile(privateIp.value, platType.value, () => changeSwitchShow())
          uni.showToast({
            icon: 'none',
            title: t('app.login.usePlatformTips').replace('{value}', t('app.login.privatePlatform'))
          })
        }
      }
      changeFlag.value = platType.value
      if (changeFlag.value !== originFlag.value) {
        formModel.value = {
          loginName: '',
          password: '',
        }
        rememberValue.value = []
        uni.removeStorageSync('remember_name')
        uni.removeStorageSync('remember_password')

      }
    } catch (e) {
      console.log(e);
    } finally {
      console.log(1);
    }
  }
  // #endif
</script>

<style lang="scss" scoped>
  .login-container {
    padding: 200rpx 50rpx 20rpx 50rpx;
    background-color: #FFF;
    background-image: url('@/static/login/login-bg-2x.png');
    /* #ifdef MP-WEIXIN */
    // background-image: url('https://store.keliuyun.com/download/app/wechat/login/login-bg-2x.png');
    /* #endif */
    /* #ifndef MP-WEIXIN */
    // background-image: url('/static/login/login-bg-2x.png');
    /* #endif */
    background-repeat: no-repeat;
    background-size: contain;
    position: relative;
  }

  .mark {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 999;
    display: flex;
    justify-content: center;

    .switch-block {
      background-color: #fff;
      overflow: hidden;
      width: 700rpx;
      height: fit-content;
      margin-top: 45%;
      padding: 44rpx 40rpx;
      border-radius: 20rpx;
      position: relative;

      .c-icon {
        position: absolute;
        right: 26rpx;
        top: 26rpx;
      }

      // &::before {
      //   display: block;
      //   position: absolute;
      //   top: 0;
      //   left: 0;
      //   content: '';
      //   width: 100%;
      //   height: 138rpx;
      //   z-index: 90;
      //   background: linear-gradient(180deg, #DAE9FF 0%, rgba(254, 254, 255, 0) 100%);
      // }

      .s-title {
        font-weight: 600;
        font-size: 36rpx;
        color: #202328;
        line-height: 50rpx;
        margin-bottom: 12rpx;
      }

      .s-desc {
        font-weight: 400;
        font-size: 24rpx;
        color: #90949D;
        line-height: 34rpx;
      }

      .plat-item {
        padding: 14rpx 20rpx;
        margin-bottom: 36rpx;
        width: 100%;
        border-radius: 12rpx;
        border: 2rpx solid #E1E4EA;

        .p-img {
          width: 68rpx;
          height: 68rpx;
        }

        .p-i-text {
          padding-left: 20rpx;
          font-weight: 400;
          font-size: 28rpx;
          color: #202328;
        }
      }

      .flex {
        display: flex;
        flex-direction: row;
        align-items: center;
      }

      .confirm-btn {
        width: 100%;
        height: 80rpx;
        line-height: 80rpx;
        text-align: center;
        font-size: 26rpx;
        background: linear-gradient(90deg, #719FF2 0%, #387CF5 100%);
        border-radius: 12rpx;
      }

      .is-check {
        border-color: #5088ff;
        position: relative;

        &::after {
          display: block;
          content: '';
          position: absolute;
          right: 0;
          top: 0;
          width: 48rpx;
          height: 48rpx;
          background: url('/static/common/platform-checked.png') no-repeat;
          background-size: 100% 100%;
        }
      }
    }
  }

  .platform-switch {
    position: absolute;
    right: 26rpx;
    top: calc(var(--status-bar-height) + 36rpx);
    display: flex;
    flex-direction: row;
  }

  .forget-password {
    display: flex;
    align-items: center;
    font-size: 26rpx;
    color: #202328;
    margin-bottom: 60rpx;

    display: flex;
    justify-content: space-between;

    .login-info-tips {
      color: #FF3000;
    }
  }

  .forget-password-text {
    text-align: right;
    color: #90949D;
  }

  .page-title-part {
    position: relative;
    margin-bottom: 60rpx;
    display: flex;
    align-items: center;
  }

  .page-title {
    font-size: 46rpx;
    font-weight: bold;
    // font-family: PingFang_Bold;
    color: #202328;
  }

  .page-underline {
    position: absolute;
    bottom: -2px;
    height: 16rpx;
    width: 120rpx;
    border-radius: 8rpx 4rpx 8rpx 4rpx;
    /* background-color: black; */
    background-image: linear-gradient(90deg, #387CF5, #CDDFFF);
  }

  .agreement-box {
    display: flex;
    flex-direction: row;
    justify-content: center;
    font-size: 26rpx;
    align-items: center;
    margin-top: 32rpx;
    margin-bottom: 28rpx;
  }

  .i18n-switch {
    position: fixed;
    bottom: 80rpx;
    left: 0;
    width: 750rpx;
    display: flex;
    justify-content: center;
    gap: 10rpx;
    align-items: center;
  }
</style>