WLT-Security-Review
/
safe-check-mobile
4
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat(pageIndex): 添加检查记录页面并优化底部菜单栏

Browse Source 
- 在 checkHsitory 页面中添加安全检查和安全复查的标签页- 优化 menusBar 组件,增加中间加号按钮
-调整 checkHsitory 页面的样式,包括搜索框和筛选按钮
- 更新底部菜单栏的样式,使其更加美观
master
Tuzki 3 months ago
parent f4118908a7
commit 326b7e773d
2 changed files with 175 additions and 122 deletions
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Show Stats Download Patch File Download Diff File
  1. 43
      components/menusBar/menusBar.vue
  2. 254
      pageIndex/checkHsitory/checkHsitory.vue

43
components/menusBar/menusBar.vue
Unescape View File

@ -1,19 +1,19 @@
<template>
<view class="menus-box">
<view class="menus-item" :class="{ 'active': activeNum == 1 }" @click="toHome">
<image :src="activeNum == 1 ? '/static/images/tabbar/home-active@2x.png' : '/static/images/tabbar/home@2x.png'"
mode=""></image>
<text>首页</text>
</view>
<view class="menus-item">
</view>
<view class="menus-item" :class="{ 'active': activeNum == 2 }" @click="toMy">
<image :src="activeNum == 2 ? '/static/images/tabbar/me-active@2x.png' : '/static/images/tabbar/me@2x.png'"
mode=""></image>
<text>我的</text>
</view>
<view class="menus-box">
<view class="menus-item" :class="{ 'active': activeNum == 1 }" @click="toHome">
<image :src="activeNum == 1 ? '/static/images/tabbar/home-active@2x.png' : '/static/images/tabbar/home@2x.png'"
mode=""></image>
<text>首页</text>
</view>
<view class="menus-item center-item">
+
</view>
<view class="menus-item" :class="{ 'active': activeNum == 2 }" @click="toMy">
<image :src="activeNum == 2 ? '/static/images/tabbar/me-active@2x.png' : '/static/images/tabbar/me@2x.png'"
mode=""></image>
<text>我的</text>
</view>
</view>
</template>
<script>
/**
@ -90,5 +90,20 @@ export default {
}
}
}
.center-item {
width: 112rpx;
height: 112rpx;
background: #3E73F5;
box-shadow: 0rpx 8rpx 16rpx 0rpx rgba(62, 115, 245, 0.5);
border-radius: 50%;
position: relative;
top: -40rpx;
font-size: 80rpx;
color: #fff;
display: flex;
align-items: center;
justify-content: end;
}
}
</style>

254
pageIndex/checkHsitory/checkHsitory.vue
Unescape View File

@ -1,79 +1,83 @@
<template>
<view class="custom-content">
<view class="custom-content">
<z-paging ref="paging" v-model="dataList" @query="queryList">
<!-- 需要固定在顶部不滚动的view放在slot="top"的view中，如果需要跟着滚动，则不要设置slot="top" -->
<!-- 注意！此处的z-tabs为独立的组件，可替换为第三方的tabs，若需要使用z-tabs，请在插件市场搜索z-tabs并引入，否则会报插件找不到的错误 -->
<template #top>
<uni-nav-bar left-icon="left" @clickLeft="back" :fixed="true" :border="false"
background-color="transparent" status-bar title="法律法规" />
<view class="search-box">
<uni-easyinput :inputBorder="false" :styles="inputStyles" class="search-input" prefixIcon="search"
v-model="value" placeholder="请输入搜索内容" @iconClick="iconClick">
</uni-easyinput>
<view class="search-btn-box">
<view class="shaixuan-icon">
<image src="/static/images/common/shaixuan@2x.png" />
</view>
<text>筛选</text>
<z-paging ref="paging" v-model="dataList" @query="queryList">
<!-- 需要固定在顶部不滚动的view放在slot="top"的view中，如果需要跟着滚动，则不要设置slot="top" -->
<!-- 注意！此处的z-tabs为独立的组件，可替换为第三方的tabs，若需要使用z-tabs，请在插件市场搜索z-tabs并引入，否则会报插件找不到的错误 -->
<template #top>
<uni-nav-bar left-icon="left" @clickLeft="back" :fixed="true" :border="false" background-color="transparent"
status-bar title="检查记录" />
<view class="search-box">
<uni-easyinput :inputBorder="false" :styles="inputStyles" class="search-input" prefixIcon="search"
v-model="value" placeholder="请输入搜索内容" @iconClick="iconClick">
</uni-easyinput>
<view class="search-btn-box">
<view class="shaixuan-icon">
<image src="/static/images/common/shaixuan@2x.png" />
</view>
<text>筛选</text>
</view>
</template>
</view>
<view class="tags-box">
<view class="tags-item" :class="{ 'active': choseindex == 0 }"> 安全检查 </view>
<view class="tags-item" :class="{ 'active': choseindex == 1 }"> 安全复查 </view>
</view>
</template>
<!-- 自定义下拉刷新view(如果use-custom-refresher为true且不设置下面的slot="refresher"，此时不用获取refresherStatus，会自动使用z-paging自带的下拉刷新view) -->
<!-- 自定义下拉刷新view(如果use-custom-refresher为true且不设置下面的slot="refresher"，此时不用获取refresherStatus，会自动使用z-paging自带的下拉刷新view) -->
<!-- 注意注意注意！！字节跳动小程序中自定义下拉刷新不支持slot-scope，将导致custom-refresher无法显示 -->
<!-- 如果是字节跳动小程序，请参照sticky-demo.vue中的写法，此处使用slot-scope是为了减少data中无关变量声明，降低依赖 -->
<template #refresher="{ refresherStatus }">
<!-- 此处的custom-refresh为demo中自定义的组件，非z-paging的内置组件，请在实际项目中自行创建。这里插入什么view，下拉刷新就显示什么view -->
<custom-refresher :status="refresherStatus" />
</template>
<!-- 自定义没有更多数据view -->
<template #loadingMoreNoMore>
<!-- 此处的custom-nomore为demo中自定义的组件，非z-paging的内置组件，请在实际项目中自行创建。这里插入什么view，没有更多数据就显示什么view -->
<custom-nomore></custom-nomore>
</template>
<!-- 注意注意注意！！字节跳动小程序中自定义下拉刷新不支持slot-scope，将导致custom-refresher无法显示 -->
<!-- 如果是字节跳动小程序，请参照sticky-demo.vue中的写法，此处使用slot-scope是为了减少data中无关变量声明，降低依赖 -->
<template #refresher="{ refresherStatus }">
<!-- 此处的custom-refresh为demo中自定义的组件，非z-paging的内置组件，请在实际项目中自行创建。这里插入什么view，下拉刷新就显示什么view -->
<custom-refresher :status="refresherStatus" />
</template>
<!-- 自定义没有更多数据view -->
<template #loadingMoreNoMore>
<!-- 此处的custom-nomore为demo中自定义的组件，非z-paging的内置组件，请在实际项目中自行创建。这里插入什么view，没有更多数据就显示什么view -->
<custom-nomore></custom-nomore>
</template>
<!-- 如果希望其他view跟着页面滚动，可以放在z-paging标签内 -->
<view class="list-item" v-for="(item, index) in dataList" :key="index">
<view class="list-item-header">
<view class="list-item-header-title">
<text>
{{ item.title }}
</text>
<text class="sign-box" :class="{ 'is-sign': item.isSign == 1 }">
{{ item.isSign == 1 ? '已签字' : '未签字' }}
</text>
</view>
<view class="list-item-header-index">#{{ index + 1 }}</view>
<!-- 如果希望其他view跟着页面滚动，可以放在z-paging标签内 -->
<view class="list-item" v-for="(item, index) in dataList" :key="index">
<view class="list-item-header">
<view class="list-item-header-title">
<text>
{{ item.title }}
</text>
<text class="sign-box" :class="{ 'is-sign': item.isSign == 1 }">
{{ item.isSign == 1 ? '已签字' : '未签字' }}
</text>
</view>
<view class="list-item-body">
<view class="list-item-body-desc">
<text class="list-item-body-desc-label">企业名称</text>
<text class="list-item-body-desc-value">{{ item.comName }}</text>
</view>
<view class="list-item-body-desc">
<text class="list-item-body-desc-label">检查日期</text>
<text class="list-item-body-desc-value">{{ parseTime(item.createTime) }}</text>
</view>
<view class="list-item-body-desc">
<text class="list-item-body-desc-label">检查人</text>
<text class="list-item-body-desc-value">{{ item.checkPerson }}</text>
</view>
<view class="list-item-body-desc">
<text class="list-item-body-desc-label">来源</text>
<text class="list-item-body-desc-value">{{ item.source }}</text>
</view>
<view class="list-item-header-index">#{{ index + 1 }}</view>
</view>
<view class="list-item-body">
<view class="list-item-body-desc">
<text class="list-item-body-desc-label">企业名称</text>
<text class="list-item-body-desc-value">{{ item.comName }}</text>
</view>
<view class="list-item-feet border-top">
<view class="list-btn">修改</view>
<view class="list-btn">复制报告链接</view>
<view class="list-btn" @click="signIng(item)">签字</view>
<view class="list-btn">查看详情</view>
<view class="list-item-body-desc">
<text class="list-item-body-desc-label">检查日期</text>
<text class="list-item-body-desc-value">{{ parseTime(item.createTime) }}</text>
</view>
<view class="list-item-body-desc">
<text class="list-item-body-desc-label">检查人</text>
<text class="list-item-body-desc-value">{{ item.checkPerson }}</text>
</view>
<view class="list-item-body-desc">
<text class="list-item-body-desc-label">来源</text>
<text class="list-item-body-desc-value">{{ item.source }}</text>
</view>
</view>
</z-paging>
<!-- <view class="top-fixed" :style="{ top: autoTop }">
<view class="list-item-feet border-top">
<view class="list-btn">修改</view>
<view class="list-btn">复制报告链接</view>
<view class="list-btn" @click="signIng(item)">签字</view>
<view class="list-btn">查看详情</view>
</view>
</view>
</z-paging>
<!-- <view class="top-fixed" :style="{ top: autoTop }">
<view class="search-box">
<uni-easyinput prefixIcon="search" v-model="value" placeholder="请输入搜索内容" @iconClick="iconClick">
</uni-easyinput>
@ -86,55 +90,55 @@
</view>
</view>
<view class=""></view> -->
<uni-popup ref="selectPopup">
<view class="popup-content">
<view class="popup-header">
请选择签名方式
</view>
<view class="popup-body">
<view class="sign-item" @click="open">
<view class="sign-item-icon">
<image src="/static/images/common/pam@2x.png">
</image>
</view>
<text>检查人与企业签字</text>
<uni-popup ref="selectPopup">
<view class="popup-content">
<view class="popup-header">
请选择签名方式
</view>
<view class="popup-body">
<view class="sign-item" @click="open">
<view class="sign-item-icon">
<image src="/static/images/common/pam@2x.png">
</image>
</view>
<view class="sign-item">
<view class="sign-item-icon">
<image src="/static/images/common/m@2x.png">
</image>
<text>检查人与企业签字</text>
</view>
<view class="sign-item">
<view class="sign-item-icon">
<image src="/static/images/common/m@2x.png">
</image>
</view>
<text>检查人签字</text>
</view>
<view class="sign-item">
<view class="sign-item-icon">
<image src="/static/images/common/p@2x.png">
</image>
</view>
<text>企业签字</text>
<text>检查人签字</text>
</view>
<view class="sign-item">
<view class="sign-item-icon">
<image src="/static/images/common/p@2x.png">
</image>
</view>
<text>企业签字</text>
</view>
</view>
</uni-popup>
<uni-popup ref="popup" type="bottom">
<view class="sign-popup">
</view>
</uni-popup>
<uni-popup ref="popup" type="bottom">
<view class="sign-popup">
<!-- 签字板 -->
<view class="sign-box">
<sp-sign-board v-if="showSign" ref="signBoardRef" sid="sign-board-popup" :showMark="false"
bgColor="#f8f8f8" :horizontal="true" popup-mode :needBack="false"></sp-sign-board>
</view>
<!-- 自定义控制栏 -->
<view class="sign-control">
<button class="sign-btn" size="mini" type="default" @click="close">关闭</button>
<button class="sign-btn reset" size="mini" @click="reset">重置</button>
<button class="sign-btn confirm" size="mini" @click="confirm">确认</button>
</view>
<!-- 签字板 -->
<view class="sign-box">
<sp-sign-board v-if="showSign" ref="signBoardRef" sid="sign-board-popup" :showMark="false"
bgColor="#f8f8f8" :horizontal="true" popup-mode :needBack="false"></sp-sign-board>
</view>
<!-- 自定义控制栏 -->
<view class="sign-control">
<button class="sign-btn" size="mini" type="default" @click="close">关闭</button>
<button class="sign-btn reset" size="mini" @click="reset">重置</button>
<button class="sign-btn confirm" size="mini" @click="confirm">确认</button>
</view>
</uni-popup>
</view>
</view>
</uni-popup>
</view>
</template>
<script>
import CustomNomore from '@/components/custom-nomore/custom-nomore'
@ -154,7 +158,8 @@ export default {
},
showSign: false, // 是否显示签字板 仅微信小程序需要该配置
signBase64: '',
signTempimg: ''
signTempimg: '',
choseindex: 0,
}
},
computed: {
@ -232,12 +237,45 @@ export default {
}
}
</script>
<style lang="scss" scoped>
<style lang="scss">
.uni-easyinput,
.uni-easyinput__content {
border-radius: 20rpx;
}
.tags-box {
display: flex;
align-items: center;
width: 100%;
justify-content: space-around;
height: 100rpx;
.tags-item {
font-family: Alibaba PuHuiTi;
font-weight: 400;
font-size: 30rpx;
color: #666666;
position: relative;
&.active {
color: #1B1B1B;
}
&.active::after {
content: '';
width: 100%;
width: 72rpx;
height: 5rpx;
background: linear-gradient(90deg, #00DAEF 0%, #3E73F5 100%);
border-radius: 3rpx;
position: absolute;
bottom: -10rpx;
left: 50%;
transform: translateX(-50%);
}
}
}
.popup-content {
width: 93vw;
margin: 0 auto;

Write Preview
Loading…
Cancel
Save