feat: 注册、用户协议

CHANGELOG.md

@@ -1,4 +1,4 @@
-# 1.0.0 (2022-01-12)
+# 1.0.0 (2022-01-13)
 
 ### 🌟 新功能
 范围|描述|commitId
@@ -30,6 +30,7 @@
 ### 🎨 代码样式
 范围|描述|commitId
 --|--|--
+ - | 更新代码 | [aa6093a](https://101.201.226.163:50022/TALL/TALL-MUI-4/commits/aa6093a)
  - | 细节调整 | [bdd5f87](https://101.201.226.163:50022/TALL/TALL-MUI-4/commits/bdd5f87)
  - | calender格式及细节调整 | [db9602b](https://101.201.226.163:50022/TALL/TALL-MUI-4/commits/db9602b)
 

apis/tall.js

@@ -7,8 +7,9 @@ const tall1 = `http://101.201.226.163/gateway/ptos`;
 export function setupTall(app) {
 	uni.$u.api = { ...uni.$u.api } || {};
 	// 登录
-	// uni.$u.api.signin = params => login.index(params);
   uni.$u.api.signin = params => uni.$u.http.post(`${tall}/users/signin`, params); // 登录
+  // 注册
+  uni.$u.api.signup = params => uni.$u.http.post(`${tall}/users/signup`, params); // 登录
 	// 获取图片验证码
 	uni.$u.api.getImageCode = () => uni.$u.get(`${tall}/users/code`);
 	// 获取短信验证码

hooks/user/userMixin.js

@@ -15,7 +15,7 @@ export default function userMixin() {
       {
         validator: (rule, value, callback) => {
           // 调用uView自带的js验证规则，详见：https://www.uviewui.com/js/test.html
-          return this.$u.test.mobile(value);
+          return uni.$u.test.mobile(value);
         },
         message: '手机号码不正确',
         // 触发器可以同时用blur和change，二者之间用英文逗号隔开

pages.json

@@ -28,6 +28,22 @@
 				"navigationStyle": "custom",
 				"navigationBarTextStyle": "white"
 			}
+		},
+		// 注册
+		{
+			"path": "pages/user/rigister",
+			"style": {
+				"navigationStyle": "custom",
+				"navigationBarTextStyle": "white"
+			}
+		},
+		// 用户协议
+		{
+			"path": "pages/user/agreement",
+			"style": {
+				"navigationStyle": "custom",
+				"navigationBarTextStyle": "white"
+			}
 		}
 	],
 	"globalStyle": {

pages/user/accountLogin.vue

@@ -62,8 +62,14 @@
   async function login() {
     uni.$ui.showLoading();
     try {
+      // #ifdef H5
+      const client = 0;
+      // #endif
+      // #ifdef APP-PLUS
+      const client = 1;
+      // #endif
       const params = reactive({
-        client: 1,
+        client: client,
         data: {
           identifier: form.account,
           credential: form.password,

pages/user/agreement.vue

@@ -0,0 +1,18 @@
+<template>
+  <view>
+    <web-view class="webview" src="https://www.yuque.com/docs/share/2de362e1-33fb-460a-92ca-5e8ef57f6d59?# 《时物链条用户协议》"></web-view>
+    <!-- <u-modal title="时物链条用户协议" v-model="showAgreement" show-cancel-button @confirm="$emit('confirm')" @cancel="$emit('cancel')">
+      <iframe
+        src="https://www.yuque.com/docs/share/2de362e1-33fb-460a-92ca-5e8ef57f6d59?# 《时物链条用户协议》"
+        frameborder="0"
+        scrolling="no"
+        style="width: 100%;height: 100%"
+      ></iframe>
+    </u-modal> -->
+  </view>
+</template>
+
+<script>
+</script>
+
+<style></style>

pages/user/login.vue

@@ -83,8 +83,15 @@
   async function login() {
     uni.$ui.showLoading();
     try {
+      // #ifdef H5
+      const client = 0;
+      // #endif
+      // #ifdef APP-PLUS
+      const client = 1;
+      // #endif
+
       const params = reactive({
-        client: 1,
+        client: client,
         data: {
           identifier: form.phone,
           credential: form.smsCode,

pages/user/rigister.vue

@@ -1,8 +1,159 @@
 <template>
+  <view class="u-p-l-50 u-p-r-50 u-p-t-30">
+    <u-form :model="form" ref="signUpForm" :error-type="['message']">
+      <u-form-item label="手机号码" prop="phone" label-width="160">
+        <u-input placeholder="请输入手机号" v-model="form.phone" type="number"></u-input>
+      </u-form-item>
+
+      <u-form-item label="图形验证码" prop="verificationCodeValue" label-width="160">
+        <u-input placeholder="请输入计算结果" v-model="form.verificationCodeValue" type="number"></u-input>
+        <image slot="right" :src="renderData.imageBase64" mode="aspectFit" class="code-image" @click="getImageCode"></image>
+      </u-form-item>
+
+      <u-form-item label="验证码" prop="smsCode" label-width="160">
+        <u-input @focus="mixinInit.hasvalue(form, renderData)" placeholder="请输入验证码" v-model="form.smsCode" type="text"></u-input>
+        <u-button slot="right" type="primary" size="mini" v-show="mixinInit.dataObj.showPaste" @click="mixinInit.setCode" class="u-m-r-20">粘贴</u-button>
+        <u-button slot="right" size="mini" v-if="mixinInit.dataObj.showInterval">{{ mixinInit.dataObj.interval }}</u-button>
+      </u-form-item>
+
+      <u-form-item label="用户名" prop="account" label-width="160">
+        <u-input placeholder="请输入用户名" v-model="form.account" type="text"></u-input>
+      </u-form-item>
+
+      <u-form-item label="密码" prop="password" label-width="160">
+        <u-input :password-icon="true" type="password" v-model="form.password" placeholder="请输入密码"></u-input>
+      </u-form-item>
+
+      <view class="flex flex-nowrap">
+        <view class="flex-sub"></view>
+        <view class="u-m-t-30 u-font-12 text-gray-400" @click="openPage('/pages/user/forgetPassword')">忘记密码</view>
+      </view>
+    </u-form>
+
+    <view class="u-m-t-50">
+      <u-button @click="submit" type="primary">立即注册</u-button>
+    </view>
+
+    <view class="flex flex-direction u-m-t-30">
+      <view class="flex flex-nowrap u-m-b-20">
+        <u-checkbox v-model="renderData.checked" @change="changeChecked"></u-checkbox>
+        <view class="agreement-text">
+          已阅读并同意使用
+          <span class="text-blue" @click="openPage('/pages/user/agreement')">《时物链条用户协议》</span>
+        </view>
+      </view>
+      <p class="text-blue u-m-l-70">没有套路，真实需求</p>
+    </view>
+
+    <view class="flex flex-nowrap">
+      <view class="flex-1"></view>
+      <view class="u-m-t-60 text-blue" @click="openPage('/pages/user/accountLogin')">已有账号，去登录</view>
+    </view>
+  </view>
 </template>
 
-<script>
+<script setup>
+  import { ref, computed, reactive } from 'vue';
+  import { useStore } from 'vuex';
+  import { onReady } from '@dcloudio/uni-app';
+  import userMixin from '@/hooks/user/userMixin'
+
+  const store = useStore();
+  const mixinInit = userMixin();
+  const signUpForm = ref(null);
+
+  const form = reactive({
+    phone: '',
+    verificationCodeValue: '', // 图形验证码值
+    smsCode: '',
+    account: '',
+    password: ''
+  })
+  const renderData = reactive({
+    verificationCodeId: '', // 图形验证码id
+    imageBase64: '', // 图形验证码图片
+    checked: false
+  })
+
+  onReady(() => {
+    signUpForm.value.setRules(mixinInit.rules);
+  });
+
+  getImageCode(); // 获取图形验证码
+
+  const submit = () => {
+    signUpForm.value.validate(valid => {
+      if (valid) {
+        signUp()
+      }
+    });
+  }
+
+  async function signUp() {
+    uni.$ui.showLoading();
+    try {
+      if (!renderData.checked) {
+        uni.$ui.showToast('请阅读并同意使用用户协议');
+        return;
+      }
+
+      const params = {
+        account: form.account,
+        password: form.password,
+        phone: form.phone,
+        smsCode: form.smsCode
+      };
+
+      let res = await uni.$u.api.signup(params);
+      store.commit('user/setToken', res.token);
+      store.commit('user/setUser', res);
+      uni.$storage.setStorageSync('anyringToken', res.token || '');
+      uni.$storage.setStorageSync('user', JSON.stringify(res));
+
+      uni.$ui.hideLoading();
+
+      uni.navigateTo({
+        url: '/pages/index/index'
+      });
+    } catch (error) {
+      uni.$ui.hideLoading();
+      uni.$ui.showToast(error);
+    }
+  }
+
+  // 获取图形验证码
+  async function getImageCode() {
+    uni.$ui.showLoading();
+    try {
+      const data = await uni.$u.api.getImageCode();
+      renderData.imageBase64 = data.imageBase64 || '';
+      renderData.verificationCodeId = data.verificationCodeId || '';
+      uni.$ui.hideLoading();
+    } catch (error) {
+      uni.$ui.hideLoading();
+      uni.$ui.showToast(error);
+    }
+  }
+
+  // 改变用户协议选中状态
+  function changeChecked() {
+    renderData.checked = !renderData.checked;
+  }
+
+  function openPage(url) {
+    uni.navigateTo({
+      url: url
+    })
+  }
 </script>
 
 <style>
+  .code-image {
+    width: 200rpx;
+    height: 70rpx;
+  }
+
+  .text-blue {
+    color: #0081ff;
+  }
 </style>