zsw-jx-store/src/subPages/login/addAuth/addAuth.vue

<template>
  <view class="addauth-root">
    <image
      src="https://image.jxc4.com/image/bb397e02027c92f5ecec1935d050ac16.png"
      mode="scaleToFill"
    />

    <jx-input class="ipt">
      <template #left>
        <text class="blod">+86</text>
      </template>
      <template #middle>
        <input
          type="text"
          v-model="mobile"
          @input="change"
          placeholder="请输入手机号"
        />
      </template>
    </jx-input>
    <button
      :class="{ active: isBangding }"
      :disabled="!isBangding"
      @tap="bangding"
    >
      绑定
    </button>

    <view class="copyright-root">
      <view
        class="center"
        :class="{ 'center-active': store.state.serveInfo.isAgreementIf }"
      >
        <label>
          <checkbox-group @change="agreement">
            <checkbox
              :checked="isAgreement"
              value="cb"
              color="#2dd091"
              style="transform: scale(0.7); border-radius: 50%"
            />我已阅读并同意
          </checkbox-group>
        </label>
        <text class="text" @tap="user">《用户协议》</text>
        <text class="text" @tap="privacy">《隐私协议》</text>

        <view
          class="lab"
          :class="{ 'lab-active': store.state.serveInfo.isAgreementIf }"
          >请勾选同意后在进行绑定</view
        >
      </view>
    </view>
  </view>
  <view class="copyright">
    <text>成都若溪科技有限公司</text>
    <text>www.jxc4.com</text>
  </view>

  <!-- 公共组件 -->
  <jx-loading />
</template>

<script lang="ts" setup >
import login from '@/api/https/login'
import useGlobalFunc from '@/composables/useGlobalFunc'
import { store } from '@/store'
import { setStorage } from '@/utils/storage'
import toast from '@/utils/toast'
import { onLoad } from '@dcloudio/uni-app'
import { onBeforeUnmount, ref } from 'vue'
const { setUserInfo, appWxLogin } = useGlobalFunc()

/*************************************************
 * 监听输入变化
 */
const isBangding = ref<boolean>(false)
function change() {
  let ruler = /^(?:(?:\+|00)86)?1[3-9]\d{9}$/
  if (ruler.test(mobile.value)) {
    isBangding.value = true
  } else {
    isBangding.value = false
  }
}

/*************************************************
 * 是否同意协议
 */
const isAgreement = ref<boolean>(false)
function agreement(e: AnyObject) {
  if (e.detail.value.length) {
    // 同意
    isAgreement.value = true
    store.commit('serveInfo/setIsAgreement', true)
    store.commit('serveInfo/setIsAgreementIf', false)
  } else {
    // 不同意
    store.commit('serveInfo/setIsAgreement', false)
    isAgreement.value = false
  }
}

/**
 * 用户协议
 */
function user() {
  let url = 'https://www.jxc4.com/managerApp/jxdjService.html'
  uni.navigateTo({ url: `/subPages/agreement/jxcs?url=${url}` })
}

/**
 * 隐私协议
 */
function privacy() {
  let url = 'https://www.jxc4.com/managerApp/jxdjPrivacy.html'
  uni.navigateTo({ url: `/subPages/agreement/jxcs?url=${url}` })
}

/*************************************************
 * 接收参数
 */
let authToken: string = ''
onLoad((options) => {
  toast('未绑定手机号，请先绑定手机号')
  authToken = options?.authToken
})

/*************************************************
 * 绑定账号
 */
const mobile = ref<string>('')
async function bangding() {
  // 是否勾选了协议
  if (!store.state.serveInfo.isAgreement) {
    // 提示用户未勾选
    let time: any = null
    store.commit('serveInfo/setIsAgreementIf', false)
    clearTimeout(time)
    uni.vibrateShort({})
    time = setTimeout(() => {
      store.commit('serveInfo/setIsAgreementIf', true)
    }, 200)
    return false
  }

  if (!isBangding.value) return
  let data = {
    authToken: authToken,
    mobile: mobile.value,
  }
  let res = await login.add_auth_bind(data)
  if (res.code == 0) {
    setStorage('token', authToken)
    newTOken()
  } else {
    toast('该用户不存在', 2)
  }
}

/*************************************************
 * 更新token
 */
let newTOkenTimer: any = null
async function newTOken() {
  appWxLogin({
    success: (data: AnyObject) => {
      // 显示自定义加载图(vuex)
      store.commit('storeInfo/jxLoadingFn', true)
      clearTimeout(newTOkenTimer)
      newTOkenTimer = setTimeout(() => {
        store.commit('storeInfo/jxLoadingFn', false)
        setUserInfo(data)
      }, 500)
    },
    bangding: () => {
      toast('该用户不存在', 2)
    },
  })
}

onBeforeUnmount(() => {
  store.commit('serveInfo/setIsAgreement', false)
  clearTimeout(newTOkenTimer)
})
</script>

<style lang="scss" scoped>
.addauth-root {
  display: flex;
  flex-direction: column;
  align-items: center;
  position: absolute;
  top: 35%;
  left: 50%;
  transform: translate(-50%, -50%);

  image {
    width: 180rpx;
    height: 180rpx;
    border-radius: 20rpx;
    box-shadow: 0rpx 0rpx 20rpx rgb(231, 231, 231);
  }

  .ipt {
    margin-top: 120rpx;
    width: 600rpx;
    height: 110rpx;
    border-bottom: 2rpx solid rgb(238, 238, 238);
    font-weight: bold;
    font-size: 38rpx;

    input {
      width: 100%;
      padding-left: 10rpx;
      font-size: 38rpx;
    }
  }

  button {
    width: 600rpx;
    margin-top: 80rpx;
    margin-bottom: 80rpx;
    font-weight: bold;
  }

  .active {
    background-color: $jx-primary !important;
    color: #fff;
  }
}

.copyright-root {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  text-align: center;
  font-size: 26rpx;

  .text {
    color: $jx-login;
  }

  .center {
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;

    .lab {
      position: absolute;
      padding: 7rpx 10rpx;
      background-color: #656a70;
      color: #fff;
      left: 0rpx;
      top: 60rpx;
      border-radius: 10rpx;
      opacity: 0;
      transition: all 0.2s;
    }

    .lab::after {
      content: '';
      position: absolute;
      width: 0;
      height: 0;
      border-left: 11rpx solid transparent;
      border-right: 11rpx solid transparent;
      border-bottom: 12rpx solid #656a70;
      left: 12rpx;
      top: -11rpx;
    }

    .lab-active {
      opacity: 1 !important;
    }
  }

  .center-active {
    animation: identifier 0.2s;
  }
}
.copyright {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  position: fixed;
  bottom: 30rpx;
  width: 100%;
  text-align: center;
  color: rgb(226, 226, 226);
  font-size: 26rpx;
  line-height: 1;
}

@keyframes identifier {
  0% {
    transform: translateX(20rpx);
  }

  20% {
    transform: translateX(0rpx);
  }

  40% {
    transform: translateX(20rpx);
  }

  60% {
    transform: translateX(0rpx);
  }

  40% {
    transform: translateX(20rpx);
  }

  100% {
    transform: translateX(0rpx);
  }
}
</style>
<style lang="scss">
page {
  background-color: #fff;
}
</style>