evaluate.vue 8.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412
  1. <template>
  2. <view class="content">
  3. <view class="order-item">
  4. <view class="goods-box-single">
  5. <image class="goods-img" :src="productInfo.image" mode="aspectFill"></image>
  6. <view class="right position-relative">
  7. <view class="flex">
  8. <text class="title">{{ productInfo.store_name }}</text>
  9. <view class="title-right">
  10. <view class="price">{{ productInfo.price }}</view>
  11. <view class="attr-box">x{{ list.cart_num }}</view>
  12. </view>
  13. </view>
  14. </view>
  15. </view>
  16. <view>
  17. <view class="flex_item zhil">
  18. <view>商品质量</view>
  19. <view><uniRate text="1" size="20" margin="10" :value="rateValue1" @change="rateChange1"></uniRate></view>
  20. </view>
  21. <view class="flex_item zhil">
  22. <view>服务态度</view>
  23. <view><uniRate text="1" size="20" margin="10" :value="rateValue2" @change="rateChange2"></uniRate></view>
  24. </view>
  25. <view class="equity_box">
  26. <view class="text-box uni-textarea">
  27. <textarea placeholder-style="color:#999" :placeholder="placeholder" @blur="bindTextAreaBlur"></textarea>
  28. </view>
  29. <view class="">
  30. <view class="add-img-box flex_item">
  31. <view class="add-img-item" v-for="(item, index) in imgList" :key="index">
  32. <image class="add-img" @click.stop="imgInfo(index)" :src="item.url" mode="aspectFill"></image>
  33. <image class="add-img-del" @click.stop="delImg(index)" src="/static/img/delete.png"></image>
  34. </view>
  35. <view v-if="imgList.length < 9" class="add-img-item" @click.stop="scImg()">
  36. <image class="add-img" src="/static/img/add.png"></image>
  37. </view>
  38. </view>
  39. </view>
  40. </view>
  41. </view>
  42. </view>
  43. <view @click.stop="submit" class="address-box submit-box"><text class="submit-btn">提交评论</text></view>
  44. </view>
  45. </template>
  46. <script>
  47. import { product, upload, order_comment } from '@/api/order.js';
  48. import uniRate from '@/components/uni-rate/uni-rate.vue';
  49. export default {
  50. components: {
  51. uniRate
  52. },
  53. data() {
  54. return {
  55. list: '', //订单详情
  56. productInfo: '',
  57. text: '', //评论内容
  58. placeholder: '商品满足你的期待么?说说你的想法,分享给想买的他们吧~',
  59. imgList: [],
  60. unique: '', //商品唯一标识码
  61. cloudimgList: [],
  62. rateValue1: '', //商品质量
  63. rateValue2: '', //服务态度
  64. imgCount: 6 //最多支持9张上传,可以修改
  65. };
  66. },
  67. onLoad(option) {
  68. this.unique = option.unique;
  69. this.loadOrder();
  70. },
  71. onShow() {},
  72. methods: {
  73. //text
  74. bindTextAreaBlur: function(e) {
  75. this.text = e.detail.value;
  76. },
  77. //获取收入支出信息
  78. async loadOrder() {
  79. product({
  80. unique: this.unique
  81. }).then(e => {
  82. this.list = e.data;
  83. this.productInfo = e.data.productInfo;
  84. });
  85. },
  86. //商品质量评分
  87. rateChange1(val) {
  88. this.rateValue1 = val.value;
  89. },
  90. //服务态度评分
  91. rateChange2(val) {
  92. this.rateValue2 = val.value;
  93. },
  94. //单张上传图片
  95. scImg() {
  96. let obj = this;
  97. console.log(obj.imgCount, 11);
  98. if (obj.imgCount == 0) {
  99. uni.showToast({
  100. title: '最多添加6张图片',
  101. icon: 'none'
  102. });
  103. return;
  104. }
  105. uni.showLoading({
  106. title:'上传中...',
  107. mask:true
  108. })
  109. upload({
  110. file: ''
  111. })
  112. .then(e => {
  113. uni.hideLoading()
  114. console.log(e,'e')
  115. obj.imgList = [...obj.imgList, ...e];
  116. console.log(obj.imgList,'imgList')
  117. obj.imgCount = 10 - obj.imgList.length;
  118. console.log(obj.imgCount ,'imgCount ')
  119. })
  120. .catch(e => {
  121. uni.hideLoading()
  122. });
  123. },
  124. //提交评论
  125. submit(e) {
  126. let obj = this;
  127. if (obj.imgList.length < 1) {
  128. uni.showToast({
  129. title: '请添加图片',
  130. icon: 'none'
  131. });
  132. return;
  133. }
  134. for (let i = 0; i < obj.imgList.length; i++) {
  135. obj.cloudimgList.push(obj.imgList[i].url);
  136. }
  137. let arr = obj.cloudimgList.join(',');
  138. order_comment({
  139. pics: arr,
  140. comment: obj.text,
  141. product_score: obj.rateValue1,
  142. service_score: obj.rateValue2,
  143. unique: obj.unique,
  144. })
  145. .then(e => {
  146. uni.navigateTo({
  147. url: '/pages/order/order?state=4'
  148. });
  149. })
  150. .catch(e => {
  151. uni.navigateTo({
  152. url: '/pages/order/order?state=4'
  153. });
  154. });
  155. },
  156. //点击图片显示大图
  157. imgInfo(i) {
  158. let tempList = [];
  159. console.log(111);
  160. this.imgList.forEach(e => {
  161. tempList.push(e.url);
  162. });
  163. console.log(tempList);
  164. //显示图片
  165. uni.previewImage({
  166. current: i,
  167. loop: false,
  168. urls: tempList,
  169. indicator: 'default'
  170. });
  171. },
  172. //删除图片
  173. delImg(i) {
  174. uni.showModal({
  175. content: '确定删除这张吗',
  176. success: res => {
  177. if (res.confirm) {
  178. this.imgList.splice(i, 1);
  179. this.imgCount++;
  180. } else if (res.cancel) {
  181. }
  182. }
  183. });
  184. },
  185. // 页面跳转
  186. navto(e) {
  187. uni.navigateTo({
  188. url: e
  189. });
  190. }
  191. }
  192. };
  193. </script>
  194. <style lang="scss">
  195. page {
  196. background: #ffffff;
  197. height: 100%;
  198. .content {
  199. background: #ffffff;
  200. height: 100%;
  201. }
  202. }
  203. /* 多条商品 */
  204. .order-item {
  205. display: flex;
  206. flex-direction: column;
  207. padding: 0rpx 30rpx;
  208. background: #fff;
  209. margin-top: 20rpx;
  210. /* 单条商品 */
  211. .goods-box-single {
  212. display: flex;
  213. padding: 20rpx 0;
  214. .goods-img {
  215. display: block;
  216. width: 120rpx;
  217. height: 120rpx;
  218. }
  219. .right {
  220. flex: 1;
  221. display: flex;
  222. flex-direction: column;
  223. padding: 0 30rpx 0 24rpx;
  224. overflow: hidden;
  225. height: 100%;
  226. .title {
  227. align-self: flex-start;
  228. font-size: $font-base + 2rpx;
  229. color: $font-color-dark;
  230. height: 80rpx;
  231. overflow:hidden;
  232. text-overflow:ellipsis;
  233. display:-webkit-box;
  234. -webkit-box-orient:vertical;
  235. -webkit-line-clamp:2;
  236. }
  237. .title-right {
  238. flex-shrink: 0;
  239. text-align: right;
  240. align-self: flex-start;
  241. }
  242. .attr-box {
  243. font-size: $font-sm + 2rpx;
  244. color: $font-color-light;
  245. }
  246. .price {
  247. font-size: $font-base + 2rpx;
  248. color: $font-color-dark;
  249. &:before {
  250. content: '¥';
  251. font-size: $font-sm;
  252. margin: 0 2rpx 0 8rpx;
  253. }
  254. }
  255. }
  256. }
  257. }
  258. .equity_box {
  259. background-color: #fafafa;
  260. border-radius: 10rpx;
  261. padding: 25rpx 25rpx;
  262. margin: 25rpx 0rpx;
  263. .text-box {
  264. height: 200rpx;
  265. textarea {
  266. font-size: 25rpx;
  267. width: 100%;
  268. height: 100%;
  269. overflow: hidden;
  270. text-overflow: ellipsis;
  271. display: -webkit-box;
  272. -webkit-box-orient: vertical;
  273. -webkit-line-clamp: 5;
  274. }
  275. }
  276. }
  277. .zhil {
  278. font-size: 28rpx !important;
  279. padding: 15rpx 15rpx;
  280. }
  281. .submit-box {
  282. bottom: 0;
  283. left: 0;
  284. width: 750rpx;
  285. }
  286. .submit-btn {
  287. margin-top: 10px;
  288. display: inline-block;
  289. width: 670rpx;
  290. height: 96rpx;
  291. line-height: 96rpx;
  292. text-align: center;
  293. background-color: #1BCC26 !important;
  294. opacity: 1;
  295. border-radius: 32rpx;
  296. border-width: 8rpx;
  297. border-color: rgba(255, 255, 255, 1);
  298. box-shadow: 0rpx 8rpx 12rpx rgba(0, 0, 0, 0.16);
  299. border-radius: 56rpx;
  300. font-size: 39rpx;
  301. font-weight: bold;
  302. color: rgba(255, 255, 255, 1);
  303. }
  304. .submit-btn-txt {
  305. font-size: 39rpx;
  306. font-weight: bold;
  307. line-height: 47rpx;
  308. color: rgba(255, 255, 255, 1);
  309. opacity: 1;
  310. }
  311. .map-box {
  312. width: 484rpx;
  313. height: 256rpx;
  314. border-width: 4rpx;
  315. border-color: rgba(255, 255, 255, 1);
  316. box-shadow: 0rpx 0rpx 24rpx rgba(0, 0, 0, 0.16);
  317. /* border-radius: 12rpx; */
  318. position: relative;
  319. }
  320. .map {
  321. position: absolute;
  322. top: 0;
  323. left: 0;
  324. right: 0;
  325. bottom: 0;
  326. width: 476rpx;
  327. height: 250rpx;
  328. }
  329. .map-img {
  330. position: absolute;
  331. top: 90rpx;
  332. left: 156rpx;
  333. width: 230rpx;
  334. height: 68rpx;
  335. background-color: rgba(51, 51, 51, 0.64);
  336. border-width: 1rpx;
  337. border-color: rgba(0, 0, 0, 0);
  338. border-radius: 34px;
  339. font-size: 28rpx;
  340. font-weight: bold;
  341. line-height: 66rpx;
  342. color: rgba(255, 255, 255, 1);
  343. text-align: center;
  344. }
  345. .address-box {
  346. padding: 15rpx 40rpx;
  347. margin-bottom: 10px;
  348. }
  349. .label {
  350. font-size: 36rpx;
  351. font-weight: bold;
  352. line-height: 50rpx;
  353. color: #222222;
  354. }
  355. .label-img {
  356. padding-left: 40rpx;
  357. }
  358. .add-img-box {
  359. width: 100%;
  360. flex-direction: row;
  361. flex-wrap: wrap;
  362. margin-top: 50rpx;
  363. }
  364. .add-img-item {
  365. width: 180rpx;
  366. height: 180rpx;
  367. border-radius: 24rpx;
  368. position: relative;
  369. margin: 0rpx 20rpx;
  370. margin-bottom: 25rpx;
  371. .add-img {
  372. width: 100%;
  373. height: 100%;
  374. border-radius: 24rpx;
  375. }
  376. }
  377. .add-img-camera {
  378. flex: 1;
  379. }
  380. .add-img-del {
  381. position: absolute;
  382. width: 40rpx;
  383. height: 40rpx;
  384. left: 155rpx;
  385. bottom: 155rpx;
  386. //background-color: rgba(238, 0, 0, 1);
  387. border-radius: 20rpx;
  388. }
  389. .address-time {
  390. width: 484rpx;
  391. height: 88rpx;
  392. background-color: rgba(245, 245, 245, 1);
  393. opacity: 1;
  394. border-radius: 24rpx;
  395. text-align: center;
  396. font-size: 35rpx;
  397. font-weight: 500;
  398. color: rgba(51, 51, 51, 1);
  399. }
  400. .line {
  401. width: 750rpx;
  402. height: 1px;
  403. transform: scaleY(0.3);
  404. background-color: rgba(0, 0, 0, 0.5);
  405. }
  406. </style>