1
This commit is contained in:
parent
28754c86d5
commit
a776179199
@ -1,6 +1,4 @@
|
|||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
import Header from "@/components/Head.vue";
|
|
||||||
import Footer from "@/components/Footer.vue";
|
|
||||||
import {
|
import {
|
||||||
NConfigProvider,
|
NConfigProvider,
|
||||||
GlobalThemeOverrides
|
GlobalThemeOverrides
|
||||||
@ -23,10 +21,8 @@
|
|||||||
<template>
|
<template>
|
||||||
<n-message-provider>
|
<n-message-provider>
|
||||||
<n-config-provider :theme-overrides="themeOverrides">
|
<n-config-provider :theme-overrides="themeOverrides">
|
||||||
<div id="app" v-wechat-title="$route.meta.title">
|
<div v-wechat-title="$route.meta.title">
|
||||||
<Header></Header>
|
|
||||||
<router-view></router-view>
|
<router-view></router-view>
|
||||||
<Footer></Footer>
|
|
||||||
</div>
|
</div>
|
||||||
</n-config-provider>
|
</n-config-provider>
|
||||||
</n-message-provider>
|
</n-message-provider>
|
||||||
|
|||||||
@ -19,3 +19,15 @@ export function getNewsbxList(params) {
|
|||||||
params: params,
|
params: params,
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
export function getLoginPhoneCode(params) {
|
||||||
|
return http('/api/sms/send', {
|
||||||
|
method: 'POST',
|
||||||
|
params: params,
|
||||||
|
});
|
||||||
|
}
|
||||||
|
export function userPhoneLogin(params) {
|
||||||
|
return http('/api/user/mobilelogin', {
|
||||||
|
method: 'POST',
|
||||||
|
params: params,
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|||||||
BIN
src/assets/img/head.png
Normal file
BIN
src/assets/img/head.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 8.6 KiB |
BIN
src/assets/img/login.png
Normal file
BIN
src/assets/img/login.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.1 MiB |
BIN
src/assets/img/pwd.png
Normal file
BIN
src/assets/img/pwd.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 605 B |
BIN
src/assets/img/user.png
Normal file
BIN
src/assets/img/user.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 669 B |
@ -1,17 +1,20 @@
|
|||||||
<template>
|
<template>
|
||||||
<div style="background-color: #EFEFEF;width: 100%;">
|
<div style="background-color: #EFEFEF;width: 100%;">
|
||||||
<div style="padding: 0rem 9rem;color: #A1A1A1;font-size: 0.75rem;height: 2.125rem;line-height: 2.125rem;">
|
<div style="padding: 0rem 9rem;color: #A1A1A1;font-size: 0.75rem;height: 2.125rem;line-height: 2.125rem;">
|
||||||
<n-flex justify="space-between">
|
<n-flex justify="space-between">
|
||||||
<div>您好，欢迎来到洛阳百姓问政！</div>
|
<div>您好，欢迎来到洛阳百姓问政！</div>
|
||||||
<div>
|
<div v-if="userPhone==''" style="cursor: pointer" @click="tn('/login')">
|
||||||
请<span style="color:#7B83FF">「登录」</span>或<span style="color:#7B83FF">「注册」</span>
|
请<span style="color:#7B83FF">「登录」</span>或<span style="color:#7B83FF">「注册」</span>
|
||||||
</div>
|
</div>
|
||||||
</n-flex>
|
<div v-if="userPhone!=''" style="cursor: pointer" @click="tn('/login')">
|
||||||
</div>
|
<span @click="tn('/user');">{{userPhone}}</span><span @click="quit" style="color:#7B83FF;margin-left: 20px">退出</span>
|
||||||
</div>
|
</div>
|
||||||
<div class="b1-back">
|
</n-flex>
|
||||||
<div style="padding:0rem 0 0 9rem;font-weight: 600;">
|
</div>
|
||||||
<div>
|
</div>
|
||||||
|
<div class="b1-back">
|
||||||
|
<div style="padding:0 0 0 9rem;font-weight: 600;">
|
||||||
|
<div>
|
||||||
<div style="font-size: 2.5rem;color: #FFFFFF;;">洛阳百姓问政</div>
|
<div style="font-size: 2.5rem;color: #FFFFFF;;">洛阳百姓问政</div>
|
||||||
<div style="font-size: 1.19rem;color: #FFFFFF;letter-spacing: 0.52rem;margin-top: -0.9rem;">
|
<div style="font-size: 1.19rem;color: #FFFFFF;letter-spacing: 0.52rem;margin-top: -0.9rem;">
|
||||||
wz.lytv.com.cn
|
wz.lytv.com.cn
|
||||||
@ -21,100 +24,135 @@
|
|||||||
<img src="/src/assets/img/logo.png" style="width: 45px">
|
<img src="/src/assets/img/logo.png" style="width: 45px">
|
||||||
<div style="color: #FFFFFF;font-size: 12px">洛阳广播电视台</div>
|
<div style="color: #FFFFFF;font-size: 12px">洛阳广播电视台</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div style="font-weight: 600;padding:9rem; 0 0 0.6">
|
<div style="font-weight: 600;padding:0px 9rem;">
|
||||||
<n-input-group>
|
<n-input-group>
|
||||||
<n-input placeholder="请输入想找的问题" style="width: 17rem;" />
|
<n-input placeholder="请输入想找的问题" style="width: 17rem;"/>
|
||||||
<n-flex :size="[1,0]">
|
<n-flex :size="[1,0]">
|
||||||
<div>
|
<div>
|
||||||
<n-button :round="false" :bordered="false" color="#0051B1">
|
<n-button :round="false" :bordered="false" color="#0051B1">
|
||||||
搜索
|
搜索
|
||||||
</n-button>
|
</n-button>
|
||||||
</div>
|
</div>
|
||||||
<div>
|
<div>
|
||||||
<n-button :theme-overrides="buttonThemeOverrides" :round="false" color="#0051B1">
|
<n-button :theme-overrides="buttonThemeOverrides" :round="false" color="#0051B1">
|
||||||
<img src="../assets/img/brush.png" style="width: 1.5625rem;height: 1.5625rem;">
|
<img src="../assets/img/brush.png" style="width: 1.5625rem;height: 1.5625rem;">
|
||||||
<span style="margin-left: 0.625rem;">我要投诉</span>
|
<span style="margin-left: 0.625rem;">我要投诉</span>
|
||||||
</n-button>
|
</n-button>
|
||||||
</div>
|
</div>
|
||||||
</n-flex>
|
</n-flex>
|
||||||
</n-input-group>
|
</n-input-group>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div style="padding: 5px 0px;">
|
<div style="padding: 5px 0px;">
|
||||||
<n-flex justify="center" align="center" :size="[141,10]">
|
<n-flex justify="center" align="center" :size="[141,10]">
|
||||||
<div class="left-line"></div>
|
<div class="left-line"></div>
|
||||||
<n-button text color="#0051B1">
|
<n-button @click="tn('/')" text color="#0051B1">
|
||||||
<template #default>
|
<template #default>
|
||||||
<span style="font-weight: 600;font-size: 1.25rem;">首页</span>
|
<span style="font-weight: 600;font-size: 1.25rem;">首页</span>
|
||||||
</template>
|
</template>
|
||||||
</n-button>
|
</n-button>
|
||||||
<div class="left-line"></div>
|
<div class="left-line"></div>
|
||||||
<n-button text color="#000000">
|
<n-button text color="#000000">
|
||||||
<template #default>
|
<template #default>
|
||||||
<span style="font-size: 1.25rem;">部门</span>
|
<span style="font-size: 1.25rem;">部门</span>
|
||||||
</template>
|
</template>
|
||||||
</n-button>
|
</n-button>
|
||||||
<div class="left-line"></div>
|
<div class="left-line"></div>
|
||||||
<n-button text color="#000000">
|
<n-button text color="#000000">
|
||||||
<template #default>
|
<template #default>
|
||||||
<span style="font-size: 1.25rem;">提问</span>
|
<span style="font-size: 1.25rem;">提问</span>
|
||||||
</template>
|
</template>
|
||||||
</n-button>
|
</n-button>
|
||||||
<div class="left-line"></div>
|
<div class="left-line"></div>
|
||||||
<n-button text color="#000000">
|
<n-button text color="#000000">
|
||||||
<template #default>
|
<template #default>
|
||||||
<span style="font-size: 1.25rem;">直播</span>
|
<span style="font-size: 1.25rem;">直播</span>
|
||||||
</template>
|
</template>
|
||||||
</n-button>
|
</n-button>
|
||||||
<div class="left-line"></div>
|
<div class="left-line"></div>
|
||||||
<n-button text color="#000000">
|
<n-button @click="tn('/user')" text color="#000000">
|
||||||
<template #default>
|
<template #default>
|
||||||
<span style="font-size: 1.25rem;">我的</span>
|
<span style="font-size: 1.25rem;">我的</span>
|
||||||
</template>
|
</template>
|
||||||
</n-button>
|
</n-button>
|
||||||
<div class="left-line"></div>
|
<div class="left-line"></div>
|
||||||
</n-flex>
|
</n-flex>
|
||||||
</div>
|
</div>
|
||||||
<div style="width: 100%;background-color: #7261D9;height: 0.05rem;opacity: 0.35;"></div>
|
<div style="width: 100%;background-color: #7261D9;height: 0.05rem;opacity: 0.35;"></div>
|
||||||
|
<div style="background: #D9D9D9;width: 120px;height: 180px;text-align: center;padding: 5px 0px 10px 0px;position: fixed;top: 40%;left: 10px">
|
||||||
|
<div style="text-align: right;padding-right: 5px">
|
||||||
|
<svg style="width: 20px;height: 20px;color: #999797" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 512 512"><path d="M256 48C141.31 48 48 141.31 48 256s93.31 208 208 208s208-93.31 208-208S370.69 48 256 48zm86.63 272L320 342.63l-64-64l-64 64L169.37 320l64-64l-64-64L192 169.37l64 64l64-64L342.63 192l-64 64z" fill="currentColor"></path></svg>
|
||||||
|
</div>
|
||||||
|
<div style="color: #0051B1;font-size: 12px">洛阳百姓问政</div>
|
||||||
|
<div style="color: #0051B1;font-size: 12px">公众号</div>
|
||||||
|
<div>
|
||||||
|
<img src="@/assets/img/qrcode1.png" style="width: 100px;height: 100px;margin-top: 10px">
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div style="background: #D9D9D9;width: 120px;height: 180px;text-align: center;padding: 5px 0px 10px 0px;position: fixed;top: 40%;right: 10px">
|
||||||
|
<div style="text-align: right;padding-right: 5px">
|
||||||
|
<svg style="width: 20px;height: 20px;color: #999797" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 512 512"><path d="M256 48C141.31 48 48 141.31 48 256s93.31 208 208 208s208-93.31 208-208S370.69 48 256 48zm86.63 272L320 342.63l-64-64l-64 64L169.37 320l64-64l-64-64L192 169.37l64 64l64-64L342.63 192l-64 64z" fill="currentColor"></path></svg>
|
||||||
|
</div>
|
||||||
|
<div style="color: #0051B1;font-size: 12px">洛阳百姓问政</div>
|
||||||
|
<div style="color: #0051B1;font-size: 12px">公众号</div>
|
||||||
|
<div>
|
||||||
|
<img src="@/assets/img/qrcode1.png" style="width: 100px;height: 100px;margin-top: 10px">
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
|
import {useRouter} from "vue-router";
|
||||||
import {ref, reactive, onMounted} from 'vue'
|
import {ref, reactive, onMounted} from 'vue'
|
||||||
import { ButtonProps } from 'naive-ui'
|
import {ButtonProps, useMessage} from 'naive-ui'
|
||||||
type ButtonThemeOverrides = NonNullable<ButtonProps['themeOverrides']>
|
type ButtonThemeOverrides = NonNullable<ButtonProps['themeOverrides']>
|
||||||
const buttonThemeOverrides : ButtonThemeOverrides = {
|
const buttonThemeOverrides: ButtonThemeOverrides = {
|
||||||
borderRadius: '0px'
|
borderRadius: '0px'
|
||||||
}
|
}
|
||||||
|
const message = useMessage()
|
||||||
|
const router = useRouter()
|
||||||
|
const userPhone=ref();
|
||||||
onMounted(() => {
|
onMounted(() => {
|
||||||
window.sessionStorage.setItem('user',JSON.stringify({'name':'测试'}));
|
var item = sessionStorage.getItem('user');
|
||||||
var item=window.sessionStorage.getItem('user');
|
const jsonArray = JSON.parse(item);
|
||||||
console.log(item);
|
const hiddenPhoneNumber = jsonArray.mobile.substring(0, 3) + "****" + jsonArray.mobile.substring(7);
|
||||||
|
userPhone.value=hiddenPhoneNumber;
|
||||||
})
|
})
|
||||||
|
const quit = () => {
|
||||||
|
sessionStorage.removeItem('user');
|
||||||
|
userPhone.value='';
|
||||||
|
}
|
||||||
|
const tn = (url) => {
|
||||||
|
if(url=='/user'&&userPhone.value==''){
|
||||||
|
message.error('请登录！')
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
router.push(url)
|
||||||
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style scoped>
|
<style scoped>
|
||||||
.left-line {
|
.left-line {
|
||||||
height: 1.2rem;
|
height: 1.2rem;
|
||||||
background-color: #000000;
|
background-color: #000000;
|
||||||
width: 0.05rem;
|
width: 0.05rem;
|
||||||
opacity: 0.15;
|
opacity: 0.15;
|
||||||
}
|
}
|
||||||
|
|
||||||
.n-button {
|
.n-button {
|
||||||
border-radius: 0px;
|
border-radius: 0px;
|
||||||
height: 2.25rem;
|
height: 2.25rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.b1-back {
|
.b1-back {
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
align-self: center;
|
align-self: center;
|
||||||
position: relative;
|
position: relative;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 6.25rem;
|
height: 6.25rem;
|
||||||
background: url('../assets/img/b1.png') no-repeat;
|
background: url('../assets/img/b1.png') no-repeat;
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|||||||
@ -12,6 +12,18 @@ const router = createRouter({
|
|||||||
title: '洛阳百姓问政-首页' //title配置
|
title: '洛阳百姓问政-首页' //title配置
|
||||||
},
|
},
|
||||||
component: () => import("../view/home/index.vue")
|
component: () => import("../view/home/index.vue")
|
||||||
|
},{
|
||||||
|
path: "/login",
|
||||||
|
meta: {
|
||||||
|
title: '洛阳百姓问政-登录' //title配置
|
||||||
|
},
|
||||||
|
component: () => import("../view/login/login.vue")
|
||||||
|
},{
|
||||||
|
path: "/user",
|
||||||
|
meta: {
|
||||||
|
title: '洛阳百姓问政-我的' //title配置
|
||||||
|
},
|
||||||
|
component: () => import("../view/user/user.vue")
|
||||||
}],
|
}],
|
||||||
});
|
});
|
||||||
|
|
||||||
|
|||||||
@ -1,4 +1,5 @@
|
|||||||
<template>
|
<template>
|
||||||
|
<Header/>
|
||||||
<div>
|
<div>
|
||||||
<div style="padding:20px 9rem ;">
|
<div style="padding:20px 9rem ;">
|
||||||
<div><img src="@/assets/img/b2.png" style="width: 100%;"/></div>
|
<div><img src="@/assets/img/b2.png" style="width: 100%;"/></div>
|
||||||
@ -143,7 +144,7 @@
|
|||||||
</n-flex>
|
</n-flex>
|
||||||
</div>
|
</div>
|
||||||
<div
|
<div
|
||||||
style="text-align: center;position: relative;margin-top: 10px;padding-top: 1.125rem;height: 3.75rem;">
|
style="cursor: default;text-align: center;position: relative;margin-top: 10px;padding-top: 1.125rem;height: 3.75rem;">
|
||||||
<img src="@/assets/img/bz1.png" style="width: 40%;"/>
|
<img src="@/assets/img/bz1.png" style="width: 40%;"/>
|
||||||
<div
|
<div
|
||||||
style="color: #0051B1;position: absolute;margin: 0 auto;left: 0;right: 0;top: 0;font-size: 2.5rem;letter-spacing: 5px;">
|
style="color: #0051B1;position: absolute;margin: 0 auto;left: 0;right: 0;top: 0;font-size: 2.5rem;letter-spacing: 5px;">
|
||||||
@ -181,11 +182,11 @@
|
|||||||
<n-flex justify="space-between">
|
<n-flex justify="space-between">
|
||||||
<div v-for="(item, index) in groupList" @click="openGroup(item.id)" :class="{ 'int': true, 'act': item.id == groupIndex }">{{item.name}}</div>
|
<div v-for="(item, index) in groupList" @click="openGroup(item.id)" :class="{ 'int': true, 'act': item.id == groupIndex }">{{item.name}}</div>
|
||||||
</n-flex>
|
</n-flex>
|
||||||
<div style="padding: 2.5px 0px;margin-top: 20px" v-for="(item,index) in groupNews">
|
<div style="cursor: pointer;padding: 2.5px 0px;margin-top: 20px" v-for="(item,index) in groupNews">
|
||||||
<n-flex justify="space-between">
|
<n-flex justify="space-between">
|
||||||
<div class="txt-1" style="font-size: 17px;width: 70%">
|
<div class="txt-1" style="font-size: 17px;width: 70%">
|
||||||
<div style="background-color: #0051B1;width: 5px;height: 5px;border-radius: 50%;display: inline-block;vertical-align: middle"></div>
|
<div style="background-color: #0051B1;width: 5px;height: 5px;border-radius: 50%;display: inline-block;vertical-align: middle"></div>
|
||||||
<text style="vertical-align: middle;margin-left: 5px">{{item.news_title}}</text>
|
<text class="news_title" style="vertical-align: middle;margin-left: 5px">{{item.news_title}}</text>
|
||||||
</div>
|
</div>
|
||||||
<div style="color: #818794">{{item.showtime}}</div>
|
<div style="color: #818794">{{item.showtime}}</div>
|
||||||
</n-flex>
|
</n-flex>
|
||||||
@ -195,29 +196,13 @@
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div style="background: #D9D9D9;width: 120px;height: 180px;text-align: center;padding: 5px 0px 10px 0px;position: fixed;top: 50%;left: 10px">
|
|
||||||
<div style="text-align: right;padding-right: 5px">
|
<Footer/>
|
||||||
<svg style="width: 20px;height: 20px;color: #999797" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 512 512"><path d="M256 48C141.31 48 48 141.31 48 256s93.31 208 208 208s208-93.31 208-208S370.69 48 256 48zm86.63 272L320 342.63l-64-64l-64 64L169.37 320l64-64l-64-64L192 169.37l64 64l64-64L342.63 192l-64 64z" fill="currentColor"></path></svg>
|
|
||||||
</div>
|
|
||||||
<div style="color: #0051B1;font-size: 12px">洛阳百姓问政</div>
|
|
||||||
<div style="color: #0051B1;font-size: 12px">公众号</div>
|
|
||||||
<div>
|
|
||||||
<img src="@/assets/img/qrcode1.png" style="width: 100px;height: 100px;margin-top: 10px">
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div style="background: #D9D9D9;width: 120px;height: 180px;text-align: center;padding: 5px 0px 10px 0px;position: fixed;top: 50%;right: 10px">
|
|
||||||
<div style="text-align: right;padding-right: 5px">
|
|
||||||
<svg style="width: 20px;height: 20px;color: #999797" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 512 512"><path d="M256 48C141.31 48 48 141.31 48 256s93.31 208 208 208s208-93.31 208-208S370.69 48 256 48zm86.63 272L320 342.63l-64-64l-64 64L169.37 320l64-64l-64-64L192 169.37l64 64l64-64L342.63 192l-64 64z" fill="currentColor"></path></svg>
|
|
||||||
</div>
|
|
||||||
<div style="color: #0051B1;font-size: 12px">洛阳百姓问政</div>
|
|
||||||
<div style="color: #0051B1;font-size: 12px">公众号</div>
|
|
||||||
<div>
|
|
||||||
<img src="@/assets/img/qrcode1.png" style="width: 100px;height: 100px;margin-top: 10px">
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
|
import Header from "@/components/Head.vue";
|
||||||
|
import Footer from "@/components/Footer.vue";
|
||||||
import {PaginationProps,useMessage } from 'naive-ui'
|
import {PaginationProps,useMessage } from 'naive-ui'
|
||||||
import {getPolitics,getNewsbx,getNewsbxList} from "@/api/index";
|
import {getPolitics,getNewsbx,getNewsbxList} from "@/api/index";
|
||||||
import {ref, reactive, onMounted} from 'vue'
|
import {ref, reactive, onMounted} from 'vue'
|
||||||
@ -328,4 +313,7 @@ const PaginationThemeOverrides: PaginationThemeOverrides = {
|
|||||||
text-overflow: ellipsis;
|
text-overflow: ellipsis;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
}
|
}
|
||||||
|
.news_title:hover{
|
||||||
|
color: #0051B1;
|
||||||
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|||||||
125
src/view/login/login.vue
Normal file
125
src/view/login/login.vue
Normal file
@ -0,0 +1,125 @@
|
|||||||
|
<template>
|
||||||
|
<div class="login_bg">
|
||||||
|
<div @click="tn('/')" style="cursor: pointer;color: #FFFFFF;font-size: 70px;text-align: center;padding-top: 40px">洛阳百姓问政</div>
|
||||||
|
<div style="position:absolute;width: 100%;top: 35%">
|
||||||
|
<n-flex justify="center" :size="[40,0]" align="center">
|
||||||
|
<div style="color: #FFFFFF;font-size: 42px;">点击{{type=='0'?'登录':'注册'}}，洛阳百姓问政</div>
|
||||||
|
<div style="width: 450px;">
|
||||||
|
<n-input v-model:value="mobile" :theme-overrides="inputThemeOverrides" size="large" placeholder="请输入手机号" style="border-bottom: 1px solid #D8D8D8">
|
||||||
|
<template #prefix>
|
||||||
|
<img src="@/assets/img/user.png" style="width: 20px;height: 20px">
|
||||||
|
</template>
|
||||||
|
</n-input>
|
||||||
|
<n-input-group style="margin-top: 30px">
|
||||||
|
<n-input v-model:value="code" :theme-overrides="inputThemeOverrides" size="large" placeholder="请输入验证码" style="border-bottom: 1px solid #D8D8D8">
|
||||||
|
<template #prefix>
|
||||||
|
<img src="@/assets/img/pwd.png" style="width: 20px;height: 20px">
|
||||||
|
</template>
|
||||||
|
</n-input>
|
||||||
|
<n-button @click="getMsg" type="primary" ghost style="height: 41px">
|
||||||
|
{{ codeTips }}
|
||||||
|
</n-button>
|
||||||
|
</n-input-group>
|
||||||
|
<div @click="submitDoLogin" style="margin-top: 30px;cursor: pointer;background-color: #0051B1;width: 100%;height: 50px;line-height: 50px;color:#FFFFFF;text-align: center;">
|
||||||
|
登录
|
||||||
|
</div>
|
||||||
|
<div @click="changeType()" style="cursor: pointer;text-align: right;color: #A8A8A8;margin-top: 20px">
|
||||||
|
用户{{type=='0'?'注册':'登录'}}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</n-flex>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
<script setup lang="ts">
|
||||||
|
import {getLoginPhoneCode,userPhoneLogin} from "@/api/index";
|
||||||
|
import {InputProps, useMessage} from 'naive-ui'
|
||||||
|
import {ref} from "vue";
|
||||||
|
import {useRouter} from "vue-router";
|
||||||
|
const router = useRouter()
|
||||||
|
type InputThemeOverrides = NonNullable<InputProps['themeOverrides']>
|
||||||
|
const inputThemeOverrides: InputThemeOverrides = {
|
||||||
|
border: '0px',
|
||||||
|
borderRadius:'0px',
|
||||||
|
borderHover:'0px',
|
||||||
|
borderFocus:'0px'
|
||||||
|
}
|
||||||
|
const message = useMessage()
|
||||||
|
//0 登录 1 注册
|
||||||
|
const type=ref(0);
|
||||||
|
//验证码倒计时
|
||||||
|
const codeTips=ref('获取验证码');
|
||||||
|
// 验证码是否发送
|
||||||
|
const canGetCode=ref(false);
|
||||||
|
let countDown=60;
|
||||||
|
const mobile=ref();
|
||||||
|
const code=ref();
|
||||||
|
const changeType = () => {
|
||||||
|
type.value=type.value==0?1:0;
|
||||||
|
}
|
||||||
|
const submitDoLogin = () => {
|
||||||
|
userPhoneLogin({'mobile':mobile.value,'captcha':code.value}).then(res => {
|
||||||
|
if(res.code==200){
|
||||||
|
message.success(res.msg);
|
||||||
|
sessionStorage.setItem('user', JSON.stringify(res.data.userinfo));
|
||||||
|
router.push('/');
|
||||||
|
}else{
|
||||||
|
message.error(res.msg)
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
const getMsg = () => {
|
||||||
|
console.log(mobile.value);
|
||||||
|
if (mobile.value.length != 11) {
|
||||||
|
message.error( '手机号输入错误！')
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
if (!canGetCode.value) {
|
||||||
|
//发送验证码
|
||||||
|
getPhoneCode();
|
||||||
|
} else {
|
||||||
|
message.error( '请在' + codeTips.value + '秒后重试')
|
||||||
|
}
|
||||||
|
}
|
||||||
|
const getPhoneCode = () => {
|
||||||
|
canGetCode.value = true;
|
||||||
|
countDown = 60; // 重置倒计时秒数
|
||||||
|
codeTips.value = countDown + '秒后重试';
|
||||||
|
|
||||||
|
const timer = setInterval(() => {
|
||||||
|
countDown--;
|
||||||
|
if (countDown <= 0) {
|
||||||
|
clearInterval(timer);
|
||||||
|
canGetCode.value = false;
|
||||||
|
codeTips.value = '获取验证码';
|
||||||
|
} else {
|
||||||
|
codeTips.value = countDown + '秒后重试';
|
||||||
|
}
|
||||||
|
}, 1000);
|
||||||
|
// 发送验证码的逻辑\
|
||||||
|
getPhoneMsg();
|
||||||
|
}
|
||||||
|
const getPhoneMsg = () => {
|
||||||
|
getLoginPhoneCode({'mobile':mobile.value,'event':'mobilelogin'}).then(res => {
|
||||||
|
console.log(res);
|
||||||
|
if(res.code!=200){
|
||||||
|
message.error(res.msg)
|
||||||
|
}else{
|
||||||
|
message.success(res.msg)
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
const tn = (url) => {
|
||||||
|
router.push(url)
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
.login_bg{
|
||||||
|
width: 100%;
|
||||||
|
height: 100vh;
|
||||||
|
background:url("@/assets/img/login.png");
|
||||||
|
background-size: 100% 100%;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
76
src/view/user/user.vue
Normal file
76
src/view/user/user.vue
Normal file
@ -0,0 +1,76 @@
|
|||||||
|
<template>
|
||||||
|
<Header/>
|
||||||
|
<div style="padding: 15px 9rem;background-color: #F5F5F5;overflow: hidden">
|
||||||
|
<n-grid :cols="24" :x-gap="20" item-responsive>
|
||||||
|
<n-gi span="5">
|
||||||
|
<div
|
||||||
|
style="height: 570px;padding-bottom: 30px;background-color: #FFFFFF;box-shadow: 0px 2px 4px 0px rgba(0,0,0,0.1);overflow: hidden;text-align: center">
|
||||||
|
<div style="padding:30px 30px 15px 30px;">
|
||||||
|
<img :src="userInfo.avatar" style="width: 70px;height: 70px;border-radius: 50%">
|
||||||
|
<div>
|
||||||
|
<span style="font-size: 26px">{{ userInfo.mobile }}</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div style="background-color: #E5E5E5;height: 1px;margin: 20px 0px"></div>
|
||||||
|
<n-space vertical :size="[0,25]">
|
||||||
|
<div class="left_text left_text_init">我的问政</div>
|
||||||
|
<div class="left_text">我的收藏</div>
|
||||||
|
<div class="left_text">我的评论</div>
|
||||||
|
<div class="left_text">历史足迹</div>
|
||||||
|
<div class="left_text">用户协议</div>
|
||||||
|
<div class="left_text">隐私政策</div>
|
||||||
|
<div class="left_text">关于我们</div>
|
||||||
|
</n-space>
|
||||||
|
</div>
|
||||||
|
</n-gi>
|
||||||
|
<n-gi span="19">
|
||||||
|
<div style="height: 100%;background-color: #FFFFFF;box-shadow: 0px 2px 4px 0px rgba(0,0,0,0.1);">
|
||||||
|
<div style="padding: 20px;position: relative">
|
||||||
|
<div class="right_title">我的问政</div>
|
||||||
|
<div style="position: absolute;text-align: center;width: 100%;top: 275px">
|
||||||
|
<div style="display: flex;justify-content: center;align-items: center;color: #666666">
|
||||||
|
<div style="width: 50px;height: 1px;background: #666666;"></div>
|
||||||
|
<div style="margin: 0px 15px">没有更多了</div>
|
||||||
|
<div style="width: 50px;height: 1px;background: #666666;"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</n-gi>
|
||||||
|
</n-grid>
|
||||||
|
</div>
|
||||||
|
<Footer/>
|
||||||
|
</template>
|
||||||
|
<script setup lang="ts">
|
||||||
|
import Header from "@/components/Head.vue";
|
||||||
|
import Footer from "@/components/Footer.vue";
|
||||||
|
import {onMounted, ref} from "vue";
|
||||||
|
|
||||||
|
const userInfo = ref();
|
||||||
|
onMounted(() => {
|
||||||
|
var item = sessionStorage.getItem('user');
|
||||||
|
var jsonArray = JSON.parse(item);
|
||||||
|
const hiddenPhoneNumber = jsonArray.mobile.substring(0, 3) + "****" + jsonArray.mobile.substring(7);
|
||||||
|
jsonArray.mobile = hiddenPhoneNumber;
|
||||||
|
userInfo.value = jsonArray;
|
||||||
|
})
|
||||||
|
</script>
|
||||||
|
<style scoped>
|
||||||
|
.right_title {
|
||||||
|
font-size: 20px;
|
||||||
|
font-weight: 400;
|
||||||
|
color: #000000;
|
||||||
|
letter-spacing: 4px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.left_text {
|
||||||
|
cursor: pointer;
|
||||||
|
font-size: 18px;
|
||||||
|
color: #000000;
|
||||||
|
letter-spacing: 3px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.left_text_init {
|
||||||
|
color: #0051B1;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
Loading…
x
Reference in New Issue
Block a user