feedback.vue 5.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233
  1. <template>
  2. <view class="page">
  3. <view class="feedback-title">
  4. <text>问题和意见</text>
  5. <text class="feedback-quick" @tap="chooseMsg">快速键入</text>
  6. </view>
  7. <view class="feedback-body"><textarea placeholder="请详细描述你的问题和意见..." v-model="sendDate.content" class="feedback-textare"></textarea></view>
  8. <view class="feedback-title"><text>图片(选填,提供问题截图,总大小10M以下)</text></view>
  9. <view class="feedback-body feedback-uploader">
  10. <view class="uni-uploader">
  11. <view class="uni-uploader-head">
  12. <view class="uni-uploader-title">点击预览图片</view>
  13. <view class="uni-uploader-info">{{ imageList.length }}/5</view>
  14. </view>
  15. <view class="uni-uploader-body">
  16. <view class="uni-uploader__files">
  17. <block v-for="(image, index) in imageList" :key="index">
  18. <view class="uni-uploader__file" style="position: relative;">
  19. <image class="uni-uploader__img" :src="image" @tap="previewImage(index)"></image>
  20. <view class="close-view" @click="close(index)">x</view>
  21. </view>
  22. </block>
  23. <view class="uni-uploader__input-box" v-show="imageList.length < 5"><view class="uni-uploader__input" @tap="chooseImg"></view></view>
  24. </view>
  25. </view>
  26. </view>
  27. </view>
  28. <view class="feedback-title"><text>QQ/邮箱</text></view>
  29. <view class="feedback-body"><input class="feedback-input" v-model="sendDate.contact" placeholder="(选填,方便我们联系你 )" /></view>
  30. <view class="feedback-title feedback-star-view">
  31. <text>应用评分</text>
  32. <view class="feedback-star-view"><uni-rate v-model="sendDate.score" color="#bbb"></uni-rate></view>
  33. </view>
  34. <button type="default" class="feedback-submit" @tap="send">提交</button>
  35. <view class="feedback-title"><text>用户反馈的结果可在app打包后于DCloud开发者中心查看</text></view>
  36. </view>
  37. </template>
  38. <script>
  39. export default {
  40. data() {
  41. return {
  42. msgContents: ['界面显示错乱', '启动缓慢,卡出翔了', 'UI无法直视,丑哭了', '偶发性崩溃'],
  43. stars: [1, 2, 3, 4, 5],
  44. imageList: [],
  45. sendDate: {
  46. score: 0,
  47. content: '',
  48. contact: ''
  49. }
  50. };
  51. },
  52. onLoad() {
  53. this.deviceInfo = {
  54. // appid: plus.runtime.appid,
  55. appid: '__UNI__5D0B0CA',
  56. imei: plus.device.imei, //设备标识
  57. p: plus.os.name === 'Android' ? 'a' : 'i', //平台类型,i表示iOS平台,a表示Android平台。
  58. md: plus.device.model, //设备型号
  59. app_version: plus.runtime.version,
  60. plus_version: plus.runtime.innerVersion, //基座版本号
  61. os: plus.os.version,
  62. net: '' + plus.networkinfo.getCurrentType()
  63. };
  64. this.sendDate = Object.assign(this.deviceInfo, this.sendDate);
  65. },
  66. methods: {
  67. /**
  68. * 关闭图片
  69. * @param {Object} e
  70. */
  71. close(e) {
  72. this.imageList.splice(e, 1);
  73. },
  74. /**
  75. * 快速输入
  76. */
  77. chooseMsg() {
  78. uni.showActionSheet({
  79. itemList: this.msgContents,
  80. success: res => {
  81. this.sendDate.content = this.msgContents[res.tapIndex];
  82. }
  83. });
  84. },
  85. /**
  86. * 选择图片
  87. */
  88. chooseImg() {
  89. //选择图片
  90. uni.chooseImage({
  91. sourceType: ['camera', 'album'],
  92. sizeType: 'compressed',
  93. count: 5 - this.imageList.length,
  94. success: res => {
  95. this.imageList = this.imageList.concat(res.tempFilePaths);
  96. }
  97. });
  98. },
  99. /**
  100. * 评分
  101. * @param {Object} e
  102. */
  103. chooseStar(e) {
  104. //点击评星
  105. this.sendDate.score = e;
  106. },
  107. /**
  108. * 预览图片
  109. * @param {Object} index
  110. */
  111. previewImage(index) {
  112. uni.previewImage({
  113. urls: this.imageList,
  114. current: this.imageList[index]
  115. });
  116. },
  117. /**
  118. * 提交
  119. */
  120. send() {
  121. //发送反馈
  122. if (this.sendDate.content.length === 0) {
  123. uni.showModal({
  124. content: '请输入问题和意见',
  125. showCancel: false
  126. });
  127. return;
  128. }
  129. uni.showLoading({
  130. title: '上传中...'
  131. });
  132. let imgs = this.imageList.map((value, index) => {
  133. return {
  134. name: 'images' + index,
  135. uri: value
  136. };
  137. });
  138. // TODO 服务端限制上传文件一次最大不超过 2M, 图片一次最多不超过5张
  139. this.request(this.sendDate, imgs)
  140. .then(res => {
  141. if (typeof res.data === 'string') {
  142. res.data = JSON.parse(res.data);
  143. }
  144. if (res.statusCode === 200 && res.data && res.data.ret === 0) {
  145. uni.showModal({
  146. content: '反馈成功',
  147. showCancel: false
  148. });
  149. this.imageList = [];
  150. this.sendDate = Object.assign(this.deviceInfo, {
  151. score: 0,
  152. content: '',
  153. contact: ''
  154. });
  155. } else if (res.statusCode !== 200) {
  156. uni.showModal({
  157. content: '反馈失败,错误码为:' + res.statusCode,
  158. showCancel: false
  159. });
  160. } else {
  161. uni.showModal({
  162. content: '反馈失败',
  163. showCancel: false
  164. });
  165. }
  166. })
  167. .catch(err => {
  168. console.log(err);
  169. });
  170. },
  171. /**
  172. * 发送请求到后台
  173. */
  174. request(sendDate, imgs) {
  175. return new Promise((resolve, reject) => {
  176. let fromData = {
  177. url: 'https://service.dcloud.net.cn/feedback',
  178. success: res => {
  179. resolve(res);
  180. },
  181. fail: res => {
  182. reject(res);
  183. },
  184. complete() {
  185. uni.hideLoading();
  186. }
  187. };
  188. if (imgs.length > 0) {
  189. fromData.files = imgs;
  190. fromData.formData = sendDate;
  191. uni.uploadFile(fromData);
  192. } else {
  193. fromData.data = sendDate;
  194. fromData.method = 'POST';
  195. uni.request(fromData);
  196. }
  197. });
  198. }
  199. }
  200. };
  201. </script>
  202. <style>
  203. page {
  204. background-color: #efeff4;
  205. }
  206. .input-view {
  207. font-size: 28rpx;
  208. }
  209. .close-view {
  210. text-align: center;
  211. line-height: 14px;
  212. height: 16px;
  213. width: 16px;
  214. border-radius: 50%;
  215. background: #ff5053;
  216. color: #ffffff;
  217. position: absolute;
  218. top: -6px;
  219. right: -4px;
  220. font-size: 12px;
  221. }
  222. </style>