add.vue 4.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179
  1. <!-- 评价 -->
  2. <template>
  3. <s-layout title="评价">
  4. <view>
  5. <view v-for="(item, index) in state.orderInfo.items" :key="item.id">
  6. <view>
  7. <view class="commont-from-wrap">
  8. <!-- 评价商品 -->
  9. <s-goods-item
  10. :img="item.picUrl"
  11. :title="item.spuName"
  12. :skuText="item.properties.map((property) => property.valueName).join(' ')"
  13. :price="item.payPrice"
  14. :num="item.count"
  15. />
  16. </view>
  17. <view class="form-item">
  18. <!-- 评分 -->
  19. <view class="star-box ss-flex ss-col-center">
  20. <view class="star-title ss-m-r-40">商品质量</view>
  21. <uni-rate v-model="state.commentList[index].descriptionScores" />
  22. </view>
  23. <view class="star-box ss-flex ss-col-center">
  24. <view class="star-title ss-m-r-40">服务态度</view>
  25. <uni-rate v-model="state.commentList[index].benefitScores" />
  26. </view>
  27. <!-- 评价 -->
  28. <view class="area-box">
  29. <uni-easyinput :inputBorder="false" type="textarea" maxlength="120" autoHeight
  30. v-model="state.commentList[index].content"
  31. placeholder="宝贝满足你的期待吗?说说你的使用心得,分享给想买的他们吧~" />
  32. <!-- TODO 芋艿:文件上传 -->
  33. <view class="img-box">
  34. <s-uploader v-model:url="state.commentList[index].images" fileMediatype="image"
  35. limit="9" mode="grid" :imageStyles="{ width: '168rpx', height: '168rpx' }" @success="(payload) => uploadSuccess(payload, index)" />
  36. </view>
  37. </view>
  38. <view class="checkbox-container">
  39. <checkbox-group @change="(event) => toggleAnonymous(index, event)">
  40. <label>
  41. <checkbox value="anonymousChecked" />
  42. 匿名评论
  43. </label>
  44. </checkbox-group>
  45. </view>
  46. </view>
  47. </view>
  48. </view>
  49. </view>
  50. <!-- TODO 芋艿:是否匿名 -->
  51. <su-fixed bottom placeholder>
  52. <view class="foot_box ss-flex ss-row-center ss-col-center">
  53. <button class="ss-reset-button post-btn ui-BG-Main-Gradient ui-Shadow-Main" @tap="onSubmit">
  54. 发布
  55. </button>
  56. </view>
  57. </su-fixed>
  58. </s-layout>
  59. </template>
  60. <script setup>
  61. import sheep from '@/sheep';
  62. import { onLoad } from '@dcloudio/uni-app';
  63. import { reactive, ref } from 'vue';
  64. import OrderApi from '@/sheep/api/trade/order';
  65. const state = reactive({
  66. orderInfo: {},
  67. commentList: [],
  68. id: null
  69. });
  70. /**
  71. * 切换是否匿名
  72. *
  73. * @param commentIndex 当前评论下标
  74. * @param event 复选框事件
  75. */
  76. function toggleAnonymous(commentIndex, event) {
  77. state.commentList[commentIndex].anonymous = event.detail.value[0] === 'anonymousChecked';
  78. }
  79. /**
  80. * 发布评论
  81. *
  82. * @returns {Promise<void>}
  83. */
  84. async function onSubmit() {
  85. // 顺序提交评论
  86. for (const comment of state.commentList) {
  87. await OrderApi.createOrderItemComment(comment);
  88. }
  89. // 都评论好,返回
  90. sheep.$router.back();
  91. }
  92. /**
  93. * 图片添加到表单
  94. *
  95. * @param payload 上传成功后的回调数据
  96. * @param commentIndex 当前评论的下标
  97. */
  98. function uploadSuccess(payload, commentIndex) {
  99. state.commentList[commentIndex].picUrls = state.commentList[commentIndex].images;
  100. }
  101. onLoad(async (options) => {
  102. if (!options.id) {
  103. sheep.$helper.toast(`缺少订单信息,请检查`);
  104. return
  105. }
  106. state.id = options.id;
  107. const { code, data } = await OrderApi.getOrderDetail(state.id);
  108. if (code !== 0) {
  109. sheep.$helper.toast('无待评价订单');
  110. return
  111. }
  112. // 处理评论
  113. data.items.forEach((item) => {
  114. state.commentList.push({
  115. anonymous: false,
  116. orderItemId: item.id,
  117. descriptionScores: 5,
  118. benefitScores: 5,
  119. content: '',
  120. picUrls: []
  121. });
  122. });
  123. state.orderInfo = data;
  124. });
  125. </script>
  126. <style lang="scss" scoped>
  127. .checkbox-container{
  128. padding: 10rpx;
  129. }
  130. // 评价商品
  131. .goods-card {
  132. margin: 10rpx 0;
  133. padding: 20rpx;
  134. background: #fff;
  135. }
  136. // 评论,选择图片
  137. .form-item {
  138. background: #fff;
  139. .star-box {
  140. height: 100rpx;
  141. padding: 0 25rpx;
  142. }
  143. .star-title {
  144. font-weight: 600;
  145. }
  146. }
  147. .area-box {
  148. width: 690rpx;
  149. min-height: 306rpx;
  150. background: rgba(249, 250, 251, 1);
  151. border-radius: 20rpx;
  152. padding: 28rpx;
  153. margin: auto;
  154. .img-box {
  155. margin-top: 20rpx;
  156. }
  157. }
  158. .post-btn {
  159. width: 690rpx;
  160. line-height: 80rpx;
  161. border-radius: 40rpx;
  162. color: rgba(#fff, 0.9);
  163. margin-bottom: 20rpx;
  164. }
  165. </style>