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 {
    font-size: 30rpx;
    color: white;
    width: 75%;
    border-radius: 20rpx;
    background-color: #02a7f0;
    margin: 0 auto;
    margin-top: 150rpx;
  }
}
</style>