kubbo/dvcp_v2_wechat_app
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

积分申报

Browse Source
This commit is contained in:
liuye
2022-06-20 17:10:00 +08:00
parent 0ff81339d7
commit 607496f22e
4 changed files with 561 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

108
src/project/sanjianxi/AppApplyPoint/AppApplyPoint.vue Normal file
View File

@@ -0,0 +1,108 @@
<template>
<div class="wrapper">
<div class="fixed">
<p><span>积分申请：</span>通过民主程序，将基层治理和服务各项事务转化为数量化指标，对个人日常行为进行评价。申请积分需管理员审核通过后系统自动发放积分。</p>
</div>
<div class="list">
<div class="item">
<div class="left">
<h2>积分申报</h2>
<p>08-31 13:45</p>
</div>
<div class="right">
<h2 class="color-E6736E">＋20<u-icon name="arrow-right" color="#ddd" size="24" style="margin-left: 4px" ></u-icon></h2>
</div>
</div>
</div>
</div>
</template>
<script>
import {mapState} from 'vuex';
export default {
name: "AppApplyPoint",
appName: "党员积分申报",
computed: {
...mapState(['user']),
},
data() {
return {
};
},
onLoad() {
},
methods: {
}
};
</script>
<style lang="scss" scope>
@import "~dvcp-wui/common";
.fixed{
position: fixed;
top: 0;
left: 0;
background-color: #FCEFEE;
width: 100%;
height: 172px;
padding: 32px;
box-sizing: border-box;
p{
font-size: 26px;
font-family: PingFangSC-Medium, PingFang SC;
font-weight: 500;
color: #E76056;
line-height: 36px;
span{
font-weight: 600;
}
}
}
.list{
padding-top: 172px;
.item{
padding: 32px;
border-bottom: 1px solid #ddd;
display: flex;
justify-content: space-between;
background-color: #fff;
h2{
font-size: 32px;
font-family: PingFangSC-Medium, PingFang SC;
font-weight: 500;
color: #333;
line-height: 44px;
margin-bottom: 8px;
}
p{
font-size: 26px;
font-family: PingFangSC-Regular, PingFang SC;
color: #999;
line-height: 36px;
overflow:hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
.left{
width: calc(100% - 480px);
}
.right{
width: 480px;
text-align: right;
h2{
font-family: PingFangSC-Semibold, PingFang SC;
font-weight: 600;
}
}
.color-E6736E{
color: #E6736E;
}
.color-F0A046{
color: #F0A046;
}
}
}
</style>

123
src/project/sanjianxi/AppApplyPoint/add.vue Normal file
View File

@@ -0,0 +1,123 @@
<template>
<div class="wrapper">
<div class="bg-fff mar-b24">
<div class="select">
<div class="label">
<span class="tips">*</span>积分类型
</div>
<div class="value">请选择<u-icon name="arrow-right" color="#ddd" size="24" style="margin-left: 4px" ></u-icon></div>
</div>
<div class="text-area">
<div class="title"><span class="tips">*</span>申请描述</div>
<u-input v-model="value" type="textarea" :height="200" placeholder="请输入描述信息" placeholder-style="font-size:20px;color:#999;"/>
</div>
</div>
<div class="upload">
<div class="bg-fff" style="padding-bottom:24px;">
<div class="title"><span class="tips"></span>图片上传<span class="mini-text">(最多9张)</span></div>
<AiUploader v-model="fileList" multiple placeholder="上传图片" :limit="9"></AiUploader>
</div>
</div>
<div class="footer">
<div class="btn">提交</div>
</div>
</div>
</template>
<script>
import {mapState} from 'vuex';
export default {
name: "add",
appName: "积分申请",
computed: {
...mapState(['user']),
},
data() {
return {
value: '',
fileList: []
};
},
onLoad() {
},
methods: {
}
};
</script>
<style lang="scss" scope>
@import "~dvcp-wui/common";
.bg-fff{
padding-left: 32px;
background-color: #fff;
.select{
display: flex;
justify-content: space-between;
padding: 40px 32px 40px 0;
box-sizing: border-box;
border-bottom: 1px solid #ddd;
.label{
font-size: 34px;
font-family: PingFangSC-Medium, PingFang SC;
font-weight: 500;
color: #666;
line-height: 48px;
}
.value{
font-size: 34px;
font-family: PingFangSC-Regular, PingFang SC;
line-height: 48px;
}
}
.title{
padding: 32px 0;
font-size: 34px;
font-family: PingFangSC-Medium, PingFang SC;
font-weight: 500;
color: #666;
line-height: 48px;
.mini-text{
font-size: 28px;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #999;
line-height: 40px;
}
}
.tips{
display: inline-block;
width: 16px;
font-size: 34px;
font-family: PingFangSC-Medium, PingFang SC;
font-weight: 500;
color: #F46!important;
margin-right: 8px;
}
}
.footer{
position: fixed;
bottom: 0;
left: 0;
width: 100%;
padding: 16px 32px;
.btn{
width: 686px;
height: 88px;
line-height: 88px;
text-align: center;
background: #E76056;
border-radius: 16px;
font-size: 34px;
font-family: PingFangSC-Medium, PingFang SC;
font-weight: 500;
color: #FFF;
}
}
.upload{
padding-bottom: 150px;
}
.mar-b24{
margin-bottom: 24px;
}
</style>

144
src/project/sanjianxi/AppApplyPoint/detail.vue Normal file
View File

@@ -0,0 +1,144 @@
<template>
<div class="wrapper">
<div class="bg-ff">
<p class="title">填报信息</p>
<div class="info">
<div class="label">申请人</div>
<div class="value">陶白白</div>
</div>
<div class="info">
<div class="label">申请时间</div>
<div class="value">2021-12-06 13:23</div>
</div>
<div class="info">
<div class="label">积分类型</div>
<div class="value">陶白白</div>
</div>
<div class="info">
<div class="label">申请描述</div>
<div class="value">2022.1.1上午11:00搭乘D5478次动车；座位号E56</div>
</div>
<div class="info border-none">
<div class="label">图片资料</div>
</div>
<div class="img-list">
<img src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.jj20.com%2Fup%2Fallimg%2F4k%2Fs%2F02%2F2109242306111155-0-lp.jpg&refer=http%3A%2F%2Fimg.jj20.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1658307867&t=bdf3d5fa8f718c772521f9ba71ba062b" alt="">
<img src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.jj20.com%2Fup%2Fallimg%2F4k%2Fs%2F02%2F2109242306111155-0-lp.jpg&refer=http%3A%2F%2Fimg.jj20.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1658307867&t=bdf3d5fa8f718c772521f9ba71ba062b" alt="">
<img src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.jj20.com%2Fup%2Fallimg%2F4k%2Fs%2F02%2F2109242306111155-0-lp.jpg&refer=http%3A%2F%2Fimg.jj20.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1658307867&t=bdf3d5fa8f718c772521f9ba71ba062b" alt="">
<img src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.jj20.com%2Fup%2Fallimg%2F4k%2Fs%2F02%2F2109242306111155-0-lp.jpg&refer=http%3A%2F%2Fimg.jj20.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1658307867&t=bdf3d5fa8f718c772521f9ba71ba062b" alt="">
<img src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.jj20.com%2Fup%2Fallimg%2F4k%2Fs%2F02%2F2109242306111155-0-lp.jpg&refer=http%3A%2F%2Fimg.jj20.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1658307867&t=bdf3d5fa8f718c772521f9ba71ba062b" alt="">
</div>
</div>
<div class="bg-ff">
<p class="title">审核详情</p>
<div class="info">
<div class="label">审核结果</div>
<div class="value status0">通过</div>
</div>
<div class="info">
<div class="label">加分项</div>
<div class="value">街道荣誉</div>
</div>
<div class="info">
<div class="label">积分调整</div>
<div class="value">+10分</div>
</div>
<div class="info">
<div class="label">驳回理由</div>
<div class="value">2022.1.1上午11:00搭乘D5478次动车；座位号E56</div>
</div>
<div class="info">
<div class="label">审核人</div>
<div class="value">张三</div>
</div>
<div class="info">
<div class="label">审核时间</div>
<div class="value">2021-12-06 13:23</div>
</div>
</div>
</div>
</template>
<script>
import {mapState} from 'vuex';
export default {
name: "detail",
appName: "积分审核详情",
computed: {
...mapState(['user']),
},
data() {
return {
};
},
onLoad() {
},
methods: {
preview(index) {
// this.$previewImage(this.detail.files, index, "url");
},
}
};
</script>
<style lang="scss" scope>
@import "~dvcp-wui/common";
.bg-ff{
background-color: #fff;
padding-left: 32px;
margin-bottom: 24px;
.title{
font-size: 38px;
font-family: PingFangSC-Semibold, PingFang SC;
font-weight: 600;
color: #333;
line-height: 52px;
padding: 32px 0;
}
.info{
width: 100%;
display: flex;
padding: 34px 32px 34px 0;
box-sizing: border-box;
justify-content: space-between;
border-bottom: 1px solid #ddd;
font-size: 32px;
font-family: PingFangSC-Regular, PingFang SC;
line-height: 44px;
.label{
width: calc(100% - 480px);
color: #999;
}
.value{
width: 480px;
color: #333;
text-align: right;
word-break: break-all;
}
.status0{
color: #FF883C;
}
.status1{
color: #42D784;
}
.status2{
color: #f46;
}
}
.border-none{
border-bottom: 0px;
}
.img-list{
padding-bottom: 44px;
img{
width: 226px;
height: 226px;
margin: 0 4px 4px 0;
}
}
}
</style>

186
src/project/sanjianxi/AppApplyPoint/list.vue Normal file
View File

@@ -0,0 +1,186 @@
<template>
<div class="wrapper">
<div class="fixed">
<div class="tab-list">
<div class="tab-item" v-for="(item, index) in tabList" :key="index" @click="tabClick(index)" :style="tabIndex == index ? 'color:#fff;' : ''">{{ item }}
<span class="active-line" v-if="tabIndex == index"></span>
</div>
</div>
<div class="select-content">
<div class="select">全部类型<u-icon name="arrow-down" color="#333" size="24" style="margin-left: 4px" ></u-icon></div>
<div class="search">
<u-search placeholder="请输入党组织" v-model="name" :show-action="false" @change="getList"></u-search>
</div>
</div>
</div>
<div class="list">
<div class="item">
<div class="top">
<p class="title">本人与2021年11月12日，在紫荆医院接种第三针新冠疫苗。本人与2021年11月12日，在紫荆医院接种第三针新21年11月12日，在紫荆医院接种第三针新</p>
<div class="flex">
<div>新冠疫苗接种</div>
<p>2021-12-06 13:23</p>
</div>
</div>
<div class="bottom status0">
<span></span>审核通过+10分
</div>
</div>
</div>
</div>
</template>
<script>
import {mapState} from 'vuex';
export default {
name: "list",
appName: "积分申请",
computed: {
...mapState(['user']),
},
data() {
return {
tabList: ['全部', '待审核', '已审核'],
tabIndex: 0,
name: ''
};
},
onLoad() {
},
methods: {
tabClick(index) {
this.tabIndex = index
// if (!this.tabIndex) {
// this.status = ''
// } else {
// this.status = this.tabIndex - 1
// }
// this.getList()
}
}
};
</script>
<style lang="scss" scope>
@import "~dvcp-wui/common";
.fixed{
position: fixed;
top: 0;
left: 0;
width: 100%;
.tab-list{
width: 100%;
background-color: #E76056;
.tab-item{
padding: 36px 16px;
display: inline-block;
font-size: 40px;
font-family: PingFangSC-Medium, PingFang SC;
font-weight: 500;
color: #F8D7D4;
line-height: 56px;
position: relative;
.active-line{
position: absolute;
bottom: 16px;
left: 50%;
margin-left: -24px;
width: 48px;
height: 6px;
background: #fff;
border-radius: 4px;
}
}
}
.select-content{
display: flex;
padding: 48px 32px 32px;
.select{
width: calc(100% - 460px);
font-size: 38px;
font-family: PingFangSC-Semibold, PingFang SC;
font-weight: 600;
color: #333;
line-height: 52px;
}
.search{
width: 460px;
}
}
}
.list{
padding-top: 268px;
margin: 0 32px;
.item{
width: 100%;
background: #fff;
border-radius: 16px;
box-shadow: 0 0 8px 0 rgba(0, 0, 0, 0.02);
margin-bottom: 24px;
.top{
padding: 32px;
.title{
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 3; // 控制多行的行数
-webkit-box-orient: vertical;
font-size: 36px;
font-family: PingFangSC-Medium, PingFang SC;
font-weight: 500;
color: #333;
line-height: 50px;
margin-bottom: 24px;
}
.flex{
display: flex;
justify-content: space-between;
font-size: 28px;
font-family: PingFangSC-Regular, PingFang SC;
color: #999;
line-height: 40px;
div{
background: #EEE;
border-radius: 24px;
padding: 4px 16px;
font-size: 28px;
color: #999;
}
}
}
.bottom{
border-top: 1px solid #ddd;
padding: 32px;
font-size: 28px;
font-family: PingFangSC-Regular, PingFang SC;
line-height: 40px;
span{
display: inline-block;
margin-right: 8px;
width: 8px;
height: 8px;
border-radius: 50%;
vertical-align: middle;
}
}
.status0{
color: #FF883C;
span{
background: #FF883C;
}
}
.status1{
color: #42D784;
span{
background: #42D784;
}
}
.status2{
color: #f46;
span{
background: #f46;
}
}
}
}
</style>