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" />
          <span>{{ item.name }}</span>
        </label>
      </radio-group>
    </view>
    <view class="textarea">
      <textarea placeholder="请描述您遇到的问题或意见" />
    </view>
    <view class="upload">
      <view class="img-list" v-for="(item, index) in form.imageFiles" :key="index">
        <uni-icons class="close" type="closeempty" color="#FFF" size="12" @click="getDelete(index)" />
        <image :src="item" />
      </view>
      <button v-if="form.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() {
    return {
      // 表单
      form: {},
      // 单选
      active: 0,
      // 反馈类型
      typeOptions: []
    }
  },
  onLoad() {
    this.getList()
    const e = getApp().globalData.userInfo
    this.form = {
      appVersion: e.version,
      phone: e.phone,
      platformType: e.deviceType,
      systemVersion: e.systemVersion,
      imageFiles: [],
      type: '',
      content: ''
    }
  },
  methods: {
    // 反馈类型
    getList() {
      uni.showLoading({
        title: '加载中...',
        mask: true
      })
      list().then(res => {
        if (res.data.code === 0) {
          uni.hideLoading()
          this.typeOptions = res.data.data
        }
      })
    },

    // 单选
    radioChange(e) {
      this.typeOptions.map(i => {
        if (i.id === e.detail.value) {
          this.active = i.id
          this.form.type = i.id
        }
      })
    },

    // 上传
    upload() {
      // let count = 9 - this.form.imageFiles.length
      // uni.chooseImage({
      //   count: count,
      //   sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
      //   sourceType: ['album'], //从相册选择
      //   success: (res) => {
      //     res.tempFilePaths.map(i => {
      //       this.form.imageFiles.push(i)
      //     })
      //   }
      // })
      selectImageCount.postMessage(`${this.form.imageFiles.length}`)
      selectImage.postMessage('获取相册信息')
      window['receiveImageAddress'] = res => {
        JSON.parse(res).addressList.map(i => {
          this.form.imageFiles.push(`blob:${window.location.origin}${i}`)
        })
        console.log(this.form.imageFiles);
      }
    },

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

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

<style lang="scss">
.app-container {
  background-color: #FFFFFF;
  color: #353535;
}

.radio-list {
  ::v-deep uni-radio .uni-radio-input {
    width: 24rpx;
    height: 24rpx;
  }

  label {
    display: inline-block;
    width: 25%;
    font-size: 24rpx;
    margin-top: 40rpx;
  }

  span {
    vertical-align: middle;
  }
}

.textarea {
  margin-top: 48rpx;

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

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

  .img-list {
    position: relative;
  }

  uni-image {
    width: 160rpx;
    height: 160rpx;
    margin: 0 24rpx 24rpx 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 {
  margin-top: 48rpx;

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

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