Skip to content

Z
zgyz
Commit c97a5018 authored by zhangsan's avatar zhangsan
Browse files
Options

1

parent 14cd8d37
Show whitespace changes
Inline Side-by-side
Showing with 486 additions and 394 deletions
src/components.d.ts
View file @ c97a5018
......@@ -34,8 +34,10 @@ declare module 'vue' {
VanSteps: typeof import('vant/es')['Steps']
VanSwipe: typeof import('vant/es')['Swipe']
VanSwipeItem: typeof import('vant/es')['SwipeItem']
VanTab: typeof import('vant/es')['Tab']
VanTabbar: typeof import('vant/es')['Tabbar']
VanTabbarItem: typeof import('vant/es')['TabbarItem']
VanTabs: typeof import('vant/es')['Tabs']
VarButton: typeof import('@varlet/ui')['Button']
VarCard: typeof import('@varlet/ui')['Card']
VarCell: typeof import('@varlet/ui')['Cell']
......
src/views/login/index.vue
View file @ c97a5018
......@@ -6,7 +6,7 @@
<div class="form-container">
<var-form ref="loginFormRef" @submit="onLoginSubmit">
<var-input v-model="loginUsername" placeholder="账号" :rules="[
<var-input v-model="loginUsername" placeholder="请输入您的手机号码" :rules="[
(value) => {
if (!value) return '请填写手机号';
if (!/^1[3-9]\d{9}$/.test(value)) return '请输入正确的手机号';
......@@ -18,8 +18,7 @@
</template>
</var-input>
<var-input v-model="loginPassword" type="password" placeholder="密码"
:rules="[(value) => {
<var-input v-model="loginPassword" type="password" placeholder="密码" :rules="[(value) => {
if (!value) return '请填写密码';
return true;
}]">
......@@ -27,21 +26,20 @@
<var-icon name="lock" />
</template>
</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>
</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">
<span @click="router.push('/register')">注册账号</span>
<span @click="router.push('/register')">新用户注册</span>
</div>
</div>
</var-form>
</div>
</div>
</template>
......@@ -101,137 +99,85 @@ const onLineService = () => {
</script>
<style lang="scss" scoped>
// 样式代码保持不变
.login-container {
min-height: 100vh;
background: #fff;
height: 100vh;
background: url('@/static/login.png') no-repeat center center;
background-size: 100% 100%;
box-sizing: border-box;
overflow: auto;
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 {
margin: 0 auto;
max-width: 400px;
border-radius: 12px;
:deep(.var-input) {
margin-bottom: 20px;
border-bottom: 1px solid #eee;
padding: 0 10px;
margin-bottom: 14px;
border: 1px solid #e0e0e0;
border-radius: 8px;
overflow: hidden;
.var-field__controller {
padding: 12px 0;
padding: 14px 12px;
background: #fff;
}
.var-icon {
color: #999;
color: #1D8348;
margin-right: 12px;
}
}
input {
font-size: 16px;
}
}
.warpfooter{
display: flex;
margin-top: 20px;
justify-content: space-between;
padding-left: 20px;
}
.action-row {
display: flex;
justify-content: space-between;
margin-bottom: 24px;
font-size: 14px;
color: #666;
color: #333;
span {
cursor: pointer;
&:hover {
color: #ff6b35;
}
span:last-child{
margin-left: 10px;
}
}
.submit-btn {
height: 44px;
font-size: 16px;
border-radius: 22px;
background: #ff6b35;
margin-bottom: 40px;
}
.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;
}
}
height: 36px;
font-size: 18px;
width: 70%;
margin: 0 auto;
border-radius: 24px;
background: #3a9256;
font-weight: 500;
.social-login {
display: flex;
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;
}
}
&:hover {
background: #2ECC71;
}
}
.register-link {
margin-top: 40px;
text-align: center;
span {
color: #ff6b35;
color: #409ec8;
cursor: pointer;
font-size: 14px;
&:hover {
text-decoration: underline;
}
}
}
}
......
src/views/register/index.vue
View file @ c97a5018
......@@ -67,12 +67,17 @@
立即注册
</var-button>
</var-form>
<div class="login-link">
<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">
已有账号？<span @click="router.push('/login')">立即登录</span>
</div>
</div>
</div>
</div>
</template>
<script lang="ts" setup>
......@@ -114,7 +119,13 @@ const onRegisterSubmit = async () => {
}
}
}
const downloadApp = () => {
window.location.href = sessionStorage.getItem('appdownload') || ''
}
const onLineService = () => {
window.location.href = sessionStorage.getItem('kfurl') || ''
}
// 组件销毁时清除定时器
onUnmounted(() => {
if (timer) {
......@@ -125,100 +136,100 @@ onUnmounted(() => {
<style lang="scss" scoped>
.register-container {
min-height: 100vh;
background: #fff;
height: 100vh;
background: url('@/static/login.png') no-repeat center center;
background-size: 100% 100%;
box-sizing: border-box;
overflow: auto;
padding: 20px;
.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;
}
}
padding-top: 340px;
.form-container {
margin: 0 auto;
max-width: 400px;
border-radius: 12px;
:deep(.var-input) {
margin-bottom: 20px;
border-bottom: 1px solid #eee;
margin-bottom: 14px;
padding: 0 10px;
border: 1px solid #e0e0e0;
border-radius: 8px;
overflow: hidden;
.var-field__controller {
padding: 12px 0;
padding: 14px 12px;
background: #fff;
}
.var-icon {
color: #999;
color: #1D8348;
margin-right: 12px;
}
input {
font-size: 16px;
}
}
.verify-code {
display: flex;
align-items: flex-start;
gap: 12px;
.submit-btn {
height: 36px;
font-size: 18px;
width: 70%;
margin: 0 auto;
border-radius: 24px;
background: #3a9256;
font-weight: 500;
:deep(.var-input) {
flex: 1;
margin-bottom: 0;
&:hover {
background: #2ECC71;
}
}
.code-btn {
min-width: 100px;
height: 44px;
border-radius: 22px;
color: #ff6b35;
border-color: #ff6b35;
.login-link {
text-align: center;
color: #666;
font-size: 15px;
&:disabled {
opacity: 0.6;
span {
color: #1D8348;
cursor: pointer;
margin-left: 4px;
&:hover {
color: #2ECC71;
}
}
}
}
.submit-btn {
height: 44px;
font-size: 16px;
border-radius: 22px;
background: #ff6b35;
margin: 40px 0;
.warpfooter {
display: flex;
margin-top: 20px;
justify-content: space-between;
padding-left: 20px;
}
.login-link {
text-align: center;
color: #666;
.action-row {
display: flex;
justify-content: space-between;
font-size: 14px;
color: #333;
span {
color: #ff6b35;
cursor: pointer;
}
&:hover {
text-decoration: underline;
span:last-child {
margin-left: 10px;
}
}
.register-link {
text-align: center;
font-size: 14px;
span {
color: #409ec8;
cursor: pointer;
}
}
}
......
src/views/ryds/index.vue
View file @ c97a5018
......@@ -75,6 +75,8 @@
<script setup lang="ts">
import { ref, reactive } from 'vue'
import request from '@/utils/request'
import { useRouter } from 'vue-router'
const router = useRouter()
const loading = ref(false)
const formData = reactive({
name: '',
......@@ -125,8 +127,7 @@ const getDs = async () => {
}
getDs()
const handleInvite = () => {
// TODO: 实现邀请逻辑
showToast('邀请功能开发中')
router.push('/user/invite')
}
</script>
......
src/views/user/group.vue 0 → 100644
View file @ c97a5018
<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
src/views/user/index.vue
View file @ c97a5018
......@@ -11,7 +11,8 @@ import pnga12 from "@/static/user/12.png";
import pnga13 from "@/static/user/13.png";
import pnga14 from "@/static/user/14.png";
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();
// 导入图片
......@@ -103,7 +104,7 @@ onMounted(fetchData);
<div class="phone">{{ sysUser?.username?.replace(/(\d{3})\d{4}(\d{4})/, '$1****$2') }}</div>
<div class="invite-code">
邀请码：{{ sysUser?.yqm || '000000' }}
<span class="copy">复制</span>
<span class="copy" @click="handleCopy(sysUser?.yqm)">复制</span>
</div>
</div>
<div class="sign-in" @click="router.push('/user/signIn')">
......
src/views/user/invite.vue
View file @ c97a5018
......@@ -6,6 +6,8 @@
<div class="padding">
<!-- 邀请方式区域 -->
<!-- 邀请奖励卡片列表 -->
<div class="invite-method">
<h2 class="title">邀请方式</h2>
<div class="content">
......@@ -25,62 +27,64 @@
</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-content">
<div class="info">
<h3>每邀请1人</h3>
<p>注册并实名获得1000元生活补贴</p>
<h3>邀请满10以上的</h3>
<p>额外赠送500克金条</p>
</div>
</div>
</div>
<!-- 邀请奖励卡片列表 -->
<div v-for="item in rewardList" :key="item.index" class="reward-card">
<div class="reward-card">
<div class="reward-content">
<div class="info">
<h3>每邀请{{ item.index }}人</h3>
<p>注册并实名获得{{ item.number }}元生活补贴</p>
<p>注册并实名获得{{ item.jifen }}积分奖励</p>
<h3>邀请满20以上的</h3>
<p>赠送红旗轿车一台</p>
</div>
<div :class="['status', { completed: item.index <= smCount }]">
{{ item.index <= smCount ? "已完成" : "未完成" }} </div>
</div>
</div>
</div>
</div>
</template>
</template>
<script setup lang="ts">
import { ref, reactive } from 'vue'
import QRCode from 'qrcode'
import handleCopy from '@/utils/handleCopy'
interface RewardItem {
<script setup lang="ts">
import { ref, reactive } from 'vue'
import QRCode from 'qrcode'
import handleCopy from '@/utils/handleCopy'
interface RewardItem {
index: number
number: number,
jifen: number
}
// 响应式状态
const QRImgUrl = ref('')
const linkstr = ref('')
const userInfo = ref({})
const user = JSON.parse(sessionStorage.getItem('userInfo') || '{}')
userInfo.value = user?.sysUser
const smCount = ref(user?.smCount || 0)
linkstr.value = `https://${location.host}/register?yqm=${userInfo?.value?.yqm}`
// 奖励配置
const rewardList: RewardItem[] = [
{ index: 3, number: 50000, jifen: 5 },
{ index: 7, number: 110000, jifen: 11 },
{ index: 11, number: 180000, jifen: 17 },
{ index: 16, number: 240000, jifen: 24 },
{ index: 30, number: 350000, jifen: 36 },
{ index: 50, number: 560000, jifen: 58 },
{ index: 100, number: 1250000, jifen: 110 },
]
// 生成二维码
const generateQRCode = async () => {
}
// 响应式状态
const QRImgUrl = ref('')
const linkstr = ref('')
const userInfo = ref({})
const user = JSON.parse(sessionStorage.getItem('userInfo') || '{}')
userInfo.value = user?.sysUser
const smCount = ref(user?.smCount || 0)
linkstr.value = `https://${location.host}/register?yqm=${userInfo?.value?.yqm}`
// 奖励配置
const rewardList: RewardItem[] = [
{ index: 1, number: 50000, jifen: 5 },
{ index: 5, number: 100000, jifen: 11 },
{ index: 10, number: 200000, jifen: 17 },
{ index: 50, number: 300000, jifen: 24 },
]
// 生成二维码
const generateQRCode = async () => {
const opts = {
errorCorrectionLevel: 'L',
type: 'image/png',
......@@ -100,21 +104,19 @@
console.error('Failed to generate QR code:', error)
showToast('二维码生成失败')
}
}
}
generateQRCode()
</script>
generateQRCode()
</script>
<style lang="scss" scoped>
.container {
font-family: pingfang;
background-size: 100% auto;
min-height: 100vh;
font-size: 12px; // 24rpx / 2
<style lang="scss" scoped>
.container {
box-sizing: border-box;
padding-bottom: 84px; // 168rpx / 2
background: linear-gradient(to bottom, #ed727d, #fcf0f1);
height: inherit;
font-size: 12px;
background: url('@/static/kpsl/5.png') no-repeat center center;
background-size: 100% 100%;
.advertise {
img {
......@@ -128,7 +130,9 @@
}
.padding {
padding: 0 20px; // 40rpx / 2
padding: 0 20px;
height: calc(100% - 100px); // 40rpx / 2
overflow: auto;
}
.invite-method {
......@@ -237,5 +241,5 @@
}
}
}
}
</style>
\ No newline at end of file
}
</style>
\ No newline at end of file
src/views/user/myteam.vue
View file @ c97a5018
......@@ -186,8 +186,10 @@ getTeamInfo()
<style lang="scss" scoped>
.page-container {
height: 100vh;
background: #f5f7fa;
height: inherit;
background: url('@/static/kpsl/5.png') no-repeat center center;
background-size: 100% 100%;
box-sizing: border-box;
display: flex;
flex-direction: column;
overflow: hidden; // 防止页面滚动
......@@ -246,7 +248,7 @@ getTeamInfo()
border-radius: 12px;
overflow: hidden;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
height: calc(100% - 120px); // 减去顶部卡片的高度
height: calc(100% - 130px); // 减去顶部卡片的高度
display: flex;
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