Skip to content

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

add: select样式调整，赋值回显

parent 3e986db1
Show whitespace changes
Inline Side-by-side
Showing with 159 additions and 118 deletions
src/_shanghu_detail-edit.css
View file @ d9a06b02
...@@ -73,3 +73,127 @@ ...@@ -73,3 +73,127 @@
color: #c8c9cc; color: #c8c9cc;
font-size: .28rem; font-size: .28rem;
} }
/* 基础重置样式 */
* {
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;
}
/* vant tab底部栏颜色 */
.van-tabs__line{
background-color: #1081E3;
}
.selector{
width: 5.5rem;
height: 0.6rem;
font-size: 0.3rem;
border: 1px solid #D7D7D7;
background-color: #fff;
}
input:disabled{
background-color: #fff;
}
select:disabled{
border:none;
/* 移除默认箭头 */
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
/* 调整右侧内边距，防止文字溢出 */
padding-right: 25px;
/* 可选：统一背景色 */
background-color: white;
}
\ No newline at end of file
src/_shanghu_detail-edit.html
View file @ d9a06b02
...@@ -9,99 +9,7 @@ ...@@ -9,99 +9,7 @@
<script type="text/javascript" src="../sdk/includeHead.js"></script> <script type="text/javascript" src="../sdk/includeHead.js"></script>
<script type="text/javascript" src="../sdk/axios_http3.js"></script> <script type="text/javascript" src="../sdk/axios_http3.js"></script>
<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;
}
</style> </style>
</head> </head>
<body> <body>
...@@ -120,14 +28,14 @@ ...@@ -120,14 +28,14 @@
<div class="form-item"> <div class="form-item">
<span class="form-label">商家名称</span> <span class="form-label">商家名称</span>
<div class="form-input-wrap"> <div class="form-input-wrap">
<input type="text" v-model="formData.unitName" class="form-input" placeholder=""> <input type="text" v-model="formData.unitName" class="form-input" :disabled="flag=='XQ'">
</div> </div>
</div> </div>
<div class="form-item"> <div class="form-item">
<span class="form-label">负责人</span> <span class="form-label">负责人</span>
<div class="form-input-wrap"> <div class="form-input-wrap">
<input type="text" v-model="formData.owner" class="form-input" placeholder="" <input type="text" v-model="formData.owner" class="form-input" :disabled="flag=='XQ'"
> >
</div> </div>
</div> </div>
...@@ -136,7 +44,7 @@ ...@@ -136,7 +44,7 @@
<span class="form-label">电话</span> <span class="form-label">电话</span>
<div class="form-input-wrap"> <div class="form-input-wrap">
<input type="text" v-model="formData.merchantPhone" class="form-input" <input type="text" v-model="formData.merchantPhone" class="form-input"
placeholder=""> :disabled="flag=='XQ'">
</div> </div>
</div> </div>
...@@ -144,14 +52,15 @@ ...@@ -144,14 +52,15 @@
<span class="form-label">地址</span> <span class="form-label">地址</span>
<div class="form-input-wrap"> <div class="form-input-wrap">
<input type="text" v-model="formData.businessAddress" v-model="formData.merchantPhone" <input type="text" v-model="formData.businessAddress" v-model="formData.merchantPhone"
class="form-input" placeholder=""> class="form-input" :disabled="flag=='XQ'">
</div> </div>
</div> </div>
<div class="form-item"> <div class="form-item">
<span class="form-label">场所类型</span> <span class="form-label">场所类型</span>
<div class="form-input-wrap"> <div class="form-input-wrap">
<select style="width: 4rem;height:.4rem;font-size: .2rem;" name="" v-model="formData.smallPlaceTypeName"> <select class="selector" name="" v-model="formData.smallPlaceType"
:disabled="flag=='XQ'">
<option <option
v-for="(item, i) in dict4changhsuoType" v-for="(item, i) in dict4changhsuoType"
:key="i" :key="i"
...@@ -165,7 +74,8 @@ ...@@ -165,7 +74,8 @@
<div class="form-item"> <div class="form-item">
<span class="form-label">所属社区</span> <span class="form-label">所属社区</span>
<div class="form-input-wrap"> <div class="form-input-wrap">
<select style=" width: 4rem;height:.4rem;font-size: .2rem;" v-model="formData.community"> <select class="selector" v-model="formData.community"
:disabled="flag=='XQ'">
<option <option
v-for="(item, i) in dict4changhsuoType" v-for="(item, i) in dict4changhsuoType"
:key="i" :key="i"
...@@ -179,21 +89,22 @@ ...@@ -179,21 +89,22 @@
<div class="form-item"> <div class="form-item">
<span class="form-label">网格员</span> <span class="form-label">网格员</span>
<div class="form-input-wrap"> <div class="form-input-wrap">
<input type="text" v-model="formData.gridMemberName" class="form-input" placeholder="" <input type="text" v-model="formData.gridMemberName" class="form-input" :disabled="flag=='XQ'"
> >
</div> </div>
</div> </div>
<div class="form-item"> <div class="form-item">
<span class="form-label">联系方式</span> <span class="form-label">联系方式</span>
<div class="form-input-wrap"> <div class="form-input-wrap">
<input type="text" v-model="formData.gridMemberPhone" class="form-input" placeholder="" <input type="text" v-model="formData.gridMemberPhone" class="form-input" :disabled="flag=='XQ'"
> >
</div> </div>
</div> </div>
<div class="form-item"> <div class="form-item">
<span class="form-label">行业类型</span> <span class="form-label">行业类型</span>
<div class="form-input-wrap"> <div class="form-input-wrap">
<select style=" width: 4rem;height:.4rem;font-size: .2rem;" v-model="formData.community"> <select class="selector" v-model="formData.community"
:disabled="flag=='XQ'">
<option <option
v-for="(item, i) in formData.industryType" v-for="(item, i) in formData.industryType"
:key="i" :key="i"
...@@ -215,7 +126,7 @@ ...@@ -215,7 +126,7 @@
:value="item.dictValue" :value="item.dictValue"
></option> ></option>
</select> --> </select> -->
<input type="text" v-model="formData.industryType" class="form-input" placeholder=""> <input type="text" v-model="formData.industryType" class="form-input" :disabled="flag=='XQ'">
</div> </div>
</div> </div>
<div> <div>
...@@ -249,8 +160,8 @@ ...@@ -249,8 +160,8 @@
:after-read="handleFileUpload" class="uploader-wrapper" /> :after-read="handleFileUpload" class="uploader-wrapper" />
</div> </div>
</div> </div>
<button class="save-btn" style="margin-left: 50%; transform: translateX(-50%);" @click="save" <button v-if="flag=='XG'" class="save-btn" style="margin-left: 50%; transform: translateX(-50%);" @click="save"
v-if="formData.qrCodeUrl">保存</button> >保存</button>
<div> <div>
<h5 class="imager-item-title" style="border: none;"> <h5 class="imager-item-title" style="border: none;">
<span>安全二维码</span> <span>安全二维码</span>
...@@ -260,6 +171,8 @@ ...@@ -260,6 +171,8 @@
<img :src="formData.qrCodeUrl" style="margin-left: 50%; transform: translateX(-50%);" /> <img :src="formData.qrCodeUrl" style="margin-left: 50%; transform: translateX(-50%);" />
</div> </div>
</div> </div>
<button v-if="userType=='shop'" class="save-btn" style="margin-left: 50%; transform: translateX(-50%);" @click="save"
>保存二维码</button>
</div> </div>
<!-- form结束 --> <!-- form结束 -->
...@@ -268,14 +181,14 @@ ...@@ -268,14 +181,14 @@
<div class="form-item"> <div class="form-item">
<span class="form-label">建筑面积(㎡)</span> <span class="form-label">建筑面积(㎡)</span>
<div class="form-input-wrap"> <div class="form-input-wrap">
<input type="text" v-model="formData.area" class="form-input" placeholder=""> <input type="text" v-model="formData.area" class="form-input" :disabled="flag=='XQ'">
</div> </div>
</div> </div>
<div class="form-item"> <div class="form-item">
<span class="form-label">建筑结构</span> <span class="form-label">建筑结构</span>
<div class="form-input-wrap"> <div class="form-input-wrap">
<input type="text" v-model="formData.buildingStructure" class="form-input" placeholder="" <input type="text" v-model="formData.buildingStructure" class="form-input" :disabled="flag=='XQ'"
> >
</div> </div>
</div> </div>
...@@ -284,7 +197,7 @@ ...@@ -284,7 +197,7 @@
<span class="form-label">产权人</span> <span class="form-label">产权人</span>
<div class="form-input-wrap"> <div class="form-input-wrap">
<input type="text" v-model="formData.owner" class="form-input" <input type="text" v-model="formData.owner" class="form-input"
placeholder=""> :disabled="flag=='XQ'">
</div> </div>
</div> </div>
...@@ -292,7 +205,7 @@ ...@@ -292,7 +205,7 @@
<span class="form-label">联系方式</span> <span class="form-label">联系方式</span>
<div class="form-input-wrap"> <div class="form-input-wrap">
<input type="text" v-model="formData.ownerPhone" v-model="formData.merchantPhone" <input type="text" v-model="formData.ownerPhone" v-model="formData.merchantPhone"
class="form-input" placeholder=""> class="form-input" :disabled="flag=='XQ'">
</div> </div>
</div> </div>
...@@ -300,14 +213,14 @@ ...@@ -300,14 +213,14 @@
<span class="form-label">经营人</span> <span class="form-label">经营人</span>
<div class="form-input-wrap"> <div class="form-input-wrap">
<input type="text" v-model="formData.operator" v-model="formData.merchantPhone" <input type="text" v-model="formData.operator" v-model="formData.merchantPhone"
class="form-input" placeholder=""> class="form-input" :disabled="flag=='XQ'">
</div> </div>
</div> </div>
<!-- 新增字段 --> <!-- 新增字段 -->
<div class="form-item"> <div class="form-item">
<span class="form-label">联系方式</span> <span class="form-label">联系方式</span>
<div class="form-input-wrap"> <div class="form-input-wrap">
<input type="text" v-model="formData.operatorPhone" class="form-input" placeholder="" <input type="text" v-model="formData.operatorPhone" class="form-input" :disabled="flag=='XQ'"
> >
</div> </div>
</div> </div>
...@@ -315,7 +228,8 @@ ...@@ -315,7 +228,8 @@
<div class="form-item"> <div class="form-item">
<span class="form-label">房屋类型</span> <span class="form-label">房屋类型</span>
<div class="form-input-wrap"> <div class="form-input-wrap">
<select style=" width: 4rem;height:.4rem;font-size: .2rem;" v-model="formData.houseType"> <select class="selector" v-model="formData.houseType"
:disabled="flag=='XQ'">
<option <option
v-for="(item, i) in dict4changhsuoType" v-for="(item, i) in dict4changhsuoType"
:key="i" :key="i"
...@@ -328,25 +242,25 @@ ...@@ -328,25 +242,25 @@
<div class="form-item"> <div class="form-item">
<span class="form-label">房屋用途</span> <span class="form-label">房屋用途</span>
<div class="form-input-wrap"> <div class="form-input-wrap">
<input type="text" v-model="formData.houseUsage" class="form-input" placeholder="" <input type="text" v-model="formData.houseUsage" class="form-input" :disabled="flag=='XQ'"
> >
</div> </div>
</div> </div>
<div class="form-item"> <div class="form-item">
<span class="form-label">房东姓名</span> <span class="form-label">房东姓名</span>
<div class="form-input-wrap"> <div class="form-input-wrap">
<input type="text" v-model="formData.landlordName" class="form-input" placeholder="" <input type="text" v-model="formData.landlordName" class="form-input" :disabled="flag=='XQ'"
> >
</div> </div>
</div> </div>
<div class="form-item"> <div class="form-item">
<span class="form-label">联系方式</span> <span class="form-label">联系方式</span>
<div class="form-input-wrap"> <div class="form-input-wrap">
<input type="text" v-model="formData.landlordContact" class="form-input" placeholder="" <input type="text" v-model="formData.landlordContact" class="form-input" :disabled="flag=='XQ'"
> >
</div> </div>
</div> </div>
<button class="save-btn" style="margin-left: 50%; transform: translateX(-50%);" @click="save" <button v-if="flag=='XG'" class="save-btn" style="margin-left: 50%; transform: translateX(-50%);" @click="save"
>保存</button> >保存</button>
</div> </div>
<!-- form结束 --> <!-- form结束 -->
......
src/_shanghu_detail-edit.js
View file @ d9a06b02
...@@ -34,7 +34,7 @@ window.addEventListener('load', function () { ...@@ -34,7 +34,7 @@ window.addEventListener('load', function () {
remark: '', remark: '',
deptId: '', deptId: '',
merchantId: 0, merchantId: 0,
smallPlaceType: '', smallPlaceType: '1',
smallPlaceTypeName: '', smallPlaceTypeName: '',
principal: '', principal: '',
phone: '', phone: '',
...@@ -182,6 +182,9 @@ window.addEventListener('load', function () { ...@@ -182,6 +182,9 @@ window.addEventListener('load', function () {
}, 0); }, 0);
var result = JSON.parse(res) var result = JSON.parse(res)
this.formData = result.data this.formData = result.data
// setTimeout(()=>{
// this.formData.smallPlaceTypeName = "0"
// },1000)
// this.formData = {} // 表单赋值 // this.formData = {} // 表单赋值
// 这里添加跳转逻辑 // 这里添加跳转逻辑
......
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