index.vue 9.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377
  1. <template>
  2. <view :style="{ minHeight: sys.windowHeight + 'px' }" :class="[$tm.vx.state().tmVuetify.black ? 'black' : ' ']">
  3. <tm-menubars title="我的评价" :shadow="0" :showback="true"></tm-menubars>
  4. <div class="zhuti">
  5. <tm-sheet class="kuang" style="padding-bottom: 70px !important;">
  6. <view style="width: 94%;margin:0 auto;">
  7. <tm-cartCellListFood class="shangpin" :typeclick="typeclick" :mdata="item"
  8. :cart-num.sync="item.buy"></tm-cartCellListFood>
  9. <view class="tiyan">
  10. <text class="text-white mr-20">产品体验</text>
  11. <tm-rate v-model="rate1"></tm-rate>
  12. <text class="ml-20 text-size-s" v-if="rate1==5">非常满意</text>
  13. <text class="ml-20 text-size-s" v-if="rate1<=4&&rate1>3">比较满意</text>
  14. <text class="ml-20 text-size-s" v-if="rate1<=3&&rate1>0">一般满意</text>
  15. </view>
  16. <view class="tiyan">
  17. <text class="text-white mr-20">派送评价</text>
  18. <tm-rate v-model="rate2"></tm-rate>
  19. <text class="ml-20 text-size-s" v-if="rate2==5">非常满意</text>
  20. <text class="ml-20 text-size-s" v-if="rate2<=4&&rate2>3">比较满意</text>
  21. <text class="ml-20 text-size-s" v-if="rate2<=3&&rate2>0">一般满意</text>
  22. </view>
  23. <view class="tiyan">
  24. <text class="text-white mr-20">服务态度</text>
  25. <tm-rate v-model="rate3"></tm-rate>
  26. <text class="ml-20 text-size-s" v-if="rate3==5">非常满意</text>
  27. <text class="ml-20 text-size-s" v-if="rate3<=4&&rate3>3">比较满意</text>
  28. <text class="ml-20 text-size-s" v-if="rate3<=3&&rate3>0">一般满意</text>
  29. </view>
  30. <tm-input class="shuru" :height="150" title="" :maxlength="144" :border-bottom="false"
  31. placeholder="快来发表评论吧!" input-type="textarea" v-model="val_1" bg-color="grey-lighten-5" clear>
  32. </tm-input>
  33. <view class="mt-30">
  34. <view class="">
  35. <view class="cent-bottom-m">
  36. <view class="uploadImg" style="display: flex;justify-content: flex-start;flex-wrap: wrap;align-items: flex-start;">
  37. <view v-for="(el, index) in fileList" :key="index">
  38. <view class="uploadImg-image" >
  39. <image @click="checkImgbox(fileList, index)" :src="imgUrl+el"
  40. mode="aspectFill" style="width: 100%;height: 100%;border-radius: 4px;">
  41. </image>
  42. <view class="jian" @click="popImg(index)">
  43. <tm-button class="shanchu" theme="white" size="s" icon="icon-times">
  44. </tm-button>
  45. </view>
  46. </view>
  47. </view>
  48. <view class="jia-btn" @click="openImagePage" v-if="uploadFlag">
  49. <view class="jia">
  50. <view>
  51. <tm-button theme="white" size="m" icon="icon-plus"></tm-button>
  52. </view>
  53. <view style="font-size: 12px;">上传图片</view>
  54. </view>
  55. </view>
  56. </view>
  57. </view>
  58. </view>
  59. <!-- <tm-upload :tips="false" :filelist.sync="filelist" max='5'></tm-upload> -->
  60. </view>
  61. <tm-button :round="24" class="sao" block @click="submit">提交</tm-button>
  62. </view>
  63. </tm-sheet>
  64. </div>
  65. <!-- 弹出层消息 -->
  66. <tm-message ref="toast"></tm-message>
  67. </view>
  68. </template>
  69. <script>
  70. import {
  71. myRequest
  72. } from '@/api/request.js'
  73. export default {
  74. data() {
  75. return {
  76. item: {
  77. img: '../../static/img/83.png',
  78. title: '丝缎质感纹理风衣',
  79. label: '黑色 - 6518/320',
  80. size: 'S',
  81. price: '1299',
  82. id: 3,
  83. buy: 0,
  84. itemId: 0,
  85. checked: false,
  86. },
  87. // typeclick:5,//1加入购物车,2购物车
  88. typeclick: 7, //1加入购物车,2购物车
  89. rate1: 0,
  90. rate2: 0,
  91. rate3: 0,
  92. val_1: '',
  93. // filelist:["https://picsum.photos/200?v=555","https://picsum.photos/200?v=555"],
  94. // filelist:[],
  95. fileList: [],
  96. imgUrl: "",
  97. sizeType: ['compressed'],
  98. imageList: [], // 申诉图片地址
  99. uploadFlag: true, // 申诉图片大于3张隐藏上传按钮
  100. orNo: '',
  101. };
  102. },
  103. onLoad(op) {
  104. console.log(op);
  105. if (op) {
  106. this.orNo = op.no;
  107. }
  108. },
  109. created() {
  110. if (!uni.getStorageSync("token")) {
  111. uni.navigateTo({
  112. url: "/pages/login/index",
  113. })
  114. }
  115. this.sys = uni.getSystemInfoSync();
  116. },
  117. methods: {
  118. openImagePage() {
  119. let that = this;
  120. if (that.fileList.length > 5) {
  121. uni.showToast({
  122. title: "最多支持5张图片",
  123. icon: "none"
  124. })
  125. return;
  126. }
  127. uni.chooseImage({
  128. count: 1,
  129. sizeType: ['compressed'],
  130. sourceType: ['album', 'camera'],
  131. success: function(res) {
  132. uni.showLoading({
  133. title: '图片上传中'
  134. });
  135. that.uploadImage(res.tempFilePaths)
  136. }
  137. });
  138. },
  139. uploadImage(tempFilePaths) {
  140. let _this = this;
  141. uni.uploadFile({
  142. url: 'http://yigui.liliju.com/common/uploads/upload', //接口地址
  143. header: {
  144. "token": uni.getStorageSync('token'),
  145. }, //请求token
  146. filePath: tempFilePaths[0],
  147. name: 'file',
  148. success: (res) => {
  149. let data = JSON.parse(res.data);
  150. console.log(data);
  151. let url = data.data.yimg;
  152. console.log(url, 'url');
  153. // 选中图片
  154. if (_this.fileList.indexOf(url) == -1) {
  155. _this.fileList.push(url);
  156. console.log(_this.fileList, 'haah');
  157. }
  158. uni.hideLoading();
  159. if (_this.fileList.length > 5) {
  160. _this.uploadFlag = false
  161. } else {
  162. _this.uploadFlag = true
  163. }
  164. }
  165. });
  166. },
  167. checkImgbox(fileList, index) { //放大图片
  168. console.log(fileList, index, 999)
  169. let arr = [];
  170. fileList.forEach((el) => {
  171. arr.push(this.imgUrl + el);
  172. })
  173. uni.previewImage({
  174. urls: arr,
  175. current: index
  176. });
  177. },
  178. popImg(index) { //删除图片
  179. this.fileList.splice(index, 1);
  180. if (this.fileList.length < 1) {
  181. this.uploadFlag = true
  182. }
  183. },
  184. // 上传图片
  185. aa(num) {
  186. if (num == 1) {
  187. this.checked1 = true;
  188. this.checked2 = false;
  189. this.checked3 = false;
  190. } else if (num == 2) {
  191. this.checked1 = false;
  192. this.checked2 = true;
  193. this.checked3 = false;
  194. } else if (num == 3) {
  195. this.checked1 = false;
  196. this.checked2 = false;
  197. this.checked3 = true;
  198. }
  199. },
  200. // 提交评价
  201. submit() {
  202. if (this.rate1 == 0 || this.rate2 == 0 || this.rate3 == 0) {
  203. uni.showToast({
  204. title: '请选择满意度',
  205. icon: 'none'
  206. })
  207. } else if (this.val_1 == '') {
  208. uni.showToast({
  209. title: '内容不能为空',
  210. icon: 'none'
  211. })
  212. } else {
  213. let that = this;
  214. myRequest({
  215. url: '/api/Order/orderEvaluate',
  216. method: 'post',
  217. data: {
  218. id: that.orNo,
  219. experience_value: that.rate1,
  220. delivery_value: that.rate2,
  221. service_value: that.rate3,
  222. atlas: that.fileList.join(','),
  223. content: that.val_1
  224. }
  225. }).then(res => {
  226. if (res.data.code == 200) {
  227. console.log(res.data.data, 'pingjia1!!');
  228. that.$refs.toast.show({
  229. model: 'success',
  230. label: res.data.msg
  231. })
  232. } else {
  233. that.$refs.toast.show({
  234. model: 'error',
  235. label: res.data.msg
  236. })
  237. }
  238. })
  239. }
  240. }
  241. },
  242. }
  243. </script>
  244. <style lang="scss">
  245. /deep/ .tm-menubars .body {
  246. background-color: #1b1b1b !important;
  247. }
  248. /deep/ .zhuti {
  249. padding: 10px 10px;
  250. }
  251. /deep/ .kuang {
  252. margin: 0 !important;
  253. padding: 0px !important;
  254. }
  255. .uploadImg-image {
  256. width: 70px;
  257. height: 70px;
  258. margin: 0px 10px 10px 0px;
  259. position: relative;
  260. }
  261. .shanchu {
  262. position: absolute;
  263. right: -15px;
  264. top: -5px;
  265. }
  266. /deep/ .jia .tm-button-btn {
  267. padding: 0px !important;
  268. margin: 0px !important;
  269. }
  270. /deep/ .jia .tm-button-btn .px-12 {
  271. padding: 0 !important;
  272. }
  273. /deep/ .uploadImg-image .white {
  274. background: none !important;
  275. color: #ffffff !important;
  276. }
  277. /deep/ .jia .white {
  278. background: none !important;
  279. color: #ffffff !important;
  280. }
  281. .sao {
  282. width: 90%;
  283. margin: 0 auto;
  284. margin-top: 20px;
  285. }
  286. /deep/ .shuliang .text-size-n {
  287. color: white !important;
  288. }
  289. /deep/ .shangpin .tm-cartCellListFood {
  290. padding: 0px 0px 15px 0px !important;
  291. margin-top: 5px !important;
  292. margin-bottom: 20px !important;
  293. border-bottom: 1px solid #1B1B1B;
  294. }
  295. /deep/ .kuang .border-t-1.bk {
  296. border-top: 1px solid #1b1b1b !important;
  297. }
  298. /deep/ .shangpin .title {
  299. color: white !important;
  300. }
  301. /deep/ .shangpin .text-red {
  302. color: white !important;
  303. }
  304. /deep/ .shangpin .round-3 {
  305. width: 90px !important;
  306. height: 90px !important;
  307. }
  308. /deep/ .shangpin .tm-cartCellListFood-img {
  309. width: 90px !important;
  310. height: 90px !important;
  311. }
  312. /deep/ .shuliang .text-size-n {
  313. color: white !important;
  314. }
  315. .tiyan text {
  316. vertical-align: middle;
  317. }
  318. .tiyan {
  319. margin-top: 20px;
  320. }
  321. /deep/ .tiyan .text-primary.bk {
  322. color: #FFCC00 !important;
  323. }
  324. /deep/ .tiyan .opacity-6 {
  325. opacity: 1 !important;
  326. }
  327. /deep/ .shuru .grey-darken-4 {
  328. background: #0D0D0D !important;
  329. }
  330. .shuru {
  331. padding: 0px !important;
  332. margin-top: 20px !important;
  333. }
  334. .jia {
  335. width: 100%;
  336. height: 100%;
  337. display: flex;
  338. flex-direction: column;
  339. justify-content: center;
  340. align-items: center;
  341. }
  342. .jia-btn {
  343. width: 70px;
  344. height: 70px;
  345. border: 1px solid #ffffff;
  346. border-radius: 4px;
  347. }
  348. </style>