wo123/baixingwenzheng-pc
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

1

Browse Source
This commit is contained in:
王创世 2024-01-31 11:50:30 +08:00
parent 28754c86d5
commit a776179199
11 changed files with 373 additions and 126 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
src/App.vue
View File

@ -1,6 +1,4 @@
<script setup lang="ts">
import Header from "@/components/Head.vue";
import Footer from "@/components/Footer.vue";
import {
NConfigProvider,
GlobalThemeOverrides
@ -23,10 +21,8 @@
<template>
<n-message-provider>
<n-config-provider :theme-overrides="themeOverrides">
<div id="app" v-wechat-title="$route.meta.title">
<Header></Header>
<div v-wechat-title="$route.meta.title">
<router-view></router-view>
<Footer></Footer>
</div>
</n-config-provider>
</n-message-provider>

12
src/api/index.js
View File

@ -19,3 +19,15 @@ export function getNewsbxList(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
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 8.6 KiB

BIN
src/assets/img/login.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.1 MiB

BIN
src/assets/img/pwd.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 605 B

BIN
src/assets/img/user.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 669 B

234
src/components/Head.vue
View File

@ -1,17 +1,20 @@
<template>
<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;">
<n-flex justify="space-between">
<div>您好，欢迎来到洛阳百姓问政！</div>
<div>
请<span style="color:#7B83FF">「登录」</span>或<span style="color:#7B83FF">「注册」</span>
</div>
</n-flex>
</div>
</div>
<div class="b1-back">
<div style="padding:0rem 0 0 9rem;font-weight: 600;">
<div>
<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;">
<n-flex justify="space-between">
<div>您好，欢迎来到洛阳百姓问政！</div>
<div v-if="userPhone==''" style="cursor: pointer" @click="tn('/login')">
请<span style="color:#7B83FF">「登录」</span>或<span style="color:#7B83FF">「注册」</span>
</div>
<div v-if="userPhone!=''" style="cursor: pointer" @click="tn('/login')">
<span @click="tn('/user');">{{userPhone}}</span><span @click="quit" style="color:#7B83FF;margin-left: 20px">退出</span>
</div>
</n-flex>
</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: 1.19rem;color: #FFFFFF;letter-spacing: 0.52rem;margin-top: -0.9rem;">
wz.lytv.com.cn
@ -21,100 +24,135 @@
<img src="/src/assets/img/logo.png" style="width: 45px">
<div style="color: #FFFFFF;font-size: 12px">洛阳广播电视台</div>
</div>
</div>
<div style="font-weight: 600;padding:9rem; 0 0 0.6">
<n-input-group>
<n-input placeholder="请输入想找的问题" style="width: 17rem;" />
<n-flex :size="[1,0]">
<div>
<n-button :round="false" :bordered="false" color="#0051B1">
搜索
</n-button>
</div>
<div>
<n-button :theme-overrides="buttonThemeOverrides" :round="false" color="#0051B1">
<img src="../assets/img/brush.png" style="width: 1.5625rem;height: 1.5625rem;">
<span style="margin-left: 0.625rem;">我要投诉</span>
</n-button>
</div>
</n-flex>
</n-input-group>
</div>
</div>
<div style="padding: 5px 0px;">
<n-flex justify="center" align="center" :size="[141,10]">
<div class="left-line"></div>
<n-button text color="#0051B1">
<template #default>
<span style="font-weight: 600;font-size: 1.25rem;">首页</span>
</template>
</n-button>
<div class="left-line"></div>
<n-button text color="#000000">
<template #default>
<span style="font-size: 1.25rem;">部门</span>
</template>
</n-button>
<div class="left-line"></div>
<n-button text color="#000000">
<template #default>
<span style="font-size: 1.25rem;">提问</span>
</template>
</n-button>
<div class="left-line"></div>
<n-button text color="#000000">
<template #default>
<span style="font-size: 1.25rem;">直播</span>
</template>
</n-button>
<div class="left-line"></div>
<n-button text color="#000000">
<template #default>
<span style="font-size: 1.25rem;">我的</span>
</template>
</n-button>
<div class="left-line"></div>
</n-flex>
</div>
<div style="width: 100%;background-color: #7261D9;height: 0.05rem;opacity: 0.35;"></div>
</div>
<div style="font-weight: 600;padding:0px 9rem;">
<n-input-group>
<n-input placeholder="请输入想找的问题" style="width: 17rem;"/>
<n-flex :size="[1,0]">
<div>
<n-button :round="false" :bordered="false" color="#0051B1">
搜索
</n-button>
</div>
<div>
<n-button :theme-overrides="buttonThemeOverrides" :round="false" color="#0051B1">
<img src="../assets/img/brush.png" style="width: 1.5625rem;height: 1.5625rem;">
<span style="margin-left: 0.625rem;">我要投诉</span>
</n-button>
</div>
</n-flex>
</n-input-group>
</div>
</div>
<div style="padding: 5px 0px;">
<n-flex justify="center" align="center" :size="[141,10]">
<div class="left-line"></div>
<n-button @click="tn('/')" text color="#0051B1">
<template #default>
<span style="font-weight: 600;font-size: 1.25rem;">首页</span>
</template>
</n-button>
<div class="left-line"></div>
<n-button text color="#000000">
<template #default>
<span style="font-size: 1.25rem;">部门</span>
</template>
</n-button>
<div class="left-line"></div>
<n-button text color="#000000">
<template #default>
<span style="font-size: 1.25rem;">提问</span>
</template>
</n-button>
<div class="left-line"></div>
<n-button text color="#000000">
<template #default>
<span style="font-size: 1.25rem;">直播</span>
</template>
</n-button>
<div class="left-line"></div>
<n-button @click="tn('/user')" text color="#000000">
<template #default>
<span style="font-size: 1.25rem;">我的</span>
</template>
</n-button>
<div class="left-line"></div>
</n-flex>
</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>
<script setup lang="ts">
import {useRouter} from "vue-router";
import {ref, reactive, onMounted} from 'vue'
import { ButtonProps } from 'naive-ui'
type ButtonThemeOverrides = NonNullable<ButtonProps['themeOverrides']>
const buttonThemeOverrides : ButtonThemeOverrides = {
borderRadius: '0px'
}
import {ButtonProps, useMessage} from 'naive-ui'
type ButtonThemeOverrides = NonNullable<ButtonProps['themeOverrides']>
const buttonThemeOverrides: ButtonThemeOverrides = {
borderRadius: '0px'
}
const message = useMessage()
const router = useRouter()
const userPhone=ref();
onMounted(() => {
window.sessionStorage.setItem('user',JSON.stringify({'name':'测试'}));
var item=window.sessionStorage.getItem('user');
console.log(item);
var item = sessionStorage.getItem('user');
const jsonArray = JSON.parse(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>
<style scoped>
.left-line {
height: 1.2rem;
background-color: #000000;
width: 0.05rem;
opacity: 0.15;
}
.left-line {
height: 1.2rem;
background-color: #000000;
width: 0.05rem;
opacity: 0.15;
}
.n-button {
border-radius: 0px;
height: 2.25rem;
}
.n-button {
border-radius: 0px;
height: 2.25rem;
}
.b1-back {
display: flex;
justify-content: space-between;
align-items: center;
align-self: center;
position: relative;
width: 100%;
height: 6.25rem;
background: url('../assets/img/b1.png') no-repeat;
}
.b1-back {
display: flex;
justify-content: space-between;
align-items: center;
align-self: center;
position: relative;
width: 100%;
height: 6.25rem;
background: url('../assets/img/b1.png') no-repeat;
}
</style>

12
src/router/routes.js
View File

@ -12,6 +12,18 @@ const router = createRouter({
title: '洛阳百姓问政-首页' //title配置
},
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")
}],
});

34
src/view/home/index.vue
View File

@ -1,4 +1,5 @@
<template>
<Header/>
<div>
<div style="padding:20px 9rem ;">
<div><img src="@/assets/img/b2.png" style="width: 100%;"/></div>
@ -143,7 +144,7 @@
</n-flex>
</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%;"/>
<div
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">
<div v-for="(item, index) in groupList" @click="openGroup(item.id)" :class="{ 'int': true, 'act': item.id == groupIndex }">{{item.name}}</div>
</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">
<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>
<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 style="color: #818794">{{item.showtime}}</div>
</n-flex>
@ -195,29 +196,13 @@
</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">
<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>
<Footer/>
</template>
<script setup lang="ts">
import Header from "@/components/Head.vue";
import Footer from "@/components/Footer.vue";
import {PaginationProps,useMessage } from 'naive-ui'
import {getPolitics,getNewsbx,getNewsbxList} from "@/api/index";
import {ref, reactive, onMounted} from 'vue'
@ -328,4 +313,7 @@ const PaginationThemeOverrides: PaginationThemeOverrides = {
text-overflow: ellipsis;
cursor: pointer;
}
.news_title:hover{
color: #0051B1;
}
</style>

125
src/view/login/login.vue Normal file
View 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
View 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>