aluminium-trading-uniapp-240925/pages_order/center/helpFeedback.vue

<template>
  <view class="page">

    <navbar :title="$t('components.helpFeedback')" leftClick @leftClick="$utils.navigateBack"/>

    <view class="frame">
      <!--帮助与反馈-->
      <view class="helpFeedback">
        <view class="title"> {{ $t('components.helpAndFeedback') }} <span style="color: red;">*</span></view>
        <view class="desc">
          <textarea :placeholder="$t('components.pleaseSubmit')"/>
        </view>
      </view>

      <!--问题截图-->
      <view class="problemImg">
        <view class="title">{{ $t('components.screenshot') }} <span style="color: red;">*</span></view>
        <view class="img">
          <uv-upload
              :fileList="fileList"
              :maxCount="5"
              multiple
              width="150rpx"
              height="150rpx"
              @delete="deleteImage"
              @afterRead="afterRead"
              :previewFullImage="true">
          </uv-upload>
        </view>
      </view>

      <!--联系方式-->
      <view class="name_phone">
        <view class="title">{{ $t('components.contactInfo') }} <span style="color: red;">*</span></view>
        <view class="items">
          <view class="item">
            <view>{{ $t('components.contactName') }}</view>
            <view>
              <input :placeholder="$t('components.enterContactName')" clearable></input>
            </view>
          </view>
          <view class="item">
            <view>{{ $t('components.lxPhone') }}</view>
            <view>
              <input :placeholder="$t('components.plePhoneNumber')" clearable></input>
            </view>
          </view>
        </view>
      </view>

      <!--提交反馈-->
      <view class="btns">
        <view @click="submitFeedback" class="btn">
          {{ $t('components.submitFeedback') }}
        </view>
      </view>
    </view>

  </view>
</template>
<script>
import topbar from "@/components/base/topbar.vue";
import tabber from "@/components/base/tabbar.vue";

export default {
  name: "helpFeedback",
  components: {tabber, topbar},
  data() {
    return {
      fileList: [],
      form: {
        "content": "",
        "proofImg": "",
        "userName": "",
        "userPhone": ""
      }
    }
  },
  methods: {

    // 提交反馈
    submitFeedback() {
      this.form.proofImg = this.fileList.join(",")
      this.$api('addSuggest', this.form, res => {
        if (res.code === 200) {
          uni.showToast({
            title: '',
            icon: 'success',
            duration: 2000
          })
          setTimeout(() => {
            uni.navigateBack(-1)
          }, 1000)
        }
      })
    },

    deleteImage(e) {
      this.fileList.splice(e.index, 1)
    },
    afterRead(e) {
      let self = this
      e.file.forEach(file => {
        self.$Oss.ossUpload(file.url).then(url => {
          self.fileList.push({
            url
          })
        })
      })
    },
  },
}
</script>


<style scoped lang="scss">
.page {
  height: 100vh;
  background-color: #f2f5f5;

  .frame {
    padding: 40rpx;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 40rpx;

    .helpFeedback {
      .title {

      }

      .desc {
        margin-top: 20rpx;
        height: 300rpx;
        border-radius: 40rpx;
        overflow: hidden;
        padding: 20rpx;
        font-size: 28rpx;
        background-color: #fff;
      }
    }

    .problemImg {

      .img {
        margin-top: 20rpx;
        height: 150rpx;
        border-radius: 40rpx;
        overflow: hidden;
        padding: 20rpx;
        font-size: 28rpx;
        background-color: #fff;
      }
    }

    .name_phone {

      .title {

      }

      .items {
        margin-top: 20rpx;

        .item {
          display: flex;
          align-items: center;
          background-color: #FFF;
          height: 80rpx;
          padding: 10rpx 0 0 20rpx;
          border-bottom: 1px solid #efefef;

          > view:nth-of-type(1) {
            width: 30%;
            // font-weight: 700;
          }

          > view:nth-of-type(2) {
            width: 70%;
            border-radius: 10rpx;
            overflow: hidden;


            input {
              background-color: #FFF;
              font-size: 28rpx;
              padding: 16rpx 8rpx 16rpx 15rpx;
            }
          }
        }
      }
    }

    .btns {
      width: 100%;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 20rpx;

      .btn {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 500rpx;
        height: 70rpx;
        border-radius: 40rpx;
        color: #FFF;
        font-size: 28rpx;
        margin: 20rpx 10rpx 0 0;
        background: $uni-color;
        //margin-top: 20rpx;
        border-radius: 40rpx;
      }
    }

  }
}
</style>