155 lines
3.0 KiB
Vue
155 lines
3.0 KiB
Vue
<template>
|
||
<Container backBtn logoutBtn @handleBack="backPrev">
|
||
<template #main>
|
||
<view class="page-wrap">
|
||
<view class="content-card">
|
||
<!-- 标题+右上角按钮 -->
|
||
<view class="top-row">
|
||
<view class="title">{{ info.title }}</view>
|
||
<view class="btn-take" @click="goScanCard">立即取号</view>
|
||
</view>
|
||
<!-- 部门信息 -->
|
||
<view class="dept-text">部门：{{ info.dept }}</view>
|
||
<!-- 办事详情正文 -->
|
||
<view class="desc-text">{{ info.content }}</view>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
</Container>
|
||
</template>
|
||
|
||
<script>
|
||
import Container from '@/components/container/container.vue'
|
||
import { getItemDetail, takeNumber } from '@/api/ticket.js'
|
||
|
||
export default {
|
||
components: {
|
||
Container
|
||
},
|
||
data() {
|
||
return {
|
||
itemId: '',
|
||
info: {
|
||
title: '',
|
||
dept: '',
|
||
content: ''
|
||
}
|
||
}
|
||
},
|
||
computed: {
|
||
idcard() {
|
||
return uni.getStorageSync('idcard') || ''
|
||
}
|
||
},
|
||
onLoad(options) {
|
||
this.itemId = options.id || ''
|
||
if (this.itemId) {
|
||
this.fetchDetail(this.itemId)
|
||
}
|
||
},
|
||
methods: {
|
||
// 返回上一页
|
||
backPrev() {
|
||
uni.navigateBack()
|
||
},
|
||
|
||
// 查询事项详情
|
||
async fetchDetail(id) {
|
||
try {
|
||
const res = await getItemDetail({ id })
|
||
if (res.success && res.data) {
|
||
const d = res.data
|
||
this.info.title = d.itemName || ''
|
||
this.info.dept = d.deptName || ''
|
||
this.info.content = d.guideContent || ''
|
||
}
|
||
} catch (e) {
|
||
console.error('获取事项详情失败', e)
|
||
}
|
||
},
|
||
|
||
// 立即取号
|
||
async goScanCard() {
|
||
if (!this.idcard) {
|
||
uni.showToast({
|
||
title: '请先刷身份证',
|
||
icon: 'none'
|
||
})
|
||
return
|
||
}
|
||
try {
|
||
const res = await takeNumber({
|
||
applicantIdCard: this.idcard,
|
||
itemId: this.itemId
|
||
})
|
||
if (res.success) {
|
||
uni.showToast({
|
||
title: '取号成功',
|
||
icon: 'none'
|
||
})
|
||
}
|
||
} catch (e) {
|
||
console.error('取号失败', e)
|
||
}
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style scoped>
|
||
.page-wrap {
|
||
width: 100%;
|
||
height: 100%;
|
||
padding: 15vh 5vw 10vh;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
box-sizing: border-box;
|
||
}
|
||
|
||
.content-card {
|
||
width: 100%;
|
||
height: 100%;
|
||
background: #fff;
|
||
border-radius: 5vh;
|
||
padding: 3vh 5vw;
|
||
display: flex;
|
||
flex-direction: column;
|
||
overflow-y: auto;
|
||
}
|
||
|
||
.top-row {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: flex-start;
|
||
margin-bottom: 1vh;
|
||
}
|
||
|
||
.title {
|
||
font-size: 2vw;
|
||
font-weight: bold;
|
||
color: rgba(51, 51, 51, 1);
|
||
width: 75%;
|
||
}
|
||
|
||
.btn-take {
|
||
background-color: #367bfa;
|
||
color: #fff;
|
||
font-size: 2vw;
|
||
padding: 1.5vh 4vw;
|
||
border-radius: 999px;
|
||
}
|
||
|
||
.dept-text {
|
||
font-size: 2vw;
|
||
color: rgba(51, 51, 51, 1);
|
||
margin-bottom: 3vh;
|
||
}
|
||
|
||
.desc-text {
|
||
font-size: 2vw;
|
||
color: rgba(51, 51, 51, 1);
|
||
line-height: 1.8;
|
||
}
|
||
</style>
|