wangyifang
/
patrol-cancel-h5
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

页面

Browse Source
master
lion 2 years ago
parent 59fa7f4c49
commit e0b197b749
5 changed files with 394 additions and 119 deletions
Show Stats Download Patch File Download Diff File

34
App.vue
Unescape View File

@ -57,39 +57,7 @@
justify-content: flex-end; justify-content: flex-end;
} }
.mpopup {
margin-top: 60rpx;
min-height: 600rpx;
min-width: 540rpx;
margin-bottom: 20rpx;
}
.mpopup-title {
font-size: 32rpx;
font-family: PingFang SC;
font-weight: 400;
color: #351C1B;
line-height: 40rpx;
text-align: center;
padding: 0rpx 42rpx;
}
.u-popup__content {
background: linear-gradient(0deg, #ffffff 85%, #E4C8A2);
}
.mpopup-content {
font-size: 24rpx;
padding: 71rpx 0rpx;
padding: 0rpx 42rpx;
}
.mpopup-footer {
display: flex;
padding: 0rpx 42rpx;
}
.orderBoxInfoRowTxt { .orderBoxInfoRowTxt {
font-size: 28rpx !important; font-size: 28rpx !important;

6
pages.json
Unescape View File

@ -20,6 +20,12 @@
"style": { "style": {
"navigationBarTitleText": "访客核销" "navigationBarTitleText": "访客核销"
} }
},
{
"path": "pages/index/list",
"style": {
"navigationBarTitleText": "访客列表"
}
} }
], ],
"globalStyle": { "globalStyle": {

207
pages/index/cancel.vue
Unescape View File

@ -1,80 +1,143 @@
<template> <template>
<view class="wrap"> <view class="wrap">
<view class="cancelcode"> <view class="list">
<view>核销码：{{code}}</view> <view class='listitem'>
<u-button @click='cancelcode' type="primary" text="核销" color='deepskyblue'></u-button> <view class="code">核销码：{{code}}</view>
</view> <view>
<view class="cancelinfo"> <text>2023-05-15</text>
<view>访客信息</view> <text class="textr">待核销</text>
</view>
<view>
拜访时间：09:00
</view>
<view>
<text>拜访人：张三</text>
<text>拜访事由：开会</text>
</view>
<view>
单位信息：苏州朗业网络科技有限公司
</view>
<view>
<text>受访人：李四</text>
<text>受访科室：信息科</text>
</view>
</view>
</view>
<view class="cancelcode" @click='cancelcode'>
确认核销
</view>
<view class="logs">
<view> <view>
<view>姓名：</view> <text>日期</text>
<view>访问日期：</view> <text>内容</text>
<view>访问时段：</view>
<view>访问事由：</view>
<view>拜访单位：</view>
<view>受访人：</view>
<view>受访科室：</view>
</view> </view>
</view> <block>
</view> <view>
</template> <text>2023-05-15</text>
<text>xxx进行了邀请</text>
<script> </view>
export default {
data() {
return {
code:''
}
},
onLoad(options) {
this.code = options.code
},
methods: {
cancelcode(){
uni.showToast({
icon: "none",
title: '核销成功',
duration: 3000
})
setTimeout(function(){
uni.navigateTo({
url:'/pages/index/index'
})
},500)
</block>
</view>
}
} </view>
} </template>
</script>
<script>
<style scoped> export default {
.wrap{ data() {
padding:30rpx return {
} code: ''
}
.cancelcode{ },
/* display: flex; onLoad(options) {
justify-content: space-between; */ this.code = options.code
} },
.cancelcode view{ methods: {
margin-bottom:30rpx; cancelcode() {
font-size: 36rpx; uni.showToast({
} icon: "none",
/deep/ .cancelcode .u-button__text{ title: '核销成功',
font-size: 36rpx!important; duration: 3000
})
setTimeout(function() {
uni.navigateTo({
url: '/pages/index/index'
})
}, 500)
}
}
}
</script>
<style scoped>
.wrap {
padding: 30rpx
}
.cancelcode {
width: 300rpx;
height: 300rpx;
border-radius: 200rpx;
background-color: deepskyblue;
line-height: 300rpx;
color: #fff;
font-size: 36rpx;
box-shadow: 0 0 0px 4px lightskyblue;
margin: 50rpx auto;
text-align: center;
margin-bottom:100rpx
}
.list {
/* height:65vh; */
margin-top: 20rpx
}
.code {
border-bottom: 1px solid #ddd;
padding-bottom: 20rpx
}
.listitem {
padding: 20rpx;
background-color: #fff;
box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.5);
margin-bottom: 30rpx
}
.listitem view {
display: flex;
justify-content: space-between;
margin-bottom: 10rpx
}
.listitem view text {
width: 50%;
text-align: left;
}
.listitem view text.textr {
text-align: right;
} }
.cancelinfo{ .logs{
font-size: 36rpx; border:1px solid #ddd;
margin-top:30rpx border-bottom:none
} }
.cancelinfo view{ .logs view:first-child{
color:#ddd; background-color: lightgrey;
margin-bottom:30rpx
} }
.cancelinfo view view{ .logs view text{
color:#333 display: inline-block;
width:60%;
border-bottom:1px solid #ddd;
padding:10rpx
} }
.logs view text:first-child{
width:40%;
border-right:1px solid #ddd
}
</style> </style>

124
pages/index/index.vue
Unescape View File

@ -1,20 +1,49 @@
<template> <template>
<view class="wrap"> <view class="wrap">
<view class="scan" @click="toscan"> <u-modal :show="show" title='核销码' showCancelButton @confirm='tocancel'@cancel='closeshow'>
扫码 <view class="slot-content">
<u--input
placeholder="请输入核销码"
border="surround"
v-model="code"
></u--input>
</view>
</u-modal>
<view class="scancode">
<view class="scan" @click="toscan">
扫码核销
</view>
<view class="code" @click="show=true">
核验码核销
</view>
</view> </view>
<view class="tips">提示：扫描访客的二维码或输入核销码进行核销</view>
<view> <view>
<view>今日访客</view> <view class="listtitle">
<text>今日待核销访客</text>
<text @click='tolist'>访客列表</text>
</view>
<view class="list"> <view class="list">
<view class='listitem'> <view class='listitem'>
<text>张三</text> <view>
<text>9:00</text> <text>2023-05-15</text>
<text>未核销</text> <text class="textr">待核销</text>
</view> </view>
<view class='listitem'> <view>
<text>张三</text> 拜访时间：09:00
<text>9:00</text> </view>
<text>已核销</text> <view>
<text>拜访人：张三</text>
<text>拜访事由：开会</text>
</view>
<view>
单位信息：苏州朗业网络科技有限公司
</view>
<view>
<text>受访人：李四</text>
<text>受访科室：信息科</text>
</view>
</view> </view>
</view> </view>
</view> </view>
@ -25,6 +54,8 @@
export default { export default {
data() { data() {
return { return {
show:false,
code:''
} }
}, },
onLoad() { onLoad() {
@ -34,7 +65,31 @@
uni.navigateTo({ uni.navigateTo({
url:'/pages/index/scancode' url:'/pages/index/scancode'
}) })
},
tolist(){
uni.navigateTo({
url:'/pages/index/list'
})
},
tocancel(){
if(this.code!=''){
uni.navigateTo({
url:'/pages/index/cancel?code='+this.code
})
this.closeshow()
}else{
uni.showToast({
title:'请输入核销码',
duration:2000,
icon:'none'
})
}
},
closeshow(){
this.show = false
this.code=''
} }
} }
} }
</script> </script>
@ -45,6 +100,10 @@
min-height: 90vh; min-height: 90vh;
padding:30rpx; padding:30rpx;
} }
.scancode{
display: flex;
justify-content: space-between;
}
.scan { .scan {
width: 200rpx; width: 200rpx;
height: 200rpx; height: 200rpx;
@ -57,14 +116,51 @@
margin: 30rpx auto; margin: 30rpx auto;
text-align: center; text-align: center;
} }
.code{
width: 200rpx;
height: 200rpx;
border-radius: 200rpx;
background-color: darkgreen;
line-height: 200rpx;
color: #fff;
font-size: 36rpx;
box-shadow: 0 0 0px 4px lightgreen;
margin: 30rpx auto;
text-align: center;
}
.tips{
font-size:40rpx;
margin:30rpx 0
}
.listtitle{
font-size:40rpx;
display: flex;
justify-content: space-between;
margin-bottom:30rpx
}
.listtitle text+text{
color:deepskyblue
}
.list{ .list{
height:65vh; /* height:65vh; */
margin-top:20rpx margin-top:20rpx
} }
.listitem{ .listitem{
padding:20rpx;
background-color: #fff;
box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.5);
margin-bottom:30rpx
}
.listitem view{
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
padding:20rpx; margin-bottom:10rpx
border-bottom:1px solid #ccc }
.listitem view text{
width:50%;
text-align: left;
}
.listitem view text.textr{
text-align: right;
} }
</style> </style>

142
pages/index/list.vue
Unescape View File

@ -0,0 +1,142 @@
<template>
<view class="wrap">
<u-datetime-picker @cancel="startshow=false" @confirm='confirmStart' :show="startshow" v-model="starttime1"
mode="date"></u-datetime-picker>
<u-datetime-picker @cancel="endshow=false" @confirm='confirmEnd' :show="endshow" v-model="endtime1"
mode="date"></u-datetime-picker>
<u-picker @cancel="statusshow=false" @confirm='confirmStatus' :show="statusshow" :columns="statuscolumns"></u-picker>
<view class="select">
<u--input placeholder="开始时间" border="surround" v-model="starttime" suffixIcon="arrow-down" disabled
@click.native='startshow=true'></u--input>
<u--input placeholder="结束时间" border="surround" v-model="endtime" suffixIcon="arrow-down" disabled
@click.native='endshow=true'></u--input>
<u--input placeholder="状态" border="surround" v-model="status" suffixIcon="arrow-down" disabled
@click.native='statusshow=true'></u--input>
</view>
<view class="btn">
<u-button type="primary" text="查询"></u-button>
</view>
<view class="list">
<view class='listitem'>
<view>
<text>2023-05-15</text>
<text class="textr">待核销</text>
</view>
<view>
拜访时间：09:00
</view>
<view>
<text>拜访人：张三</text>
<text>拜访事由：开会</text>
</view>
<view>
单位信息：苏州朗业网络科技有限公司
</view>
<view>
<text>受访人：李四</text>
<text>受访科室：信息科</text>
</view>
</view>
</view>
</view>
</template>
<script>
export default {
data() {
return {
startshow: false,
endshow: false,
starttime: '',
starttime1: Number(new Date()),
endtime1: Number(new Date()),
endtime: '',
status: '',
statusshow:false,
statuscolumns:[
['待核销','已核销']
]
}
},
methods: {
confirmStart(val) {
this.starttime = this.$moment(val.value).format("YYYY-MM-DD")
this.startshow = false
},
confirmEnd(val) {
this.endtime = this.$moment(val.value).format("YYYY-MM-DD")
this.endshow = false
},
confirmStatus(val){
console.log(val)
this.status = val.value[0]
this.statusshow = false
}
}
}
</script>
<style scoped>
/* .wrap {
height: 90vh;
min-height: 90vh;
padding: 30rpx;
} */
.select {
display: flex;
justify-content: space-between;
margin: 0 -10rpx
}
/deep/ .select .u-input {
margin: 0 10rpx;
border-radius: 0;
padding: 6px 5px !important;
padding-right: 2px !important;
}
.btn {
text-align: center;
text-align: center;
display: flex;
justify-content: center;
margin-top: 20rpx
}
/deep/ .btn .u-button {
background-color: deepskyblue;
border-color: deepskyblue;
/* width:90% */
}
.list {
/* height:65vh; */
margin-top: 20rpx;
padding: 30rpx;
}
.listitem {
padding: 20rpx;
background-color: #fff;
box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.5);
margin-bottom: 30rpx
}
.listitem view {
display: flex;
justify-content: space-between;
margin-bottom: 10rpx
}
.listitem view text {
width: 50%;
text-align: left;
}
.listitem view text.textr {
text-align: right;
}
</style>
Write Preview
Loading…
Cancel
Save