Browse Source

对接我的诉求 诉求详情接口

Jing-Jiu 4 years ago
parent
commit
a9bfe93614
6 changed files with 286 additions and 229 deletions
  1. 1 1
      pages.json
  2. 15 17
      pages/appeal/appealCard.vue
  3. 92 56
      pages/appeal/appeal_detail.vue
  4. 2 2
      pages/appeal/index.vue
  5. 3 2
      pages/appeal/myAppeal.vue
  6. 173 151
      pages/appeal/putAppeal.vue

+ 1 - 1
pages.json

@@ -34,7 +34,7 @@
 		{
 			"path": "pages/appeal/index",
 			"style": {
-				"navigationBarTitleText": "提建议",
+				"navigationBarTitleText": "提诉求",
 				"navigationBarBackgroundColor": "#02A7F0",
 				"navigationBarTextStyle": "white"
 			}

+ 15 - 17
pages/appeal/appealCard.vue

@@ -1,19 +1,17 @@
 <template>
-  <div class="otherAppeal">
+  <div class="otherAppeal" >
     <div class="title">
       {{ otherAppeal.title }}
     </div>
-    <img
-      src="/static/appeal/waited.svg"
-      class="state"
-      v-if="otherAppeal.state === 1"
-    />
-    <img
-      src="/static/appeal/waiting.svg"
-      class="state"
-      v-if="otherAppeal.state === 0"
-    />
-    <div class="details" v-if="otherAppeal.state === 1">
+    <div v-if="!isOther">
+      <img
+        src="/static/appeal/waited.svg"
+        class="state"
+        v-if="otherAppeal.process === 2"
+      />
+      <img src="/static/appeal/waiting.svg" class="state" v-else />
+    </div>
+    <div class="details" v-if="otherAppeal.process === '2'">
       <img src="/static/appeal/avator.png" class="icon" />
       <p class="msg">
         <span class="name">{{ otherAppeal.department_name }}</span
@@ -21,24 +19,24 @@
         <span class="msg_body">{{ otherAppeal.reply }}</span>
       </p>
     </div>
-    <div class="details" v-else-if="otherAppeal.state === 0">
+    <div class="details" v-else>
       <p class="msg">
-        <span class="msg_body_waiting">{{ otherAppeal.reply }}</span>
+        <span class="msg_body_waiting">正在处理中……</span>
       </p>
     </div>
-    <div class="details" v-else>
+    <!-- <div class="details" v-else>
       <img src="/static/appeal/avator.png" class="icon" />
       <p class="msg">
         <span class="name">{{ otherAppeal.department_name }}</span
         >:
         <span class="msg_body">{{ otherAppeal.reply }}</span>
       </p>
-    </div>
+    </div> -->
   </div>
 </template>
 <script>
 export default {
-  props: ["otherAppeal"],
+  props: ["otherAppeal", "isOther"],
 };
 </script>
 <style lang="scss" scoped>

+ 92 - 56
pages/appeal/appeal_detail.vue

@@ -4,109 +4,137 @@
       <div class="msg_content">
         <div class="title">诉求内容:</div>
         <div class="msg">
-          5月13日晚在周公大道周陵中心幼儿团北侧200米(A区5排第二家)酒店订房间,夜间拉土车作业声音很大,建议有关部门可以将拉土车运营时间调整一下。或者为拉土车规划路线,避免在居民区及酒店宾馆临近路段行驶。
+          {{ info.content }}
+        </div>
+        <div class="attach_list">
+          <img
+            :src="'https://kiq.xazhima.com' + attach.url" @click="showLarge('https://kiq.xazhima.com' + attach.url)" v-for="(attach, idx) in info.attach_list"
+            :key="idx"/>
         </div>
       </div>
       <div class="info">
         <div class="flex">
           <div class="info_content">
-            <span>咨询人:</span><span class="name">{{ info.name }}</span>
+            <span>咨询人:</span
+            ><span class="name">{{ info.contact_name }}</span>
           </div>
           <div class="info_content">
-            <span>电话:</span><span class="phone">{{ info.phone }}</span>
+            <span>电话:</span
+            ><span class="phone">{{ info.contact_phone }}</span>
           </div>
         </div>
         <div class="info_content">
-          <span>提交时间:</span><span class="time">{{ info.time }}</span>
+          <span>提交时间:</span
+          ><span class="time">{{ info.addtime }}</span>
         </div>
       </div>
     </div>
     <div class="one"></div>
     <div class="appealState">
-      <div class="msg_content" v-if="info.status == 0">
+      <div class="msg_content" v-if="info.process !== '2'">
         <div class="title">处理进度:</div>
         <div class="msg_state">
-            {{ info.states }}
+          <span v-if="info.process === '0'"> 待分配 </span>
+          <span v-if="info.process === '1'"> 待回复 </span>
         </div>
       </div>
-      <div class="msg_content" v-if="info.status == 1">
+      <div class="msg_content" v-if="info.process === '2'">
         <div class="title">回复内容:</div>
         <div class="msg_res">
-            <span class="red">{{info.state.name}}:</span><span>{{info.state.msg}}</span>
+          <span class="red">{{ info.reply }}:</span
+          ><span>{{ info.reply }}</span>
         </div>
       </div>
     </div>
   </div>
 </template>
 <script>
-import md5 from "@/common/md5.js";	
+import md5 from "@/common/md5.js";
 export default {
   data() {
     return {
-      isLoad:false,
+      isLoad: false,
       info: {
         name: "樊**",
         phone: "153753****",
         time: "2021-05-14  09:32:20",
-        state:{
-          msg:'尊敬的市民您好!收到您的留言,我们十分重视!正平大街开展拉土作业的车辆为西安(咸阳)机场三期扩建工程建设项目运输。您的建议我们会与有关部门沟通协商,尽量确保市民不会在夜间被工程噪音影响。',
-          name:'市场服务与监督管理局'
+        state: {
+          msg: "尊敬的市民您好!收到您的留言,我们十分重视!正平大街开展拉土作业的车辆为西安(咸阳)机场三期扩建工程建设项目运输。您的建议我们会与有关部门沟通协商,尽量确保市民不会在夜间被工程噪音影响。",
+          name: "市场服务与监督管理局",
         },
-        status:null,
+        status: null,
         states: "正在处理中……",
       },
     };
   },
   onLoad: function (e) {
-    this.$set(this.info,'status',e.id)
-    this.isLoad = true
-	this.pageDetail(e.id)
+    this.$set(this.info, "status", e.id);
+    this.isLoad = true;
+    this.pageDetail(e.id);
+  },
+  methods: {
+    pageDetail(infoId) {
+      let md5Sign = md5(
+        "method=" +
+          "consult" +
+          "&timestamp=" +
+          getApp().globalData.globalTimestamp +
+          "&secret=" +
+          getApp().globalData.secret
+      );
+      let url =
+        getApp().globalData.shareUrl +
+        "api/api.php" +
+        "?method=consult&source=consult&action=info_by_id&timestamp=" +
+        getApp().globalData.globalTimestamp +
+        "&sign=" +
+        md5Sign;
+      uni.request({
+        url: url,
+        method: "POST",
+        header: {
+          "content-type": "application/x-www-form-urlencoded",
+        },
+        data: {
+          openId: getApp().globalData.open_id,
+          id: infoId,
+        },
+        success: (res) => {
+          if (res.data.code === 200) {
+            let data = res.data.data
+            let time = this.$options.filters["globalTime"](data.addtime);
+            let timeSecond = this.$options.filters["globalTimeSecond"](
+              data.addtime
+            );
+            data.addtime = time + " " + timeSecond;
+            this.info = data;
+          }
+        },
+        fail: () => {
+          console.log("连接失败");
+        },
+      });
+    },
+    showLarge(src) {
+      uni.previewImage({
+        urls: [src],
+        longPressActions: {
+          itemList: ["发送给朋友", "保存图片"],
+          success: function (data) {},
+          fail: function (err) {
+            console.log(err.errMsg);
+          },
+        },
+      });
+    },
   },
-  methods:{
-	  pageDetail(infoId){
-		  let md5Sign = md5(
-		    "method=" +
-		      "consult" +
-		      "&timestamp=" +
-		      getApp().globalData.globalTimestamp +
-		      "&secret=" +
-		      getApp().globalData.secret
-		  );
-		  let url =
-		    getApp().globalData.shareUrl +
-		    "api/api.php" +
-		    "?method=consult&source=consult&action=info_by_id&timestamp=" +
-		    getApp().globalData.globalTimestamp +
-		    "&sign=" +
-		    md5Sign;
-		  uni.request({
-		    url: url,
-		    method: "POST",
-		    header: {
-		      "content-type": "application/x-www-form-urlencoded",
-		    },
-		    data: {
-				openId:getApp().globalData.open_id,
-				id:infoId
-		    },
-		    success: (res) => {
-		  	  console.log(res)
-		      if (res.data.code === 200) {
-		  	}
-		    },
-		    fail: () => {
-		      console.log("连接失败");
-		    },
-		  });
-	  }
-  }
 };
 </script>
 <style lang="scss" scoped>
 .flex {
   display: flex;
 }
-.red{
+.red {
   color: red;
 }
 .title {
@@ -153,6 +181,14 @@ export default {
         letter-spacing: 2rpx;
         font-size: 25rpx;
       }
+      .attach_list {
+        display: flex;
+        justify-content: space-around;
+        img {
+          width: 200rpx;
+          height: 200rpx;
+        }
+      }
     }
   }
   .appealState {

+ 2 - 2
pages/appeal/index.vue

@@ -27,7 +27,7 @@
         :key="index"
         @tap="toDetail(otherAppeal.id)"
       >
-        <appealCard :otherAppeal="otherAppeal"></appealCard>
+        <appealCard :otherAppeal="otherAppeal" :isOther='true'></appealCard>
       </div>
     </div>
   </view>
@@ -91,9 +91,9 @@ export default {
 		  data: {
 		  },
 		  success: (res) => {
-			  console.log(res)
 		    if (res.data.code === 200) {
 				this.otherAppealList = res.data.data.list
+        console.log(res.data.data.list[0]);
 			}
 		  },
 		  fail: () => {

+ 3 - 2
pages/appeal/myAppeal.vue

@@ -3,7 +3,7 @@
     <div v-for="(otherAppeal, index) in otherAppealList" :key="index">
       <appealCard
         :otherAppeal="otherAppeal"
-        @tap="toDetail(otherAppeal.id)"
+        @tap="toDetail(otherAppeal.id)" :isOther='false'
       ></appealCard>
     </div>
   </div>
@@ -69,8 +69,9 @@ export default {
 				openId:getApp().globalData.open_id,
 			},
 			success: (res) => {
-			  console.log(res)
 			  if (res.data.code === 200) {
+          this.otherAppealList = res.data.data.list
+          console.log(res.data.data.list);
 			}
 			},
 			fail: () => {

+ 173 - 151
pages/appeal/putAppeal.vue

@@ -11,15 +11,29 @@
     <div class="update_photo">
       <div class="title">选择图片:</div>
       <div class="update_container card upload-parent-box">
-        <div class="update_button display-flex" >
+        <div class="update_button display-flex">
           <div class="display-flex upload-box" @click="getImage('album')">
             <img src="/static/appeal/photo.png" />
-			<div class="txt">上传</div>
+            <div class="txt">上传</div>
+          </div>
+          <div
+            class="display-flex upload-box-photo"
+            v-for="(item, index) in uploadList"
+            :key="index"
+          >
+            <image
+              :src="item"
+              mode="aspectFit"
+              style="width: 100%; height: 100%"
+              @click="showLarge(item)"
+            />
+            <image
+              src="../../static/del.png"
+              class="del-icon"
+              mode="aspectFit"
+              @click="delPhoto(index)"
+            ></image>
           </div>
-		  <div class="display-flex upload-box-photo" v-for="(item,index) in uploadList" :key="index">
-		    <image :src="item" mode="aspectFit" style="width: 100%;height: 100%;" @click="showLarge(item)"/>
-			<image src="../../static/del.png" class="del-icon" mode="aspectFit" @click="delPhoto(index)"></image>
-		  </div>
         </div>
       </div>
     </div>
@@ -30,7 +44,12 @@
       </div>
       <div class="tel info_msg">
         <label>联系方式:</label>
-        <input type="text" class="card ipt" v-model="question.contact_phone" disabled="true" />
+        <input
+          type="text"
+          class="card ipt"
+          v-model="question.contact_phone"
+          disabled="true"
+        />
       </div>
     </div>
     <!-- <button open-type="getPhoneNumber" @getphonenumber="getPhoneNumber">
@@ -46,103 +65,103 @@ export default {
   data() {
     return {
       msg: "提出诉求",
-	  uploadList:[],
-	  imgIdList:[],
+      uploadList: [],
+      imgIdList: [],
       question: {
-          content: "",
-		  contact_name: "",
-		  contact_phone:getApp().globalData.user_phone,
+        content: "",
+        contact_name: "",
+        contact_phone: getApp().globalData.user_phone,
       },
     };
   },
   methods: {
-	  getImage(type){
-	  	let that = this;
-		if(that.uploadList.length >= 3){
-			uni.showToast({
-				title:'最多上传3张图片',
-				icon:'none',
-				duration:2500
-			})
-			return
-		}
-	  	uni.chooseImage({
-	  		sourceType:[type],
-			count:3 - that.uploadList.length,
-	  		sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图,默认二者都有
-	  		success: (res)=>{
-	  			for(let i=0;i<res.tempFilePaths.length;i++){
-					that.uploadList.push(res.tempFilePaths[i]) 
-					that.uploadFileRequest(res.tempFilePaths[i])
-	  				// uni.getImageInfo({
-	  				// 	src: res.tempFilePaths[i],
-	  				// 	success: (image)=>{
-	  				// 		let msg = {textValue:res.tempFilePaths[i]};
-	  				// 		console.log(msg)
-	  				// 	    //that.uploadFileRequest(msg,4)
-	  				// 	}
-	  				// });
-	  			}
-	  		}
-	  	});
-	  },
-	  uploadFileRequest(fileVal){
-		uni.showLoading({
-			title:'上传中',
-			mask:true
-		})  
-	  	let that = this;
-		let md5Sign = md5(
-		  "method=" +
-		    "upload" +
-		    "&timestamp=" +
-		    getApp().globalData.globalTimestamp +
-		    "&secret=" +
-		    getApp().globalData.secret
-		);
-		let url = getApp().globalData.shareUrl +
-		  "api/api.php" +
-		  "?method=upload&source=consult&timestamp=" +
-		  getApp().globalData.globalTimestamp +
-		  "&sign=" +
-		  md5Sign;
-	  	uni.uploadFile({
-	  		url:url, //需要设置为全局
-	  		filePath:fileVal,
-	  		name:'file',
-	  		formData: {
-	  			file:fileVal,
-	  		},
-	  		success: res => {
-				let tmpres=JSON.parse(res.data);
-				console.log(tmpres)
-				uni.hideLoading()
-				that.imgIdList.push(tmpres.data.id)
-	  		},
-	  		fail:res=>{
-	  			console.log("上传请求失败");
-	  			console.log(res);
-	  		}
-	  	});
-	  },
-	  delPhoto(idx){
-		  this.uploadList.splice(idx,1);
-		  this.imgIdList.splice(idx,1)
-	  },
-	  showLarge(src){
-		   uni.previewImage({
-			  urls: [src],
-			  longPressActions: {
-				  itemList: ['发送给朋友', '保存图片'],
-				  success: function(data) {
-				  },
-				  fail: function(err) {
-					  console.log(err.errMsg);
-				  }
-			    }
-			  });
-	  },
-    submit(){
+    getImage(type) {
+      let that = this;
+      if (that.uploadList.length >= 3) {
+        uni.showToast({
+          title: "最多上传3张图片",
+          icon: "none",
+          duration: 2500,
+        });
+        return;
+      }
+      uni.chooseImage({
+        sourceType: [type],
+        count: 3 - that.uploadList.length,
+        sizeType: ["original", "compressed"], //可以指定是原图还是压缩图,默认二者都有
+        success: (res) => {
+          for (let i = 0; i < res.tempFilePaths.length; i++) {
+            that.uploadList.push(res.tempFilePaths[i]);
+            that.uploadFileRequest(res.tempFilePaths[i]);
+            // uni.getImageInfo({
+            // 	src: res.tempFilePaths[i],
+            // 	success: (image)=>{
+            // 		let msg = {textValue:res.tempFilePaths[i]};
+            // 		console.log(msg)
+            // 	    //that.uploadFileRequest(msg,4)
+            // 	}
+            // });
+          }
+        },
+      });
+    },
+    uploadFileRequest(fileVal) {
+      uni.showLoading({
+        title: "上传中",
+        mask: true,
+      });
+      let that = this;
+      let md5Sign = md5(
+        "method=" +
+          "upload" +
+          "&timestamp=" +
+          getApp().globalData.globalTimestamp +
+          "&secret=" +
+          getApp().globalData.secret
+      );
+      let url =
+        getApp().globalData.shareUrl +
+        "api/api.php" +
+        "?method=upload&source=consult&timestamp=" +
+        getApp().globalData.globalTimestamp +
+        "&sign=" +
+        md5Sign;
+      uni.uploadFile({
+        url: url, //需要设置为全局
+        filePath: fileVal,
+        name: "file",
+        formData: {
+          file: fileVal,
+        },
+        success: (res) => {
+          let tmpres = JSON.parse(res.data);
+          console.log(tmpres);
+          uni.hideLoading();
+          that.imgIdList.push(tmpres.data.id);
+        },
+        fail: (res) => {
+          console.log("上传请求失败");
+          console.log(res);
+        },
+      });
+    },
+    delPhoto(idx) {
+      this.uploadList.splice(idx, 1);
+      this.imgIdList.splice(idx, 1);
+    },
+    showLarge(src) {
+      uni.previewImage({
+        urls: [src],
+        longPressActions: {
+          itemList: ["发送给朋友", "保存图片"],
+          success: function (data) {},
+          fail: function (err) {
+            console.log(err.errMsg);
+          },
+        },
+      });
+    },
+    submit() {
       let md5Sign = md5(
         "method=" +
           "consult" +
@@ -165,33 +184,35 @@ export default {
           "content-type": "application/x-www-form-urlencoded",
         },
         data: {
-          content:this.question.content,
-          contact_name:this.question.contact_name,
-          contact_phone:this.question.contact_phone,
-		  attach_ids:(this.imgIdList).join(),
-		  openId:getApp().globalData.open_id
+          content: this.question.content,
+          contact_name: this.question.contact_name,
+          contact_phone: this.question.contact_phone,
+          attach_ids: this.imgIdList.join(),
+          openId: getApp().globalData.open_id,
         },
         success: (res) => {
           if (res.data.code === 200) {
-			   uni.showToast({
-			   	title:'诉求提交成功',
-				icon:'none',
-				duration:2500,
-			   })
-			   setTimeout(()=>{uni.navigateBack({})},2500)
-			  }else {
-				uni.showToast({
-					title:res.data.msg,
-					icon:'none',
-					duration:2500,
-				})  
-			  }
+            uni.showToast({
+              title: "诉求提交成功",
+              icon: "none",
+              duration: 2500,
+            });
+            setTimeout(() => {
+              uni.navigateBack({});
+            }, 2500);
+          } else {
+            uni.showToast({
+              title: res.data.msg,
+              icon: "none",
+              duration: 2500,
+            });
+          }
         },
         fail: () => {
           console.log("连接失败");
         },
       });
-    }
+    },
   },
 };
 </script>
@@ -214,49 +235,49 @@ export default {
       padding: 2%;
     }
   }
-  .info{
+  .info {
     margin-top: 5%;
     .info_msg {
-    display: flex;
-    align-items: center;
-    label {
-      display: inline-block;
-      width: 20%;
-      vertical-align: middle;
-    }
-    .ipt {
-      padding: 0 2%;
-      margin: 2% 0;
-      display: inline-block;
-      width: 70%;
-      height: 70rpx;
+      display: flex;
+      align-items: center;
+      label {
+        display: inline-block;
+        width: 20%;
+        vertical-align: middle;
+      }
+      .ipt {
+        padding: 0 2%;
+        margin: 2% 0;
+        display: inline-block;
+        width: 70%;
+        height: 70rpx;
+      }
     }
   }
-  }
   .upload-parent-box {
-	  height: 150rpx;
-	  padding-top: 25rpx;
-	  padding-left: 20rpx;
+    height: 150rpx;
+    padding-top: 25rpx;
+    padding-left: 20rpx;
   }
   .upload-box {
-	  width: 25%;
-	  background-color: #E0E0E0;
-	  height: 110rpx;
-	  border-radius: 10rpx;
-	  padding-top: 15rpx;
+    width: 25%;
+    background-color: #e0e0e0;
+    height: 110rpx;
+    border-radius: 10rpx;
+    padding-top: 15rpx;
   }
   .upload-box-photo {
-  	  width: 25%;
-  	  height: 110rpx;
-  	  border-radius: 10rpx;
-  	  padding-top: 15rpx;
-	  position: relative;
+    width: 25%;
+    height: 110rpx;
+    border-radius: 10rpx;
+    padding-top: 15rpx;
+    position: relative;
   }
   .del-icon {
-	  position: absolute;
-	  right: 0;
-	  width: 30rpx;
-	  height: 30rpx;
+    position: absolute;
+    right: 0;
+    width: 30rpx;
+    height: 30rpx;
   }
   img {
     width: 60rpx;
@@ -264,9 +285,10 @@ export default {
   }
   .update_button {
     text-align: center;
-	display: flex;
+    display: flex;
   }
   .submit {
+    font-size: 30rpx;
     color: white;
     width: 75%;
     border-radius: 20rpx;