Skip to content

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

fix: 商家信息页面

parent d0ce9436
Hide whitespace changes
Inline Side-by-side
Showing with 50 additions and 243 deletions
src/_shanghu_detail.html
View file @ 9fe6da05
......@@ -12,148 +12,17 @@
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">
......@@ -162,23 +31,32 @@
<!-- 表单内容 -->
<van-cell-group inset>
<van-cell-group>
<van-field label="商家名称" v-model="formData.principal" />
<van-field label="商家名称" v-model="formData.sjName1" />
</van-cell-group>
<van-cell-group>
<van-field label="负责人" v-model="formData.phone" type="tel"/>
<van-field label="负责人" v-model="formData.sjName2" type="tel"/>
</van-cell-group>
<van-cell-group>
<van-field label="电话" v-model="formData.sjName3" type="number" />
</van-cell-group>
<van-cell-group>
<van-field label="电话" v-model="formData.area" type="number" />
<van-field label="地址" v-model="formData.sjName4" />
</van-cell-group>
<van-cell-group>
<van-field label="地址" v-model="formData.businessHours" />
<van-field label="场所类型" v-model="formData.sjName5"/>
</van-cell-group>
<van-cell-group>
<van-field label="场所类型" v-model="formData.type"/>
<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" />
</van-popup>
<van-cell-group>
<van-field label="安全二维码" v-model="formData.type"/>
<van-field label="安全二维码" v-model="formData.sjName6"/>
</van-cell-group>
</van-cell-group>
......@@ -196,12 +74,24 @@
area: '',
businessHours: '',
type: '', // 新增类型字段
sjName1:'威海市宝威酒店有限公司',
sjName2:'XXX',
sjName3:'0631-522221212',
sjName4:'威海市XXXXXXXXX',
sjName5:'小餐饮',
},
showTypePicker: false,
typeOptions: ['小餐饮', '酒店', '商场', '学校', '医疗机构'],
}
},
computed: {
},
methods: {
// 新增选择确认方法
onConfirmType(value) {
this.formData.type = value;
this.showTypePicker = false;
},
viewDetail(id) {
console.log('查看详情:', id);
// 这里添加跳转逻辑
......
src/_shanghu_home.html
View file @ 9fe6da05
......@@ -72,7 +72,7 @@
.tag {
display: inline-block;
width: 0.9rem;
width: 1.8rem;
height: 0.42rem;
line-height: 0.42rem;
text-align: center;
......@@ -153,6 +153,7 @@
}
.subNavWrapper .van-tabs__nav{
background: #F5F6FA;
margin: 0;
}
</style>
</head>
......@@ -162,7 +163,7 @@
<div class="header">
<!-- <div class="level">安全等级</div> -->
<div class="title"><img src="https://dummyimage.com/26x26" alt=""><span>威海市宝威酒店有限公司</span><span
class="tag">绿</span>
class="tag">安全等级-绿</span>
</div>
<div class="detail">
<!-- <div><span>场所类型: 小餐饮</span> </div>
......@@ -193,46 +194,13 @@
<!-- 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>
<!-- 内容区 -->
<div v-show="activeTab === 0">
<!-- 表单内容 -->
<van-cell-group inset>
<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>
<van-cell-group>
<van-field label="电话" v-model="formData.area" type="number" placeholder="请输入面积（㎡）" />
</van-cell-group>
<van-cell-group>
<van-field label="地址" v-model="formData.businessHours" placeholder="请选择时间" readonly
@click="showTimePicker = true" />
</van-cell-group>
<van-cell-group>
<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" />
</van-popup>
<van-popup v-model:show="showTimePicker" position="bottom">
<van-datetime-picker type="time" @confirm="onConfirmTime" />
</van-popup>
</van-cell-group>
</div>
<div v-show="activeTab === 1" class="subNavWrapper">
<div v-show="activeTab===0" class="subNavWrapper">
<!-- 隐患记录子Tab -->
<van-tabs v-model:active="subActiveTab" type="card">
......@@ -240,6 +208,7 @@
<van-tab title="待审核"></van-tab>
<van-tab title="待整改"></van-tab>
<van-tab title="已整改"></van-tab>
<van-tab title="逾期"></van-tab>
</van-tabs>
<!-- 隐患列表 -->
<van-list>
......@@ -275,7 +244,7 @@
</div>
<!-- 检查记录 -->
<div v-show="activeTab === 2" class="subNavWrapper">
<div v-show="activeTab>0" class="subNavWrapper">
<!-- 隐患列表 -->
<van-list>
......
src/_shanghu_list.html
View file @ 9fe6da05
......@@ -9,12 +9,20 @@
<title>高区“码”上</title>
<script type="text/javascript" src="../sdk/includeHead.js"></script>
<style>
html, body{
background-color: #F5F6FA;
}
.wrapper {
padding: 0.2rem;
background-color: #fff;
background: #F5F6FA;
}
.header{
width: 99vw;
margin-left: -.15rem;
margin-top: -.15rem;
}
/* 条件查询样式 */
.header .van-search__label{
background-color: #fff;
......@@ -26,62 +34,6 @@
.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>
......@@ -106,7 +58,7 @@
<!-- 隐患列表 -->
<van-list>
<van-cell v-for="item in filteredHazards" :key="item.id" style="margin-bottom: 0.15rem;margin-top: 0.15rem;">
<van-cell v-for="item in filteredHazards" :key="item.id" style="margin-bottom: 0.25rem;margin-top: 0.25rem;">
<div style="width: 100%;">
<!-- 第一行：隐患描述 -->
<div style="
......@@ -126,7 +78,7 @@
<!-- 第三行：商家和箭头 -->
<div style="display: flex; justify-content: space-between; align-items: center;">
<span style="color: #666; font-size: 0.28rem;">商家名称：威海市宝威酒店有限公司{{ item.shop }}</span>
<span style="color: #666; font-size: 0.28rem;">威海市和谐路xxxx号</span>
</div>
</div>
</van-cell>
......@@ -144,31 +96,27 @@
subActiveTab: 0,
hazardList: [{
id: 1,
description: '消防通道被货物堵塞，存在严重安全隐患需要立即整改',
description: '威海市保卫酒店有限公司1',
status: '待审核',
date: '2024-03-15',
date: '场所类型：小餐饮',
shop: 'XX餐饮店',
type: 2
},
{
id: 2,
description: '消防通道被货物堵塞，存在严重安全隐患需要立即整改',
description: '威海市保卫酒店有限公司2',
status: '待整改',
date: '2024-03-15',
date: '场所类型：小餐饮',
shop: 'XX餐饮店',
type: 2
},
// 更多示例数据...
],
activeTab: 0,
}
},
computed: {
filteredHazards() {
const statusMap = ['全部', '待审核', '待整改', '已整改'];
return this.hazardList.filter(item =>
this.subActiveTab === 0 ? true : item.status === statusMap[this.subActiveTab]
);
return this.hazardList
}
},
methods: {
......
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