zhouyanli/property-resident-side
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

对接访客邀请接口

Browse Source
This commit is contained in:
zhouyanli
2026-05-06 17:48:39 +08:00
parent e030bb7cb9
commit 231de9cde8
13 changed files with 1028 additions and 1037 deletions
Download Patch File Download Diff File Expand all files Collapse all files

87
property-uniapp-project/pageSubPack/visitor/qrcode-page.vue
View File

@@ -1,72 +1,66 @@
<template>
<view class="qrcode-page">
<view class="qrcode-wrap">
<!-- 显示后台返回的二维码图片 -->
<view class="qrcode-box">
<!-- 调用uqrcode组件 -->
<uqrcode
:value="qrcodeValue"
:size="400"
:logo="'http://47.104.199.163:9090/images/logo.png'"
:logoSize="0.2"
canvasId="visitor-qrcode"
@success="onQrcodeSuccess"
></uqrcode>
<!-- 二维码边框装饰 -->
<image :src="qrcodeUrl" mode="widthFix" class="qrcode-img" />
<!-- 四角装饰边框保留 -->
<view class="qrcode-border border-top"></view>
<view class="qrcode-border border-right"></view>
<view class="qrcode-border border-bottom"></view>
<view class="qrcode-border border-left"></view>
</view>
<text class="qrcode-desc">桂花园（别墅）东门通行二维码</text>
<text class="qrcode-desc">{{houseName}}通行二维码</text>
<text class="qrcode-tips">分享此二维码给访客，可扫码开门，单次有效</text>
</view>
<view class="btn-wrap">
<button class="send-btn" @click="sendToFriend">发送给好友</button>
<button class="send-btn" open-type="share" :image-url="qrcodeUrl">发送给好友</button>
</view>
</view>
</template>
<script setup>
import { ref } from 'vue';
// import { navigateBack, showToast, share } from '@dcloudio/uni-app';
// 引入本地uqrcode组件
import uqrcode from '@/components/uqrcode/uqrcode.vue';
import { onLoad } from '@dcloudio/uni-app';
// 二维码内容（替换为实际的通行链接）
const qrcodeValue = ref('https://your-domain.com/visitor/123456');
// 生成的二维码临时图片地址
// 直接接收图片URL
const qrcodeUrl = ref('');
const qrcodeImage = ref('');
const houseName = ref('')
// 二维码生成成功回调
const onQrcodeSuccess = (tempFilePath) => {
qrcodeImage.value = tempFilePath;
uni.showToast({ title: '二维码生成成功', icon: 'success' });
};
onLoad((option) => {
if (option.qrcodeUrl) {
// 接收后台返回的二维码图片链接
qrcodeUrl.value = decodeURIComponent(option.qrcodeUrl);
qrcodeImage.value = qrcodeUrl.value;
houseName.value = option.villageName
console.log('最终二维码图片：', qrcodeUrl.value);
}
});
// 分享给好友
const sendToFriend = () => {
if (!qrcodeImage.value) {
uni.showToast({ title: '二维码生成中...', icon: 'none' });
return;
}
uni.share({
provider: 'weixin',
type: 0,
title: '访客通行二维码',
imageUrl: qrcodeImage.value,
success: () => uni.showToast({ title: '分享成功' }),
fail: () => uni.showToast({ title: '分享失败', icon: 'none' })
});
};
// const sendToFriend = () => {
// if (!qrcodeImage.value) {
// uni.showToast({ title: '二维码生成中...', icon: 'none' });
// return;
// }
// uni.share({
// provider: 'weixin',
// type: 0,
// title: '访客通行二维码',
// imageUrl: qrcodeImage.value,
// success: () => uni.showToast({ title: '分享成功' }),
// fail: () => uni.showToast({ title: '分享失败', icon: 'none' })
// });
// };
</script>
<style scoped>
.qrcode-page {
/* background-color: #f8f8f8; */
min-height: 100vh;
}
.qrcode-wrap {
@@ -80,7 +74,12 @@ const sendToFriend = () => {
width: 400rpx;
height: 400rpx;
}
/* 二维码边框样式 */
/* 图片铺满 */
.qrcode-img {
width: 100%;
height: 100%;
}
/* 边框装饰 */
.qrcode-border {
position: absolute;
width: 40rpx;
@@ -91,7 +90,7 @@ const sendToFriend = () => {
.border-right { top: 0; right: 0; border-left: none; border-bottom: none; }
.border-bottom { bottom: 0; right: 0; border-left: none; border-top: none; }
.border-left { bottom: 0; left: 0; border-right: none; border-top: none; }
/* 文字样式 */
.qrcode-desc {
font-size: 32rpx;
font-weight: 600;
@@ -103,9 +102,8 @@ const sendToFriend = () => {
color: #999;
margin-top: 10rpx;
}
/* 按钮样式 */
.btn-wrap {
margin: 80rpx 20rpx 20rpx;
margin: 80rpx 40rpx 20rpx;
}
.send-btn {
background-color: #007aff;
@@ -114,6 +112,5 @@ const sendToFriend = () => {
height: 88rpx;
font-size: 28rpx;
line-height: 88rpx;
}
</style>

1000
property-uniapp-project/pageSubPack/visitor/visitor-add.vue
View File

File diff suppressed because it is too large Load Diff

80
property-uniapp-project/pageSubPack/visitor/visitor-detail.vue
View File

@@ -20,8 +20,7 @@
<text class="label">联系方式：</text>
<text class="value">{{ visitorInfo.phone }}</text>
</view>
<!-- 车牌号可选显示 -->
<view class="info-item" v-if="visitorInfo.carNumber">
<view class="info-item">
<text class="label">车牌号：</text>
<text class="value">{{ visitorInfo.carNumber }}</text>
</view>
@@ -52,35 +51,68 @@
</view>
<!-- 分享二维码按钮（仅等待来访状态显示） -->
<view class="btn-wrap" v-if="visitorInfo.status === 'waiting'">
<!-- <view class="btn-wrap" v-if="visitorInfo.status === 'waiting'">
<button class="share-btn" @click="goToQrcode">分享通行二维码</button>
</view>
</view> -->
</view>
</template>
<script setup>
import { ref } from 'vue';
import {onLoad} from '@dcloudio/uni-app'
import {getVisitorDetail} from '../api/api.js'
// 访客信息（实际项目中从接口获取）
// const visitorInfo = ref({})
const visitorInfo = ref({
name: '张三',
name: '',
status: 'waiting', // waiting:等待来访，visited:已到访
address: '桂花园（别墅）2号楼2层',
phone: '13866666666',
carNumber: '京A88888', // 可传空隐藏
address: '',
phone: '',
carNumber: '',
escortNum: 0,
validTime: '2023.06.30 10:00至2023.06.30 23:00',
inviteTime: '2023年06月30日 09:35',
visitTime: '2023年06月30日 14:32' // 已到访时显示
});
validTime: '',
inviteTime: '',
visitTime: ''
})
// 把后端返回的字段映射成详情页
const mapDetail = (item) => {
const addressParts = [
item.villageName,
item.floorNo ? item.floorNo + '栋' : '',
item.unitNo ? item.unitNo + '单元' : '',
item.houseNo
].filter(Boolean)
const status = item.status === 1 || item.status === '1' ? 'visited' : 'waiting'
return {
name: item.visitorName || '',
status,
address: addressParts.join(''),
phone: item.visitorPhone || '',
carNumber: item.carNum || '',
escortNum: item.visitorNum || 0,
validTime: item.startTime && item.endTime ? `${item.startTime} 至 ${item.endTime}` : '',
inviteTime: item.createTime || '',
visitTime: item.visitTime || ''
}
}
onLoad((option) =>{
const infoStr = decodeURIComponent(JSON.stringify(option))
// console.log('infoStr',infoStr)
visitorInfo.value = infoStr.item
// 获取访客详情
const fetchVisitorDetail = async (id) => {
try {
const res = await getVisitorDetail(id)
if (res && res.data) {
visitorInfo.value = mapDetail(res.data)
}
} catch (e) {
console.error('获取访客详情失败:', e)
}
}
onLoad((option) => {
if (option && option.id) {
fetchVisitorDetail(option.id)
}
})
// 跳转到二维码页面
const goToQrcode = () => {
@@ -92,7 +124,7 @@ const goToQrcode = () => {
<style scoped>
.visitor-detail-page {
background-color: #f8f8f8;
background-color: #fff;
min-height: 100vh;
}
@@ -111,8 +143,7 @@ const goToQrcode = () => {
}
.title {
font-size: 32rpx;
font-weight: 600;
font-size: 28rpx;
}
.status {
@@ -123,7 +154,6 @@ const goToQrcode = () => {
.waiting {
color: #007aff;
background: #e8f4ff;
}
.visited {
@@ -142,20 +172,22 @@ const goToQrcode = () => {
}
.label {
color: #666;
color: #222;
width: 160rpx;
}
.value {
color: #333;
color: #222;
flex: 1;
}
.tips-text {
margin: 0 20rpx;
font-size: 24rpx;
color: #999;
color: #666;
line-height: 1.6;
text-align: center;
margin-top: 98rpx;
}
.btn-wrap {

33
property-uniapp-project/pageSubPack/visitor/visitor-list.vue
View File

@@ -55,14 +55,14 @@
</view>
<!-- 车牌号 -->
<view class="item-row" v-if="item.carNumber">
<view class="item-row">
<text class="label" :class="item.status">车牌号：</text>
<text class="value" :class="item.status">{{ item.carNumber }}</text>
</view>
<!-- 时间+查看详情 -->
<view class="item-footer">
<text class="time-text">时间：{{ item.createTime }}</text>
<text class="time-text" :class="item.status">时间：{{ item.createTime }}</text>
<view class="detail-btn" @click="viewDetail(item)">
<text>查看详情</text>
<uni-icons type="arrowright" size="14"></uni-icons>
@@ -97,17 +97,18 @@ const activeTab = ref('waiting')
// 访客列表数据
const visitorList = ref([])
// 后端数据映射到前端结构（根据实际字段名调整）
// 后端数据映射到前端
const mapData = (list) => {
if (!Array.isArray(list)) return []
return list.map(item => {
const status = item.status === 1 || item.status === '1' ? 'visited' : 'waiting'
return {
name: item.visitorName,
...item,
visitorName: item.visitorName,
status,
statusText: status === 'visited' ? '已到访' : '等待来访',
startTime: item.startTime,
endTime:item.endTime,
endTime: item.endTime,
phone: item.visitorPhone,
carNumber: item.carNum,
createTime: item.createTime || ''
@@ -121,9 +122,9 @@ const fetchVisitorList = async () => {
let params = {userId:userId}
try {
const res = await getVisitorList(params)
// visitorList.value = mapData(res.data|| [])
visitorList.value = res.data || []
visitorList.value = mapData(res.data || [])
// console.log('222222',visitorList.value)
} catch (e) {
console.error('获取访客列表失败:', e)
}
@@ -154,10 +155,8 @@ const goBack = () => {
// 查看详情
const viewDetail = (item) => {
const itemStr = encodeURIComponent(JSON.stringify(item))
console.log('eeeee',itemStr)
uni.navigateTo({
url: `/pageSubPack/visitor/visitor-detail?item=${itemStr}` // 传参到详情页
url: `/pageSubPack/visitor/visitor-detail?id=${item.id}` // 传 id 到详情页
})
}
@@ -249,7 +248,7 @@ const addInvitation = () => {
/* 列表容器 */
.list-container {
height: calc(100vh - 150px); /* 预留导航、标签、按钮高度 */
height: calc(100vh - 220px); /* 预留导航、标签、按钮高度 */
}
/* 访客列表项 */
@@ -308,7 +307,9 @@ const addInvitation = () => {
.value.visited{
color: #999;
}
.time-text.visited{
color: #999;
}
/* 列表项底部（时间+查看详情） */
.item-footer {
display: flex;
@@ -316,11 +317,11 @@ const addInvitation = () => {
align-items: center;
margin-top: 10px;
padding-top: 10px;
border-top: 1px solid #f5f5f5;
/* border-top: 1px solid #f5f5f5; */
}
.time-text {
font-size: 12px;
color: #666;
font-size: 28rpx;
/* color: #666; */
}
.detail-btn {
display: flex;