@uxda/appkit 1.2.73 → 1.2.75

package/src/user/components/UserBinding.vue

@@ -0,0 +1,300 @@
+<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-input
+        label="手机号码"
+        v-model="authState.mobile"
+        placeholder="请输入手机号码"
+        :max-length="11"
+        readonly
+        input-align="right"
+      />
+      <nut-input
+        label="验证码"
+        v-model="authState.code"
+        placeholder="请输入验证码"
+        :max-length="6"
+        input-align="right"
+      >
+        <template #button>
+          <nut-button
+            :disabled="countdownActive"
+            class="user-binding-codebtn"
+            type="default"
+            @click="onAuthCode"
+            >{{ countdownText }}</nut-button
+          >
+        </template>
+      </nut-input>
+
+      <nut-button
+        class="user-binding-btn"
+        :disabled="!authState.code"
+        block
+        type="primary"
+        @click="onAuth"
+        >提交</nut-button
+      >
+    </div>
+
+    <div class="user-binding-layout user-binding-inputlayout" style="flex: 1" v-else>
+      <nut-input
+        label="手机号码"
+        v-model="bindingState.mobile"
+        placeholder="请输入新手机号码"
+        :max-length="11"
+        input-align="right"
+      />
+      <nut-input
+        label="验证码"
+        v-model="bindingState.code"
+        placeholder="请输入验证码"
+        :max-length="6"
+        input-align="right"
+      >
+        <template #button>
+          <nut-button
+            :disabled="countdownActive1"
+            class="user-binding-codebtn"
+            type="default"
+            @click="onBindingCode"
+            >{{ countdownText1 }}</nut-button
+          >
+        </template>
+      </nut-input>
+
+      <nut-button
+        class="user-binding-btn"
+        :disabled="!bindingState.code || !bindingState.mobile"
+        block
+        type="primary"
+        @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 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 Taro.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) => {
+    console.log(res, 'res')
+    if (typeof res !== 'boolean') return
+
+    Taro.showToast({ title: '身份认证成功', icon: 'success' })
+    current.value++
+  })
+}
+function onAuthCode() {
+  const $http = useHttp()
+
+  // 向当前用户的手机中发送短信验证码
+  $http.get('/cas/sysAccount/getVerifyCodeToUserMobile').then((res) => {
+    if (typeof res !== 'boolean') return
+
+    Taro.showToast({ title: '短信发送成功,请注意查收', icon: 'none' })
+    startCountdown()
+  })
+}
+
+/**
+ * 换绑手机
+ */
+const bindingState = reactive({
+  mobile: '',
+  code: '',
+})
+function onBinding() {
+  const msg = phoneValidator(bindingState.mobile)
+  if (msg) {
+    return Taro.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
+
+      Taro.showToast({ title: '换绑成功', icon: 'success' })
+      emits('success', bindingState.mobile)
+    })
+}
+function onBindingCode() {
+  const msg = phoneValidator(bindingState.mobile)
+  if (msg) {
+    return Taro.showToast({ title: msg, icon: 'none' })
+  }
+  if (params.mobile === bindingState.mobile) {
+    return Taro.showToast({ title: '新手机号码不应与旧手机号码一致', icon: 'none' })
+  }
+
+  const $http = useHttp()
+
+  // 向当前用户的手机中发送短信验证码
+  $http.get(`/cas/sysAccount/getVerifyCodeToMobile/${bindingState.mobile}`).then((res) => {
+    if (typeof res !== 'boolean') return
+
+    Taro.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);
+  &-img {
+    width: 351px;
+    height: 192px;
+  }
+  &-layout {
+    position: relative;
+    width: 351px;
+    border-radius: 4px;
+    background: #fff;
+    overflow: hidden;
+    margin-bottom: 10px;
+  }
+  &-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;
+  }
+  &-codebtn {
+    height: 30px;
+    font-size: 12px;
+    padding: 0;
+    width: 90px;
+    border: none;
+    color: var(--app-primary-color, #017fff);
+    background: #f2f2f2;
+  }
+  &-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.is-text {
+      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.is-text {
+      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;
+    }
+  }
+  &-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-input-label {
+      color: #666;
+    }
+  }
+  .nut-placeholder {
+    color: #cccccc;
+  }
+}
+</style>

package/src/user/components/UserBindingSuccess.vue

@@ -0,0 +1,80 @@
+<template>
+  <div class="user-binding-success">
+    <img
+      class="user-binding-success-icon"
+      src="https://cdn.ddjf.com/static/images/customer-center/phone-icon.png"
+      alt=""
+    />
+    <div class="user-binding-success-info">
+      {{ showEncode ? encodePhone(params.mobile || '') : params.mobile }}
+    </div>
+    <div class="user-binding-success-sbtn" @click="showEncode = !showEncode">
+      {{ showEncode ? '显示' : '隐藏' }}
+    </div>
+    <nut-button class="user-binding-success-btn" type="primary" @click="toBinding"
+      >换绑手机号码</nut-button
+    >
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { onMounted, ref } from 'vue'
+import { useRouter } from '@tarojs/taro'
+import Taro from '@tarojs/taro'
+import { useEncode } from '../../shared/composables/useEncode'
+
+const { params } = useRouter()
+const { encodePhone } = useEncode()
+
+onMounted(() => {
+  if (!params.mobile) {
+    return Taro.showToast({ title: '路径缺少mobile参数', icon: 'none' })
+  }
+})
+
+const showEncode = ref(true)
+
+// 前往换绑手机号
+function toBinding() {
+  emits('binding', params.mobile)
+}
+
+// 父组件事件
+const emits = defineEmits(['binding'])
+</script>
+
+<style lang="scss">
+.user-binding-success {
+  height: 100vh;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  box-sizing: border-box;
+  background: #fff;
+  &-icon {
+    margin-top: 80px;
+    width: 50px;
+    height: 50px;
+    margin-bottom: 30px;
+  }
+  &-info {
+    font-size: 30px;
+    color: #000000;
+    font-weight: bold;
+    margin-bottom: 15px;
+  }
+  &-sbtn {
+    padding: 0 15px;
+    color: #017fff;
+    font-size: 16px;
+  }
+  &-btn {
+    margin-top: 80px;
+    width: 296px;
+    font-size: 16px;
+    background: var(--app-primary-color, #017fff);
+    height: 40px;
+    line-height: 38px;
+  }
+}
+</style>

package/src/user/components/UserEntry.vue

@@ -0,0 +1,129 @@
+<template>
+  <div class="user-entry">
+    <div class="user-entry-head">
+      <img
+        class="user-entry-head-img"
+        @click="toUser"
+        mode="aspectFit"
+        v-if="avatar"
+        :src="avatar"
+        alt=""
+      />
+      <img
+        class="user-entry-head-img"
+        mode="aspectFit"
+        v-else
+        src="https://cdn.ddjf.com/static/images/wx-yunservice/account-head.png"
+        alt=""
+      />
+      <div @click="toUser" class="user-entry-head-icon" v-if="mobile"></div>
+    </div>
+    <div class="user-entry-bd">
+      <div v-if="!mobile" class="user-entry-bd-bigtxt" @click="toLogin">
+        请登录
+        <img
+          class="user-entry-bd-bigtxt-icon"
+          mode="aspectFit"
+          src="data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNDAiIGhlaWdodD0iNDEiIHZpZXdCb3g9IjAgMCA0MCA0MSIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggb3BhY2l0eT0iMC4wMSIgZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik0wIDQwLjM1MTZINDBWMC4zNTE1NjJIMFY0MC4zNTE2WiIgZmlsbD0id2hpdGUiLz4KPHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik0xNCA4LjM1MTU2TDI2IDIwLjM1MTZMMTQgMzIuMzUxNiIgZmlsbD0iYmxhY2siIGZpbGwtb3BhY2l0eT0iMC4wMSIvPgo8cGF0aCBkPSJNMTQgOC4zNTE1NkwyNiAyMC4zNTE2TDE0IDMyLjM1MTYiIHN0cm9rZT0iI2ZmZiIgc3Ryb2tlLXdpZHRoPSIzIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiLz4KPC9zdmc+Cg=="
+          alt=""
+        />
+      </div>
+      <template v-else>
+        <div @click="toUser" class="user-entry-bd-txt">{{ name }}</div>
+        <div @click="toUser" class="user-entry-bd-smalltxt">{{ encodePhone(mobile) }}</div>
+      </template>
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { useEncode } from '../../shared/composables/useEncode'
+
+const props = withDefaults(
+  defineProps<{
+    avatar?: string
+    mobile?: string
+    name?: string
+  }>(),
+  {
+    avatar: '',
+    mobile: '',
+    name: '',
+  }
+)
+
+const { encodePhone } = useEncode()
+
+// 登录后，点击前往个人资料页
+function toUser() {
+  emits('jump')
+}
+
+// 未登录时，点击前往登录
+function toLogin() {
+  emits('login')
+}
+
+// 父组件事件
+const emits = defineEmits(['jump', 'login'])
+</script>
+
+<style lang="scss">
+.user-entry {
+  position: absolute;
+  left: 0;
+  top: 130px;
+  transform: translateY(-50%);
+  display: flex;
+  padding: 0 22px;
+  align-items: center;
+  width: 100%;
+  &-head {
+    position: relative;
+    width: 62px;
+    height: 62px;
+    margin-right: 8px;
+    &-img {
+      width: 100%;
+      height: 100%;
+      overflow: hidden;
+      border-radius: 50%;
+      border: 1.5px solid #fff;
+    }
+    &-icon {
+      position: absolute;
+      width: 15px;
+      height: 15px;
+      bottom: 2px;
+      left: 48px;
+      background: url('https://cdn.ddjf.com/static/images/wx-yunservice/edit-icon.png') center;
+      background-size: cover;
+    }
+  }
+  &-bd {
+    color: #fff;
+    &-bigtxt {
+      display: flex;
+      align-items: center;
+      font-size: 20px;
+      font-weight: 500;
+      line-height: 28px;
+      margin-left: 10px;
+      &-icon {
+        width: 20px;
+      }
+    }
+    &-txt {
+      font-size: 20px;
+      font-weight: 500;
+      line-height: 25px;
+      margin-bottom: 5px;
+    }
+    &-smalltxt {
+      margin-top: 0;
+      font-size: 15px;
+      line-height: 21px;
+    }
+  }
+}
+</style>