evaluate.vue 8.4 KB

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