Commit c97a5018 authored by zhangsan's avatar zhangsan

1

parent 14cd8d37
...@@ -34,8 +34,10 @@ declare module 'vue' { ...@@ -34,8 +34,10 @@ declare module 'vue' {
VanSteps: typeof import('vant/es')['Steps'] VanSteps: typeof import('vant/es')['Steps']
VanSwipe: typeof import('vant/es')['Swipe'] VanSwipe: typeof import('vant/es')['Swipe']
VanSwipeItem: typeof import('vant/es')['SwipeItem'] VanSwipeItem: typeof import('vant/es')['SwipeItem']
VanTab: typeof import('vant/es')['Tab']
VanTabbar: typeof import('vant/es')['Tabbar'] VanTabbar: typeof import('vant/es')['Tabbar']
VanTabbarItem: typeof import('vant/es')['TabbarItem'] VanTabbarItem: typeof import('vant/es')['TabbarItem']
VanTabs: typeof import('vant/es')['Tabs']
VarButton: typeof import('@varlet/ui')['Button'] VarButton: typeof import('@varlet/ui')['Button']
VarCard: typeof import('@varlet/ui')['Card'] VarCard: typeof import('@varlet/ui')['Card']
VarCell: typeof import('@varlet/ui')['Cell'] VarCell: typeof import('@varlet/ui')['Cell']
......
...@@ -6,7 +6,7 @@ ...@@ -6,7 +6,7 @@
<div class="form-container"> <div class="form-container">
<var-form ref="loginFormRef" @submit="onLoginSubmit"> <var-form ref="loginFormRef" @submit="onLoginSubmit">
<var-input v-model="loginUsername" placeholder="账号" :rules="[ <var-input v-model="loginUsername" placeholder="请输入您的手机号码" :rules="[
(value) => { (value) => {
if (!value) return '请填写手机号'; if (!value) return '请填写手机号';
if (!/^1[3-9]\d{9}$/.test(value)) return '请输入正确的手机号'; if (!/^1[3-9]\d{9}$/.test(value)) return '请输入正确的手机号';
...@@ -18,8 +18,7 @@ ...@@ -18,8 +18,7 @@
</template> </template>
</var-input> </var-input>
<var-input v-model="loginPassword" type="password" placeholder="密码" <var-input v-model="loginPassword" type="password" placeholder="密码" :rules="[(value) => {
:rules="[(value) => {
if (!value) return '请填写密码'; if (!value) return '请填写密码';
return true; return true;
}]"> }]">
...@@ -27,21 +26,20 @@ ...@@ -27,21 +26,20 @@
<var-icon name="lock" /> <var-icon name="lock" />
</template> </template>
</var-input> </var-input>
<div class="action-row">
<span class="forgot-password" @click="downloadApp">APP下载</span>
<span class="verify-login" @click="onLineService">在线客服</span>
</div>
<var-button class="submit-btn" type="primary" block native-type="submit" :loading="loginLoading"> <var-button class="submit-btn" type="primary" block native-type="submit" :loading="loginLoading">
立即登录 立即登录
</var-button> </var-button>
</var-form> <div class="warpfooter">
<div class="action-row">
<span class="verify-login" @click="onLineService">联系客服</span>
<span class="forgot-password" @click="downloadApp">APP下载</span>
</div>
<div class="register-link"> <div class="register-link">
<span @click="router.push('/register')">注册账号</span> <span @click="router.push('/register')">新用户注册</span>
</div> </div>
</div> </div>
</var-form>
</div>
</div> </div>
</template> </template>
...@@ -101,137 +99,85 @@ const onLineService = () => { ...@@ -101,137 +99,85 @@ const onLineService = () => {
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
// 样式代码保持不变
.login-container { .login-container {
min-height: 100vh; height: 100vh;
background: #fff; background: url('@/static/login.png') no-repeat center center;
background-size: 100% 100%;
box-sizing: border-box;
overflow: auto;
padding: 20px; padding: 20px;
padding-top: 360px;
.logo {
padding: 40px 0 20px;
display: flex;
justify-content: center;
.logo-icon {
width: 60px;
height: 60px;
background: #ff6b35;
border-radius: 16px;
}
}
.welcome {
text-align: left;
margin-bottom: 40px;
h2 {
font-size: 28px;
color: #333;
margin: 0 0 8px;
}
h3 {
font-size: 20px;
color: #666;
margin: 0;
font-weight: normal;
}
}
.form-container { .form-container {
margin: 0 auto;
max-width: 400px;
border-radius: 12px;
:deep(.var-input) { :deep(.var-input) {
margin-bottom: 20px; padding: 0 10px;
border-bottom: 1px solid #eee; margin-bottom: 14px;
border: 1px solid #e0e0e0;
border-radius: 8px;
overflow: hidden;
.var-field__controller { .var-field__controller {
padding: 12px 0; padding: 14px 12px;
background: #fff;
} }
.var-icon { .var-icon {
color: #999; color: #1D8348;
margin-right: 12px; margin-right: 12px;
} }
}
input {
font-size: 16px;
}
}
.warpfooter{
display: flex;
margin-top: 20px;
justify-content: space-between;
padding-left: 20px;
}
.action-row { .action-row {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
margin-bottom: 24px;
font-size: 14px; font-size: 14px;
color: #666; color: #333;
span { span {
cursor: pointer; cursor: pointer;
&:hover {
color: #ff6b35;
} }
span:last-child{
margin-left: 10px;
} }
} }
.submit-btn { .submit-btn {
height: 44px; height: 36px;
font-size: 16px; font-size: 18px;
border-radius: 22px; width: 70%;
background: #ff6b35; margin: 0 auto;
margin-bottom: 40px; border-radius: 24px;
background: #3a9256;
} font-weight: 500;
.other-login {
.divider {
display: flex;
align-items: center;
margin-bottom: 24px;
.line {
flex: 1;
height: 1px;
background: #eee;
}
.text {
padding: 0 16px;
color: #999;
font-size: 14px;
}
}
.social-login { &:hover {
display: flex; background: #2ECC71;
justify-content: center;
.wechat-login {
display: flex;
flex-direction: column;
align-items: center;
cursor: pointer;
.var-icon {
color: #07c160;
margin-bottom: 8px;
}
span {
font-size: 12px;
color: #666;
}
}
} }
} }
.register-link { .register-link {
margin-top: 40px;
text-align: center; text-align: center;
span { span {
color: #ff6b35; color: #409ec8;
cursor: pointer; cursor: pointer;
font-size: 14px; font-size: 14px;
&:hover {
text-decoration: underline;
}
} }
} }
} }
......
...@@ -67,12 +67,17 @@ ...@@ -67,12 +67,17 @@
立即注册 立即注册
</var-button> </var-button>
</var-form> </var-form>
<div class="warpfooter">
<div class="login-link"> <div class="action-row">
<span class="verify-login" @click="onLineService">联系客服</span>
<span class="forgot-password" @click="downloadApp">APP下载</span>
</div>
<div class="register-link">
已有账号?<span @click="router.push('/login')">立即登录</span> 已有账号?<span @click="router.push('/login')">立即登录</span>
</div> </div>
</div> </div>
</div> </div>
</div>
</template> </template>
<script lang="ts" setup> <script lang="ts" setup>
...@@ -114,7 +119,13 @@ const onRegisterSubmit = async () => { ...@@ -114,7 +119,13 @@ const onRegisterSubmit = async () => {
} }
} }
} }
const downloadApp = () => {
window.location.href = sessionStorage.getItem('appdownload') || ''
}
const onLineService = () => {
window.location.href = sessionStorage.getItem('kfurl') || ''
}
// 组件销毁时清除定时器 // 组件销毁时清除定时器
onUnmounted(() => { onUnmounted(() => {
if (timer) { if (timer) {
...@@ -125,100 +136,100 @@ onUnmounted(() => { ...@@ -125,100 +136,100 @@ onUnmounted(() => {
<style lang="scss" scoped> <style lang="scss" scoped>
.register-container { .register-container {
min-height: 100vh; height: 100vh;
background: #fff; background: url('@/static/login.png') no-repeat center center;
background-size: 100% 100%;
box-sizing: border-box;
overflow: auto;
padding: 20px; padding: 20px;
padding-top: 340px;
.logo {
padding: 40px 0 20px;
display: flex;
justify-content: center;
.logo-icon {
width: 60px;
height: 60px;
background: #ff6b35;
border-radius: 16px;
}
}
.welcome {
text-align: left;
margin-bottom: 40px;
h2 {
font-size: 28px;
color: #333;
margin: 0 0 8px;
}
h3 {
font-size: 20px;
color: #666;
margin: 0;
font-weight: normal;
}
}
.form-container { .form-container {
margin: 0 auto;
max-width: 400px;
border-radius: 12px;
:deep(.var-input) { :deep(.var-input) {
margin-bottom: 20px; margin-bottom: 14px;
border-bottom: 1px solid #eee; padding: 0 10px;
border: 1px solid #e0e0e0;
border-radius: 8px;
overflow: hidden;
.var-field__controller { .var-field__controller {
padding: 12px 0; padding: 14px 12px;
background: #fff;
} }
.var-icon { .var-icon {
color: #999; color: #1D8348;
margin-right: 12px; margin-right: 12px;
} }
input {
font-size: 16px;
}
} }
.verify-code { .submit-btn {
display: flex; height: 36px;
align-items: flex-start; font-size: 18px;
gap: 12px; width: 70%;
margin: 0 auto;
border-radius: 24px;
background: #3a9256;
font-weight: 500;
:deep(.var-input) { &:hover {
flex: 1; background: #2ECC71;
margin-bottom: 0; }
} }
.code-btn { .login-link {
min-width: 100px; text-align: center;
height: 44px; color: #666;
border-radius: 22px; font-size: 15px;
color: #ff6b35;
border-color: #ff6b35;
&:disabled { span {
opacity: 0.6; color: #1D8348;
cursor: pointer;
margin-left: 4px;
&:hover {
color: #2ECC71;
}
} }
} }
} }
.submit-btn { .warpfooter {
height: 44px; display: flex;
font-size: 16px; margin-top: 20px;
border-radius: 22px; justify-content: space-between;
background: #ff6b35; padding-left: 20px;
margin: 40px 0;
} }
.login-link { .action-row {
text-align: center; display: flex;
color: #666; justify-content: space-between;
font-size: 14px; font-size: 14px;
color: #333;
span { span {
color: #ff6b35;
cursor: pointer; cursor: pointer;
}
&:hover { span:last-child {
text-decoration: underline; margin-left: 10px;
} }
} }
.register-link {
text-align: center;
font-size: 14px;
span {
color: #409ec8;
cursor: pointer;
} }
} }
} }
......
...@@ -75,6 +75,8 @@ ...@@ -75,6 +75,8 @@
<script setup lang="ts"> <script setup lang="ts">
import { ref, reactive } from 'vue' import { ref, reactive } from 'vue'
import request from '@/utils/request' import request from '@/utils/request'
import { useRouter } from 'vue-router'
const router = useRouter()
const loading = ref(false) const loading = ref(false)
const formData = reactive({ const formData = reactive({
name: '', name: '',
...@@ -125,8 +127,7 @@ const getDs = async () => { ...@@ -125,8 +127,7 @@ const getDs = async () => {
} }
getDs() getDs()
const handleInvite = () => { const handleInvite = () => {
// TODO: 实现邀请逻辑 router.push('/user/invite')
showToast('邀请功能开发中')
} }
</script> </script>
......
<script setup>
import { ref, onMounted } from 'vue'
import request from '@/utils/request'
const content = ref([])
// 获取公告
const getNotice = async () => {
try {
const res = await request.get('/business/businessMobileNotice/list', {params:{ type: 3 }})
if(res.result.records.length > 0){
content.value = res.result.records
}
} catch (error) {
console.error('获取公告失败:', error)
}
}
// 初始化
onMounted(async () => {
await Promise.all([
getNotice(),
])
})
</script>
<template>
<div class="container">
<div class="content-wrapper">
<div class="notice-content">
<div class="notice-box">
<template v-for="(item, index) in content" :key="index">
<div class="notice-item" v-html="item.notictBody" />
</template>
</div>
</div>
</div>
</div>
</template>
<style lang="scss" scoped>
.container {
box-sizing: border-box;
min-height: 100vh;
width: 100%;
box-sizing: border-box;
padding-top: 5vh;
background: url('@/static/kpsl/5.png') no-repeat center center;
background-size: 100% 100%;
background-position: center;
background-repeat: no-repeat;
}
.content-wrapper {
width: 100%;
box-sizing: border-box;
height: 550px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 0 15px;
}
.notice-content {
width: 100%;
max-width: 350px;
height: 550px;
background: #fff;
border-radius: 15px;
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
overflow: hidden;
.notice-box {
height: 100%;
padding: 15px;
overflow-y: auto;
-webkit-overflow-scrolling: touch;
&::-webkit-scrollbar {
width: 4px;
}
&::-webkit-scrollbar-thumb {
background: rgba(0, 0, 0, 0.2);
border-radius: 2px;
}
}
.notice-item {
margin-bottom: 10px;
line-height: 1.5;
font-size: 14px;
&:last-child {
margin-bottom: 0;
}
}
}
.button-group {
position: fixed;
bottom: 20px;
left: 15px;
right: 15px;
display: flex;
flex-direction: column;
gap: 10px;
}
// 添加动画
@keyframes fadeIn {
from {
opacity: 0;
transform: translateY(10px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.notice-item {
animation: fadeIn 0.3s ease-out forwards;
}
</style>
\ No newline at end of file
...@@ -11,7 +11,8 @@ import pnga12 from "@/static/user/12.png"; ...@@ -11,7 +11,8 @@ import pnga12 from "@/static/user/12.png";
import pnga13 from "@/static/user/13.png"; import pnga13 from "@/static/user/13.png";
import pnga14 from "@/static/user/14.png"; import pnga14 from "@/static/user/14.png";
import { useRouter } from "vue-router"; import { useRouter } from "vue-router";
const kfurl = sessionStorage.getItem("kfurl"); import handleCopy from "@/utils/handleCopy";
const kfurl = sessionStorage.getItem("kfurl" || "https://www.baidu.com");
const router = useRouter(); const router = useRouter();
// 导入图片 // 导入图片
...@@ -103,7 +104,7 @@ onMounted(fetchData); ...@@ -103,7 +104,7 @@ onMounted(fetchData);
<div class="phone">{{ sysUser?.username?.replace(/(\d{3})\d{4}(\d{4})/, '$1****$2') }}</div> <div class="phone">{{ sysUser?.username?.replace(/(\d{3})\d{4}(\d{4})/, '$1****$2') }}</div>
<div class="invite-code"> <div class="invite-code">
邀请码:{{ sysUser?.yqm || '000000' }} 邀请码:{{ sysUser?.yqm || '000000' }}
<span class="copy">复制</span> <span class="copy" @click="handleCopy(sysUser?.yqm)">复制</span>
</div> </div>
</div> </div>
<div class="sign-in" @click="router.push('/user/signIn')"> <div class="sign-in" @click="router.push('/user/signIn')">
......
...@@ -6,6 +6,8 @@ ...@@ -6,6 +6,8 @@
<div class="padding"> <div class="padding">
<!-- 邀请方式区域 --> <!-- 邀请方式区域 -->
<!-- 邀请奖励卡片列表 -->
<div class="invite-method"> <div class="invite-method">
<h2 class="title">邀请方式</h2> <h2 class="title">邀请方式</h2>
<div class="content"> <div class="content">
...@@ -25,62 +27,64 @@ ...@@ -25,62 +27,64 @@
</div> </div>
</div> </div>
</div> </div>
<div v-for="item in rewardList" :key="item.index" class="reward-card">
<div class="reward-content">
<div class="info">
<h3>每邀请{{ item.index }}位好友实名注册</h3>
<p>赠送{{ item.number }}</p>
</div>
<div :class="['status', { completed: item.index <= smCount }]">
{{ item.index <= smCount ? "已完成" : "未完成" }} </div>
</div>
</div>
<div class="reward-card"> <div class="reward-card">
<div class="reward-content"> <div class="reward-content">
<div class="info"> <div class="info">
<h3>每邀请1人</h3> <h3>邀请满10以上的</h3>
<p>注册并实名获得1000元生活补贴</p> <p>额外赠送500克金条</p>
</div> </div>
</div> </div>
</div> </div>
<!-- 邀请奖励卡片列表 --> <div class="reward-card">
<div v-for="item in rewardList" :key="item.index" class="reward-card">
<div class="reward-content"> <div class="reward-content">
<div class="info"> <div class="info">
<h3>每邀请{{ item.index }}</h3> <h3>邀请满20以上的</h3>
<p>注册并实名获得{{ item.number }}元生活补贴</p> <p>赠送红旗轿车一台</p>
<p>注册并实名获得{{ item.jifen }}积分奖励</p>
</div> </div>
<div :class="['status', { completed: item.index <= smCount }]">
{{ item.index <= smCount ? "已完成" : "未完成" }} </div>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
import { ref, reactive } from 'vue' import { ref, reactive } from 'vue'
import QRCode from 'qrcode' import QRCode from 'qrcode'
import handleCopy from '@/utils/handleCopy' import handleCopy from '@/utils/handleCopy'
interface RewardItem { interface RewardItem {
index: number index: number
number: number, number: number,
jifen: number jifen: number
} }
// 响应式状态 // 响应式状态
const QRImgUrl = ref('') const QRImgUrl = ref('')
const linkstr = ref('') const linkstr = ref('')
const userInfo = ref({}) const userInfo = ref({})
const user = JSON.parse(sessionStorage.getItem('userInfo') || '{}') const user = JSON.parse(sessionStorage.getItem('userInfo') || '{}')
userInfo.value = user?.sysUser userInfo.value = user?.sysUser
const smCount = ref(user?.smCount || 0) const smCount = ref(user?.smCount || 0)
linkstr.value = `https://${location.host}/register?yqm=${userInfo?.value?.yqm}` linkstr.value = `https://${location.host}/register?yqm=${userInfo?.value?.yqm}`
// 奖励配置 // 奖励配置
const rewardList: RewardItem[] = [ const rewardList: RewardItem[] = [
{ index: 3, number: 50000, jifen: 5 }, { index: 1, number: 50000, jifen: 5 },
{ index: 7, number: 110000, jifen: 11 }, { index: 5, number: 100000, jifen: 11 },
{ index: 11, number: 180000, jifen: 17 }, { index: 10, number: 200000, jifen: 17 },
{ index: 16, number: 240000, jifen: 24 }, { index: 50, number: 300000, jifen: 24 },
{ index: 30, number: 350000, jifen: 36 }, ]
{ index: 50, number: 560000, jifen: 58 },
{ index: 100, number: 1250000, jifen: 110 }, // 生成二维码
] const generateQRCode = async () => {
// 生成二维码
const generateQRCode = async () => {
const opts = { const opts = {
errorCorrectionLevel: 'L', errorCorrectionLevel: 'L',
type: 'image/png', type: 'image/png',
...@@ -100,21 +104,19 @@ ...@@ -100,21 +104,19 @@
console.error('Failed to generate QR code:', error) console.error('Failed to generate QR code:', error)
showToast('二维码生成失败') showToast('二维码生成失败')
} }
} }
generateQRCode() generateQRCode()
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.container { .container {
font-family: pingfang;
background-size: 100% auto;
min-height: 100vh;
font-size: 12px; // 24rpx / 2
box-sizing: border-box; box-sizing: border-box;
padding-bottom: 84px; // 168rpx / 2 height: inherit;
background: linear-gradient(to bottom, #ed727d, #fcf0f1); font-size: 12px;
background: url('@/static/kpsl/5.png') no-repeat center center;
background-size: 100% 100%;
.advertise { .advertise {
img { img {
...@@ -128,7 +130,9 @@ ...@@ -128,7 +130,9 @@
} }
.padding { .padding {
padding: 0 20px; // 40rpx / 2 padding: 0 20px;
height: calc(100% - 100px); // 40rpx / 2
overflow: auto;
} }
.invite-method { .invite-method {
...@@ -237,5 +241,5 @@ ...@@ -237,5 +241,5 @@
} }
} }
} }
} }
</style> </style>
\ No newline at end of file \ No newline at end of file
...@@ -186,8 +186,10 @@ getTeamInfo() ...@@ -186,8 +186,10 @@ getTeamInfo()
<style lang="scss" scoped> <style lang="scss" scoped>
.page-container { .page-container {
height: 100vh; height: inherit;
background: #f5f7fa; background: url('@/static/kpsl/5.png') no-repeat center center;
background-size: 100% 100%;
box-sizing: border-box;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
overflow: hidden; // 防止页面滚动 overflow: hidden; // 防止页面滚动
...@@ -246,7 +248,7 @@ getTeamInfo() ...@@ -246,7 +248,7 @@ getTeamInfo()
border-radius: 12px; border-radius: 12px;
overflow: hidden; overflow: hidden;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05); box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
height: calc(100% - 120px); // 减去顶部卡片的高度 height: calc(100% - 130px); // 减去顶部卡片的高度
display: flex; display: flex;
flex-direction: column; flex-direction: column;
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment