uniapp意见反馈程序

<template>
   <view>
       <view class="feedback-title">意见反馈： </view>
       <view class="feedback-content">
           <textarea class="feedback-textarea" v-model="content" placeholder="请输入您要反馈的问题" />
       </view>
       <view class="feedback-title">反馈图片： </view>
       <view class="feedback-image-box">
           <view class="feedback-image-item" v-for="(item,index) in imageLists" :key="index">
               <view class="close-icon" @click="del(index)">
                   <uni-icons type="closeempty" size="18" color="#fff"></uni-icons>
               </view>
               <view class="image-box">
                   <image :src="item.url" mode="aspectFill"></image>
               </view>
           </view>
           <view v-if="imageLists.length<5" class="feedback-image-item" @click="addImage">
               <view class="image-box">
                   <uni-icons type="plusempty" size="50" color="#eee"></uni-icons>
               </view>
           </view>
       </view>
       <button class="feedback-button" type="primary" @click="submit">提交反馈意见</button>
   </view>
</template>

console.log(imagesPath);
               this.updateFeedback({
                   content: this.content,
                   feedbackImages: imagesPath
               })
           },
           async uploadFiles(filePath) {
               const result = await uniCloud.uploadFile({
                   filePath: filePath,
                   cloudPath: "file",
               })
               console.log(result);
               return result.fileID
           },
           updateFeedback({
               content,
               feedbackImages
           }) {
               this.$api.update_feedback({
                   content,
                   feedbackImages
               }).then(res => {
                   uni.hideLoading()
                   uni.showToast({
                       title: "反馈提交成功",
                       icon: 'none'
                   })
                   setTimeout(() => {
                       uni.switchTab({
                           url: '/pages/tabbar/my/my'
                       })
                   }, 2000)
               }).catch(() => {
                   uni.hideLoading()
                   uni.showToast({
                       title: "反馈提交失败",
                       icon: "none"
                   })
               })
           }
       }
   }
</script>

.feedback-content {
       margin: 15px;
       padding: 10px;
       box-sizing: border-box;
       border: 1px #eee solid;

.feedback-textarea {
           font-size: 12px;
           width: 100%;
           height: 100px;
       }
   }

.feedback-image-box {
       display: flex;
       flex-wrap: wrap;
       padding: 10px;

.feedback-image-item {
           position: relative;
           width: 33.33%;
           height: 0;
           padding-top: 33.33%;
           box-sizing: border-box;

.close-icon {
               display: flex;
               justify-content: center;
               align-items: center;
               position: absolute;
               right: 0;
               top: 0;
               width: 22px;
               height: 22px;
               border-radius: 50%;
               background-color: #ff5a5f;
               z-index: 2;
           }

.image-box {
               display: flex;
               justify-content: center;
               align-items: center;
               position: absolute;
               top: 5px;
               right: 5px;
               bottom: 5px;
               left: 5px;
               border: 1px #eee solid;
               border-radius: 5px;
               overflow: hidden;

image {
                   width: 100%;
                   height: 100%;
               }

}
}
}

.feedback-button {
       margin: 0 15px;
       background-color: $mk-base-color;
   }
</style>

uniapp意见反馈程序相关推荐

微信小程序：意见反馈制作（1）（可加图片）
微信小程序:意见反馈制作(可加图片) 不同类型的微信小程序可能需要不同的意见反馈样式,仅以我做的为例,具体样式可自行修改 1.小程序自带意见反馈(非常简单) <button open-type= ...
微信小程序意见反馈的实现
第一种:自己实现 feedback.js: const url = require('../../utils/requireurl.js').url; Page({/*** 页面的初始数据*/data ...
小程序意见反馈界面（简洁版代码）
在开发个人中心页面时,意见反馈功能是必不可少的,下面介绍该功能的具体开发流程 1.首先看一下效果图: 2.WXML代码,分为三个部分,文本域(TextArea).输入框(Input).按钮(Butto ...
微信小程序使用意见反馈
使用微信提供的意见反馈一.button调用意见反馈 1.直接上代码 <button open-type='feedback'>意见反馈</button> 简单吧.看点击调用效 ...
13 | 小程序实战之意见反馈
前言其实微信小程序的button按钮,open-type可以跳转到内置的意见反馈界面,你如果想自己自定义一个意见反馈界面可以看看这篇文章,可以上传图片的哟 13.1 效果 13.2 静态页面 < ...
微信小程序商城项目实战(完结篇:意见反馈)
微信小程序商城项目完结意见反馈代码实现首先修改标题并且使用之前写好的tab组件编写界面编写样式逻辑处理js 效果图意见反馈做假的意见反馈,主要练习一下微信小程序文件上传api以及样式界 ...
微信小程序——实现邀请好友，联系客服，分享，意见反馈等功能
在微信小程序的开发中,我们很多时候都要实现联系客服,邀请好友,分享,意见反馈等功能.在这里我为大家贴出实现代码. 这些功能都是组件的开放功能,通过给open-type赋不同的值来实现分享功能 < ...
微信小程序——意见反馈页面的实现（使用使用微信官方反馈功能）
微信小程序--意见反馈页面的实现 (使用使用微信官方反馈功能) 代码: .json {"navigationBarTitleText": "问题反馈" } .w ...
小程序实战：云函数开发及本地调试（意见反馈实例）
序本次实例开发意见反馈模块,功能非常简单,用户填写意见保存到云数据库同时可查看历史数据. 云开发/云函数开发者可以使用云开发开发微信小程序.小游戏,无需搭建服务器,即可使用云端能力. 云开发为开发 ...

uniapp意见反馈程序

uniapp意见反馈程序相关推荐

最新文章

热门文章