Przeglądaj źródła

移动端接口对接登录页面切图

wulanhaote
庞东旭 3 lat temu
rodzic
commit
1f84081fac
10 zmienionych plików z 511 dodań i 121 usunięć
  1. +1
    -1
      build/webpack.base.conf.js
  2. +26
    -0
      src/api/lawEnforcement/index.js
  3. BIN
      src/assets/fonts/zqkhyt.TTF
  4. +1
    -0
      src/permission.js
  5. +9
    -0
      src/router/index.js
  6. +19
    -28
      src/views/lawEnforcement/index.vue
  7. +361
    -0
      src/views/lawEnforcement/login.vue
  8. +19
    -45
      src/views/lawEnforcement/workDynamics/workDetail.vue
  9. +75
    -47
      src/views/lawEnforcement/workDynamics/workList.vue
  10. BIN
      static/images/lawEnforcement/login_logo.png

+ 1
- 1
build/webpack.base.conf.js Wyświetl plik

@@ -62,7 +62,7 @@ module.exports = {
loaders: ["style", "css", "sass"]
},
{
test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
test: /\.(woff2?|eot|ttf|otf|TTF)(\?.*)?$/,
loader: 'url-loader',
options: {
limit: 10000,


+ 26
- 0
src/api/lawEnforcement/index.js Wyświetl plik

@@ -42,3 +42,29 @@ export function productList(query) {
params: query
})
}

//查询新闻管理列表分页
export function newsList(query) {
return request({
url: '/enforce/website/newsList',
method: 'get',
params: query
})
}

//查询新闻详情
export function newsDetail(id) {
return request({
url: '/enforce/website/news/'+id,
method: 'get'
})
}

//查询方案公开固定条数
export function schemeList(query) {
return request({
url: '/enforce/website/scheme/list',
method: 'get',
params: query
})
}

BIN
src/assets/fonts/zqkhyt.TTF Wyświetl plik


+ 1
- 0
src/permission.js Wyświetl plik

@@ -55,6 +55,7 @@ const whiteList = [
'/lawEnforcement/work',
'/lawEnforcement/workDetail',
'/lawEnforcement/caseDetail',
'/lawEnforcement/login',
]

router.beforeEach((to, from, next) => {


+ 9
- 0
src/router/index.js Wyświetl plik

@@ -1608,6 +1608,15 @@ export const constantRoutes = [
},
component: (resolve) => require(['@/views/lawEnforcement/case/caseDetail'], resolve)
},
{
path: '/lawEnforcement/login',
name: 'login',
meta: {
title: '登录',
hidden: true,
},
component: (resolve) => require(['@/views/lawEnforcement/login'], resolve)
},
];




+ 19
- 28
src/views/lawEnforcement/index.vue Wyświetl plik

@@ -7,41 +7,30 @@
</template>
</van-nav-bar>

<van-swipe class="my-swipe" :autoplay="3000" height="128" indicator-color="white">
<van-swipe-item v-for="(item , index) in workImgList" :key="index">
<van-image :src="item.img" height="128" />
<p class="bannerTit">{{item.title}}</p>
</van-swipe-item>
</van-swipe>

<van-tabs type="card" animated>
<van-tab title="工作动态">
<van-swipe class="my-swipe" :autoplay="3000" height="128" indicator-color="white">
<van-swipe-item v-for="(item , index) in workImgList" :key="index">
<van-image :src="item.img" height="128" />
<p class="bannerTit">{{item.title}}</p>
</van-swipe-item>
</van-swipe>
<van-cell-group>
<van-cell v-for="(item , index) in workList" :key="index" :title="item.title" :value="item.newsTime" />
<van-cell title="查看更多>" style="text-align: center" to="/lawEnforcement/work" />
<van-cell v-for="(item , index) in workList" :key="index" :title="item.title" :value="item.newsTime" :to="{name:'workDetail',query:{id:item.id}}" />
<van-cell title="查看更多>" style="text-align: center" :to="{name:'work',query:{type:'work'}}" />
</van-cell-group>
</van-tab>
<van-tab title="通知公告">
<van-swipe class="my-swipe" :autoplay="3000" height="128" indicator-color="white">
<van-swipe-item v-for="(item , index) in noticeImgList" :key="index">
<van-image :src="item.img" height="128" />
<p class="bannerTit">{{item.title}}</p>
</van-swipe-item>
</van-swipe>
<van-cell-group>
<van-cell v-for="(item , index) in noticeList" :key="index" :title="item.title" :value="item.newsTime" />
<van-cell title="查看更多>" style="text-align: center" />
<van-cell v-for="(item , index) in noticeList" :key="index" :title="item.title" :value="item.newsTime" :to="{name:'workDetail',query:{id:item.id}}" />
<van-cell title="查看更多>" style="text-align: center" :to="{name:'work',query:{type:'notice'}}" />
</van-cell-group>
</van-tab>
<van-tab title="执法依据">
<van-swipe class="my-swipe" :autoplay="3000" height="128" indicator-color="white">
<van-swipe-item v-for="(item , index) in enforcementImgList" :key="index">
<van-image :src="item.img" height="128" />
<p class="bannerTit">{{item.title}}</p>
</van-swipe-item>
</van-swipe>
<van-cell-group>
<van-cell v-for="(item , index) in enforcementList" :key="index" :title="item.title" :value="item.newsTime" />
<van-cell title="查看更多>" style="text-align: center" />
<van-cell v-for="(item , index) in enforcementList" :key="index" :title="item.title" :value="item.newsTime" :to="{name:'workDetail',query:{id:item.id}}" />
<van-cell title="查看更多>" style="text-align: center" :to="{name:'work',query:{type:'enforcement'}}" />
</van-cell-group>
</van-tab>
</van-tabs>
@@ -77,7 +66,7 @@
</van-cell-group>

<van-cell-group class="listBox">
<van-cell value="全部" is-link>
<van-cell value="全部" is-link :to="{name:'work',query:{type:'scheme'}}">
<template #title>
<van-icon name="../../../static/images/lawEnforcement/icon/icon_zf.png" size="20"></van-icon>
<span class="custom-title">执法方案<i class="bgBlue"></i></span>
@@ -158,10 +147,10 @@ export default {
var imgStrs = response.data[i].content.match(/<img.*?>/g);
var title = response.data[i].title;
var id = response.data[i].id;
console.log(imgStrs[0])
if (imgStrs != null && imgStrs != '') {
this.workImgList.push({img:imgStrs[0].substr(10,imgStrs[0].length-12),title:title,id:id})
this.workImgList.push({img:imgStrs[0].trim().substr(10,(imgStrs[0].trim().length-12)).replace(/amp;/g,''),title:title,id:id})
}
console.log(this.workImgList)
}
});
news('001',deptId,3).then(response => {
@@ -326,7 +315,6 @@ export default {
}
/deep/ .van-tab__pane{
background: #FFF;
border-radius: 8Px;
overflow: hidden;
}
/deep/ .van-tabs__nav--card{
@@ -352,6 +340,9 @@ export default {
}
.my-swipe {
border-radius: 8Px;
width: 96%;
margin: 0 auto;
margin-top: 10Px;
}
.my-swipe .van-swipe-item .van-image{
width: 100%;


+ 361
- 0
src/views/lawEnforcement/login.vue Wyświetl plik

@@ -0,0 +1,361 @@
<template>
<div class="app-container">
<div class="title">
<img style="display: inline-block;margin-right: 10px;" src="../../../static/images/lawEnforcement/login_logo.png" alt="">
<p>农业综合执法公众平台</p>
</div>
<van-form style="width: 88%;margin: 0 auto;margin-top: 50px;" v-if="!showMessage">
<van-field
v-model="formData.username"
placeholder="请输入手机号/账号"
:rules="[{ required: true, message:'' }]"
/>
<van-field
v-model="formData.password"
type="password"
style="margin: 20px 0"
placeholder="请输入密码"
:rules="[{ required: true, message:'' }]"
/>
<van-field
v-model="formData.code"
center
clearable
placeholder="图形验证码"
>
<template #button>
<img style="width: 100px;display: block;" :src="codeUrl" @click="getCode" />
</template>
</van-field>

<van-checkbox style="margin-top:20px;margin-left:20px;" v-model="formData.rememberMe" shape="square">{{showMessage ? "记住手机号" : "记住密码"}}</van-checkbox>

<div style="margin: 50px 16px 16px;border-radius: 30px;overflow: hidden;">
<van-button block type="info" native-type="submit" @click="handleLogin">登录</van-button>
</div>
</van-form>
</div>
</template>
<style scoped lang="scss">
@font-face {
font-family: zqkhyt;
src: url("../../assets/fonts/zqkhyt.TTF");
}
.app-container{
background: #fff;
height: 100vh;
}
/deep/ .van-cell{
padding: 0;
.van-field__control{
border: 1px solid #F1F0F5;
padding: 0.2rem 0.5rem;
border-radius: 0.5rem;
}
&:after{
border: none;
}
}
.title{
padding-top: 20%;
width: 88%;
margin: 0 auto;
text-align: center;
p{
font-size: 1rem;
color: #1D6FE9;
font-family: zqkhyt;
margin-top: 10PX;
}
img{
width: 30%;
}
}
.van-tab--active{
font-size: .6rem;
font-weight: bold;
}
.van-tabs__line{
background:#1D6FE9;
width: 0.15rem;
height: 0.15rem;
border-radius: 0.07rem;
bottom: 0.3rem;
}
.van-tabs__nav{
padding:0
}
.van-tab{
display: inline-block;
flex: inherit;
margin-left: 30px;
line-height: .8rem;
}
.van-tab__text--ellipsis {
overflow: auto;
}
.van-password-input{
width: 50%;
margin: 0 auto;
}
[class*=van-hairline]::after{
border:none;
}
.van-password-input__security li{
margin: 0 10px;
border-bottom: 3px solid black;
}
.registerSmsBtn{
color: rgb(29, 111, 233);
font-size: 0.34rem;

}
</style>
<script>
import { getCodeImg, getSmsCode ,getRegisterSmsCode,registerCheck,registerOn} from "../../api/login";
import Cookies from "js-cookie";
import { encrypt, decrypt } from "../../utils/jsencrypt";
//引用wx sdk
import wx from "weixin-js-sdk";
export default {
name: "login",
data() {
return {
showMessage:false,
smsCodeValue:"",
showKeyboard:false,
formData: {
username: "", //账号
password: "", //密码
code: null, //图片验证码
uuid: null, //识别uuid
mobile: null, //手机号
smsCode: null, //短信验证码
memberName:null, //身份信息
idcard:null, //身份号码
rememberMe:false
},
loading: false,
codeUrl: "", //验证码
isSmsLogin: false, //是否手机验证码
computeTime: 0,
active:1
};
},
created() {
this.getCode();
this.getCookie();
this.reset();
},
methods: {
reset(){

},
showPopup(){
this.showKeyboard = !this.showKeyboard
},
showMessagePop(){
this.showMessage = !this.showMessage
},
getCode() {
getCodeImg().then((res) => {
this.formData.uuid = res.uuid;
this.codeUrl = "data:image/gif;base64," + res.img;
});
},
getCookie() {
const username = Cookies.get("username");
const password = Cookies.get("password");
const rememberMe = Cookies.get("rememberMe");
this.formData = {
username: username === undefined ? this.formData.username : username,
password:
password === undefined ? this.formData.password : decrypt(password),
rememberMe: rememberMe === undefined ? false : Boolean(rememberMe),
};
},
getSmsCode() {
if (this.formData.code == "") {
this.$dialog.alert({
message: '图片验证码不能为空',
});
return false;
}
if (!this.computeTime) {
let myreg = /^[1][3,4,5,7,8,9][0-9]{9}$/;
if (!myreg.test(this.formData.mobile)) {
this.$dialog.alert({
message: '手机号格式不正确',
});
return false;
}
/* getSmsCode(this.formData.mobile).then((res) => {
if (res.code === 200) {
this.$dialog.alert({
message: '验证码已发送',
});
this.showKeyboard = !this.showKeyboard;
this.loginForm.uuid = res.uuid;
this.computeTime = 60;
this.timer = setInterval(() => {
this.computeTime--;
if (this.computeTime <= 0) {
clearInterval(this.timer);
}
}, 1000);
}
});*/
}
},
handleLogin(values) {
if (this.isSmsLogin) {
//短信登录
let myreg = /^[1][3,4,5,7,8,9][0-9]{9}$/;
if (!myreg.test(this.formData.mobile)) {
this.$dialog.alert({
message: '手机号格式不正确',
});
return false;
} else if (this.formData.smsCode == "") {
this.$dialog.alert({
message: '短信验证码不能为空',
});
return false;
}
this.loading = true;
this.$store
.dispatch("SmsLogin", this.formData)
.then(() => {
this.$router.push({ path: "/onlineHomeIndex" }).catch(() => {});
})
.catch((error) => {
this.loading = false;
});
} else {
if (this.formData.rememberMe) {
Cookies.set("username", this.formData.username, { expires: 30 });
Cookies.set("password", encrypt(this.formData.password), { expires: 30 });
Cookies.set("rememberMe", this.formData.rememberMe, { expires: 30 });
} else {
Cookies.remove("username");
Cookies.remove("password");
Cookies.remove("rememberMe");
}
//账号密码登录
if (this.formData.username == "") {
this.$dialog.alert({
message: '账号不能为空',
});
return false;
} else if (this.formData.password == "") {
this.$dialog.alert({
message: '密码不能为空',
});
return false;
} else if (this.formData.code == "") {
this.$dialog.alert({
message: '图片验证码不能为空',
});
return false;
}
this.$store
.dispatch("Login", this.formData)
.then(() => {
this.$router.push({ path: "/onlineHome/workbench" }).catch(() => {});
})
.catch((error) => {
console.log(error)
this.loading = false;
this.getCode();
});
}
},
getRegisterSmsCode(){
if (!this.computeTime) {
let myreg = /^[1][3,4,5,7,8,9][0-9]{9}$/;
if (!myreg.test(this.formData.mobile)) {
this.$dialog.alert({
message: '手机号格式不正确',
});
return false;
}else if (this.formData.code == "") {
this.$dialog.alert({
message: '图片验证码不能为空',
});
return false;
}
if (this.active==2) {
let formObj = {
code :this.formData.code,
mobile:this.formData.mobile,
uuid:this.formData.uuid
}
getRegisterSmsCode(formObj).then((res) => {
console.log(res)
console.log(res.code == 200)
if(res.code == 200) {
this.$dialog.alert({
message: '验证码已发送',
});
this.formData.uuid = res.uuid;
this.computeTime = 60;
this.timer = setInterval(() => {
this.computeTime--;
if (this.computeTime <= 0) {
clearInterval(this.timer);
}
}, 1000);
}
}).catch((res)=>{
if(res=='Error: 验证码已失效'){
this.getCode()
}
});
}
}
},
registerSubmit(){

//注册
if (this.formData.memberName == "") {
this.$dialog.alert({
message: '姓名不能为空',
});
return false;
} else if (this.formData.idcard == "") {
this.$dialog.alert({
message: '身份证号不能为空',
});
return false;
} else if (this.formData.mobile == "") {
this.$dialog.alert({
message: '手机号码不能为空',
});
return false;
}else if (this.formData.smsCode == "") {
this.$dialog.alert({
message: '短信验证码不能为空',
});
return false;
}
//registerCheck,registerOn
console.log(this.formData)
registerCheck(this.formData).then((res)=>{
if(res.code == 200){
registerOn(this.formData).then((res)=>{
if(res.code == 200){
//
this.$dialog.alert({
message: '您的初始密码:'+res.password,
}).then(() => {
this.$router.push({ path: "/onlineHome/workbench" }).catch(() => {});
});
}
})
}
})

}
},
};
</script>

+ 19
- 45
src/views/lawEnforcement/workDynamics/workDetail.vue Wyświetl plik

@@ -8,19 +8,17 @@
@click-left="onClickLeft"
/>
<div class="listBox">
<p class="title">持续整治“庸懒散粗拖浮”等</p>
<p class="wordForm">巴彦淖尔市政委<span>2021-09-01 发布</span></p>

<p style="font-size: 14px;line-height: 25px;text-indent: 2em;">会议全面分析了“庸懒散粗拖浮”等作风问题存在的表现形式和原因,对持续推进整治“庸懒散粗浮”等作风问题进行了安排部署。</p>
<p class="title">{{detail.title}}</p>
<p class="wordForm">{{detail.createBy}}<span>{{detail.newsTime}} 发布</span></p>

<img src="../../../../static/images/lawEnforcement/banner.png" style="width: 100%;margin: 15px 0;">
<div id="content"></div>

<p style="font-size: 14px;line-height: 25px;text-indent: 2em;">会议强调,要把转变理念作为解决庸懒散粗拖浮作风问题的前提,以精益求精的态度、严谨务实的作风认真负责的责任心,促进检察办案由“办得对”向“办得好”转变。要把依法依规作为解决“庸懒散粗拖浮”等作风问题的基础,树立“制定制度重要、落实制度更重要”的观念,切实抓好各项既定规章制度的执行实。要浮”等作风问题的引领,将创新创优作为破解难题、推</p>
</div>
</div>
</template>
<script>
import { newList } from "@/api/index";
import { newsDetail } from "@/api/lawEnforcement/index";
import law from "@/components/common/law_footer";
export default {
name: "index",
@@ -43,52 +41,25 @@ export default {
//新闻集合
newList:[],
//轮播图集合
bannerList:''
bannerList:'',
detail:[]
};
},
created() {
this.goDetail();
},
methods: {
getList(){
this.loading = true;
this.queryParams.number = 2 ;
this.queryParams.pageSize = 5 ;
newList(this.queryParams).then(response => {
for (var i = 0; i < response.rows.length; i++) {
this.newList.push(response.rows[i]);
var imgStrs = response.rows[i].content.match(/<IMG src=\"([^\"]*?)\">/gi)
if (imgStrs != null && imgStrs != '') {
this.newList[i].img = imgStrs[0].substr(10,(imgStrs[0].length-12));
}
}
console.log(this.newList)
if(this.newList.length >= response.total){
this.finished = true;
return;
goDetail(){
newsDetail(this.$route.query.id).then(response => {
console.log(response)
this.detail = response.data
document.getElementById('content').innerHTML = response.data.content;
var imgs=document.getElementsByTagName('img');
console.log(imgs)
for(var i=0;i<imgs.length;i++){
imgs[i].setAttribute('width','100%');
}
this.queryParams.pageNum += 1 ;
this.loading = false;
});
},
getBanner(){
this.loading = true;
this.queryParams.number = 1 ;
this.queryParams.pageSize = 5 ;
newList(this.queryParams).then(response => {
this.bannerList = response.rows;
for (var i = 0; i < response.rows.length; i++) {
var imgStrs = response.rows[i].content.match(/<IMG src=\"([^\"]*?)\">/gi)
if (imgStrs != null && imgStrs != '') {
this.bannerList[i].img = imgStrs[0].substr(10,(imgStrs[0].length-12));
}
}
this.loading = false;
});
},
goDetail(id){
console.log(id)
window.location = 'news/newDetail?id='+id;
}
},
};
@@ -99,6 +70,9 @@ export default {
font-family: SourceHanSansCNBold;
src: url("../../../assets/fonts/SourceHanSansCN-Bold.otf");
}
.wid100{
width: 100%;
}
.app-container {
padding: 10PX ;
}


+ 75
- 47
src/views/lawEnforcement/workDynamics/workList.vue Wyświetl plik

@@ -7,33 +7,26 @@
left-arrow
@click-left="onClickLeft"
/>

<van-cell-group class="listBox">
<van-cell title="标题标题标题标题标" value="2021.11.12" to="/lawEnforcement/workDetail" />
<van-cell title="标题标题标题标题标" value="2021.11.12" />
<van-cell title="标题标题标题标题标" value="2021.11.12" />
<van-cell title="标题标题标题标题标" value="2021.11.12" />
<van-cell title="标题标题标题标题标" value="2021.11.12" />
<van-cell title="标题标题标题标题标" value="2021.11.12" />
<van-cell title="标题标题标题标题标" value="2021.11.12" />
<van-cell title="标题标题标题标题标" value="2021.11.12" />
<van-cell title="标题标题标题标题标" value="2021.11.12" />
<van-cell title="标题标题标题标题标" value="2021.11.12" />
<van-cell title="标题标题标题标题标" value="2021.11.12" />
<van-cell title="标题标题标题标题标" value="2021.11.12" />
<van-cell title="标题标题标题标题标" value="2021.11.12" />
<van-cell title="标题标题标题标题标" value="2021.11.12" />
<van-cell title="标题标题标题标题标" value="2021.11.12" />
<van-cell title="标题标题标题标题标" value="2021.11.12" />
<van-cell title="标题标题标题标题标" value="2021.11.12" />
<van-cell title="标题标题标题标题标" value="2021.11.12" />
<van-cell title="标题标题标题标题标" value="2021.11.12" />
<van-cell title="标题标题标题标题标" value="2021.11.12" />
</van-cell-group>
<van-list
v-model="loading"
:finished="finished"
finished-text="没有更多了"
@load="getList"
>
<van-cell-group class="listBox">
<van-cell
v-for="(item , index) in workList"
:key="index"
:title="pageType == 'scheme' ? item.schemeName : item.title"
:value="pageType == 'scheme' ? item.applyTime : item.newsTime"
:to="{name:'workDetail',query:{id:item.id}}"
/>
</van-cell-group>
</van-list>
</div>
</template>
<script>
import { newList } from "@/api/index";
import { getTopDeptId , newsList , schemeList } from "@/api/lawEnforcement/index";
import law from "@/components/common/law_footer";
export default {
name: "index",
@@ -48,41 +41,64 @@ export default {
finished: false,
//查询参数
queryParams: {
number: '003',
deptId: 100,
pageNum: 1,
pageSize: 5,
deptId:100,
number:2
pageSize: 20,
},
//新闻集合
newList:[],
workList:[],
//轮播图集合
bannerList:''
bannerList:'',
pageType:''
};
},
created() {

var type = this.$route.query.type ;
this.pageType = this.$route.query.type;
if (type == 'work'){
this.queryParams.number = '003'
this.getDeptId();
}
if (type == 'notice'){
this.queryParams.number = '001'
this.getDeptId();
}
if (type == 'enforcement'){
this.queryParams.number = '002'
this.getDeptId();
}
},
methods: {
getDeptId(){
getTopDeptId().then(response => {
this.queryParams.deptId = response.data ;
this.getList();
})
},
getList(){
this.loading = true;
this.queryParams.number = 2 ;
this.queryParams.pageSize = 5 ;
newList(this.queryParams).then(response => {
for (var i = 0; i < response.rows.length; i++) {
this.newList.push(response.rows[i]);
var imgStrs = response.rows[i].content.match(/<IMG src=\"([^\"]*?)\">/gi)
if (imgStrs != null && imgStrs != '') {
this.newList[i].img = imgStrs[0].substr(10,(imgStrs[0].length-12));
if(this.$route.query.type == 'scheme'){
schemeList(this.queryParams).then(response => {
this.workList = response.rows;
if(this.workList.length >= response.total){
this.finished = true;
return;
}
}
console.log(this.newList)
if(this.newList.length >= response.total){
this.finished = true;
return;
}
this.queryParams.pageNum += 1 ;
this.loading = false;
});
this.queryParams.pageNum += 1 ;
this.loading = false;
});
}else{
newsList(this.queryParams).then(response => {
this.workList = response.rows;
if(this.workList.length >= response.total){
this.finished = true;
return;
}
this.queryParams.pageNum += 1 ;
this.loading = false;
});
}
},
getBanner(){
this.loading = true;
@@ -112,6 +128,18 @@ export default {
font-family: SourceHanSansCNBold;
src: url("../../../assets/fonts/SourceHanSansCN-Bold.otf");
}
.van-cell__title{
color: #666666;
flex: 0.6;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 1;
word-break: break-all;
overflow: hidden;
}
.van-cell__value{
flex: 0.4;
}
.app-container {
padding: 10PX ;
}


BIN
static/images/lawEnforcement/login_logo.png Wyświetl plik

Przed Po
Szerokość: 157  |  Wysokość: 167  |  Rozmiar: 45 KiB

Ładowanie…
Anuluj
Zapisz