在线投诉

src/components/header-nav/index.vue

@@ -66,4 +66,10 @@
   .van-nav-bar {
     background-color: #ebf3fb;
   }
+  .van-nav-bar::after {
+    border-bottom-width: 0px !important;
+  }
+  .van-overlay {
+    background-color: rgba(0,0,0,.3) !important;
+  }
   </style>

src/views/common/analyse.vue

@@ -347,9 +347,9 @@ onMounted(() => {
 }
 .countbox, .analybox {
   position: relative;
-  margin: 2% 4%;
+  margin: 2% 3%;
   padding: 2% 0 0;
-  width: 92%;
+  width: 94%;
   height: 3rem;
   background: #fff url("../../assets/images/bg_count.jpg") no-repeat right;
   background-size: auto 100%;
@@ -402,7 +402,7 @@ onMounted(() => {
   }
 }
 .chartbox {
-  margin: 2% 5%;
+  margin: 2% 5% 3%;
   width: 90%;
   height: 7rem;
 }

src/views/enterprise/caseFilter.vue

@@ -0,0 +1,261 @@
+<template>
+  <div v-if="visible" class="van-overlay"></div>
+  <div v-if="visible" class="popup">
+    <div class="popup-title">案件查询</div>
+    <!-- 关闭按钮 -->
+    <label class="close-button" @click="closePopup"></label>
+
+    <!-- 弹窗的内容 -->
+    <div class="popup-content">
+<!--      {{ content }}-->
+      <div class="subsearch">
+        <input class="searchbox" placeholder="请输入关键字搜索" name="keyword" id="" onclick="">
+      </div>
+      <div class="subtitle">快捷筛选</div>
+      <div class="quick-item">
+        <span class="seled">1天内</span> <span>7天内</span> <span>14天内</span> <span>30天内</span>
+      </div>
+      <div class="subtitle">执法信息</div>
+      <van-cell-group>
+        <van-field
+            label="执法部门"
+            placeholder="请选择"
+            clickable
+            is-link
+            @click=""
+        />
+        <van-field
+            label="执法人员"
+            placeholder="请选择"
+            clickable
+            is-link
+            @click=""
+        />
+      </van-cell-group>
+
+      <div class="subtitle">自定义时段</div>
+      <van-cell-group>
+        <van-field
+            label="开始时间"
+            placeholder="请选择"
+            clickable
+            is-link
+            @click=""
+        />
+        <van-field
+            label="结束时间"
+            placeholder="请选择"
+            clickable
+            is-link
+            @click=""
+        />
+      </van-cell-group>
+
+    <div class="btnbox">
+      <button class='btn-reset' @click="cancel()">重置</button>
+      <button class='btn-search' @click="saveImage()">搜索</button>
+    </div>
+
+ <div class="search-result">
+      <div class="case-item">
+        <div class="case-title">南山区桃源街道临街商铺履行市容环卫责任落实情况联合检查</div>
+        <div class="case-depart">南山区司法所</div>
+        <div class="case-time">2024-01-28</div>
+      </div>
+      <div class="case-item">
+        <div class="case-title">南山区桃源街道临街商铺履行市容环卫责任落实情况联合检查</div>
+        <div class="case-depart">南山区司法所</div>
+        <div class="case-time">2024-01-28</div>
+      </div>
+      <div class="case-item">
+        <div class="case-title">南山区桃源街道临街商铺履行市容环卫责任落实情况联合检查</div>
+        <div class="case-depart">南山区司法所</div>
+        <div class="case-time">2024-01-28</div>
+      </div>
+    </div>
+
+  </div>
+
+
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    visible: {
+      type: Boolean,
+      default: false
+    },
+    content: {
+      type: String,
+      default: ''
+    }
+  },
+  methods: {
+    closePopup() {
+      this.$emit('close');
+    }
+  }
+}
+</script>
+
+<style scoped>
+.popup {
+  position: fixed;
+  z-index: 999;
+  top: 3rem;
+  left: 0;
+  width: 100%;
+  height: calc(100% - 3rem);;
+  background: #fff;
+  overflow: hidden;
+}
+
+.popup-title {
+  margin: 0.3rem 0 0;
+  width: 100%;
+  height: 1rem;
+  border-bottom: 1px solid #f3f4f5;
+  text-align: center;
+  font-size: 0.42rem;
+  font-weight: 550;
+}
+
+.close-button {
+  position: absolute;
+  top: 0.15rem;
+  right: 0.1rem;
+  width: 0.8rem;
+  height: 0.8rem;
+  background-color: rgba(255, 255, 255, .5);
+  border: 0.05rem solid rgba(255, 255, 255, .7);
+  border-radius: 50%;
+  transform: rotate(45deg);
+}
+
+.close-button:before,
+.close-button:after {
+  content: '';
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  background: #333;
+  border-radius: 50%;
+  transform: translate(-50%, -50%);
+  height: 0.4rem;
+  width: 0.02rem;
+}
+
+.close-button:after {
+  height: 0.02rem;
+  width: 0.4rem;
+}
+
+.popup-content {
+  margin: 0.25rem 3% 0;
+  padding-bottom: 3rem;
+  width: 94%;
+  height: calc(100% - 1.6rem);
+  overflow-y: auto;
+  font-size: 0.38rem;
+}
+
+.subsearch {
+  width: 100%;
+  height: 1.25rem;
+}
+
+.searchbox {
+  margin: 2% 3%;
+  padding: 0.15rem 0.3rem 0.1rem 1.15rem;
+  width: 94%;
+  height: 1.0rem;
+  background: #f6f7fe url(../../assets/images/icon_sou.png) no-repeat;
+  background-position: left 0.5rem center;
+  background-size: auto 50%;
+  box-sizing: border-box;
+  border: 1px solid rgba(0,0,0,.05);
+  border-radius: 0.5rem;
+  color: #999999;
+  outline: none;
+}
+
+.subtitle {
+  margin: 0.5rem 0 0.25rem;
+  font-size: 0.4rem;
+  font-weight: 600;
+}
+
+.quick-item {
+  display: flex;
+}
+
+.quick-item span {
+  display: inline-block;
+  margin: 1% 0 2% 3.5%;
+  padding: 2% 3.75%;
+  background: #f2f3f4;
+  border: 0;
+  border-radius: 8px;
+  color: #4c4c4c;
+}
+
+.quick-item span.seled {
+  background: #e9f2fb;
+  color: #1367fe;
+}
+
+.btnbox {
+  display: flex;
+  justify-content: center;
+  margin: 5% 2%;
+  width: 96%;
+  height: 1.0rem;
+}
+
+.btn-reset,
+.btn-search {
+  display: inline-block;
+  margin: 0 2%;
+  padding: 0;
+  width: 60%;
+  color: #fff;
+  font-size: 0.35rem;
+  border-radius: 1rem;
+  background: #1367fe;
+  border: 1px solid #1367fe;
+  text-align: center;
+}
+
+.btn-reset {
+  width: 35%;
+  background-color: #fff;
+  border-color: rgba(19, 103, 254, .7);
+  color: #1367fe;
+}
+
+.search-result {
+  width: 100%;
+  padding-bottom: 2rem;
+}
+
+.case-item {
+  margin: 3% 2%;
+  padding: 2% 0;
+  width: 96%;
+  font-size: 0.3rem;
+  border-bottom: 1px solid #f4f4f4;
+  color: #999;
+  line-height: 2;
+}
+
+.case-title {
+  margin: 2% 0;
+  font-size: 0.38rem;
+  color: #333;
+  line-height: 1.25;
+}
+
+
+</style>

src/views/enterprise/complaint.vue

@@ -18,11 +18,17 @@
           label="投诉案件"
           placeholder="必填 请选择"
           readonly
+          clickable
+          is-link
+          @click="showPopup"
         />
+        <Popup :visible="popupVisible" :content="popupContent" @close="closePopup" />
+
         <van-field
           v-model="submitData.enforceTypeText"
+          required
           label="投诉类型"
-          placeholder="请选择"
+          placeholder="必填 请选择"
           readonly
           clickable
           is-link
@@ -36,19 +42,22 @@
           @confirm="onConfirm"
         />
       </van-popup>
+        <van-divider class="divdsty" />
         <van-field
           v-model="submitData.problemDescription"
-          rows="2"
+          required
+          rows="5"
           autosize
           label="问题描述"
           type="textarea"
-          maxlength="200"
+          maxlength="300"
           placeholder="请输入描述"
           show-word-limit
         />
+        <van-divider class="divdsty" />
         <div class="file-upload">
           <div class="file-upload-center">
-            文件上传 <span>(不多于9张)</span>
+            <label>上传附件</label> <span>(不多于9张)</span>
           </div>
           <van-uploader v-model="submitData.fileListObj"  class="file" :after-read="uploadFiles" multiple :max-size="500 * 1024" @oversize="onOversize" :before-delete="deleteFile">
             <template #preview-cover="{ file }">
@@ -57,21 +66,23 @@
           </van-uploader>
 
         </div>
-        <van-divider :style="{ color: '#1989fa', borderColor: '#1989fa', padding: '0 16px' }"/>
+        <van-divider class="divdsty" />
     
       <van-field
           v-model="submitData.linkman"
+          required
           label="联系人"
-          placeholder="选填 联系人"
+          placeholder="必填 联系人"
         />
         <van-field
           v-model="submitData.linkmanTel"
+          required
           label="联系方式"
-          placeholder="选填 联系方式"
+          placeholder="必填 联系方式"
         />
       </van-cell-group>
       <van-action-bar>
-        <van-action-bar-button color="#be99ff" text="保存"  @click="submit" />
+        <van-action-bar-button color="#1367fe" text="提交"  @click="submit" />
       </van-action-bar>
 		</div>
 	</div>
@@ -219,13 +230,47 @@ onMounted(() => {
 });
 
 </script>
+<script>
+//案件筛选弹窗
+import Popup from './caseFilter.vue';
+
+export default {
+  components: {
+    Popup
+  },
+  data() {
+    return {
+      popupVisible: false,
+      popupContent: ''
+    }
+  },
+  methods: {
+    showPopup() {
+      this.popupVisible = true;
+    },
+    closePopup() {
+      this.popupVisible = false;
+    }
+  }
+}
+</script>
+
 <style lang="less" scoped>
 .address_edit {
 	display: flex;
 	flex-direction: column;
 	height: 100%;
 	overflow: hidden;
-	background-color: #f4f4f4;
+  background-color: #ebf3fb;
+}
+.warp_body {
+  margin: 0 3%;
+  padding-bottom: 3rem;
+  width: 94%;
+  height: 100%;
+  //border-radius: 0.25rem;
+  background-image: linear-gradient(to bottom, #ebf3fb, #fff);
+  overflow-y: auto;
 }
 /* vant4的 Toast 和 Popup 样式冲突,会导致 Toast 变成白底 */
 .van-popup.van-toast{
@@ -239,8 +284,15 @@ onMounted(() => {
 .van-popup.van-toast .van-toast__icon{
     font-size: var(--van-toast-icon-size) !important;
 }
+.divdsty {
+  margin: auto;
+  width: 100%;
+  height: 0.25rem;
+  background-color: #f4f4f4;
+  border: 0;
+}
 .file-upload{
-    height: 165px;
+    min-height: 4.5rem;
     position: relative;
 }
 .file-upload-center{
@@ -248,9 +300,9 @@ onMounted(() => {
     height: 20%;
     top: 10%;
     left: 2%;
-    font-size: 18px;
+    font-size: 0.38rem;
     span {
-      font-size: 13px;
+      font-size: 0.32rem;
       color: rgb(221, 229, 227);
     }
 }
@@ -267,7 +319,7 @@ onMounted(() => {
     width: 100%;
     padding: 4px;
     color: #fff;
-    font-size: 12px;
+    font-size: 0.32rem;
     text-align: center;
     background: rgba(0, 0, 0, 0.3);
   }