elink-star
/
epmet-work-h5
12
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

找到了自定义样式不生效的问题,列表实现,列表样式调整

lisu
mk 1 year ago
parent
a03ff8c7d1
commit
2a5181f49b
7 changed files with 138 additions and 140 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 5
      babel.config.js
  2. 4
      src/api/index.js
  3. 21
      src/api/service.js
  4. 22
      src/assets/css/common.less
  5. 4
      src/assets/css/vant-theme.less
  6. 143
      src/views/assistance/card.vue
  7. 77
      src/views/assistance/index.vue

5
babel.config.js
View File

@ -1,4 +1,5 @@
// 获取 VUE_APP_ENV 非 NODE_ENV，测试环境依然 console // 获取 VUE_APP_ENV 非 NODE_ENV，测试环境依然 console
const IS_PROD = ['production', 'prod'].includes(process.env.VUE_APP_ENV) const IS_PROD = ['production', 'prod'].includes(process.env.VUE_APP_ENV)
const plugins = [ const plugins = [
[ [
@ -6,7 +7,7 @@ const plugins = [
{ {
libraryName: 'vant', libraryName: 'vant',
libraryDirectory: 'es', libraryDirectory: 'es',
style: true style: name => `${name}/style/less`
}, },
'vant' 'vant'
] ]
@ -17,6 +18,6 @@ if (IS_PROD) {
} }
module.exports = { module.exports = {
presets: [['@vue/cli-plugin-babel/preset', {useBuiltIns: 'usage', corejs: 3}]], presets: [['@vue/cli-plugin-babel/preset', { useBuiltIns: 'usage', corejs: 3 }]],
plugins plugins
} }

4
src/api/index.js
View File

@ -2,7 +2,9 @@ const api = {
Login: '/auth/login/govH5/loginByPassword', Login: '/auth/login/govH5/loginByPassword',
UserInfo: '/epmetuser/customerstaff/govH5/detail', UserInfo: '/epmetuser/customerstaff/govH5/detail',
Customerlist: '/epmetuser/customerstaff/customerlist', Customerlist: '/epmetuser/customerstaff/customerlist',
ServiceList: '/governance/service/rcvAndProcess/waitingRcvServiceList' ServiceListRcv: '/governance/service/rcvAndProcess/waitingRcvServiceList',
ServiceListProcess: '/governance/service/rcvAndProcess/waitingProcessServiceList',
ServiceListCompleted: '/governance/service/rcvAndProcess/completedServiceList'
} }
export default api export default api

21
src/api/service.js
View File

@ -1,10 +1,25 @@
import api from './index' import api from './index'
import request from '@/utils/request' import request from '@/utils/request'
//获取列表
export function getServiceList(params) { export function getServiceListRcv(params) {
return request({ return request({
url: api.ServiceList, url: api.ServiceListRcv,
method: 'get', method: 'get',
params params
}) })
} }
export function getServiceListProcess(params) {
return request({
url: api.ServiceListProcess,
method: 'get',
params
})
}
export function getServiceListCompleted(params) {
return request({
url: api.ServiceListCompleted,
method: 'get',
params
})
}

22
src/assets/css/common.less
View File

@ -26,6 +26,7 @@
background-color: #fff; background-color: #fff;
border-radius: 2px; border-radius: 2px;
box-shadow: 0 1px 3px rgba(0,0,0,.3); box-shadow: 0 1px 3px rgba(0,0,0,.3);
padding: 15px;
box-sizing: border-box; box-sizing: border-box;
width: auto; width: auto;
} }
@ -57,23 +58,30 @@
justify-content: flex-end; justify-content: flex-end;
} }
} }
.m-top12{ .m{
margin-top: 12px; &-left12{
&-left{
margin-left: 12px; margin-left: 12px;
} }
&-right{ &-left18{
margin-left: 18px;
}
&-right12{
margin-right: 12px; margin-right: 12px;
} }
} &-right7{
.m-top5{ margin-right: 7px;
}
&-top12{
margin-top: 12px;
}
&-top5{
margin-top: 5px; margin-top: 5px;
}
&-bottom{ &-bottom{
margin-bottom: 5px; margin-bottom: 5px;
} }
} }
.font-size13{ .font-size13{
font-size: 13px; font-size: 13px;
} }

4
src/assets/css/vant-theme.less
View File

@ -91,7 +91,7 @@
@button-mini-height: 22px; @button-mini-height: 22px;
@button-mini-min-width: 50px; @button-mini-min-width: 50px;
@button-mini-font-size: @font-size-xs; @button-mini-font-size: @font-size-xs;
@button-small-height: 30px; @button-small-height: 28px;
@button-small-font-size: @font-size-sm; @button-small-font-size: @font-size-sm;
@button-small-min-width: 60px; @button-small-min-width: 60px;
@button-normal-font-size: @font-size-md; @button-normal-font-size: @font-size-md;
@ -536,7 +536,7 @@
@tab-font-size: @font-size-md; @tab-font-size: @font-size-md;
// Tabs // Tabs
@tabs-default-color: @red; @tabs-default-color: @blue;
@tabs-line-height: 44px; @tabs-line-height: 44px;
@tabs-card-height: 30px; @tabs-card-height: 30px;
@tabs-nav-background-color: @white; @tabs-nav-background-color: @white;

143
src/views/assistance/card.vue
View File

@ -1,123 +1,32 @@
<template> <template>
<div class=''> <div class=''>
<div class="card rounded-corner"> <div class="card rounded-corner m-top12" v-for="(item, index) in tableData">
<div class="m-top12 flex"> <div class="flex">
<van-tag type="primary" class="m-top12 m-top12-left">个性服务</van-tag> <van-tag type="primary">个性服务</van-tag>
<van-tag type="warning" class="m-top12 m-top12-left">共性需求</van-tag> <van-tag type="warning">共性需求</van-tag>
<div class="m-top12 m-top12-left opacity5 font-size13"> <div class=" opacity5 m-left12 font-size13">
公益事业类-社区困难群体生活帮扶 {{ item.categoryName }}
</div> </div>
</div> </div>
<div class="m-top5 m-top12-left"> <div class="m-top5 flex flex-center">
<img src="@/assets/images/icon/address.png" class="small_img"> <img src="@/assets/images/icon/address.png" class="small_img m-right7">
张玉宝 13636520003<br> {{ item.serviceTargetName }} {{ item.serviceTargetMobile }}<br>
<div style="margin-left: 21px;" class="opacity5 font-size13 m-top5">重庆南路15号1号楼1单元101
</div> </div>
<div class="opacity5 font-size13 m-top5" style="margin-left: 29px;">{{ item.serviceTargetAddresses }}
</div> </div>
<div class="m-top5 m-top12-left"> <div class="m-top5 flex flex-center">
<img src="@/assets/images/icon/time.png" class="small_img"> <img src="@/assets/images/icon/time.png" class="small_img m-right7">
2024-05-0215:00 {{ item.serviceTimeStart }}
</div> </div>
<div class="m-top5 m-top12-left"> <div class="m-top5 ">
<div class="flex flex-center3"> <div class="flex flex-center3">
<img src="@/assets/images/icon/content.png" style="vertical-align: top;" class="small_img"> <img src="@/assets/images/icon/content.png" style="vertical-align: top;" class="small_img m-right7">
<div>社区86岁独居老人，上下楼不方便，需要上门进行送餐服务。</div> <div>{{ item.summary }}</div>
</div> </div>
</div> </div>
<hr class="m-top12-left m-top12-right opacity5"> <hr class=" m-top12-right opacity5">
<div class="flex flex-fend m-top12-right"> <div class="flex flex-fend m-top12-right">
<van-button size="small" type="info" class="rounded-corner m-top5-bottom" <van-button size="small" type="info" class="rounded-corner m-top5-bottom">接单</van-button>
style="width: 60px;">接单</van-button>
</div>
</div>
<div class="card rounded-corner">
<div class="m-top12 flex">
<van-tag type="primary" class="m-top12 m-top12-left">个性服务</van-tag>
<van-tag type="warning" class="m-top12 m-top12-left">共性需求</van-tag>
<div class="m-top12 m-top12-left opacity5 font-size13">
公益事业类-社区困难群体生活帮扶
</div>
</div>
<div class="m-top5 m-top12-left">
<img src="@/assets/images/icon/address.png" class="small_img">
张玉宝 13636520003<br>
<div style="margin-left: 21px;" class="opacity5 font-size13 m-top5">重庆南路15号1号楼1单元101
</div>
</div>
<div class="m-top5 m-top12-left">
<img src="@/assets/images/icon/time.png" class="small_img">
2024-05-0215:00
</div>
<div class="m-top5 m-top12-left">
<div class="flex flex-center3">
<img src="@/assets/images/icon/content.png" style="vertical-align: top;" class="small_img">
<div>社区86岁独居老人，上下楼不方便，需要上门进行送餐服务。</div>
</div>
</div>
<hr class="m-top12-left m-top12-right opacity5">
<div class="flex flex-fend m-top12-right">
<van-button size="small" type="info" class="rounded-corner m-top5-bottom"
style="width: 60px;">接单</van-button>
</div>
</div>
<div class="card rounded-corner">
<div class="m-top12 flex">
<van-tag type="primary" class="m-top12 m-top12-left">个性服务</van-tag>
<van-tag type="warning" class="m-top12 m-top12-left">共性需求</van-tag>
<div class="m-top12 m-top12-left opacity5 font-size13">
公益事业类-社区困难群体生活帮扶
</div>
</div>
<div class="m-top5 m-top12-left">
<img src="@/assets/images/icon/address.png" class="small_img">
张玉宝 13636520003<br>
<div style="margin-left: 21px;" class="opacity5 font-size13 m-top5">重庆南路15号1号楼1单元101
</div>
</div>
<div class="m-top5 m-top12-left">
<img src="@/assets/images/icon/time.png" class="small_img">
2024-05-0215:00
</div>
<div class="m-top5 m-top12-left">
<div class="flex flex-center3">
<img src="@/assets/images/icon/content.png" style="vertical-align: top;" class="small_img">
<div>社区86岁独居老人，上下楼不方便，需要上门进行送餐服务。</div>
</div>
</div>
<hr class="m-top12-left m-top12-right opacity5">
<div class="flex flex-fend m-top12-right">
<van-button size="small" type="info" class="rounded-corner m-top5-bottom"
style="width: 60px;">接单</van-button>
</div>
</div>
<div class="card rounded-corner">
<div class="m-top12 flex">
<van-tag type="primary" class="m-top12 m-top12-left">个性服务</van-tag>
<van-tag type="warning" class="m-top12 m-top12-left">共性需求</van-tag>
<div class="m-top12 m-top12-left opacity5 font-size13">
公益事业类-社区困难群体生活帮扶
</div>
</div>
<div class="m-top5 m-top12-left">
<img src="@/assets/images/icon/address.png" class="small_img">
张玉宝 13636520003<br>
<div style="margin-left: 21px;" class="opacity5 font-size13 m-top5">重庆南路15号1号楼1单元101
</div>
</div>
<div class="m-top5 m-top12-left">
<img src="@/assets/images/icon/time.png" class="small_img">
2024-05-0215:00
</div>
<div class="m-top5 m-top12-left">
<div class="flex flex-center3">
<img src="@/assets/images/icon/content.png" style="vertical-align: top;" class="small_img">
<div>社区86岁独居老人，上下楼不方便，需要上门进行送餐服务。</div>
</div>
</div>
<hr class="m-top12-left m-top12-right opacity5">
<div class="flex flex-fend m-top12-right">
<van-button size="small" type="info" class="rounded-corner m-top5-bottom"
style="width: 60px;">接单</van-button>
</div> </div>
</div> </div>
</div> </div>
@ -126,7 +35,14 @@
<script> <script>
export default { export default {
data() { data() {
return {}; return {
};
},
props: {
tableData: {
type: Array,
default: () => []
}
}, },
created() { }, created() { },
methods: {}, methods: {},
@ -136,4 +52,9 @@ export default {
} }
</script> </script>
<style lang='less'></style> <style lang='less'>
/deep/ .van-tabs__content{
padding: 0 10px;
box-sizing: border-box;
}
</style>

77
src/views/assistance/index.vue
View File

@ -1,11 +1,13 @@
<template> <template>
<div class='pages' ref="scroll"> <div class='pages' ref="scroll">
<div class="scroll-box" ref="scroll-content"> <div class="scroll-box" ref="scroll-content">
<van-tabs :active="active" sticky> <van-tabs :active="active" sticky @change="hadelChangeTab">
<van-tab title="待接单"> <van-tab title="待接单">
<card></card> <card :tableData="list"></card>
</van-tab>
<van-tab title="待处理">
<card :tableData="list"></card>
</van-tab> </van-tab>
<van-tab title="待处理">内容 2</van-tab>
<van-tab title="已完成">内容 3</van-tab> <van-tab title="已完成">内容 3</van-tab>
</van-tabs> </van-tabs>
</div> </div>
@ -14,7 +16,7 @@
<script> <script>
import card from './card.vue' import card from './card.vue'
import throttle from 'lodash/debounce' import throttle from 'lodash/debounce'
import { getServiceList } from '@/api/service' import { getServiceListRcv, getServiceListProcess , getServiceListCompleted} from '@/api/service'
export default { export default {
data() { data() {
return { return {
@ -24,11 +26,12 @@ export default {
pageNo: 1, pageNo: 1,
pageSize: 10, pageSize: 10,
list: [], list: [],
total:0 total: 0,
requestFlag:false
}; };
}, },
created() { created() {
this.getTableList() this.getServiceListRcv()
}, },
mounted() { mounted() {
this.clientHeight = document.documentElement.clientHeight; //可视高度 this.clientHeight = document.documentElement.clientHeight; //可视高度
@ -37,30 +40,78 @@ export default {
this.scroll = this.$refs.scroll; this.scroll = this.$refs.scroll;
this.scroll.addEventListener('scroll', this.bottomScroll); //监听底部加载 this.scroll.addEventListener('scroll', this.bottomScroll); //监听底部加载
}) })
}, },
methods: { methods: {
hadelChangeTab(e){
this.list = [];
this.pageNo = 1;
this.active = e
this.getTableData('tab')
},
//滚动加载 //滚动加载
bottomScroll: throttle(function () { bottomScroll: throttle(function () {
let scrollTop = this.scroll.scrollTop; //滚动条距离顶部的高度 let scrollTop = this.scroll.scrollTop; //滚动条距离顶部的高度
let scrollHeight = this.scroll.scrollHeight; //滚动条的高度 let scrollHeight = this.scroll.scrollHeight; //滚动条的高度
let clientHeight = this.scroll.clientHeight; //可视区域的高度 let clientHeight = this.scroll.clientHeight; //可视区域的高度
if (scrollTop + clientHeight >= scrollHeight) { if (scrollTop + clientHeight >= scrollHeight) {
console.log('到底了');
this.pageNo++; this.pageNo++;
this.getTableList(); this.getTableData()
} }
}, 500), }, 500),
getTableList(){
getServiceList({ getTableData(tab){
if ((this.active === 0 && this.requestFlag) || (tab && this.active === 0)) {
this.getServiceListRcv();
} else if ((this.active === 1 && this.requestFlag) || (tab && this.active === 1)) {
this.getServiceListProcess();
}else if((this.active === 2 && this.requestFlag ) || (tab && this.active === 2)){
this.getServiceListCompleted()
}
if(!this.requestFlag){
this.$toast({
message: '没有更多数据了',
duration: 1000
})
}
},
//获取待接单
getServiceListRcv() {
getServiceListRcv({
pageNo: this.pageNo, pageNo: this.pageNo,
pageSize: this.pageSize pageSize: this.pageSize
}).then(res => { }).then(res => {
console.log(res); console.log(res);
this.total = res.total; this.total = res.total;
this.list = this.list.concat(...this.list,...res.list); // this.requestFlag = res.list.length === this.pageSize;
}).catch(err=>{ this.list = res.data.list;
console.log(this.list,'see');
}).catch(err => {
})
},
// 获取待处理
getServiceListProcess() {
getServiceListProcess({
pageNo: this.pageNo,
pageSize: this.pageSize
}).then(res => {
this.total = res.total;
// this.requestFlag = res.length === this.pageSize;
this.list = res.data.list;
}).catch(err => {
})
},
// 获取已完成
getServiceListCompleted(){
getServiceListCompleted({
pageNo: this.pageNo,
pageSize: this.pageSize
}).then(res => {
this.total = res.total;
this.requestFlag = res.length === this.pageSize;
this.list = this.list.concat(...this.list, ...res.list);
}).catch(err => {
}) })
} }
}, },

Write Preview
Loading…
Cancel
Save