wangxiaowei/chazhi_store
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

添加页面

Browse Source
This commit is contained in:
wangxiaowei
2025-12-13 17:15:30 +08:00
parent 0ab8464612
commit 775a93f766
22 changed files with 1329 additions and 432 deletions
Download Patch File Download Diff File Expand all files Collapse all files

256
src/pages/login/login.vue
View File

@ -1,112 +1,202 @@
<route lang="jsonc" type="page">{
"layout": "default",
"style": {
"navigationBarTitleText": "",
"navigationBarBackgroundColor": "#fff"
"navigationStyle": "custom"
}
}</route>
<template>
<view>
<view class="mx-48rpx mt-50rpx">
<view class="text-[#303133] text-40rpx leading-56rpx">
<text class="font-400 mr-24rpx">欢迎使用</text>
<text class="font-700">茶址</text>
<view class="login-bg">
<!-- <view class="login-bg w-[100%] fixed top-0 left-0 z-100"> -->
<wd-navbar safeAreaInsetTop :bordered="false"
custom-style="background-color: transparent !important;"></wd-navbar>
<!-- </view> -->
<view class="px-68rpx">
<view class="font-bold text-44rpx text-[#333333] leading-60rpx">你好，欢迎使用</view>
<view class="font-bold text-44rpx text-[#333333] leading-60rpx mt-18rpx">茶址管理平台</view>
<view class="mt-18rpx font-400 text-26rpx text-[#606266] leading-40rpx w-354rpx">此小程序仅供企业内部员工登录，请凭管理员账号密码登录
</view>
<view class="font-400 text-26rpx leading-36rpx text-[#606266] mt-20rpx">登录后可进行茶室预约，开启您的专属茶席</view>
</view>
<view class="mt-176rpx w-162rpx h-160rpx mx-auto">
<wd-img :src="`${OSS}images/logo.png`" width="100%" height="100%" mode="aspectFill"></wd-img>
</view>
<view class="mt-124rpx mx-60rpx box-border">
<wd-button custom-class="!bg-[#4C9F44] !rounded-8rpx !text-[#fff] !text-30rpx !leading-42rpx !h-90rpx !w-[100%] box-border" @click="Login.handleLogin">立即登录</wd-button>
<wd-button custom-class="!bg-[#4C9F44] !rounded-8rpx !text-[#fff] !text-30rpx !leading-42rpx !h-90rpx !w-[100%] box-border" @click="Login.handleMobileLogin">测试-账号登录</wd-button>
<!-- <wd-button open-type="getUserInfo" @getuserinfo="Login.handleWxLogin" custom-class="!bg-[#4C9F44] !rounded-8rpx !text-[#fff] !text-30rpx !leading-42rpx !h-90rpx !w-[100%] box-border">立即登录</wd-button> -->
<!-- <view class="text-30rpx font-400 text-[#303133] leading-42rpx text-center mt-32rpx">其它手机号登录</view> -->
</view>
<view class="flex items-center mx-32rpx mt-64rpx">
<view class="w-32rpx h-32rpx">
<wd-checkbox v-model="agree" @change="Login.handleAgree" checked-color="#4C9F44" size="large"> </wd-checkbox>
</view>
<view class="font-400 text-26rpx leading-40rpx text-[#8F959E] ml-14rpx flex-1" @click="agree = !agree">
我已阅读并同意 <text class="text-[#4C9F44]" @click.stop="Login.handleToService">《服务协议》</text> 和<text class="text-[#4C9F44]" @click.stop="Login.handleToPrivacy">《隐私政策》</text>，未注册手机号登录后将自动你为您创建账号
</view>
<!-- 登录表单 -->
<view class="mt-100rpx px-58rpx">
<wd-form ref="form" :model="model">
<view>
<view class="font-400 text-30rpx text-[#606266] leading-44rpx">账号</view>
<view class="mt-20rpx">
<wd-input v-model="model.mobile" type="text" placeholder="请输入账号" inputmode="numeric" no-border
custom-class="!bg-[#F6F7F8] !rounded-16rpx"
custom-input-class="!px-32rpx !h-104rpx" @input="Login.handleInputMobile" />
</view>
</view>
<view class="mt-40rpx">
<view class="font-400 text-30rpx text-[#606266] leading-44rpx">密码</view>
<view class="mt-20rpx">
<wd-input v-model="model.passowrd" type="safe-password" placeholder="请输入密码" no-border
custom-class="!bg-[#F6F7F8] !rounded-16rpx"
custom-input-class="!px-32rpx !h-104rpx" />
</view>
</view>
<view class="mt-74rpx">
<wd-button custom-class="!bg-[#4C9F44] !rounded-8rpx !text-[#fff] !text-30rpx !leading-42rpx !h-90rpx !w-[100%] box-border" @click="Login.handleToLogin">立即登录</wd-button>
</view>
<view class="mt-44rpx font-400 text-28rpx text-[#4C9F44] leading-40rpx" @click="router.navigateTo('/pages/login/password')">
忘记密码？
</view>
</wd-form>
</view>
</view>
</template>
<script lang="ts" setup>
import { toast } from '@/utils/toast'
import { getWxCode } from '@/api/login'
import { useUserStore } from '@/store'
import { router } from '@/utils/tools'
import { mobile as testMobile } from '@/utils/test'
import { router } from '@/utils/tools'
import { useToast } from 'wot-design-uni'
const OSS = inject('OSS')
const OSS = inject('OSS')
const toast = useToast()
const disabled = ref<boolean>(true)
// 服务协议条款
const agree = ref<boolean>(false)
/** 页面 **/
let pageType = 'login' // 页面类型 login:登录 edit:修改手机号
const page = ref<{ title: string, desc: string }>({ title: '其他手机号登录', desc: '请输入你要登录的手机号' })
const showEditSuccessPopup = ref<boolean>(false) // 显示手机号修改成功弹窗
const userId = ref<number>(0) // 用户ID，修改手机号时需要传
const Login = {
// 获取手机号
handleLogin: async (e: object) => {
if (!agree.value) {
toast.info('请同意服务协议和隐私政策')
return
}
/** 验证码倒计时 **/
const countDownTime = ref<number>(1 * 60 * 1000) // 60s倒计时
const startCountDown = ref<boolean>(false) // 是否开始倒计时
const countDown = ref<any>(null) // 倒计时组件
const userStore = useUserStore()
const res = await userStore.wxLogin()
if (res) {
toast.info('登录成功')
router.navigateBack(1, 500)
}
},
/** 表单相关 **/
const model = reactive<{
mobile: string
passowrd: string
}>({
mobile: '',
passowrd: ''
})
/** 结束 **/
// 手机登录
handleMobileLogin: async () => {
const userStore = useUserStore()
console.log("🚀 ~ userStore:", userStore)
const res = await userStore.mobileLogin('18868040087', 1, 2)
if (res) {
uni.setStorageSync('latitude', '30.74744')
uni.setStorageSync('longitude', '120.78483')
toast.info('登录成功')
router.navigateBack(1, 500)
}
},
/** 服务协议和隐私政策 **/
const agree = ref<boolean>(false)
/** 结束 **/
handleAgree: async (e: any) => {
},
onLoad((args) => {
// 从个人登录页面进入
if (args.type === 'edit') {
userId.value = Number(args.userId) || 0 // userId仅做测试使用，实际请传真实用户ID
// 跳转到服务协议页面
handleToService: () => {
},
// 跳转到隐私政策页面
handleToPrivacy: () => {
},
page.value.title = '修改手机号'
page.value.desc = '手机号一年内可修改2次'
pageType = 'edit'
}
})
const Login = {
// 验证手机号
handleInputMobile: (e: { value: string }) => {
model.mobile = e.value
disabled.value = !testMobile(model.mobile)
},
// 发送验证码
handleCountDown: () => {
if (disabled.value) {
toast.show({
iconClass: 'info-circle',
msg: '手机号码错误请重新输入',
direction: 'vertical'
})
return
}
startCountDown.value = true
nextTick(() => {
countDown.value?.start()
// 发送验证码请求
})
},
// 验证码倒计时结束
handleFinishCountDown: () => {
startCountDown.value = false
},
// 登录
handleToLogin: () => {
// TODO 如果是edit的话就是修改手机号
if (pageType === 'login' && !agree.value) {
toast.show({
iconClass: 'info-circle',
msg: '请同意服务协议和隐私政策',
direction: 'vertical'
})
return
}
if (!testMobile(model.mobile)) {
toast.show({
iconClass: 'info-circle',
msg: '手机号码错误请重新输入',
direction: 'vertical'
})
return
}
if (!model.code) {
toast.show({
iconClass: 'info-circle',
msg: '验证码错误',
direction: 'vertical'
})
return
}
},
// 获取手机号
handleGetPhoneNumber: (e: object) => {
console.log("🚀 ~ e:", e)
},
handleAgree: (e: any) => {
console.log('e', e)
},
// 跳转到服务协议页面
handleToService: () => {
disabled.value = !disabled.value
console.log("🚀 ~ disabled:", disabled)
},
// 跳转到隐私政策页面
handleToPrivacy: () => {
},
// 修改手机成功后返回
handleToBack: () => {
uni.navigateBack()
}
}
</script>
<style lang="scss">
page {
background-color: #fff;
}
page {
background-color: #fff;
}
.service {
:deep() {
.wd-checkbox {
display: flex;
align-content: flex-start;
}
.wd-checkbox__label {
margin-left: 6rpx;
}
}
}
.login-bg {
background-color: #fff;
background-image: url(#{$OSS}images/store/login/image1.png);
background-size: 100% 420rpx;
background-repeat: no-repeat;
}
</style>