ohplay_h5/src/pages/help/index.vue

<template>
  <view class="app-container">
    <view class="list">
      <view class="item margin-bottom">
        <h3>问题类型</h3>
      </view>
      <view class="item">
        <radio-group @change="radioChange">
          <label v-for="item in typeOptions" :key="item.id">
            <radio :value="item.id.toString()" color="#A4D099" :checked="item.id == active"
              style="transform: scale(0.7); margin: -7rpx;" />
            <span>{{ item.name }}</span>
          </label>
        </radio-group>
      </view>
      <view class="item margin-bottom">
        <textarea v-model="form.content" maxlength="200" placeholder="请描述您遇到的问题或意见" />
      </view>
      <view class="item upload margin-bottom">
        <view class="img-list" v-for="(item, index) in imageFiles" :key="index">
          <uni-icons class="close" type="closeempty" color="#FFF" size="12" @click="getDelete(index)" />
          <img :src="item" />
        </view>
        <button v-if="imageFiles.length < 9" @click="upload">
          <uni-icons type="plusempty" color="#A4D099" size="36" />
        </button>
      </view>
    </view>
    <view class="submit">
      <button type="submit" circle @click="getSubmit">提交</button>
      <view class="contact">
        <span>客服微信：miao_friend</span>
        <span>客服电话：4008508199</span>
      </view>
    </view>
  </view>
</template>

<script>
import { list, submit } from '@/api/help.js'
export default {
  data() {
    const info = getApp().globalData.userInfo
    return {
      // 表单
      form: {
        appVersion: info.version,
        phone: info.phone,
        platformType: info.deviceType,
        systemVersion: info.systemVersion,
        imageFiles: '',
        type: '',
        content: ''
      },
      // 图片列表
      imageFiles: [],
      length: 0,
      // 单选
      active: 0,
      // 反馈类型
      typeOptions: []
    }
  },
  onLoad() {
    this.getList()
  },
  methods: {
    // 反馈类型
    getList() {
      list().then(res => {
        if (res.data.code === 0) {
          this.typeOptions = res.data.data
        }
      })
    },

    // 单选
    radioChange(e) {
      this.active = e.detail.value
      this.form.type = e.detail.value
    },

    // 上传
    upload() {
      selectImageCount.postMessage(this.length)
      selectImage.postMessage('获取相册信息')
      window['receiveImageAddress'] = e => {
        JSON.parse(e).addressList.map(i => {
          this.imageFiles.push(i)
        })
        this.length = this.imageFiles.length
      }
    },

    // 删除按钮
    getDelete(index) {
      this.imageFiles.splice(index, 1)
      this.length = this.imageFiles.length
    },

    // 提交
    getSubmit() {
      if (this.form.type !== '' && this.form.content !== '') {
        this.form.imageFiles = this.imageFiles.join(',')
        submit(this.form).then(res => {
          if (res.data.code === 0) {
            uni.showToast({
              title: '提交成功！'
            })
            this.form.imageFiles = ''
            this.form.type = ''
            this.active = 0
            this.form.content = ''
            this.imageFiles = []
          } else {
            uni.showToast({
              title: res.data.message,
              icon: 'error'
            })
          }
        })
      } else {
        uni.showToast({
          title: '请选择问题类型并且描述您遇到的问题或意见',
          icon: 'none',
          duration: 3000
        })
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.app-container {
  background-color: #FFF;
  color: #353535;
  display: flex;
  flex-flow: column nowrap;
  min-height: 100vh;

  .list {
    flex: 1;

    .item {
      uni-radio-group {
        display: flex;
        flex-wrap: wrap;

        label {
          width: calc(25% - 10px);
          font-size: 24rpx;
          display: flex;
          align-items: flex-start;
          margin: 0 10px 20px 0;
        }

        span {
          word-break: break-all;
        }
      }

      textarea {
        border-radius: 8px;
        height: 240rpx;
        background-color: #FAFAFA;
      }
    }

    .upload {
      display: flex;
      flex-wrap: wrap;
      gap: 12px;

      .img-list {
        display: flex;
        position: relative;

        .close {
          width: 40rpx;
          height: 40rpx;
          line-height: 40rpx;
          border-radius: 50%;
          position: absolute;
          right: 0rpx;
          top: 0rpx;
          background-color: #888;
        }

        img {
          width: 80px;
          height: 80px;
          border-radius: 16rpx;
        }
      }

      button {
        width: 80px;
        height: 80px;
        display: flex;
        align-items: center;
        justify-content: center;
        margin: 0;
        background-color: #F0F7EE;
        border-radius: 16rpx;
      }
    }
  }

  .submit {
    width: 100%;
    margin-top: 100px;

    button {
      width: 400rpx;
      height: 80rpx;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .contact {
      width: 100%;
      font-size: 24rpx;
      color: #999;
      display: flex;
      justify-content: space-around;
      margin-top: 95rpx;
    }
  }
}

.margin-bottom {
  margin-bottom: 20px;
}
</style>