ohplay_h5/src/pages/help/index.vue

<template>
  <view class="app-container">
    <h3>问题类型</h3>
    <view class="radio-list">
      <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: -3px;" />
          <span>{{ item.name }}</span>
        </label>
      </radio-group>
    </view>
    <view class="textarea">
      <textarea v-model="form.content" maxlength="200" placeholder="请描述您遇到的问题或意见" />
    </view>
    <view class="upload">
      <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 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: [],
      // 高度
      height: 0
    }
  },
  onLoad() {
    document.querySelector('body').setAttribute('style', 'background-color:#FFF;')
    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>
uni-page-body {
  background-color: #FFF;
}

.app-container {
  height: 100%;
  min-height: 724px;
  background-color: #FFF;
  color: #353535;
  position: relative;
}

.radio-list {
  margin-top: 20px;

  uni-radio-group {
    display: flex;
    flex-wrap: wrap;
  }

  label {
    width: 25%;
    font-size: 24rpx;
    display: flex;
    align-items: flex-start;
    margin-bottom: 25px;
  }

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

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

.upload {
  margin-top: 24px;
  display: flex;
  flex-wrap: wrap;
  align-content: flex-start;
  height: calc(160rpx * 3 + 24rpx * 3);

  .img-list {
    position: relative;
  }

  img {
    width: 160rpx;
    height: 160rpx;
    margin: 0 12px 12px 0;
    border-radius: 16rpx;
  }

  .close {
    width: 40rpx;
    height: 40rpx;
    line-height: 40rpx;
    text-align: center;
    border-radius: 50%;
    position: absolute;
    right: 28rpx;
    top: 4rpx;
    background-color: #888;
    z-index: 99;
  }

  button {
    width: 160rpx;
    height: 160rpx;
    line-height: 160rpx;
    margin: 0;
    background-color: #F0F7EE;
    border-radius: 16rpx;
  }
}

.submit {
  width: 100%;
  position: absolute;
  bottom: 20px;
  left: 0;

  button {
    width: 400rpx;
    height: 80rpx;
    line-height: 80rpx;
  }

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