完善页面
This commit is contained in:
wangxiaowei
@ -107,7 +107,6 @@
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { ref } from 'vue'
|
||||
import { getNavBarHeight } from '@/utils/index'
|
||||
import { onPageScroll, onReachBottom } from '@dcloudio/uni-app'
|
||||
import useMescroll from "@/uni_modules/mescroll-uni/hooks/useMescroll.js";
|
||||
@ -119,6 +118,7 @@
|
||||
`${OSS}images/banner1.png`,
|
||||
`${OSS}images/banner1.png`
|
||||
])
|
||||
|
||||
const current = ref<number>(0)
|
||||
const { mescrollInit, downCallback } = useMescroll(onPageScroll, onReachBottom) // 调用mescroll的hook
|
||||
|
||||
|
||||
83
src/pages/login/login.vue
Normal file
83
src/pages/login/login.vue
Normal file
@ -0,0 +1,83 @@
|
||||
<route lang="jsonc" type="page">{
|
||||
"layout": "default",
|
||||
"style": {
|
||||
"navigationBarTitleText": "",
|
||||
"navigationBarBackgroundColor": "#fff"
|
||||
}
|
||||
}</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>
|
||||
<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/home_image5.png`" width="100%" height="100%" mode="aspectFill"></wd-img>
|
||||
</view>
|
||||
<view class="mt-124rpx mx-60rpx box-border">
|
||||
<wd-button open-type="getPhoneNumber" @getphonenumber="login.handleGetPhoneNumber" 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>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
|
||||
<script lang="ts" setup>
|
||||
const OSS = inject('OSS')
|
||||
|
||||
const agree = ref<boolean>(false)
|
||||
|
||||
const login = {
|
||||
// 获取手机号
|
||||
handleGetPhoneNumber: (e: object) => {
|
||||
console.log("🚀 ~ e:", e)
|
||||
|
||||
},
|
||||
|
||||
handleAgree: (e: any) => {
|
||||
console.log('e', e)
|
||||
},
|
||||
|
||||
// 跳转到服务协议页面
|
||||
handleToService: () => {
|
||||
|
||||
},
|
||||
|
||||
// 跳转到隐私政策页面
|
||||
handleToPrivacy: () => {
|
||||
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
page {
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
.service {
|
||||
:deep() {
|
||||
.wd-checkbox {
|
||||
display: flex;
|
||||
align-content: flex-start;
|
||||
}
|
||||
|
||||
.wd-checkbox__label {
|
||||
margin-left: 6rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
189
src/pages/login/mobile.vue
Normal file
189
src/pages/login/mobile.vue
Normal file
@ -0,0 +1,189 @@
|
||||
<route lang="jsonc" type="page">{
|
||||
"layout": "default",
|
||||
"style": {
|
||||
"navigationBarTitleText": "",
|
||||
"navigationBarBackgroundColor": "#fff"
|
||||
}
|
||||
}</route>
|
||||
|
||||
<template>
|
||||
<view>
|
||||
<view class="mx-60rpx mt-20rpx">
|
||||
<view class="text-[#303133] text-48rpx leading-80rpx font-600">
|
||||
其他手机号登录
|
||||
</view>
|
||||
<view class="font-400 text-28rpx leading-44rpx text-[#6B7280] mt-12rpx">请输入你要登录的手机号</view>
|
||||
</view>
|
||||
<view class="mt-106rpx mx-48rpx">
|
||||
<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] !border !border-solid !border-[#EAECF0] !rounded-16rpx"
|
||||
custom-input-class="!px-32rpx !h-104rpx"
|
||||
@input="mobile.handleInputMobile"
|
||||
/>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="mt-40rpx">
|
||||
<view class="font-400 text-30rpx text-[#606266] leading-44rpx">验证码</view>
|
||||
<view class="mt-20rpx">
|
||||
<wd-input type="text" placeholder="请输入验证码" v-model="model.code" inputmode="numeric" no-border custom-class="!bg-[#F6F7F8] !border !border-solid !border-[#EAECF0] !rounded-16rpx" custom-input-class="!px-32rpx !h-104rpx">
|
||||
<template #suffix>
|
||||
<view class="flex items-center mr-34rpx">
|
||||
<view class="flex items-center">
|
||||
<wd-divider color="#C9C9C9" vertical />
|
||||
</view>
|
||||
|
||||
<view class="flex items-center">
|
||||
<view class="text-[#4C9F44] text-32rpx font-400 leading-44rpx" v-if="!startCountDown" @click="mobile.handleCountDown">发送验证码</view>
|
||||
<view class="!text-[#C9C9C9] text-32rpx font-400 leading-44rpx flex items-center" v-if="startCountDown">
|
||||
<wd-count-down ref="countDown" :time="countDownTime" millisecond :auto-start="false" format="ss" custom-class="!text-[#C9C9C9] !text-32rpx" @finish="mobile.handleFinishCountDown"></wd-count-down>
|
||||
<view> S后重发</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
</wd-input>
|
||||
</view>
|
||||
</view>
|
||||
</wd-form>
|
||||
</view>
|
||||
|
||||
<view class="h-90rpx leading-90rpx mx-60rpx rounded-8rpx text-center mt-112rpx bg-[#4C9F44] text-[#fff]" :class="disabled ? 'opacity-40' : ''" @click="mobile.handleToLogin">登录</view>
|
||||
|
||||
<view class="flex items-center mx-52rpx mt-56rpx">
|
||||
<view class="w-32rpx h-32rpx">
|
||||
<wd-checkbox v-model="agree" @change="mobile.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="mobile.handleToService">《服务协议》</text> 和<text class="text-[#4C9F44]" @click.stop="mobile.handleToPrivacy">《隐私政策》</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
|
||||
<script lang="ts" setup>
|
||||
import {mobile as testMobile} from '@/utils/test'
|
||||
import { useToast } from 'wot-design-uni'
|
||||
|
||||
const toast = useToast()
|
||||
const disabled = ref<boolean>(true)
|
||||
|
||||
// 验证码倒计时
|
||||
const countDownTime = ref<number>(1 * 60 * 1000) // 60s倒计时
|
||||
const startCountDown = ref<boolean>(false) // 是否开始倒计时
|
||||
const countDown = ref<any>(null) // 倒计时组件
|
||||
|
||||
// 表单相关
|
||||
const model = reactive<{
|
||||
mobile: string
|
||||
code: string
|
||||
}>({
|
||||
mobile: '',
|
||||
code: ''
|
||||
})
|
||||
|
||||
// 服务协议和隐私政策
|
||||
const agree = ref<boolean>(false)
|
||||
|
||||
const mobile = {
|
||||
// 验证手机号
|
||||
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: () => {
|
||||
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: () => {
|
||||
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
page {
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
.service {
|
||||
:deep() {
|
||||
.wd-checkbox {
|
||||
display: flex;
|
||||
align-content: flex-start;
|
||||
}
|
||||
|
||||
.wd-checkbox__label {
|
||||
margin-left: 6rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
26
src/pages/notice/bill.vue
Normal file
26
src/pages/notice/bill.vue
Normal file
@ -0,0 +1,26 @@
|
||||
<route lang="jsonc" type="page">{
|
||||
"layout": "default",
|
||||
"style": {
|
||||
"navigationBarTitleText": "",
|
||||
"navigationBarBackgroundColor": "#fff"
|
||||
}
|
||||
}</route>
|
||||
|
||||
<template>
|
||||
<view class="mt-26rpx mx-30rpx">
|
||||
<bill-notice :type="type" :money="10.00" :time="'2025-04-25 04:43'" :order="'42000028122025082279'"></bill-notice>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
|
||||
<script lang="ts" setup>
|
||||
import BillNotice from '@/components/notice/Bill.vue'
|
||||
const type = ref<string>('') // 购买类型 recharge: 充值; refund: 退款; cashback: 返现
|
||||
|
||||
onLoad((args) => {
|
||||
type.value = args.type || ''
|
||||
})
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
</style>
|
||||
51
src/pages/notice/pay.vue
Normal file
51
src/pages/notice/pay.vue
Normal file
@ -0,0 +1,51 @@
|
||||
<route lang="jsonc" type="page">{
|
||||
"layout": "default",
|
||||
"style": {
|
||||
"navigationBarTitleText": "",
|
||||
"navigationBarBackgroundColor": "#fff"
|
||||
}
|
||||
}</route>
|
||||
|
||||
<template>
|
||||
<view class="mt-94rpx flex justify-center items-center">
|
||||
<view v-if="type == 'room'">
|
||||
<pay-notice title="购买成功" desc="可以点击下方查看订单详情">
|
||||
<template #layout>
|
||||
<view class="pb-22rpx mt-40rpx mx-30rpx flex justify-between items-center text-[32rpx] text-center">
|
||||
<view class='bg-[#F6F7F8] text-[#303133] rounded-8rpx h-90rpx leading-90rpx mr-28rpx w-300rpx' @click="pay.handleRoomSeeOrder">查看订单</view>
|
||||
<view class='bg-[#4C9F44] text-[#fff] rounded-8rpx h-90rpx leading-90rpx w-300rpx' @click="pay.handleRoomDone">完成</view>
|
||||
</view>
|
||||
</template>
|
||||
</pay-notice>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
|
||||
<script lang="ts" setup>
|
||||
import PayNotice from '@/components/notice/Pay.vue'
|
||||
const type = ref<string>('') // 购买类型 room: 预约茶室
|
||||
|
||||
onLoad((args) => {
|
||||
type.value = args.type || ''
|
||||
})
|
||||
|
||||
const pay = {
|
||||
// 预约茶室 - 查看订单
|
||||
handleRoomSeeOrder: () => {
|
||||
uni.navigateTo({
|
||||
url: '/bundle/reserve-room/order'
|
||||
})
|
||||
},
|
||||
|
||||
// 预约茶室 - 完成
|
||||
handleRoomDone: () => {
|
||||
uni.switchTab({
|
||||
url: '/pages/index/index'
|
||||
})
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
</style>
|
||||
51
src/pages/notice/reserve.vue
Normal file
51
src/pages/notice/reserve.vue
Normal file
@ -0,0 +1,51 @@
|
||||
<route lang="jsonc" type="page">{
|
||||
"layout": "default",
|
||||
"style": {
|
||||
"navigationBarTitleText": "",
|
||||
"navigationBarBackgroundColor": "#fff"
|
||||
}
|
||||
}</route>
|
||||
|
||||
<template>
|
||||
<view class="mt-84rpx flex justify-center items-center">
|
||||
<view v-if="type == 'room'">
|
||||
<reserve-notice title="茶室预约成功" desc="可以点击下方查看预约单具体信息">
|
||||
<template #layout>
|
||||
<view class="pb-22rpx mt-40rpx mx-30rpx flex justify-between items-center text-[32rpx] text-center">
|
||||
<view class='bg-[#F6F7F8] text-[#303133] rounded-8rpx h-90rpx leading-90rpx mr-28rpx w-300rpx' @click="reserve.handleRoomSeeOrder">查看订单</view>
|
||||
<view class='bg-[#4C9F44] text-[#fff] rounded-8rpx h-90rpx leading-90rpx w-300rpx' @click="reserve.handleRoomDone">完成</view>
|
||||
</view>
|
||||
</template>
|
||||
</reserve-notice>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
|
||||
<script lang="ts" setup>
|
||||
import ReserveNotice from '@/components/notice/Reserve.vue'
|
||||
const type = ref<string>('') // 购买类型 room: 预约茶室
|
||||
|
||||
onLoad((args) => {
|
||||
type.value = args.type || ''
|
||||
})
|
||||
|
||||
const reserve = {
|
||||
// 预约茶室 - 查看订单
|
||||
handleRoomSeeOrder: () => {
|
||||
uni.navigateTo({
|
||||
url: '/bundle/reserve-room/order'
|
||||
})
|
||||
},
|
||||
|
||||
// 预约茶室 - 完成
|
||||
handleRoomDone: () => {
|
||||
uni.switchTab({
|
||||
url: '/pages/index/index'
|
||||
})
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
</style>
|
||||
@ -1,19 +0,0 @@
|
||||
<route lang="jsonc" type="page">{
|
||||
"layout": "default",
|
||||
"style": {
|
||||
"navigationBarTitleText": ""
|
||||
}
|
||||
}</route>
|
||||
|
||||
<script lang="ts" setup>
|
||||
//
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<view class="">
|
||||
<!-- 此处是流水明细结果通知页面 -->
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
//</style>
|
||||
@ -1,20 +0,0 @@
|
||||
<route lang="jsonc" type="page">{
|
||||
"layout": "default",
|
||||
"style": {
|
||||
"navigationBarTitleText": ""
|
||||
}
|
||||
}</route>
|
||||
|
||||
<template>
|
||||
<view class="">
|
||||
<!-- 此处是支付结果通知页面 -->
|
||||
</view>
|
||||
</template>
|
||||
|
||||
|
||||
<script lang="ts" setup>
|
||||
//
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
//</style>
|
||||
@ -1,20 +0,0 @@
|
||||
<route lang="jsonc" type="page">{
|
||||
"layout": "default",
|
||||
"style": {
|
||||
"navigationBarTitleText": ""
|
||||
}
|
||||
}</route>
|
||||
|
||||
<template>
|
||||
<view class="">
|
||||
<!-- 此处是预约结果通知页面 -->
|
||||
</view>
|
||||
</template>
|
||||
|
||||
|
||||
<script lang="ts" setup>
|
||||
//
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
//</style>
|
||||
Reference in New Issue
Block a user