complain.vue 8.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319
  1. <template>
  2. <view class="page" style="background-color: #ffffff;">
  3. <view class="feedback-title">投诉类型</view>
  4. <view class="feedback-body" @tap="showType = true">
  5. <view class="feedback-input">{{typeName ? typeName : '请选择投诉类型'}}</view>
  6. </view>
  7. <view class="feedback-title">投诉标题</view>
  8. <view class="feedback-body">
  9. <input class="feedback-input" v-model="sendDate.title" placeholder="请输入投诉标题 " />
  10. </view>
  11. <view class="feedback-title">投诉内容</view>
  12. <view class="feedback-body" style="height: 300upx;">
  13. <u-input v-model="sendDate.content" type="textarea" placeholder="请详细描述你的问题... " height="300" />
  14. </view>
  15. <view class="feedback-title">投诉图</view>
  16. <view class="margin-lr-sm">
  17. <view class="flex " style="overflow: hidden;flex-direction: initial;flex-wrap: wrap;">
  18. <view v-if="Imgo.length">
  19. <view class=" flex margin-right-sm flex-wrap">
  20. <view class="flex margin-top-xs"
  21. style="width: 200rpx;height: 200rpx;margin-right: 5rpx;position: relative;"
  22. v-for="(image,index) in Imgo" :key="index">
  23. <image :src="image" style="width: 100%;height: 100%;"></image>
  24. <view style="z-index: 9;position: absolute;top: -15rpx;right: -15rpx;"
  25. @click="removeImg(index)">
  26. <u-icon name="close-circle-fill" color="#2979ff" size="50rpx"></u-icon>
  27. </view>
  28. </view>
  29. </view>
  30. </view>
  31. <view class="" @click="addImages(2)" v-if="Imgo.length<=5">
  32. <view style="width: 200rpx;height: 200rpx;background: #f4f5f6;"
  33. class="flex justify-center align-center">
  34. <view>
  35. <view class="text-center">
  36. <u-icon name="plus" color="#666666" size="28"></u-icon>
  37. </view>
  38. <view class="text-center">选择图片</view>
  39. </view>
  40. </view>
  41. </view>
  42. </view>
  43. </view>
  44. <button type="primary" style="" class="feedback-submit" @tap="send">提交</button>
  45. <u-action-sheet :list="typeList" v-model="showType" @click="typeCallback"></u-action-sheet>
  46. </view>
  47. </template>
  48. <script>
  49. import configdata from '@/common/config.js';
  50. export default {
  51. data() {
  52. return {
  53. newTypeList: [],
  54. typeId: '',
  55. typeName: '',
  56. typeList: [],
  57. showType: false,
  58. msgContents: ['界面显示错乱', '启动缓慢,卡出翔了', 'UI无法直视,丑哭了', '偶发性崩溃'],
  59. stars: [1, 2, 3, 4, 5],
  60. imageList: [],
  61. sendDate: {
  62. content: '',
  63. // contact: '',
  64. title: '',
  65. image: "",
  66. },
  67. ordersId: '',
  68. Imgo: [],
  69. byUserId: '',
  70. byuserName: '',
  71. userName: '',
  72. title: '',
  73. ordersNo: ''
  74. };
  75. },
  76. onLoad(e) {
  77. this.getTypeList();
  78. this.getUserInfo();
  79. this.ordersId = e.id
  80. this.byuserName = e.byuserName
  81. this.byUserId = e.byUserId
  82. // #ifdef APP-PLUS
  83. let deviceInfo = {
  84. appid: plus.runtime.appid,
  85. imei: plus.device.imei, //设备标识
  86. p: plus.os.name === 'Android' ? 'a' : 'i', //平台类型,i表示iOS平台,a表示Android平台。
  87. md: plus.device.model, //设备型号
  88. app_version: plus.runtime.version,
  89. plus_version: plus.runtime.innerVersion, //基座版本号
  90. os: plus.os.version,
  91. net: '' + plus.networkinfo.getCurrentType()
  92. };
  93. this.sendDate = Object.assign(deviceInfo, this.sendDate);
  94. // #endif
  95. },
  96. methods: {
  97. typeCallback(index) {
  98. console.log(index)
  99. this.typeName = this.newTypeList[index].title;
  100. this.typeId = this.newTypeList[index].id;
  101. },
  102. getTypeList() {
  103. this.$Request.getT('/app/message/selectMessageList?page=1&limit=50&state=6').then(res => {
  104. if (res.code == 0) {
  105. if (res.data.list && res.data.list.length > 0) {
  106. this.newTypeList = res.data.list;
  107. res.data.list.forEach((d, index) => {
  108. let data = {
  109. text: d.title,
  110. label: index
  111. }
  112. this.typeList.push(data);
  113. });
  114. }
  115. }
  116. });
  117. },
  118. // 详情图删除
  119. removeImg(index) {
  120. console.log(index)
  121. this.Imgo.splice(index, 1)
  122. },
  123. close(e) {
  124. this.imageList.splice(e, 1);
  125. },
  126. getUserInfo() {
  127. this.$Request.get("/app/user/selectUserById").then(res => {
  128. if (res.code == 0) {
  129. this.userName = res.data.userName
  130. uni.setStorageSync('avatar', res.data.avatar)
  131. uni.setStorageSync('invitationCode', res.data.invitationCode)
  132. uni.setStorageSync('zhiFuBao', res.data.zhiFuBao)
  133. uni.setStorageSync('zhiFuBaoName', res.data.zhiFuBaoName)
  134. }
  135. });
  136. },
  137. send() {
  138. //发送反馈
  139. this.sendDate.image = this.Imgo
  140. this.sendDate.image = this.sendDate.image.toString()
  141. // console.log(JSON.stringify(this.sendDate));
  142. if (!this.typeId) {
  143. uni.showToast({
  144. icon: 'none',
  145. title: '请选择投诉类型'
  146. });
  147. return;
  148. }
  149. if (!this.sendDate.content) {
  150. uni.showToast({
  151. icon: 'none',
  152. title: '请输入投诉内容'
  153. });
  154. return;
  155. }
  156. if (!this.Imgo) {
  157. uni.showToast({
  158. icon: 'none',
  159. title: '请上传投诉图片'
  160. });
  161. return;
  162. }
  163. this.$queue.showLoading('加载中...');
  164. let userId = this.$queue.getData("userId");
  165. this.$Request.postJson('/app/message/insertMessage', {
  166. // ordersId: this.ordersId,
  167. byUserId: this.byUserId,
  168. title: this.sendDate.title,
  169. image: this.sendDate.image,
  170. userId: userId,
  171. content: this.sendDate.content,
  172. state: 7,
  173. type: 0,
  174. typeId: this.typeId,
  175. typeName: this.typeName,
  176. userName: this.userName,
  177. byUserName: this.byuserName,
  178. }).then(res => {
  179. if (res.code === 0) {
  180. uni.showToast({
  181. title: '投诉成功'
  182. });
  183. setTimeout(function() {
  184. // uni.navigateBack();
  185. uni.redirectTo({
  186. url: '/my/order/tousuList'
  187. })
  188. }, 1000);
  189. } else {
  190. uni.hideLoading();
  191. uni.showModal({
  192. showCancel: false,
  193. title: '投诉失败',
  194. content: res.msg
  195. });
  196. }
  197. });
  198. }, // 图片上传
  199. addImages(e) {
  200. let that = this
  201. uni.chooseImage({
  202. count: 6,
  203. sourceType: ['album', 'camera'],
  204. success: res => {
  205. for (let i = 0; i < res.tempFilePaths.length; i++) {
  206. that.$queue.showLoading("上传中...");
  207. uni.uploadFile({ // 上传接口
  208. url: that.config("APIHOST1") + '/alioss/upload', //真实的接口地址
  209. filePath: res.tempFilePaths[i],
  210. name: 'file',
  211. success: (uploadFileRes) => {
  212. if (e == 2) {
  213. console.log(JSON.parse(uploadFileRes.data).data)
  214. that.Imgo.push(JSON.parse(uploadFileRes.data).data)
  215. }
  216. uni.hideLoading();
  217. }
  218. });
  219. }
  220. }
  221. })
  222. },
  223. config: function(name) {
  224. var info = null;
  225. if (name) {
  226. var name2 = name.split("."); //字符分割
  227. if (name2.length > 1) {
  228. info = configdata[name2[0]][name2[1]] || null;
  229. } else {
  230. info = configdata[name] || null;
  231. }
  232. if (info == null) {
  233. let web_config = cache.get("web_config");
  234. if (web_config) {
  235. if (name2.length > 1) {
  236. info = web_config[name2[0]][name2[1]] || null;
  237. } else {
  238. info = web_config[name] || null;
  239. }
  240. }
  241. }
  242. }
  243. return info;
  244. },
  245. }
  246. };
  247. </script>
  248. <style>
  249. @font-face {
  250. font-family: uniicons;
  251. font-weight: normal;
  252. font-style: normal;
  253. src: url('https://img-cdn-qiniu.dcloud.net.cn/fonts/uni.ttf') format('truetype');
  254. }
  255. page {
  256. background-color: #ffffff !important;
  257. }
  258. view {
  259. font-size: 28upx;
  260. }
  261. /*问题反馈*/
  262. .feedback-title {
  263. display: flex;
  264. flex-direction: row;
  265. justify-content: space-between;
  266. align-items: center;
  267. padding: 20upx;
  268. color: #333333;
  269. font-size: 28upx;
  270. }
  271. .feedback-star-view.feedback-title {
  272. justify-content: flex-start;
  273. margin: 0;
  274. }
  275. .feedback-body {
  276. font-size: 32upx;
  277. padding: 16upx;
  278. margin: 16upx;
  279. border-radius: 16upx;
  280. background: #F5F5F5;
  281. /* color: #FFF; */
  282. }
  283. .feedback-textare {
  284. height: 200upx;
  285. font-size: 34upx;
  286. line-height: 50upx;
  287. width: 100%;
  288. box-sizing: border-box;
  289. padding: 20upx 30upx 0;
  290. }
  291. .feedback-input {
  292. font-size: 32upx;
  293. height: 60upx;
  294. /* padding: 15upx 20upx; */
  295. line-height: 60upx;
  296. }
  297. .feedback-submit {
  298. background: #2FB57A;
  299. color: #ffffff;
  300. margin: 20upx;
  301. margin-top: 32upx;
  302. }
  303. </style>