@uxda/appkit 4.3.6 → 4.3.8

package/src/user/components/UserBinding.vue

@@ -1,277 +1,277 @@
-<template>
-  <div class="user-binding">
-    <div class="user-binding-layout">
-      <img class="user-binding-img" :src="`https://cdn.ddjf.com/static/images/customer-center/user-${current === 1 ? 'binding' : 'auth'
-        }.png`" />
-      <nut-steps :current="current" class="user-binding-steps">
-        <nut-step title="身份认证">1</nut-step>
-        <nut-step title="换绑手机">2</nut-step>
-      </nut-steps>
-    </div>
-
-    <div class="user-binding-layout user-binding-inputlayout" style="flex: 1" v-if="current === 1">
-      <nut-form>
-        <nut-form-item label="手机号码" label-align="left">
-          <nut-input v-model="authState.mobile" placeholder="请输入手机号码" :max-length="11" readonly input-align="right" />
-        </nut-form-item>
-        <nut-form-item label="验证码" label-align="left">
-          <nut-input v-model="authState.code" placeholder="请输入验证码" :max-length="6" input-align="right">
-            <template #right>
-              <nut-button :disabled="countdownActive" class="user-binding-codebtn" type="default" v-track-click="'换绑手机-获取验证码'" @click="onAuthCode">{{
-                countdownText }}</nut-button>
-            </template>
-          </nut-input>
-        </nut-form-item>
-      </nut-form>
-
-      <nut-button class="user-binding-btn" :disabled="!authState.code" block type="primary"
-        v-track-click="'换绑手机-提交'" @click="onAuth">提交</nut-button>
-    </div>
-
-    <div class="user-binding-layout user-binding-inputlayout" style="flex: 1" v-else>
-      <nut-form>
-        <nut-form-item label="手机号码" label-align="left">
-          <nut-input v-model="bindingState.mobile" placeholder="请输入新手机号码" :max-length="11" input-align="right" />
-        </nut-form-item>
-        <nut-form-item label="验证码" label-align="left">
-          <nut-input v-model="bindingState.code" placeholder="请输入验证码" :max-length="6" input-align="right">
-            <template #right>
-              <nut-button :disabled="countdownActive1" class="user-binding-codebtn" type="default" v-track-click="'换绑手机-获取验证码'"
-                @click="onBindingCode">{{ countdownText1 }}</nut-button>
-            </template>
-          </nut-input>
-        </nut-form-item>
-      </nut-form>
-
-      <nut-button class="user-binding-btn" :disabled="!bindingState.code || !bindingState.mobile" block type="primary"
-        v-track-click="'换绑手机-提交'" @click="onBinding">提交</nut-button>
-    </div>
-  </div>
-</template>
-
-<script lang="ts" setup>
-import { ref, reactive, onMounted } from 'vue'
-import { useCountdown } from '../../shared/composables/useCountdown'
-import { useValidator } from '../../shared/composables/useValidator'
-import Taro, { showToast } from '@tarojs/taro'
-import { useHttp } from '../api'
-import { useRouter } from '@tarojs/taro'
-
-const { params } = useRouter()
-const { countdownText, startCountdown, countdownActive } = useCountdown()
-const {
-  countdownText: countdownText1,
-  startCountdown: startCountdown1,
-  countdownActive: countdownActive1,
-} = useCountdown()
-const { phoneValidator } = useValidator()
-const current = ref(1)
-
-onMounted(() => {
-  if (!params.mobile) {
-    return showToast({ title: '路径缺少mobile参数', icon: 'none' })
-  }
-  authState.mobile = params.mobile
-})
-
-/**
- * 身份认证
- */
-const authState = reactive({
-  mobile: '',
-  code: '',
-})
-function onAuth() {
-  const $http = useHttp()
-
-  // 向当前用户的手机中发送短信验证码
-  $http.post('/cas/sysAccount/verify', { verifyCode: authState.code }).then((res) => {
-    if (typeof res !== 'boolean') return
-
-    showToast({ title: '身份认证成功', icon: 'success' })
-    current.value++
-  })
-}
-function onAuthCode() {
-  const $http = useHttp()
-
-  // 向当前用户的手机中发送短信验证码
-  $http.get('/cas/sysAccount/getVerifyCodeToUserMobile').then((res) => {
-    if (typeof res !== 'boolean') return
-
-    showToast({ title: '短信发送成功,请注意查收', icon: 'none' })
-    startCountdown()
-  })
-}
-
-/**
- * 换绑手机
- */
-const bindingState = reactive({
-  mobile: '',
-  code: '',
-})
-function onBinding() {
-  const msg = phoneValidator(bindingState.mobile)
-  if (msg) {
-    return showToast({ title: msg, icon: 'none' })
-  }
-
-  const $http = useHttp()
-
-  $http
-    .post(`/cas/sysAccount/verifyAndChangeMobile`, {
-      mobile: bindingState.mobile,
-      verifyCode: bindingState.code,
-    })
-    .then((res) => {
-      if (typeof res !== 'boolean') return
-
-      showToast({ title: '换绑成功', icon: 'success' })
-      emits('success', bindingState.mobile)
-    })
-}
-function onBindingCode() {
-  const msg = phoneValidator(bindingState.mobile)
-  if (msg) {
-    return showToast({ title: msg, icon: 'none' })
-  }
-  if (params.mobile === bindingState.mobile) {
-    return showToast({ title: '新手机号码不应与旧手机号码一致', icon: 'none' })
-  }
-
-  const $http = useHttp()
-
-  // 向当前用户的手机中发送短信验证码
-  $http.get(`/cas/sysAccount/getVerifyCodeToMobile/${bindingState.mobile}`).then((res) => {
-    if (typeof res !== 'boolean') return
-
-    showToast({ title: '短信发送成功,请注意查收', icon: 'none' })
-    startCountdown1()
-  })
-}
-
-// 父组件事件
-const emits = defineEmits(['success'])
-</script>
-
-<style lang="scss">
-.user-binding {
-  height: 100vh;
-  display: flex;
-  flex-direction: column;
-  box-sizing: border-box;
-  padding: 10px 12px env(safe-area-inset-bottom, 0px);
-  --nut-cell-padding: 0;
-
-  &-img {
-    width: 100%;
-    height: 192px;
-  }
-
-  &-layout {
-    position: relative;
-    width: 100%;
-    border-radius: 4px;
-    background: #fff;
-    overflow: hidden;
-    margin-bottom: 10px;
-  }
-
-  &-inputlayout {
-    padding: 0 10px;
-    box-sizing: border-box;
-
-    .nut-input {
-      height: 40px;
-      padding: 0;
-      display: flex;
-      align-items: center;
-      font-size: 16px;
-      padding-left: 3px;
-      border-color: #f5f5f5;
-
-      .input-text {
-        width: 100%;
-      }
-    }
-  }
-
-  .nut-placeholder {
-    color: #cccccc;
-  }
-
-  .user-binding-btn {
-    position: absolute;
-    bottom: 50px;
-    left: 25px;
-    width: calc(100% - 50px);
-    font-size: 16px;
-    background: var(--app-primary-color, #017fff);
-    height: 40px;
-    line-height: 38px;
-  }
-
-  .user-binding-codebtn {
-    height: 30px;
-    font-size: 12px;
-    padding: 0;
-    width: 90px;
-    border: none;
-    color: var(--app-primary-color, #017fff);
-    background: #f2f2f2;
-  }
-
-  .user-binding-steps {
-    margin-top: 15px;
-
-    .nut-step-line {
-      background: rgba(220, 220, 220, 1);
-      left: 60%;
-      right: -40%;
-    }
-
-    .nut-step-title {
-      font-weight: bold;
-      color: rgba(0, 0, 0, 0.4);
-    }
-
-    .nut-step.nut-step-wait .nut-step-icon {
-      background: rgba(243, 243, 243, 1);
-      border-color: rgba(243, 243, 243, 1);
-      color: rgba(0, 0, 0, 0.4);
-    }
-
-    .nut-step.nut-step-process .nut-step-icon {
-      background: var(--app-primary-color, #017fff);
-      border-color: var(--app-primary-color, #017fff);
-    }
-
-    .nut-step.nut-step-process .nut-step-title {
-      color: var(--app-primary-color, #017fff);
-    }
-
-    .nut-step-head {
-      margin-bottom: 8px;
-    }
-
-    .nut-step.nut-step-finish .nut-step-title {
-      color: rgba(0, 0, 0, 0.9);
-    }
-
-    .nut-step.nut-step-finish .nut-step-line {
-      background: var(--app-primary-color, #017fff);
-    }
-
-    .nut-step.nut-step-finish .nut-step-head {
-      color: var(--app-primary-color, #017fff);
-      border-color: var(--app-primary-color, #017fff);
-    }
-
-    .nut-step-icon {
-      width: 22px;
-      height: 22px;
-    }
-  }
-}
-</style>
+<template>
+  <div class="user-binding">
+    <div class="user-binding-layout">
+      <img class="user-binding-img" :src="`https://cdn.ddjf.com/static/images/customer-center/user-${current === 1 ? 'binding' : 'auth'
+        }.png`" />
+      <nut-steps :current="current" class="user-binding-steps">
+        <nut-step title="身份认证">1</nut-step>
+        <nut-step title="换绑手机">2</nut-step>
+      </nut-steps>
+    </div>
+
+    <div class="user-binding-layout user-binding-inputlayout" style="flex: 1" v-if="current === 1">
+      <nut-form>
+        <nut-form-item label="手机号码" label-align="left">
+          <nut-input v-model="authState.mobile" placeholder="请输入手机号码" :max-length="11" readonly input-align="right" />
+        </nut-form-item>
+        <nut-form-item label="验证码" label-align="left">
+          <nut-input v-model="authState.code" placeholder="请输入验证码" :max-length="6" input-align="right">
+            <template #right>
+              <nut-button :disabled="countdownActive" class="user-binding-codebtn" type="default" v-track-click="'换绑手机-获取验证码'" @click="onAuthCode">{{
+                countdownText }}</nut-button>
+            </template>
+          </nut-input>
+        </nut-form-item>
+      </nut-form>
+
+      <nut-button class="user-binding-btn" :disabled="!authState.code" block type="primary"
+        v-track-click="'换绑手机-提交'" @click="onAuth">提交</nut-button>
+    </div>
+
+    <div class="user-binding-layout user-binding-inputlayout" style="flex: 1" v-else>
+      <nut-form>
+        <nut-form-item label="手机号码" label-align="left">
+          <nut-input v-model="bindingState.mobile" placeholder="请输入新手机号码" :max-length="11" input-align="right" />
+        </nut-form-item>
+        <nut-form-item label="验证码" label-align="left">
+          <nut-input v-model="bindingState.code" placeholder="请输入验证码" :max-length="6" input-align="right">
+            <template #right>
+              <nut-button :disabled="countdownActive1" class="user-binding-codebtn" type="default" v-track-click="'换绑手机-获取验证码'"
+                @click="onBindingCode">{{ countdownText1 }}</nut-button>
+            </template>
+          </nut-input>
+        </nut-form-item>
+      </nut-form>
+
+      <nut-button class="user-binding-btn" :disabled="!bindingState.code || !bindingState.mobile" block type="primary"
+        v-track-click="'换绑手机-提交'" @click="onBinding">提交</nut-button>
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { ref, reactive, onMounted } from 'vue'
+import { useCountdown } from '../../shared/composables/useCountdown'
+import { useValidator } from '../../shared/composables/useValidator'
+import Taro, { showToast } from '@tarojs/taro'
+import { useHttp } from '../api'
+import { useRouter } from '@tarojs/taro'
+
+const { params } = useRouter()
+const { countdownText, startCountdown, countdownActive } = useCountdown()
+const {
+  countdownText: countdownText1,
+  startCountdown: startCountdown1,
+  countdownActive: countdownActive1,
+} = useCountdown()
+const { phoneValidator } = useValidator()
+const current = ref(1)
+
+onMounted(() => {
+  if (!params.mobile) {
+    return showToast({ title: '路径缺少mobile参数', icon: 'none' })
+  }
+  authState.mobile = params.mobile
+})
+
+/**
+ * 身份认证
+ */
+const authState = reactive({
+  mobile: '',
+  code: '',
+})
+function onAuth() {
+  const $http = useHttp()
+
+  // 向当前用户的手机中发送短信验证码
+  $http.post('/cas/sysAccount/verify', { verifyCode: authState.code }).then((res) => {
+    if (typeof res !== 'boolean') return
+
+    showToast({ title: '身份认证成功', icon: 'success' })
+    current.value++
+  })
+}
+function onAuthCode() {
+  const $http = useHttp()
+
+  // 向当前用户的手机中发送短信验证码
+  $http.get('/cas/sysAccount/getVerifyCodeToUserMobile').then((res) => {
+    if (typeof res !== 'boolean') return
+
+    showToast({ title: '短信发送成功,请注意查收', icon: 'none' })
+    startCountdown()
+  })
+}
+
+/**
+ * 换绑手机
+ */
+const bindingState = reactive({
+  mobile: '',
+  code: '',
+})
+function onBinding() {
+  const msg = phoneValidator(bindingState.mobile)
+  if (msg) {
+    return showToast({ title: msg, icon: 'none' })
+  }
+
+  const $http = useHttp()
+
+  $http
+    .post(`/cas/sysAccount/verifyAndChangeMobile`, {
+      mobile: bindingState.mobile,
+      verifyCode: bindingState.code,
+    })
+    .then((res) => {
+      if (typeof res !== 'boolean') return
+
+      showToast({ title: '换绑成功', icon: 'success' })
+      emits('success', bindingState.mobile)
+    })
+}
+function onBindingCode() {
+  const msg = phoneValidator(bindingState.mobile)
+  if (msg) {
+    return showToast({ title: msg, icon: 'none' })
+  }
+  if (params.mobile === bindingState.mobile) {
+    return showToast({ title: '新手机号码不应与旧手机号码一致', icon: 'none' })
+  }
+
+  const $http = useHttp()
+
+  // 向当前用户的手机中发送短信验证码
+  $http.get(`/cas/sysAccount/getVerifyCodeToMobile/${bindingState.mobile}`).then((res) => {
+    if (typeof res !== 'boolean') return
+
+    showToast({ title: '短信发送成功,请注意查收', icon: 'none' })
+    startCountdown1()
+  })
+}
+
+// 父组件事件
+const emits = defineEmits(['success'])
+</script>
+
+<style lang="scss">
+.user-binding {
+  height: 100vh;
+  display: flex;
+  flex-direction: column;
+  box-sizing: border-box;
+  padding: 10px 12px env(safe-area-inset-bottom, 0px);
+  --nut-cell-padding: 0;
+
+  &-img {
+    width: 100%;
+    height: 192px;
+  }
+
+  &-layout {
+    position: relative;
+    width: 100%;
+    border-radius: 4px;
+    background: #fff;
+    overflow: hidden;
+    margin-bottom: 10px;
+  }
+
+  &-inputlayout {
+    padding: 0 10px;
+    box-sizing: border-box;
+
+    .nut-input {
+      height: 40px;
+      padding: 0;
+      display: flex;
+      align-items: center;
+      font-size: 16px;
+      padding-left: 3px;
+      border-color: #f5f5f5;
+
+      .input-text {
+        width: 100%;
+      }
+    }
+  }
+
+  .nut-placeholder {
+    color: #cccccc;
+  }
+
+  .user-binding-btn {
+    position: absolute;
+    bottom: 50px;
+    left: 25px;
+    width: calc(100% - 50px);
+    font-size: 16px;
+    background: var(--app-primary-color, #017fff);
+    height: 40px;
+    line-height: 38px;
+  }
+
+  .user-binding-codebtn {
+    height: 30px;
+    font-size: 12px;
+    padding: 0;
+    width: 90px;
+    border: none;
+    color: var(--app-primary-color, #017fff);
+    background: #f2f2f2;
+  }
+
+  .user-binding-steps {
+    margin-top: 15px;
+
+    .nut-step-line {
+      background: rgba(220, 220, 220, 1);
+      left: 60%;
+      right: -40%;
+    }
+
+    .nut-step-title {
+      font-weight: bold;
+      color: rgba(0, 0, 0, 0.4);
+    }
+
+    .nut-step.nut-step-wait .nut-step-icon {
+      background: rgba(243, 243, 243, 1);
+      border-color: rgba(243, 243, 243, 1);
+      color: rgba(0, 0, 0, 0.4);
+    }
+
+    .nut-step.nut-step-process .nut-step-icon {
+      background: var(--app-primary-color, #017fff);
+      border-color: var(--app-primary-color, #017fff);
+    }
+
+    .nut-step.nut-step-process .nut-step-title {
+      color: var(--app-primary-color, #017fff);
+    }
+
+    .nut-step-head {
+      margin-bottom: 8px;
+    }
+
+    .nut-step.nut-step-finish .nut-step-title {
+      color: rgba(0, 0, 0, 0.9);
+    }
+
+    .nut-step.nut-step-finish .nut-step-line {
+      background: var(--app-primary-color, #017fff);
+    }
+
+    .nut-step.nut-step-finish .nut-step-head {
+      color: var(--app-primary-color, #017fff);
+      border-color: var(--app-primary-color, #017fff);
+    }
+
+    .nut-step-icon {
+      width: 22px;
+      height: 22px;
+    }
+  }
+}
+</style>