注册

pages.json

@@ -110,6 +110,21 @@
     }
   ],
   "subPackages": [
+    {
+      "root": "pages/register",
+      "pages": [
+        {
+          "path": "index",
+          "style": {
+            "navigationBarTitleText": "注册"
+          },
+          "meta": {
+            "title": "注册",
+            "group": "注册"
+          }
+        }
+      ]
+    },
     {
       "root": "pages/enter",
       "pages": [

pages/goods/components/detail/detail-content-card.vue

@@ -16,8 +16,8 @@
         <!-- #endif -->
       </template>
       <template v-else>
+        <view style="padding: 10px;" v-html="content"></view>
       </template>
-      <view style="padding: 10px;" v-html="content"></view>
     </view>
   </view>
 </template>

pages/register/index.vue

@@ -0,0 +1,238 @@
+<!-- 短信登录 - smsLogin  -->
+<template>
+  <view class="register-container">
+    <!-- 标题栏 -->
+    <view class="head-box ss-m-b-60">
+      <view class="ss-flex ss-m-b-20">
+        <view class="head-title head-title-line head-title-animation">短信登录</view>
+      </view>
+      <view class="head-subtitle">未注册的手机号，验证后自动注册账号</view>
+    </view>
+
+    <!-- 表单项 -->
+    <uni-forms ref="smsLoginRef" v-model="state.model" :rules="state.rules" validateTrigger="bind" labelWidth="140"
+      labelAlign="center" class="form-box">
+      <uni-forms-item name="mobile" label="手机号">
+        <uni-easyinput placeholder="请输入手机号" v-model="state.model.mobile" :inputBorder="false" type="number">
+          <template v-slot:right>
+            <button class="ss-reset-button code-btn" :disabled="state.isMobileEnd"
+              :class="{ 'code-btn-disabled': state.isMobileEnd }" @tap="getSmsCode('smsLogin', state.model.mobile)">
+              {{ getSmsTimer('smsLogin') }}
+            </button>
+          </template>
+        </uni-easyinput>
+      </uni-forms-item>
+
+      <uni-forms-item name="code" label="验证码">
+        <uni-easyinput placeholder="请输入验证码" v-model="state.model.code" :inputBorder="false" type="number" maxlength="4">
+          <template v-slot:right>
+            <button class="ss-reset-button login-btn" @tap="smsLoginSubmit">注册</button>
+          </template>
+        </uni-easyinput>
+      </uni-forms-item>
+    </uni-forms>
+
+    <!-- 用户协议的勾选 -->
+    <view class="agreement-box ss-flex ss-row-center" :class="{ shake: currentProtocol }">
+      <label class="radio ss-flex ss-col-center" @tap="onChange">
+        <radio :checked="state.protocol" color="#d10019" style="transform: scale(0.8)" @tap.stop="onChange" />
+        <view class="agreement-text ss-flex ss-col-center ss-m-l-8">
+          我已阅读并遵守
+          <view class="tcp-text" @tap.stop="onProtocol('用户协议')"> 《用户协议》 </view>
+          <view class="agreement-text">与</view>
+          <view class="tcp-text" @tap.stop="onProtocol('隐私协议')"> 《隐私协议》 </view>
+        </view>
+      </label>
+    </view>
+
+  </view>
+</template>
+
+<script setup>
+import { ref, reactive, unref } from 'vue';
+import sheep from '@/sheep';
+import { code, mobile } from '@/sheep/validate/form';
+import { showAuthModal, closeAuthModal, getSmsCode, getSmsTimer } from '@/sheep/hooks/useModal';
+import AuthUtil from '@/sheep/api/member/auth';
+
+const smsLoginRef = ref(null);
+const currentProtocol = ref(false);
+
+const emits = defineEmits(['onConfirm']);
+
+const props = defineProps({
+  agreeStatus: {
+    type: Boolean,
+    default: false,
+  },
+});
+
+// 数据
+const state = reactive({
+  isMobileEnd: false, // 手机号输入完毕
+  codeText: '获取验证码',
+  protocol: false, // 协议勾选状态
+  model: {
+    mobile: '', // 手机号
+    code: '', // 验证码
+    userNo: "1024",
+  },
+  rules: {
+    code,
+    mobile,
+  },
+});
+
+// 勾选协议
+function onChange() {
+  state.protocol = !state.protocol;
+}
+
+// 查看协议
+function onProtocol(title) {
+  sheep.$router.go('/pages/public/richtext', {
+    title,
+  });
+}
+
+// 短信登录
+async function smsLoginSubmit() {
+
+  // 参数校验
+  const validate = await unref(smsLoginRef)
+    .validate()
+    .catch((error) => {
+      console.log('error: ', error);
+    });
+  if (!validate) {
+    return;
+  }
+  if (!state.protocol) {
+    currentProtocol.value = true;
+    setTimeout(() => {
+      currentProtocol.value = false;
+    }, 1000);
+    sheep.$helper.toast('请勾选同意');
+    return;
+  }
+  // 提交数据
+  const { code } = await AuthUtil.register(state.model);
+  if (code === 0) {
+    sheep.$router.go('/pages/index/index')
+    closeAuthModal();
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.register-container {
+  padding: 40rpx;
+  min-height: 100vh;
+  background: #f8f8f8;
+}
+
+.head-box {
+  margin-top: 60rpx;
+
+  .head-title {
+    font-size: 48rpx;
+    font-weight: bold;
+    color: #333;
+    margin-bottom: 20rpx;
+    position: relative;
+
+    &::after {
+      content: '';
+      position: absolute;
+      left: 0;
+      bottom: -10rpx;
+      width: 60rpx;
+      height: 6rpx;
+      background: #d10019;
+      border-radius: 3rpx;
+    }
+  }
+
+  .head-subtitle {
+    font-size: 28rpx;
+    color: #999;
+    margin-top: 30rpx;
+  }
+}
+
+.form-box {
+  margin-top: 80rpx;
+  padding: 40rpx;
+  background: #fff;
+  border-radius: 20rpx;
+  box-shadow: 0 10rpx 20rpx rgba(0, 0, 0, 0.05);
+
+  :deep(.uni-forms-item) {
+    margin-bottom: 40rpx;
+  }
+
+  :deep(.uni-forms-item__label) {
+    font-size: 28rpx;
+    color: #666;
+  }
+
+  :deep(.uni-easyinput__content) {
+    background: #f8f8f8;
+    border-radius: 10rpx;
+    padding: 10rpx 20rpx;
+  }
+}
+
+.code-btn {
+  width: 180rpx;
+  height: 70rpx;
+  line-height: 70rpx;
+  border: 1rpx solid #d10019;
+  color: #d10019;
+  border-radius: 35rpx;
+  font-size: 26rpx;
+  text-align: center;
+
+  &.code-btn-disabled {
+    background: #ccc;
+  }
+}
+
+.login-btn {
+  width: 180rpx;
+  height: 70rpx;
+  line-height: 70rpx;
+  background: linear-gradient(90deg, #d10019, rgba(209, 0, 25, 0.6));
+  border-radius: 35rpx;
+  font-size: 28rpx;
+  color: #fff;
+  text-align: center;
+  box-shadow: 0 10rpx 20rpx rgba(209, 0, 25, 0.2);
+}
+
+.shake {
+  animation: shake 0.05s linear 4 alternate;
+}
+
+@keyframes shake {
+  from {
+    transform: translateX(-10rpx);
+  }
+
+  to {
+    transform: translateX(10rpx);
+  }
+}
+
+.agreement-box {
+  margin-top: 40rpx;
+}
+
+.tcp-text {
+  color: #d10019;
+}
+
+.agreement-text {
+  color: #999;
+}
+</style>

sheep/api/member/auth.js

@@ -56,7 +56,7 @@ const AuthUtil = {
       url: '/member/auth/refresh-token',
       method: 'POST',
       params: {
-        refreshToken
+        refreshToken,
       },
       custom: {
         loading: false, // 不用加载中
@@ -103,7 +103,7 @@ const AuthUtil = {
       data: {
         phoneCode,
         loginCode,
-        state
+        state,
       },
       custom: {
         showSuccess: true,
@@ -118,15 +118,27 @@ const AuthUtil = {
       url: '/member/auth/create-weixin-jsapi-signature',
       method: 'POST',
       params: {
-        url
+        url,
       },
       custom: {
         showError: false,
         showLoading: false,
       },
-    })
+    });
+  },
+  //注册
+  register: (data) => {
+    return request({
+      url: '/member/auth/sms-login-new',
+      method: 'POST',
+      data,
+      custom: {
+        showSuccess: true,
+        loadingMsg: '注册中',
+        successMsg: '注册成功',
+      },
+    });
   },
-  //
 };
 
 export default AuthUtil;