addcomment.vue 4.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166
  1. <template>
  2. <view class="page-wrap">
  3. <u-navbar
  4. title="发表评价"
  5. :placeholder="true"
  6. :autoBack="true"
  7. :safeAreaInsetTop="true"
  8. >
  9. </u-navbar>
  10. <view class="product u-flex">
  11. <u--image :showLoading="true" :src="details.mainImg" width="180rpx" height="180rpx"></u--image>
  12. <view class="text">
  13. <view class="up">
  14. <view class="name ellipsis-2">{{details.goodsName}}</view>
  15. <view class="info">
  16. <text v-if="details.specification">{{details.specification}}</text>
  17. <text v-if="details.unit">{{details.unit}}</text>
  18. </view>
  19. </view>
  20. <!-- <view class="down u-flex u-row-between">
  21. <view class="left">
  22. <text class="price">¥ <text class="price-num">{{details.price}}</text></text>
  23. </view>
  24. </view> -->
  25. </view>
  26. </view>
  27. <view class="rate-wrap u-flex">
  28. <text class="rate-title">商品评价</text>
  29. <u-rate count="5" v-model="params.star" active-color="#FFBE00" size="20"></u-rate>
  30. <text class="rate-text">{{params.star|rateText}}</text>
  31. </view>
  32. <u--textarea v-model="params.contentText" height="200rpx" maxlength="200" placeholder="如实描述商品和使用感受,更受欢迎" ></u--textarea>
  33. <view class="upload-wrap">
  34. <u-upload
  35. width="140rpx"
  36. height="140rpx"
  37. :fileList="fileList"
  38. @beforeRead="beforeRead"
  39. @afterRead="afterRead"
  40. @delete="deletePic"
  41. :previewImage="true"
  42. :multiple="false"
  43. name="name"
  44. :maxCount="5"
  45. ></u-upload>
  46. </view>
  47. <view class="full-btn" @click="submit">提交评价</view>
  48. </view>
  49. </template>
  50. <script>
  51. import {uploadImg} from '../utils/uploadImg.js'
  52. export default {
  53. data() {
  54. return {
  55. id:'',
  56. goodsId:'',
  57. params:{
  58. orderId:'',
  59. orderDetailId:'',
  60. star:5,
  61. contentText:'',
  62. contentImgList:[]
  63. },
  64. fileList:[],
  65. details:{},
  66. staticUrl:this.$commonConfig.staticUrl,
  67. }
  68. },
  69. onShow() {
  70. },
  71. onLoad(page) {
  72. console.log('page',page);
  73. this.params.orderId = page.orderId;
  74. this.params.orderDetailId = page.orderDetailId;
  75. this.goodsId = page.goodsId;
  76. this.getDetails(this.goodsId)
  77. },
  78. methods: {
  79. getDetails(id){
  80. this.$u.api.memberGoodDetails({id:id}).then(res=>{
  81. this.details = res.data
  82. console.log('memberGoodDetails',JSON.parse(JSON.stringify(res.data)));
  83. }).catch(err=>{
  84. console.log('getDetails',err);
  85. })
  86. },
  87. // 新增图片
  88. async afterRead(event){
  89. //使用这个封装
  90. const result = await uploadImg(event,this.fileList)
  91. let parseResult = JSON.parse(result.data).data;
  92. console.log('result===',result);
  93. // console.log('event===',event.file);
  94. // console.log('fileList===',this.fileList);
  95. // console.log('parseResult===',parseResult);
  96. // for(let i=0;i<event.file.length;i++){
  97. // }
  98. let item = this.fileList[result.fileListLen]
  99. this.fileList.splice(result.fileListLen, 1, Object.assign(item, {
  100. status: 'success',
  101. message: '成功',
  102. url: JSON.parse(result.data).data
  103. }));
  104. },
  105. // 删除图片
  106. deletePic(event) {
  107. this.fileList.splice(event.index, 1)
  108. },
  109. submit(){
  110. console.log('this.fileList---',this.fileList);
  111. this.params.contentImgList = this.fileList.map(item =>{
  112. console.log('contentImgList===',item.url);
  113. if(item.message=='成功'){
  114. return item.url.url
  115. }
  116. });
  117. this.$u.api.addGoodsComment(this.params).then(res=>{
  118. console.log('res',res.data);
  119. uni.showToast({
  120. title:res.msg,
  121. complete() {
  122. uni.navigateBack()
  123. }
  124. });
  125. }).catch(err=>{
  126. console.log('addGoodsComment',err);
  127. })
  128. console.log('params',this.params);
  129. }
  130. }
  131. }
  132. </script>
  133. <style>
  134. page{
  135. background-color: #F5F5F5;
  136. }
  137. </style>
  138. <style lang="scss" scoped>
  139. .product{
  140. background-color: #fff;
  141. margin-bottom: 0;
  142. }
  143. .rate-wrap{
  144. background-color: #fff;
  145. margin-bottom: 20rpx;
  146. padding: 20rpx;
  147. .rate-title{
  148. font-size: 30rpx;
  149. color: #333;
  150. font-weight: 600;
  151. margin-right: 20rpx;
  152. }
  153. .rate-text{
  154. font-size: 26rpx;
  155. margin-left: 20rpx;
  156. color: #ccc;
  157. }
  158. }
  159. .upload-wrap{
  160. margin-top: 40rpx;
  161. padding: 20rpx;
  162. background-color: #fff;
  163. }
  164. </style>