帮助与反馈

src/pages/help/detail.vue

@@ -0,0 +1,112 @@
+<template>
+  <view class='app-container'>
+    <view class="form" v-for="item in tableData" :key="item.opinionId">
+      <view :class="['status', item.status === 1 ? 'status-info' : 'status-success']">
+        {{ status[item.status] }}
+      </view>
+      <view class="question">
+        {{ item.content }}
+      </view>
+      <view v-if="item.status === 3">
+        <h3>
+          回复：
+        </h3>
+        <view class="answer">
+          {{ item.reply }}
+        </view>
+      </view>
+    </view>
+  </view>
+</template>
+
+<script>
+import { detail } from '@/api/help.js'
+export default {
+  data() {
+    return {
+      // 表单
+      form: {
+        pageNum: 1,
+        pageSize: 10
+      },
+      // 总数据
+      total: 0,
+      // 列表
+      tableData: [],
+      // 状态
+      status: {
+        1: '待回复',
+        3: '已回复'
+      }
+    }
+  },
+  beforeCreate() {
+    document.querySelector('body').setAttribute('style', 'background-color:#FAFAFA;')
+  },
+  mounted() {
+    this.getDetail()
+  },
+  methods: {
+    getDetail() {
+      uni.showLoading({
+        mask: true
+      })
+      detail(this.form).then(res => {
+        uni.hideLoading()
+        if (res.data.code === 0) {
+          this.tableData = res.data.data.records
+          this.total = res.data.data.total
+        }
+      })
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.app-container {
+  color: #353535;
+
+  .form {
+    background-color: #FFF;
+    padding: 0 32rpx 32rpx;
+    margin-bottom: 40rpx;
+    border-radius: 16rpx;
+  }
+
+  .status {
+    padding: 8rpx 20rpx;
+    display: inline-block;
+    border-bottom-left-radius: 16rpx;
+    border-bottom-right-radius: 16rpx;
+    font-size: 24rpx;
+    color: #FFF;
+    margin-bottom: 24rpx;
+  }
+
+  .status-info {
+    background-color: #999;
+  }
+
+  .status-success {
+    background: linear-gradient(180deg, #A4D099 0%, #78B06A 100%);
+  }
+
+  .question {
+    font-size: 28rpx;
+  }
+
+  h3 {
+    color: #999;
+    font-size: 24rpx;
+    margin: 16rpx 0;
+  }
+
+  .answer {
+    background-color: #E0E0E0;
+    font-size: 24rpx;
+    padding: 20rpx;
+    border-radius: 16rpx;
+  }
+}
+</style>

src/pages/help/index.vue

@@ -1,22 +1,231 @@
 <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" />
+        <img :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: []
     }
   },
-  created(){
-    window.location.href = 'https://ohplay.radio1964.net/help'
+  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(i)
+        })
+      }
+    },
+
+    // 提交
+    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;
+  }
+
+  img {
+    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;
+  }
+
+  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>