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

<template>
  <div class="content">
    <div class="explain">
      <div class="title">问题说明：</div>
      <textarea
        v-model="question.explain"
        class="input card"
        placeholder="您反映的内容要体现一下几个重点信息：事情有关的地址，具体事情概述以及您的期望是什么？内容不少于5个字。"
      ></textarea>
    </div>
    <div class="update_photo">
      <div class="title">选择图片：</div>
      <div class="update_container card">
        <div class="update_button">
          <div>
            <img src="/static/appeal/photo.png" />
          </div>
          <div class="txt">上传</div>
        </div>
      </div>
    </div>
    <div class="info">
      <div class="name info_msg">
        <label>联系人：</label>
        <input type="text" class="card ipt" v-model="question.info.name" />
      </div>
      <div class="tel info_msg">
        <label>联系方式：</label>
        <input type="text" class="card ipt" v-model="question.info.tel" />
      </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 WXBizDataCrypt from "../../static/appeal/WXBizDataCrypt";
export default {
  data() {
    return {
      msg: "提出诉求",
      question: {
        explain: "",
        info: {
          name: "",
          tel: "",
        },
      },
    };
  },
  methods: {
    getPhoneNumber(e) {
      console.log(e);
      let pc = new WXBizDataCrypt("wx5bb130cfb50e6b36");
      let data = pc.decryptData(e.detail.encryptedData, e.detail.iv);
      console.log(data);
    },
    getInfo(val) {
      console.log(val);
    },
    submit(){
      console.log(this.question);
    }
  },
};
</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;
    }
  }
  }
  img {
    width: 100rpx;
    height: 100rpx;
  }
  .update_button {
    text-align: center;
  }
  .submit {
    color: white;
    width: 75%;
    border-radius: 20rpx;
    background-color: #02a7f0;
    margin: 0 auto;
    margin-top: 150rpx;
  }
}
</style>