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

完善页面

Browse Source
This commit is contained in:
wangxiaowei
2025-09-16 17:09:34 +08:00
parent 6d2cba0f34
commit e9f804b373
11 changed files with 874 additions and 169 deletions
Download Patch File Download Diff File Expand all files Collapse all files

64
src/pages/login/mobile.vue
View File

@ -10,9 +10,9 @@
<view>
<view class="mx-60rpx mt-20rpx">
<view class="text-[#303133] text-48rpx leading-80rpx font-600">
其他手机号登录
{{ page.title }}
</view>
<view class="font-400 text-28rpx leading-44rpx text-[#6B7280] mt-12rpx">请输入你要登录的手机号</view>
<view class="font-400 text-28rpx leading-44rpx text-[#6B7280] mt-12rpx"> {{ page.desc }}</view>
</view>
<view class="mt-106rpx mx-48rpx">
<wd-form ref="form" :model="model">
@ -59,7 +59,7 @@
<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="flex items-center mx-52rpx mt-56rpx" v-if="pageType === 'login'">
<view class="w-32rpx h-32rpx">
<wd-checkbox v-model="agree" @change="mobile.handleAgree" checked-color="#4C9F44" size="large"> </wd-checkbox>
</view>
@ -67,6 +67,20 @@
我已阅读并同意 <text class="text-[#4C9F44]" @click.stop="mobile.handleToService">《服务协议》</text> 和<text class="text-[#4C9F44]" @click.stop="mobile.handleToPrivacy">《隐私政策》</text>
</view>
</view>
<!-- 手机号修改成功 -->
<wd-popup v-model="showEditSuccessPopup" lock-scroll custom-style="border-radius: 32rpx 32rpx 0rpx 0rpx;" position="bottom">
<view class="relative pt-64rpx pb-74rpx">
<view class="flex justify-center items-center">
<view class="bg-[#4C9F44] w-280rpx rounded-280rpx">
<wd-img width="280rpx" height="280rpx" :src="`${OSS}images/reserve_room/reserve_room_image7.png`"/>
</view>
</view>
<view class="text-[#303133] text-36rpx leading-46rpx text-center mt-48rpx">手机号修改成功</view>
<view class="text-[#9CA3AF] text-28rpx leading-44rpx mt-16rpx text-center">{{ page.desc }}</view>
<view class="w-630rpx h-90rpx leading-90rpx text-center bg-[#4C9F44] rounded-8rpx text-[#fff] mt-174rpx mx-auto" @click="mobile.handleToBack">好的</view>
</view>
</wd-popup>
</view>
</template>
@ -75,15 +89,24 @@
import {mobile as testMobile} from '@/utils/test'
import { useToast } from 'wot-design-uni'
const OSS = inject('OSS')
const toast = useToast()
const disabled = ref<boolean>(true)
// 验证码倒计时
/** 页面 **/
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 countDownTime = ref<number>(1 * 60 * 1000) // 60s倒计时
const startCountDown = ref<boolean>(false) // 是否开始倒计时
const countDown = ref<any>(null) // 倒计时组件
/** 结束 **/
// 表单相关
/** 表单相关 **/
const model = reactive<{
mobile: string
code: string
@ -91,9 +114,22 @@
mobile: '',
code: ''
})
/** 结束 **/
// 服务协议和隐私政策
/** 服务协议和隐私政策 **/
const agree = ref<boolean>(false)
/** 结束 **/
onLoad((args) => {
// 从个人登录页面进入
if (args.type === 'edit') {
userId.value = Number(args.userId) || 0 // userId仅做测试使用，实际请传真实用户ID
page.value.title = '修改手机号'
page.value.desc = '手机号一年内可修改2次'
pageType = 'edit'
}
})
const mobile = {
// 验证手机号
@ -128,6 +164,17 @@
// 登录
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',
@ -166,6 +213,11 @@
handleToPrivacy: () => {
},
// 修改手机成功后返回
handleToBack: () => {
uni.navigateBack()
}
}
</script>

125
src/pages/my/my.vue
View File

@ -1,16 +1,18 @@
<route lang="jsonc" type="page">{
"layout": "tabbar",
"style": {
"navigationStyle": "custom"
<route lang="jsonc" type="page">
{
"layout": "tabbar",
"style": {
"navigationStyle": "custom"
}
}
}</route>
</route>
<template>
<view>
<view class="home-bg w-[100%] fixed top-0 left-0 z-100">
<wd-navbar safeAreaInsetTop :bordered="false" custom-style="background-color: transparent !important;">
<template #right>
<view class="mr-16rpx flex items-center right-slot" @click="my.handleToService">
<view class="mr-16rpx flex items-center right-slot" @click="my.handleShowService">
<wd-img width="36rpx" height="36rpx" :src="`${OSS}icon/icon_service.png`"></wd-img>
</view>
</template>
@ -20,16 +22,16 @@
<view class="pb-74rpx" :style="{ paddingTop: navbarHeight + 'px' }">
<!-- 账号昵称显示 -->
<view class="ml-60rpx flex items-center">
<view class="">
<view>
<wd-img width="120rpx" height="120rpx" :src="`${OSS}icon/icon_avatar.png`" mode="aspectFill" round />
</view>
<view class="flex-1 ml-22rpx flex justify-between items-center">
<view>
<view @click="my.handleToProfile">
<view class="text-[#303133] text-36rpx leading-50rpx ml-8rpx">{{ isLogin ? '王大帅' : '立即登录' }}</view>
<view v-if="isLogin" class="flex justify-center items-center vip-bg mt-10rpx">
<!-- 会员显示图标 -->
<view v-if="isVip" class="w-36rpx h-36rpx flex items-center mr-12rpx">
<wd-img width="100%" height="100%" mode="aspectFill" :src="`${OSS}icon/icon_crown.png`"></wd-img>
<view v-if="isVip" class="flex items-center mr-12rpx">
<wd-img width="36rpx" height="36rpx" mode="aspectFill" :src="`${OSS}icon/icon_crown.png`" round></wd-img>
</view>
<!-- 这里要根据用户身份显示不同的文字 -->
<view class="text-24rpx text-[#675649] leading-34rpx flex items-center">茶址会员</view>
@ -37,9 +39,9 @@
</view>
<view class="w-178rpx h-80rpx relative">
<wd-img width="100%" height="100%" mode="aspectFill" :src="`${OSS}images/my/my_image2.png`"></wd-img>
<view class="absolute left-36rpx top-28rpx flex items-center">
<view class="w-32rpx h-32rpx flex items-center mr-8rpx">
<wd-img width="100%" height="100%" mode="aspectFill" :src="`${OSS}icon/icon_ercode.png`"></wd-img>
<view class="absolute left-36rpx top-28rpx flex items-center" @click="my.handleShowPromoCode">
<view class="flex items-center mr-8rpx">
<wd-img width="32rpx" height="32rpx" mode="aspectFill" :src="`${OSS}icon/icon_ercode.png`"></wd-img>
</view>
<view class="font-bold text-[#fff] text-24rpx leading-34rpx mt--6rpx">推广码</view>
</view>
@ -80,7 +82,7 @@
<view class="w-40rpx h-36rpx flex items-center">
<wd-img width="100%" height="100%" :src="`${OSS}icon/icon_vip.png`" mode="aspectFill"></wd-img>
</view>
<view class="flex items-center leading-34rpx ">
<view class="flex items-center leading-34rpx" @click="my.handleToVipBenefits">
<view class="font-400 text-24rpx ml-12rpx mr-20rpx text-[#EECC99]">2026.03.06到期</view>
<view class="flex items-center mt-4rpx">
<wd-icon name="arrow-right" size="24rpx" color="#EECC99"></wd-icon>
@ -109,8 +111,9 @@
<text class="text-30rpx">20</text>
</view>
<view class="font-400 text-20rpx leading-28rpx text-[#1C1C1D]">满200可用</view>
<view class="font-400 text-20rpx bg-[#FCCA84] w-126rpx h-40rpx rounded-20rpx mt-18rpx leading-40rpx mx-auto">
立即领取
<view class="font-400 text-20rpx w-126rpx h-40rpx rounded-20rpx mt-18rpx leading-40rpx mx-auto"
:class="isClaimCoupon ? 'bg-[#E6E3DF]' : 'bg-[#FCCA84]'" @click="isClaimCoupon = true">
{{ isClaimCoupon ? '已领取' : '立即领取' }}
</view>
</view>
</scroll-view>
@ -202,17 +205,45 @@
</view>
</view>
</view>
<!-- 推广码 -->
<wd-overlay :show="showPompoCodePopup" @click="showPompoCodePopup = false">
<view class="h-full relative">
<view class="absolute-center h-926rpx">
<wd-img width="600rpx" height="800rpx" :src="`${OSS}images/my/my_image7.png`"></wd-img>
<view class="absolute bottom-158rpx flex items-center w-full ml-110rpx">
<view class="mr-70rpx w-160rpx h-160rpx">
<wd-img width="160rpx" height="160rpx" :src="`${OSS}images/reserve_room/reserve_room_image3.png`" mode="scaleToFill"></wd-img>
</view>
<view class="">
<view class="font-bold text-30rpx leading-42rpx text-[#303133]">我的推广码</view>
<view class="text-40rpx leading-56rpx text-[#4C9F44] mt-20rpx">3486</view>
</view>
</view>
<view class="absolute bottom-0 left-1/2 -translate-x-1/2" @click="showPompoCodePopup = false">
<wd-img width="72rpx" height="72rpx" :src="`${OSS}icon/icon_close2.png`"></wd-img>
</view>
</view>
</view>
</wd-overlay>
<!-- 客服电话 -->
<wd-action-sheet v-model="showServiceMobile" :actions="sheetMenu" cancel-text="取消" @close="showServiceMobile = false" @select="my.handleSelectMenu" />
</view>
</template>
<script lang="ts" setup>
import {toast} from '@/utils/toast'
const OSS = inject('OSS')
const navbarHeight = inject('navbarHeight')
const rightPadding = inject('capsuleOffset')
// 登录信息相关
const userInfo = ref<any>(null)
const isLogin = ref<boolean>(false)
const isLogin = ref<boolean>(true)
const isVip = ref<boolean>(true)
@ -240,29 +271,79 @@
{ id: 3, title: '合创合伙人', icon: `${OSS}icon/icon_service_partner.png`, badge: '赚佣金', url: '' },
])
// 推广码弹窗
const showPompoCodePopup = ref<boolean>(false)
// 客服电话
const showServiceMobile = ref<boolean>(false)
const sheetMenu = ref<{ name: string}[]>([])
// 领取优惠券
const isClaimCoupon = ref<boolean>(false)
onLoad(() => {
})
const my = {
// 跳转抖音团购
handleToDouYinGroupBuying() {
handleToDouYinGroupBuying: () => {
uni.navigateTo({
url: '/bundle/order/douyin/order-list'
})
},
// 跳转到个人信息
handleToProfile: () => {
uni.navigateTo({
url: '/bundle/profile/profile'
})
},
// 跳转平台团购
handleToPlatformGroupBuying() {
handleToPlatformGroupBuying: () => {
uni.navigateTo({
url: '/bundle/order/platform/order-list'
})
},
handleToService: () => {
uni.navigateTo({
url: '/src/pages/my/service/service'
// 点击显示客服电话
handleShowService: () => {
showServiceMobile.value = true
sheetMenu.value = [
{ name: '400-800-8888' },
]
},
// 选择菜单-拨打客服电话
handleSelectMenu: (item: any) => {
uni.makePhoneCall({
phoneNumber: item.item.name
})
},
// 显示推广码
handleShowPromoCode: () => {
if (isLogin.value) {
showPompoCodePopup.value = true
} else {
toast.info('请先登录')
setTimeout(() => {
uni.navigateTo({
url: '/pages/login/login'
})
}, 800)
}
},
// 跳转到会员权益
handleToVipBenefits: () => {
if (isLogin.value) {
uni.navigateTo({
url: '/bundle/vip-benefits/vip-benefits'
})
}
}
}
</script>

6
src/pages/reserve/reserve.vue
View File

@ -166,9 +166,11 @@
.home-bg {
background-color: $cz-page-background;
background-image: url(#{$OSS}images/home/home_bg.png);
background-size: 100% 280rpx;
// background-size: 100% 300rpx;
background-size: cover;
background-repeat: no-repeat;
background-position: top center;
padding-bottom: 20rpx;
// background-position: top center;
}
.search-box {