add 意见反馈

xuxueyang

2024-08-26 ed5d47ad987f2a20f33fbd5cc64dbcdb208f5e15

 sub_pages/customer/self/feedback.vue

@@ -13,6 +13,10 @@
               <view class="name">回复内容：{{ item.reply  || '-'}}</view>
               <view class="name">回复时间：{{ item.replyTime || '-' }}</view>
            </view>
            <view class="line-gray"></view>
            <view class="component-buttons">
               <view class="button-1" @click="toDetail(item)">查看详情</view>
            </view>
         </view>
      </view>
      <footer-msg :more="page.total>0&&page.total>page.current*page.size&&list.length>0"></footer-msg>
@@ -25,30 +29,65 @@
      </view>


      <!-- <uni-popup ref="popup" type="bottom">
      <uni-popup ref="popup" type="bottom">
         <view class="component-popup_input_all">
            <view class="text-center m-b-40" style="font-size: 48rpx;font-weight: 600;">填写投诉/反馈内容</view>
            <view v-for="(item,i) in level_columns" :key="i" class="m-t-20">
               <view class="m-t-12 flex value-items">
                  <view class="value-item" @click="()=>{
                  if(each.value!==query.value){
                     query.level = each.value
                     query.levelStr = each.label
                     refreshList()
                     $refs.popup.close()
                  }																																						
               }" :class="[query.level==each.value?'cur':'']" v-for="(each, j) in item" :key="j">
                     {{ each.label || '-' }}


            <view class="close-parent">
               填写投诉/反馈内容
               <uni-icons class="close" type="closeempty" @click="$refs.popup.close()"></uni-icons>
            </view>

            <view class="submit form">
               <view class="form-item" style="height: unset;">
                  <view class="form-item-label require" style="min-width: 120rpx;margin-right: 10rpx;">
                     类型
                  </view>
                  <view class="form-item-value flex value-items">
                     <view class="value-item" @click="()=>{
                           if(submitForm.type!==each.value){
                              submitForm.type = each.value
                           }																																						
                        }" :class="[submitForm.type==each.value?'cur':'']" v-for="(each, j) in type_columns" :key="j">
                        {{ each.label || '-' }}
                     </view>
                  </view>
               </view>

               <view class="form-item">
                  <view class="form-item-label require">
                     内容
                  </view>
                  <view class="form-item-value">
                     <input v-model="submitForm.feedBack" placeholder="填写投诉/反馈内容" class="form-input"></input>
                  </view>
               </view>
               <view class="form-item">
                  <view class="form-item-label require">
                     图片
                  </view>
                  <view class="form-item-value m-l-a m-r-0">
                     <view class="t-red" @click="uploadCheckImage()">上传</view>
                  </view>
               </view>
               <view class="flex p20" v-if="submitForm.pictures&&submitForm.pictures.length>0">
                  <view class="m-t-12 m-r-10 " v-for="(timg,index) of submitForm.pictures" :key="index">
                     <image class="check-img" :src="timg" @click.stop="previewImg(timg)">
                     </image>
                     <view class="t-red text-center" @click.stop="deleteCheckImage(index)">删除</view>
                  </view>
               </view>
            </view>
            <view class="button-space"></view>
            <view>
               <view class="button-green" @click="$refs.popup.close()">关闭
               </view>

            <!-- <view class="line-gray"></view> -->

            <view class="component-buttons m-t-20" style="width: unset;">
               <view class="button-1 m-auto" @click="$refs.popup.close()">关闭</view>
               <view class="button-0 m-auto" @click="submit">提交</view>
            </view>
         </view>
      </uni-popup> -->

      </uni-popup>

   </view>
</template>
@@ -56,7 +95,10 @@
<script>
   export default {
      data() {
         return {}
         return {
            submitForm: {},
            type_columns: [],
         }
      },
      async onPullDownRefresh() {
         await this.refreshList()
@@ -68,36 +110,120 @@
      async onLoad() {
         this.listApi = '/api/feedback/my/feedback/list'
         this.getList()
         this.$http.request('get', '/api/code/value', {
            params: {
               type: 'feedback_type'
            }
         }).then(res => {
            var data = res.data
            this.type_columns = data || []

         })
      },
      methods: {
         async addFeedback() {
            const res = await this.$message.confirm('', {
               editable: true,
               title: '请填写投诉/反馈内容'
         toDetail(item) {
            uni.navigateTo({
               url: `/sub_pages/customer/self/feedback-detail?id=${item.id}`
            })
            if (res.content && res.confirm) {
               // 发送请求
               if (!res.content) {
                  this.$message.showToast('未填写内容')
               } else {
                  this.$message.showLoading()
                  const {
                     code
                  } = await this.$http.request('post', '', {
                     data: {
                        feedBack: res.content
         },
         async deleteCheckImage(index) {
            await this.$message.confirm('确定删除吗')
            this.submitForm.pictures.splice(index, 1)
         },
         uploadCheckImage() {
            let that = this
            uni.chooseImage({
               count: 1, // 最多可以选择的图片张数，默认9
               sizeType: ['compressed'], //original 原图，compressed 压缩图，默认二者都有
               sourceType: ['camera', 'album'], //album 从相册选图，camera 使用相机，默认二者都有。如需直接开相机或直接选相册，请只使用一个选项
               success: function(res) {
                  let errMsg = res.errMsg
                  let tempFiles = res.tempFiles
                  if (errMsg === 'chooseImage:ok') {
                     if (tempFiles[0].size > 1024 * 1024 * 5) {
                        that.$message.confirm('图片最多支持5M大小,超出大小限制')
                        return
                     }
                  })
                  this.$message.hideLoading()
                  if (code == 0) {
                     await this.refreshList()
                     this.$message.showToast('提交成功')
                     that.$message.showLoading()
                     that.$http.upload(tempFiles[0].path).then(async res => {
                        console.log('res1', res)
                        var pic = res.data && res.data.length > 0 && res.data[
                              0]
                           .url || ''
                        that.$message.hideLoading()
                        that.submitForm.pictures.push(pic)
                        that.$forceUpdate()
                     }).catch(res => {
                        that.$message.hideLoading()
                        console.error(res)
                     })
                  }
               }
            })
         },
         async addFeedback() {
            this.submitForm = {
               feedBack: '',
               type: '',
               pictures: [],
            }
            this.$refs.popup.open()

            // const res = await this.$message.confirm('', {
            //    editable: true,
            //    title: '请填写投诉/反馈内容'
            // })
            // if (res.content && res.confirm) {
            //    // 发送请求
            //    if (!res.content) {
            //       this.$message.showToast('未填写内容')
            //    } else {
            //       this.$message.showLoading()
            //       const {
            //          code
            //       } = await this.$http.request('post', '', {
            //          data: {
            //             feedBack: res.content
            //          }
            //       })
            //       this.$message.hideLoading()
            //       if (code == 0) {
            //          await this.refreshList()
            //          this.$message.showToast('提交成功')
            //       }
            //    }


            } else {
            // } else {

            // }
         },
			
         async submit() {
            console.log('submitForm',this.submitForm)
            if (!this.submitForm.type) {
               this.$message.showToast('未选择类型')
               return
            }
            if (!this.submitForm.feedBack) {
               this.$message.showToast('未填写内容')
               return
            }
            this.$message.showLoading()
            const {
               code
            } = await this.$http.request('post', '/api/feedback/page/new', {
               data: {
                  feedBack: this.submitForm.feedBack,
                  type: this.submitForm.type,
                  pictures: JSON.stringify(this.submitForm.pictures)
               }
            })
            this.$message.hideLoading()
            if (code == 0) {
               this.$refs.popup.close()
               await this.refreshList()
               this.$message.showToast('提交成功')
            }
         }

@@ -163,4 +289,12 @@
         }
      }
   }
   .component-popup_input_all{
      .check-img {
         width: 96rpx;
         height: 96rpx;
         border-radius: 4rpx;
         border: 2rpx dashed #CECECE;
      }
   }
</style>