新增 设置密码页面

uni_modules/uni-id-pages/components/uni-id-pages-sms-form/uni-id-pages-sms-form.vue

@@ -2,7 +2,7 @@
 	<view>
 		<uni-captcha :focus="focusCaptchaInput" ref="captcha" scene="send-sms-code" v-model="captcha" />
 		<view class="box">
-			<uni-easyinput :focus="focusSmsCodeInput" @blur="focusSmsCodeInput = false" type="number" class="input-box" :inputBorder="false" v-model="modelValue" maxlength="6"
+			<uni-easyinput :focus="focusSmsCodeInput" @blur="focusSmsCodeInput = false" type="number" class="input-box" :inputBorder="false" v-model="modelValue" maxlength="6" :clearable="false"
 				placeholder="请输入短信验证码">
 			</uni-easyinput>
 			<view class="short-code-btn" hover-class="hover" @click="start">
@@ -28,7 +28,7 @@
 		}
 	}
 	/**
-	 * sms-form 
+	 * sms-form
 	 * @description 获取短信验证码组件
 	 * @tutorial https://ext.dcloud.net.cn/plugin?id=
 	 * @property {Number} count 倒计时时长 s
@@ -189,12 +189,12 @@
 <style lang="scss" scoped>
 	.box {
 		position: relative;
-		margin-top: 10px;
+		margin-top: 10px;
 	}
 
 	.short-code-btn {
 		padding: 0;
-		position: absolute;
+		position: absolute;
 		top: 0;
 		right: 8px;
 		width: 260rpx;
@@ -204,8 +204,8 @@
 		display: flex;
 		/* #endif */
 		justify-content: center;
-		align-items: center;
-		
+		align-items: center;
+
 	}
 
 	.inner-text {
@@ -221,7 +221,7 @@
 		width: 350rpx;
 	}
 
-	.input-box {
+	.input-box {
 		margin: 0;
 		padding: 4px;
 		background-color: #F8F8F8;

uni_modules/uni-id-pages/pages/userinfo/set-pwd/set-pwd.vue

+<!-- 设置密码 -->
+<template>
+  <view class="uni-content">
+    <match-media :min-width="690">
+      <view class="login-logo">
+        <image :src="logo"></image>
+      </view>
+      <!-- 顶部文字 -->
+      <text class="title title-box ">设置密码</text>
+    </match-media>
+
+    <uni-forms class="set-password-form" ref="form" :value="formData" err-show-type="toast">
+      <text class="tip">输入密码</text>
+      <uni-forms-item name="newPassword">
+        <uni-easyinput :focus="focusNewPassword" @blur="focusNewPassword = false" class="input-box"
+                       type="password" :inputBorder="false" v-model="formData.newPassword" placeholder="请输入密码">
+        </uni-easyinput>
+      </uni-forms-item>
+      <text class="tip">再次输入密码</text>
+      <uni-forms-item name="newPassword2">
+        <uni-easyinput :focus="focusNewPassword2" @blur="focusNewPassword2 = false" class="input-box"
+                       type="password" :inputBorder="false" v-model="formData.newPassword2" placeholder="请再次输入新密码">
+        </uni-easyinput>
+      </uni-forms-item>
+      <uni-id-pages-sms-form v-model="formData.code" type="set-pwd-by-sms" ref="smsCode" :phone="userInfo.mobile">
+      </uni-id-pages-sms-form>
+      <view class="link-box">
+        <button class="uni-btn send-btn" type="primary" @click="submit">确认</button>
+        <button v-if="allowSkip" class="uni-btn send-btn" type="default" @click="skip">跳过</button>
+      </view>
+
+    </uni-forms>
+    <uni-popup-captcha @confirm="submit" v-model="formData.captcha" scene="set-pwd-by-sms" ref="popup"></uni-popup-captcha>
+  </view>
+</template>
+
+<script>
+import passwordMod from '@/uni_modules/uni-id-pages/common/password.js'
+import {store, mutations} from '@/uni_modules/uni-id-pages/common/store.js'
+import config from '@/uni_modules/uni-id-pages/config.js'
+
+const uniIdCo = uniCloud.importObject("uni-id-co", {
+  customUI:true
+})
+export default {
+  name: "set-pwd.vue",
+  data () {
+    return {
+      uniIdRedirectUrl: '',
+      loginType: '',
+      logo: '/static/logo.png',
+      focusNewPassword: false,
+      focusNewPassword2: false,
+      allowSkip: false,
+      formData: {
+        code: "",
+        captcha: "",
+        newPassword: "",
+        newPassword2: ""
+      },
+      rules: passwordMod.getPwdRules('newPassword', 'newPassword2')
+    }
+  },
+  computed: {
+    userInfo () {
+      return store.userInfo
+    }
+  },
+  onReady() {
+    this.$refs.form.setRules(this.rules)
+  },
+  onLoad (e) {
+    this.uniIdRedirectUrl = e.uniIdRedirectUrl
+    this.loginType = e.loginType
+
+    if (config.setPasswordAfterLogin && config.setPasswordAfterLogin?.allowSkip) {
+      this.allowSkip = true
+    }
+  },
+  methods: {
+    submit () {
+      if(! /^\d{6}$/.test(this.formData.code)){
+        this.$refs.smsCode.focusSmsCodeInput = true
+        return uni.showToast({
+          title: '验证码格式不正确',
+          icon: 'none'
+        });
+      }
+
+      this.$refs.form.validate()
+          .then(res => {
+            uniIdCo.setPwd({
+              password: this.formData.newPassword,
+              code: this.formData.code,
+              captcha: this.formData.captcha
+            }).then(e => {
+              uni.showModal({
+                content: '密码设置成功',
+                showCancel: false,
+                success: () => {
+                  mutations.loginBack({
+                    uniIdRedirectUrl: this.uniIdRedirectUrl,
+                    loginType: this.loginType
+                  })
+                }
+              });
+            }).catch(e => {
+              uni.showModal({
+                content: e.message,
+                showCancel: false
+              });
+            })
+          }).catch(e => {
+            if (e.errCode == 'uni-id-captcha-required') {
+              this.$refs.popup.open()
+            } else {
+              console.log(e.errMsg);
+              console.log(e.errCode);
+            }
+          }).finally(e => {
+            this.formData.captcha = ''
+          })
+    },
+    skip () {
+      mutations.loginBack(this.uniIdRedirectUrl)
+    }
+  }
+}
+</script>
+
+<style scoped lang="scss">
+@import "@/uni_modules/uni-id-pages/common/login-page.scss";
+
+.uni-btn[type="default"] {
+  color: inherit!important;
+}
+
+.uni-content ::v-deep .uni-forms-item {
+  margin-bottom: 10px;
+}
+
+.popup-captcha {
+  /* #ifndef APP-NVUE */
+  display: flex;
+  /* #endif */
+  padding: 20rpx;
+  background-color: #FFF;
+  border-radius: 2px;
+  flex-direction: column;
+  position: relative;
+}
+
+.popup-captcha .title {
+  font-weight: normal;
+  padding: 0;
+  padding-bottom: 15px;
+  color: #666;
+}
+
+.popup-captcha .close {
+  position: absolute;
+  bottom: -40px;
+  margin-left: -13px;
+  left: 50%;
+}
+
+.popup-captcha .uni-btn {
+  margin: 0;
+}
+</style>