feat: 完成对接
This commit is contained in:
anonymous
@@ -1,45 +0,0 @@
|
||||
<route lang="json5">
|
||||
{
|
||||
style: {
|
||||
navigationBarTitleText: '关于',
|
||||
},
|
||||
}
|
||||
</route>
|
||||
|
||||
<template>
|
||||
<view
|
||||
class="bg-white overflow-hidden pt-2 px-4"
|
||||
:style="{ marginTop: safeAreaInsets?.top + 'px' }"
|
||||
>
|
||||
<view class="text-center text-3xl mt-8">
|
||||
鸽友们好，我是
|
||||
<text class="text-red-500">菲鸽</text>
|
||||
</view>
|
||||
<view class="text-center mt-8 text-#fff">
|
||||
<wd-button type="success" @click="gotoPage('i18n')">进入多语言页面</wd-button>
|
||||
</view>
|
||||
<RequestComp />
|
||||
<UploadComp />
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import RequestComp from './components/request.vue'
|
||||
import UploadComp from './components/upload.vue'
|
||||
|
||||
// 获取屏幕边界到安全区域距离
|
||||
const { safeAreaInsets } = uni.getSystemInfoSync()
|
||||
|
||||
const gotoPage = (path) => {
|
||||
uni.navigateTo({
|
||||
url: `/pages/about/${path}`,
|
||||
})
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.test-css {
|
||||
// mt-4=>1rem=>16px;
|
||||
margin-top: 16px;
|
||||
}
|
||||
</style>
|
||||
@@ -1,97 +0,0 @@
|
||||
<route lang="json">
|
||||
{
|
||||
"style": {
|
||||
"navigationBarTitleText": "%app.name%"
|
||||
}
|
||||
}
|
||||
</route>
|
||||
|
||||
<template>
|
||||
<view class="center flex-col mt-6">
|
||||
<view class="text-red-500 p-4 leading-6">
|
||||
经过我的测试发现，小程序里面会有2处BUG：
|
||||
<view>
|
||||
<text class="line-through">1. 页面标题多语言不生效</text>
|
||||
<text class="ml-2 text-green-500">已解决</text>
|
||||
</view>
|
||||
<view>
|
||||
<text class="line-through">2. 多语言传递的参数不生效，如下 heavy</text>
|
||||
<text class="ml-2 text-green-500">已解决</text>
|
||||
<view class="ml-2 text-green-500">把 $t 改为自定义的 t 即可</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="text-green-500">多语言测试</view>
|
||||
<view class="m-4">{{ $t('app.name') }}</view>
|
||||
<view class="m-4">{{ $t('weight', { heavy: 100 }) }}</view>
|
||||
<view class="m-4">{{ t('introduction', user) }}</view>
|
||||
|
||||
<view class="text-green-500 mt-12">切换语言</view>
|
||||
<view class="uni-list">
|
||||
<radio-group @change="radioChange" class="radio-group">
|
||||
<label class="uni-list-cell uni-list-cell-pd" v-for="item in languages" :key="item.value">
|
||||
<view>
|
||||
<radio :value="item.value" :checked="item.value === current" />
|
||||
</view>
|
||||
<view>{{ item.name }}</view>
|
||||
</label>
|
||||
</radio-group>
|
||||
</view>
|
||||
|
||||
<!-- http://localhost:9000/#/pages/index/i18n -->
|
||||
<button @click="testI18n" class="mt-20 mb-44">测试弹窗</button>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import i18n, { t } from '@/locale/index'
|
||||
import { testI18n } from '@/utils/i18n'
|
||||
|
||||
const current = ref(uni.getLocale())
|
||||
const user = { name: '张三', detail: { height: 178, weight: '75kg' } }
|
||||
const languages = [
|
||||
{
|
||||
value: 'zh-Hans',
|
||||
name: '中文',
|
||||
checked: 'true',
|
||||
},
|
||||
{
|
||||
value: 'en',
|
||||
name: '英文',
|
||||
},
|
||||
]
|
||||
|
||||
const radioChange = (evt) => {
|
||||
// console.log(evt)
|
||||
current.value = evt.detail.value
|
||||
// 下面2句缺一不可！！！
|
||||
uni.setLocale(evt.detail.value)
|
||||
i18n.global.locale = evt.detail.value
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.uni-list {
|
||||
position: relative;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
width: 100%;
|
||||
background-color: #fff;
|
||||
border-radius: 12px;
|
||||
}
|
||||
|
||||
.radio-group {
|
||||
width: 200px;
|
||||
margin: 10px auto;
|
||||
border-radius: 12px;
|
||||
}
|
||||
|
||||
.uni-list-cell {
|
||||
position: relative;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 10px;
|
||||
background-color: #bcecd1;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,124 @@
|
||||
<route lang="json5">
|
||||
{
|
||||
style: {
|
||||
navigationBarTitleText: '忘记密码',
|
||||
navigationStyle: 'custom',
|
||||
},
|
||||
notNeedLogin: false,
|
||||
}
|
||||
</route>
|
||||
<template>
|
||||
<view class="login-container relative">
|
||||
<NavBar />
|
||||
<view class="pt-45">
|
||||
<view class="mx-15 px-15 shadow-[0_0_10px_rgba(10,68,245,0.1)] rounded-10">
|
||||
<view class="flex items-center py-15">
|
||||
<image class="w-24 h-24" src="@/static/images/login/phone.png" mode="aspectFit" />
|
||||
<input
|
||||
type="text"
|
||||
placeholder-class="text-#889BC6"
|
||||
class="text-right flex-1 text-14"
|
||||
placeholder="请输入用户名"
|
||||
/>
|
||||
</view>
|
||||
<view class="flex items-center py-15">
|
||||
<image class="w-24 h-24" src="@/static/images/login/message.png" mode="aspectFit" />
|
||||
<input
|
||||
type="text"
|
||||
placeholder-class="text-#889BC6"
|
||||
class="text-right flex-1 text-14"
|
||||
placeholder="请输入短信验证码"
|
||||
/>
|
||||
<view
|
||||
class="py-6 rounded-full ml-15 px-15 text-12 text-white btn-gradient text-14 text-#889BC6"
|
||||
@click="handleGetCode"
|
||||
>
|
||||
获取验证码
|
||||
</view>
|
||||
</view>
|
||||
<view class="flex items-center py-15">
|
||||
<image class="w-24 h-24" src="@/static/images/login/password.png" mode="aspectFit" />
|
||||
<input
|
||||
placeholder-class="text-#889BC6"
|
||||
type="password"
|
||||
class="text-right flex-1 text-14"
|
||||
placeholder="请输入登录密码"
|
||||
/>
|
||||
</view>
|
||||
<view class="flex items-center py-15">
|
||||
<image class="w-24 h-24" src="@/static/images/login/password.png" mode="aspectFit" />
|
||||
<input
|
||||
placeholder-class="text-#889BC6"
|
||||
type="password"
|
||||
class="text-right flex-1 text-14"
|
||||
placeholder="请再次输入登录密码"
|
||||
/>
|
||||
</view>
|
||||
<view class="flex items-center py-15">
|
||||
<image class="w-24 h-24" src="@/static/images/login/password.png" mode="aspectFit" />
|
||||
<input
|
||||
placeholder-class="text-#889BC6"
|
||||
type="password"
|
||||
class="text-right flex-1 text-14"
|
||||
placeholder="请输入支付密码"
|
||||
/>
|
||||
</view>
|
||||
<view class="flex items-center py-15">
|
||||
<image class="w-24 h-24" src="@/static/images/login/password.png" mode="aspectFit" />
|
||||
<input
|
||||
placeholder-class="text-#889BC6"
|
||||
type="password"
|
||||
class="text-right flex-1 text-14"
|
||||
placeholder="请再次输入支付密码"
|
||||
/>
|
||||
</view>
|
||||
</view>
|
||||
<view
|
||||
class="mt-50 text-center py-12 rounded-full mx-15 text-15 text-white btn-gradient"
|
||||
@click="handleRegister"
|
||||
>
|
||||
确认
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import NavBar from '@/components/NavBar.vue'
|
||||
import { isLogged } from '@/interceptors/route'
|
||||
import { useUserStore } from '@/store/user'
|
||||
|
||||
const userStore = useUserStore()
|
||||
|
||||
let redirect = '/'
|
||||
onLoad((options) => {
|
||||
redirect = options.redirect ?? '/'
|
||||
})
|
||||
|
||||
const handleRegister = () => {
|
||||
userStore.setUserInfo({
|
||||
token: '123456',
|
||||
})
|
||||
uni.reLaunch({
|
||||
url: redirect,
|
||||
})
|
||||
}
|
||||
onLoad(() => {
|
||||
if (isLogged()) {
|
||||
uni.reLaunch({
|
||||
url: redirect,
|
||||
})
|
||||
}
|
||||
})
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.login-container {
|
||||
box-sizing: border-box;
|
||||
min-height: 100vh;
|
||||
padding-bottom: 200rpx;
|
||||
background-image: url('@/static/images/login-bg.png');
|
||||
background-repeat: no-repeat;
|
||||
background-size: cover;
|
||||
}
|
||||
</style>
|
||||
+65
-29
@@ -8,50 +8,86 @@
|
||||
}
|
||||
</route>
|
||||
<template>
|
||||
<view
|
||||
class="bg-white overflow-hidden pt-2 px-4"
|
||||
:style="{ marginTop: safeAreaInsets?.top + 'px' }"
|
||||
>
|
||||
<view class="mt-12">
|
||||
<image src="/static/logo.svg" alt="" class="w-28 h-28 block mx-auto" />
|
||||
<view class="home-page">
|
||||
<NavBar />
|
||||
<image
|
||||
class="mx-auto block w-345 h-170 mt-15 rounded-10 overflow-hidden"
|
||||
src="@/static/images/home/main-bg.png"
|
||||
mode="aspectFill"
|
||||
/>
|
||||
<view class="flex bg-#F5F9FF py-15 rounded-10 m-15 border-2 border-white border-solid">
|
||||
<view class="flex-1 flex flex-col items-center" @click="handleIntroduction">
|
||||
<image class="w-30 h-30" src="@/static/images/home/nav-1.png" mode="aspectFill" />
|
||||
<text class="mt-8 text-14 text-#333">简介</text>
|
||||
</view>
|
||||
<view class="flex-1 flex flex-col items-center" @click="handleInvite">
|
||||
<image class="w-30 h-30" src="@/static/images/home/nav-2.png" mode="aspectFill" />
|
||||
<text class="mt-8 text-14 text-#333">抽奖转盘</text>
|
||||
</view>
|
||||
<view class="flex-1 flex flex-col items-center" @click="handleInvite">
|
||||
<image class="w-30 h-30" src="@/static/images/home/nav-2.png" mode="aspectFill" />
|
||||
<text class="mt-8 text-14 text-#333">奖励制度</text>
|
||||
</view>
|
||||
<view class="flex-1 flex flex-col items-center" @click="handleOfficialCommunity">
|
||||
<image class="w-30 h-30" src="@/static/images/home/nav-3.png" mode="aspectFill" />
|
||||
<text class="mt-8 text-14 text-#333">官方社群</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="text-center text-4xl main-title-color mt-4">unibest</view>
|
||||
<view class="text-center text-2xl mt-2 mb-8">最好用的 uniapp 开发模板</view>
|
||||
|
||||
<view class="text-justify max-w-100 m-auto text-4 indent mb-2">{{ description }}</view>
|
||||
<view class="text-center mt-8">
|
||||
当前平台是：
|
||||
<text class="text-green-500">{{ PLATFORM.platform }}</text>
|
||||
<view class="flex bg-white py-8 px-15 rounded-10 m-15">
|
||||
<view class="text-14 text-#333">系统公告</view>
|
||||
<view class="text-12 ml-15 text-#999">每邀请人可以获得20股马尔代夫股权</view>
|
||||
</view>
|
||||
<view class="text-center mt-4">
|
||||
模板分支是：
|
||||
<text class="text-green-500">i18n</text>
|
||||
|
||||
<view class="bg-white py-15 px-15 rounded-10 m-15">
|
||||
<view class="text-14 text-#333">热点新闻</view>
|
||||
<view class="flex mt-15" v-for="item in 10" :key="item">
|
||||
<image
|
||||
class="w-85 h-85 rounded-10"
|
||||
src="@/static/images/home/news-2.png"
|
||||
mode="aspectFill"
|
||||
/>
|
||||
<view class="ml-15 flex-1 flex flex-col justify-between">
|
||||
<view text-14>#人海战术#签约!中央广播电视总台与农业农村部达成战略合作</view>
|
||||
<view class="text-12 text-#999">证券时报网</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<tabbar />
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import PLATFORM from '@/utils/platform'
|
||||
import NavBar from '@/components/NavBar.vue'
|
||||
|
||||
defineOptions({
|
||||
name: 'Home',
|
||||
})
|
||||
|
||||
// 获取屏幕边界到安全区域距离
|
||||
const { safeAreaInsets } = uni.getSystemInfoSync()
|
||||
const author = ref('菲鸽')
|
||||
const description = ref(
|
||||
'unibest 是一个集成了多种工具和技术的 uniapp 开发模板，由 uniapp + Vue3 + Ts + Vite4 + UnoCss + UniUI + VSCode 构建，模板具有代码提示、自动格式化、统一配置、代码片段等功能，并内置了许多常用的基本组件和基本功能，让你编写 uniapp 拥有 best 体验。',
|
||||
)
|
||||
// 测试 uni API 自动引入
|
||||
onLoad(() => {
|
||||
console.log(author)
|
||||
})
|
||||
const handleIntroduction = () => {
|
||||
uni.navigateTo({
|
||||
url: '/pages-sub/introduction/index',
|
||||
})
|
||||
}
|
||||
|
||||
const handleInvite = () => {
|
||||
uni.navigateTo({
|
||||
url: '/pages/invite/index',
|
||||
})
|
||||
}
|
||||
|
||||
const handleOfficialCommunity = () => {
|
||||
uni.navigateTo({
|
||||
url: '/pages-sub/official-community/index',
|
||||
})
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.main-title-color {
|
||||
color: #d14328;
|
||||
.home-page {
|
||||
min-height: 100vh;
|
||||
padding-bottom: 100rpx;
|
||||
background-image: url('@/static/images/bg.png');
|
||||
background-position: top;
|
||||
background-size: cover;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -0,0 +1,134 @@
|
||||
<!-- 使用 type="home" 属性设置首页，其他页面不需要设置，默认为page；推荐使用json5，更强大，且允许注释 -->
|
||||
<route lang="json5">
|
||||
{
|
||||
style: {
|
||||
navigationStyle: 'custom',
|
||||
navigationBarTitleText: '投资理财',
|
||||
},
|
||||
}
|
||||
</route>
|
||||
<template>
|
||||
<view class="invest-page">
|
||||
<NavBar>
|
||||
<template #right>
|
||||
<view @click="onGoInvestDetail" class="text-14 text-#486CCF">投资明细</view>
|
||||
</template>
|
||||
</NavBar>
|
||||
<view class="flex mt-30 flex-col mx-15 rounded-10 px-40 py-32 main-content">
|
||||
<view class="text-14 text-#6784C7">我的投资金</view>
|
||||
<view class="text-35 leading-35 mt-10 text-#BE7143 font-bold">1000000</view>
|
||||
</view>
|
||||
|
||||
<view class="mt-100">
|
||||
<view
|
||||
v-for="item in 10"
|
||||
:key="item"
|
||||
class="invest-item relative flex flex-col items-center pt-15"
|
||||
>
|
||||
<view class="text-15 text-#3F88F6">5G通讯</view>
|
||||
<view class="flex w-full mt-15">
|
||||
<view class="flex-1 text-center">
|
||||
<view class="text-22 text-#333 font-bold">1000.00</view>
|
||||
<view class="text-12 mt-4 text-blue-red">投资金额</view>
|
||||
</view>
|
||||
<view class="flex-1 text-center">
|
||||
<view class="text-22 text-#FF3B30 font-bold">1000.00</view>
|
||||
<view class="text-12 mt-4 text-blue-red">每日分红</view>
|
||||
</view>
|
||||
</view>
|
||||
<view
|
||||
class="text-center px-50 absolute bottom-0 left-0 text-12 text-#fff rounded-full py-8 bg-blue-red"
|
||||
@click="onInvest(item)"
|
||||
>
|
||||
立即投资
|
||||
</view>
|
||||
<view
|
||||
class="text-center px-16 absolute bottom-13 right-33 text-12 text-#fff rounded-br-10 rounded-tl-10 py-4 bg-blue-red"
|
||||
>
|
||||
新手体验
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<wd-action-sheet v-model="showPayType" :panels="panels" @select="onSelectPayType" />
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import NavBar from '@/components/NavBar.vue'
|
||||
import AlipayIcon from '@/static/images/invest/alipay-icon.png'
|
||||
import WechatIcon from '@/static/images/invest/wechat-icon.png'
|
||||
import UnionpayIcon from '@/static/images/invest/unionpay-icon.png'
|
||||
|
||||
defineOptions({
|
||||
name: 'Home',
|
||||
})
|
||||
const showPayType = ref(false)
|
||||
const panels = ref([
|
||||
{
|
||||
iconUrl: WechatIcon,
|
||||
title: '微信支付',
|
||||
},
|
||||
{
|
||||
iconUrl: AlipayIcon,
|
||||
title: '支付宝支付',
|
||||
},
|
||||
{
|
||||
iconUrl: UnionpayIcon,
|
||||
title: '银联支付',
|
||||
},
|
||||
])
|
||||
|
||||
const onGoInvestDetail = () => {
|
||||
uni.navigateTo({
|
||||
url: '/pages-sub/invest-detail/index',
|
||||
})
|
||||
}
|
||||
|
||||
const onSelectPayType = ({ item, index }: any) => {
|
||||
console.log(item, index)
|
||||
alert(item.title)
|
||||
}
|
||||
|
||||
const onInvest = (item: any) => {
|
||||
// uni.navigateTo({
|
||||
// url: '/pages-sub/invest-immediately/index',
|
||||
// })
|
||||
showPayType.value = true
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.invest-page {
|
||||
min-height: 100vh;
|
||||
padding-bottom: 100px;
|
||||
background-color: #ebbf92;
|
||||
background-image: url('@/static/images/invest/bg.png');
|
||||
background-repeat: no-repeat;
|
||||
background-attachment: fixed;
|
||||
background-position: top -80rpx center;
|
||||
background-size: 100%;
|
||||
}
|
||||
.invest-item {
|
||||
width: 690rpx;
|
||||
height: 352rpx;
|
||||
margin: 0 auto 30rpx;
|
||||
background-image: url('@/static/images/invest/item-bg.png');
|
||||
background-repeat: no-repeat;
|
||||
background-position: center;
|
||||
background-size: 100%;
|
||||
}
|
||||
.main-content {
|
||||
background-image: url('@/static/images/invest/main-bg.png');
|
||||
background-repeat: no-repeat;
|
||||
background-position: center;
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
.bg-blue-red {
|
||||
background-image: linear-gradient(90.02deg, #8bb9ff 0.02%, #be4343 100.27%);
|
||||
}
|
||||
.text-blue-red {
|
||||
background-image: linear-gradient(90.02deg, #8bb9ff 0.02%, #be4343 100.27%);
|
||||
background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,74 @@
|
||||
<route lang="json5">
|
||||
{
|
||||
style: {
|
||||
navigationBarTitleText: '邀请好友',
|
||||
navigationBarBackgroundColor: '#fff',
|
||||
navigationStyle: 'custom',
|
||||
},
|
||||
}
|
||||
</route>
|
||||
|
||||
<script setup lang="ts">
|
||||
import NavBar from '@/components/NavBar.vue'
|
||||
import VueQrcode from '@chenfengyuan/vue-qrcode'
|
||||
|
||||
const qrcodeValue = '/pages/register/index?invite=888888'
|
||||
|
||||
const onCopy = (code: string) => {
|
||||
uni.setClipboardData({
|
||||
data: code,
|
||||
})
|
||||
}
|
||||
|
||||
const onLottery = () => {
|
||||
uni.navigateTo({
|
||||
url: '/pages-sub/lottery/index',
|
||||
})
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<view class="pb-100 min-h-screen invite-page">
|
||||
<NavBar />
|
||||
<view class="flex justify-center mt-80">
|
||||
<view class="text-white btn-gradient rounded-full px-30 py-10 text-14">邀请好友</view>
|
||||
<view class="ml-15 bg-white rounded-full px-30 py-10 text-14" @click="onLottery">
|
||||
<text class="text-gradient">幸运大转盘</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="flex flex-col items-center mt-180">
|
||||
<view
|
||||
class="flex items-center text-16 text-#333 bg-[rgba(255,255,255,0.8)] rounded-full px-15 py-4 text-12 mt-8"
|
||||
>
|
||||
<view>
|
||||
邀请码
|
||||
<text class="font-bold">9999999</text>
|
||||
</view>
|
||||
<view
|
||||
class="btn-gradient text-white rounded-full px-15 py-4 text-12 ml-10"
|
||||
@click="onCopy('99999')"
|
||||
>
|
||||
复制
|
||||
</view>
|
||||
</view>
|
||||
<view class="mt-15 rounded-10 overflow-hidden flex">
|
||||
<VueQrcode :value="qrcodeValue" :options="{ size: 200 }" />
|
||||
</view>
|
||||
<view
|
||||
class="btn-gradient text-white rounded-full text-14 px-30 py-8 mt-30"
|
||||
@click="onCopy(qrcodeValue)"
|
||||
>
|
||||
复制邀请链接
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.invite-page {
|
||||
background-image: url('@/static/images/page-sub/invite-bg.png');
|
||||
background-repeat: no-repeat;
|
||||
background-position: top;
|
||||
background-size: 100%;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,118 @@
|
||||
<route lang="json5">
|
||||
{
|
||||
style: {
|
||||
navigationBarTitleText: '登录',
|
||||
navigationStyle: 'custom',
|
||||
},
|
||||
notNeedLogin: false,
|
||||
}
|
||||
</route>
|
||||
<template>
|
||||
<view class="login-container relative">
|
||||
<NavBar />
|
||||
<view class="mt-44 text-28 pl-32 text-gradient" style="-webkit-background-clip: text">
|
||||
登录
|
||||
</view>
|
||||
<view class="pt-45">
|
||||
<view class="mx-15 px-15 shadow-[0_0_10px_rgba(10,68,245,0.1)] rounded-10">
|
||||
<view class="flex items-center py-15">
|
||||
<image class="w-24 h-24" src="@/static/images/login/phone.png" mode="aspectFit" />
|
||||
<input
|
||||
type="text"
|
||||
v-model="formData.member_username"
|
||||
placeholder-class="text-#889BC6"
|
||||
class="text-right flex-1 text-14"
|
||||
placeholder="请输入用户名"
|
||||
/>
|
||||
</view>
|
||||
<view class="flex items-center py-15">
|
||||
<image class="w-24 h-24" src="@/static/images/login/password.png" mode="aspectFit" />
|
||||
<input
|
||||
placeholder-class="text-#889BC6"
|
||||
type="text"
|
||||
v-model="formData.member_password"
|
||||
class="text-right flex-1 text-14"
|
||||
placeholder="请输入登录密码"
|
||||
/>
|
||||
</view>
|
||||
</view>
|
||||
<view class="ml-auto mr-0 w-fit text-gradient text-14 p-15" @click="handleEditPassword">
|
||||
忘记密码
|
||||
</view>
|
||||
<view
|
||||
class="mt-30 text-center py-12 rounded-full mx-15 text-15 text-white btn-gradient"
|
||||
@click="handleLogin"
|
||||
>
|
||||
登录
|
||||
</view>
|
||||
<view class="mt-30 text-center text-14 text-#999">
|
||||
没有账号？
|
||||
<text class="text-gradient" @click="handleRegister">立即注册</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="absolute bottom-15 left-50% -translate-x-50% text-#999 text-14">V1.0.0</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import NavBar from '@/components/NavBar.vue'
|
||||
import { isLogged } from '@/interceptors/route'
|
||||
import { useUserStore } from '@/store/user'
|
||||
|
||||
const userStore = useUserStore()
|
||||
const formData = ref({
|
||||
member_username: '',
|
||||
member_password: '',
|
||||
})
|
||||
|
||||
let redirect = '/'
|
||||
onLoad((options) => {
|
||||
redirect = options.redirect ?? '/'
|
||||
})
|
||||
|
||||
const handleLogin = async () => {
|
||||
if (!formData.value.member_username || !formData.value.member_password) {
|
||||
return uni.showToast({
|
||||
title: '请输入用户名和密码',
|
||||
icon: 'none',
|
||||
})
|
||||
}
|
||||
userStore.setUserInfo({
|
||||
token: '123456',
|
||||
})
|
||||
uni.reLaunch({
|
||||
url: redirect,
|
||||
})
|
||||
}
|
||||
|
||||
const handleRegister = () => {
|
||||
uni.navigateTo({
|
||||
url: '/pages/register/index',
|
||||
})
|
||||
}
|
||||
|
||||
const handleEditPassword = () => {
|
||||
uni.navigateTo({
|
||||
url: '/pages/edit-password/index',
|
||||
})
|
||||
}
|
||||
|
||||
onLoad(() => {
|
||||
if (isLogged()) {
|
||||
uni.reLaunch({
|
||||
url: redirect,
|
||||
})
|
||||
}
|
||||
})
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.login-container {
|
||||
box-sizing: border-box;
|
||||
min-height: 100vh;
|
||||
padding-bottom: 200rpx;
|
||||
background-image: url('@/static/images/login-bg.png');
|
||||
background-repeat: no-repeat;
|
||||
background-size: cover;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,166 @@
|
||||
<route lang="json5">
|
||||
{
|
||||
style: {
|
||||
navigationStyle: 'custom',
|
||||
navigationBarTitleText: '个人中心',
|
||||
},
|
||||
}
|
||||
</route>
|
||||
|
||||
<template>
|
||||
<view class="my-page">
|
||||
<NavBar />
|
||||
<view class="flex flex-col items-center justify-center mt-30">
|
||||
<Avatar class="w-80 h-80 mx-auto" />
|
||||
<view class="text-16 mt-10">默认用户</view>
|
||||
<view class="text-12 mt-8">账号：199****654</view>
|
||||
</view>
|
||||
<view class="flex justify-center text-center mt-15 items-center">
|
||||
<view>
|
||||
<view class="text-30 font-bold">1002</view>
|
||||
<view class="text-14 mt-10 text-#3B81F3">我的余额</view>
|
||||
</view>
|
||||
<image class="w-100 h-100" src="@/static/images/my/translate.png" mode="aspectFit" />
|
||||
<view>
|
||||
<view class="text-30 font-bold">1231</view>
|
||||
<view class="text-14 mt-10 text-#3B81F3">我的股数</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="flex px-15 mt-15">
|
||||
<view
|
||||
class="flex py-30 justify-center items-center rounded-tl-10 rounded-br-10 flex-1 bg-[linear-gradient(180deg,#D9EBFF,#9EDAFF)] border-1 border-#5FAEFF80 border-solid"
|
||||
@click="handleWithdrawal"
|
||||
>
|
||||
<image class="w-40 h-40" src="@/static/images/my/withdrawal.png" mode="aspectFit" />
|
||||
<view class="text-white text-14 px-15 py-5 ml-15 rounded-full btn-gradient">提现</view>
|
||||
</view>
|
||||
<view
|
||||
class="ml-10 flex py-30 justify-center items-center rounded-tl-10 rounded-br-10 flex-1 bg-[linear-gradient(180deg,#D9EBFF,#9EDAFF)] border-1 border-#5FAEFF80 border-solid"
|
||||
@click="handleConvert"
|
||||
>
|
||||
<image class="w-40 h-40" src="@/static/images/my/top-up.png" mode="aspectFit" />
|
||||
<view class="text-white text-14 px-15 py-5 ml-15 rounded-full btn-gradient">转换</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<image
|
||||
class="w-330 h-123 mx-auto mt-15 block"
|
||||
src="@/static/images/my/recommend.png"
|
||||
mode="aspectFill"
|
||||
@click="handleInvite"
|
||||
/>
|
||||
|
||||
<view class="mt-15 grid grid-cols-2 gap-10 p-15">
|
||||
<view
|
||||
@click="handleTeam"
|
||||
class="flex justify-center rounded-tl-10 rounded-br-10 bg-[linear-gradient(45deg,#EFF7FF,#D1E8FF)] p-15 border border-#BEDCFF border-solid"
|
||||
>
|
||||
<image class="w-24 h-24" src="@/static/images/my/team.png" mode="aspectFit" />
|
||||
<view class="text-14 text-#333 ml-10">我的邀请</view>
|
||||
</view>
|
||||
<view
|
||||
@click="handleAsset"
|
||||
class="flex justify-center rounded-tl-10 rounded-br-10 bg-[linear-gradient(45deg,#EFF7FF,#D1E8FF)] p-15 border border-#BEDCFF border-solid"
|
||||
>
|
||||
<image class="w-24 h-24" src="@/static/images/my/house.png" mode="aspectFit" />
|
||||
<view class="text-14 text-#333 ml-10">我的资产</view>
|
||||
</view>
|
||||
|
||||
<view
|
||||
@click="handleRealName"
|
||||
class="flex justify-center rounded-tl-10 rounded-br-10 bg-[linear-gradient(45deg,#EFF7FF,#D1E8FF)] p-15 border border-#BEDCFF border-solid"
|
||||
>
|
||||
<image class="w-24 h-24" src="@/static/images/my/realname.png" mode="aspectFit" />
|
||||
<view class="text-14 text-#333 ml-10">实名认证</view>
|
||||
</view>
|
||||
<view
|
||||
@click="handleBankCard"
|
||||
class="flex justify-center rounded-tl-10 rounded-br-10 bg-[linear-gradient(45deg,#EFF7FF,#D1E8FF)] p-15 border border-#BEDCFF border-solid"
|
||||
>
|
||||
<image class="w-24 h-24" src="@/static/images/my/card.png" mode="aspectFit" />
|
||||
<view class="text-14 text-#333 ml-10">我的银行卡</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view
|
||||
class="mt-50 mx-auto w-294 btn-gradient rounded-full text-center text-14 text-white py-15 mt-15"
|
||||
@click="handleLogout"
|
||||
>
|
||||
退出登录
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import Avatar from '@/components/Avatar.vue'
|
||||
import NavBar from '@/components/NavBar.vue'
|
||||
import { loginRoute } from '@/interceptors/route'
|
||||
import { useUserStore } from '@/store/user'
|
||||
|
||||
const userStore = useUserStore()
|
||||
|
||||
const handleLogout = () => {
|
||||
userStore.clearUserInfo()
|
||||
uni.reLaunch({
|
||||
url: loginRoute,
|
||||
})
|
||||
}
|
||||
const handleWithdrawalDetail = () => {
|
||||
uni.navigateTo({
|
||||
url: '/pages-sub/withdrawal-detail/index',
|
||||
})
|
||||
}
|
||||
|
||||
const handleWithdrawal = () => {
|
||||
uni.navigateTo({
|
||||
url: '/pages-sub/withdrawal/index',
|
||||
})
|
||||
}
|
||||
|
||||
const handleTeam = () => {
|
||||
uni.navigateTo({
|
||||
url: '/pages-sub/team/index',
|
||||
})
|
||||
}
|
||||
|
||||
const handleRealName = () => {
|
||||
uni.navigateTo({
|
||||
url: '/pages-sub/realname/index',
|
||||
})
|
||||
}
|
||||
|
||||
const handleAsset = () => {
|
||||
uni.navigateTo({
|
||||
url: '/pages-sub/asset/index',
|
||||
})
|
||||
}
|
||||
|
||||
const handleBankCard = () => {
|
||||
uni.navigateTo({
|
||||
url: '/pages-sub/withdrawal-type/index',
|
||||
})
|
||||
}
|
||||
|
||||
const handleInvite = () => {
|
||||
uni.navigateTo({
|
||||
url: '/pages/invite/index',
|
||||
})
|
||||
}
|
||||
|
||||
const handleConvert = () => {
|
||||
uni.navigateTo({
|
||||
url: '/pages-sub/convert/index',
|
||||
})
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.my-page {
|
||||
min-height: 100vh;
|
||||
padding-bottom: 100rpx;
|
||||
background-image: url('@/static/images/bg.png');
|
||||
background-position: top;
|
||||
background-size: cover;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,133 @@
|
||||
<route lang="json5">
|
||||
{
|
||||
style: {
|
||||
navigationBarTitleText: '注册',
|
||||
navigationStyle: 'custom',
|
||||
},
|
||||
notNeedLogin: false,
|
||||
}
|
||||
</route>
|
||||
<template>
|
||||
<view class="login-container relative">
|
||||
<NavBar />
|
||||
<view class="pt-45">
|
||||
<view class="mx-15 px-15 shadow-[0_0_10px_rgba(10,68,245,0.1)] rounded-10">
|
||||
<view class="flex items-center py-15">
|
||||
<image class="w-24 h-24" src="@/static/images/login/phone.png" mode="aspectFit" />
|
||||
<input
|
||||
type="text"
|
||||
placeholder-class="text-#889BC6"
|
||||
class="text-right flex-1 text-14"
|
||||
placeholder="请输入用户名"
|
||||
/>
|
||||
</view>
|
||||
<view class="flex items-center py-15">
|
||||
<image class="w-24 h-24" src="@/static/images/login/message.png" mode="aspectFit" />
|
||||
<input
|
||||
type="text"
|
||||
placeholder-class="text-#889BC6"
|
||||
class="text-right flex-1 text-14"
|
||||
placeholder="请输入短信验证码"
|
||||
/>
|
||||
<view
|
||||
class="py-6 rounded-full ml-15 px-15 text-12 text-white btn-gradient text-14 text-#889BC6"
|
||||
@click="handleGetCode"
|
||||
>
|
||||
获取验证码
|
||||
</view>
|
||||
</view>
|
||||
<view class="flex items-center py-15">
|
||||
<image class="w-24 h-24" src="@/static/images/login/password.png" mode="aspectFit" />
|
||||
<input
|
||||
placeholder-class="text-#889BC6"
|
||||
type="password"
|
||||
class="text-right flex-1 text-14"
|
||||
placeholder="请输入登录密码"
|
||||
/>
|
||||
</view>
|
||||
<view class="flex items-center py-15">
|
||||
<image class="w-24 h-24" src="@/static/images/login/password.png" mode="aspectFit" />
|
||||
<input
|
||||
placeholder-class="text-#889BC6"
|
||||
type="password"
|
||||
class="text-right flex-1 text-14"
|
||||
placeholder="请再次输入登录密码"
|
||||
/>
|
||||
</view>
|
||||
<view class="flex items-center py-15">
|
||||
<image class="w-24 h-24" src="@/static/images/login/password.png" mode="aspectFit" />
|
||||
<input
|
||||
placeholder-class="text-#889BC6"
|
||||
type="password"
|
||||
class="text-right flex-1 text-14"
|
||||
placeholder="请输入支付密码"
|
||||
/>
|
||||
</view>
|
||||
<view class="flex items-center py-15">
|
||||
<image class="w-24 h-24" src="@/static/images/login/password.png" mode="aspectFit" />
|
||||
<input
|
||||
placeholder-class="text-#889BC6"
|
||||
type="password"
|
||||
class="text-right flex-1 text-14"
|
||||
placeholder="请再次输入支付密码"
|
||||
/>
|
||||
</view>
|
||||
<view class="flex items-center py-15">
|
||||
<image class="w-24 h-24" src="@/static/images/login/invite.png" mode="aspectFit" />
|
||||
<input
|
||||
placeholder-class="text-#889BC6"
|
||||
type="password"
|
||||
class="text-right flex-1 text-14"
|
||||
placeholder="请输入邀请码"
|
||||
/>
|
||||
</view>
|
||||
</view>
|
||||
<view
|
||||
class="mt-50 text-center py-12 rounded-full mx-15 text-15 text-white btn-gradient"
|
||||
@click="handleRegister"
|
||||
>
|
||||
注册
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import NavBar from '@/components/NavBar.vue'
|
||||
import { isLogged } from '@/interceptors/route'
|
||||
import { useUserStore } from '@/store/user'
|
||||
|
||||
const userStore = useUserStore()
|
||||
|
||||
let redirect = '/'
|
||||
onLoad((options) => {
|
||||
redirect = options.redirect ?? '/'
|
||||
})
|
||||
|
||||
const handleRegister = () => {
|
||||
userStore.setUserInfo({
|
||||
token: '123456',
|
||||
})
|
||||
uni.reLaunch({
|
||||
url: redirect,
|
||||
})
|
||||
}
|
||||
onLoad(() => {
|
||||
if (isLogged()) {
|
||||
uni.reLaunch({
|
||||
url: redirect,
|
||||
})
|
||||
}
|
||||
})
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.login-container {
|
||||
box-sizing: border-box;
|
||||
min-height: 100vh;
|
||||
padding-bottom: 200rpx;
|
||||
background-image: url('@/static/images/login-bg.png');
|
||||
background-repeat: no-repeat;
|
||||
background-size: cover;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user