Skip to content

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

add: 消费者首页

parent c6974668
Hide whitespace changes
Inline Side-by-side
Showing with 559 additions and 0 deletions
src/_consumer_home.css 0 → 100644
View file @ 23120e78
html,
body {
letter-spacing: .01rem;
}
.wrapper {
/* padding: 0.2rem; */
background-color: #fff;
}
.header {
padding: .2rem;
}
.header .title {
font-weight: bold;
font-size: 0.32rem;
color: #000000;
display: flex;
justify-content: start;
align-items: center;
gap: 0.2rem;
padding: 0.3rem 0.3rem;
}
.header .title img {
width: 0.51rem;
height: 0.52rem;
}
.detail {
width: 6.5rem;
/* 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;
}
.detail .detail_link {
position: absolute;
right: .3rem;
font-size: .26rem;
color: #1081E3;
cursor: pointer;
}
.func_btn {
width: 7.12rem;
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;
margin-left: .2rem;
cursor: pointer;
}
.func_btn span {
font-size: 0.5rem;
vertical-align: -0.05rem;
margin-right: .1rem;
}
.tag {
display: inline-block;
width: 1.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;
}
.subNavWrapper .van-cell {
padding: 12px 10px;
}
.van-tab {
color: #000;
}
.van-tab__text {
font-weight: bold;
font-size: 0.3rem;
/* color: #000; */
}
.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;
margin-top: -0.3rem;
}
.subNavWrapper .van-tab__text {
color: #5B5B5B;
}
.subNavWrapper .van-tab--active span {
color: #fff;
font-size: 0.28rem;
}
.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;
margin: 0;
}
.navToBtn {
color: #5B5B5B;
font-size: .36rem;
margin-top: .04rem;
position: absolute;
right: 0;
}
\ No newline at end of file
src/_consumer_home.html 0 → 100644
View file @ 23120e78
<!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>
<link rel="stylesheet" href="home.css" />
<style>
[v-cloak] {
/* display: none; */
}
</style>
<style>
/* 基础重置样式 */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
-webkit-tap-highlight-color: transparent;
/* 去除移动端点击高亮 */
}
body {
font-family: 'PingFang SC', 'Microsoft YaHei', sans-serif;
font-size: 16px;
background-color: #f8f9fa;
}
/* 表单容器 */
.form-container {
max-width: 750px;
/* 移动端最大宽度 */
margin: 20px auto;
padding: 0 15px;
background-color: #fff;
border-radius: 8px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}
/* 表单单项 */
.form-item {
display: flex;
align-items: center;
/* 垂直居中 */
height: 50px;
padding: 0 12px;
border-bottom: 1px solid #f0f2f5;
}
/* 最后一项去除下边框 */
.form-item:last-child {
border-bottom: none;
}
/* 表单标题 */
.form-label {
flex-shrink: 0;
/* 防止标题被压缩 */
width: 80px;
/* 标题固定宽度，可根据需求调整 */
color: #333;
font-size: 15px;
text-align: left;
/* 标题左对齐 */
}
/* 输入框容器 */
.form-input-wrap {
flex: 1;
/* 占据剩余空间 */
height: 100%;
display: flex;
align-items: center;
}
/* 输入框样式 */
.form-input {
width: 100%;
height: 32px;
/* 输入框高度小于容器，留出垂直空间 */
border: none;
outline: none;
font-size: 15px;
color: #666;
}
/* 输入框placeholder样式 */
.form-input::placeholder {
color: #999;
font-size: 14px;
}
/* 输入框聚焦效果 */
.form-input:focus {
color: #262626;
}
.imager-item-title {
height: 50px;
line-height: 50px;
padding: 0 12px;
font-size: 14px;
border-bottom: 1px solid #f0f2f5;
margin-bottom: 10px;
font-weight: 400;
}
.save-btn {
width: 98%;
background: #1890ff;
color: #fff;
border: none;
padding: 7px 20px;
border-radius: 3px;
font-size: 16px;
cursor: pointer;
margin-bottom: .4rem;
}
</style>
<!-- 在 includeHead.js 之后添加环境判断 -->
<script src="../sdk/includeHead.js"></script>
</head>
<body>
<div id="app" class="page_wrapper" v-cloak>
<!-- 第一层：标题图 -->
<div class="second-layer second-layer-zf">
<img class="merchant-icon" src="image/code/zhengfu_logo.png" alt="" />
</div>
<!-- 第二层：商户图标、名称、等级、场所类型和地址 -->
<div class="header">
<!-- <div class="level">安全等级</div> -->
<div class="title">
<img src="../image/code/sj.png" alt=""><span>{{merInformation.unitName}}</span><span
class="tag">安全等级-绿</span>
</div>
<div class="detail">
<van-row>
<van-col span="24">场所类型: {{merInformation.smallPlaceTypeName}}</van-col>
</van-row>
<van-row>
<van-col span="24">{{merInformation.businessAddress}}</van-col>
</van-row>
</div>
</div>
<!-- 第三层：表单区 -->
<div class="third-layer">
<!-- form开始 -->
<div class="form-container">
<div>
<h5 class="imager-item-title">
<span>*安全建议</span>
<span></span>
</h5>
<div>
<textarea name="" id="" cols="10" rows="2"></textarea>
</div>
</div>
<div>
<h5 class="imager-item-title">
<span>请上传图片（最多四张）</span>
<span></span>
</h5>
<div>
<van-uploader v-model="formData.storefrontPhotosH5" :max-count="4"
:after-read="handleFileUpload" class="uploader-wrapper" />
</div>
</div>
<div class="form-item">
<span class="form-label">联系人</span>
<div class="form-input-wrap">
<input type="text" v-model="formData.owner" class="form-input" placeholder="请输入11位手机号"
pattern="[0-9]{11}">
</div>
</div>
<div class="form-item">
<span class="form-label">联系电话</span>
<div class="form-input-wrap">
<input type="text" v-model="formData.merchantPhone" class="form-input"
placeholder="请输入联系地址">
</div>
</div>
<div class="form-item">
<span class="form-label">日期</span>
<div class="form-input-wrap">
<input type="text" v-model="formData.businessAddress" v-model="formData.merchantPhone"
class="form-input" placeholder="请输入联系地址">
</div>
</div>
<!-- form结束 -->
<button class="save-btn" style="margin-left: 50%; transform: translateX(-50%);" onclick="save"
>提交</button>
</div>
</div>
</body>
</html>
\ No newline at end of file
src/_consumer_home.js 0 → 100644
View file @ 23120e78
/**
* author: dabao
* date: 2024-03-15
* description: 商户首页
*/
var VUE = null
window.addEventListener("load", function () {
VUE = new Vue({
el: '#app',
data() {
return {
// 新增子Tab数据
subActiveTab: 0,
hazardList: [// 更多示例数据...
],
activeTab: 0,
showTimePicker: false,
// 新增以下数据
showTypePicker: false,
typeOptions: ['小餐饮', '酒店', '商场', '学校', '医疗机构'],
formData: {
principal: '',
phone: '',
area: '',
businessHours: '',
type: '', // 新增类型字段
},
checkList: [{
id: 1,
date: '2024-03-15',
result: '合格'
},
{
id: 2,
date: '2024-03-14',
result: '不合格'
}
],
merId: '',
merInformation: { // 新增商户信息对象
},
}
},
created() {
let params = gemhoUtil.getUrlParams()
console.log(params);
this.merId = params.merId
},
mounted() {
this.getShopInfo() // 获取商户信息
},
methods: {
// 文件上传处理
handleFileUpload(file) {
console.log('上传文件:', file);
// 此处可添加实际文件上传逻辑
},
// 场所类型
handlesmallPlaceTypeNameConfirm(event, item) {
console.log('select选择', event.target.value)
const value = event.target.value;
if (value) {
const days = parseInt(value);
item.deadlineDays = days;
const deadlineDate = new Date();
deadlineDate.setDate(deadlineDate.getDate() + days);
item.deadlineDate = this.formatDate(deadlineDate);
}
// this.showDeadlinePicker = false;
},
navTo(url) {
// gemhoUtil.nav2asd(url)
let params = gemhoUtil.getUrlParams()
if (url == 'check_info') {
params = {
...params,
flag: 'ADD',
pageName: '_shanghu_home'
}
}
let strurl = gemhoUtil.setParameter(`_${url}.html`, params)
gemhoUtil.navigatePage(strurl, '跳转中...')
},
viewDetail(item, type) {
let params = {
id: item.id,
merId: this.merId,
pageName: '_shanghu_home'
}
// 这里添加跳转逻辑
if (type === 'YH_XQ') {
params = {
...params,
flag: item.rectificationStatus,
}
} else {
params = {
...params,
flag: 'JC_XQ',
}
}
let url = gemhoUtil.setParameter('_check_info.html', params)
gemhoUtil.navigatePage(url, '跳转中...')
},
//获取商户信息
getShopInfo() {
vant.Toast.loading({
message: '正在加载...',
forbidClick: true,
loadingType: 'spinner',
})
setTimeout(() => {
http2.post(
{
serviceId: API_KEY_MAP['no-page']['id'],
interfacePublicKey: API_KEY_MAP['no-page']['publicKey'],
interfacePrivateKey: API_KEY_MAP['no-page']['privateKey'],
reqParams: {
sign: 11,
pageNum: this.page++, // 每次请求增加下一页
pageSize: this.size,
merId: this.merId,
sort: 'lawId,desc',
},
},
(res) => {
if (!res) {
// 中台返回为undefined 重新请求
vant.Toast.clear()
this.page = this.page - 1 // 重新请求后，分页数恢复上一次请求的值
setTimeout(() => {
// this.getList()
}, 0)
return
}
if (res) {
var result = JSON.parse(res)
this.merInformation = { ...this.merInformation, ...result.data }
}
}
)
}, 0)
},
}
});
})
\ No newline at end of file
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