Skip to content

G
GaoQuYingJiH5-ASD
Commit c167b82d authored by xinzhedeai's avatar xinzhedeai
Browse files
Options

add:页面

parent 8fb161c1
Expand all Hide whitespace changes
Inline Side-by-side
Showing with 1676 additions and 39 deletions
src/_check_list.html 0 → 100644
View file @ c167b82d
This diff is collapsed.
src/_codescan-canvas - 副本.html 0 → 100644
View file @ c167b82d
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>安全码查询</title>
<script type="text/javascript" src="../sdk/includeHead.js"></script>
<style>.container {
min-height: 100vh;
background: #f5f5f5;
padding: 20px;
display: flex;
flex-direction: column;
align-items: center;
}
.qr-card {
/* background: #1890ff; */
padding: 20px;
border-radius: 12px;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
margin-bottom: 10px;
}
.qr-inner {
background: white;
padding: 20px;
border-radius: 8px;
text-align: center;
}
.title {
color: #fff;
font-size: 24px;
margin-bottom: 15px;
font-weight: 500;
text-align: center;
}
#qrcode {
width: 200px;
height: 200px;
margin: 0 auto;
}
.company-name {
color: #000;
font-size: 14px;
margin: 15px 0 0;
min-height: 20px;
}
.scan-tip {
color: #333;
font-size: 14px;
text-align: center;
margin-bottom: 20px;
}
.save-btn {
background: #1890ff;
color: white;
border: none;
padding: 12px 30px;
border-radius: 5px;
font-size: 16px;
cursor: pointer;
box-shadow: 0 4px 6px rgba(24, 144, 255, 0.2);
}
</style>
</head>
<body>
<div class="container">
<div class="qr-card">
<canvas id="mainCanvas" width="300" height="400"></canvas>
</div>
<button class="save-btn" onclick="saveCanvas()">保存二维码</button>
</div>
<script>
// 通用图片加载方法
function loadImage(url) {
return new Promise((resolve, reject) => {
const img = new Image();
img.crossOrigin = "Anonymous";
img.src = url;
img.onload = () => resolve(img);
img.onerror = reject;
});
}
const BG_IMAGE_URL = 'https://b0.bdstatic.com/b3b0c8ffbe97c6e30f0af89ec66d401f.jpg';
const QR_IMAGE_URL = 'http://pic.616pic.com/ys_img/00/10/41/bL9gkesSxm.jpg';
let canvasReady = false;
async function initCanvas() {
const canvas = document.getElementById('mainCanvas');
const ctx = canvas.getContext('2d');
// 加载背景图
const bgImage = await loadImage(BG_IMAGE_URL);
// 绘制背景图（平铺整个canvas）
ctx.drawImage(bgImage, 0, 0, canvas.width, canvas.height);
// // 绘制蓝色背景
// ctx.fillStyle = '#1890ff';
// ctx.fillRect(0, 0, 300, 400);
// 绘制白色底框
ctx.fillStyle = 'white';
ctx.fillRect(20, 90, 260, 260);
// 加载二维码图片
const img = new Image();
img.crossOrigin = "Anonymous"; // 处理跨域问题
img.src = QR_IMAGE_URL;
await new Promise((resolve, reject) => {
img.onload = () => {
// 绘制二维码
ctx.drawImage(img, 50, 120, 200, 200);
// 绘制文字
ctx.fillStyle = '#fff';
ctx.font = 'bold 24px Arial';
ctx.fillText('高区安全“码”上查', 70, 65);
ctx.fillStyle = '#000';
ctx.font = '14px Arial';
const companyText = '威海市酒店有限公司';
// ctx.fillText('威海市酒店有限公司', 60, 300);
const textWidth = ctx.measureText(companyText).width;
// 计算居中位置：白色底框宽度260，起始位置20
const xPos = 20 + (260 - textWidth)/2;
ctx.fillText(companyText, xPos, 340);
ctx.fillStyle = '#fff';
ctx.font = '14px Arial';
const saoText = '打开爱山东【扫一扫】'
const textWidth1 = ctx.measureText(companyText).width;
// 计算居中位置：白色底框宽度260，起始位置20
const xPos1 = 20 + (260 - textWidth1)/2;
ctx.fillText(saoText, xPos1, 370);
// ctx.fillText('打开爱山东【扫一扫】', 70, 350);
canvasReady = true;
resolve();
};
img.onerror = reject;
});
}
function saveCanvas() {
if (!canvasReady) return;
const canvas = document.getElementById('mainCanvas');
const dataURL = canvas.toDataURL('image/png');
console.log(dataURL, '图片下载')
// // 调用爱山东SDK（示例）
// window.aishandongSDK?.saveImage(dataURL);
// // 备用下载方式
// const link = document.createElement('a');
// link.download = 'aishandong_qrcode.png';
// link.href = dataURL;
// link.click();
lightAppJssdk.media.savePhoto({
arg: dataURL,
success: function(data) {
alert(JSON.stringify(data));
},
fail: function(data) {
alert(data);
}
});
}
// 初始化
window.addEventListener('DOMContentLoaded', initCanvas);
</script>
</body>
</html>
\ No newline at end of file
src/_codescan-canvas.html 0 → 100644
View file @ c167b82d
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>安全码查询</title>
<script type="text/javascript" src="../sdk/includeHead.js"></script>
<style>.container {
min-height: 100vh;
background: #f5f5f5;
padding: 20px;
display: flex;
flex-direction: column;
align-items: center;
}
.qr-card {
background: #1890ff;
padding: 20px;
border-radius: 12px;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
margin-bottom: 10px;
}
.qr-inner {
background: white;
padding: 20px;
border-radius: 8px;
text-align: center;
}
.title {
color: #fff;
font-size: 24px;
margin-bottom: 15px;
font-weight: 500;
text-align: center;
}
#qrcode {
width: 200px;
height: 200px;
margin: 0 auto;
}
.company-name {
color: #000;
font-size: 14px;
margin: 15px 0 0;
min-height: 20px;
}
.scan-tip {
color: #333;
font-size: 14px;
text-align: center;
margin-bottom: 20px;
}
.save-btn {
background: #1890ff;
color: white;
border: none;
padding: 12px 30px;
border-radius: 5px;
font-size: 16px;
cursor: pointer;
box-shadow: 0 4px 6px rgba(24, 144, 255, 0.2);
}
</style>
</head>
<body>
<div class="container">
<div class="qr-card">
<canvas id="mainCanvas" width="300" height="400"></canvas>
</div>
<button class="save-btn" onclick="saveCanvas()">保存二维码</button>
</div>
<script>
// 通用图片加载方法
function loadImage(url) {
return new Promise((resolve, reject) => {
const img = new Image();
img.crossOrigin = "Anonymous";
img.src = url;
img.onload = () => resolve(img);
img.onerror = reject;
});
}
const BG_IMAGE_URL = 'https://b0.bdstatic.com/b3b0c8ffbe97c6e30f0af89ec66d401f.jpg';
const QR_IMAGE_URL = 'http://pic.616pic.com/ys_img/00/10/41/bL9gkesSxm.jpg';
let canvasReady = false;
async function initCanvas() {
const canvas = document.getElementById('mainCanvas');
const ctx = canvas.getContext('2d');
// 加载背景图
// const bgImage = await loadImage(BG_IMAGE_URL);
// 绘制背景图（平铺整个canvas）
// ctx.drawImage(bgImage, 0, 0, canvas.width, canvas.height);
// // 绘制蓝色背景
ctx.fillStyle = '#1890ff';
ctx.fillRect(0, 0, 300, 400);
// 绘制白色底框
ctx.fillStyle = 'white';
ctx.fillRect(20, 90, 260, 260);
// 加载二维码图片
const img = new Image();
img.crossOrigin = "Anonymous"; // 处理跨域问题
img.src = QR_IMAGE_URL;
await new Promise((resolve, reject) => {
img.onload = () => {
// 绘制二维码
ctx.drawImage(img, 50, 120, 200, 200);
// 绘制文字
ctx.fillStyle = '#fff';
ctx.font = 'bold 24px Arial';
ctx.fillText('高区安全“码”上查', 70, 65);
ctx.fillStyle = '#000';
ctx.font = '14px Arial';
const companyText = '威海市酒店有限公司';
// ctx.fillText('威海市酒店有限公司', 60, 300);
const textWidth = ctx.measureText(companyText).width;
// 计算居中位置：白色底框宽度260，起始位置20
const xPos = 20 + (260 - textWidth)/2;
ctx.fillText(companyText, xPos, 340);
ctx.fillStyle = '#fff';
ctx.font = '14px Arial';
const saoText = '打开爱山东【扫一扫】'
const textWidth1 = ctx.measureText(companyText).width;
// 计算居中位置：白色底框宽度260，起始位置20
const xPos1 = 20 + (260 - textWidth1)/2;
ctx.fillText(saoText, xPos1, 370);
// ctx.fillText('打开爱山东【扫一扫】', 70, 350);
canvasReady = true;
resolve();
};
img.onerror = reject;
});
}
function saveCanvas() {
if (!canvasReady) return;
const canvas = document.getElementById('mainCanvas');
const dataURL = canvas.toDataURL('image/png');
console.log(dataURL, '图片下载')
// // 调用爱山东SDK（示例）
// window.aishandongSDK?.saveImage(dataURL);
// // 备用下载方式
// const link = document.createElement('a');
// link.download = 'aishandong_qrcode.png';
// link.href = dataURL;
// link.click();
lightAppJssdk.media.savePhoto({
arg: dataURL,
success: function(data) {
alert(JSON.stringify(data));
},
fail: function(data) {
alert(data);
}
});
}
// 初始化
window.addEventListener('DOMContentLoaded', initCanvas);
</script>
</body>
</html>
\ No newline at end of file
src/_codescan.html 0 → 100644
View file @ c167b82d
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>安全码查询</title>
<!-- 二维码生成库 -->
<!-- <script src="https://cdn.jsdelivr.net/npm/qrcode/build/qrcode.min.js"></script> -->
<script src="https://cdn.jsdelivr.net/npm/qrcode@1.5.0/build/qrcode.min.js"></script>
<!-- 截图库 -->
<script src="https://html2canvas.hertzen.com/dist/html2canvas.min.js"></script>
<style>
.container {
min-height: 100vh;
background: #f5f5f5;
padding: 20px;
display: flex;
flex-direction: column;
align-items: center;
}
.qr-card {
background: #1890ff;
padding: 20px;
border-radius: 12px;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
margin-bottom: 10px;
}
.qr-inner {
background: white;
padding: 20px;
border-radius: 8px;
text-align: center;
}
.title {
color: #fff;
font-size: 24px;
margin-bottom: 15px;
font-weight: 500;
text-align: center;
}
#qrcode {
width: 200px;
height: 200px;
margin: 0 auto;
}
.company-name {
color: #000;
font-size: 14px;
margin: 15px 0 0;
min-height: 20px;
}
.scan-tip {
color: #333;
font-size: 14px;
text-align: center;
margin-bottom: 20px;
}
.save-btn {
background: #1890ff;
color: white;
border: none;
padding: 12px 30px;
border-radius: 5px;
font-size: 16px;
cursor: pointer;
box-shadow: 0 4px 6px rgba(24, 144, 255, 0.2);
}
</style>
</head>
<body>
<div class="container">
<!-- 二维码卡片 -->
<div class="qr-card">
<h2 class="title">高区安全“码”上查</h2>
<div class="qr-inner">
<div id="qrcode"><img style="width: 200px;" src="http://pic.616pic.com/ys_img/00/10/41/bL9gkesSxm.jpg"/></div>
<div class="company-name" id="companyName">山东威海晶合优先公司</div>
</div>
</div>
<div class="scan-tip">打开爱山东【扫一扫】</div>
<!-- 保存按钮 -->
<button class="save-btn" onclick="saveQRCode()">保存二维码</button>
</div>
<script>
// 动态数据初始化
let appState = {
companyName: '加载中...'
};
// 获取后端数据
async function fetchCompanyInfo() {
try {
const response = await fetch('/api/company-info');
const data = await response.json();
appState.companyName = data.name;
document.getElementById('companyName').textContent = data.name;
} catch (error) {
console.error('数据加载失败:', error);
appState.companyName = '威海市酒店有限公司';
document.getElementById('companyName').textContent = '威海市酒店有限公司';
}
}
// 保存二维码
async function saveQRCode() {
try {
const card = document.querySelector('.qr-card');
const canvas = await html2canvas(card, {
useCORS: true,
scale: 2 // 高清输出
});
const link = document.createElement('a');
link.download = 'safety-qrcode.png';
link.href = canvas.toDataURL('image/png');
link.click();
} catch (error) {
console.error('保存失败:', error);
alert('保存失败，请稍后重试');
}
}
// 初始化
window.addEventListener('DOMContentLoaded', () => {
initQRCode();
fetchCompanyInfo();
});
</script>
</body>
</html>
\ No newline at end of file
src/_shanghu_detail.html 0 → 100644
View file @ c167b82d
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport"
content="width=device-width, initial-scale=1.0, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0, viewprot-fit:cover">
<title>高区“码”上</title>
<script type="text/javascript" src="../sdk/includeHead.js"></script>
<style>
.wrapper {
padding: 0.2rem;
background-color: #fff;
}
.header {}
.header .title {
font-weight: 500;
font-size: 0.32rem;
color: #000000;
display: flex;
justify-content: start;
align-items: center;
gap: 0.2rem;
padding: 0.3rem 0.3rem;
}
.detail {
width: 6.88rem;
/* height: 1.88rem; */
background: #F5F6FA;
border-radius: 0.01rem;
/* padding-left: 0.2rem; */
padding:0.3rem;
margin-bottom: 0.2rem;
display: flex;
align-items: start;
flex-direction: column;
justify-content: space-around;
/* padding-bottom: 0.1rem;
gap: 0.1rem; */
}
.detail .van-col{
font-family: PingFang SC;
font-weight: 500;
font-size: 0.28rem;
color: #737373;
}
.detail span {
font-family: PingFang SC;
font-weight: 500;
font-size: 0.28rem;
color: #737373;
}
.func_btn {
width: 6.9rem;
height: 0.8rem;
background: #1081E3;
border-radius: 0.1rem;
font-family: PingFang SC;
font-weight: 500;
font-size: 0.3rem;
color: #FFFFFF;
margin: 0 auto;
border-width: 0;
}
.tag {
display: inline-block;
width: 0.9rem;
height: 0.42rem;
line-height: 0.42rem;
text-align: center;
background: #00B55E;
border-radius: 21px;
font-weight: 500;
font-size: 0.28rem;
color: #FFFFFF;
}
/* 添加以下样式 */
.van-tabs__line {
background-color: #1989fa;
}
.blue-text {
color: #1989fa;
font-weight: 500;
}
.van-list {
background: #fff;
border-radius: 8px;
margin: 0 0.1rem;
}
.van-cell {
padding: 12px 16px;
}
.van-tab__text {
font-weight: bold;
font-size: 0.3rem;
}
.van-tab--active {
color: #1081E3;
}
.van-field__label {
font-weight: bold;
}
.van-field__control {
color: #737373;
}
.subNavWrapper{
background-color: #F5F6FA;
padding: 0.2rem 0.2rem;
}
.subNavWrapper .van-tabs__nav--card {
border: none !important;
}
.subNavWrapper .van-tabs--card{
margin-bottom: 0.3rem;
}
.subNavWrapper .van-tabs__nav--card .van-tab {
color: #5B5B5B;
border: none !important;
}
.subNavWrapper .van-tabs__nav--card .van-tab.van-tab--active {
color: #FFFFFF;
background: #58A5E8;
border-radius: 0.4rem;
}
.subNavWrapper .van-list{
background: #F5F6FA;
}
.subNavWrapper .van-cell{
margin-bottom: .3rem;
}
.subNavWrapper .van-tabs__nav{
background: #F5F6FA;
}
</style>
</head>
<div id="app">
<div class="wrapper">
<!-- 表单内容 -->
<van-cell-group inset>
<van-cell-group>
<van-field label="商家名称" v-model="formData.principal" />
</van-cell-group>
<van-cell-group>
<van-field label="负责人" v-model="formData.phone" type="tel"/>
</van-cell-group>
<van-cell-group>
<van-field label="电话" v-model="formData.area" type="number" />
</van-cell-group>
<van-cell-group>
<van-field label="地址" v-model="formData.businessHours" />
</van-cell-group>
<van-cell-group>
<van-field label="场所类型" v-model="formData.type"/>
</van-cell-group>
<van-cell-group>
<van-field label="安全二维码" v-model="formData.type"/>
</van-cell-group>
</van-cell-group>
</div>
<script>
// 在原有Vue实例中添加
new Vue({
el: '#app',
data() {
return {
formData: {
principal: '',
phone: '',
area: '',
businessHours: '',
type: '', // 新增类型字段
},
}
},
computed: {
},
methods: {
viewDetail(id) {
console.log('查看详情:', id);
// 这里添加跳转逻辑
}
}
});
</script>
</body>
</html>
\ No newline at end of file
src/_shanghu.html → src/_shanghu_home.html
View file @ c167b82d
<!DOCTYPE html>
<html lang="en">
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
......@@ -13,9 +12,9 @@
padding: 0.2rem;
background-color: #fff;
}
.header {}
.header .title {
font-weight: 500;
font-size: 0.32rem;
......@@ -26,8 +25,8 @@
gap: 0.2rem;
padding: 0.3rem 0.3rem;
}
.detail {
width: 6.88rem;
/* height: 1.88rem; */
......@@ -42,7 +41,7 @@
justify-content: space-around;
/* padding-bottom: 0.1rem;
gap: 0.1rem; */
}
.detail .van-col{
......@@ -57,7 +56,7 @@
font-size: 0.28rem;
color: #737373;
}
.func_btn {
width: 6.9rem;
height: 0.8rem;
......@@ -70,7 +69,7 @@
margin: 0 auto;
border-width: 0;
}
.tag {
display: inline-block;
width: 0.9rem;
......@@ -83,47 +82,47 @@
font-size: 0.28rem;
color: #FFFFFF;
}
/* 添加以下样式 */
.van-tabs__line {
background-color: #1989fa;
}
.blue-text {
color: #1989fa;
font-weight: 500;
}
.van-list {
background: #fff;
border-radius: 8px;
margin: 0 0.1rem;
}
.van-cell {
padding: 12px 16px;
}
.van-tab__text {
font-weight: bold;
font-size: 0.3rem;
}
.van-tab--active {
color: #1081E3;
}
.van-field__label {
font-weight: bold;
}
.van-field__control {
color: #737373;
}
.subNavWrapper{
background-color: #F5F6FA;
padding: 0.2rem 0.2rem;
......@@ -134,12 +133,12 @@
.subNavWrapper .van-tabs--card{
margin-bottom: 0.3rem;
}
.subNavWrapper .van-tabs__nav--card .van-tab {
color: #5B5B5B;
border: none !important;
}
.subNavWrapper .van-tabs__nav--card .van-tab.van-tab--active {
color: #FFFFFF;
background: #58A5E8;
......@@ -157,9 +156,7 @@
}
</style>
</head>
<body>
<div id="app">
<div id="app">
<div class="wrapper">
<!-- 商户头部信息 -->
<div class="header">
......@@ -186,13 +183,13 @@
<van-row>
<van-col span="24">山东省威海市环翠区和谐街35-6</van-col>
</van-row>
</div>
</div>
<!-- 功能 -->
<button type="info" class="func_btn"><span style="font-size: 0.5rem; vertical-align: -0.05rem;">+</span>安全检查</button>
<!-- Tab栏 -->
<van-tabs v-model:active="activeTab" title-active-color="#1989fa" line-height="2px"
style="margin-bottom: 15px;">
......@@ -201,7 +198,7 @@
<van-tab title="检查记录"></van-tab>
<van-tab title="自查记录"></van-tab>
</van-tabs>
<!-- 内容区 -->
<div v-show="activeTab === 0">
<!-- 表单内容 -->
......@@ -209,7 +206,7 @@
<van-cell-group>
<van-field label="商家名称" v-model="formData.principal" placeholder="请输入负责人姓名" />
</van-cell-group>
<van-cell-group>
<van-field label="负责人" v-model="formData.phone" type="tel" placeholder="请输入联系方式" />
</van-cell-group>
......@@ -224,7 +221,7 @@
<van-field label="场所类型" v-model="formData.type" placeholder="请选择场所类型" readonly clickable
@click="showTypePicker = true" />
</van-cell-group>
<van-popup v-model:show="showTypePicker" position="bottom">
<van-picker show-toolbar :columns="typeOptions" @confirm="onConfirmType"
@cancel="showTypePicker = false" />
......@@ -234,9 +231,9 @@
</van-popup>
</van-cell-group>
</div>
<div v-show="activeTab === 1" class="subNavWrapper">
<!-- 隐患记录子Tab -->
<van-tabs v-model:active="subActiveTab" type="card">
<van-tab title="全部"></van-tab>
......@@ -258,7 +255,7 @@
font-weight: bold;
font-family: PingFang SC;
">{{ item.description }}</div>
<!-- 第二行：状态和时间 -->
<div style="display: flex; justify-content: space-between; margin: 8px 0;">
<van-tag :type="statusTagType(item.status)">
......@@ -267,7 +264,7 @@
<span style="color: #737373; font-size: 0.28rem;margin-left: -1.4rem;">检查时间：{{ item.date }}</span>
<van-icon name="arrow" style="color: #1081E3;" @click="viewDetail(item.id)" />
</div>
<!-- 第三行：商家和箭头 -->
<div style="display: flex; justify-content: space-between; align-items: center;">
<span style="color: #666; font-size: 0.28rem;">商家名称：威海市宝威酒店有限公司{{ item.shop }}</span>
......@@ -312,9 +309,9 @@
</van-cell>
</van-list>
</div>
</div>
<script>
// 在原有Vue实例中添加
new Vue({
......@@ -401,5 +398,5 @@
});
</script>
</body>
</html>
\ No newline at end of file
src/_shanghu_list.html 0 → 100644
View file @ c167b82d
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport"
content="width=device-width, initial-scale=1.0, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0, viewprot-fit:cover">
<title>高区“码”上</title>
<script type="text/javascript" src="../sdk/includeHead.js"></script>
<style>
.wrapper {
padding: 0.2rem;
background-color: #fff;
background: #F5F6FA;
}
/* 条件查询样式 */
.header .van-search__label{
background-color: #fff;
padding-right: .24rem;
}
.header .van-search__content{
padding-left: 0;
}
.header .van-search__content .van-cell{
padding-left: 0.24rem;
}
.tag {
display: inline-block;
width: 0.9rem;
height: 0.42rem;
line-height: 0.42rem;
text-align: center;
background: #00B55E;
border-radius: 21px;
font-weight: 500;
font-size: 0.28rem;
color: #FFFFFF;
}
/* 添加以下样式 */
.van-tabs__line {
background-color: #1989fa;
}
.blue-text {
color: #1989fa;
font-weight: 500;
}
.van-list {
background: #fff;
border-radius: 8px;
margin: 0 0.1rem;
}
.van-cell {
padding: 12px 16px;
}
.van-tab__text {
font-weight: bold;
font-size: 0.3rem;
}
.van-tab--active {
color: #1081E3;
}
.van-field__label {
font-weight: bold;
}
.van-field__control {
color: #737373;
}
</style>
</head>
<body>
<div id="app">
<div class="wrapper">
<!-- 商户头部信息 -->
<div class="header">
<van-search
v-model="shanghuName"
show-action
label="查询商家"
placeholder="请输入商家关键词"
@search="onSearch"
>
<template #action>
<div @click="onSearch"></div>
</template>
</van-search>
</div>
<!-- 隐患列表 -->
<van-list>
<van-cell v-for="item in filteredHazards" :key="item.id" style="margin-bottom: 0.15rem;margin-top: 0.15rem;">
<div style="width: 100%;">
<!-- 第一行：隐患描述 -->
<div style="
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
color: #333;
font-size: 0.3rem;
font-weight: bold;
font-family: PingFang SC;
">{{ item.description }}</div>
<!-- 第二行：状态和时间 -->
<div style="display: flex; justify-content: space-between; margin: 8px 0;">
<span style="color: #737373; font-size: 0.28rem;margin-left: -1.4rem;">场所类型：{{ item.date }}</span>
</div>
<!-- 第三行：商家和箭头 -->
<div style="display: flex; justify-content: space-between; align-items: center;">
<span style="color: #666; font-size: 0.28rem;">商家名称：威海市宝威酒店有限公司{{ item.shop }}</span>
</div>
</div>
</van-cell>
</van-list>
</div>
<script>
// 在原有Vue实例中添加
new Vue({
el: '#app',
data() {
return {
shanghuName: '',
// 新增子Tab数据
subActiveTab: 0,
hazardList: [{
id: 1,
description: '消防通道被货物堵塞，存在严重安全隐患需要立即整改',
status: '待审核',
date: '2024-03-15',
shop: 'XX餐饮店',
type: 2
},
{
id: 2,
description: '消防通道被货物堵塞，存在严重安全隐患需要立即整改',
status: '待整改',
date: '2024-03-15',
shop: 'XX餐饮店',
type: 2
},
// 更多示例数据...
],
activeTab: 0,
}
},
computed: {
filteredHazards() {
const statusMap = ['全部', '待审核', '待整改', '已整改'];
return this.hazardList.filter(item =>
this.subActiveTab === 0 ? true : item.status === statusMap[this.subActiveTab]
);
}
},
methods: {
onSearch(){
console.log('xxxx')
},
// 新增选择确认方法
onConfirmType(value) {
this.formData.type = value;
this.showTypePicker = false;
},
onConfirmTime(time) {
this.formData.businessHours = time;
this.showTimePicker = false;
},
statusTagType(status) {
const types = {
'待审核': 'warning',
'待整改': 'primary',
'已整改': 'success',
'整改逾期': 'danger',
};
return types[status] || '';
},
viewDetail(id) {
console.log('查看详情:', id);
// 这里添加跳转逻辑
}
}
});
</script>
</body>
</html>
\ No newline at end of file
src/_yh-check - 副本 (2).html 0 → 100644
View file @ c167b82d
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport"
content="width=device-width, initial-scale=1.0, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0, viewprot-fit:cover">
<title>高区“码”上</title>
<script type="text/javascript" src="../sdk/includeHead.js"></script>
<style>
.wrapper {
padding: 0.2rem;
background-color: #fff;
background: #F5F6FA;
}
/* 条件查询样式 */
.header .van-search__label{
background-color: #fff;
padding-right: .24rem;
}
.header .van-search__content{
padding-left: 0;
}
.header .van-search__content .van-cell{
padding-left: 0.24rem;
}
.tag {
display: inline-block;
width: 0.9rem;
height: 0.42rem;
line-height: 0.42rem;
text-align: center;
background: #00B55E;
border-radius: 21px;
font-weight: 500;
font-size: 0.28rem;
color: #FFFFFF;
}
/* 添加以下样式 */
.van-tabs__line {
background-color: #1989fa;
}
.blue-text {
color: #1989fa;
font-weight: 500;
}
.van-list {
background: #fff;
border-radius: 8px;
margin: 0 0.1rem;
}
.van-cell {
padding: 12px 16px;
}
.van-tab__text {
font-weight: bold;
font-size: 0.3rem;
}
.van-tab--active {
color: #1081E3;
}
.van-field__label {
font-weight: bold;
}
.van-field__control {
color: #737373;
}
</style>
</head>
<body>
<div id="app">
<div class="wrapper">
<!-- 商户头部信息 -->
<div class="header">
<van-search
v-model="shanghuName"
show-action
label="查询商家"
placeholder="请输入商家关键词"
@search="onSearch"
>
<template #action>
<div @click="onSearch"></div>
</template>
</van-search>
</div>
<!-- Tab栏 -->
<van-tabs v-model:active="activeTab" title-active-color="#1989fa" line-height="2px"
style="margin-bottom: 15px;">
<van-tab title="全部"></van-tab>
<van-tab title="待审核"></van-tab>
<van-tab title="待整改"></van-tab>
<van-tab title="已整改"></van-tab>
<!-- <van-tab title="整改逾期"></van-tab> -->
</van-tabs>
<!-- 隐患列表 -->
<van-list>
<van-cell v-for="item in filteredHazards" :key="item.id">
<div style="width: 100%;">
<!-- 第一行：隐患描述 -->
<div style="
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
color: #333;
font-size: 0.3rem;
font-weight: bold;
font-family: PingFang SC;
">{{ item.description }}</div>
<!-- 第二行：状态和时间 -->
<div style="display: flex; justify-content: space-between; margin: 8px 0;">
<van-tag :type="statusTagType(item.status)">
{{ item.status }}
</van-tag>
<span style="color: #737373; font-size: 0.28rem;margin-left: -1.4rem;">检查时间：{{ item.date }}</span>
<van-icon name="arrow" style="color: #1081E3;" @click="viewDetail(item.id)" />
</div>
<!-- 第三行：商家和箭头 -->
<div style="display: flex; justify-content: space-between; align-items: center;">
<span style="color: #666; font-size: 0.28rem;">商家名称：威海市宝威酒店有限公司{{ item.shop }}</span>
</div>
</div>
</van-cell>
</van-list>
</div>
<script>
// 在原有Vue实例中添加
new Vue({
el: '#app',
data() {
return {
shanghuName: '',
// 新增子Tab数据
subActiveTab: 0,
hazardList: [{
id: 1,
description: '消防通道被货物堵塞，存在严重安全隐患需要立即整改',
status: '待审核',
date: '2024-03-15',
shop: 'XX餐饮店',
type: 2
},
{
id: 2,
description: '消防通道被货物堵塞，存在严重安全隐患需要立即整改',
status: '待整改',
date: '2024-03-15',
shop: 'XX餐饮店',
type: 2
},
// 更多示例数据...
],
activeTab: 0,
}
},
computed: {
filteredHazards() {
const statusMap = ['全部', '待审核', '待整改', '已整改'];
return this.hazardList.filter(item =>
this.subActiveTab === 0 ? true : item.status === statusMap[this.subActiveTab]
);
}
},
methods: {
onSearch(){
console.log('xxxx')
},
// 新增选择确认方法
onConfirmType(value) {
this.formData.type = value;
this.showTypePicker = false;
},
onConfirmTime(time) {
this.formData.businessHours = time;
this.showTimePicker = false;
},
statusTagType(status) {
const types = {
'待审核': 'warning',
'待整改': 'primary',
'已整改': 'success',
'整改逾期': 'danger',
};
return types[status] || '';
},
viewDetail(id) {
console.log('查看详情:', id);
// 这里添加跳转逻辑
}
}
});
</script>
</body>
</html>
\ No newline at end of file
src/_yh-check.html
View file @ c167b82d
......@@ -99,7 +99,7 @@
@search="onSearch"
>
<template #action>
<div @click="onSearch"></div>
<div @click="onSearch">搜索</div>
</template>
</van-search>
</div>
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment