登录页面

src/pages/my/my.vue

@@ -6,27 +6,43 @@
 
 <template>
   <view class="text-center container">
-    <view class="px-10 pt-20 pb-20 top-box">
+    <view class="px-5 pt-20 pb-20 top-box">
       <view class="con-top">
         <view class="h1 mb-8 mt-10">科湃腾肉牛系统</view>
         <view class="h3 mb-10 pt-4">简化牧场管理，从这里开始！</view>
       </view>
       <view class="btn mt-10 user">用户一键登录</view>
       <view class="btn mt-10 tel" @click="getPhone">手机号安全登录</view>
-      <text class="mt-10 title">
-        <wd-radio :value="1">我已认真阅读并同意《服务协议》、《隐私政策》</wd-radio>
-      </text>
+      <view class="mt-10 title">
+        <wd-radio-group :modelValue="isChecked" inline checked-color="#eea441" @change="setChecked">
+          <wd-radio :value="true" shape="dot" inline>
+            我已认真阅读并同意《服务协议》、《隐私政策》
+          </wd-radio>
+        </wd-radio-group>
+      </view>
     </view>
   </view>
 </template>
 
 <script lang="ts" setup>
+import { ref } from 'vue'
 defineOptions({
   name: 'Login',
 })
 
+const isChecked = ref(false)
 const getPhone = () => {
-  uni.navigateTo({ url: '/pages/telPhone/telPhone' })
+  uni.navigateTo({ url: '/pages/phone/phone' })
+}
+
+// 勾选同意
+const setChecked = (val) => {
+  console.log(val, isChecked.value, '000')
+  if (isChecked.value) {
+    isChecked.value = false
+  } else {
+    isChecked.value = true
+  }
 }
 </script>
 

src/pages/phone/phone.vue

@@ -5,7 +5,7 @@
 </route>
 
 <template>
-  <view class="text-center px-5">
+  <view class="text-center px-5 pt-30">
     <view class="text-green-500">
       <wd-form ref="form" :model="model">
         <wd-cell-group border>
@@ -30,15 +30,35 @@
               :rules="[{ required: true, message: '请输验证码' }]"
             />
             <view class="codeBtn">
-              <wd-button type="primary" @click="sendCode" :disabled="isClick">获取验证码</wd-button>
+              <wd-button type="primary" @click="sendCode" :disabled="model.isClick">
+                获取验证码
+              </wd-button>
             </view>
           </view>
         </wd-cell-group>
-        <view class="footer">
-          <wd-button type="primary" size="large" @click="handleSubmit" :disabled="isClick" block>
+        <view class="footer mt-10">
+          <wd-button
+            type="primary"
+            size="large"
+            @click="handleSubmit"
+            :disabled="model.isClick"
+            block
+          >
             提交
           </wd-button>
         </view>
+        <view class="mt-10 title">
+          <wd-radio-group
+            :modelValue="model.isChecked"
+            inline
+            checked-color="#eea441"
+            @change="setChecked"
+          >
+            <wd-radio :value="true" shape="dot" inline>
+              我已认真阅读并同意《服务协议》、《隐私政策》
+            </wd-radio>
+          </wd-radio-group>
+        </view>
       </wd-form>
     </view>
   </view>
@@ -46,15 +66,19 @@
 
 <script lang="ts" setup>
 import { useMessage } from 'wot-design-uni'
+import { reactive, ref } from 'vue'
 
 const message = useMessage()
-const isClick = ref(true)
 const model = reactive<{
   phoneNumber: string
   verificationCode: string
+  isClick: boolean
+  isChecked: boolean
 }>({
   phoneNumber: '',
   verificationCode: '',
+  isClick: true,
+  isChecked: false,
 })
 
 const form = ref()
@@ -66,13 +90,16 @@ const sendCode = () => {
 
 // 校验手机号正确咋显示按钮
 const rolePhone = (tel) => {
-  console.log(tel, '手机号')
-  const reg = /^1[3|4|5|6|7|8][0-9]\d{8}$/
-  if (reg.test(tel)) {
-    isClick.value = false
+  // console.log(tel, '手机号')
+  const reg = /^[1][3,4,5,7,8][0-9]{9}$/
+
+  if (reg.test(tel.value)) {
+    console.log(model.isClick, '手机号')
+    model.isClick = false
   } else {
-    isClick.value = true
+    model.isClick = true
   }
+  console.log(model, 'isClick')
 }
 // 提交验证码
 const handleSubmit = () => {
@@ -80,14 +107,25 @@ const handleSubmit = () => {
     .validate()
     .then(({ valid, errors }) => {
       if (valid) {
-        message.show('校验通过')
         uni.setStorageSync('userToken', 123) // 存储用户信息
+        message.show('登录成功')
+      } else {
+        message.show('登录失败')
       }
     })
     .catch((error) => {
       console.log(error, 'error')
     })
 }
+
+// 勾选同意
+const setChecked = (val) => {
+  if (model.isChecked) {
+    model.isChecked = false
+  } else {
+    model.isChecked = true
+  }
+}
 </script>
 
 <style lang="scss" scoped>