konggang-city-miniprogram/pages/appeal/putAppeal.vue

<template>
  <div class="content">
    <div class="explain">
      <div class="title">问题说明：</div>
      <textarea
        v-model="question.content"
        class="input card"
        placeholder="您反映的内容要体现一下几个重点信息：事情有关的地址，具体事情概述以及您的期望是什么？内容不少于5个字。"
      ></textarea>
    </div>
    <div class="update_photo">
      <div class="title">选择图片：</div>
      <div class="update_container card upload-parent-box">
        <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>
		  <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>
    <div class="info">
      <div class="name info_msg">
        <label>联系人：</label>
        <input type="text" class="card ipt" v-model="question.contact_name" />
      </div>
      <div class="tel info_msg">
        <label>联系方式：</label>
        <input type="text" class="card ipt" v-model="question.contact_phone" disabled="true" />
      </div>
    </div>
    <!-- <button open-type="getPhoneNumber" @getphonenumber="getPhoneNumber">
      获取手机号
    </button>
    <button open-type="getUserInfo" @getuserinfo="getInfo">授权登录</button> -->
    <button class="submit" @tap="submit">提交</button>
  </div>
</template>
<script>
import md5 from "@/common/md5.js";
export default {
  data() {
    return {
      msg: "提出诉求",
	  uploadList:[],
	  imgIdList:[],
      question: {
          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(){
      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=add&timestamp=" +
        getApp().globalData.globalTimestamp +
        "&sign=" +
        md5Sign;
      uni.request({
        url: url,
        method: "POST",
        header: {
          "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
        },
        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,
				})  
			  }
        },
        fail: () => {
          console.log("连接失败");
        },
      });
    }
  },
};
</script>
<style lang="scss" scoped>
.content {
  font-size: 25rpx;
  font-weight: 200;
  padding: 5%;
  .title {
    font-size: 30rpx;
    margin: 5% 0;
  }
  .card {
    background-color: rgb(248, 247, 247);
    border-radius: 20rpx;
  }
  .explain {
    .input {
      width: 96%;
      padding: 2%;
    }
  }
  .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;
    }
  }
  }
  .upload-parent-box {
	  height: 150rpx;
	  padding-top: 25rpx;
	  padding-left: 20rpx;
  }
  .upload-box {
	  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;
  }
  .del-icon {
	  position: absolute;
	  right: 0;
	  width: 30rpx;
	  height: 30rpx;
  }
  img {
    width: 60rpx;
    height: 60rpx;
  }
  .update_button {
    text-align: center;
	display: flex;
  }
  .submit {
    color: white;
    width: 75%;
    border-radius: 20rpx;
    background-color: #02a7f0;
    margin: 0 auto;
    margin-top: 150rpx;
  }
}
</style>